Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/config/api.config.ts

@@ -7,6 +7,7 @@ interface apiConfigProps {
   transaction: string;
   nationality: string;
   service_disbursement: string;
+  service_notification: string;
 }
 
 const API_URL = import.meta.env.VITE_APP_API_URL;
@@ -20,6 +21,7 @@ const apiConfig: apiConfigProps = {
   service_wallet: `${API_URL}/w`,
   transaction: `${API_URL}/x`,
   service_disbursement: `${API_URL}/s`,
+  service_notification: `${API_URL}/n`,
   nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/
 `
 };

src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx

@@ -17,7 +17,7 @@ const DetailDialog = () => {
 
 	return (
 		<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
-			<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+			<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden max-h-[90vh] overflow-y-auto">
 				<DialogHeader>
 					<DialogTitle>Customer Deletion Details </DialogTitle>
 				</DialogHeader>
@@ -38,8 +38,8 @@ const DetailDialog = () => {
 
 							<div className="flex justify-end gap-2 mt-3">
 								<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
-								<Button onClick={()=>handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
+								<Button onClick={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
-								<Button onClick={()=>handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
+								<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
 							</div>
 						</div>
 					) : (<div></div>)}
@@ -51,7 +51,7 @@ const DetailDialog = () => {
 
 export default DetailDialog;
 
-function generateInput(formData:any, handleChange:any, label:string, name:string, type: string, required: boolean, disabled: boolean) {
+function generateInput(formData: any, handleChange: any, label: string, name: string, type: string, required: boolean, disabled: boolean) {
 	function generateDate(isoString: string) {
 		return isoString.slice(0, 10); // "2000-01-18"
 	}
@@ -62,17 +62,17 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
 	}
 
 	const statusMap: Record<Code, Reason> = {
-		W: {label: 'Waiting Approval'},
+		W: { label: 'Waiting Approval' },
-		Y: {label: 'Approve'},
+		Y: { label: 'Approve' },
-		N: {label: 'Reject'},
+		N: { label: 'Reject' },
-		T: {label: 'Tidak lagi menggunakan layanan'},
+		T: { label: 'Tidak lagi menggunakan layanan' },
-		P: {label: 'Privasi dan keamanan'},
+		P: { label: 'Privasi dan keamanan' },
-		D: {label: 'Akun ganda'},
+		D: { label: 'Akun ganda' },
-		L: {label: 'Lainnya'}
+		L: { label: 'Lainnya' }
 	};
 	if (name == 'reason_deletion' || name == 'status_approve') {
 		const status = formData[name] as Code
-		const fixStatus = statusMap[status] ?? {label: formData[name]}
+		const fixStatus = statusMap[status] ?? { label: formData[name] }
 		formData[name] = fixStatus.label
 	}
 	return (
@@ -80,7 +80,7 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
 			<div className="w-full mt-5">
 				<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">
-						{label}<span className="text-red-500">{required?"*":""}</span>
+						{label}<span className="text-red-500">{required ? "*" : ""}</span>
 					</label>
 					<Input
 						className="input"
@@ -88,7 +88,7 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
 						required={required}
 						type={type}
 						name={name}
-						value={formData[name]?(type === 'date' ? generateDate(formData[name]) : formData[name]):""}
+						value={formData[name] ? (type === 'date' ? generateDate(formData[name]) : formData[name]) : ""}
 						onChange={handleChange}
 					/>
 				</div>

src/pages/notification/blocks/AddDialog.tsx

@@ -1,6 +1,6 @@
 import { apiConfig } from '@/config/api.config';
-import { useRef, useState } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import {
   Dialog,
@@ -10,102 +10,296 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog';
+import { ChevronDown } from 'lucide-react';
 
-const API_URL = apiConfig.service_dashboard;
+const API_URL_CUSTOMER = apiConfig.service_customer;
+const API_URL_NOTIFICATION = apiConfig.service_notification;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const {
+  const { handleAddDialog, showAddDialog } = useManageNotificationContext();
-    handleAddDialog,
-    handleEditDialog,
-    showAddDialog,
-    showEditDialog,
-    selectedNotification,
-    notifications
-  } = useManageNotificationContext();
-
   const { reload } = useDataGrid();
-  const { PostData, PutData } = useCallApi();
+  const { GetData, PostData } = useCallApi();
-  const [alert, setAlert] = useState({
+  const [alert, setAlert] = useState({ show: false, message: '' });
-    show: false,
-    message: ''
-  });
 
   const initialState = {
-    name: '',
+    customers: [],
-    destination_module: ''
+    type: '',
+    via: '',
+    subject: '',
+    content: ''
   };
 
   const [formField, setFormField] = useState(initialState);
+  const [open, setOpen] = useState(false);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const resetForm = () => {
     setFormField(initialState);
+    setAlert({ show: false, message: '' });
   };
-  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormField({ ...formField, [e.target.name]: e.target.value });
+  };
+
+  const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
+    console.log('API Response :', response);
+
+    if (response?.status) {
+      handleAddDialog(false);
+      resetForm();
+      reload();
+      toast.success('Notification Send Successfully!');
+      const createActivity = {
+        module: 'Manage Notification',
+        description: `Send New Notification => ${formField.via}`,
+        action: 'C'
+      };
+      doSaveLogActivity(createActivity);
+    } else {
+      toast.error('Failed to create notification');
+      setAlert({ show: true, message: 'Failed to create notification. Please Try Again.' });
+    }
+  };
+
+  // const getCustomerList = async (sorting: any) => {
+  //   try {
+  //     sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+  //     const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+  //       limit: 100,
+  //       page: 1,
+  //       with_deleted: false,
+  //       order_field: sorting[0].id,
+  //       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+  //     });
+
+  //     setCustomers(response?.data.list);
+  //   } catch (error) {
+  //     console.error('Error fetching customer', error);
+  //   }
+  // };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.destination_module === '') {
+    if (
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      formField.type.trim() === '' ||
+      formField.via.trim() === '' ||
+      formField.subject.trim() === '' ||
+      formField.content.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill all required fields.' });
       return;
     }
-    console.log(formField);
+
+    doCreateNotification(e);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
-  const handleReset = () => {
+  // useEffect(() => {
-    setFormField(initialState);
+  //   getCustomerList([{ id: 'id', desc: false }]);
-  };
+  // }, []);
+
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
 
   return (
-    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+    <Dialog open={showAddDialog} onOpenChange={handleAddDialog}>
-      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
-        <DialogTitle></DialogTitle>
+        <DialogHeader>
+          <DialogTitle>Notification - Create</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}>
+        <DialogBody className="scrollable">
-          <div className="flex flex-col px-0">
+          <form onSubmit={handleSubmit} className="space-y-6">
             {alert.show && (
-              <Alert variant="danger" className="mb-5">
+              <Alert variant="danger">
-                {alert.message}
+                <h3>{alert.message}</h3>
               </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">
+                  Send To<span className="text-red-500">*</span>
+                </label>
+                <div className="flex gap-6 items-center">
+                  <label className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      name="sendTo"
+                      value="all"
+                      checked={formField.sendTo === 'all'}
+                      onChange={handleChange}
+                      className="accent-blue-600"
+                    />
+                    <span>All Users</span>
+                  </label>
+                  <label className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      name="sendTo"
+                      value="selected"
+                      checked={formField.sendTo === 'selected'}
+                      onChange={handleChange}
+                      className="accent-blue-600"
+                    />
+                    <span>Selected Customers</span>
+                  </label>
+                </div>
+              </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">Customer</label>
+                <Popover open={open} onOpenChange={setOpen}>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      className="input col-span-5 text-left flex justify-between"
+                      style={{ color: 'inherit' }}
+                    >
+                      <span>
+                        {customers.find((customer) => customer.id === formField.customers)
+                          ?.username || 'Select Customer'}
+                      </span>
+                      <ChevronDown className="w-4 h-4 opacity-70" />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[400px] p-0">
+                    <Command>
+                      <CommandInput placeholder="Search Customer..." />
+                      <CommandList
+                        className="max-h-[300px] overflow-y-auto"
+                        style={{ touchAction: 'pan-y' }}
+                        onWheel={(e) => {
+                          e.currentTarget.scrollTop += e.deltaY;
+                        }}
+                      >
+                        <CommandEmpty>No Customer found.</CommandEmpty>
+                        <CommandGroup>
+                          {customers.map((customer) => (
+                            <CommandItem
+                              key={customer.id}
+                              value={customer.username}
+                              onSelect={() => {
+                                setFormField({
+                                  ...formField,
+                                  customers: customer.id
+                                });
+                                setOpen(false);
+                              }}
+                            >
+                              {customer.username}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </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">
-                      Name<span className="text-red-500">*</span>
+                  Type<span className="text-red-500">*</span>
                 </label>
+                <div className="flex gap-6 items-center">
+                  {['info', 'promo'].map((type) => (
+                    <label key={type} className="flex items-center space-x-2">
+                      <input
+                        type="radio"
+                        name="type"
+                        value={type}
+                        checked={formField.type === type}
+                        onChange={handleChange}
+                        className="accent-blue-600"
+                      />
+                      <span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
+                    </label>
+                  ))}
+                </div>
+              </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">
+                  Send Via<span className="text-red-500">*</span>
+                </label>
+                <div className="flex gap-6 items-center">
+                  <label className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      name="via"
+                      value="fcm"
+                      checked={formField.via === 'fcm'}
+                      onChange={handleChange}
+                      className="accent-blue-600"
+                    />
+                    <span>FCM</span>
+                  </label>
+                  <label className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      name="via"
+                      value="sms"
+                      checked={formField.via === 'sms'}
+                      onChange={handleChange}
+                      className="accent-blue-600"
+                    />
+                    <span>SMS</span>
+                  </label>
+                  <label className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      name="via"
+                      value="email"
+                      checked={formField.via === 'email'}
+                      onChange={handleChange}
+                      className="accent-blue-600"
+                    />
+                    <span>E-Mail</span>
+                  </label>
+                </div>
+              </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">Subject</label>
                 <Input
-                      className="input"
+                  className="input col-span-6"
-                      type="text"
+                  name="subject"
-                      autoComplete="off"
+                  placeholder="Enter Subject"
-                      value={formField.name}
+                  value={formField.subject}
-                      onChange={({ target }) =>
+                  onChange={handleChange}
-                        setFormField((prev) => ({ ...prev, name: target.value }))
+                  disabled={formField.via !== 'email'}
-                      }
                 />
               </div>
             </div>
@@ -113,31 +307,25 @@ const AddDialog = () => {
             <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>
+                  Content<span className="text-red-500">*</span>
                 </label>
-                    <Input
+                <Textarea
-                      className="input"
+                  className="input col-span-6"
-                      type="text"
+                  name="content"
-                      autoComplete="off"
+                  placeholder="Enter Content Notification"
-                      value={formField.destination_module}
+                  value={formField.content}
-                      onChange={({ target }) =>
+                  onChange={handleChange}
-                        setFormField((prev) => ({ ...prev, destination_module: target.value }))
-                      }
                 />
               </div>
             </div>
 
-                <div className="flex justify-end pt-2.5 gap-5">
+            <div className="flex justify-end gap-4">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+              <Button type="reset" variant="outline" onClick={() => setFormField(initialState)}>
                 Reset
               </Button>
-                  <Button variant={'default'} type="submit">
+              <Button type="submit">Create Notification</Button>
-                    Save Changes
-                  </Button>
-                </div>
             </div>
           </form>
-          </div>
         </DialogBody>
       </DialogContent>
     </Dialog>

src/pages/notification/blocks/ListToolbar.tsx

@@ -16,13 +16,11 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search users"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
+                onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
-                  table.getColumn('name')?.setFilterValue(event.target.value)
-                }
               />
             </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -30,9 +28,9 @@ const ListToolBar = () => {
                 // onClick={handleFilterData}
               >
                 {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
+            {/* <KeenIcon icon="filter" /> */}
-              </Button>
+            {/* </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/notification/hooks/ManageNotificationContext.tsx

@@ -1,48 +1,50 @@
-import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } 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';
-
+import { useCallApi } from '@/hooks';
-interface ContextProps {
+import moment from 'moment';
-  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;
+  content: string;
-  destination_module: string;
+  subject: string;
+  type: string;
+  via: string;
+  created_at: string;
 }
 
-interface NotificationProps {
+interface ContextProps {
-  id: string;
+  showAddDialog: boolean;
-  name: string;
+  handleAddDialog: (show: boolean) => void;
-  destination_module: string;
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_notification: string | null) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_notification: string | null) => void;
+  selectedNotification: string | null;
 }
 
 const initialProps: ContextProps = {
-  showEditDialog: false,
   showAddDialog: false,
+  handleAddDialog: (show: boolean) => {},
+  showEditDialog: false,
   handleEditDialog: () => {},
-  handleAddDialog: () => {},
+  showDeleteDialog: false,
-  selectedNotification: null,
+  handleDeleteDialog: () => {},
-  notifications: []
+  selectedNotification: null
 };
 
 const ManageNotifContext = createContext<ContextProps>(initialProps);
-const API_URL = apiConfig.service_dashboard;
+const API_URL_NOTIFICATION = apiConfig.service_notification;
 
 const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [selectedNotification, setSelectedNotification] = useState<string | null>(null);
-  const [notifications, setNotifications] = useState<NotificationProps[]>([]);
+  const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
@@ -53,59 +55,104 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
     setShowEditDialog(show);
   }, []);
 
+  const handleDeleteDialog = useCallback((show: boolean, selected_notification: string | null) => {
+    setSelectedNotification(show ? selected_notification : null);
+    setShowDeleteDialog(show);
+  }, []);
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.id,
+        accessorFn: (row) => row.content,
-        id: 'id',
+        id: 'content',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Content" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[100px]'
+          headerClassName: 'w-[300px]'
         }
       },
       {
-        accessorFn: (row) => row.name,
+        accessorFn: (row) => row.subject,
-        id: 'name',
+        id: 'subject',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Subject" column={column} />,
         enableSorting: true,
         enableHiding: false
       },
       {
-        accessorFn: (row) => row.destination_module,
+        accessorFn: (row) => row.type,
-        id: 'destination_module',
+        id: 'type',
-        header: ({ column }) => <DataGridColumnHeader title="Destination Module" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
         enableSorting: true,
         enableHiding: false
       },
       {
-        id: 'actions',
+        accessorFn: (row) => row.via,
-        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        id: 'via',
-        meta: {
+        header: ({ column }) => <DataGridColumnHeader title="Via" column={column} />,
-          headerClassName: 'w-[100px]',
+        enableSorting: true,
-          cellClassName: 'text-center'
+        enableHiding: false
       },
-        cell: (data: any) => {
+      {
-          const row = data.row.original;
+        accessorFn: (row) => row.created_at,
+        id: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader title="Date Create" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
+      }
+      // {
+      //   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 (
+      //     return (
-            <div className="flex justify-center gap-2">
+      //       <>
-              <button
+      //         <button
-                type="button"
+      //           className="btn btn-sm btn-icon btn-clear btn-light"
-                className="flex items-center justify-center gap-2 text-sm font-medium leading-6 text-primary"
+      //           onClick={() => handleEditDialog(true, row.id)}
-                onClick={() => handleEditDialog(true, row.id)}
+      //         >
-              >
+      //           <KeenIcon icon="notepad-edit" />
-                <span>Edit</span>
+      //         </button>
-              </button>
+      //         <button
-            </div>
+      //           className="btn btn-sm btn-icon btn-clear btn-light"
-          );
+      //           onClick={() => handleDeleteDialog(true, row.id)}
-        }
+      //         >
-      }
+      //           <KeenIcon icon="trash" />
+      //         </button>
+      //       </>
+      //     );
+      //   }
+      // }
     ],
-    [handleEditDialog, handleAddDialog]
+    [handleEditDialog, handleDeleteDialog]
   );
 
+  const getNotificationList = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'content', desc: false }] : sorting;
+      filter =
+        filter.length == 0 ? {} : { content: { like: `%${filter[0].value?.toLowerCase()}%` } };
+      const response = await GetData(`${API_URL_NOTIFICATION}/list`, {
+        limit: limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        filter: JSON.stringify(filter)
+      });
+      console.log('API Response notif: ', response);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching notification', error);
+    }
+  };
+
   return (
     <div>
       <ManageNotifContext.Provider
@@ -114,8 +161,9 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
           showAddDialog,
           handleEditDialog,
           showEditDialog,
-          selectedNotification,
+          handleDeleteDialog,
-          notifications
+          showDeleteDialog,
+          selectedNotification
         }}
       >
         <Toaster expand visibleToasts={9} duration={3000} />
@@ -125,8 +173,11 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
           pagination={{ size: 10 }}
           toolbar={<ListToolBar />}
           layout={{ card: true }}
-          sorting={[{ id: 'username', desc: false }]}
+          sorting={[{ id: 'content', desc: false }]}
           serverSide={true}
+          onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+            getNotificationList(pageIndex, pageSize, sorting, columnFilters)
+          }
         >
           {children}
         </DataGridProvider>

src/pages/settings/user/manage-user/blocks/EditDialog.tsx

@@ -153,7 +153,7 @@ const EditDialog = () => {
         email: response.data.email,
         id_role: response.data.idRole,
         status: response.data.status,
-        customerid: response.data.customer.id
+        customerid: response.data.customerid?.id || ''
       }));
       // console.log('Customer ID from API:', response?.data.customerid);
     } else {

src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx

@@ -42,10 +42,9 @@ const ListToolbar = () => {
 
   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 flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
-        <div className="flex justify-between w-full items-center">
+        <div className="flex gap-3 items-center w-full md:w-auto">
-          <div className="flex w-[50%] gap-3 items-center">
+          <label className="input input-sm w-[160px]">
-            <label className="input input-sm w-1/3">
             From
             <input
               type="date"
@@ -58,7 +57,7 @@ const ListToolbar = () => {
             />
           </label>
 
-            <label className="input input-sm w-1/3">
+          <label className="input input-sm w-[160px]">
             To
             <input
               type="date"
@@ -71,10 +70,30 @@ const ListToolbar = () => {
             />
           </label>
         </div>
+
+        <div className="ml-auto">
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <Button
+              variant="outline"
+              className="h-7.5"
+              onClick={() => {
+                const today = new Date();
+                const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                settrxDate({
+                  from: formatDate(firstDayOfMonth),
+                  to: formatDate(today),
+                });
+                reload();
+              }}
+            >
+              <KeenIcon icon="arrows-circle" />
+            </Button>
+          </DefaultTooltip>
         </div>
       </div>
     </div>
   );
+
 };
 
 export default ListToolbar;

src/pages/transaction/history-transaction/blocks/ListToolbar.tsx

@@ -42,10 +42,9 @@ const ListToolbar = () => {
 
   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 flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
-        <div className="flex justify-between w-full items-center">
+        <div className="flex gap-3 items-center w-full md:w-auto">
-          <div className="flex w-[50%] gap-3 items-center">
+          <label className="input input-sm w-[160px]">
-            <label className="input input-sm w-1/3">
             From
             <input
               type="date"
@@ -58,7 +57,7 @@ const ListToolbar = () => {
             />
           </label>
 
-            <label className="input input-sm w-1/3">
+          <label className="input input-sm w-[160px]">
             To
             <input
               type="date"
@@ -71,6 +70,25 @@ const ListToolbar = () => {
             />
           </label>
         </div>
+
+        <div className="ml-auto">
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <Button
+              variant="outline"
+              className="h-7.5"
+              onClick={() => {
+                const today = new Date();
+                const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                settrxDate({
+                  from: formatDate(firstDayOfMonth),
+                  to: formatDate(today),
+                });
+                reload();
+              }}
+            >
+              <KeenIcon icon="arrows-circle" />
+            </Button>
+          </DefaultTooltip>
         </div>
       </div>
     </div>