add the Manage Notifications page and handle the create notification form

src/pages/notification/ManageNotification.tsx

@@ -1,10 +1,17 @@
+import { Container, DataGridInner } from '@/components';
+import { ManageNotifContextProvider } from './hooks/ManageNotificationContext';
+import AddDialog from './blocks/AddDialog';
+
 const ManageNotification = () => {
   return (
-    <div>
+    <ManageNotifContextProvider>
-      <div className="container mx-auto p-5">
+      <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900">Manage Notification</h1>
+        <div className="grid gap-5 lg:gap-7.5">
-      </div>
+          <DataGridInner />
-    </div>
+        </div>
+        <AddDialog />
+      </Container>
+    </ManageNotifContextProvider>
   );
 };
 

src/pages/notification/blocks/AddDialog.tsx

@@ -0,0 +1,147 @@
+import { apiConfig } from '@/config/api.config';
+import { useRef, useState } from 'react';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
+
+const API_URL = apiConfig.service_dashboard;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const {
+    handleAddDialog,
+    handleEditDialog,
+    showAddDialog,
+    showEditDialog,
+    selectedNotification,
+    notifications
+  } = useManageNotificationContext();
+
+  const { reload } = useDataGrid();
+  const { PostData, PutData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    destination_module: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (formField.name === '' || formField.destination_module === '') {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+    console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  const handleReset = () => {
+    setFormField(initialState);
+  };
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
+        <DialogHeader className="p-5 border-0">
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Create Notification
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger" className="mb-5">
+                {alert.message}
+              </Alert>
+            )}
+            <form action="" onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5 p-0">
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Name<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Destination Module<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.destination_module}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, destination_module: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit">
+                    Save Changes
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;

src/pages/notification/blocks/ListToolbar.tsx

@@ -0,0 +1,57 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
+import { Button } from '@/components/ui/button';
+
+const ListToolBar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManageNotificationContext();
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search users"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) =>
+                  table.getColumn('name')?.setFilterValue(event.target.value)
+                }
+              />
+            </label>
+            <DefaultTooltip title={'Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                // disabled={isLoading}
+                // onClick={handleFilterData}
+              >
+                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
+                <KeenIcon icon="filter" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(true)}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ListToolBar };

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 };

src/pages/notification/hooks/useManageNotificationContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManageNotifContext } from './ManageNotificationContext';
+
+const useManageNotificationContext = () => {
+  const context = useContext(ManageNotifContext);
+
+  if (!context) throw new Error('useManageNotificationContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useManageNotificationContext };