add the Manage Notifications page and handle the create notification form

src/pages/notification/hooks/ManageNotificationContext.tsx

@@ -0,0 +1,142 @@
+import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { ListToolBar } from '../blocks/ListToolbar';
+
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  selectedNotification: string | null;
+  notifications: NotificationProps[];
+}
+
+interface SelectedNotification {
+  id: string;
+  name: string;
+  destination_module: string;
+}
+
+interface NotificationProps {
+  id: string;
+  name: string;
+  destination_module: string;
+}
+
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  showAddDialog: false,
+  handleEditDialog: () => {},
+  handleAddDialog: () => {},
+  selectedNotification: null,
+  notifications: []
+};
+
+const ManageNotifContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_dashboard;
+
+const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [selectedNotification, setSelectedNotification] = useState<string | null>(null);
+  const [notifications, setNotifications] = useState<NotificationProps[]>([]);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selected_notification: string | null) => {
+    setSelectedNotification(show ? selected_notification : null);
+    setShowEditDialog(show);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.id,
+        id: 'id',
+        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false
+      },
+      {
+        accessorFn: (row) => row.destination_module,
+        id: 'destination_module',
+        header: ({ column }) => <DataGridColumnHeader title="Destination Module" column={column} />,
+        enableSorting: true,
+        enableHiding: false
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        },
+        cell: (data: any) => {
+          const row = data.row.original;
+
+          return (
+            <div className="flex justify-center gap-2">
+              <button
+                type="button"
+                className="flex items-center justify-center gap-2 text-sm font-medium leading-6 text-primary"
+                onClick={() => handleEditDialog(true, row.id)}
+              >
+                <span>Edit</span>
+              </button>
+            </div>
+          );
+        }
+      }
+    ],
+    [handleEditDialog, handleAddDialog]
+  );
+
+  return (
+    <div>
+      <div className="container mx-auto py-5">
+        <h1>Manage Notifications</h1>
+      </div>
+      <ManageNotifContext.Provider
+        value={{
+          handleAddDialog,
+          showAddDialog,
+          handleEditDialog,
+          showEditDialog,
+          selectedNotification,
+          notifications
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+
+        <DataGridProvider
+          columns={columns}
+          pagination={{ size: 10 }}
+          toolbar={<ListToolBar />}
+          layout={{ card: true }}
+          sorting={[{ id: 'username', desc: false }]}
+          serverSide={true}
+        >
+          {children}
+        </DataGridProvider>
+      </ManageNotifContext.Provider>
+    </div>
+  );
+};
+
+export { ManageNotifContext, ManageNotifContextProvider };
+export type { SelectedNotification };