add the Currency Management page and handle the create currency form

src/pages/account/manage-currency/ManageCurrency.tsx

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

src/pages/account/manage-currency/blocks/AddDialog.tsx

@@ -0,0 +1,240 @@
+import { apiConfig } from '@/config/api.config';
+import { useRef, useState } from 'react';
+import { useManageCurrencyContext } from '../hooks/useManageAccessTypeContext';
+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';
+
+const API_URL = apiConfig.service_dashboard;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const {
+    showAddDialog,
+    handleAddDialog,
+    currencies,
+    showEditDialog,
+    handleEditDialog,
+    selectedUser
+  } = useManageCurrencyContext();
+
+  const { reload } = useDataGrid();
+  const { PostData, PutData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    code: '',
+    prefix: '',
+    trailer: '',
+    format: '',
+    grouping_separator: '',
+    decimal_separator: ''
+  };
+
+  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.code === '' ||
+      formField.prefix === '' ||
+      formField.format === '' ||
+      formField.decimal_separator === '' ||
+      formField.grouping_separator === ''
+    ) {
+      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 Currency</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">
+                      Code<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.code}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, code: 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">
+                      Prefix<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.prefix}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, prefix: 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">Trailer</label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.trailer}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, trailer: 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">
+                      Format<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.format}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, format: 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">
+                      Grouping Separator<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.grouping_separator}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, grouping_separator: 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">
+                      Decimal Separator<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.decimal_separator}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, decimal_separator: 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/account/manage-currency/blocks/ListToolBar.tsx

@@ -0,0 +1,49 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useManageCurrencyContext } from '../hooks/useManageAccessTypeContext';
+import { Button } from '@/components/ui/button';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog, handleEditDialog } = useManageCurrencyContext();
+
+  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 Access Type"
+                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">
+                <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 default ListToolbar;

src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx

@@ -0,0 +1,207 @@
+import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolBar';
+
+interface SelectedUser {
+  id: string;
+  name: string;
+  code: string;
+  prefix: string;
+  trailer: string;
+  format: string;
+  grouping_separator: string;
+  decimal_separator: string;
+}
+
+interface CurrencyProps {
+  id: string;
+  name: string;
+  code: string;
+  prefix: string;
+  trailer: string;
+  format: string;
+  grouping_separator: string;
+  decimal_separator: string;
+}
+
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  selectedUser: string | null;
+  currencies: CurrencyProps[];
+}
+
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  selectedUser: null,
+  currencies: []
+};
+
+const ManageCurrencyContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_dashboard;
+
+const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
+  const { GetData } = useCallApi();
+
+  const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
+    setSelectedUser(show ? selected_user : null);
+    setShowEditDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(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,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.code,
+        id: 'code',
+        header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.prefix,
+        id: 'prefix',
+        header: ({ column }) => <DataGridColumnHeader title="Prefix" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.Trailer,
+        id: 'trailer',
+        header: ({ column }) => <DataGridColumnHeader title="Trailer" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.format,
+        id: 'format',
+        header: ({ column }) => <DataGridColumnHeader title="Format" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.grouping_separator,
+        id: 'grouping_separator',
+        header: ({ column }) => <DataGridColumnHeader title="Grouping Separator" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.decimal_separator,
+        id: 'decimal_separator',
+        header: ({ column }) => <DataGridColumnHeader title="Decimal Separator" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        cell: ({ row }) => {
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-primary mr-2"
+                onClick={() => handleEditDialog(true, row.original.id)}
+              >
+                Edit
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleAddDialog, handleEditDialog]
+  );
+
+  return (
+    <div>
+      <div className="container mx-auto py-5">
+        <h1>Manage Access Type</h1>
+      </div>
+      <ManageCurrencyContext.Provider
+        value={{
+          showEditDialog,
+          handleEditDialog,
+          showAddDialog,
+          handleAddDialog,
+          selectedUser,
+          currencies
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+        <DataGridProvider
+          columns={columns}
+          pagination={{ size: 10 }}
+          layout={{ card: true }}
+          toolbar={<ListToolbar />}
+          sorting={[{ id: 'id', desc: true }]}
+          serverSide={true}
+        >
+          {children}
+        </DataGridProvider>
+      </ManageCurrencyContext.Provider>
+    </div>
+  );
+};
+
+export { ManageCurrencyContext, ManageCurrencyContextProvider };
+export type { SelectedUser };

src/pages/account/manage-currency/hooks/useManageAccessTypeContext.tsx

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