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

src/layouts/demo2/header/HeaderTopbar.tsx

@@ -1,9 +1,10 @@
-import { useRef } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { KeenIcon } from '@/components/keenicons';
 import { toAbsoluteUrl } from '@/utils';
 import { Menu, MenuItem, MenuToggle } from '@/components';
 import { DropdownUser } from '@/partials/dropdowns/user';
 import { useLanguage } from '@/i18n';
+import { getAuth } from '@/auth';
 
 const HeaderTopbar = () => {
   const itemChatRef = useRef<any>(null);
@@ -14,9 +15,14 @@ const HeaderTopbar = () => {
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-
+  console.log(getAuth())
   return (
-    <div className="flex items-center gap-3.5">
+<div className="flex items-center gap-4">
+  <div className="hidden md:flex flex-col items-end mr-2 text-right">
+    <span className="font-semibold text-sm text-white leading-tight">{getAuth()?.user.username}</span>
+    <span className="text-xs text-gray-400">{getAuth()?.role_name}</span>
+  </div>
+
   <Menu>
     <MenuItem
       ref={itemUserRef}
@@ -28,23 +34,24 @@ const HeaderTopbar = () => {
           {
             name: 'offset',
             options: {
-                  offset: [20, 10] // [skid, distance]
+              offset: [20, 10],
-                }
+            },
-              }
+          },
-            ]
+        ],
       }}
     >
       <MenuToggle className="btn btn-icon rounded-full">
         <img
-              className="size-9 rounded-full justify-center border border-gray-500 shrink-0"
+          className="w-9 h-9 rounded-full border border-gray-500 object-cover"
-              src={toAbsoluteUrl('/media/avatars/blank.png')}
+          src={toAbsoluteUrl('/media/avatars/profile.png')}
-              alt=""
+          alt="User avatar"
         />
       </MenuToggle>
       {DropdownUser({ menuItemRef: itemUserRef })}
     </MenuItem>
   </Menu>
 </div>
+
   );
 };
 

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -16,6 +16,10 @@ import { useFetchYear } from './hooks/useFetchYear';
 import { get5LastYear } from '@/utils/Date';
 import { staticChartData } from './staticChart';
 import { Helmet } from 'react-helmet';
+import BalanceCard from './blocks/BalanceCard';
+import { getAuth } from '@/auth';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
 
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
@@ -33,6 +37,9 @@ const DashboardHomePage = () => {
     from: new Date(),
     to: new Date()
   });
+  const currentRole = getAuth()?.role_name;
+  const idCustomer = getAuth()?.user.customer?.id;
+  // console.log(currentRole);
 
   // Menyusun tanggal awal dan akhir berdasarkan selectedYear
   useEffect(() => {
@@ -144,6 +151,13 @@ const DashboardHomePage = () => {
         <title>TPAY | Dashboard</title>
       </Helmet>
       <Container>
+        {/* Account Balance Cards */}
+        {currentRole === 'Escrow' || currentRole === 'Master Agent' ? (
+          <div className="grid gap-5 lg:gap-7.5 mb-14 mt-7">
+            <BalanceCard id={idCustomer} />
+          </div>
+        ) : null}
+
         <div className="flex gap-3 items-center mb-6">
           <YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
           <div className="w-auto min-w-[120px]">

src/pages/dashboards/home/blocks/BalanceCard.tsx

@@ -0,0 +1,100 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { CreditCard, Wallet } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type WalletResponse = {
+  amount: number;
+  id_wallet: string;
+  wallet: string;
+  credit_limit: number;
+  monthly_limit: number;
+};
+
+interface BalanceCardProps {
+  id: string;
+}
+
+const API_URL_WALLET = apiConfig.service_wallet;
+
+const BalanceCard = ({ id }: BalanceCardProps) => {
+  const { GetData } = useCallApi();
+  const [wallets, setWallets] = useState<WalletResponse[]>([]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(value);
+  };
+
+  const formatNumberWithDots = (value: number) => {
+    return value.toLocaleString('id-ID');
+  };
+
+  const getColorClass = (amount: number, walletType: string) => {
+    if (walletType.toLowerCase().includes('point account')) return 'bg-amber-300';
+    // if (amount > 3125) return 'bg-amber-300';
+    return 'bg-red-500';
+  };
+
+  useEffect(() => {
+    async function fetchAccountBalances() {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${id}`, {
+          id: id
+        });
+        if (response?.status === true) {
+          setWallets(response.data);
+        }
+      } catch (error) {
+        console.error('Error fetching account balances', error);
+      }
+    }
+
+    fetchAccountBalances();
+  }, [id]);
+
+  return (
+    <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-5 items-stretch">
+      {wallets.map((wallet) => {
+        const colorClass = getColorClass(wallet.amount, wallet.wallet);
+        const isNegative = wallet.amount < 0;
+
+        return (
+          <div
+            key={wallet.id_wallet}
+            className="rounded-lg overflow-hidden shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-300"
+          >
+            <div className={`${colorClass} h-2`} />
+            <div className="p-5">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-bold text-lg text-gray-800">{wallet.wallet}</h3>
+                {wallet.wallet.includes('Credit') ? (
+                  <CreditCard className="text-gray-600" size={20} />
+                ) : (
+                  <Wallet className="text-gray-600" size={20} />
+                )}
+              </div>
+              <p className={`text-xl font-bold ${isNegative ? 'text-red-600' : 'text-gray-800'}`}>
+                {formatCurrency(wallet.amount)}
+              </p>
+
+              <div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
+                <div className="text-xs text-gray-500">Credit Limit:</div>
+                <div className="text-sm">{formatNumberWithDots(wallet.credit_limit)}</div>
+              </div>
+              <div className="mt-3 flex items-center justify-between">
+                <div className="text-xs text-gray-500">Monthly Limit:</div>
+                <div className="text-sm">{formatNumberWithDots(wallet.monthly_limit)}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default BalanceCard;

src/pages/groups/Column.tsx

@@ -1,5 +1,8 @@
 import { KeenIcon } from '@/components';
+import { Button } from '@/components/ui/button';
 import { ColumnDef } from '@tanstack/react-table';
+import { ArrowUpDown } from 'lucide-react';
+import moment from 'moment';
 
 export type Group = {
   no: number;
@@ -12,27 +15,81 @@ export type Group = {
 export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
   {
     accessorKey: 'no',
-    header: 'ID'
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          ID
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
   },
   {
     accessorKey: 'created_at',
-    header: 'Created Date',
+    header: ({ column }) => {
-    cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Created Date
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
   },
   {
     accessorKey: 'name',
-    header: 'Name'
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Name
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
   },
   {
     accessorKey: 'status',
-    header: 'Status'
+    header: 'Status',
+    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>
+      );
+    }
   },
   {
     accessorKey: 'description',
-    header: 'Description'
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Description
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
   },
   {
     id: 'actions',
+    header: 'Actions',
     cell: ({ row }) => {
       const dataMembers = row.original;
 

src/pages/groups/ListToolbar.tsx

@@ -1,8 +1,20 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
+import React, { useState } from 'react';
 
-const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
+interface ListToolBarProps {
-  const { table, reload } = useDataGrid();
+  createGroup: () => void;
+  onReload: () => void;
+  isReloading: boolean;
+}
+
+const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) => {
+  const { table } = useDataGrid();
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('name')?.setFilterValue(e.target.value);
+  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -14,29 +26,25 @@ const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
               <input
                 type="text"
                 placeholder="Search users"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={usernameFilter}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={handleUsernameChange}
+                className="input input-sm w-40"
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
+                {isReloading ? (
+                  <div className="animate-spin">
                     <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>

src/pages/groups/ManageGroups.tsx

@@ -24,8 +24,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ConfirmDialog from '@/components/confirm';
 import { toast } from 'sonner';
-import { Container, DataGridProvider } from '@/components';
+import { Container, DataGridProvider, LoaderTransparant } from '@/components';
 import { ListToolBar } from './ListToolbar';
+import { RefreshCw } from 'lucide-react';
+import { setgroups } from 'process';
 // import { DialogHeader } from '@/components/ui/dialog';
 // import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 const BASE_URL = apiConfig.service_customer;
@@ -42,37 +44,52 @@ let initGroup = {
 
 const ManageGroups = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [dataGroup, setDataGroup] = useState([]);
   const [formData, setFormData] = useState(initGroup);
   const [pageIndex, setPageIndex] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [dialogType, setDialogType] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [isReloading, setIsReloading] = useState(false);
+  // const closeDialog = () => {
+  //   setIsDialogOpen(false);
+  //   setgroups(initGroup);
+  // };
 
   useEffect(() => {
+    setLoading(true);
     fetchGroups();
+    setLoading(false);
   }, []);
 
-  async function fetchGroups() {
+  async function fetchGroups(): Promise<void> {
     try {
       let groups = await axios.get(`${BASE_URL}/groups/list`, {
         params: {
-          limit: pageSize,
+          limit: 20,
-          page: pageIndex,
+          page: 1,
           with_deleted: false,
-          order_field: 'name',
+          order_field: 'created_at',
-          order_direction: 'ASC'
+          order_direction: 'DESC'
         }
       });
       let temp = 1;
       let resGroups = groups.data.data.list.map((el: any) => {
         el.no = temp++;
+        if (el.date_birth) {
+          const d = new Date(el.date_birth);
+          el.date_birth = d.toLocaleString('sv-SE');
+        }
         return el;
-      })
+      });
       setDataGroup(resGroups);
     } catch (error: any) {
       alert(error.message);
       console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
     }
   }
 
@@ -127,6 +144,11 @@ const ManageGroups = () => {
     setDialogOpen(true);
   };
 
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchGroups();
+  };
+
   const handleYes = async () => {
     try {
       if (dialogType === 'create') {
@@ -153,12 +175,19 @@ const ManageGroups = () => {
       console.log(error);
       toast.error(error.message);
     } finally {
-      await fetchGroups();
       setDialogOpen(false);
       closeDialog();
+      await fetchGroups();
+      setLoading(false);
     }
   };
 
+  function setShowAddDialog(el: any) {
+    setIsDialogOpen(el);
+  }
+
+  if (loading) return <LoaderTransparant />;
+
   return (
     <>
       <Helmet>
@@ -191,21 +220,28 @@ const ManageGroups = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto px-4"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
+
-          {/* <DataTable
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
-          data={dataGroup}
+          {isReloading && (
-          columns={columns}
+            <div className="fixed inset-0 flex items-center justify-center z-50 bg-white/70">
-          createData={createGroup}
+              <div className="flex flex-col items-center">
-          onUpdate={handleUpdate}
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
-          onDelete={null}
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
-          /> */}
+              </div>
+            </div>
+          )}
           <DataGridProvider
             data={dataGroup}
             columns={getColumns(handleUpdate)}
             pagination={{ size: 25 }}
-            toolbar={<ListToolBar createGroup={createGroup} />}
+            toolbar={
+              <ListToolBar
+                createGroup={createGroup}
+                onReload={handleReload}
+                isReloading={isReloading}
+              />
+            }
             layout={{ card: true }}
-            sorting={[{ id: 'created_at', desc: true }]}
             serverSide={false}
             onRowSelectionChange={(selected, table: any) => {
               const selectedRow = table.getSelectedRowModel().rows[0];

src/pages/members/feedback-member/blocks/FeedbackDetail.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { format } from 'date-fns';
+
+interface FeedbackDetailProps {
+  showDialog: boolean;
+  handleDialog: (show: boolean) => void;
+  feedbackId: string | null;
+}
+
+interface FeedbackDetailData {
+  Feedback_id: string;
+  Feedback_feedback_notes: string;
+  Feedback_feedback_screenshoot: string;
+  Feedback_review_notes: string;
+  Feedback_emotion: string;
+  Feedback_review_screenshoot: string | null;
+  Feedback_category: string;
+  Feedback_status: string;
+  Feedback_created_at: string;
+  Feedback_review_by: string | null;
+  Feedback_review_at: string;
+  Feedback_deleted_by: string | null;
+  Feedback_deleted_at: string | null;
+  Feedback_createdById: string;
+}
+
+const API_URL = apiConfig.service_feedback;
+
+const FeedbackDetail: React.FC<FeedbackDetailProps> = ({ showDialog, handleDialog, feedbackId }) => {
+  const [feedbackDetail, setFeedbackDetail] = useState<FeedbackDetailData | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const { GetData } = useCallApi();
+
+  useEffect(() => {
+    const fetchFeedbackDetail = async () => {
+      if (!feedbackId) return;
+
+      setLoading(true);
+      try {
+        const response = await GetData(`${API_URL}/feedback/${feedbackId}`,{});
+        if (response?.data) {
+          setFeedbackDetail(response.data);
+        }
+      } catch (error) {
+        console.error('Error fetching feedback detail:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (showDialog && feedbackId) {
+      fetchFeedbackDetail();
+    } else {
+      setFeedbackDetail(null);
+    }
+  }, [showDialog, feedbackId, GetData]);
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return '-';
+    try {
+      return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
+    } catch (e) {
+      return dateString;
+    }
+  };
+
+  const getEmotionText = (emotion: string) => {
+    const emotions: Record<string, string> = {
+      '1': 'Very Disappointed',
+      '2': 'Disappointed',
+      '3': 'Happy',
+      '4': 'Very Happy',
+      '5': 'Extremely Happy'
+    };
+    return emotions[emotion] || emotion;
+  };
+
+  const getStatusText = (status: string) => {
+    const statuses: Record<string, string> = {
+      'W': 'Waiting',
+      'P': 'Processed',
+      'D': 'Done'
+    };
+    return statuses[status] || status;
+  };
+
+  return (
+    <Dialog open={showDialog} onOpenChange={handleDialog}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Feedback Detail</DialogTitle>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex justify-center items-center p-8">
+            <div className="spinner-border text-primary" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </div>
+          </div>
+        ) : feedbackDetail ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="form-group">
+                <label className="form-label font-semibold">Feedback ID</label>
+                <div>{feedbackDetail.Feedback_id}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Category</label>
+                <div>{feedbackDetail.Feedback_category}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Emotion</label>
+                <div>{getEmotionText(feedbackDetail.Feedback_emotion)}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Status</label>
+                <div>{getStatusText(feedbackDetail.Feedback_status)}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Created At</label>
+                <div>{formatDate(feedbackDetail.Feedback_created_at)}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Created By</label>
+                <div>{feedbackDetail.Feedback_createdById}</div>
+              </div>
+            </div>
+            
+            <div className="form-group">
+              <label className="form-label font-semibold">Feedback Notes</label>
+              <div className="p-3 bg-gray-50 rounded">{feedbackDetail.Feedback_feedback_notes}</div>
+            </div>
+            
+            {feedbackDetail.Feedback_feedback_screenshoot && (
+              <div className="form-group">
+                <label className="form-label font-semibold">Feedback Screenshot</label>
+                <div>
+                  <img 
+                    src={feedbackDetail.Feedback_feedback_screenshoot.replace(/^'|'$/g, '')} 
+                    alt="Feedback Screenshot" 
+                    className="max-h-64 rounded"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                      (e.target as HTMLImageElement).parentElement?.appendChild(
+                        Object.assign(document.createElement('div'), {
+                          className: 'text-sm text-gray-500',
+                          textContent: 'Image not available or invalid URL'
+                        })
+                      );
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            
+            <div className="form-group">
+              <label className="form-label font-semibold">Review Notes</label>
+              <div className="p-3 bg-gray-50 rounded">{feedbackDetail.Feedback_review_notes || '-'}</div>
+            </div>
+            
+            {feedbackDetail.Feedback_review_screenshoot && (
+              <div className="form-group">
+                <label className="form-label font-semibold">Review Screenshot</label>
+                <div>
+                  <img 
+                    src={feedbackDetail.Feedback_review_screenshoot} 
+                    alt="Review Screenshot"
+                    className="max-h-64 rounded"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                      (e.target as HTMLImageElement).parentElement?.appendChild(
+                        Object.assign(document.createElement('div'), {
+                          className: 'text-sm text-gray-500',
+                          textContent: 'Image not available or invalid URL'
+                        })
+                      );
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="p-4 text-center text-gray-500">No feedback details found</div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FeedbackDetail;

src/pages/members/feedback-member/hooks/ManageFeedbackMemberContext.tsx

@@ -4,7 +4,8 @@ import { useCallApi } from '@/hooks';
 import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { Toaster } from 'sonner';
-// import ListToolbar from '../blocks/ListToolbar';
+// import FeedbackDetail from './blocks/FeedbackDetail';
+import FeedbackDetail from '../blocks/FeedbackDetail';
 
 interface feedbackProps {
   id: string;
@@ -24,6 +25,8 @@ interface ContextProps {
   handleAddDialog: (show: boolean) => void;
   showDeleteDialog: boolean;
   handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void;
+  showDetailDialog: boolean;
+  handleDetailDialog: (show: boolean, selected_sucos: string | null) => void;
   selectedfeedback: string | null;
   getfeedbackLists: (
     limit: number,
@@ -42,6 +45,8 @@ const initialProps: ContextProps = {
   handleAddDialog: () => {},
   showDeleteDialog: false,
   handleDeleteDialog: () => {},
+  showDetailDialog: false,
+  handleDetailDialog: () => {},
   selectedfeedback: null,
   getfeedbackLists: async () => undefined
 };
@@ -54,6 +59,7 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [selectedfeedback, setSelectedfeedback] = useState<string | null>(null);
   const { GetData } = useCallApi();
 
@@ -71,10 +77,35 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
     setSelectedfeedback(show ? selected_feedback : null);
   }, []);
 
+  const handleDetailDialog = useCallback((show: boolean, selected_feedback: string | null) => {
+    setShowDetailDialog(show);
+    setSelectedfeedback(show ? selected_feedback : null);
+  }, []);
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.feedback_notes,
+        accessorFn: (row) => row.customer,
+        id: 'customer_id',
+        header: ({ column }) => <DataGridColumnHeader title="Customer Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.Feedback_emotion,
+        id: 'feedback_emotion',
+        header: ({ column }) => <DataGridColumnHeader title="Emotion" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.Feedback_feedback_notes,
         id: 'feedback_notes',
         header: ({ column }) => <DataGridColumnHeader title="Feedback Notes" column={column} />,
         enableSorting: false,
@@ -84,67 +115,45 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
         }
       },
       {
-        accessorFn: (row) => row.feedback_screenshot,
+        id: 'actions',
-        id: 'feedback_screenshot',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-        header: ({ column }) => <DataGridColumnHeader title="Feedback Screenshot" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: {
+        cell: (data) => {
-          headerClassName: 'w-[250px]'
+          const row = data.row.original;
-        }
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDetailDialog(true, row.Feedback_id)}
+                title="View Details"
+              >
+                <KeenIcon icon="eye" />
+              </button>
+              {/* <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditDialog(true, row.Feedback_id)}
+                title="Edit"
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row.Feedback_id)}
+                title="Delete"
+              >
+                <KeenIcon icon="trash" />
+              </button> */}
+            </>
+          );
         },
-      {
-        accessorFn: (row) => row.review_notes,
-        id: 'review_notes',
-        header: ({ column }) => <DataGridColumnHeader title="Review Notes" column={column} />,
-        enableSorting: false,
-        enableHiding: false,
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[150px] text-center',
-        }
+          cellClassName: 'text-center'
-      },
-      {
-        accessorFn: (row) => row.review_screenshot,
-        id: 'review_screenshot',
-        header: ({ column }) => <DataGridColumnHeader title="Review Screenshot" column={column} />,
-        enableSorting: false,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
         }
       }
-      // ,
-      // {
-      //   id: 'actions',
-      //   header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-      //   enableSorting: false,
-      //   enableHiding: false,
-      //   cell: (data) => {
-      //     const row = data.row.original;
-      //     return (
-      //       <>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleEditDialog(true, row.feedback_id)}
-      //         >
-      //           <KeenIcon icon="notepad-edit" />
-      //         </button>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleDeleteDialog(true, row.feedback_id)}
-      //         >
-      //           <KeenIcon icon="trash" />
-      //         </button>
-      //       </>
-      //     );
-      //   },
-      //   meta: {
-      //     headerClassName: 'w-[100px] text-center',
-      //     cellClassName: 'text-center'
-      //   }
-      // }
     ],
-    [handleEditDialog, handleDeleteDialog]
+    [handleEditDialog, handleDeleteDialog, handleDetailDialog]
   );
 
   const getfeedbackLists = async (page: number, limit: number, sorting: any, filter: any) => {
@@ -167,7 +176,6 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
     }
   };
 
-
   return (
     <ManageFeedbackMemberContext.Provider
       value={{
@@ -178,12 +186,21 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
         handleAddDialog,
         showDeleteDialog,
         handleDeleteDialog,
+        showDetailDialog,
+        handleDetailDialog,
         selectedfeedback,
         getfeedbackLists
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
       
+      {/* Feedback Detail Modal Component */}
+      <FeedbackDetail 
+        showDialog={showDetailDialog}
+        handleDialog={(show) => handleDetailDialog(show, show ? selectedfeedback : null)}
+        feedbackId={selectedfeedback}
+      />
+
       <DataGridProvider
         columns={columns}
         pagination={{ size: 10 }}

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

@@ -158,7 +158,6 @@ const ManageMembers = () => {
         createMember.pin = 'admin';
         delete createMember.password;
         delete createMember.try_pin;
-        delete createMember.license_number;
         delete createMember.isneedapproval;
         delete createMember.isapproved;
         delete createMember.approveddate;

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

@@ -70,7 +70,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
             setFormData({ ...formData, [name]: value });
         } else {
             if (name === 'municipio_id' || name === 'posto_adms_id' || name === 'suco_id') await getMasterAfter(name, value);
-            setFormData({ ...formData, [name]: value });
+            if (name==='msisdn') setFormData({ ...formData, [name]: value.replace(/\D/g, '') })
+            else setFormData({ ...formData, [name]: value });
         }
     };
 

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

@@ -20,11 +20,13 @@ import {
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 
 const API_URL = apiConfig.transaction;
 
 const ApprovalDialog = () => {
     const { GetData, PostData } = useCallApi();
+    // const { table, reload } = useDataGrid();
 
     const {
         showApprovalDialog,
@@ -83,6 +85,7 @@ const ApprovalDialog = () => {
                 };
                 doSaveLogActivity(createActivity);
                 setShowApprovalDialog(false);
+                // reload();
             } else {
                 setAlert({ show: true, message: response?.message });
             }

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

@@ -3,12 +3,30 @@ import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
 import { Button } from '@/components/ui/button';
 import { useCallback, useState, useEffect } from 'react';
 import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
   // Set the initial state for trxDate
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
+  const [statusApproval, setStatusApproval] = useState<string>(
+    (table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('status_approve')?.setFilterValue(statusApproval);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [statusApproval, table]);
 
   // Function to format date to YYYY-MM-DD
   const formatDate = (date: Date): string => {
@@ -83,6 +101,22 @@ const ListToolbar = () => {
             />
           </label>
 
+          <Select
+            value={statusApproval}
+            onValueChange={(value) => {
+              setStatusApproval(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Y">APPROVED</SelectItem>
+              <SelectItem value="N">REJECT</SelectItem>
+              <SelectItem value="W">WAITING APPROVAL</SelectItem>
+            </SelectContent>
+          </Select>
+
           <label className="input input-sm w-1/3">
             <KeenIcon icon="magnifier" />
             <input
@@ -104,16 +138,19 @@ const ListToolbar = () => {
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
+                // Resetting all filters
                 setSearchValue('');
+                setStatusApproval('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
 
                 table.getColumn('code')?.setFilterValue('');
+                table.getColumn('status_approve')?.setFilterValue('');
                 table.setPageIndex(0);
 
-                reload();
+                reload(); // Reload table data
               }}
             >
               <KeenIcon icon="arrows-circle" />
@@ -123,7 +160,6 @@ const ListToolbar = () => {
       </div>
     </div>
   );
-
 };
 
 export default ListToolbar;

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

@@ -250,7 +250,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       let startdate = firstDayOfMonth.toISOString().split('T')[0];
       let enddate = today.toISOString().split('T')[0];
       let transactioncode = '';
-      // let transactionstatus = '';
+      let approvalstatus = '';
 
       if (Array.isArray(filter)) {
         filter.forEach((f: any) => {
@@ -264,35 +264,37 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
             transactioncode = f.value;
           }
 
-          // if (f.id === 'status' && f.value) {
+          if (f.id === 'status_approve' && f.value) {
-          //   transactionstatus = f.value;
+            approvalstatus = f.value;
-          // }
+          }
         });
       }
 
-      const formattedFilter = {
+      // Constructing filter object with dynamic properties
+      const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${startdate} 00:00:00`,
-          to: `${enddate} 23:59:59`
+          to: `${enddate} 23:59:59`,
         },
-        "Transactions.code": {
-          like: `%${transactioncode}%`
-        },
-
-        "Transactions.status_approve": { in: ["W", "Y", "N"] },
-        // "Transactions.status": {
-        //   like: `%${transactionstatus}%`
-        // }
       };
 
+      if (transactioncode) {
+        formattedFilter["Transactions.code"] = { like: `%${transactioncode}%` };
+      }
 
+      // Handle approval status filter
+      formattedFilter["Transactions.status_approve"] = approvalstatus
+        ? approvalstatus
+        : { in: ["W", "Y", "N"] };
+
+      // Fetch data from API
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,
         with_deleted: false,
         order_field: "Transactions.created_at",
         order_direction: 'DESC',
-        filter: JSON.stringify(formattedFilter)
+        filter: JSON.stringify(formattedFilter),
       });
 
       if (!response || !response.data) {
@@ -300,12 +302,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         return { data: [], totalCount: 0 };
       }
 
-      setTransaction(response.data.list);
+      setTransaction(response.data.list); // Assuming this is a state setter
       return { data: response.data.list, totalCount: response.data.total_count };
 
     } catch (error) {
       console.error('Error fetching transaction', error);
-      return { data: [], totalCount: 0 }; // optional: fail-safe fallback
+      return { data: [], totalCount: 0 }; // Fail-safe fallback
     }
   };
 

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

@@ -3,30 +3,30 @@ import { useTransactionContext } from '../hooks/useTransactionContext';
 import { Button } from '@/components/ui/button';
 import { useCallback, useState, useEffect } from 'react';
 import { toast } from 'sonner';
-// import {
+import {
-//   Select,
+  Select,
-//   SelectContent,
+  SelectContent,
-//   SelectItem,
+  SelectItem,
-//   SelectTrigger,
+  SelectTrigger,
-//   SelectValue,
+  SelectValue,
-// } from '@/components/ui/select';
+} from '@/components/ui/select';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
-  // Set the initial state for trxDate
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-
   const [searchValue, setSearchValue] = useState<string>(
     (table.getColumn('code')?.getFilterValue() as string) ?? ''
   );
 
-
   // const [statusValue, setStatusValue] = useState<string>(
   //   (table.getColumn('status')?.getFilterValue() as string) ?? ''
   // );
 
-  // Function to format date to YYYY-MM-DD
+  const [typeValue, setTypeValue] = useState<string>(
+    (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
+  );
+
   const formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
   };
@@ -48,9 +48,17 @@ const ListToolbar = () => {
   //   return () => clearTimeout(timer);
   // }, [statusValue, table]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.setColumnFilters((prev) => [
+        ...prev.filter((f) => f.id !== 'kind'),
+        { id: 'kind', value: typeValue },
+      ]);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [typeValue, table]);
 
-
-  // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
     const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@@ -111,7 +119,7 @@ const ListToolbar = () => {
               setStatusValue(value);
             }}
           >
-            <SelectTrigger>
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
               <SelectValue placeholder="Select Status" />
             </SelectTrigger>
             <SelectContent>
@@ -121,6 +129,24 @@ const ListToolbar = () => {
             </SelectContent>
           </Select> */}
 
+          <Select
+            value={typeValue}
+            onValueChange={(value) => {
+              setTypeValue(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="T">TRANSFER</SelectItem>
+              <SelectItem value="P">PURCHASE</SelectItem>
+              <SelectItem value="W">WITHDRAW</SelectItem>
+              <SelectItem value="U">TOP UP</SelectItem>
+              <SelectItem value="R">RETURN</SelectItem>
+            </SelectContent>
+          </Select>
+
           <label className="input input-sm w-1/3">
             <KeenIcon icon="magnifier" />
             <input
@@ -130,7 +156,6 @@ const ListToolbar = () => {
               onChange={(event) => setSearchValue(event.target.value)}
             />
           </label>
-
         </div>
 
         <div className="ml-auto">
@@ -139,20 +164,27 @@ const ListToolbar = () => {
               variant="outline"
               className="h-7.5"
               onClick={() => {
+                // Preserve trxDate values (from, to) and reset others
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
+                // Only reset filters excluding from and to
                 setSearchValue('');
                 // setStatusValue('');
+                setTypeValue('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
 
-                table.getColumn('code')?.setFilterValue('');
+                // Reset other filters except for date range
-                // table.getColumn('status')?.setFilterValue('');
+                table.setColumnFilters([
-                table.setPageIndex(0);
+                  { id: 'code', value: '' },
+                  // { id: 'status', value: '' },
+                  { id: 'kind', value: '' },
+                ]);
 
+                table.setPageIndex(0);
                 reload();
               }}
             >

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

@@ -61,6 +61,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           headerClassName: 'w-[250px]'
         }
       },
+      {
+        accessorFn: (row) => {
+          switch (row.kind) {
+            case 'T': return 'TRANSFER';
+            case 'P': return 'PURCHASE';
+            case 'W': return 'WITHDRAW';
+            case 'U': return 'TOP UP';
+            case 'R': return 'RETURN';
+            default: return '_';
+          }
+        },
+        accessorKey: 'kind',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Kind" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
       {
         accessorKey: 'transaction_date',
         header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@@ -220,10 +239,11 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       let enddate = today.toISOString().split('T')[0];
       let transactioncode = '';
       // let transactionstatus = '';
+      let type = ''
 
       if (Array.isArray(filter)) {
+        // console.log(filter);
         filter.forEach((f: any) => {
-          // console.log(f.id);
           if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
             startdate = f.value.from;
             enddate = f.value.to;
@@ -236,22 +256,34 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           // if (f.id === 'status' && f.value) {
           //   transactionstatus = f.value;
           // }
+
+          if (f.id === 'kind' && f.value) {
+            type = f.value;
+          }
         });
       }
 
-      const formattedFilter = {
+      // Build filter object dynamically
+      const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${startdate} 00:00:00`,
           to: `${enddate} 23:59:59`
-        },
+        }
-        "Transactions.code": {
-          like: `%${transactioncode}%`
-        },
-        // "Transactions.status": {
-        //   like: `%${transactionstatus}%`
-        // }
       };
 
+      if (transactioncode) {
+        formattedFilter["Transactions.code"] = {
+          like: `%${transactioncode}%`
+        };
+      }
+
+      // if (transactionstatus) {
+      //   formattedFilter["Transactions.status"] = transactionstatus;
+      // }
+
+      if (type) {
+        formattedFilter["Transactions.kind"] = type;
+      }
 
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
@@ -272,7 +304,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
     } catch (error) {
       console.error('Error fetching transaction', error);
-      return { data: [], totalCount: 0 }; // optional: fail-safe fallback
+      return { data: [], totalCount: 0 };
     }
   };
 

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

@@ -471,7 +471,9 @@ const AddDialog = () => {
                           <SelectItem value="TM">Top Up Master Agent </SelectItem>
                           <SelectItem value="TA">Top Up Agent </SelectItem>
                           <SelectItem value="PL">Purchase Loja</SelectItem>
-                          
+                          <SelectItem value="DE">Disbursment Escrow</SelectItem>
+                          <SelectItem value="DM">Disbursment Master Agent</SelectItem>
+                          <SelectItem value="DA">Disbursment Agent</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>

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

@@ -605,6 +605,9 @@ const EditDialog = () => {
                           <SelectItem value="TM">Top Up Master Agent </SelectItem>
                           <SelectItem value="TA">Top Up Agent </SelectItem>
                           <SelectItem value="PL">Purchase Loja</SelectItem>
+                          <SelectItem value="DE">Disbursment Escrow</SelectItem>
+                          <SelectItem value="DM">Disbursment Master Agent</SelectItem>
+                          <SelectItem value="DA">Disbursment Agent</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>

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

@@ -186,7 +186,10 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             TE: 'Top Up Escrow',
             TM: 'Top Up Master Agent',
             TA: 'Top Up Agent',
-            PL:'Purchase Loja'
+            PL: 'Purchase Loja',
+            DE: 'Disbursment Escrow',
+            DM: 'Disbursment Master Agent',
+            DA: 'Disbursment Agent'
           };
 
           return mapping[row.type] || 'Unknown';