526 lines
22 KiB
TypeScript
526 lines
22 KiB
TypeScript
import { useState, useEffect, useRef, type KeyboardEvent } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import { Layout } from '@/components/layout/Layout';
|
|
import {
|
|
PrimaryButton,
|
|
DataTable,
|
|
ActionDropdown,
|
|
DeleteConfirmationModal,
|
|
Modal,
|
|
FormField,
|
|
FormTextArea,
|
|
FormSelect,
|
|
FilterDropdown,
|
|
Pagination,
|
|
type Column,
|
|
SearchBox,
|
|
} from '@/components/shared';
|
|
import { Plus, Code, X, Tag } from 'lucide-react';
|
|
import { notificationService } from '@/services/notification-service';
|
|
import { moduleService } from '@/services/module-service';
|
|
import { showToast } from '@/utils/toast';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
|
|
const categorySchema = z.object({
|
|
name: z.string().min(1, 'Category name is required').max(100),
|
|
code: z.string().min(1, 'Category slug is required').regex(/^[a-z0-9_]+$/, 'Slug must be lowercase alphanumeric with underscores'),
|
|
description: z.string().optional(),
|
|
module_id: z.string().optional(),
|
|
});
|
|
|
|
const codeSchema = z.object({
|
|
code: z.string().min(1, 'Code is required').max(50),
|
|
name: z.string().min(1, 'Display name is required').max(100),
|
|
description: z.string().optional(),
|
|
default_channels: z.array(z.string()),
|
|
default_priority: z.string(),
|
|
});
|
|
|
|
type CategoryFormValues = z.infer<typeof categorySchema>;
|
|
type CodeFormValues = z.infer<typeof codeSchema>;
|
|
|
|
// ── Variable Tag Input ──────────────────────────────────────────────────────
|
|
const VariableTagInput = ({
|
|
variables,
|
|
onChange,
|
|
}: {
|
|
variables: string[];
|
|
onChange: (vars: string[]) => void;
|
|
}) => {
|
|
const [input, setInput] = useState('');
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const addTag = (val: string) => {
|
|
const tag = val.trim().replace(/\s+/g, '_').toLowerCase();
|
|
if (tag && !variables.includes(tag)) {
|
|
onChange([...variables, tag]);
|
|
}
|
|
setInput('');
|
|
};
|
|
|
|
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
|
|
e.preventDefault();
|
|
addTag(input);
|
|
} else if (e.key === 'Backspace' && !input && variables.length > 0) {
|
|
onChange(variables.slice(0, -1));
|
|
}
|
|
};
|
|
|
|
const removeTag = (tag: string) => onChange(variables.filter(v => v !== tag));
|
|
|
|
return (
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1.5">
|
|
<span className="flex items-center gap-1.5">
|
|
<Tag className="w-3.5 h-3.5 text-indigo-500" />
|
|
Supported Variables
|
|
<span className="text-gray-400 font-normal">(used in template placeholders)</span>
|
|
</span>
|
|
</label>
|
|
<div
|
|
className="flex flex-wrap gap-1.5 p-2 border border-gray-200 rounded-lg bg-white min-h-[42px] cursor-text focus-within:ring-2 focus-within:ring-indigo-500/20 focus-within:border-indigo-400 transition-all"
|
|
onClick={() => inputRef.current?.focus()}
|
|
>
|
|
{variables.map(v => (
|
|
<span key={v} className="flex items-center gap-1 bg-indigo-50 border border-indigo-200 text-indigo-700 text-[11px] font-mono font-bold px-2 py-0.5 rounded-full">
|
|
{`{{${v}}}`}
|
|
<button type="button" onClick={() => removeTag(v)} className="hover:text-red-600 transition-colors ml-0.5">
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
<input
|
|
ref={inputRef}
|
|
value={input}
|
|
onChange={e => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
onBlur={() => input && addTag(input)}
|
|
placeholder={variables.length === 0 ? 'Type variable name, press Enter or comma...' : ''}
|
|
className="flex-1 min-w-[120px] text-xs outline-none bg-transparent text-gray-700 placeholder-gray-300"
|
|
/>
|
|
</div>
|
|
<p className="text-[10px] text-gray-400 mt-1">
|
|
These are the <code>{'{{variable}}'}</code> placeholders admins can use in templates for this event code.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const NotificationMaster = (): ReactElement => {
|
|
const [categories, setCategories] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
|
|
// Pagination & Search for Categories
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [limit, setLimit] = useState(10);
|
|
const [totalItems, setTotalItems] = useState(0);
|
|
const [totalPages, setTotalPages] = useState(0);
|
|
const [search, setSearch] = useState('');
|
|
const [moduleFilter, setModuleFilter] = useState<string | null>(null);
|
|
|
|
// Category Modal
|
|
const [categoryModalOpen, setCategoryModalOpen] = useState<boolean>(false);
|
|
const [editingCategory, setEditingCategory] = useState<any>(null);
|
|
|
|
const {
|
|
register: registerCategory,
|
|
handleSubmit: handleCategorySubmit,
|
|
reset: resetCategory,
|
|
setValue: setCategoryValue,
|
|
formState: { errors: categoryErrors },
|
|
watch: watchCategory,
|
|
} = useForm<CategoryFormValues>({
|
|
resolver: zodResolver(categorySchema),
|
|
defaultValues: { name: '', code: '', description: '', module_id: '' }
|
|
});
|
|
|
|
// Code Modal
|
|
const [codeModalOpen, setCodeModalOpen] = useState<boolean>(false);
|
|
const [selectedCategory, setSelectedCategory] = useState<any>(null);
|
|
const [codes, setCodes] = useState<any[]>([]);
|
|
const [isCodesLoading, setIsCodesLoading] = useState<boolean>(false);
|
|
|
|
// Pagination for Codes
|
|
const [codePage, setCodePage] = useState(1);
|
|
const [codeTotal, setCodeTotal] = useState(0);
|
|
const [codePages, setCodePages] = useState(0);
|
|
|
|
const [editingCode, setEditingCode] = useState<any>(null);
|
|
const [codeVariables, setCodeVariables] = useState<string[]>([]);
|
|
|
|
const {
|
|
register: registerCode,
|
|
handleSubmit: handleCodeSubmit,
|
|
reset: resetCode,
|
|
formState: { errors: codeErrors },
|
|
} = useForm<CodeFormValues>({
|
|
resolver: zodResolver(codeSchema),
|
|
defaultValues: { code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' }
|
|
});
|
|
|
|
// Delete Modal
|
|
const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
|
|
const [deleteTarget, setDeleteTarget] = useState<{ id: string, name: string, type: 'category' | 'code' } | null>(null);
|
|
|
|
const [modules, setModules] = useState<any[]>([]);
|
|
|
|
const fetchCategories = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const res = await notificationService.getCategories({
|
|
limit,
|
|
offset: (currentPage - 1) * limit,
|
|
search,
|
|
module_id: moduleFilter || undefined
|
|
});
|
|
if (res.success) {
|
|
setCategories(res.data);
|
|
setTotalItems(res.pagination?.total || res.data.length);
|
|
setTotalPages(res.pagination?.pages || 1);
|
|
}
|
|
} catch (err: any) {
|
|
showToast.error(err.message || 'Failed to fetch categories');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchModules = async () => {
|
|
try {
|
|
const res = await moduleService.getDropdown();
|
|
if (res.success) setModules(res.data);
|
|
} catch (err) {
|
|
console.error('Failed to fetch modules', err);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchCategories();
|
|
fetchModules();
|
|
}, [currentPage, limit, search, moduleFilter]);
|
|
|
|
const fetchCodes = async (category: any, page: number = 1) => {
|
|
try {
|
|
setIsCodesLoading(true);
|
|
const res = await notificationService.getCodesByCategory(category.id, {
|
|
limit: 5,
|
|
offset: (page - 1) * 5
|
|
});
|
|
if (res.success) {
|
|
setCodes(res.data);
|
|
setCodeTotal(res.pagination?.total || res.data.length);
|
|
setCodePages(res.pagination?.pages || 1);
|
|
}
|
|
} catch (err: any) {
|
|
showToast.error('Failed to fetch codes');
|
|
} finally {
|
|
setIsCodesLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleOpenCodes = async (category: any) => {
|
|
setSelectedCategory(category);
|
|
setCodePage(1);
|
|
setEditingCode(null);
|
|
setCodeVariables([]);
|
|
resetCode({ code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' });
|
|
await fetchCodes(category, 1);
|
|
setCodeModalOpen(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (selectedCategory && codeModalOpen) {
|
|
fetchCodes(selectedCategory, codePage);
|
|
}
|
|
}, [codePage]);
|
|
|
|
const onSaveCategory = async (data: CategoryFormValues) => {
|
|
try {
|
|
const payload = { ...data };
|
|
if (!payload.module_id) delete payload.module_id;
|
|
|
|
if (editingCategory) {
|
|
await notificationService.updateCategory(editingCategory.id, payload);
|
|
showToast.success('Category updated');
|
|
} else {
|
|
await notificationService.createCategory(payload);
|
|
showToast.success('Category created');
|
|
}
|
|
setCategoryModalOpen(false);
|
|
resetCategory();
|
|
fetchCategories();
|
|
} catch (err: any) {
|
|
showToast.error(err.response?.data?.error?.message || err.message || 'Action failed');
|
|
}
|
|
};
|
|
|
|
const onSaveCode = async (data: CodeFormValues) => {
|
|
try {
|
|
const payload = { ...data, variables: codeVariables };
|
|
if (editingCode) {
|
|
await notificationService.updateCode(editingCode.id, payload);
|
|
showToast.success('Code updated');
|
|
} else {
|
|
await notificationService.createCode(selectedCategory.id, payload);
|
|
showToast.success('Code created');
|
|
}
|
|
setEditingCode(null);
|
|
setCodeVariables([]);
|
|
resetCode({ code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' });
|
|
fetchCodes(selectedCategory, codePage);
|
|
} catch (err: any) {
|
|
showToast.error(err.response?.data?.error?.message || err.message || 'Action failed');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteTarget) return;
|
|
try {
|
|
if (deleteTarget.type === 'category') {
|
|
await notificationService.deleteCategory(deleteTarget.id);
|
|
fetchCategories();
|
|
} else {
|
|
await notificationService.deleteCode(deleteTarget.id);
|
|
fetchCodes(selectedCategory, codePage);
|
|
}
|
|
setDeleteModalOpen(false);
|
|
showToast.success(`${deleteTarget.type === 'category' ? 'Category' : 'Code'} deleted`);
|
|
} catch (err: any) {
|
|
showToast.error(err.message || 'Delete failed');
|
|
}
|
|
};
|
|
|
|
const columns: Column<any>[] = [
|
|
{ key: 'name', label: 'Category Name', render: (c) => <span className="font-semibold text-[#0f1724]">{c.name}</span> },
|
|
{ key: 'code', label: 'Slug / Code', render: (c) => <code className="text-[10px] bg-gray-100 px-1.5 py-0.5 rounded font-mono text-gray-600">{c.code}</code> },
|
|
{ key: 'description', label: 'Description', render: (c) => <span className="text-xs text-gray-500 line-clamp-1">{c.description || '-'}</span> },
|
|
{ key: 'module_id', label: 'Assoc. Module', render: (c) => <span className="text-[10px] text-blue-500 font-bold uppercase">{c.module_code || 'System'}</span> },
|
|
{
|
|
key: 'actions',
|
|
label: 'Actions',
|
|
align: 'right',
|
|
render: (c) => (
|
|
<div className="flex justify-end gap-3 items-center">
|
|
<button
|
|
onClick={() => handleOpenCodes(c)}
|
|
className="flex items-center gap-1.5 text-[11px] font-bold text-blue-600 hover:text-blue-800 transition-colors uppercase"
|
|
>
|
|
<Code className="w-3.5 h-3.5" />
|
|
Codes ({c.code_count || 0})
|
|
</button>
|
|
<ActionDropdown
|
|
onEdit={() => {
|
|
setEditingCategory(c);
|
|
resetCategory({ name: c.name, code: c.code, description: c.description || '', module_id: c.module_id || '' });
|
|
setCategoryModalOpen(true);
|
|
}}
|
|
onDelete={() => {
|
|
setDeleteTarget({ id: c.id, name: c.name, type: 'category' });
|
|
setDeleteModalOpen(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout
|
|
currentPage="Notification Master"
|
|
pageHeader={{
|
|
title: 'Notification Master Management',
|
|
description: 'Manage notification categories and event codes across the platform.',
|
|
}}
|
|
>
|
|
<div className="overflow-hidden flex flex-col min-h-[500px]">
|
|
<div className="pb-2 flex flex-wrap justify-between items-center bg-gray-50/50 gap-4">
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<SearchBox
|
|
value={search}
|
|
onChange={(val) => {
|
|
setSearch(val);
|
|
setCurrentPage(1);
|
|
}}
|
|
placeholder="Search categories..."
|
|
containerClassName="relative flex-1 max-w-sm"
|
|
/>
|
|
|
|
<FilterDropdown
|
|
label="Module"
|
|
value={moduleFilter}
|
|
onChange={(val) => {
|
|
setModuleFilter(val as string | null);
|
|
setCurrentPage(1);
|
|
}}
|
|
options={modules.map((m) => ({ value: m.id, label: m.name }))}
|
|
placeholder="All Modules"
|
|
isSearchable
|
|
/>
|
|
</div>
|
|
<PrimaryButton onClick={() => {
|
|
setEditingCategory(null);
|
|
resetCategory({ name: '', code: '', description: '', module_id: '' });
|
|
setCategoryModalOpen(true);
|
|
}} className="flex gap-2">
|
|
<Plus className="w-4 h-4" /> New Category
|
|
</PrimaryButton>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<DataTable columns={columns} data={categories} isLoading={isLoading} keyExtractor={(c) => c.id} />
|
|
</div>
|
|
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
totalItems={totalItems}
|
|
limit={limit}
|
|
onPageChange={setCurrentPage}
|
|
onLimitChange={(l) => { setLimit(l); setCurrentPage(1); }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Category Modal */}
|
|
<Modal isOpen={categoryModalOpen} onClose={() => setCategoryModalOpen(false)} title={editingCategory ? "Edit Category" : "New Category"} maxWidth="lg">
|
|
<div className="space-y-4 p-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField label="Category Name" required placeholder="e.g. Workflow" error={categoryErrors.name?.message} {...registerCategory('name')} />
|
|
<FormField label="Slug (Code)" required placeholder="e.g. workflow" error={categoryErrors.code?.message} {...registerCategory('code')} />
|
|
</div>
|
|
<FormTextArea label="Description" rows={2} error={categoryErrors.description?.message} {...registerCategory('description')} />
|
|
<FormSelect
|
|
label="Associated Module"
|
|
value={watchCategory('module_id')}
|
|
options={[
|
|
{ value: '', label: 'System (No Module)' },
|
|
...modules.map(m => ({ value: m.id, label: m.name }))
|
|
]}
|
|
onValueChange={(val) => setCategoryValue('module_id', val, { shouldValidate: true })}
|
|
placeholder="Select a module"
|
|
error={categoryErrors.module_id?.message}
|
|
/>
|
|
<div className="flex justify-end gap-3 mt-6 pt-4 border-t">
|
|
<button onClick={() => setCategoryModalOpen(false)} className="px-4 py-2 text-sm text-gray-600">Cancel</button>
|
|
<PrimaryButton onClick={handleCategorySubmit(onSaveCategory)}>{editingCategory ? 'Update' : 'Create'}</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Codes Modal */}
|
|
<Modal isOpen={codeModalOpen} onClose={() => setCodeModalOpen(false)} title={`Event Codes: ${selectedCategory?.name}`} maxWidth="2xl">
|
|
<div className="p-6 space-y-6">
|
|
{/* ── Add / Edit Code Form ─────────────────────────────────── */}
|
|
<div className="bg-gray-50 p-5 rounded-xl border border-gray-200 space-y-4 shadow-inner">
|
|
<h3 className="text-[11px] font-bold uppercase text-gray-500 tracking-wider font-mono flex items-center gap-2">
|
|
<Plus className="w-3 h-3" /> {editingCode ? 'Edit Event Code' : 'Add New Event Trigger'}
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField label="Code (e.g. task_assigned)" required error={codeErrors.code?.message} disabled={!!editingCode} {...registerCode('code')} />
|
|
<FormField label="Display Name" required error={codeErrors.name?.message} {...registerCode('name')} />
|
|
</div>
|
|
<FormTextArea label="Description" rows={2} error={codeErrors.description?.message} {...registerCode('description')} />
|
|
|
|
{/* Variables tag input */}
|
|
<VariableTagInput variables={codeVariables} onChange={setCodeVariables} />
|
|
|
|
<div className="flex justify-between items-center pt-2">
|
|
<div className="text-[10px] text-gray-400 font-medium">Auto-populates default channels (In-App, Email)</div>
|
|
<div className="flex gap-3">
|
|
{editingCode && (
|
|
<button
|
|
onClick={() => {
|
|
setEditingCode(null);
|
|
setCodeVariables([]);
|
|
resetCode({ code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' });
|
|
}}
|
|
className="text-xs text-gray-500 hover:text-gray-800 underline transition-colors"
|
|
>
|
|
Cancel Edit
|
|
</button>
|
|
)}
|
|
<PrimaryButton onClick={handleCodeSubmit(onSaveCode)} size="default">
|
|
{editingCode ? 'Update Code' : 'Add Code'}
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Registered Codes Table ───────────────────────────────── */}
|
|
<div className="space-y-4">
|
|
<h4 className="text-[11px] font-bold text-gray-400 uppercase tracking-widest px-1">Registered Codes</h4>
|
|
<div className="border border-gray-100 rounded-xl overflow-hidden shadow-sm">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-[#f8fafc] border-b border-gray-100">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-[11px] font-bold text-gray-500 uppercase tracking-wider">Trigger Code</th>
|
|
<th className="px-4 py-3 text-left text-[11px] font-bold text-gray-500 uppercase tracking-wider">Name</th>
|
|
<th className="px-4 py-3 text-left text-[11px] font-bold text-gray-500 uppercase tracking-wider">Variables</th>
|
|
<th className="px-4 py-3 text-right text-[11px] font-bold text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50 text-[13px]">
|
|
{isCodesLoading ? (
|
|
<tr><td colSpan={4} className="px-4 py-10 text-center text-gray-400 animate-pulse">Loading codes...</td></tr>
|
|
) : codes.length === 0 ? (
|
|
<tr><td colSpan={4} className="px-4 py-10 text-center text-gray-400 italic">No codes registered for this category.</td></tr>
|
|
) : codes.map(c => (
|
|
<tr key={c.id} className="hover:bg-gray-50/50 transition-colors">
|
|
<td className="px-4 py-3"><code className="text-[11px] font-mono font-bold text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded border border-indigo-100">{c.code}</code></td>
|
|
<td className="px-4 py-3 font-medium text-gray-700">{c.name}</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex flex-wrap gap-1">
|
|
{Array.isArray(c.variables) && c.variables.length > 0
|
|
? c.variables.map((v: string) => (
|
|
<span key={v} className="text-[10px] font-mono bg-indigo-50 text-indigo-600 border border-indigo-100 px-1.5 py-0.5 rounded-full">{`{{${v}}}`}</span>
|
|
))
|
|
: <span className="text-[10px] text-gray-300 italic">none</span>
|
|
}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<button onClick={() => {
|
|
setEditingCode(c);
|
|
setCodeVariables(Array.isArray(c.variables) ? c.variables : []);
|
|
resetCode({ code: c.code, name: c.name, description: c.description || '', default_channels: c.default_channels, default_priority: c.default_priority });
|
|
}} className="text-blue-600 hover:text-blue-800 font-bold text-[11px] uppercase mr-3">Edit</button>
|
|
<button onClick={() => {
|
|
setDeleteTarget({ id: c.id, name: c.code, type: 'code' });
|
|
setDeleteModalOpen(true);
|
|
}} className="text-red-500 hover:text-red-700 font-bold text-[11px] uppercase">Delete</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Pagination
|
|
currentPage={codePage}
|
|
totalPages={codePages}
|
|
totalItems={codeTotal}
|
|
limit={5}
|
|
onPageChange={setCodePage}
|
|
onLimitChange={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
<DeleteConfirmationModal
|
|
isOpen={deleteModalOpen}
|
|
onClose={() => setDeleteModalOpen(false)}
|
|
onConfirm={handleDelete}
|
|
title={`Delete ${deleteTarget?.type}`}
|
|
message={`Are you sure you want to delete ${deleteTarget?.name}? This action cannot be undone.`}
|
|
itemName={deleteTarget?.name || ''}
|
|
/>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default NotificationMaster;
|