refactor: update NotificationMaster code style, reorganize state management, and enhance pagination functionality

src/components/shared/Pagination.tsx

@@ -142,7 +142,7 @@ export const Pagination = ({
               createPortal(
                 <div
                   data-limit-dropdown="true"
-                  className="fixed border border-[rgba(0,0,0,0.2)] rounded-md shadow-lg z-[250] max-h-60 overflow-y-auto"
+                  className="fixed bg-white border border-[rgba(0,0,0,0.15)] rounded-md shadow-lg z-[250] max-h-60 overflow-y-auto"
                   style={limitDropdownStyle}
                 >
                   <ul className="py-1.5">

src/pages/superadmin/NotificationMaster.tsx

@@ -1,6 +1,7 @@
-import { useState, useEffect, useRef, type KeyboardEvent } from 'react';
+import { useState, useEffect, useRef, type KeyboardEvent } from "react";
-import type { ReactElement } from 'react';
+import type { ReactElement } from "react";
-import { Layout } from '@/components/layout/Layout';
+import { useLocation } from "react-router-dom";
+import { Layout } from "@/components/layout/Layout";
 import {
   PrimaryButton,
   DataTable,
@@ -14,25 +15,31 @@ import {
   Pagination,
   type Column,
   SearchBox,
-} from '@/components/shared';
+} from "@/components/shared";
-import { Plus, Code, X, Tag } from 'lucide-react';
+import { Plus, Code, X, Tag } from "lucide-react";
-import { notificationService } from '@/services/notification-service';
+import { notificationService } from "@/services/notification-service";
-import { moduleService } from '@/services/module-service';
+import { moduleService } from "@/services/module-service";
-import { showToast } from '@/utils/toast';
+import { showToast } from "@/utils/toast";
-import { useForm } from 'react-hook-form';
+import { useForm } from "react-hook-form";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from 'zod';
+import { z } from "zod";
 
 const categorySchema = z.object({
-  name: z.string().min(1, 'Category name is required').max(100),
+  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'),
+  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),
+  code: z.string().min(1, "Code is required").max(50),
-  name: z.string().min(1, 'Display name is required').max(100),
+  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(),
@@ -49,27 +56,28 @@ const VariableTagInput = ({
   variables: string[];
   onChange: (vars: string[]) => void;
 }) => {
-  const [input, setInput] = useState('');
+  const [input, setInput] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
   const addTag = (val: string) => {
-    const tag = val.trim().replace(/\s+/g, '_').toLowerCase();
+    const tag = val.trim().replace(/\s+/g, "_").toLowerCase();
     if (tag && !variables.includes(tag)) {
       onChange([...variables, tag]);
     }
-    setInput('');
+    setInput("");
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
+    if (e.key === "Enter" || e.key === "," || e.key === " ") {
       e.preventDefault();
       addTag(input);
-    } else if (e.key === 'Backspace' && !input && variables.length > 0) {
+    } else if (e.key === "Backspace" && !input && variables.length > 0) {
       onChange(variables.slice(0, -1));
     }
   };
 
-  const removeTag = (tag: string) => onChange(variables.filter(v => v !== tag));
+  const removeTag = (tag: string) =>
+    onChange(variables.filter((v) => v !== tag));
 
   return (
     <div>
@@ -77,17 +85,26 @@ const VariableTagInput = ({
         <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 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 => (
+        {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">
+          <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">
+            <button
+              type="button"
+              onClick={() => removeTag(v)}
+              className="hover:text-red-600 transition-colors ml-0.5"
+            >
               <X className="w-3 h-3" />
             </button>
           </span>
@@ -95,21 +112,27 @@ const VariableTagInput = ({
         <input
           ref={inputRef}
           value={input}
-          onChange={e => setInput(e.target.value)}
+          onChange={(e) => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
           onBlur={() => input && addTag(input)}
-          placeholder={variables.length === 0 ? 'Type variable name, press Enter or comma...' : ''}
+          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.
+        These are the <code>{"{{variable}}"}</code> placeholders admins can use
+        in templates for this event code.
       </p>
     </div>
   );
 };
 
 const NotificationMaster = (): ReactElement => {
+  const location = useLocation();
   const [categories, setCategories] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
@@ -118,7 +141,7 @@ const NotificationMaster = (): ReactElement => {
   const [limit, setLimit] = useState(10);
   const [totalItems, setTotalItems] = useState(0);
   const [totalPages, setTotalPages] = useState(0);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
   const [moduleFilter, setModuleFilter] = useState<string | null>(null);
 
   // Category Modal
@@ -134,11 +157,14 @@ const NotificationMaster = (): ReactElement => {
     watch: watchCategory,
   } = useForm<CategoryFormValues>({
     resolver: zodResolver(categorySchema),
-    defaultValues: { name: '', code: '', description: '', module_id: '' }
+    defaultValues: { name: "", code: "", description: "", module_id: "" },
   });
 
-  // Code Modal
+  // View Mode
-  const [codeModalOpen, setCodeModalOpen] = useState<boolean>(false);
+  const [viewMode, setViewMode] = useState<"categories" | "codes">(
+    "categories",
+  );
+  const [codeFormModalOpen, setCodeFormModalOpen] = useState<boolean>(false);
   const [selectedCategory, setSelectedCategory] = useState<any>(null);
   const [codes, setCodes] = useState<any[]>([]);
   const [isCodesLoading, setIsCodesLoading] = useState<boolean>(false);
@@ -147,6 +173,7 @@ const NotificationMaster = (): ReactElement => {
   const [codePage, setCodePage] = useState(1);
   const [codeTotal, setCodeTotal] = useState(0);
   const [codePages, setCodePages] = useState(0);
+  const [codeLimit, setCodeLimit] = useState(5);
 
   const [editingCode, setEditingCode] = useState<any>(null);
   const [codeVariables, setCodeVariables] = useState<string[]>([]);
@@ -158,12 +185,22 @@ const NotificationMaster = (): ReactElement => {
     formState: { errors: codeErrors },
   } = useForm<CodeFormValues>({
     resolver: zodResolver(codeSchema),
-    defaultValues: { code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' }
+    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 [deleteTarget, setDeleteTarget] = useState<{
+    id: string;
+    name: string;
+    type: "category" | "code";
+  } | null>(null);
 
   const [modules, setModules] = useState<any[]>([]);
 
@@ -174,7 +211,7 @@ const NotificationMaster = (): ReactElement => {
         limit,
         offset: (currentPage - 1) * limit,
         search,
-        module_id: moduleFilter || undefined
+        module_id: moduleFilter || undefined,
       });
       if (res.success) {
         setCategories(res.data);
@@ -182,7 +219,7 @@ const NotificationMaster = (): ReactElement => {
         setTotalPages(res.pagination?.pages || 1);
       }
     } catch (err: any) {
-      showToast.error(err.message || 'Failed to fetch categories');
+      showToast.error(err.message || "Failed to fetch categories");
     } finally {
       setIsLoading(false);
     }
@@ -193,7 +230,7 @@ const NotificationMaster = (): ReactElement => {
       const res = await moduleService.getDropdown();
       if (res.success) setModules(res.data);
     } catch (err) {
-      console.error('Failed to fetch modules', err);
+      console.error("Failed to fetch modules", err);
     }
   };
 
@@ -202,12 +239,20 @@ const NotificationMaster = (): ReactElement => {
     fetchModules();
   }, [currentPage, limit, search, moduleFilter]);
 
-  const fetchCodes = async (category: any, page: number = 1) => {
+  useEffect(() => {
+    setViewMode("categories");
+  }, [location]);
+
+  const fetchCodes = async (
+    category: any,
+    page: number = 1,
+    currentLimit: number = codeLimit,
+  ) => {
     try {
       setIsCodesLoading(true);
       const res = await notificationService.getCodesByCategory(category.id, {
-        limit: 5,
+        limit: currentLimit,
-        offset: (page - 1) * 5
+        offset: (page - 1) * currentLimit,
       });
       if (res.success) {
         setCodes(res.data);
@@ -215,7 +260,7 @@ const NotificationMaster = (): ReactElement => {
         setCodePages(res.pagination?.pages || 1);
       }
     } catch (err: any) {
-      showToast.error('Failed to fetch codes');
+      showToast.error("Failed to fetch codes");
     } finally {
       setIsCodesLoading(false);
     }
@@ -226,16 +271,22 @@ const NotificationMaster = (): ReactElement => {
     setCodePage(1);
     setEditingCode(null);
     setCodeVariables([]);
-    resetCode({ code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' });
+    resetCode({
-    await fetchCodes(category, 1);
+      code: "",
-    setCodeModalOpen(true);
+      name: "",
+      description: "",
+      default_channels: ["in_app", "email"],
+      default_priority: "normal",
+    });
+    await fetchCodes(category, 1, codeLimit);
+    setViewMode("codes");
   };
 
   useEffect(() => {
-    if (selectedCategory && codeModalOpen) {
+    if (selectedCategory && viewMode === "codes") {
-      fetchCodes(selectedCategory, codePage);
+      fetchCodes(selectedCategory, codePage, codeLimit);
     }
-  }, [codePage]);
+  }, [codePage, codeLimit, selectedCategory, viewMode]);
 
   const onSaveCategory = async (data: CategoryFormValues) => {
     try {
@@ -244,16 +295,18 @@ const NotificationMaster = (): ReactElement => {
 
       if (editingCategory) {
         await notificationService.updateCategory(editingCategory.id, payload);
-        showToast.success('Category updated');
+        showToast.success("Category updated");
       } else {
         await notificationService.createCategory(payload);
-        showToast.success('Category created');
+        showToast.success("Category created");
       }
       setCategoryModalOpen(false);
       resetCategory();
       fetchCategories();
     } catch (err: any) {
-      showToast.error(err.response?.data?.error?.message || err.message || 'Action failed');
+      showToast.error(
+        err.response?.data?.error?.message || err.message || "Action failed",
+      );
     }
   };
 
@@ -262,46 +315,89 @@ const NotificationMaster = (): ReactElement => {
       const payload = { ...data, variables: codeVariables };
       if (editingCode) {
         await notificationService.updateCode(editingCode.id, payload);
-        showToast.success('Code updated');
+        showToast.success("Code updated");
       } else {
         await notificationService.createCode(selectedCategory.id, payload);
-        showToast.success('Code created');
+        showToast.success("Code created");
       }
       setEditingCode(null);
       setCodeVariables([]);
-      resetCode({ code: '', name: '', description: '', default_channels: ['in_app', 'email'], default_priority: 'normal' });
+      resetCode({
+        code: "",
+        name: "",
+        description: "",
+        default_channels: ["in_app", "email"],
+        default_priority: "normal",
+      });
+      setCodeFormModalOpen(false);
       fetchCodes(selectedCategory, codePage);
+      fetchCategories();
     } catch (err: any) {
-      showToast.error(err.response?.data?.error?.message || err.message || 'Action failed');
+      showToast.error(
+        err.response?.data?.error?.message || err.message || "Action failed",
+      );
     }
   };
 
   const handleDelete = async () => {
     if (!deleteTarget) return;
     try {
-      if (deleteTarget.type === 'category') {
+      if (deleteTarget.type === "category") {
         await notificationService.deleteCategory(deleteTarget.id);
         fetchCategories();
       } else {
         await notificationService.deleteCode(deleteTarget.id);
         fetchCodes(selectedCategory, codePage);
+        fetchCategories();
       }
       setDeleteModalOpen(false);
-      showToast.success(`${deleteTarget.type === 'category' ? 'Category' : 'Code'} deleted`);
+      showToast.success(
+        `${deleteTarget.type === "category" ? "Category" : "Code"} deleted`,
+      );
     } catch (err: any) {
-      showToast.error(err.message || 'Delete failed');
+      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',
+      key: "name",
-      label: 'Actions',
+      label: "Category Name",
-      align: 'right',
+      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
@@ -314,27 +410,154 @@ const NotificationMaster = (): ReactElement => {
           <ActionDropdown
             onEdit={() => {
               setEditingCategory(c);
-              resetCategory({ name: c.name, code: c.code, description: c.description || '', module_id: c.module_id || '' });
+              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' });
+              setDeleteTarget({ id: c.id, name: c.name, type: "category" });
               setDeleteModalOpen(true);
             }}
           />
         </div>
-      )
+      ),
-    }
+    },
   ];
 
+  const codeColumns: Column<any>[] = [
+    {
+      key: "code",
+      label: "Trigger Code",
+      render: (c) => (
+        <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>
+      ),
+    },
+    {
+      key: "name",
+      label: "Name",
+      render: (c) => (
+        <span className="font-semibold text-[#0f1724]">{c.name}</span>
+      ),
+    },
+    {
+      key: "variables",
+      label: "Variables",
+      render: (c) => (
+        <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>
+      ),
+    },
+    {
+      key: "actions",
+      label: "Actions",
+      align: "right",
+      render: (c) => (
+        <div className="flex justify-end gap-3 whitespace-nowrap">
+          <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,
+              });
+              setCodeFormModalOpen(true);
+            }}
+            className="text-blue-600 hover:text-blue-800 font-bold text-[11px] uppercase"
+          >
+            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>
+        </div>
+      ),
+    },
+  ];
+
+  const breadcrumbs =
+    viewMode === "codes"
+      ? [
+          { label: "Notification Master", path: "/notification-master" },
+          { label: `Event Codes (${selectedCategory?.name})` },
+        ]
+      : [{ label: "Notification Master" }];
+
   return (
     <Layout
       currentPage="Notification Master"
+      breadcrumbs={breadcrumbs}
       pageHeader={{
-        title: 'Notification Master Management',
+        title:
-        description: 'Manage notification categories and event codes across the platform.',
+          viewMode === "codes"
+            ? `Event Codes: ${selectedCategory?.name}`
+            : "Notification Master Management",
+        description:
+          viewMode === "codes"
+            ? `Manage event trigger codes and variables for the ${selectedCategory?.name} category.`
+            : "Manage notification categories and event codes across the platform.",
+        action:
+          viewMode === "codes" ? (
+            <div className="flex gap-3">
+              <button
+                onClick={() => setViewMode("categories")}
+                className="flex items-center gap-1.5 px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-semibold text-gray-600 bg-white hover:bg-gray-50 transition-all shadow-sm"
+              >
+                ← Back to Categories
+              </button>
+              <PrimaryButton
+                onClick={() => {
+                  setEditingCode(null);
+                  setCodeVariables([]);
+                  resetCode({
+                    code: "",
+                    name: "",
+                    description: "",
+                    default_channels: ["in_app", "email"],
+                    default_priority: "normal",
+                  });
+                  setCodeFormModalOpen(true);
+                }}
+                className="flex gap-2"
+              >
+                <Plus className="w-4 h-4" /> New Code
+              </PrimaryButton>
+            </div>
+          ) : undefined,
       }}
     >
+      {viewMode === "categories" ? (
         <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">
@@ -360,18 +583,31 @@ const NotificationMaster = (): ReactElement => {
                 isSearchable
               />
             </div>
-          <PrimaryButton onClick={() => {
+            <PrimaryButton
+              onClick={() => {
                 setEditingCategory(null);
-            resetCategory({ name: '', code: '', description: '', module_id: '' });
+                resetCategory({
+                  name: "",
+                  code: "",
+                  description: "",
+                  module_id: "",
+                });
                 setCategoryModalOpen(true);
-          }} className="flex gap-2">
+              }}
+              className="flex gap-2"
+            >
               <Plus className="w-4 h-4" /> New Category
             </PrimaryButton>
           </div>
 
-        <div className="flex-1">
+          {/* <div className="flex-1"> */}
-          <DataTable columns={columns} data={categories} isLoading={isLoading} keyExtractor={(c) => c.id} />
+            <DataTable
-        </div>
+              columns={columns}
+              data={categories}
+              isLoading={isLoading}
+              keyExtractor={(c) => c.id}
+            />
+          {/* </div> */}
 
           <Pagination
             currentPage={currentPage}
@@ -379,134 +615,165 @@ const NotificationMaster = (): ReactElement => {
             totalItems={totalItems}
             limit={limit}
             onPageChange={setCurrentPage}
-          onLimitChange={(l) => { setLimit(l); setCurrentPage(1); }}
+            onLimitChange={(l) => {
-        />
+              setLimit(l);
-      </div>
+              setCurrentPage(1);
-
-      {/* 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 shadow-inner">
-            <h3 className="text-[11px] font-bold uppercase text-gray-500 tracking-wider font-mono flex items-center gap-2 pb-4">
-              {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>
+      ) : (
+        <>
+          <DataTable
+            columns={codeColumns}
+            data={codes}
+            isLoading={isCodesLoading}
+            keyExtractor={(c) => c.id}
+            emptyMessage="No codes registered for this category."
+          />
 
           <Pagination
             currentPage={codePage}
             totalPages={codePages}
             totalItems={codeTotal}
-              limit={5}
+            limit={codeLimit}
             onPageChange={setCodePage}
-              onLimitChange={() => {}}
+            onLimitChange={(l) => {
+              setCodeLimit(l);
+              setCodePage(1);
+            }}
+          />
+        </>
+      )}
+
+      {/* Category Modal */}
+      <Modal
+        isOpen={categoryModalOpen}
+        onClose={() => setCategoryModalOpen(false)}
+        title={editingCategory ? "Edit Category" : "New Category"}
+        maxWidth="lg"
+        footer={
+          <>
+            <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 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}
+        />
+      </Modal>
+
+      {/* Code Form Modal */}
+      <Modal
+        isOpen={codeFormModalOpen}
+        onClose={() => {
+          setCodeFormModalOpen(false);
+          setEditingCode(null);
+          setCodeVariables([]);
+          resetCode({
+            code: "",
+            name: "",
+            description: "",
+            default_channels: ["in_app", "email"],
+            default_priority: "normal",
+          });
+        }}
+        title={editingCode ? "Edit Event Code" : "Add New Event Trigger"}
+        maxWidth="lg"
+        footer={
+          <>
+            <button
+              onClick={() => {
+                setCodeFormModalOpen(false);
+                setEditingCode(null);
+                setCodeVariables([]);
+                resetCode({
+                  code: "",
+                  name: "",
+                  description: "",
+                  default_channels: ["in_app", "email"],
+                  default_priority: "normal",
+                });
+              }}
+              className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <PrimaryButton onClick={handleCodeSubmit(onSaveCode)}>
+              {editingCode ? "Update Code" : "Add Code"}
+            </PrimaryButton>
+          </>
+        }
+      >
+        <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="text-[10px] text-gray-400 font-medium">
+          Auto-populates default channels (In-App, Email)
         </div>
       </Modal>
 
@@ -516,7 +783,7 @@ const NotificationMaster = (): ReactElement => {
         onConfirm={handleDelete}
         title={`Delete ${deleteTarget?.type}`}
         message={`Are you sure you want to delete ${deleteTarget?.name}? This action cannot be undone.`}
-        itemName={deleteTarget?.name || ''}
+        itemName={deleteTarget?.name || ""}
       />
     </Layout>
   );