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

src/pages/disbursement/history-transaction/HistoryTransaction.tsx

@@ -0,0 +1,39 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionProvider } from './hooks/TransactionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+import { UploadBatchDialog } from './blocks/UploadBatchDialog';
+
+const HistoryTransactionDisbursement = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | History Disbursement</title>
+      </Helmet>
+      <TransactionProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">DISBURSEMENT</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Disbursement</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">History Disbursement</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+          <UploadBatchDialog />
+        </Container>
+      </TransactionProvider>
+    </>
+  );
+};
+
+export default HistoryTransactionDisbursement;

src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx

@@ -0,0 +1,137 @@
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+
+const API_URL = apiConfig.service_disbursement;
+
+type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  P: { label: 'Pending', bg: 'bg-blue-100', text: 'text-blue-600' },
+  F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
+  D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
+  Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
+};
+
+export const renderStatusBadge = (statusRaw: string | null | undefined) => {
+    const status = statusRaw as StatusCode;
+    const { label, bg, text } = statusMap[status] ?? {
+      label: 'Unknown',
+      bg: 'bg-gray-100',
+      text: 'text-gray-600',
+    };
+  
+    return (
+      <span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
+        {label}
+      </span>
+    );
+  };
+
+const DetailTransaction = () => {
+    const { GetData } = useCallApi();
+    const {
+        showDetailDialog,
+        setShowDetailDialog,
+        selectedTransactionId
+    } = useTransactionContext();
+
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchTransactionDetails = async () => {
+            console.log(selectedTransactionId)
+            if (selectedTransactionId) {
+                try {
+                    const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {
+                        id: selectedTransactionId
+                    });
+                    // console.log(response?.data);
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
+        };
+
+        if (showDetailDialog && selectedTransactionId) {
+            fetchTransactionDetails();
+        }
+    }, [showDetailDialog, selectedTransactionId, GetData]);
+
+    const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+
+    return (
+        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Transaction Details</DialogTitle>
+                </DialogHeader>
+                <DialogBody>
+                    {/* Tab Content */}
+                    <div className="py-4 overflow-y-auto max-h-[400px]">
+                        <div className="space-y-4">
+                            <div className="border rounded-lg overflow-x-auto">
+                                <table className="min-w-full table-auto">
+                                    <thead>
+                                        <tr className="bg-gray-100">
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Name</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Transfer Amount</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Description</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Response</th>
+                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
+                                            transactionDetails.log.map((log: { customer: any, amount: number, remark: string, reference: string, response_date: string, payment_response: string, status: string}, index: number) => (
+                                                <tr key={index} className="border-t">
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.customer.username ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.remark ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.payment_response ?? '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
+                                                </tr>
+                                            ))
+                                        ) : (
+                                            <tr>
+                                                <td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
+                                                    No logs available
+                                                </td>
+                                            </tr>
+                                        )}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default DetailTransaction;

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

@@ -0,0 +1,70 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleUploadBatchDialog } = useTransactionContext();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  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 gap-3 items-center ml-auto">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleUploadBatchDialog(true)}
+            >
+              Upload Batch
+            </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/disbursement/history-transaction/blocks/UploadBatchDialog.tsx

@@ -0,0 +1,194 @@
+import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { useTransactionContext } from '../hooks';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { toast } from 'sonner';
+import { useCallApi } from '@/hooks';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import clsx from 'clsx';
+
+const API_URL = apiConfig.service_disbursement;
+
+const UploadBatchDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showUploadBatchDialog, handleUploadBatchDialog } = useTransactionContext();
+  const { reload } = useDataGrid();
+  const { PostData, PostDataFile, GetData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+  const initialState: {
+    execution_date: string,
+    file: File | null;
+  } = {
+    execution_date: '',
+    file: null
+  }
+  const [formField, setFormField] = useState(initialState);
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  /* actions */
+  const doUploadBatch = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+  
+      const formData = new FormData();
+      formData.append('execution_date', formField.execution_date);
+      if (formField.file) {
+        formData.append('file', formField.file);
+      }
+  
+      try {
+        const response = await PostDataFile(`${API_URL}/upload-excel`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        });
+  
+        if (response?.status) {
+          handleUploadBatchDialog(false);
+          resetForm();
+          reload();
+  
+          const createActivity = {
+            module: 'Disbursement',
+            description: `Create New Disbursement => ${formField.file?.name}`,
+            action: 'C'
+          };
+  
+          doSaveLogActivity(createActivity);
+          toast.success('Success Create Disbursement');
+        } else {
+          toast.error('Failed to create disbursement');
+          setAlert({ show: true, message: response?.message ?? 'Failed to create disbursement.' });
+        }
+      } catch (error) {
+        toast.error('Error uploading batch');
+        setAlert({ show: true, message: 'Something went wrong. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    console.log('Form data before submit:', formField);
+
+    if (
+      formField.execution_date.trim() === '' || 
+      formField.file === null
+    ) {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    doUploadBatch(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+  
+  useEffect(() => {
+    if (showUploadBatchDialog === false) {
+      resetForm();
+    }
+  }, [showUploadBatchDialog]);
+
+  return (
+    <Dialog open={showUploadBatchDialog} onOpenChange={(open) => handleUploadBatchDialog(open)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-0 border-0">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <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">Upload Batch</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={() => {
+                handleUploadBatchDialog(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-3">
+                <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">Execution Date</label>
+                    <Input
+                      className="input"
+                      type="datetime-local"
+                      autoComplete="off"
+                      value={formField.execution_date}
+                      required
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, execution_date: 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">File</label>
+                    <Input
+                        className="input"
+                        type="file"
+                        autoComplete="off"
+                        required
+                        onChange={({ target }) =>
+                            setFormField((prev) => ({ ...prev, file: target.files?.[0] ?? null }))
+                        }
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-end pt-2.5">
+                  <Button className="btn btn-primary" type="submit">
+                    Save Changes
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { UploadBatchDialog };

src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx

@@ -0,0 +1,289 @@
+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 axios from 'axios';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallApi } from '@/hooks';
+import ListToolbar from '../blocks/ListToolbar';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router';
+import moment from 'moment';
+import DetailTransaction from '../blocks/DetailTransaction';
+
+interface TransactionProps {
+  id: number;
+  name: string;
+}
+
+interface ContextProps {
+  getTransactionLists: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any,
+    filter: any
+  ) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
+  showDetailDialog: boolean;
+  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedTransactionId: number | null;
+  setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
+  showUploadBatchDialog: boolean;
+  handleUploadBatchDialog: (show: boolean) => void;
+}
+
+const initialProps: ContextProps = {
+  getTransactionLists: async () => ({ data: [], totalCount: 0 }),
+  showDetailDialog: false,
+  setShowDetailDialog: () => { },
+  selectedTransactionId: null,
+  setSelectedTransactionId: () => { },
+  showUploadBatchDialog: false,
+  handleUploadBatchDialog: (show: boolean) => {},
+};
+
+type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  P: { label: 'Pending', bg: 'bg-blue-100', text: 'text-blue-600' },
+  F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
+  D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
+  Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
+};
+
+
+const ManageTransactionContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_disbursement;
+
+const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
+  const [showUploadBatchDialog, setShowUploadBatchDialog] = useState(false);
+  const [transaction, setTransaction] = useState<TransactionProps[]>([]);
+  const { GetData } = useCallApi();
+  const navigate = useNavigate();
+  
+  const handleUploadBatchDialog = useCallback((show: boolean) => {
+    setShowUploadBatchDialog(show);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      // {
+      //   accessorKey: 'transaction_date',
+      //   header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
+      //   enableSorting: false,
+      //   enableHiding: false,
+      //   meta: {
+      //     headerClassName: 'w-[250px]'
+      //   }
+      // },
+      {
+        accessorKey: 'file_name',
+        header: ({ column }) => <DataGridColumnHeader title="File Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+      },
+      {
+        accessorFn: (row) => {
+          return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.amount);
+        },
+        id: 'amount',
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorKey: 'total_record',
+        header: ({ column }) => <DataGridColumnHeader title="Total Record" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+      },
+      {
+        accessorKey: 'total_success',
+        header: ({ column }) => <DataGridColumnHeader title="Success Record" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+      },
+      {
+        accessorKey: 'total_fail',
+        header: ({ column }) => <DataGridColumnHeader title="Fail Record" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+      },
+      {
+        accessorKey: 'total_pending',
+        header: ({ column }) => <DataGridColumnHeader title="Pending Record" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+      },
+      {
+        accessorFn: (row) => row.status,
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const status = row.original.status as StatusCode;
+          const { label, bg, text } = statusMap[status] ?? {
+            label: 'Unknown',
+            bg: 'bg-gray-100',
+            text: 'text-gray-600',
+          };
+      
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center',
+        },
+      },
+      {
+        accessorFn: (row) => row.execution_date,
+        id: 'execution_date',
+        header: ({ column }) => <DataGridColumnHeader title="Execution Date" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => moment(row.original.execution_date).format('YYYY-MM-DD HH:mm:ss')
+      },
+      {
+        accessorFn: (row) => row.done_date,
+        id: 'done_date',
+        header: ({ column }) => <DataGridColumnHeader title="Done Date" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('YYYY-MM-DD HH:mm:ss') : ''
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <div key={`actions-${row.id}`}>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => {
+                  setSelectedTransactionId(row.id);
+                  setShowDetailDialog(true);
+                }}
+              >
+                <KeenIcon icon="eye" />
+              </button>
+            </div>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    []);
+
+  const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      let startdate;
+      let enddate;
+      let formattedFilter;
+
+      if (filter == undefined || filter.length == 0) {
+        const today = new Date();
+        const nextWeek = new Date();
+        nextWeek.setDate(today.getDate() + 7);
+
+        startdate = today.toISOString().split('T')[0];
+        enddate = nextWeek.toISOString().split('T')[0];
+      } else if (filter != undefined || filter.length != 0) {
+        startdate = filter[0].value.from;
+        enddate = filter[0].value.to;
+      }
+
+      formattedFilter = {
+        
+      };
+
+      const response = await GetData(`${API_URL}/transaction/history`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: "id",
+        order_direction: 'DESC',
+        filter: JSON.stringify(formattedFilter)
+      });
+
+      setTransaction(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching transaction', error);
+    }
+  };
+
+  return (
+    <ManageTransactionContext.Provider
+      value={{
+        getTransactionLists,
+        showDetailDialog,
+        setShowDetailDialog,
+        selectedTransactionId,
+        setSelectedTransactionId,
+        handleUploadBatchDialog,
+        showUploadBatchDialog
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <DetailTransaction />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'id', desc: false }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageTransactionContext.Provider>
+  );
+};
+
+export { TransactionProvider, ManageTransactionContext };
+export type { TransactionProps };

src/pages/disbursement/history-transaction/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './TransactionContext';
+export * from './useTransactionContext';

src/pages/disbursement/history-transaction/hooks/useTransactionContext.tsx

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

src/pages/master/aldeias/AldeiasMaster.tsx

@@ -9,11 +9,11 @@ const AldeiasMaster = () => {
   return (
     <>
     <Helmet>
-      <title>TPAY | Manage Aldeias</title>
+      <title>TPAY | Manage Aldeia</title>
     </Helmet>
       <ManageAldeiasContextProvider>
         <Container>
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeia</h1>
           <Breadcrumbs sx={{ mb: 2 }}>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -24,7 +24,7 @@ const AldeiasMaster = () => {
             </Link>
 
             <Link underline="none" color="inherit">
-              <span className="text-sm">Manage Aldeias</span>
+              <span className="text-sm">Manage Aldeia</span>
             </Link>
           </Breadcrumbs>
 

src/pages/master/aldeias/blocks/AddDialog.tsx

@@ -69,18 +69,18 @@ const AddDialog = () => {
       if (response?.status) {
         resetForm();
         handleAddDialog(false);
-        toast.success('Success Create Aldeias');
+        toast.success('Success Create Aldeia');
         reload();
         const createActivity = {
-          module: 'Manage Aldeias',
+          module: 'Manage Aldeia',
           description: `Create Aldeia => ${formField.name}`,
           action: 'C'
         };
 
         doSaveLogActivity(createActivity);
       } else {
-        toast.error('Error Create Aldeias');
-        setAlert({ show: true, message: 'Failed to create Aldeias. Please try again.' });
+        toast.error('Error Create Aldeia');
+        setAlert({ show: true, message: 'Failed to create Aldeia. Please try again.' });
       }
     },
     [formField]
@@ -100,7 +100,8 @@ const AddDialog = () => {
       // console.log('SUCOS', response?.data);
       setSucos(response?.data.list);
     } catch (error) {
-      console.error('Error fetching municipios', error);
+      // console.error('Error fetching Municipio', error);
+      setAlert({ show: true, message: 'Failed to fetch Municipio. Please try again.' });
     }
   };
 
@@ -141,7 +142,7 @@ const AddDialog = () => {
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Aldeias - Create</DialogTitle>
+          <DialogTitle>Aldeia - Create</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody ref={parentRef}>
@@ -157,7 +158,7 @@ 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">
-                      Name<span className="text-red-500">*</span>
+                      Aldeia Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -175,7 +176,11 @@ const AddDialog = () => {
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left"
+                          style={{ color: 'inherit' }}
+                        >
                           {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
                             'Select Sucos'}
                         </button>
@@ -192,7 +197,7 @@ const AddDialog = () => {
                               {sucos.map((suco) => (
                                 <CommandItem
                                   key={suco.sucos_id}
-                                  value={suco.sucos_id.toString()}
+                                  value={suco.sucos_name}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,

src/pages/master/aldeias/blocks/DeleteDialog.tsx

@@ -32,11 +32,11 @@ const DeleteDialog = () => {
     if (response?.status) {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
-      toast.success('Success Delete Aldeias');
+      toast.success('Success Delete Aldeia');
       reload();
 
       const createActivity = {
-        module: 'Manage Aldeias',
+        module: 'Manage Aldeia',
         description: `Delete Aldeia => ${selectedAldeias}`,
         action: 'D'
       };
@@ -44,7 +44,7 @@ const DeleteDialog = () => {
       doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
-      toast.error('Failed Delete Aldeias');
+      toast.error('Failed Delete Aldeia');
     }
   }, [selectedAldeias, DeleteData, handleDeleteDialog, reload]);
 

src/pages/master/aldeias/blocks/EditDialog.tsx

@@ -68,18 +68,18 @@ const EditDialog = () => {
       if (response?.status) {
         resetForm();
         handleEditDialog(false, null);
-        toast.success('Success Update Aldeias');
+        toast.success('Success Update Aldeia');
         reload();
         const createActivity = {
-          module: 'Manage Aldeias',
+          module: 'Manage Aldeia',
           description: `Edit Aldeia => ${selectedAldeias}`,
           action: 'U'
         };
 
         doSaveLogActivity(createActivity);
       } else {
-        toast.error('Error Update Aldeias');
-        setAlert({ show: true, message: 'Error Update Aldeias' });
+        toast.error('Error Update Aldeia');
+        setAlert({ show: true, message: 'Error Update Aldeia' });
       }
     },
     [selectedAldeias, formField]
@@ -99,7 +99,8 @@ const EditDialog = () => {
       // console.log('SUCOS', response?.data);
       setSucos(response?.data.list);
     } catch (error) {
-      console.error('Error fetching municipios', error);
+      console.error('Error fetching Sucos', error);
+      setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
     }
   };
 
@@ -164,7 +165,7 @@ const EditDialog = () => {
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Aldeias - Update</DialogTitle>
+          <DialogTitle>Aldeia - Update</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody>
@@ -180,7 +181,7 @@ const EditDialog = () => {
                 <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>
+                      Aldeia Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -198,7 +199,11 @@ const EditDialog = () => {
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left"
+                          style={{ color: 'inherit' }}
+                        >
                           {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
                             'Select Sucos'}
                         </button>

src/pages/master/aldeias/blocks/ListToolbar.tsx

@@ -15,7 +15,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Aldeias"
+                placeholder="Search Aldeia"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />

src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx

@@ -80,7 +80,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
       {
         accessorFn: (row) => row.name,
         id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Aldeia Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: {
@@ -90,7 +90,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
       {
         accessorFn: (row) => row.sucos.name,
         id: 'sucos_name',
-        header: ({ column }) => <DataGridColumnHeader title="Sucos" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Sucos Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: {

src/pages/master/currency/CurrencyMaster.tsx

@@ -5,39 +5,43 @@ import { Delete } from 'lucide-react';
 import AddDialog from './blocks/AddDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import EditDialog from './blocks/EditDialog';
-
-// import EditDialog from './blocks/EditDialog';
+import { Helmet } from 'react-helmet';
 
 const CurrencyMaster = () => {
   return (
-    <ManageCurrencyContextProvider>
-      <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
+    <>
+      <Helmet>
+        <title>TPAY | Manage Currency</title>
+      </Helmet>
+      <ManageCurrencyContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Master Data</span>
-          </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Master Data</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Manage Currency</span>
-          </Link>
-        </Breadcrumbs>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Manage Currency</span>
+            </Link>
+          </Breadcrumbs>
 
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
 
-        <AddDialog />
-        <DeleteDialog />
-        <EditDialog />
-        {/* <EditDialog/>
+          <AddDialog />
+          <DeleteDialog />
+          <EditDialog />
+          {/* <EditDialog/>
         <DeleteDialog/> */}
-      </Container>
-    </ManageCurrencyContextProvider>
+        </Container>
+      </ManageCurrencyContextProvider>
+    </>
   );
 };
 

src/pages/master/municipios/Municipios.tsx

@@ -11,11 +11,11 @@ const Municipios = () => {
   return (
     <>
       <Helmet>
-        <title>TPAY | Municipios</title>
+        <title>TPAY | Municipio</title>
       </Helmet>
       <ManageMunicipiosProvider>
         <Container className="mb-7">
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIOS</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIO</h1>
           <Breadcrumbs sx={{ mb: 2 }}>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -26,7 +26,7 @@ const Municipios = () => {
             </Link>
 
             <Link underline="none" color="inherit">
-              <span className="text-sm">Manage Municipios</span>
+              <span className="text-sm">Manage Municipio</span>
             </Link>
           </Breadcrumbs>
           <div className="grid gap-5 lg:gap-7.5">

src/pages/master/municipios/blocks/AddDialog.tsx

@@ -56,7 +56,7 @@ const AddDialog = () => {
         reload();
         toast.success('Municipio created successfully!');
         const createActivity = {
-          module: 'Manage Municipios',
+          module: 'Manage Municipio',
           description: `Create Municipio => ${formField.name}`,
           action: 'C'
         };
@@ -107,52 +107,36 @@ const AddDialog = () => {
 
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
-      <DialogContent className="container-fixed max-w-96 flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogTitle></DialogTitle>
-        <DialogDescription></DialogDescription>
-        <DialogHeader className="p-2 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">Add Municipios</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>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Municipio - Create</DialogTitle>
+          <DialogDescription></DialogDescription>
         </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
+        <DialogBody>
+          <div className="flex flex-col">
             {alert.show && (
-              <Alert variant="danger" className="mb-5">
-                {alert.message}
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid-cols-6 gap-5 p-0">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Name<span className="text-red-500">*</span>
-                  </label>
 
-                  <Input
-                    className="input col-span-6"
-                    type="text"
-                    autoComplete="off"
-                    value={formField.name}
-                    onChange={({ target }) =>
-                      setFormField((prev) => ({ ...prev, name: target.value }))
-                    }
-                  />
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                <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">
+                      Municipio Name<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      value={formField.name}
+                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                    />
+                  </div>
                 </div>
 
-                <div className="flex justify-end pt-2.5 gap-5 col-span-6">
+                <div className="flex justify-end pt-2.5 gap-5">
                   <Button variant={'outline'} type="reset" onClick={handleReset}>
                     Reset
                   </Button>

src/pages/master/municipios/blocks/DeleteDialog.tsx

@@ -43,7 +43,7 @@ const DeleteDialog = () => {
       reload();
 
       const createActivity = {
-        module: 'Manage Municipios',
+        module: 'Manage Municipio',
         description: `Delete Municipio => ${selectedMunicipios}`,
         action: 'D'
       };

src/pages/master/municipios/blocks/EditDialog.tsx

@@ -21,7 +21,6 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
-  const parentRef = useRef<any | null>(null);
   const { showEditDialog, handleEditDialog, selectedMunicipios, municipios } =
     useManageMunicipiosContext();
   const { reload } = useDataGrid();
@@ -131,7 +130,7 @@ const EditDialog = () => {
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Municipios - Update</DialogTitle>
+          <DialogTitle>Municipio - Update</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody>
@@ -147,7 +146,7 @@ const EditDialog = () => {
                 <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>
+                      Municipio Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -158,7 +157,7 @@ const EditDialog = () => {
                   </div>
                 </div>
 
-                <div className="flex justify-end">
+                <div className="flex justify-end pt-2.5">
                   <Button className="btn btn-primary">Save Changes</Button>
                 </div>
               </div>

src/pages/master/municipios/blocks/ListToolbar.tsx

@@ -28,7 +28,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Municipios"
+                placeholder="Search Municipio"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />

src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx

@@ -75,7 +75,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
   const [selectedMunicipios, setSelectedMunicipios] = useState<string | null>(null);
   const [municipios, setMunicipios] = useState<MunicipiosProps[]>([]);
   const { GetData } = useCallApi();
-  const navigate = useNavigate();
 
   const handleSearchDialog = useCallback((show: boolean) => {
     setShowSearchDialog(show);
@@ -95,18 +94,13 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
     setShowDeleteDialog(show);
   }, []);
 
-  const handleNavigate = (path: string) => {
-    const url = navigate(`${API_URL}/municipios/postoadms/${path}`);
-    console.log(url);
-  };
-
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
         // accessorFn: (row) => row.name,
         // id: 'name',
         accessorKey: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Municipios Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: {
@@ -158,12 +152,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log(response?.data);
-      // const sortedList = response.data.data.list.sort((a: MunicipiosProps, b: MunicipiosProps) => {
-      //   if (a.name < b.name) return -1;
-      //   if (a.name > b.name) return 1;
-      //   return 0;
-      // });
       setMunicipios(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {

src/pages/master/postoadms/blocks/AddDialog.tsx

@@ -72,17 +72,20 @@ const AddDialog = () => {
         handleAddDialog(false);
         resetForm();
         reload();
-        toast.success('Posto Adm created successfully!');
+        toast.success('Postu Administrativo created successfully!');
         const createActivity = {
           module: 'Manage Posto Administrativo',
-          description: `Create PostoAdms => ${formField.name}`,
+          description: `Create Postu Administrativo => ${formField.name}`,
           action: 'C'
         };
 
         doSaveLogActivity(createActivity);
       } else {
-        toast.error('Failed to create Posto Adm. Please try again.');
-        setAlert({ show: true, message: 'Failed to create Posto Adm. Please try again.' });
+        toast.error('Failed to create Postu Administrativo. Please try again.');
+        setAlert({
+          show: true,
+          message: 'Failed to create Postu Administrativo. Please try again.'
+        });
       }
     },
     [formField]
@@ -102,7 +105,8 @@ const AddDialog = () => {
       // console.log(response?.data);
       setMunicipios(response?.data.list);
     } catch (error) {
-      console.error('Error fetching municipios', error);
+      console.error('Error fetching Municipio', error);
+      setAlert({ show: true, message: 'Failed to get Municipio. Please try again.' });
     }
   };
 
@@ -159,7 +163,7 @@ 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">
-                      Name<span className="text-red-500">*</span>
+                      Postu Administrativo Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -179,7 +183,7 @@ const AddDialog = () => {
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
                           {municipios.find((municipio) => municipio.id === formField.municipio_id)
-                            ?.name || 'Select Municipios'}
+                            ?.name || 'Select Municipio'}
                         </button>
                       </PopoverTrigger>
                       <PopoverContent
@@ -187,7 +191,7 @@ const AddDialog = () => {
                         onWheel={(e) => e.stopPropagation()}
                       >
                         <Command>
-                          <CommandInput placeholder="Search Municipios..." />
+                          <CommandInput placeholder="Search Municipio..." />
                           <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
                             <CommandEmpty>No Municipio found.</CommandEmpty>
                             <CommandGroup>

src/pages/master/postoadms/blocks/DeleteDialog.tsx

@@ -28,7 +28,7 @@ const DeleteDialog = () => {
 
   const doDeletePostoAdm = useCallback(async () => {
     if (!selectedPostoAdms) {
-      toast.error('No Posto Adm selected');
+      toast.error('No Postu Administrativo selected');
       return;
     }
 
@@ -39,18 +39,18 @@ const DeleteDialog = () => {
     if (response?.status) {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
-      toast.success('Success Delete Posto Adm');
+      toast.success('Success Delete Postu Administrativo');
       reload();
       const createActivity = {
-        module: 'Manage Posto Administrativo',
-        description: `Delete PostoAdms => ${selectedPostoAdms}`,
+        module: 'Manage Postu Administrativo',
+        description: `Delete Postu Administrativo => ${selectedPostoAdms}`,
         action: 'D'
       };
 
       doSaveLogActivity(createActivity);
     } else {
       setAlert({ show: true, message: response?.message });
-      toast.error('Failed Delete Posto Adm');
+      toast.error('Failed Delete Postu Administrativo');
     }
   }, [selectedPostoAdms, DeleteData, handleDeleteDialog, reload]);
 

src/pages/master/postoadms/blocks/EditDialog.tsx

@@ -71,19 +71,22 @@ const EditDialog = () => {
       if (response?.status) {
         handleEditDialog(false, null);
         resetForm();
-        toast.success('Success Update Posto Adm');
+        toast.success('Success Update Postu Administrativo');
         reload();
 
         const createActivity = {
-          module: 'Manage Posto Administrativo',
-          description: `Edit PostoAdms => ${selectedPostoAdms}`,
+          module: 'Manage Postu Administrativo',
+          description: `Edit Postu Administrativo => ${selectedPostoAdms}`,
           action: 'U'
         };
 
         doSaveLogActivity(createActivity);
       } else {
-        toast.error('Error Update Posto Adm');
-        setAlert({ show: true, message: 'Failed to update posto adm. Please try again.' });
+        toast.error('Error Update Postu Administrativo');
+        setAlert({
+          show: true,
+          message: 'Failed to update Postu Administrativo Please try again.'
+        });
       }
     },
     [selectedPostoAdms, formField]
@@ -103,7 +106,8 @@ const EditDialog = () => {
       // console.log('MUNICIPIOS: ', response?.data);
       setMunicipios(response?.data.list);
     } catch (error) {
-      console.error('Error fetching municipios', error);
+      console.error('Error fetching Municipio', error);
+      setAlert({ show: true, message: 'Failed to get Municipio. Please try again.' });
     }
   }, []);
 
@@ -169,7 +173,7 @@ const EditDialog = () => {
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Posto Adm - Update</DialogTitle>
+          <DialogTitle>Postu Administrativo - Update</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody>
@@ -185,7 +189,7 @@ const EditDialog = () => {
                 <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>
+                      Postu Administrativo Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -205,12 +209,12 @@ const EditDialog = () => {
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
                           {municipios.find((municipio) => municipio.id === formField.municipio_id)
-                            ?.name || 'Select Municipios'}
+                            ?.name || 'Select Municipio'}
                         </button>
                       </PopoverTrigger>
                       <PopoverContent className="w-[400px] p-0">
                         <Command>
-                          <CommandInput placeholder="Search Municipios..." />
+                          <CommandInput placeholder="Search Municipio..." />
                           <CommandList>
                             <CommandEmpty>No Municipio found.</CommandEmpty>
                             <CommandGroup>

src/pages/master/postoadms/blocks/ListToolbar.tsx

@@ -16,7 +16,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Postu"
+                placeholder="Search Postu Administrativo"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />

src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx

@@ -88,7 +88,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
         id: 'name',
         // accessorKey: 'PostoAdms_name',
         header: ({ column }) => (
-          <DataGridColumnHeader title="Posto Administrativo Name" column={column} />
+          <DataGridColumnHeader title="Postu Administrativo Name" column={column} />
         ),
         enableSorting: true,
         enableHiding: false,
@@ -99,7 +99,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
       {
         accessorFn: (row) => row.municipios_name,
         id: 'municipios_name',
-        header: ({ column }) => <DataGridColumnHeader title="Municipios Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {

src/pages/master/products/blocks/AddDialog.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { NumericFormat } from 'react-number-format';
 
 interface ProviderProps {
   provider_id: number;
@@ -40,15 +41,29 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+  const initialState: {
+    name: string;
+    code: string;
+    type: string;
+    description: string;
+    price_point: string | number | null;
+    price_cash: string | number | null;
+    cashback_point: string | number | null;
+    cashback_cash: string | number | null;
+    status: string;
+    provider: string;
+    process_on_third_party: string;
+    created_by: string;
+    created_at: string;
+  } = {
     name: '',
     code: '',
     type: '',
     description: '',
-    price_point: 0,
-    price_cash: 0,
-    cashback_point: 0,
-    cashback_cash: 0,
+    price_point: null,
+    price_cash: null,
+    cashback_point: null,
+    cashback_cash: null,
     status: '',
     provider: '',
     process_on_third_party: '',
@@ -117,11 +132,13 @@ const AddDialog = () => {
       formField.type.trim() === '' ||
       formField.code.trim() === '' ||
       formField.description.trim() === '' ||
-      formField.price_point === 0 ||
-      formField.price_cash === 0 ||
-      formField.cashback_point === 0 ||
-      formField.cashback_cash === 0 ||
+      formField.price_point === null ||
+      formField.price_cash === null ||
+      formField.cashback_point === null ||
+      formField.cashback_cash === null ||
       formField.status.trim() === '' ||
+      formField.provider.trim() === '' ||
+      formField.process_on_third_party.trim() === '' ||
       formField.created_by.trim() === '' ||
       formField.created_at.trim() === ''
     ) {
@@ -130,7 +147,7 @@ const AddDialog = () => {
     }
 
     doCreateProduct(e);
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
@@ -234,19 +251,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.price_point}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({
-                          ...formField,
-                          price_point: isNaN(value) ? 0 : value
-                        });
+                      value={formField.price_point ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          price_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Point"
                     />
                   </div>
                 </div>
@@ -256,19 +273,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.price_cash}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({
-                          ...formField,
-                          price_cash: isNaN(value) ? 0 : value
-                        });
+                      value={formField.price_cash ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          price_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Cash"
                     />
                   </div>
                 </div>
@@ -278,19 +295,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.cashback_point}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({
-                          ...formField,
-                          cashback_point: isNaN(value) ? 0 : value
-                        });
+                      value={formField.cashback_point ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          cashback_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Point"
                     />
                   </div>
                 </div>
@@ -300,19 +317,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.cashback_cash}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({
-                          ...formField,
-                          cashback_cash: isNaN(value) ? 0 : value
-                        });
+                      value={formField.cashback_cash ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Cash"
                     />
                   </div>
                 </div>

src/pages/master/products/blocks/EditDialog.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { NumericFormat } from 'react-number-format';
 
 interface ProviderProps {
   provider_id: string;
@@ -41,15 +42,29 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+  const initialState: {
+    name: string;
+    code: string;
+    type: string;
+    description: string;
+    price_point: string | number | null;
+    price_cash: string | number | null;
+    cashback_point: string | number | null;
+    cashback_cash: string | number | null;
+    status: string;
+    provider: string;
+    process_on_third_party: string;
+    updated_by: string;
+    updated_at: string;
+  } = {
     name: '',
     code: '',
     type: '',
     description: '',
-    price_point: 0,
-    price_cash: 0,
-    cashback_point: 0,
-    cashback_cash: 0,
+    price_point: null,
+    price_cash: null,
+    cashback_point: null,
+    cashback_cash: null,
     status: '',
     provider: '',
     process_on_third_party: '',
@@ -109,22 +124,22 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
-    console.log(response);
+    // console.log(response);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
-        name: response.data.name,
-        type: response.data.type,
-        code: response.data.code,
-        description: response.data.description,
-        price_point: response.data.price_point,
-        price_cash: response.data.price_cash,
-        cashback_point: response.data.cashback_point,
-        cashback_cash: response.data.cashback_cash,
-        status: response.data.status,
-        provider: response.data.provider.id,
-        process_on_third_party: response.data.process_on_third_party
+        name: response.data?.name,
+        type: response.data?.type,
+        code: response.data?.code,
+        description: response.data?.description,
+        price_point: response.data?.price_point,
+        price_cash: response.data?.price_cash,
+        cashback_point: response.data?.cashback_point,
+        cashback_cash: response.data?.cashback_cash,
+        status: response.data?.status,
+        provider: response.data?.provider?.id,
+        process_on_third_party: response.data?.process_on_third_party
       }));
     } else {
       setFormField(initialState);
@@ -139,11 +154,13 @@ const EditDialog = () => {
       formField.type.trim() === '' ||
       formField.code.trim() === '' ||
       formField.description.trim() === '' ||
-      formField.price_point === 0 ||
-      formField.price_cash === 0 ||
-      formField.cashback_point === 0 ||
-      formField.cashback_cash === 0 ||
-      formField.status === '' ||
+      formField.price_point === null ||
+      formField.price_cash === null ||
+      formField.cashback_point === null ||
+      formField.cashback_cash === null ||
+      formField.status.trim() === '' ||
+      formField.provider.trim() === '' ||
+      formField.process_on_third_party.trim() === '' ||
       formField.updated_by.trim() === '' ||
       formField.updated_at.trim() === ''
     ) {
@@ -152,7 +169,7 @@ const EditDialog = () => {
     }
 
     doUpdateProduct(e);
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
@@ -260,16 +277,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.price_point}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, price_point: isNaN(value) ? 0 : value });
+                      value={formField.price_point ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          price_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Point"
                     />
                   </div>
                 </div>
@@ -279,16 +299,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.price_cash}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value });
+                      value={formField.price_cash ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          price_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Cash"
                     />
                   </div>
                 </div>
@@ -298,16 +321,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.cashback_point}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value });
+                      value={formField.cashback_point ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          cashback_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Point"
                     />
                   </div>
                 </div>
@@ -317,16 +343,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.cashback_cash}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value });
+                      value={formField.cashback_cash ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Cash"
                     />
                   </div>
                 </div>

src/pages/master/products/hooks/ManageProductsContext.tsx

@@ -72,6 +72,19 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorFn: (row) => row.code,
+        id: 'code',
+        header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        },
+        filterFn: (row, id, value) => {
+          return row.original.products_name.toLowerCase().includes(value.toLowerCase());
+        }
+      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
@@ -89,12 +102,32 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         accessorFn: (row) => row.description,
         id: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
         }
       },
+      {
+        accessorFn: (row) => row.provider?.name,
+        id: 'provider_name',
+        header: ({ column }) => <DataGridColumnHeader title="Provider Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.type,
+        id: 'type',
+        header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[150px]'
+        }
+      },
       {
         accessorFn: (row) => row.price_point,
         id: 'price_point',
@@ -115,6 +148,64 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
           headerClassName: 'w-[100px]'
         }
       },
+      {
+        accessorFn: (row) => row.cashback_point,
+        id: 'cashback_point',
+        header: ({ column }) => <DataGridColumnHeader title="Cashback Point" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.cashback_cash,
+        id: 'cashback_cash',
+        header: ({ column }) => <DataGridColumnHeader title="Cashback Cash" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.process_on_third_party,
+        id: 'process_on_third_party',
+        header: ({ column }) => <DataGridColumnHeader title="Third Party" column={column} />,
+        cell: ({ row }) => {
+          const isActive = row.original.process_on_third_party === 'Y';
+
+          return <span>{isActive ? 'Yes' : 'No'}</span>;
+        },
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.status,
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        }
+      },
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@@ -160,7 +251,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log(response?.data);
+      console.log(response?.data);
       setProducts(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -189,7 +280,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'Product.id', desc: false }]}
+        sorting={[{ id: 'Product.created_at', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getProductsLists(pageIndex, pageSize, sorting, columnFilters)

src/pages/master/provider/blocks/AddDialog.tsx

@@ -61,16 +61,27 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+
+  const initialState: {
+    name: string;
+    description: string;
+    type: string;
+    status: string;
+    transaction_type: string;
+    agent: string | null;
+    created_by: string;
+    created_at: string;
+  } = {
     name: '',
     description: '',
     type: '',
     status: '',
     transaction_type: '',
-    agent: '',
+    agent: null,
     created_by: '',
     created_at: ''
   };
+
   const [formField, setFormField] = useState(initialState);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
@@ -116,14 +127,13 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type === '' ||
-      formField.agent.trim() === ''
+      formField.transaction_type === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    console.log(formField);
+    // console.log(formField);
     doCreateProvider(e);
     setAlert({ show: false, message: '' });
   };
@@ -242,7 +252,7 @@ const AddDialog = () => {
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="h2h">Host to Host</SelectItem>
                         <SelectItem value="agent">Agent</SelectItem>
                       </SelectContent>
                     </Select>
@@ -294,56 +304,67 @@ const AddDialog = () => {
                   </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">
-                      Agent Name<span className="text-red-500">*</span>
-                    </label>
-                    <Popover open={open} onOpenChange={setOpen}>
-                      <PopoverTrigger asChild>
-                        <button
-                          type="button"
-                          className="input col-span-5 text-left"
-                          style={{ color: 'inherit' }}
-                        >
-                          {customers.find((customer) => customer.id === formField.agent)
-                            ?.username || 'Select Agent'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
-                        <Command>
-                          <CommandInput placeholder="Search Agent..." />
-                          <CommandList
-                            className="max-h-[300px] overflow-y-auto"
-                            style={{ touchAction: 'pan-y' }}
-                            onWheel={(e) => {
-                              e.currentTarget.scrollTop += e.deltaY;
-                            }}
+                {formField.type === 'agent' ? (
+                  <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">
+                        Agent Name<span className="text-red-500">*</span>
+                      </label>
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
                           >
-                            <CommandEmpty>No Agent found.</CommandEmpty>
-                            <CommandGroup>
-                              {customers.map((customer) => (
-                                <CommandItem
-                                  key={customer.id}
-                                  value={customer.username}
-                                  onSelect={() => {
-                                    setFormField({
-                                      ...formField,
-                                      agent: customer.id
-                                    });
-                                    setOpen(false);
-                                  }}
-                                >
-                                  {customer.username}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
+                            {customers.find((customer) => customer.id === formField.agent)
+                              ?.username || 'Select Agent'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Agent..." />
+                            <CommandList
+                              className="max-h-[300px] overflow-y-auto"
+                              style={{ touchAction: 'pan-y' }}
+                              onWheel={(e) => {
+                                e.currentTarget.scrollTop += e.deltaY;
+                              }}
+                            >
+                              <CommandEmpty>No Agent found.</CommandEmpty>
+                              <CommandGroup>
+                                {customers.map((customer) => (
+                                  <CommandItem
+                                    key={customer.id}
+                                    value={customer.username}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        agent: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </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">
+                        Agent Name
+                      </label>
+                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
+                    </div>
+                  </div>
+                )}
 
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>

src/pages/master/provider/blocks/DeleteDialog.tsx

@@ -37,6 +37,7 @@ const DeleteDialog = () => {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       toast.success('Success Delete Provider');
+      reload();
       const createActivity = {
         module: 'Manage Provider',
         description: `Delete Provider => ${selectedProvider}`,
@@ -44,7 +45,6 @@ const DeleteDialog = () => {
       };
 
       doSaveLogActivity(createActivity);
-      reload();
     } else {
       setAlert({ show: true, message: response?.message });
       toast.error('Failed Delete Provider');

src/pages/master/provider/blocks/EditDialog.tsx

@@ -51,16 +51,27 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+
+  const initialState: {
+    name: string;
+    description: string;
+    type: string;
+    status: string;
+    transaction_type: string;
+    agent: string | null;
+    updated_by: string;
+    updated_at: string;
+  } = {
     name: '',
     description: '',
     type: '',
     status: '',
     transaction_type: '',
-    agent: '',
+    agent: null,
     updated_by: '',
     updated_at: ''
   };
+
   const [formField, setFormField] = useState(initialState);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
@@ -136,7 +147,7 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
-    console.log(response);
+    // console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -145,7 +156,7 @@ const EditDialog = () => {
         type: response?.data.type,
         status: response?.data.status,
         transaction_type: response?.data.transaction_type.id,
-        agent: response?.data.agent.id
+        agent: response?.data.agent?.id || null
       }));
     }
   }, []);
@@ -158,8 +169,7 @@ const EditDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type.trim() === '' ||
-      formField.agent.trim() === ''
+      formField.transaction_type.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
@@ -257,7 +267,7 @@ const EditDialog = () => {
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="h2h">Host to Host</SelectItem>
                         <SelectItem value="agent">Agent</SelectItem>
                       </SelectContent>
                     </Select>
@@ -309,56 +319,67 @@ const EditDialog = () => {
                   </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">
-                      Agent Name<span className="text-red-500">*</span>
-                    </label>
-                    <Popover open={open} onOpenChange={setOpen}>
-                      <PopoverTrigger asChild>
-                        <button
-                          type="button"
-                          className="input col-span-5 text-left"
-                          style={{ color: 'inherit' }}
-                        >
-                          {customers.find((customer) => customer.id === formField.agent)
-                            ?.fullname || 'Select Agent'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
-                        <Command>
-                          <CommandInput placeholder="Search Agent..." />
-                          <CommandList
-                            className="max-h-[300px] overflow-y-auto"
-                            style={{ touchAction: 'pan-y' }}
-                            onWheel={(e) => {
-                              e.currentTarget.scrollTop += e.deltaY;
-                            }}
+                {formField.type === 'agent' ? (
+                  <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">
+                        Agent Name<span className="text-red-500">*</span>
+                      </label>
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
                           >
-                            <CommandEmpty>No Agent found.</CommandEmpty>
-                            <CommandGroup>
-                              {customers.map((customer) => (
-                                <CommandItem
-                                  key={customer.id}
-                                  value={customer.username}
-                                  onSelect={() => {
-                                    setFormField({
-                                      ...formField,
-                                      agent: customer.id
-                                    });
-                                    setOpen(false);
-                                  }}
-                                >
-                                  {customer.fullname}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
+                            {customers.find((customer) => customer.id === formField.agent)
+                              ?.username || 'Select Agent'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Agent..." />
+                            <CommandList
+                              className="max-h-[300px] overflow-y-auto"
+                              style={{ touchAction: 'pan-y' }}
+                              onWheel={(e) => {
+                                e.currentTarget.scrollTop += e.deltaY;
+                              }}
+                            >
+                              <CommandEmpty>No Agent found.</CommandEmpty>
+                              <CommandGroup>
+                                {customers.map((customer) => (
+                                  <CommandItem
+                                    key={customer.id}
+                                    value={customer.username}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        agent: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </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">
+                        Agent Name
+                      </label>
+                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
+                    </div>
+                  </div>
+                )}
 
                 <div className="flex justify-end">
                   <Button variant="default">Save Changes</Button>

src/pages/master/provider/blocks/ListToolbar.tsx

@@ -16,9 +16,9 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Provider"
-                value={(table.getColumn('provider_name')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) =>
-                  table.getColumn('provider_name')?.setFilterValue(event.target.value)
+                  table.getColumn('name')?.setFilterValue(event.target.value)
                 }
               />
             </label>

src/pages/master/provider/hooks/ManageProviderContext.tsx

@@ -75,7 +75,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
     () => [
       {
         accessorFn: (row) => row.provider_name,
-        id: 'provider_name',
+        id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -94,7 +94,13 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
         }
       },
       {
-        accessorFn: (row) => row.provider_type,
+        accessorFn: (row) => {
+          const typeMapping: Record<string, string> = {
+            h2h: 'Host To Host',
+            agent: 'Agent'
+          };
+          return typeMapping[row.provider_type] || row.provider_type;
+        },
         id: 'type',
         header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
         enableSorting: false,
@@ -107,7 +113,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
         accessorFn: (row) => row.provider_status,
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
-        enableSorting: false,
+        enableSorting: true,
         enableHiding: false,
         cell: ({ row }) => {
           const isActive = row.original.provider_status === 'Y';
@@ -203,7 +209,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'created_at', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getProviderLists(pageIndex, pageSize, sorting, columnFilters)

src/pages/master/reward/Reward.tsx

@@ -1,37 +0,0 @@
-import AddDialog from './blocks/AddDialog';
-import EditDialog from './blocks/EditDialog';
-import DeleteDialog from './blocks/DeleteDialog';
-import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
-import { Container, DataGridInner } from '@/components';
-import { Breadcrumbs, Link } from '@mui/material';
-
-const RewardMaster = () => {
-  return (
-    <ManageRewardContextProvider>
-      <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Reward</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
-
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Master Data</span>
-          </Link>
-
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Manage Reward</span>
-          </Link>
-        </Breadcrumbs>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-        <AddDialog />
-        <EditDialog />
-        <DeleteDialog />
-      </Container>
-    </ManageRewardContextProvider>
-  );
-};
-
-export default RewardMaster;

src/pages/master/reward/RewardMaster.tsx

@@ -0,0 +1,43 @@
+import AddDialog from './blocks/AddDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
+import { Container, DataGridInner } from '@/components';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+
+const RewardMaster = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Reward</title>
+      </Helmet>
+      <ManageRewardContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Reward</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Master Data</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Manage Reward</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+          <AddDialog />
+          <EditDialog />
+          <DeleteDialog />
+        </Container>
+      </ManageRewardContextProvider>
+    </>
+  );
+};
+
+export default RewardMaster;

src/pages/master/reward/blocks/AddDialog.tsx

@@ -14,6 +14,7 @@ import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
 import { useCallApi } from '@/hooks';
+import { NumericFormat } from 'react-number-format';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
 import {
   Select,
@@ -54,10 +55,19 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  const RewardType = {
+    'Daily Check in': 'D',
+    Referal: 'R',
+    'Level Pro': 'P',
+    'Level Prioritas': 'L'
+  } as const;
+
+  type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
+
   const doCreateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      console.log('Data yang akan dikirim:', formField);
+      // console.log('Data yang akan dikirim:', formField);
       const response = await PostData(`${API_URL}/reward/create`, formField);
 
       if (response?.status) {
@@ -91,20 +101,15 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const handleReset = () => {
-    resetForm();
-    setAlert({ show: false, message: '' });
-  };
-
   useEffect(() => {
     if (showAddDialog) {
-      setFormField({
-        ...formField,
+      setFormField((prev) => ({
+        ...prev,
         created_by: parsedUser?.username,
         created_at: formattedTime
-      });
+      }));
     }
-  }, [formattedTime]);
+  }, [showAddDialog, parsedUser?.username, formattedTime]);
 
   useEffect(() => {
     if (showAddDialog === false) {
@@ -144,34 +149,44 @@ const AddDialog = () => {
                     Type<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
-                    className="input col-span-6"
-                    type="text"
-                    autoComplete="off"
-                    value={formField.type}
-                    onChange={({ target }) =>
-                      setFormField((prev) => ({ ...prev, type: target.value }))
-                    }
-                  />
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.type}
+                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(RewardType).map(
+                          ([label, value]: [string, RewardTypeValue]) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">
                     Amount<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
+                  <NumericFormat
                     className="input col-span-6"
-                    type="number"
-                    min={0}
-                    step={0.01}
                     value={formField.amount}
-                    onChange={(e) => {
-                      const value = parseFloat(e.target.value);
-                      setFormField({
-                        ...formField,
-                        amount: isNaN(value) ? 0 : value
-                      });
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        amount: values.floatValue || 0
+                      }));
                     }}
+                    placeholder="Enter Amount"
                   />
                 </div>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">

src/pages/master/reward/blocks/DeleteDialog.tsx

@@ -25,13 +25,16 @@ const DeleteDialog = () => {
     message: ''
   });
 
+  // console.log('ini data :', selectedReward);
+
   const doDeleteReward = useCallback(async () => {
     if (!selectedReward) {
       toast.error('No Reward selected');
       return;
     }
-    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward}`, {
-      id: selectedReward
+    // console.log('Ini datanya:', selectedReward);
+    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward?.id}/true`, {
+      id: selectedReward.id
     });
 
     if (response?.status) {

src/pages/master/reward/blocks/EditDialog.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
 import {
   Select,
   SelectContent,
@@ -54,11 +55,19 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  const RewardType = {
+    'Daily Check in': 'D',
+    Referal: 'R'
+  } as const;
+
+  type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
+
   const doUpdateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
+      // console.log('Ini datanya:', selectedReward);
+      const response = await PutData(`${API_URL}/reward/update/${selectedReward?.id}`, formField);
 
       if (response?.status) {
         resetForm();
@@ -74,16 +83,17 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    // console.log('Ini datanya:', id);
     const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
-    console.log('API Response:', response);
+    // console.log('API Response:', response);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
-        name: response?.data.name,
-        type: response?.data.type,
-        amount: response?.data.amount,
-        status: response?.data.status
+        name: response.data.name,
+        type: response.data.type,
+        amount: response.data.amount,
+        status: response.data.status
       }));
     }
   }, []);
@@ -107,21 +117,20 @@ const EditDialog = () => {
   // };
 
   useEffect(() => {
-    // console.log('Selected Reward:', selectedReward);
     if (selectedReward) {
-      doFetchData(selectedReward);
+      doFetchData(selectedReward.id.toString());
     }
   }, [selectedReward]);
 
   useEffect(() => {
-    if (showEditDialog) {
-      setFormField({
-        ...formField,
+    if (showEditDialog && selectedReward) {
+      setFormField((prev) => ({
+        ...prev,
         updated_by: parsedUser.username,
         updated_at: formattedTime
-      });
+      }));
     }
-  }, [formattedTime]);
+  }, [showEditDialog, selectedReward]);
 
   useEffect(() => {
     if (showEditDialog === false) {
@@ -142,67 +151,84 @@ const EditDialog = () => {
 
             <form onSubmit={doUpdateReward}>
               <div className="card-body grid gap-5">
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Name<span className="text-red-500">*</span>
                   </label>
 
                   <Input
-                    className="input"
+                    className="input col-span-6"
                     type="text"
                     value={formField.name}
                     onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
                   />
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Type<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
-                    className="input"
-                    type="text"
-                    value={formField.type}
-                    onChange={(e) => setFormField({ ...formField, type: e.target.value })}
-                  />
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.type}
+                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(RewardType).map(
+                          ([label, value]: [string, RewardTypeValue]) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Amount<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
-                    className="input"
-                    type="number"
-                    min={0}
-                    step={0.01}
+                  <NumericFormat
+                    className="input col-span-6"
                     value={formField.amount}
-                    onChange={(e) => {
-                      const value = parseFloat(e.target.value);
-                      setFormField({
-                        ...formField,
-                        amount: isNaN(value) ? 0 : value
-                      });
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        amount: values.floatValue || 0
+                      }));
                     }}
+                    placeholder="Enter Amount"
                   />
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Status<span className="text-red-500">*</span>
                   </label>
 
-                  <Select
-                    value={formField.status}
-                    onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select" defaultValue={formField.status} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Y">Active</SelectItem>
-                      <SelectItem value="N">InActive</SelectItem>
-                    </SelectContent>
-                  </Select>
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, status: value }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select" defaultValue={formField.status} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">InActive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>

src/pages/master/reward/hooks/ManageRewardContext.tsx

@@ -26,10 +26,10 @@ interface ContextProps {
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_reward: string | null) => void;
+  handleEditDialog: (show: boolean, selected_reward: Reward | null) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_rewad: string | null) => void;
-  selectedReward: string | null;
+  handleDeleteDialog: (show: boolean, selected_rewad: Reward | null) => void;
+  selectedReward: Reward | null;
   reward: string | null;
 }
 
@@ -52,19 +52,19 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedReward, setSelectedReward] = useState<string | null>(null);
+  const [selectedReward, setSelectedReward] = useState<Reward | null>(null);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_reward: string | null) => {
+  const handleEditDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
     setShowEditDialog(show);
     setSelectedReward(show ? selected_reward : null);
   }, []);
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_reward: string | null) => {
+  const handleDeleteDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
     setShowDeleteDialog(show);
     setSelectedReward(show ? selected_reward : null);
   }, []);
@@ -169,7 +169,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log('API Response:', response?.data.list); // Cek data dari API
+      // console.log('API Response:', response?.data.list);
       // console.log('reward list :', response);
       setRewards(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };

src/pages/master/sucos/blocks/AddDialog.tsx

@@ -72,7 +72,7 @@ const AddDialog = () => {
         toast.success('Sucos created successfully!');
         const createActivity = {
           module: 'Manage Sucos',
-          description: `Create Suco => ${formField.name}`,
+          description: `Create Sucos => ${formField.name}`,
           action: 'C'
         };
 
@@ -128,7 +128,8 @@ const AddDialog = () => {
         // console.log('ini data posto :', response?.data);
         setPostoadms(response?.data.list || []);
       } catch (error) {
-        console.log('Error fetching posto', error);
+        console.log('Error fetching Postu Administrativo', error);
+        setAlert({ show: true, message: 'Failed to get Posto Administrativo. Please try again.' });
       }
     };
 
@@ -155,7 +156,7 @@ 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">
-                      Name<span className="text-red-500">*</span>
+                      Sucos Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -169,13 +170,13 @@ 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">
-                      Posto Adm ID<span className="text-red-500">*</span>
+                      Postu Administrativo ID<span className="text-red-500">*</span>
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
                           {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
-                            ?.PostoAdms_name || 'Select Posto Administrativo'}
+                            ?.PostoAdms_name || 'Select Postu Administrativo'}
                         </button>
                       </PopoverTrigger>
                       <PopoverContent
@@ -183,9 +184,9 @@ const AddDialog = () => {
                         onWheel={(e) => e.stopPropagation()}
                       >
                         <Command>
-                          <CommandInput placeholder="Search Posto Adms..." />
+                          <CommandInput placeholder="Search Postu Administrativo..." />
                           <CommandList>
-                            <CommandEmpty>No Posto Adms Found.</CommandEmpty>
+                            <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
                             <CommandGroup>
                               {posto_adms.map((posto) => (
                                 <CommandItem

src/pages/master/sucos/blocks/DeleteDialog.tsx

@@ -25,7 +25,7 @@ const DeleteDialog = () => {
 
   const doDeleteSucos = useCallback(async () => {
     if (!selectedSucos) {
-      toast.error('No sucos selected');
+      toast.error('No Sucos selected');
       return;
     }
 
@@ -41,7 +41,7 @@ const DeleteDialog = () => {
       reload();
       const createActivity = {
         module: 'Manage Sucos',
-        description: `Delete Suco => ${selectedSucos}`,
+        description: `Delete Sucos => ${selectedSucos}`,
         action: 'D'
       };
 

src/pages/master/sucos/blocks/EditDialog.tsx

@@ -79,7 +79,7 @@ const EditDialog = () => {
         reload();
         const createActivity = {
           module: 'Manage Sucos',
-          description: `Edit Suco => ${selectedSucos}`,
+          description: `Edit Sucos => ${selectedSucos}`,
           action: 'U'
         };
 
@@ -103,10 +103,11 @@ const EditDialog = () => {
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
 
-      setPostoadms(response?.data.list);
       // console.log('Data Posto Adms:', response?.data.list);
+      setPostoadms(response?.data.list);
     } catch (error) {
-      console.log('Error fetching postoadms', error);
+      console.log('Error fetching Postu Administrativo', error);
+      setAlert({ show: true, message: 'Failed to get Posto Administrativo. Please try again.' });
     }
   }, []);
 
@@ -118,7 +119,7 @@ const EditDialog = () => {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
-        postoId: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
+        postoId: response.data.posto.id
       }));
     } else {
       setFormField((prev) => ({
@@ -126,8 +127,6 @@ const EditDialog = () => {
         name: ''
       }));
     }
-    console.log('Responnya nih:', response);
-    console.log('Data Posto nya nih:', response?.data?.posto);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -138,7 +137,7 @@ const EditDialog = () => {
       return;
     }
 
-    console.log('Form Field before update:', formField); // Log formField sebelum update
+    // console.log('Form Field before update:', formField);
     doUpdateSucos(e);
     setAlert({ show: false, message: '' });
   };
@@ -146,14 +145,12 @@ const EditDialog = () => {
   useEffect(() => {
     if (showEditDialog) {
       resetForm();
-      console.log('Edit Dialog Opened'); // Log ketika dialog dibuka
     }
   }, [showEditDialog]);
 
   useEffect(() => {
     if (selectedSucos) {
       doFetchData(selectedSucos);
-      console.log('Selected Sucos ID:', selectedSucos); // Log selectedSucos ID
     }
   }, [selectedSucos]);
 
@@ -164,7 +161,6 @@ const EditDialog = () => {
         updated_by: parsedUser?.username,
         updated_at: formattedTime
       });
-      console.log('Form Field after update:', formField); // Log formField setelah update
     }
   }, [formattedTime]);
 
@@ -172,7 +168,6 @@ const EditDialog = () => {
     doFetchPostoAdms([{ id: 'name', desc: false }]);
   }, []);
 
-  // console.log(selectedSucos);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -193,7 +188,7 @@ const EditDialog = () => {
                 <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>
+                      Sucos Name<span className="text-red-500">*</span>
                     </label>
                     <Input
                       className="input"
@@ -207,21 +202,21 @@ const EditDialog = () => {
                 <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">
-                      Posto Administrativo Name
+                      Postu Administrativo Name
                       <span className="text-red-500">*</span>
                     </label>
                     <Popover open={open} onOpenChange={setOpen}>
                       <PopoverTrigger asChild>
                         <button type="button" className="input col-span-5 text-left">
                           {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
-                            ?.PostoAdms_name || 'Select Posto Adms'}
+                            ?.PostoAdms_name || 'Select Postu Administrativo'}
                         </button>
                       </PopoverTrigger>
                       <PopoverContent className="w-[400px] p-0">
                         <Command>
-                          <CommandInput placeholder="Search Posto Adms..." />
+                          <CommandInput placeholder="Search Postu Administrativo..." />
                           <CommandList>
-                            <CommandEmpty>No Posto Adms Found.</CommandEmpty>
+                            <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
                             <CommandGroup>
                               {postoadms.map((posto) => (
                                 <CommandItem
@@ -230,7 +225,7 @@ const EditDialog = () => {
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      postoId: posto.PostoAdms_id // Gunakan PostoAdms_id
+                                      postoId: posto.PostoAdms_id
                                     });
                                     setOpen(false);
                                   }}

src/pages/master/sucos/hooks/ManageSucosContext.tsx

@@ -106,7 +106,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
           const value = row.getValue<string>(columnId);
           return String(value).includes(String(filterValue));
         },
-        header: ({ column }) => <DataGridColumnHeader title="Posto Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Postu Administrativo Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
         meta: {

src/pages/master/wallet/blocks/AddDialog.tsx

@@ -55,13 +55,13 @@ const AddDialog = () => {
     description: string;
     status: string;
     group: string[];
-    currency_id: string;
+    id_currency: string;
   } = {
     name: '',
     description: '',
     status: '',
     group: [],
-    currency_id: ''
+    id_currency: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
@@ -126,13 +126,13 @@ const AddDialog = () => {
       formField.description.trim() === '' ||
       formField.status.trim() === '' ||
       formField.group.length === 0 ||
-      formField.currency_id.trim() === ''
+      formField.id_currency.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    console.log(formField);
+    // console.log(formField);
     doCreateWallet(e);
     setAlert({ show: false, message: '' });
   };
@@ -251,8 +251,8 @@ const AddDialog = () => {
                       Currency<span className="text-red-500">*</span>
                     </label>
                     <Select
-                      value={formField.currency_id}
-                      onValueChange={(value) => setFormField({ ...formField, currency_id: value })}
+                      value={formField.id_currency}
+                      onValueChange={(value) => setFormField({ ...formField, id_currency: value })}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Currency Type" />

src/pages/master/wallet/blocks/EditDialog.tsx

@@ -53,11 +53,13 @@ const EditDialog = () => {
     name: string;
     description: string;
     status: string;
+    currency_id: string;
     group: string[];
   } = {
     name: '',
     description: '',
     status: '',
+    currency_id: '',
     group: []
   };
   const [formField, setFormField] = useState(initialState);
@@ -74,7 +76,7 @@ const EditDialog = () => {
       // e.preventDefault();
 
       const response = await PutData(
-        `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`,
+        `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.id}`,
         payload
       );
 
@@ -85,7 +87,7 @@ const EditDialog = () => {
 
         const createActivity = {
           module: 'Manage Wallet',
-          description: `Edit Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
+          description: `Edit Wallet => ${selectedWallet?.id} - ${selectedWallet?.name}`,
           action: 'U'
         };
 
@@ -164,6 +166,8 @@ const EditDialog = () => {
     }
   };
 
+  const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
+
   const selectedGroupNames = groups
     .filter((g) => formField.group.includes(g.id))
     .map((g) => g.name)
@@ -184,7 +188,7 @@ const EditDialog = () => {
       //   currency_id: selectedWallet?.Wallet_currency_id,
       //   group: selectedWallet?.Wallet_group
       // }));
-      doFetchData(selectedWallet?.Wallet_id);
+      doFetchData(selectedWallet?.id);
     }
   }, [selectedWallet]);
 
@@ -257,6 +261,21 @@ const EditDialog = () => {
                   </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">Currency</label>
+                    <div className="relative w-full">
+                      <Input
+                        type="text"
+                        placeholder="Empty"
+                        value={selectedCurrency?.name}
+                        readOnly
+                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                      />
+                    </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">Groups</label>

src/pages/master/wallet/hooks/ManageWalletContext.tsx

@@ -7,12 +7,12 @@ import { Toaster } from 'sonner';
 import ListToolbar from '../blocks/ListToolbar';
 
 interface WalletProps {
-  Wallet_id: string;
-  Wallet_name: string;
-  Wallet_status: string;
-  Wallet_description: string;
-  Wallet_group: string[];
-  Wallet_currency_id: string;
+  id: string;
+  name: string;
+  status: string;
+  description: string;
+  group: string[];
+  currency_id: string;
 }
 
 interface ContextProps {
@@ -73,7 +73,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.Wallet_name,
+        accessorFn: (row) => row.name,
         id: 'name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
         enableSorting: true,
@@ -83,7 +83,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.Wallet_description,
+        accessorFn: (row) => row.description,
         id: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
         enableSorting: true,
@@ -93,13 +93,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorFn: (row) => row.Wallet_status,
+        accessorFn: (row) => row.status,
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: true,
         enableHiding: false,
         cell: ({ row }) => {
-          const isActive = row.original.Wallet_status === 'Y';
+          const isActive = row.original.status === 'Y';
 
           return (
             <span
@@ -183,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'created_at', desc: true }]}
+        sorting={[{ id: 'wallets.created_at', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)

src/pages/master/walletRule/blocks/AddDialog.tsx

@@ -40,14 +40,24 @@ interface GroupProps {
   status: string;
 }
 
-interface WalletProps {
-  ID: string;
+interface WalletGroupProps {
+  id: string;
   name: string;
-  id_currency: string;
+  description: string;
   status: string;
 }
 
+interface WalletProps {
+  id: string;
+  name: string;
+  id_currency: string;
+  status: string;
+  group: WalletGroupProps[];
+}
+
 const API_URL_WALLET = apiConfig.service_wallet;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+
 const AddDialog = () => {
   const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
   const { reload } = useDataGrid();
@@ -77,7 +87,6 @@ const AddDialog = () => {
     status: ''
   };
   const [formField, setFormField] = useState(initialState);
-  const [groups, setGroups] = useState<GroupProps[]>([]);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
 
   const resetForm = () => {
@@ -114,7 +123,16 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.id_group.trim() === '' || formField.status.trim() === '') {
+    if (
+      formField.id_group.trim() === '' ||
+      formField.status.trim() === '' ||
+      formField.id_wallet.trim() === '' ||
+      formField.max_transaction_per_day === null ||
+      formField.balance_minimum === null ||
+      formField.balance_maximum === null ||
+      formField.credit_limit === null ||
+      formField.monthly_limit === null
+    ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -124,26 +142,9 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const getGroupLists = async (sorting: any) => {
-    try {
-      const response = await GetData(`${API_URL_WALLET}/dashboard/group`, {
-        limit: 100,
-        page: 1,
-        with_deleted: false,
-        order_field: sorting[0].id,
-        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-      });
-
-      // console.log('GROUPS: ', response?.data);
-      setGroups(response?.data.list);
-    } catch (error) {
-      console.error('Error fetching groups', error);
-    }
-  };
-
   const getWalletLists = async (sorting: any) => {
     try {
-      const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, {
+      const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, {
         limit: 100,
         page: 1,
         with_deleted: false,
@@ -158,9 +159,11 @@ const AddDialog = () => {
     }
   };
 
+  const selectedWallet = wallets.find((wallet) => wallet.id === formField.id_wallet);
+  const filteredGroups = selectedWallet ? selectedWallet.group : [];
+
   useEffect(() => {
-    getWalletLists([{ id: 'name', desc: false }]);
-    getGroupLists([{ id: 'name', desc: false }]);
+    getWalletLists([{ id: 'wallets.name', desc: false }]);
   }, []);
 
   useEffect(() => {
@@ -193,14 +196,16 @@ const AddDialog = () => {
                     </label>
                     <Select
                       value={formField.id_wallet}
-                      onValueChange={(value) => setFormField({ ...formField, id_wallet: value })}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, id_wallet: value, id_group: '' })
+                      }
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Wallet Type" />
                       </SelectTrigger>
                       <SelectContent>
                         {wallets.map((wallet) => (
-                          <SelectItem key={wallet.ID} value={wallet.ID}>
+                          <SelectItem key={wallet.id} value={wallet.id}>
                             {wallet.name}
                           </SelectItem>
                         ))}
@@ -217,16 +222,21 @@ const AddDialog = () => {
                     <Select
                       value={formField.id_group}
                       onValueChange={(value) => setFormField({ ...formField, id_group: value })}
+                      disabled={filteredGroups.length === 0}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Group Type" />
                       </SelectTrigger>
                       <SelectContent>
-                        {groups.map((group) => (
-                          <SelectItem key={group.ID} value={group.ID}>
-                            {group.name}
-                          </SelectItem>
-                        ))}
+                        {filteredGroups.length > 0 ? (
+                          filteredGroups.map((group) => (
+                            <SelectItem key={group.id} value={group.id}>
+                              {group.name}
+                            </SelectItem>
+                          ))
+                        ) : (
+                          <SelectItem value="empty">No groups available</SelectItem>
+                        )}
                       </SelectContent>
                     </Select>
                   </div>

src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx

@@ -81,6 +81,26 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorFn: (row) => row.wallet.name,
+        id: 'wallet_name',
+        header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.group.name,
+        id: 'group_name',
+        header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
       {
         accessorFn: (row) => row.balance_minimum,
         id: 'balance_minimum',
@@ -227,7 +247,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
       <Toaster expand visibleToasts={9} duration={3000} />
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 5 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/members/kyc/Kyc.tsx

@@ -5,12 +5,15 @@ import React, { createContext, useContext, useState, useEffect } from 'react';
 import { ManageKycContextProvider } from './hooks';
 import { columns, initialMember } from './Columns';
 import { useAuthContext } from '@/auth';
+import { LoaderTransparant } from '@/components';
 import { apiConfig } from '@/config/api.config';
 import ConfirmDialog from '@/components/confirm';
 import axios from 'axios';
 import { toast } from 'sonner';
 const BASE_URL = apiConfig.service_customer;
-import CustomerDialog from '../manage-members/CustomerDetailModal';
+const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
+// import CustomerDialog from '../manage-members/CustomerDetailModal';
+import DetailMember from '../manage-members/blocks/DetailMember';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 
@@ -37,6 +40,7 @@ const Kyc = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
   const [member, setMember] = useState(initialMember);
+  const [profession, setProfession] = useState([]);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
@@ -44,12 +48,12 @@ const Kyc = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
-    fetchGroups();
+    fetchCustomers();
   }, []);
 
-  async function fetchGroups() {
+  async function fetchCustomers() {
     try {
-      let groups = await axios.get(`${BASE_URL}/customer/list`, {
+      let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
           limit: 10,
           page: 1,
@@ -60,14 +64,24 @@ const Kyc = () => {
         }
       });
       let temp = 1;
-      let resMembers = groups.data.data.list.map((el: any) => {
+      let resMembers = customers.data.data.list.map((el: any) => {
         el.no = temp++;
         el.name = el.fullname;
         return el;
       });
       setMembers(resMembers);
+      let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
+        params: {
+            limit: 50,
+            page: 1,
+            with_deleted: false,
+            order_field: 'name',
+            order_direction: 'ASC',
+        }
+      });
+      setProfession(getProfession.data.data.list)
     } catch (error: any) {
-      alert(error.message);
+      toast.error(error.message);
       console.log(error);
     }
   }
@@ -90,6 +104,7 @@ const Kyc = () => {
   }
 
   const handleYes = async () => {
+    setLoading(true)
     const userLogin: any = await getUser();
     const updateData: any = member;
     const customerId = member.id;
@@ -97,6 +112,10 @@ const Kyc = () => {
     updateData.updated_by = userLogin.data ? userLogin.data.id : '';
     let today = new Date();
     updateData.updated_at = today.toString();
+    updateData.municipio = updateData.municipio_id;
+    updateData.posto_adms = updateData.posto_adms_id;
+    updateData.suco = updateData.suco_id;
+    updateData.aldeia = updateData.aldeia_id;
     delete updateData.id;
     delete updateData.pin;
     delete updateData.name;
@@ -107,6 +126,14 @@ const Kyc = () => {
     delete updateData.destinationGroup;
     delete updateData.statusApproval;
     delete updateData.description;
+    delete updateData.municipio_id;
+    delete updateData.municipio_name;
+    delete updateData.posto_adms_id;
+    delete updateData.posto_adms_name;
+    delete updateData.suco_id;
+    delete updateData.suco_name;
+    delete updateData.aldeia_id;
+    delete updateData.aldeia_name;
     delete updateData.group_id;
     delete updateData.group_name;
     delete updateData.group_description;
@@ -117,30 +144,41 @@ const Kyc = () => {
     delete updateData.group_updated_at;
     delete updateData.group_deleted_by;
     delete updateData.group_deleted_at;
+    delete updateData.updated_at;
     try {
+      const form = new FormData();
+      for (const property in updateData) {
+        if (updateData[property]) form.append(property, updateData[property]);
+      }
       if (dialogType === 'reject') {
         await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId });
       }
       if (dialogType === 'update') {
-        await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData);
+        await axios.put(`${BASE_URL}/customer/update/${customerId}`, form);
         if (updateData.isneedapproval == 1)
           await axios.post(`${BASE_URL}/customer/approve`, {
             customerid: customerId,
             description: description
           });
       }
-      await fetchGroups();
+      await fetchCustomers();
       setDialogOpen(false);
       setIsDialogOpen(false);
-      toast.success('Success Update Kyc Member');
+      toast.success(`Success Update & ${dialogType} Kyc Member`);
     } catch (error: any) {
-      alert(error.message);
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.error(error.message);
+      setLoading(false)
     }
   };
 
+  function setShowAddDialog(el: any) {
+    setIsDialogOpen(el)
+  }
+
+  if (loading) return <LoaderTransparant />;
+
   return (
     <>
       <Helmet>
@@ -156,15 +194,27 @@ const Kyc = () => {
             onYes={handleYes}
             onNo={() => setDialogOpen(false)}
           />
-          <CustomerDialog
-            open={isDialogOpen}
-            handleClose={closeDialog}
-            handleReject={handleReject}
-            handleSubmit={handleSubmit}
-            initialData={member}
-            viewStats={true}
-            page={'kyc'}
-          />
+          { member.id ? (
+            // <CustomerDialog
+            //   open={isDialogOpen}
+            //   handleClose={closeDialog}
+            //   handleSubmit={handleSubmit}
+            //   initialData={member}
+            //   viewStats={true}
+            //   page={'kyc'}
+            // />
+            <DetailMember
+              showAddDialog={isDialogOpen}
+              setShowAddDialog={setShowAddDialog}
+              handleClose={closeDialog}
+              handleReject={handleReject}
+              handleSubmit={handleSubmit}
+              initialData={member}
+              fetchCustomers={fetchCustomers}
+              profession={profession}
+              page={'kyc'}
+            />
+          ): ""}
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1>
           <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
             <Breadcrumbs>

src/pages/members/manage-members/Columns.tsx

@@ -178,5 +178,7 @@ export const initialMember = {
   posto_adms: '',
   suco: '',
   aldeia: '',
-  profession: ''
+  profession: '',
+  approval_description_premium: '',
+  approval_description_agent: ''
 };

src/pages/members/manage-members/CustomerDetailModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import axios from 'axios';
 import { Dialog,DialogActions,DialogContent,DialogTitle,TextField,Button,MenuItem,Select,InputLabel,FormControl,Typography,
-  InputAdornment,Grid,Box
+  InputAdornment,Grid,Box,List,ListItem,
 } from "@mui/material";
 import UploadFileIcon from "@mui/icons-material/UploadFile";
 import Divider from '@mui/material/Divider';
@@ -11,7 +11,7 @@ import ConfirmDialog from '@/components/confirm';
 import { toast } from 'sonner';
 const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL_CUSTOMER = apiConfig.service_customer;
-
+// MAIN PAGE
 const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: any) => {
   const [formData, setFormData] = useState(initialData || initialMember);
   const [viewOnly, setViewOnly] = useState(viewStats || false);
@@ -19,6 +19,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
   const [aldeias, setAldeias] = useState([]);
   const [postoAdm, setPostoAdm] = useState([]);
   const [sucos, setSucos] = useState([]);
+  const [profession, setProfession] = useState([]);
   const [groupData] = useState({
     reguler: `This fill can not be empty!`,
     premium: `This field required only for Premium or Agent`,
@@ -32,6 +33,16 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
 
   async function fetchMasterData() {
     try {
+      let getProfession = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setProfession(getProfession.data.data.list)
       let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
         params: {
           limit: 50,
@@ -80,7 +91,8 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
   const handleChange = async (e: any) => {
     const { name, value } = e.target;
     if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
-    if (name === "file_selfie" || name === "photouser") { // FOR FILE ONLY
+    if (name === "file_selfie" || name === "photouser" || name === 'file_document_id' || name === "file_document_id_selfie" ||
+      name === "file_commercial_license") { // FOR FILE ONLY
       setFormData({ ...formData, [name]: e.target.files[0] });
     } else {
       setFormData({ ...formData, [name]: value });
@@ -127,8 +139,9 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
   }
 
   const onSubmit = () => {
+    if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
     handleSubmit(formData);
-    handleClose();
+    // handleClose();
   };
 
   const onReject = () => {
@@ -190,6 +203,8 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
         <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
         <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} />
+        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Longitude Merchant" name="longitudemerchant" value={formData.longitudemerchant} onChange={handleChange} />
+        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Latitude Merchant" name="latitudemerchant" value={formData.latitudemerchant} onChange={handleChange} />
         {fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)}
         <img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/>
         {fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)}
@@ -200,7 +215,17 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <img width={300} height={250} srcSet={formData.file_commercial_license} src={formData.file_commercial_license} alt={"file_commercial_license"} style={{borderRadius: 10}}/>
         {/* AGENT & PREMIUM DATA */}
         
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
+        {/* <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} /> */}
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Profession</InputLabel>
+          <Select disabled={viewOnly} name="profession" value={formData.profession} onChange={handleChange}>
+            {
+              profession ? profession.map((el: any) => (
+                <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
+              )) : ""
+            }
+          </Select>
+        </FormControl>
         {/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
         {/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
         <FormControl fullWidth margin="dense">
@@ -270,13 +295,16 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
         <Divider className="pt-7"/>
         {/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */}
-        {
-          page === 'kyc' ? (
+        { page === 'kyc' ? (
             <>
               <Typography sx={{color:'grey'}}>Approval</Typography>
-              <TextField fullWidth margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
+              <TextField fullWidth required={page === 'kyc'?true:false} margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
             </>
-          ) : (<>{getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}</>)
+          ) : (<>
+            {getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}
+            <Divider className="pt-7"/>
+            {formData.id ? showCustomerWallet(formData.id) : ""}
+          </>)
         }
       </DialogContent>
       <DialogActions>
@@ -317,11 +345,11 @@ function fileTextFile(label: string, value: any, name: string, handleChange: any
             <input
               type="file"
               id="file-upload"
-              style={{ display: "none" }}
+              // style={{ display: "none" }}
               onChange={handleChange}
               name={name}
             />
-            <label htmlFor="file-upload">
+            {/* <label htmlFor="file-upload">
               <Button
                 component="span"
                 variant="contained"
@@ -330,14 +358,14 @@ function fileTextFile(label: string, value: any, name: string, handleChange: any
               >
                 Browse
               </Button>
-            </label>
+            </label> */}
           </InputAdornment>
         ),
       }}
     />
   )
 }
-
+// ACCESS ADM
 function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers: any, viewOnly: any, setViewOnly: any) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
@@ -411,8 +439,10 @@ function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers:
       await fetchCustomers()
       toast.success('Success Change group')
     } catch (error: any) {
+      console.log(error);
       toast.error(error.message)
     } finally {
+      await fetchCustomers()
       setChangeGroupD(false)
       handleClose()
     }
@@ -517,7 +547,70 @@ function getPinStatus(status: string) {
     res: null
   }
 }
+// CUSTOMER WALLET
+function showCustomerWallet(customerid: any) {
+  const [customerWallet, setCustomerWallet] = useState([]);
+  if (!customerid) return ''
+  
+  useEffect(() => {
+    fetchCustomerWallet()
+  }, []);
 
-function showCustomerWallet() {
+  async function fetchCustomerWallet() {
+    try {
+      let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, { params: { customerid: customerid }});
+      setCustomerWallet(getCustWallet.data.data.wallets)
+    } catch (error: any) {
+      toast.error(error.message)
+    }
+  }
 
+  return (
+    <Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
+      <Typography variant="h6" gutterBottom>Wallet Member</Typography>
+      <Grid>
+        <List>
+          {customerWallet.length ? (customerWallet.map((item:any, index:any) => (
+            <React.Fragment key={item.id}>
+              <ListItem
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  px: 2,
+                  py: 1.5,
+                  bgcolor: index % 2 === 0 ? 'grey.50' : 'background.paper',
+                  borderRadius: 2,
+                  '&:hover': {
+                    bgcolor: 'grey.100',
+                  },
+                }}
+              >
+                <Box>
+                  <Typography variant="subtitle2" color="text.secondary">Name</Typography>
+                  <Typography variant="body1" fontWeight={500}>
+                    {item.wallet.name}
+                  </Typography>
+                </Box>
+                <Box>
+                  <Typography variant="subtitle2" color="text.secondary">Description</Typography>
+                  <Typography variant="body1">{item.wallet.description}</Typography>
+                </Box>
+                <Box>
+                  <Typography variant="subtitle2" color="text.secondary">Balance</Typography>
+                  <Typography variant="body1">{item.amount}</Typography>
+                </Box>
+                <Box>
+                  <Typography variant="subtitle2" color="text.secondary">Transaction Today</Typography>
+                  <Typography variant="body1">{item.transaction_number_today}</Typography>
+                </Box>
+              </ListItem>
+              {index < customerWallet.length - 1 && <Divider sx={{ my: 1 }} />}
+            </React.Fragment>
+          ))): "No wallet"}
+        </List>
+      </Grid>
+    </Box>
+  )
 }

src/pages/members/manage-members/ManageMembers.tsx

@@ -3,24 +3,29 @@ import { apiConfig } from '@/config/api.config';
 import { columns, Members, initialMember } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import CustomerDialog from './CustomerDetailModal';
+// import CustomerDialog from './CustomerDetailModal';
+import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
-import { ScreenLoader } from '@/components';
+import { LoaderTransparant } from '@/components';
 import { toast } from 'sonner';
 import { Breadcrumbs, Link } from '@mui/material';
+const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL = apiConfig.service_customer;
 import { Helmet } from 'react-helmet';
-
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
   const [selectedMember, setSelectedMember] = useState('');
   const [member, setMember] = useState(initialMember);
+  const [profession, setProfession] = useState([]);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
-  const closeDialog = () => setIsDialogOpen(false);
+  const closeDialog = () => {
+    setIsDialogOpen(false)
+    setMember(initialMember)
+  };
   const { getUser } = useAuthContext();
 
   useEffect(() => {
@@ -31,24 +36,34 @@ const ManageMembers = () => {
 
   async function fetchCustomers() {
     try {
-      let groups = await axios.get(`${BASE_URL}/customer/list`, {
+      let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
           limit: 20,
           page: 1,
           with_deleted: false,
-          order_field: 'fullname',
-          order_direction: 'ASC'
+          order_field: 'created_at',
+          order_direction: 'DESC'
         }
       });
       let temp = 1;
-      let resMembers = groups.data.data.list.map((el: any) => {
+      let resMembers = customers.data.data.list.map((el: any) => {
         el.no = temp++;
         el.name = el.fullname;
         return el;
       });
       setMembers(resMembers);
+      let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
+        params: {
+            limit: 50,
+            page: 1,
+            with_deleted: false,
+            order_field: 'name',
+            order_direction: 'ASC',
+        }
+      });
+      setProfession(getProfession.data.data.list)
     } catch (error: any) {
-      alert(error.message);
+      toast.error(error.message);
       console.log(error);
     }
   }
@@ -72,11 +87,16 @@ const ManageMembers = () => {
   }
 
   const handleYes = async () => {
+    setLoading(true)
     const userLogin: any = await getUser();
     const updateData: any = member;
     updateData.updated_by = userLogin.data ? userLogin.data.id : '';
     let today = new Date();
     updateData.updated_at = today.toString();
+    updateData.municipio = updateData.municipio_id;
+    updateData.posto_adms = updateData.posto_adms_id;
+    updateData.suco = updateData.suco_id;
+    updateData.aldeia = updateData.aldeia_id;
     delete updateData.id;
     delete updateData.pin;
     delete updateData.name;
@@ -87,6 +107,14 @@ const ManageMembers = () => {
     delete updateData.destinationGroup;
     delete updateData.statusApproval;
     delete updateData.description;
+    delete updateData.municipio_id;
+    delete updateData.municipio_name;
+    delete updateData.posto_adms_id;
+    delete updateData.posto_adms_name;
+    delete updateData.suco_id;
+    delete updateData.suco_name;
+    delete updateData.aldeia_id;
+    delete updateData.aldeia_name;
     delete updateData.group_id;
     delete updateData.group_name;
     delete updateData.group_description;
@@ -99,21 +127,33 @@ const ManageMembers = () => {
     delete updateData.group_deleted_at;
     delete updateData.updated_at;
     try {
-      if (dialogType === 'update')
-        await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, updateData);
+      const form = new FormData();
+      for (const property in updateData) {
+        if (updateData[property]) form.append(property, updateData[property]);
+      }
+      
+      if (dialogType === 'update') await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, form, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        });
       // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
-      await fetchCustomers();
-      setDialogOpen(false);
-      setIsDialogOpen(false);
       toast.success('Success Update Member');
     } catch (error: any) {
-      setDialogOpen(false);
-      setIsDialogOpen(false);
       toast.error(error.message);
+    } finally {
+      setDialogOpen(false);
+      closeDialog();
+      await fetchCustomers();
+      setLoading(false)
     }
   };
 
-  if (loading) return <ScreenLoader />;
+  function setShowAddDialog(el: any) {
+    setIsDialogOpen(el)
+  }
+
+  if (loading) return <LoaderTransparant />;
 
   return (
     <>
@@ -130,12 +170,17 @@ const ManageMembers = () => {
             onYes={handleYes}
             onNo={() => setDialogOpen(false)}
           />
-          <CustomerDialog
-            open={isDialogOpen}
-            handleClose={closeDialog}
-            handleSubmit={handleSubmit}
-            initialData={member}
-          />
+          { member.id !== '' ? (
+            <DetailMember
+              showAddDialog={isDialogOpen}
+              setShowAddDialog={setShowAddDialog}
+              handleClose={closeDialog}
+              handleSubmit={handleSubmit}
+              initialData={member}
+              fetchCustomers={fetchCustomers}
+              profession={profession}
+            />
+          ): ""}
           <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1>
           <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
             <Breadcrumbs>

src/pages/members/manage-members/blocks/AdmAccess.tsx

@@ -0,0 +1,248 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue
+} from '@/components/ui/select';
+import { apiConfig } from '@/config/api.config';
+import ConfirmDialog from '@/components/confirm';
+const BASE_URL_CUSTOMER = apiConfig.service_customer;
+
+// ACCESS ADM
+export default function AdmAccess(
+  page: string,
+  data: any,
+  handleClose: any,
+  fetchCustomers: any,
+  viewOnly: any,
+  setViewOnly: any
+) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogType, setDialogType] = useState('');
+  const [changeGroup, setChangeGroup] = useState('');
+  const [changeGroupD, setChangeGroupD] = useState(false);
+  const [groups, setGroups] = useState([]);
+
+  useEffect(() => {
+    fetchGroups();
+  }, []);
+
+  const fetchGroups = async () => {
+    try {
+      let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC'
+        }
+      });
+      setGroups(getGroups.data.data.list);
+    } catch (error: any) {
+      toast.error(error.message);
+    }
+  };
+
+  const handleYes = async () => {
+    try {
+      if (dialogType === 'update status') {
+        let statusNext = getPinStatus(data.status).res;
+        if (statusNext)
+          await axios.put(`${BASE_URL_CUSTOMER}/customer/statuspin`, {
+            customerid: data.id,
+            status: statusNext
+          });
+        else toast.error('Handle Active/Suspend only');
+        await fetchCustomers();
+        toast.success('Success Update Status');
+      }
+      if (dialogType === 'reset pin') {
+        if (data.id)
+          await axios.post(`${BASE_URL_CUSTOMER}/customer/resetpin`, { customerid: data.id });
+        else throw { message: 'data.id not found' };
+        await fetchCustomers();
+        toast.success('Pin will send to customer MSISDN');
+      }
+    } catch (error: any) {
+      toast.error(error.message);
+    } finally {
+      setDialogOpen(false);
+      handleClose();
+    }
+  };
+
+  function buttonStatus(e: any) {
+    e.preventDefault();
+    setDialogType('update status');
+    setDialogOpen(true);
+  }
+
+  function buttonResetPin(e: any) {
+    e.preventDefault();
+    setDialogType('reset pin');
+    setDialogOpen(true);
+  }
+
+  async function buttonChangeGroup() {
+    try {
+      let dataObj = {
+        customerid: data.id,
+        destination_group: changeGroup
+      };
+      if (data.group_id === changeGroup)
+        throw { message: `You update same group as the exist customer group` };
+      if (dataObj.customerid && dataObj.destination_group) {
+        await axios.post(`${BASE_URL_CUSTOMER}/customer/change-group`, dataObj);
+      }
+      toast.success('Success Change group');
+      await fetchCustomers();
+      setChangeGroupD(false);
+      handleClose();
+    } catch (error: any) {
+      console.log(error);
+      toast.error(error.message);
+    }
+  }
+
+  function openChangeGroupDialog(e: any) {
+    e.preventDefault();
+    setChangeGroup(data.group_id);
+    setChangeGroupD(true);
+  }
+
+  function btnConfirmDialog(status: boolean) {
+    setDialogOpen(status);
+  }
+
+  if (page !== 'kyc') {
+    return (
+      <div className="bg-white p-6 rounded-md shadow-md space-y-6">
+        <h2 className="text-lg font-semibold">Access Administration</h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Left Side */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <p className="text-sm">Pin Status: {getPinStatus(data.status).msg}</p>
+              <Button variant="default" onClick={(e) => buttonStatus(e)}>
+                {getPinStatus(data.status).btn}
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm">Reset PIN</p>
+              <Button variant="default" onClick={(e) => buttonResetPin(e)}>
+                Reset PIN
+              </Button>
+            </div>
+          </div>
+
+          {/* Right Side */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <p className="text-sm">Change Group</p>
+              <Button variant="default" onClick={(e) => openChangeGroupDialog(e)}>
+                Change Group
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm">Edit Member</p>
+              <Button variant="default" onClick={() => setViewOnly(!viewOnly)}>
+                {viewOnly ? 'Open Edit' : 'Close Edit'}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Change Group Dialog */}
+        <Dialog open={changeGroupD} onOpenChange={setChangeGroupD}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle className="text-orange-500">
+                Are you sure to change customer Group?
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="space-y-3 p-5">
+              <p className="text-sm font-medium">Destination Group</p>
+              <Select value={changeGroup} onValueChange={setChangeGroup}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select group" />
+                </SelectTrigger>
+                <SelectContent>
+                  {groups?.map((el: any) => (
+                    <SelectItem key={el.id} value={el.id}>
+                      {el.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setChangeGroupD(false)}>
+                No
+              </Button>
+              <Button onClick={buttonChangeGroup}>Yes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+        <ConfirmDialog
+          open={dialogOpen}
+          //   onClose={() => btnConfirmDialog(false)}
+          onOpenChange={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={`Are you sure you want to ${dialogType}?`}
+          onYes={handleYes}
+          onNo={() => btnConfirmDialog(false)}
+        />
+      </div>
+    );
+  } else {
+    return '';
+  }
+}
+
+function getPinStatus(status: string) {
+  if (status === 'Y')
+    return {
+      msg: 'Active',
+      btn: 'Block PIN',
+      res: 'Block'
+    };
+  if (status === 'N')
+    return {
+      msg: 'Not Active',
+      btn: 'Activate PIN',
+      res: null
+    };
+  if (status === 'P')
+    return {
+      msg: 'Suspend PIN',
+      btn: 'Unblock PIN',
+      res: 'UnBlock'
+    };
+  if (status === 'O')
+    return {
+      msg: 'Suspend OTP',
+      btn: 'Unblock OTP',
+      res: null
+    };
+  return {
+    msg: 'None',
+    btn: 'No status found',
+    res: null
+  };
+}

src/pages/members/manage-members/blocks/CustomerWallet.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+const BASE_URL_CUSTOMER = apiConfig.service_customer;
+
+export default function CustomerWallet(customerid: any) {
+  const [customerWallet, setCustomerWallet] = useState([]);
+  if (!customerid) return '';
+
+  useEffect(() => {
+    fetchCustomerWallet();
+  }, []);
+
+  async function fetchCustomerWallet() {
+    try {
+      let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, {
+        params: { customerid: customerid }
+      });
+      setCustomerWallet(getCustWallet.data.data.data);
+    } catch (error: any) {
+      // toast.error(error.message);
+      toast.error(`Wallet Not Found`);
+    }
+  }
+
+  return (
+    <div className="bg-white p-6 rounded-md shadow-md space-y-4">
+      <h2 className="text-lg font-semibold">Wallet Member</h2>
+      <Card className="p-4">
+        {customerWallet.length ? (
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm text-left">
+              <thead className="text-xs text-gray-500 border-b">
+                <tr>
+                  <th className="p-2">No</th>
+                  <th className="p-2">Name</th>
+                  <th className="p-2">Balance</th>
+                  <th className="p-2">Month Limit</th>
+                  <th className="p-2">Credit Limit</th>
+                </tr>
+              </thead>
+              <tbody>
+                {customerWallet.map((item:any, index) => (
+                  <tr
+                    key={item.id}
+                    className={`${
+                      index % 2 === 0 ? "bg-gray-50" : "bg-white"
+                    } hover:bg-gray-100`}
+                  >
+                    <td className="p-2 font-medium">{index+1}</td>
+                    <td className="p-2">{item.wallet}</td>
+                    <td className="p-2">{item.amount}</td>
+                    <td className="p-2">{item.monthly_limit}</td>
+                    <td className="p-2">{item.credit_limit}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No wallet</p>
+        )}
+      </Card>
+    </div>
+  );
+}

src/pages/members/manage-members/blocks/DetailMember.tsx

@@ -0,0 +1,367 @@
+import { apiConfig } from '@/config/api.config';
+import { Alert, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';
+import axios from 'axios';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
+const URL_NATIONALITY = apiConfig.nationality;
+import { initialMember } from "../Columns";
+import AdmAccess from './AdmAccess';
+import CustomerWallet from './CustomerWallet';
+
+const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialData, handleReject, page, fetchCustomers,
+    handleClose, profession
+ }: any) => {
+    const [formData, setFormData] = useState(initialData || initialMember);
+    const [viewOnly, setViewOnly] = useState(false);
+    const [nationality, setNationality] = useState([]);
+    const [municipios, setMunicipios] = useState([]);
+    const [aldeias, setAldeias] = useState([]);
+    const [postoAdm, setPostoAdm] = useState([]);
+    const [sucos, setSucos] = useState<any>([]);
+    const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
+    const [status] = useState([
+        { name: 'Active',id: 'Y' }, { name: 'Inactive',id: 'N' }, { name: 'Suspend PIN',id: 'P' }, { name: 'Suspend OTP',id: 'O' }
+    ])
+    const [banks] = useState([
+        { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
+    ])
+    const parentRef = useRef<any | null>(null);
+    const [alert, setAlert] = useState({
+        show: false,
+        message: ''
+    });
+
+    useEffect(() => {
+        setFormData(initialData || {});
+        // fetchMasterData()
+    }, [initialData]);
+
+    const handleChange = async (e: any) => {
+        const { name, value } = e.target;
+        if (name === "file_selfie" || name === "photouser" || name === 'file_document_id' || name === "file_document_id_selfie" ||
+          name === "file_commercial_license") { // FOR FILE ONLY
+          setFormData({ ...formData, [name]: e.target.files[0] });
+        } else if(name === "nationality") {
+            let getNationality = await axios.get(`${URL_NATIONALITY}/${value}`);
+            setNationality(getNationality.data.data)
+            setFormData({ ...formData, [name]: value });
+        } else {
+            setFormData({ ...formData, [name]: value });
+            if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
+        }
+    };
+
+    async function getMasterAfter(name: string, id: any) {
+        if (name === 'municipio') {
+          let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
+            params: {
+              limit: 50,
+              page: 1,
+              with_deleted: false,
+              order_field: 'name',
+              order_direction: 'ASC',
+            }
+          });
+          setPostoAdm(getMunicipiosPosto.data.data)
+        }
+        if (name === 'posto_adms') {
+          let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, {
+            params: {
+              limit: 50,
+              page: 1,
+              with_deleted: false,
+              order_field: 'name',
+              order_direction: 'ASC',
+            }
+          });
+          setSucos(getPostoSuco.data.data)
+        }
+        if (name === 'suco') {
+          let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
+            params: {
+              limit: 50,
+              page: 1,
+              with_deleted: false,
+              order_field: 'name',
+              order_direction: 'ASC',
+            }
+          });
+          setAldeias(getSucoAldeias.data.data)
+        }
+    }
+
+    const handleAddDialog = (show:boolean) => {
+        if (show) {
+            setShowAddDialog(show) 
+        } else {
+            handleClose()
+            setShowAddDialog(show) 
+        }
+    }
+    
+    async function fetchMasterData() {
+        try {
+            let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
+            params: {
+                limit: 50,
+                page: 1,
+                with_deleted: false,
+                order_field: 'name',
+                order_direction: 'ASC',
+            }
+            });
+            setMunicipios(getMunicipios.data.data.list)
+            let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
+            params: {
+                limit: 50,
+                page: 1,
+                with_deleted: false,
+                order_field: 'name',
+                order_direction: 'ASC',
+            }
+            });
+            setPostoAdm(getPostoAdms.data.data.list)
+            let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
+            params: {
+                limit: 50,
+                page: 1,
+                with_deleted: false,
+                order_field: 'name',
+                order_direction: 'ASC',
+            }
+            });
+            setSucos(getSucos.data.data.list)
+            let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
+            params: {
+                limit: 50,
+                page: 1,
+                with_deleted: false,
+                order_field: 'name',
+                order_direction: 'ASC',
+            }
+            });
+            setAldeias(getAldeias.data.data.list)
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    function buttonOnSubmit(e:any) {
+        e.preventDefault();
+        if (page === 'kyc' && formData.destinationGroup === "Premium" && !formData.approval_description_premium) return toast.warning(`Approval Premium Description needed!`)
+        if (page === 'kyc' && formData.destinationGroup === "Agent" && !formData.approval_description_premium) return toast.warning(`Approval Agent Description needed!`)
+        if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
+        handleSubmit(formData);
+    }
+
+    function btnPrevDef(e:any) {
+        e.preventDefault();
+        viewOnly ? setViewOnly(false) : setViewOnly(true)
+    }
+
+    const onReject = () => {
+        handleReject(formData);
+        handleClose();
+    }
+
+    return (
+        <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+            <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5">
+                <DialogHeader>
+                    <DialogTitle>Member - View/Edit</DialogTitle>
+                    <DialogDescription></DialogDescription>
+                </DialogHeader>
+                <DialogBody ref={parentRef}>
+                    <div className="flex flex-col">
+                        {alert.show && (
+                            <Alert variant="danger">
+                                <h3>{alert.message}</h3>
+                            </Alert>
+                        )}
+
+                        {/* <form> */}
+                        {/* onSubmit={(e) => buttonOnSubmit(e, formData)} */}
+                            <div className="card-body grid gap-5">
+
+                                {formData.id ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, true): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
+                                {formData.id ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''}
+                                {formData.id ? generateList(formData, handleChange, genders, 'gender', 'Gender', null, true): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
+                                {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
+                                {formData.id ? generateList(formData, handleChange, profession, 'profession', 'Profession', null, false): ''}
+                                {formData.id ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', null, false): ''}
+                                {formData.id ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', 'posto_adms_id', false): ''}
+                                {formData.id ? generateList(formData, handleChange, sucos, 'suco', 'Suco', 'sucos_id', false): ''}
+                                {formData.id ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', null, false): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
+                                <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>
+                                    <ul className="">
+                                        {nationality.map((item: any, index) => (
+                                            <li key={index} value={item.name} 
+                                            onClick={() => handleChange({target:{name: 'nationality', value: item.name }})}
+                                            className="bg-gray-100 px-4 py-2 rounded hover:bg-gray-200 cursor-default transition">
+                                                {item.name}
+                                            </li>
+                                        ))}
+                                        {formData.nationality && nationality.length === 0 && (
+                                            <li className="text-gray-500">No results found.</li>
+                                        )}
+                                    </ul>
+                                </div>
+                                {formData.id ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
+
+                                {formData.id ? generateInput(formData, handleChange, 'License Number', 'license_number', 'text', false, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Merchant Name', 'agent_name', 'text', false, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''}
+                                {formData.id ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie'): ''}
+                                {formData.id ? generateImage(formData, handleChange, 'File Document', 'file_document_id'): ''}
+                                {formData.id ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''}
+                                {formData.id ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''}
+
+                                {formData.id ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', null, false): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
+                                {formData.id ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
+
+                                {(formData.id&&(!page||formData.destinationGroup === "Premium")) ? generateInput(formData, handleChange, 'Approval Premium Description', 'approval_description_premium', 'text', false, viewOnly): ''}
+                                {(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
+
+                                {(formData.id && page!=='kyc') ? AdmAccess(page, formData, handleClose,fetchCustomers, viewOnly, setViewOnly): ""}
+                                {(formData.id && page!=='kyc') ? CustomerWallet(formData.id) : ""}
+
+                                <div className="flex justify-end gap-5">
+                                    <Button onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
+                                    <Button type="button" variant="outline" onClick={() => handleAddDialog(false)}>Cancel</Button>
+                                    {/* <Button onClick={(e) => buttonOnSubmit(e, formData)} variant="default">Save Changes</Button> */}
+                                    {
+                                        formData.isneedapproval == 1 && page === 'kyc' ? (
+                                            <Button onClick={onReject} variant="destructive" color="warning">Reject</Button>
+                                        ) : ('')
+                                    }
+                                    <Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default">
+                                        { formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
+                                    </Button>
+                                </div>
+                            </div>
+                        {/* </form> */}
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default DetailMember;
+{/* <span className="text-red-500 text-[10px] lowercase align-middle ml-1">(agent)</span> */}
+
+function generateInput(formData:any, handleChange:any, label:string, name:string, type: string, required: boolean, disabled: boolean) {
+    function generateDate(isoString: string) {
+        const date = new Date(isoString);
+        return date.toISOString().slice(0, 10); // "2000-01-18"
+    }
+    return (
+        <>
+            <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">
+                        {label}<span className="text-red-500">{required?"*":""}</span>
+                    </label>
+                    <Input
+                        className="input"
+                        readOnly={disabled}
+                        required={required}
+                        type={type}
+                        name={name}
+                        value={formData[name]?(type === 'date' ? generateDate(formData[name]) : formData[name]):""}
+                        onChange={handleChange}
+                    />
+                </div>
+            </div>
+        </>
+    )
+}
+
+// ON DEV (DI SELECT MASI HILANG)
+function generateList(formData:any, handleChange: any, list:any, name:string, label: string, difId: any, required: boolean) {
+    return (
+        <>
+            <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">{label}
+                <span className="text-red-600">{required?"*":""}</span></label>
+                <Select required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}>
+                    <SelectTrigger>
+                        <SelectValue placeholder={`Select ${label}`} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {list.map((el: any, idx: any) => (
+                            <SelectItem key={idx} value={el.id}>{el.name}</SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                </div>
+            </div>
+        </>
+    )
+}
+
+// ON DEV (UPDATENYA)
+function generateImage(formData:any, handleChange:any, label:string, name:string) {
+    const imagePreview = (file:any) => {
+        if (file && file.type && file.type.startsWith('image/')) {
+          const previewURL = URL.createObjectURL(file);
+          return previewURL
+        }
+        return file
+    };
+
+    return (
+        <>
+            <div className="flex items-center justify-between w-full max-w-xl">
+                <label className="form-label flex items-center gap-1 max-w-56">
+                    {label}<span className="text-red-500"></span>
+                </label>
+                <div className="flex items-center space-x-4 w-3/4 justify-end">
+                    { formData[name] ? (
+                        <div className="border-2 border-dashed border-red-300 rounded-md p-2">
+                            <img width={300} height={250} srcSet={imagePreview(formData[name])} src={imagePreview(formData[name])} alt={name} style={{borderRadius: 10}}/>
+                            {/* <img width={300} height={250} srcSet={formData[name]} src={formData[name]} alt={name} style={{borderRadius: 10}}/> */}
+                        </div>
+                    ) : (<span>No Data</span>)}
+                    <label className="bg-red-600 text-white px-2 py-1 rounded-full flex items-center cursor-pointer hover:bg-red-800">
+                        <span style={{fontSize: 13}}>Upload</span>
+                        <input type="file" className="hidden" name={name} onChange={handleChange} accept="image/*" />
+                    </label>
+                </div>
+            </div>
+        </>
+    )
+}

src/pages/settings/user/log-activity/LogActivityPage.tsx

@@ -1,33 +1,39 @@
 import { Container, DataGridInner } from '@/components';
 import { LogActivityContextProvider } from './hooks';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 export default function LogActivityPage() {
   return (
-    <LogActivityContextProvider>
-      <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Log Activity</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
+    <>
+      <Helmet>
+        <title>TPAY | Log Activity</title>
+      </Helmet>
+      <LogActivityContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Log Activity</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Settings</span>
-          </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Settings</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">User Management</span>
-          </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">User Management</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Log Activity</span>
-          </Link>
-        </Breadcrumbs>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-      </Container>
-    </LogActivityContextProvider>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Log Activity</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+        </Container>
+      </LogActivityContextProvider>
+    </>
   );
 }

src/pages/settings/user/manage-user/ManageUserPage.tsx

@@ -4,36 +4,42 @@ import { ManageUserContextProvider } from './hooks';
 import { AddDialog } from './blocks/AddDialog';
 import { DeleteDialog } from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
 
 export default function ManageUserPage() {
   return (
-    <ManageUserContextProvider>
-      <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</h1>
-        <Breadcrumbs sx={{ mb: 2 }}>
-          <Link underline="none" color="inherit" href="/">
-            <span className="text-sm hover:underline">Dashboard</span>
-          </Link>
+    <>
+      <Helmet>
+        <title>TPAY | Manage User</title>
+      </Helmet>
+      <ManageUserContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Settings</span>
-          </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Settings</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">User Management</span>
-          </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">User Management</span>
+            </Link>
 
-          <Link underline="none" color="inherit">
-            <span className="text-sm">Manage User</span>
-          </Link>
-        </Breadcrumbs>
-        <div className="grid gap-5 lg:gap-7.5">
-          <DataGridInner />
-        </div>
-        <EditDialog />
-        <AddDialog />
-        <DeleteDialog />
-      </Container>
-    </ManageUserContextProvider>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Manage User</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+          <EditDialog />
+          <AddDialog />
+          <DeleteDialog />
+        </Container>
+      </ManageUserContextProvider>
+    </>
   );
 }

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

@@ -25,6 +25,13 @@ import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
 
+interface RoleListProps {
+  id: string;
+  name: string;
+  roles: string;
+  status: string;
+}
+
 interface CreateUserParams {
   email: string;
   username: string;
@@ -40,9 +47,10 @@ type PasswordType = 'password' | 'retype_password';
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog, roles } = useUserContext();
+  const { showAddDialog, handleAddDialog } = useUserContext();
   const { reload } = useDataGrid();
-  const { PostData, PutData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
+  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -57,10 +65,6 @@ const AddDialog = () => {
     status: ''
   };
   const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
-  };
   const [showPassword, setShowPassword] = useState({
     password: false,
     retype_password: false
@@ -97,6 +101,87 @@ const AddDialog = () => {
     };
   };
 
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  /* actions */
+  const doCreateUser = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PostData(`${API_URL}/user/create`, formField);
+
+      if (response?.status) {
+        handleAddDialog(false);
+        resetForm();
+        reload();
+        const createActivity = {
+          module: 'Manage User',
+          description: `Create New User => ${formField.username}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
+        toast.success('Success Create User');
+      } else {
+        toast.error('Failed to create user');
+        setAlert({ show: true, message: 'Failed to create user. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const fetchRoles = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL}/user_role/list`, params);
+    // console.log('ini data:', response);
+    if (response?.status) {
+      const roleList = response.data?.list || [];
+      setRoles(roleList);
+    } else {
+      setRoles(() => []);
+    }
+    // console.log('ini data user_role:', response?.data);
+  }, []);
+
+  useEffect(() => {
+    fetchRoles();
+  }, [fetchRoles]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    console.log('Form data before submit:', formField);
+
+    if (
+      formField.email.trim() === '' ||
+      formField.username.trim() === '' ||
+      formField.password.trim() === '' ||
+      formField.retype_password.trim() === '' ||
+      formField.name.trim() === '' ||
+      formField.id_role.trim() === '' ||
+      formField.status.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill name field.' });
+      return;
+    }
+
+    doCreateUser(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
   useEffect(() => {
     const validation = validatePassword(formField.password, formField.retype_password);
     setMessagePassword(validation.isValid);
@@ -111,38 +196,6 @@ const AddDialog = () => {
     }
   }, [showAddDialog]);
 
-  /* actions */
-  const doCreateUser = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      const response = await PostData(`${API_URL}/user/create`, {
-        ...formField,
-        id_role: undefined
-      });
-      if (response?.status) {
-        const responseUserAddRole = await PutData(
-          `${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
-          {}
-        );
-        resetForm();
-        handleAddDialog(false);
-        toast.success('Success Create User');
-        reload();
-        const createActivity = {
-          module: 'Manage User',
-          description: `Create New User => ${formField.username}`,
-          action: 'C'
-        };
-
-        doSaveLogActivity(createActivity);
-      } else {
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
-      }
-    },
-    [formField]
-  );
-
   const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
     event.preventDefault();
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@@ -177,7 +230,7 @@ const AddDialog = () => {
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doCreateUser}>
+            <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">
@@ -231,7 +284,12 @@ const AddDialog = () => {
                     <div className="grow">
                       <Select
                         value={formField.id_role}
-                        onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
+                        onValueChange={(id_role) => {
+                          setTimeout(() => {
+                            setFormField((prev) => ({ ...prev, id_role }));
+                          }, 0);
+                          // console.log('Role selected:', value);`
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select" />
@@ -254,7 +312,11 @@ const AddDialog = () => {
                   <div className="grow">
                     <Select
                       value={formField.status}
-                      onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
+                      onValueChange={(status) => {
+                        setTimeout(() => {
+                          setFormField((prev) => ({ ...prev, status }));
+                        }, 0);
+                      }}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select" />

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

@@ -1,4 +1,11 @@
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from '@/components/ui/dialog';
 import { useUserContext } from '../hooks';
 import { Button } from '@/components/ui/button';
 import { Alert, useDataGrid } from '@/components';
@@ -42,12 +49,14 @@ const DeleteDialog = () => {
     } else {
       setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
     }
-  }, [selectedUser, enforce]);
+  }, [selectedUser, DeleteData, handleDeleteDialog, reload, enforce]);
 
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">you will delete this data!</span>

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

@@ -24,6 +24,12 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
+interface RoleListProps {
+  id: string;
+  name: string;
+  status: string;
+}
+
 const API_URL = apiConfig.service_dashboard;
 
 const initialState = {
@@ -31,15 +37,15 @@ const initialState = {
   username: '',
   email: '',
   id_role: '',
-  id_role_old: '',
   status: ''
 };
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
+  const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -53,17 +59,11 @@ const EditDialog = () => {
   };
 
   /* actions */
-  const doResetForm = () => {
-    setAlert({ show: false, message: '' });
-    setFormField(initialState);
-  };
-
   const doUpdateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
-        ...formField,
-        id_role_old: undefined
+        ...formField
       });
 
       if (formField.name.trim() === '') {
@@ -90,18 +90,36 @@ const EditDialog = () => {
     [selectedUser, formField]
   );
 
+  const doFetchUserRole = useCallback(async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/user_role/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('User ID_ROLE:', response?.data.id_role);
+      // console.log('Role: ', response?.data.list);
+      setRoles(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching role', error);
+    }
+  }, []);
+
   const doFetchUserData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
-    if (response?.status) {
-      let id_role = response.data.role.id || '';
+    // console.log('User detail response:', response);
 
+    if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
         username: response.data.username,
         email: response.data.email,
-        id_role: id_role,
-        id_role_old: id_role,
+        id_role: response.data.idRole,
         status: response.data.status
       }));
     } else {
@@ -111,10 +129,10 @@ const EditDialog = () => {
         username: '',
         email: '',
         id_role: '0',
-        id_role_old: '',
         status: ''
       }));
     }
+    // console.log('Fetched ID Role:', response?.data.id_role);
   }, []);
 
   useEffect(() => {
@@ -129,6 +147,23 @@ const EditDialog = () => {
     }
   }, [showEditDialog]);
 
+  useEffect(() => {
+    const fetchAllData = async () => {
+      await doFetchUserRole([{ id: 'name', desc: false }]);
+      if (selectedUser) {
+        await doFetchUserData(selectedUser);
+      }
+    };
+
+    fetchAllData();
+  }, [selectedUser]);
+
+  // console.log('ini role: ', roles);
+  // useEffect(() => {
+  //   console.log('Selected User ID Role:', formField.id_role);
+  //   // console.log('Available Roles:', roles);
+  // }, [formField.id_role, roles]);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -206,7 +241,10 @@ const EditDialog = () => {
                     <div className="grow">
                       <Select
                         value={formField.id_role}
-                        onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
+                        onValueChange={(id_role) => {
+                          // console.log('Role changed to:', id_role);
+                          setFormField((prev) => ({ ...prev, id_role }));
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select" />

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -17,7 +17,6 @@ interface ContextProps {
   showDeleteDialog: boolean;
   handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
   selectedUser: string | null;
-  roles: RoleListProps[];
 }
 
 interface SelectedUser {
@@ -30,12 +29,6 @@ interface SelectedUser {
   check_new_password: string;
 }
 
-interface RoleListProps {
-  id: string;
-  name: string;
-  status: string;
-}
-
 const initialProps: ContextProps = {
   showSearchDialog: false,
   handleSearchDialog: (show: boolean) => {},
@@ -45,8 +38,7 @@ const initialProps: ContextProps = {
   handleAddDialog: () => {},
   showDeleteDialog: false,
   handleDeleteDialog: () => {},
-  selectedUser: null,
-  roles: []
+  selectedUser: null
 };
 
 const ManageUserContext = createContext<ContextProps>(initialProps);
@@ -60,7 +52,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const { GetData } = useCallApi();
 
   /* action */
@@ -193,7 +184,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
     const response = await GetData(`${API_URL}/user/list`, {
       limit: limit,
       page: page + 1,
-      with_deleted: true,
+      with_deleted: false,
       order_field: sorting[0].id,
       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
       filter: JSON.stringify(filter)
@@ -203,29 +194,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
-  const fetchRoles = useCallback(async () => {
-    const params = {
-      limit: 100,
-      page: 1,
-      with_deleted: false,
-      order_field: 'name',
-      order_direction: 'ASC',
-      filter: JSON.stringify({
-        status: 'Y'
-      })
-    };
-    const response = await GetData(`${API_URL}/user_role/list`, params);
-    if (response?.status) {
-      setRoles(() => [...response.data.list]);
-    } else {
-      setRoles(() => []);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchRoles();
-  }, [fetchRoles]);
-
   return (
     <ManageUserContext.Provider
       value={{
@@ -236,7 +204,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         selectedUser,
         showAddDialog,
         handleAddDialog,
-        roles,
         showDeleteDialog,
         handleDeleteDialog
       }}

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

@@ -1,14 +1,13 @@
 import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
     Dialog,
     DialogBody,
     DialogContent,
-    DialogDescription,
     DialogHeader,
-    DialogTitle
+    DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import {
@@ -16,9 +15,9 @@ import {
     SelectContent,
     SelectItem,
     SelectTrigger,
-    SelectValue
+    SelectValue,
 } from '@/components/ui/select';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { Alert, useDataGrid } from '@/components';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
@@ -27,23 +26,24 @@ const API_URL = apiConfig.transaction;
 
 const ApprovalDialog = () => {
     const { GetData, PostData } = useCallApi();
-    // const { reload } = useDataGrid();
+
     const {
         showApprovalDialog,
         setShowApprovalDialog,
-        selectedTransactionIdForApproval
+        selectedTransactionIdForApproval,
     } = useTransactionContext();
 
     const [transactionDetails, setTransactionDetails] = useState<any>(null);
 
     const [formField, setFormField] = useState({
         transaction_code: '',
-        status: ''
+        status: '',
+        notes: '',
     });
 
     const [alert, setAlert] = useState({
         show: false,
-        message: ''
+        message: '',
     });
 
     const doApproval = useCallback(
@@ -59,38 +59,51 @@ const ApprovalDialog = () => {
                 toast.error('Please select a status.');
                 return;
             }
-
             const response = await PostData(`${API_URL}/transaction/set-approval`, {
-                transaction_code: transactionDetails.code,
+                id_transaction: transactionDetails.id,
                 status: formField.status,
+                notes: formField.notes,
             });
 
             if (response?.status) {
-                setAlert((prev) => ({ ...prev, show: false, message: '' }));
+                setAlert({ show: false, message: '' });
                 toast.success('Success Update Position');
                 const createActivity = {
                     module: 'Approval Transaction',
                     description: `Change status approve for transaction => ${transactionDetails.code}`,
-                    action: 'U'
+                    action: 'U',
                 };
                 doSaveLogActivity(createActivity);
-                setShowApprovalDialog(false); // optionally close dialog
+                setShowApprovalDialog(false);
             } else {
-                setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+                setAlert({ show: true, message: response?.message });
             }
         },
         [formField, transactionDetails]
     );
 
+    useEffect(() => {
+        if (showApprovalDialog) {
+            // Reset form fields when dialog opens
+            setFormField({
+                transaction_code: '',
+                status: '',
+                notes: '',
+            });
+            setTransactionDetails(null); // Optional reset
+        }
+    }, [showApprovalDialog]);
+
     useEffect(() => {
         const fetchTransactionDetails = async () => {
             if (selectedTransactionIdForApproval) {
                 try {
-                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, {
-                        id: selectedTransactionIdForApproval
-                    });
-                    // console.log(response?.data.code);
-                    // console.log(selectedTransactionIdForApproval);
+                    const response = await GetData(
+                        `${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`,
+                        {
+                            id: selectedTransactionIdForApproval,
+                        }
+                    );
                     setTransactionDetails(response?.data);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -103,6 +116,15 @@ const ApprovalDialog = () => {
         }
     }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
 
+    // Set formField.transaction_code once details are fetched
+    useEffect(() => {
+        if (transactionDetails) {
+            setFormField((prev) => ({
+                ...prev,
+                transaction_code: transactionDetails.id ?? '',
+            }));
+        }
+    }, [transactionDetails]);
 
     return (
         <Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
@@ -111,7 +133,7 @@ const ApprovalDialog = () => {
                     <DialogTitle>Approval Transaction</DialogTitle>
                 </DialogHeader>
                 <DialogBody>
-                    <form action="" onSubmit={doApproval}>
+                    <form onSubmit={doApproval}>
                         <div className="card-body grid gap-5 p-0">
                             <div className="w-full">
                                 <div className="flex items-center flex-wrap gap-2.5">
@@ -119,8 +141,10 @@ const ApprovalDialog = () => {
 
                                     <div className="grow">
                                         <Select
-                                        value={formField.status}
-                                        onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
+                                            value={formField.status}
+                                            onValueChange={(status) =>
+                                                setFormField((prev) => ({ ...prev, status }))
+                                            }
                                         >
                                             <SelectTrigger>
                                                 <SelectValue placeholder="Select" />
@@ -132,8 +156,28 @@ const ApprovalDialog = () => {
                                         </Select>
                                     </div>
                                 </div>
-                            </div>
 
+                                {formField.status === 'N' && (
+                                    <div className="flex items-center flex-wrap gap-2.5 mt-4">
+                                        <label className="form-label max-w-56">Notes</label>
+                                        <div className="grow">
+                                            <Input
+                                                type="text"
+                                                placeholder="Notes"
+                                                name="notes"
+                                                id="notes"
+                                                value={formField.notes}
+                                                onChange={(e) =>
+                                                    setFormField((prev) => ({
+                                                        ...prev,
+                                                        notes: e.target.value,
+                                                    }))
+                                                }
+                                            />
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
 
                             <hr />
                             <div className="flex justify-end">
@@ -149,4 +193,4 @@ const ApprovalDialog = () => {
     );
 };
 
-export default ApprovalDialog;
+export default ApprovalDialog;

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

@@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
                         >
                             Origin Customer
                         </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationcustomer')}
+                        >
+                            Destination Customer
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('originwallet')}
+                        >
+                            Origin Wallet
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationwallet')}
+                        >
+                            Destination Wallet
+                        </button>
                         <button
                             className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                             onClick={() => setActiveTab('log')}
@@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Status</p>
-                                        <p className="font-medium">
+                                        <div>
                                             {(() => {
                                                 let status;
+                                                let badgeClass;
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
+                                                    badgeClass = 'bg-green-100 text-green-800';
                                                 } else if (transactionDetails?.status === 'F') {
                                                     status = 'FAILED';
+                                                    badgeClass = 'bg-red-100 text-red-800';
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
+                                                    badgeClass = 'bg-blue-100 text-blue-800';
                                                 } else {
                                                     status = 'PENDING';
+                                                    badgeClass = 'bg-gray-100 text-gray-800';
                                                 }
-                                                return status;
+
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
                                             })()}
-                                        </p>
+                                        </div>
+
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Type</p>
@@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
                                     </span>
                                 </h3>
                                 <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
+
                                 </div>
 
                                 <h3 className="font-semibold flex items-center">
@@ -208,8 +230,54 @@ const DetailApprovalTransaction = () => {
                                 </div>
                             </div>
                         )}
+                        {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold flex items-center">
+                                    Product Information
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Product Info
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Product Name</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Price Cash</p>
+                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Price Point</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Product Type</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.type}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Provider Name</p>
+                                        <p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Provider Type</p>
+                                        <p className="font-medium">
+                                            {(() => {
+                                                let providertype;
+                                                if (transactionDetails?.purchase.product.provider.type === 'h2h') {
+                                                    providertype = 'HOST TO HOST';
+                                                } else if (transactionDetails?.purchase.product.provider.type === 'agent') {
+                                                    providertype = 'AGENT';
+                                                }
+                                                return providertype;
+                                            })()}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
 
-                        {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
+                        {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold flex items-center">
                                     Transaction Information
@@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                     </div>
                                 </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Customer
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Destination Customer
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Email</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Origin Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
-                                </div>
                             </div>
                         )}
 
-
                         {activeTab === 'origincustomer' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Origin Customer</h3>
@@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
                             </div>
                         )}
 
+                        {activeTab === 'destinationcustomer' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Customer</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Email</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Username</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'originwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Origin Wallet</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'destinationwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Wallet</h3>
+
+                                {!transactionDetails?.transfer ? (
+                                    <div className="text-center text-sm text-gray-500">No Data available</div>
+                                ) : (
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <p className="text-sm text-gray-500">Name</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Description</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+
                         {activeTab === 'log' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Transaction Logs</h3>
@@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
                                             <thead>
                                                 <tr className="bg-gray-100">
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
+                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
                                                                     return status;
                                                                 })()}
                                                             </td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
+                                                                {new Date(log.created_at).toLocaleString('sv-SE', {
+                                                                    timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
+                                                                    year: 'numeric',
+                                                                    month: '2-digit',
+                                                                    day: '2-digit',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    hour12: false,
+                                                                }).replace(' ', ' ')}
+                                                            </td>
+                                                            {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
                                                         </tr>
                                                     ))
                                                 ) : (

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

@@ -18,12 +18,10 @@ const ListToolbar = () => {
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
-    const nextWeek = new Date(today);
-    nextWeek.setDate(today.getDate() + 7);
-
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
     settrxDate({
-      from: formatDate(today),   // Set 'from' to today
-      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+      from: formatDate(firstDayOfMonth),
+      to: formatDate(today),
     });
   }, []);
 

src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx

@@ -155,7 +155,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'type.name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -163,22 +163,35 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         },
       },
       {
-        accessorFn: (row) => {
-          switch (row.status_approve) {
-            case 'W': return 'WAITING APPROVAL';
-            case 'Y': return 'APPROVED';
-            case 'N': return 'REJECTED';
-            default: return 'PENDING';
+        accessorKey: 'status_approve',
+        header: 'Status',
+        cell: ({ row }) => {
+          const statusCode = row.original.status_approve;
+          let label = '';
+          let badgeClass = '';
+      
+          switch (statusCode) {
+            case 'Y':
+              label = 'APPROVED';
+              badgeClass = 'bg-green-100 text-green-800';
+              break;
+            case 'N':
+              label = 'REJECTED';
+              badgeClass = 'bg-red-100 text-red-800';
+              break;
+            case 'W':
+              label = 'WAITING APPROVAL';
+              badgeClass = 'bg-gray-100 text-gray-800';
+              break;
           }
+      
+          return (
+            <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+              {label}
+            </span>
+          );
         },
-        id: 'status_approve',
-        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
-        enableSorting: false,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]',
-        },
-      },
+      },      
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@@ -203,6 +216,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
                   setSelectedTransactionIdForApproval(row.id);
                   setShowApprovalDialog(true);
                 }}
+                disabled={row.status_approve === 'Y' || row.status_approve === 'N'}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>

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

@@ -30,7 +30,6 @@ const DetailTransaction = () => {
                     const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
                         id: selectedTransactionId
                     });
-                    // console.log(response?.data);
                     setTransactionDetails(response?.data);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -66,6 +65,24 @@ const DetailTransaction = () => {
                         >
                             Origin Customer
                         </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationcustomer')}
+                        >
+                            Destination Customer
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('originwallet')}
+                        >
+                            Origin Wallet
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('destinationwallet')}
+                        >
+                            Destination Wallet
+                        </button>
                         <button
                             className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                             onClick={() => setActiveTab('log')}
@@ -119,21 +136,32 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Status</p>
-                                        <p className="font-medium">
+                                        <div>
                                             {(() => {
                                                 let status;
+                                                let badgeClass;
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
+                                                    badgeClass = 'bg-green-100 text-green-800';
                                                 } else if (transactionDetails?.status === 'F') {
                                                     status = 'FAILED';
+                                                    badgeClass = 'bg-red-100 text-red-800';
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
+                                                    badgeClass = 'bg-blue-100 text-blue-800';
                                                 } else {
                                                     status = 'PENDING';
+                                                    badgeClass = 'bg-gray-100 text-gray-800';
                                                 }
-                                                return status;
+
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
                                             })()}
-                                        </p>
+                                        </div>
+
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Type</p>
@@ -172,14 +200,7 @@ const DetailTransaction = () => {
                                     </span>
                                 </h3>
                                 <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
+
                                 </div>
 
                                 <h3 className="font-semibold flex items-center">
@@ -246,7 +267,7 @@ const DetailTransaction = () => {
                                                     providertype = 'HOST TO HOST';
                                                 } else if (transactionDetails?.purchase.product.provider.type === 'agent') {
                                                     providertype = 'AGENT';
-                                                } 
+                                                }
                                                 return providertype;
                                             })()}
                                         </p>
@@ -337,69 +358,9 @@ const DetailTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                     </div>
                                 </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Destination Customer
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Destination Customer
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Email</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">MSISDN</p>
-                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
-                                    </div>
-                                </div>
-
-                                <h3 className="font-semibold flex items-center">
-                                    Origin Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
-                                    </div>
-                                </div>
                             </div>
                         )}
 
-
                         {activeTab === 'origincustomer' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Origin Customer</h3>
@@ -424,6 +385,68 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
+                        {activeTab === 'destinationcustomer' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Customer</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">MSISDN</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Email</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Username</p>
+                                        <p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'originwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Origin Wallet</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Name</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Description</p>
+                                        <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'destinationwallet' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Destination Wallet</h3>
+
+                                {!transactionDetails?.transfer ? (
+                                    <div className="text-center text-sm text-gray-500">No Data available</div>
+                                ) : (
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <p className="text-sm text-gray-500">Name</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Description</p>
+                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+
                         {activeTab === 'log' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Transaction Logs</h3>
@@ -489,8 +512,8 @@ const DetailTransaction = () => {
                                             <thead>
                                                 <tr className="bg-gray-100">
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
-                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
+                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -512,8 +535,19 @@ const DetailTransaction = () => {
                                                                     return status;
                                                                 })()}
                                                             </td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
+                                                                {new Date(log.created_at).toLocaleString('sv-SE', {
+                                                                    timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
+                                                                    year: 'numeric',
+                                                                    month: '2-digit',
+                                                                    day: '2-digit',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    hour12: false,
+                                                                }).replace(' ', ' ')}
+                                                            </td>
+                                                            {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
                                                         </tr>
                                                     ))
                                                 ) : (

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

@@ -18,12 +18,10 @@ const ListToolbar = () => {
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
-    const nextWeek = new Date(today);
-    nextWeek.setDate(today.getDate() + 7);
-
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
     settrxDate({
-      from: formatDate(today),   // Set 'from' to today
-      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+      from: formatDate(firstDayOfMonth),
+      to: formatDate(today),
     });
   }, []);
 

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -137,19 +137,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         },
       },
       {
-        accessorFn: (row) => {
-          let status;
-          if (row.status === 'C') {
-            status = 'COMPLETE';
-          } else if (row.status === 'F') {
-            status = 'FAILED';
-          } else if (row.status === 'O') {
-            status = 'ON PROCESS';
-          } else {
-            status = 'PENDING';
-          }
-          return status;
-        },
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
@@ -157,7 +144,37 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         meta: {
           headerClassName: 'w-[250px]',
         },
-      },
+        cell: ({ row }) => {
+          const statusCode = row.original.status;
+          let label = '';
+          let badgeClass = '';
+
+          switch (statusCode) {
+            case 'C':
+              label = 'COMPLETE';
+              badgeClass = 'bg-green-100 text-green-800';
+              break;
+            case 'F':
+              label = 'FAILED';
+              badgeClass = 'bg-red-100 text-red-800';
+              break;
+            case 'O':
+              label = 'ON PROCESS';
+              badgeClass = 'bg-blue-100 text-blue-800';
+              break;
+            default:
+              label = 'PENDING';
+              badgeClass = 'bg-gray-100 text-gray-800';
+              break;
+          }
+
+          return (
+            <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+              {label}
+            </span>
+          );
+        },
+      },      
       {
         accessorKey: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
@@ -169,7 +186,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       },
       {
         accessorKey: 'type.name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -227,11 +244,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
       if (filter == undefined || filter.length == 0) {
         const today = new Date();
-        const nextWeek = new Date();
-        nextWeek.setDate(today.getDate() + 7);
 
-        startdate = today.toISOString().split('T')[0];
-        enddate = nextWeek.toISOString().split('T')[0];
+        // Tanggal 1 di bulan sekarang
+        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+        startdate = firstDayOfMonth.toISOString().split('T')[0];
+        enddate = today.toISOString().split('T')[0];
       } else if (filter != undefined || filter.length != 0) {
         startdate = filter[0].value.from;
         enddate = filter[0].value.to;

src/pages/transfer/transfertype/TransferType.tsx

@@ -5,7 +5,7 @@ import {
 } from './hooks/ManageTransferTypeContext';
 import AddDialog from './blocks/AddDialog';
 import { Breadcrumbs, Link } from '@mui/material';
-import { DeleteDialog } from './blocks/DeleteDialog';
+import DeleteDialog from './blocks/DeleteDialog';
 import { EditDialog } from './blocks/EditDialog';
 import { Helmet } from 'react-helmet';
 
@@ -37,7 +37,7 @@ const TransferType = () => {
           </div>
           <AddDialog />
           <DeleteDialog />
-          <EditDialog />
+          {/* <EditDialog /> */}
 
         </Container>
       </ManageTransferTypeContextProvider>

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -41,8 +41,8 @@ import {
 } from '@/components/ui/command';
 
 interface WalletProps {
-  Wallet_id: string;
-  Wallet_name: string;
+  id: string;
+  name: string;
 }
 
 interface CustomerProps {
@@ -74,8 +74,8 @@ const AddDialog = () => {
     description: '',
     wallet_origin: '',
     wallet_destination: '',
-    wallet_fee_destination: '',
-    customer_fee_destination: '',
+
+
     minimum_amount: 0,
     maximum_amount: 0,
     max_transaction_per_day: 0,
@@ -102,8 +102,6 @@ const AddDialog = () => {
       'description',
       'wallet_origin',
       'wallet_destination',
-      'wallet_fee_destination',
-      'customer_fee_destination',
       'status',
       'status_approval'
     ];
@@ -216,13 +214,11 @@ const AddDialog = () => {
       limit: 100,
       page: 1,
       with_deleted: false,
-      order_field: 'name',
+      order_field: 'wallets.name',
       order_direction: 'ASC',
-      filter: JSON.stringify({
-        status: 'Y'
-      })
     };
     const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    console.log(response)
     if (response?.status && response?.data) {
       setWallets(response.data.list);
     } else {
@@ -234,7 +230,7 @@ const AddDialog = () => {
     if (!showAddDialog) return;
     fetchWallets();
   }, [showAddDialog]);
-
+  console.log(formField)
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -262,9 +258,11 @@ const AddDialog = () => {
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
-              <Alert variant="danger" className="mb-3">
-                <h3>{alert.message}</h3>
-              </Alert>
+        <div className="sticky top-0 z-10 bg-white p-3">
+        <Alert variant="danger" className="mb-3">
+          <h3>{alert.message}</h3>
+        </Alert>
+      </div>
             )}
             <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
@@ -396,8 +394,8 @@ const AddDialog = () => {
                         </SelectTrigger>
                         <SelectContent>
                           {wallets.map((wallet, idx) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
-                              {wallet.Wallet_name}
+                            <SelectItem value={wallet.id} key={wallet.name}>
+                              {wallet.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -424,8 +422,8 @@ const AddDialog = () => {
                         </SelectTrigger>
                         <SelectContent>
                           {wallets.map((wallet, idx) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
-                              {wallet.Wallet_name}
+                            <SelectItem value={wallet.id} key={wallet.id}>
+                              {wallet.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -433,86 +431,8 @@ const AddDialog = () => {
                     </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">
-                      Wallet Destination Fee
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow">
-                      <Select
-                        value={formField.wallet_fee_destination}
-                        onValueChange={(wallet_fee_destination) =>
-                          setFormField((prev) => ({ ...prev, wallet_fee_destination }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select Wallet" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {wallets.map((wallet, idx) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
-                              {wallet.Wallet_name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </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 Fee Destination<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow">
-                      <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            className="input col-span-5 text-left"
-                            style={{ color: 'inherit' }}
-                          >
-                            {customers.find(
-                              (customer) => customer.id === formField.customer_fee_destination
-                            )?.username || 'Select Customer'}
-                          </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,
-                                        customer_fee_destination: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </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">

src/pages/transfer/transfertype/blocks/DeleteDialog.tsx

@@ -25,7 +25,6 @@ const DeleteDialog = () => {
       return;
     }
 
-    // Kirim enforce=false untuk memastikan soft delete
     const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
       id: selectedTransferType
     });
@@ -34,13 +33,12 @@ const DeleteDialog = () => {
       setAlert({ show: false, message: '' });
       handleDeleteDialog(false, null);
       reload();
-      setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
+      // setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
     } else {
       setAlert({ show: true, message: response?.message });
-      setTimeout(() => toast.error('Failed Delete Product'), 0);
+      // setTimeout(() => toast.error('Failed Delete Product'), 0);
     }
-  }, [selectedTransferType, DeleteData, handleDeleteDialog, reload]);
-
+  }, [selectedTransferType]);
   return (
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -71,4 +69,3 @@ const DeleteDialog = () => {
 };
 
 export default DeleteDialog;
-export { DeleteDialog };

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -25,23 +25,16 @@ import { useCallApi } from '@/hooks';
 import { getAuth } from '@/auth';
 import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
 import AddFeeDialog from '../../transferfee/blocks/AddDialog';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
+import { Checkbox } from '@/components/ui/checkbox';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_transaction;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
 const API_URL_CUSTOMER = apiConfig.service_customer;
 
 interface WalletProps {
-  Wallet_id: string;
-  Wallet_name: string;
+  id: string;
+  name: string;
 }
 
 interface CustomerProps {
@@ -50,19 +43,11 @@ interface CustomerProps {
   msisdn: string;
 }
 
-interface TranssactionTypeProps {
+interface GroupProps {
+  id: string;
   name: string;
   description: string;
-  minimum_amount: number;
-  maximum_amount: number;
-  max_transaction_per_day: number;
-  status_approval: string;
   status: string;
-  type: string;
-  wallet_origin: WalletProps;
-  wallet_destination: WalletProps;
-  wallet_fee_destination: WalletProps;
-  customer_fee_destination: CustomerProps;
 }
 
 const EditDialog = () => {
@@ -71,29 +56,43 @@ const EditDialog = () => {
     useManageTransferTypeContext();
   const { reload } = useDataGrid();
   const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [groups, setGroups] = useState<GroupProps[]>([]);
   const { GetData, PutData } = useCallApi();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const parsedUser = getAuth()?.user;
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
-  const [open, setOpen] = useState(false);
+  const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
   
-  const initialState = {
+  const initialState: {
+    name: string;
+    description: string;
+    wallet_origin: string;
+    wallet_destination: string;
+    minimum_amount: number;
+    maximum_amount: number;
+    max_transaction_per_day: number;
+    status: string;
+    type: string;
+    status_approval: string;
+    updated_by: string;
+    updated_at: string;
+    permission: string[];
+  } = {
     name: '',
     description: '',
     wallet_origin: '',
     wallet_destination: '',
-    wallet_fee_destination: '',
-    customer_fee_destination: '',
     minimum_amount: 0,
     maximum_amount: 0,
     max_transaction_per_day: 0,
     status_approval: '',
     type: '',
     status: '',
+    permission: [],
     updated_by: '',
     updated_at: ''
   };
@@ -102,27 +101,47 @@ const EditDialog = () => {
   
   const resetForm = () => {
     setFormField(initialState);
+    setSelectedGroups([]);
+    setAlert({ show: false, message: '' });
+  };
+
+  const handleGroupChange = (groupId: string) => {
+    setFormField((prevState) => {
+      const isSelected = prevState.permission.includes(groupId);
+
+      if (isSelected) {
+        // Remove the permission if already selected
+        return {
+          ...prevState,
+          permission: prevState.permission.filter((id) => id !== groupId)
+        };
+      } else {
+        // Add the permission if not selected
+        return {
+          ...prevState,
+          permission: [...prevState.permission, groupId]
+        };
+      }
+    });
   };
 
-  // Validation function to make certain fields required
   const validateForm = () => {
     const requiredFields = [
       'name',
       'description',
       'wallet_origin',
       'wallet_destination',
-      'wallet_fee_destination',
-      'customer_fee_destination',
       'status',
       'status_approval',
       'type'
     ];
 
     const missingFields = requiredFields.filter(
-      (field) =>
-        formField[field as keyof typeof formField] === '' ||
-        formField[field as keyof typeof formField] === null ||
-        formField[field as keyof typeof formField] === undefined
+      (field) => {
+        return formField[field as keyof typeof formField] === '' ||
+          formField[field as keyof typeof formField] === null ||
+          formField[field as keyof typeof formField] === undefined;
+      }
     );
 
     if (missingFields.length > 0) {
@@ -133,6 +152,15 @@ const EditDialog = () => {
       return false;
     }
 
+    // Validate that at least one permission is selected
+    if (formField.permission.length === 0) {
+      setAlert({
+        show: true,
+        message: 'Please select at least one group permission'
+      });
+      return false;
+    }
+
     setAlert({ show: false, message: '' });
     return true;
   };
@@ -148,7 +176,12 @@ const EditDialog = () => {
         updated_at: formattedTime
       }));
     }
-  }, [showEditDialog]);
+  }, [showEditDialog, parsedUser]);
+  
+  const selectedPermissionNames = groups
+    .filter((g) => formField.permission.includes(g.id))
+    .map((g) => g.name)
+    .join(', ');
   
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -165,6 +198,14 @@ const EditDialog = () => {
           handleEditDialog(false, null);
           toast.success('Success Update Transfer Type');
           reload();
+          
+          const createActivity = {
+            module: 'Manage Transfer Type',
+            description: `Edit Transfer Type => ${selectedTransferType}`,
+            action: 'U'
+          };
+
+          doSaveLogActivity(createActivity);
         }
       })
       .finally(() => {
@@ -197,11 +238,13 @@ const EditDialog = () => {
     }
   }, [formField, selectedTransferType, PutData]);
 
+  // Fetch customers
   useEffect(() => {
     if (!showEditDialog) return;
-    const getCustomerList = async (sorting: any) => {
+    
+    const getCustomerList = async () => {
       try {
-        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+        const sorting = [{ id: 'id', desc: false }];
         const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
           limit: 100,
           page: 1,
@@ -209,74 +252,113 @@ const EditDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        setCustomers(response?.data.list);
+        
+        if (response?.status && response?.data) {
+          setCustomers(response.data.list);
+        }
       } catch (error) {
         console.error('Error fetching customer', error);
       }
     };
 
-    getCustomerList([{ id: 'id', desc: false }]);
+    getCustomerList();
   }, [showEditDialog, GetData]);
-  
-  const fetchWallets = useCallback(async () => {
-    const params = {
-      limit: 100,
-      page: 1,
-      with_deleted: false,
-      order_field: 'name',
-      order_direction: 'ASC',
-      filter: JSON.stringify({
-        status: 'Y'
-      })
-    };
-    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
-    if (response?.status && response?.data) {
-      setWallets(response.data.list);
-    } else {
-      setWallets([]);
-    }
-  }, [GetData]);
 
+  // Fetch groups
   useEffect(() => {
     if (!showEditDialog) return;
-    fetchWallets();
-  }, [showEditDialog, fetchWallets]);
-
-  const fetchTransactionType = useCallback(async (id: string) => {
-    try {
-      const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
-      if (response?.status) {
-        setFormField((prev) => ({
-          ...prev,
-          name: response.data.name,
-          description: response.data.description,
-          wallet_origin: response.data.wallet_origin.id,
-          wallet_destination: response.data.wallet_destination.id,
-          wallet_fee_destination: response.data.wallet_fee_destination.id,
-          customer_fee_destination: response.data.customer_fee_destination.id,
-          minimum_amount: response.data.minimum_amount,
-          maximum_amount: response.data.maximum_amount,
-          max_transaction_per_day: response.data.max_transaction_per_day,
-          status_approval: response.data.status_approval,
-          type: response.data.type || '',
-          status: response.data.status
-        }));
+    
+    const getGroupList = async () => {
+      try {
+        const response = await GetData(`${API_URL_MASTERDATA}/groups/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC'
+        });
+        
+        if (response?.status && response?.data) {
+          setGroups(response.data.list);
+        }
+      } catch (error) {
+        console.error('Error fetching groups', error);
       }
-      // console.log(response);
-    } catch (error) {
-      console.error('Error fetching transaction type', error);
-      setAlert({
-        show: true,
-        message: 'Failed to load transaction type data'
-      });
-    }
-  }, [GetData]);
+    };
+
+    getGroupList();
+  }, [showEditDialog, GetData]);
+
+  // Fetch wallets
+  useEffect(() => {
+    if (!showEditDialog) return;
+    
+    const getWalletList = async () => {
+      try {
+        const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: 'wallets.name',
+          order_direction: 'ASC',
+        });
+        
+        if (response?.status && response?.data) {
+          setWallets(response.data.list);
+        }
+      } catch (error) {
+        console.error('Error fetching wallets', error);
+      }
+    };
+
+    getWalletList();
+  }, [showEditDialog, GetData]);
+
+  // Fetch transaction type data
+  useEffect(() => {
+    if (!showEditDialog || !selectedTransferType) return;
+    
+    const fetchTransactionType = async () => {
+      try {
+        const response = await GetData(`${API_URL}/transactiontype/getdata/${selectedTransferType}`, {});
+        
+        if (response?.status) {
+          setFormField((prev) => ({
+            ...prev,
+            name: response.data.name,
+            description: response.data.description,
+            wallet_origin: response.data.wallet_origin?.id || '',
+            wallet_destination: response.data.wallet_destination?.id || '',
+            minimum_amount: response.data.minimum_amount,
+            maximum_amount: response.data.maximum_amount,
+            max_transaction_per_day: response.data.max_transaction_per_day,
+            status_approval: response.data.status_approval,
+            type: response.data.type || '',
+            status: response.data.status,
+            permission: response.data.permission || []
+          }));
+        }
+      } catch (error) {
+        console.error('Error fetching transaction type', error);
+        setAlert({
+          show: true,
+          message: 'Failed to load transaction type data'
+        });
+      }
+    };
+
+    const timer = setTimeout(() => {
+      fetchTransactionType();
+    }, 150);
+    
+    return () => clearTimeout(timer);
+  }, [showEditDialog, selectedTransferType, GetData]);
 
   useEffect(() => {
-    if (selectedTransferType) {
-      fetchTransactionType(selectedTransferType);
+    if (showEditDialog === false) {
+      resetForm();
     }
-  }, [selectedTransferType, fetchTransactionType]);
+  }, [showEditDialog]);
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -305,9 +387,11 @@ const EditDialog = () => {
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
-              <Alert variant="danger" className="mb-3">
-                <h3>{alert.message}</h3>
-              </Alert>
+              <div className="sticky top-0 z-10 bg-white p-3">
+                <Alert variant="danger" className="mb-3">
+                  <h3>{alert.message}</h3>
+                </Alert>
+              </div>
             )}
             <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
@@ -439,8 +523,8 @@ const EditDialog = () => {
                         </SelectTrigger>
                         <SelectContent>
                           {wallets.map((wallet) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
-                              {wallet.Wallet_name}
+                            <SelectItem value={wallet.id} key={wallet.id}>
+                              {wallet.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -467,8 +551,8 @@ const EditDialog = () => {
                         </SelectTrigger>
                         <SelectContent>
                           {wallets.map((wallet) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
-                              {wallet.Wallet_name}
+                            <SelectItem value={wallet.id} key={wallet.id}>
+                              {wallet.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -476,86 +560,6 @@ const EditDialog = () => {
                     </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">
-                      Wallet Destination Fee
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow">
-                      <Select
-                        value={formField.wallet_fee_destination}
-                        onValueChange={(wallet_fee_destination) =>
-                          setFormField((prev) => ({ ...prev, wallet_fee_destination }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select Wallet" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {wallets.map((wallet) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
-                              {wallet.Wallet_name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </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 Fee Destination<span className="text-red-500">*</span>
-                    </label>
-                    <div className="grow">
-                      <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            className="input col-span-5 text-left"
-                            style={{ color: 'inherit' }}
-                          >
-                            {customers.find(
-                              (customer) => customer.id === formField.customer_fee_destination
-                            )?.username || 'Select Customer'}
-                          </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,
-                                        customer_fee_destination: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username} - {customer.msisdn}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-                </div>
 
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -637,7 +641,47 @@ const EditDialog = () => {
                     </div>
                   </div>
                 </div>
-
+                
+                {/* Group Permission Section - Read Only Display */}
+                <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">
+                      Groups
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <div className="relative w-full">
+                      <Input
+                        type="text"
+                        placeholder="No groups selected"
+                        value={selectedPermissionNames || ""}
+                        readOnly
+                        className="bg-gray-100 mb-2"
+                      />
+                      
+                      {/* Groups Selection Area */}
+                      <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                          {groups.map((group) => (
+                            <div key={group.id} className="flex items-center space-x-2">
+                              <Checkbox
+                                id={`group-${group.id}`}
+                                checked={formField.permission.includes(group.id)}
+                                onCheckedChange={() => handleGroupChange(group.id)}
+                              />
+                              <label
+                                htmlFor={`group-${group.id}`}
+                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                {group.name}
+                              </label>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
                 <div className="flex justify-end pt-2.5 gap-5">
                   <Button
                     variant={'outline'}
@@ -654,7 +698,6 @@ const EditDialog = () => {
                 </div>
               </div>
             </form>
-            
             {/* Transaction Fee Section */}
             <ManageTransferFeeContextProvider>
               <Container>

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -70,19 +70,29 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
   }, []);
 
   const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
-    setShowDeleteDialog(show);
     setSelectedTransferType(show ? selected_transfertype : null);
+    setShowDeleteDialog(show);
   }, []);
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorFn: (row) => row.id,
+        id: 'id',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Transaction Type ID" column={column} />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => row.name,
         id: 'name',
         header: ({ column }) => (
           <DataGridColumnHeader title="Transaction Type Name" column={column} />
         ),
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -90,7 +100,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.description,
         id: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -98,7 +108,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.wallet_origin?.name || 'N/A',
         id: 'wallet_origin',
         header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -106,7 +116,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.wallet_destination.name || 'N/A',
         id: 'wallet_destination',
         header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -114,7 +124,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.maximum_amount,
         id: 'maximum_amount',
         header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -122,7 +132,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.minimum_amount,
         id: 'minimum_amount',
         header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -132,27 +142,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         header: ({ column }) => (
           <DataGridColumnHeader title="Max Transaction Per Day" column={column} />
         ),
-        enableSorting: true,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[250px]' }
-      },
-      {
-        accessorFn: (row) => row.wallet_fee_destination.name,
-        id: 'wallet_fee_destination',
-        header: ({ column }) => (
-          <DataGridColumnHeader title="Wallet Fee Destination" column={column} />
-        ),
-        enableSorting: true,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[250px]' }
-      },
-      {
-        accessorFn: (row) => row.customer_fee_destination?.username || 'N/A',
-        id: 'customer_fee_destination',
-        header: ({ column }) => (
-          <DataGridColumnHeader title="Customer Fee Destination" column={column} />
-        ),
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -162,7 +152,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         header: ({ column }) => (
           <DataGridColumnHeader title="TransactionType Status" column={column} />
         ),
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -170,7 +160,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
       },
@@ -178,7 +168,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
         id: 'status_approval',
         header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
       },
@@ -211,22 +201,29 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     ],
     [handleEditDialog, handleDeleteDialog]
   );
+  
   const doGetTransferTypeListData = async (
     page: number,
     limit: number,
     sorting: any,
     filter: any
   ) => {
-    sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+
+    const orderField = 'created_at';
+
+    const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
+    
     filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    
     const response = await GetData(`${API_URL}/transactiontype/list`, {
       limit: limit,
       page: page + 1,
       with_deleted: false,
-      order_field: sorting[0].id,
-      order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+      order_field: orderField,
+      order_direction: orderDirection,
       filter: JSON.stringify(filter)
     });
+    console.log(response?.data.list);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -253,7 +250,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             pagination={{ size: 10 }}
             layout={{ card: true }}
             toolbar={<ListToolbar />}
-            sorting={[{ id: 'id', desc: true }]}
+            sorting={[{ id: 'created_at', desc: true }]} // Default sorting
             serverSide={true}
             onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
               doGetTransferTypeListData(pageIndex, pageSize, sorting, columnFilters)
@@ -268,4 +265,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 };
 
 export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { TransferType };
+export type { TransferType };

src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx

@@ -82,7 +82,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'amount' ,
-        header: ({ column }) => <DataGridColumnHeader title="Ammount" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -108,8 +108,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorKey: 'CreatedAt' ,
-        header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
+        accessorKey: 'CreatedAt',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Created At" column={column} />
+        ),
         cell: ({ row }) => 
           new Date(row.original.CreatedAt).toLocaleString('id-ID', {
             day: '2-digit',
@@ -118,7 +120,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
             hour: '2-digit',
             minute: '2-digit',
           }),
-                enableSorting: false,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[200px]'
@@ -174,26 +176,24 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           headerClassName: 'w-[200px]'
         }
       }
-
     ],
     []
   );
 
-  
-
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const sortField = 'CreatedAt';
+      const sortDirection = 'ASC';
+      
       filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
         limit,
         page: page + 1,
         with_deleted: false,
-        order_field: sorting[0].id,
-        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        order_field: sortField,
+        order_direction: sortDirection,
         // filter: JSON.stringify(filter)
       });
-      // console.log(response?.data);
       setWallets(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -221,7 +221,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        // sorting={[{ id: 'created_at', desc: true }]} 
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)
@@ -234,4 +234,4 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
 };
 
 export { ManageWalletContext, ManageWalletContextProvider };
-export type { WalletProps };
+export type { WalletProps };