Merge branch 'master' of https://git.telkomcel.tl/TPAY/dashboard

.env.development

@@ -3,8 +3,9 @@ VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
 # VITE_APP_API_URL=
-VITE_APP_API_URL=http://127.0.0.1:4003/apitest
+# VITE_APP_API_URL=http://127.0.0.1:4003/apitest
 VITE_APP_API_URL=https://tpay.shiblysolution.id/api
+# VITE_APP_API_URL=http://api-v2.tpay.tl/api
 # VITE_APP_URL_TRANSACTION=https://tpay.shiblysolution.id/test/x/api
 # VITE_APP_API_URL=http://127.0.0.1:4003/apitesting
 VITE_ENV=development

.env.production

@@ -1,7 +1,7 @@
 VITE_APP_NAME=tpay-dashboard-tl
 VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
-
-VITE_APP_API_URL=
-VITE_BASE_URL=
+VITE_APP_API_URL=https://api-v2.tpay.tl/api
+# VITE_APP_API_URL=
+VITE_BASE_URL=/
 VITE_ENV=production

.env.staging

@@ -3,5 +3,6 @@ VITE_APP_VERSION=1=9.1.1
 GENERATE_SOURCEMAP=false
 
 VITE_APP_API_URL=https://tpay.shiblysolution.id/api
+# VITE_APP_API_URL=http://api-v2.tpay.tl/api
 VITE_BASE_URL=/dashboard/
 VITE_ENV=staging

.woodpecker.yml

@@ -1,46 +1,134 @@
+when:
+  commit:
+    message:
+      exclude:
+        - '\[skip ci\]'
+        - '\[ci skip\]'
+        - '\[no ci\]'
+
 steps:
-    - name: setup
-      image: node:22-alpine
-      commands:
-          - apk update && apk add git
-          - npm i typescript -g
-          - npm install
-          - echo '✅ success setup project'
-      when:
-          branch:
-              - main
+  - name: telegram start notify
+    image: appleboy/drone-telegram
+    settings:
+      token: 7616010754:AAGXMf8x-roKozdT0j-bOZ1y9dmbulbKPbM
+      to: -4765409490
+      message: |
+        🚀 *Woodpecker CI Build Starting* 🚀
 
-    - name: build-swagger
-      image: node:22-alpine
-      environment:
-          NODE_ENV: prod
-      commands:
-          - npm run swagger
-      when:
-          branch:
-              - main
+        *Repo:* ${CI_REPO_OWNER}/${CI_REPO_NAME}
+        *Repo Link:* ${CI_REPO_URL}
+        *Branch:* ${CI_COMMIT_BRANCH}
 
-    - name: build-src
-      image: node:22-alpine
-      environment:
-          NODE_ENV: prod
-      commands:
-          - npm i typescript -g
-          - npm run build:production
-          - echo '✅ success compile typescript and ready to deploy'
-      when:
-          branch:
-              - main
+        *Build Status:* *starting*
+        *Build Link:* ${CI_PIPELINE_URL}
 
-    - name: deploy
-      image: docker
-      commands:
-          - docker builder prune -f
-          - docker container prune -f
-          - docker-compose build
-          - docker-compose up -d --no-deps --build --remove-orphans
-      volumes:
-          - /var/run/docker.sock:/var/run/docker.sock
-      when:
-          branch:
-              - main
+        *Commit ID:* `${CI_COMMIT_SHA:0:8}`
+        *Commit By:* {{commit.author}}
+        *Commit Link:* {{commit.link}}
+        *Commit Msg:* {{commit.message}}
+        🙏 hopefully success {{commit.author}}
+    when:
+      branch:
+        - master
+
+  - name: setup
+    image: node:22-alpine
+    commands:
+      - apk update && apk add git
+      - npm i typescript -g
+      - npm install
+      - echo '✅ success setup project'
+    when:
+      branch:
+        - master
+
+  - name: build-src
+    image: node:22-alpine
+    environment:
+      NODE_ENV: prod
+    commands:
+      - npm i typescript -g
+      - npm run build:production
+      - echo '✅ success compile typescript'
+    when:
+      branch:
+        - master
+    depends_on: [setup]
+
+  - name: build-image
+    image: docker
+    commands:
+      - docker builder prune -f
+      - docker container prune -f
+      - docker-compose build
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    when:
+      branch:
+        - master
+    depends_on: [setup, build-src]
+
+  - name: deploy
+    image: docker
+    commands:
+      - docker-compose up -d --no-deps --remove-orphans
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    when:
+      branch:
+        - master
+    depends_on: [setup, build-src, build-image]
+
+  - name: telegram failed notify
+    image: appleboy/drone-telegram
+    settings:
+      token: 7616010754:AAGXMf8x-roKozdT0j-bOZ1y9dmbulbKPbM
+      to: -4765409490
+      message: |
+        🚀 *Woodpecker CI Build Finish* 🚀
+
+        *Repo:* ${CI_REPO_OWNER}/${CI_REPO_NAME}
+        *Repo Link:* ${CI_REPO_URL}
+        *Branch:* ${CI_COMMIT_BRANCH}
+
+        *Build Status:* *Failed*
+        *Build Link:* ${CI_PIPELINE_URL}
+
+        *Commit ID:* `${CI_COMMIT_SHA:0:8}`
+        *Commit By:* {{commit.author}}
+        *Commit Link:* {{commit.link}}
+        *Commit Msg:* {{commit.message}}
+        🙈 build failed. Fix me please, before client is aware.
+    when:
+      status:
+        - failure
+        - cancel
+      branch:
+        - master
+
+  - name: telegram success notify
+    image: appleboy/drone-telegram
+    settings:
+      token: 7616010754:AAGXMf8x-roKozdT0j-bOZ1y9dmbulbKPbM
+      to: -4765409490
+      message: |
+        🚀 *Woodpecker CI Build Finish* 🚀
+
+        *Repo:* ${CI_REPO_OWNER}/${CI_REPO_NAME}
+        *Repo Link:* ${CI_REPO_URL}
+        *Branch:* ${CI_COMMIT_BRANCH}
+
+        *Build Status:* *Success*
+        *Build Link:* ${CI_PIPELINE_URL}
+
+        *Commit ID:* `${CI_COMMIT_SHA:0:8}`
+        *Commit By:* {{commit.author}}
+        *Commit Link:* {{commit.link}}
+        *Commit Msg:* {{commit.message}}
+        😎 build succeeded. Good job {{commit.author}}
+    when:
+      status:
+        - success
+      branch:
+        - master
+    depends_on: [setup, build-src, build-image, deploy]

Dockerfile

@@ -20,20 +20,22 @@ COPY eslint.config.mjs ./eslint.config.mjs
 COPY .env.production ./.env.production
 COPY .prettierrc ./.prettierrc
 COPY index.html ./index.html
+COPY vhosts.conf ./vhosts.conf
 
 RUN npm run build:production
 
-FROM node:22-alpine
+# FROM node:22-alpine
 
 # Copy node modules and build directory from base image to new image
-COPY --from=base ./node_modules ./node_modules
-COPY --from=base ./package.json ./package.json
-COPY --from=base /dist /dist
-COPY --from=base /src /src
-COPY --from=base /public /public
+# COPY --from=base ./node_modules ./node_modules
+# COPY --from=base ./package.json ./package.json
+# COPY --from=base /dist /dist
+# COPY --from=base /src /src
+# COPY --from=base /public /public
 
 # Expose required port
 FROM nginx:alpine
 COPY --from=base /dist /usr/share/nginx/html
+COPY --from=base /vhosts.conf /etc/nginx/conf.d/default.conf
 
 CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -52,6 +52,7 @@
     "date-fns": "^3.0.0",
     "formik": "^2.4.6",
     "helmet": "^8.1.0",
+    "html2canvas": "^1.4.1",
     "https": "^1.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.456.0",

src/pages/account/home/user-profile/AccountUserProfileContent.tsx

@@ -6,7 +6,7 @@ const AccountUserProfileContent = () => {
   return (
     <div className="grid gap-5 lg:gap-7.5 xl:w-[38.75rem] mx-auto">
       <AccountUserProfileContextProvider>
-        <BasicSettings />
+        {/* <BasicSettings /> */}
         <Password />
         <PinCode />
         {/* Uncomment the line below to enable the Delete Account feature */}

src/pages/account/home/user-profile/blocks/BasicSettings.tsx

@@ -63,7 +63,8 @@ const BasicSettings = () => {
           <input
             className="input"
             type="text"
-            value={newName}
+            placeholder='Name'
+            // value={newName}
             onChange={(e) => setNewName(e.target.value)}
             disabled={isSubmitting}
           />
@@ -73,7 +74,8 @@ const BasicSettings = () => {
           <input
             className="input"
             type="text"
-            value={newUsername}
+            placeholder='Username'
+            // value={newUsername}
             onChange={(e) => setNewUsername(e.target.value)}
             disabled={isSubmitting}
           />
@@ -84,7 +86,8 @@ const BasicSettings = () => {
           <input
             className="input"
             type="email"
-            value={newEmail}
+            placeholder='Email'
+            // value={newEmail}
             onChange={(e) => setNewEmail(e.target.value)}
             disabled={isSubmitting}
           />

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -269,7 +269,7 @@ const DashboardHomePage = () => {
 
         <div className="flex space-x-4 mt-5">
           {bankaccount?.data && bankaccount?.data.length > 0 
-          // && getAuth()?.statusbalance=='Y' 
+          && getAuth()?.statusbalance=='Y' 
           ? (
             bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
               <BankSaldo

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

@@ -181,15 +181,15 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
             meta: { headerClassName: 'min-w-[80px]' },
         },
         {
-            accessorKey: 'amount',
-            header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
+            accessorKey: 'pre_amount',
+            header: ({ column }: any) => <DataGridColumnHeader title="Pre Amount" column={column} />,
             enableSorting: false,
             cell: (info: any) => info.getValue()?.toFixed(2),
             meta: { headerClassName: 'min-w-[100px]' },
         },
         {
-            accessorKey: 'pre_amount',
-            header: ({ column }: any) => <DataGridColumnHeader title="Pre Amount" column={column} />,
+            accessorKey: 'amount',
+            header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
             enableSorting: false,
             cell: (info: any) => info.getValue()?.toFixed(2),
             meta: { headerClassName: 'min-w-[100px]' },

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

@@ -54,7 +54,7 @@ const initialProps: ContextProps = {
   detailLogData: null
 };
 
-type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
+type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y' | 'O';
 
 interface StatusInfo {
   label: string;
@@ -64,10 +64,11 @@ interface StatusInfo {
 
 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' },
+  P: { label: 'Pending', bg: 'bg-yellow-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' }
+  Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
+  O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' }
 };
 
 const ManageTransactionContext = createContext<ContextProps>(initialProps);
@@ -172,7 +173,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[200px] text-center',
           cellClassName: 'text-center'
         }
       },

src/pages/members/agent-balance/AgentBalance.tsx

@@ -2,6 +2,7 @@ import { DataTable } from '@/components/ui/DataTable';
 import { getColumns } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
+import html2canvas from 'html2canvas';
 import { Helmet } from 'react-helmet';
 import {
   DialogContent,
@@ -18,15 +19,11 @@ import {
   Breadcrumbs,
   Link
 } from '@mui/material';
-import { useState, useEffect } from 'react';
-import CloseIcon from '@mui/icons-material/Close';
-import Divider from '@mui/material/Divider';
-import ConfirmDialog from '@/components/confirm';
+import { useState, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
 import { ListToolBar } from './ListToolbar';
-import { RefreshCw } from 'lucide-react';
-import { setgroups } from 'process';
+import { toAbsoluteUrl } from '@/utils';
 const BASE_URL = apiConfig.service_customer;
 
 let initBalance = {
@@ -47,40 +44,43 @@ const AgentBalance = () => {
   const [dataBalance, setDataBalance] = useState([]);
   const [formData, setFormData] = useState(initBalance);
   const [pageIndex, setPageIndex] = useState(1);
+  const [currentPage, setCurrentPage] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [dialogType, setDialogType] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
   const [isReloading, setIsReloading] = useState(false);
+  const [barcode, setBarcode] = useState('');
+  // const [selectedMember, setSelectedMember] = useState(initBalance);
 
   useEffect(() => {
-   fetchAgentBalance();
+  //  fetchAgentBalance();
   }, []);
 
-  async function fetchAgentBalance(): Promise<void> {
-    setIsReloading(true);
-    try {
-      let balances = await axios.get(`${BASE_URL}/customer/agent-balance`, {
-        params: {
-          limit: 20,
-          page: 1,
-          with_deleted: false,
-          order_field: 'created_at',
-          order_direction: 'DESC'
-        }
-      });
-      let temp = 1;
-      let resBalance = balances.data.data.list.map((el: any) => {
-        el.no = temp++;
-        if (!el.agent_name) el.agent_name = ''
-        return el;
-      });
-      setDataBalance(resBalance);
-    } catch (error: any) {
-      alert(error.message);
-      console.log(error);
-    } finally {
-      setIsReloading(false);
-    }
+  const fetchAgentBalance = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    filter = filter.length ? filter : {};
+    let balances = await axios.get(`${BASE_URL}/customer/agent-balance`, {
+      params: {
+        limit: limit,
+        page: page + 1, // +1 because your API uses 1-based pages
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'DESC',
+        filter: JSON.stringify(filter),
+        specialFilter: true
+      }
+    });
+    let temp = 1;
+    let resBalance = balances.data.data.list.map((el: any) => {
+      el.no = temp++;
+      if (!el.agent_name) el.agent_name = ''
+      return el;
+    });
+    return { data: resBalance, totalCount: balances?.data.data.total_count }
   }
 
   const openDialog = () => setIsDialogOpen(true);
@@ -94,16 +94,34 @@ const AgentBalance = () => {
     openDialog();
   }
 
-  const handleUpdate = (group: any) => {
+  const handleUpdate = async (data: any) => {
+    await getQrCode(data.id);
+    setFormData(data);
     setDialogType('update');
     setIsDialogOpen(true);
   };
 
-  const handleReload = () => {
+  const handleReload = async () => {
     setIsReloading(true);
-    fetchAgentBalance();
+    await fetchAgentBalance(currentPage, pageSize, '','');
+    setIsReloading(false);
+    // fetchAgentBalance();
   };
 
+  async function getQrCode(customerId: any): Promise<void> {
+    try {
+      setBarcode(``);
+      let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId } });
+      console.log(getToken.data.data);
+      setBarcode(getToken.data.data.qrCode);
+    } catch (error: any) {
+      toast.warning(error.message);
+      console.log(error);
+    } finally {
+      // setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
+    }
+  }
+
   if (loading) return <LoaderTransparant />;
 
   return (
@@ -139,99 +157,162 @@ const AgentBalance = () => {
           {isReloading && (
             <DataGridLoader />
           )}
-          <DataGridProvider
-            data={dataBalance}
-            columns={getColumns(handleUpdate)}
-            pagination={{ size: 10 }}
-            toolbar={
-              <ListToolBar
-                createGroup={createGroup}
-                onReload={handleReload}
-                isReloading={isReloading}
-              />
-            }
-            layout={{ card: true }}
-            serverSide={false}
-            onRowSelectionChange={(selected, table: any) => {
-              const selectedRow = table.getSelectedRowModel().rows[0];
-              if (selectedRow) handleUpdate(selectedRow.original);
-            }}
-          />
+          {!isReloading && (<DataGridProvider
+              // data={dataBalance}
+              pagination={{ size: pageSize }}
+              columns={getColumns(handleUpdate)}
+              layout={{ card: true }}
+              serverSide={true}
+              onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+                fetchAgentBalance(pageIndex, pageSize, sorting, columnFilters)
+              }
+              toolbar={
+                <ListToolBar
+                  createGroup={createGroup}
+                  onReload={handleReload}
+                  isReloading={isReloading}
+                />
+              }
+              onRowSelectionChange={(selected, table: any) => {
+                const selectedRow = table.getSelectedRowModel().rows[0];
+                if (selectedRow) handleUpdate(selectedRow.original);
+              }}
+            />
+          )}
         </div>
         {/* </div> */}
 
-        {/* <Dialog open={isDialogOpen} onClose={closeDialog}>
-          <DialogContent className="w-full">
-            <div className="flex justify-between">
-              <DialogTitle>
-                {dialogType === 'create' ? 'Create New Group' : 'Update Group'}
-              </DialogTitle>
-              <Box display="flex" justifyContent="flex-end">
-                <Button
-                  variant="outlined"
-                  sx={{ borderColor: 'white', color: 'grey' }}
-                  onClick={closeDialog}
-                >
-                  <CloseIcon />
-                </Button>
-              </Box>
-            </div>
-            <Divider />
-            <div className="p-5 mt-5">
-              <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
-                <div className="grid grid-cols-4 items-center gap-4 w-full">
-                  <label className="form-label text-sm">
-                    <span className="text-red-500">*</span>Group Name:
-                  </label>
-                  <input
-                    type="text"
-                    name="groupName"
-                    className="input w-full col-span-3"
-                    value={formData.groupName}
-                    onChange={handleChange}
-                  />
-                </div>
-                <div className="grid grid-cols-4 items-center gap-4 w-full">
-                  <label className="form-label text-sm">
-                    <span className="text-red-500">*</span>Active Status:
-                  </label>
-                  <FormControl>
-                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
-                      <FormControlLabel
-                        value="Y"
-                        checked={formData.status === 'Y'}
-                        control={<Radio />}
-                        label="Yes"
-                      />
-                      <FormControlLabel
-                        value="N"
-                        checked={formData.status === 'N'}
-                        control={<Radio />}
-                        label="No"
-                      />
-                    </RadioGroup>
-                  </FormControl>
-                </div>
-                <div className="grid grid-cols-4 items-center gap-4 w-full">
-                  <label className="form-label text-sm">
-                    <span className="text-red-500">*</span>Description:
-                  </label>
-                  <input
-                    type="text"
-                    name="description"
-                    className="input w-full col-span-3"
-                    value={formData.description}
-                    onChange={handleChange}
-                  />
-                </div>
-                <Button type="submit">Submit</Button>
-              </form>
+        <Dialog open={isDialogOpen} onClose={closeDialog}>
+          <DialogContent className="w-full flex justify-center items-center">
+            <div className="relative">
+              <PaymentCard
+                barcode={barcode}
+                customerId={formData.id}
+                agent_name={formData.agent_name}
+              />
             </div>
           </DialogContent>
-        </Dialog> */}
+        </Dialog>
       </Container>
     </>
   );
 };
 
+//  ====================
+const PaymentCard = ({ barcode, agent_name, customerId }: any) => {
+  const [token_legacy, setToken_legacy] = useState('');
+  const cardRef: any = useRef(null);
+
+  const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
+    return new Promise((resolve) => {
+      if (img.complete && img.naturalHeight !== 0) {
+        resolve();
+      } else {
+        toast.warning(`No QR Code`);
+        img.onload = () => resolve();
+      }
+    });
+  }; 
+
+  const handleDownload = async () => {
+    if (!cardRef.current) return;
+
+    const img = cardRef.current.querySelector('img');
+    if (img) {
+      await waitForImageLoad(img);
+    } else {
+      return toast.warning(`No QR Code`);
+    }
+
+    const canvas = await html2canvas(cardRef.current, {
+      useCORS: true,
+      allowTaint: false,
+      backgroundColor: 'white',
+      scale: 2
+    });
+
+    const dataUrl = canvas.toDataURL('image/png');
+    const link = document.createElement('a');
+    link.href = dataUrl;
+    link.download = `${agent_name}_barcode_card.png`;
+    link.click();
+  };
+
+  const updateTokenLegacy = async () => {
+    try {
+      if (!token_legacy) toast.warning(`Token Legacy can not be empty`);
+      await axios.post(`${BASE_URL}/token/insert-token-legacy`, {
+        customerid: customerId,
+        token_legacy
+      });
+      toast.success(`Success Update Token Legacy`);
+    } catch (error: any) {
+      toast.error(error.message);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <div
+        ref={cardRef}
+        className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20"
+      >
+        <img
+          src={toAbsoluteUrl('/media/images/fixed-card.png')}
+          alt="Card Frame"
+          className="absolute inset-0 w-full h-full object-cover z-0"
+        />
+
+        <div className="absolute inset-0 z-10 flex flex-col items-center pt-28 px-4 text-center">
+          <p className="text-[18px] font-semibold text-[#5b0066] mb-4">{agent_name}</p>
+
+          {barcode && (
+            <div className="mb-8">
+              <img src={barcode} alt="Barcode" className="w-60 h-60 object-contain" />
+            </div>
+          )}
+
+          <div className="flex-grow"></div>
+
+          <div className="absolute bottom-16">
+            <div className="text-[13px] text-[#47173a] text-left font-medium leading-tight">
+              <p>Imprime husi : Telin Digital Solution</p>
+              <p>Imprime : 01–06–2025</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full pt-[20px]">
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap">
+          <label className="form-label flex items-center">
+            Token Legacy<span className="text-red-500"></span>
+          </label>
+          <textarea
+            className="input"
+            name="token_legacy"
+            value={token_legacy}
+            onChange={(e: any) => setToken_legacy(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-between w-full mt-4 px-4">
+        <button
+          onClick={handleDownload}
+          className="border border-red-400 text-red-500 px-4 py-1 rounded hover:bg-red-50 text-sm"
+        >
+          Print QR
+        </button>
+        <button
+          onClick={updateTokenLegacy}
+          className="border border-blue-400 text-blue-500 px-4 py-1 rounded hover:bg-blue-50 text-sm"
+        >
+          Update to Token Legacy
+        </button>
+      </div>
+    </div>
+  );
+};
+
 export default AgentBalance;

src/pages/members/agent-balance/Column.tsx

@@ -101,6 +101,20 @@ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<AgentBa
       );
     }
   },
+  {
+    accessorKey: 'balance_deposit',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Deposit
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
   {
     accessorKey: 'balance_merchant',
     header: ({ column }) => {
@@ -130,17 +144,14 @@ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<AgentBa
     }
   },
   {
-    accessorKey: 'balance_deposit',
-    header: ({ column }) => {
+    id: 'actions',
+    cell: ({ row }) => {
+      const dataMembers = row.original;
       return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        >
-          Deposit
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
+        <button className="btn btn-sm btn-icon btn-clear btn-light" onClick={() => handleUpdate(dataMembers)}>
+          <KeenIcon icon="eye" />
+        </button>
       );
     }
-  },
+  }
 ];

src/pages/members/agent-balance/ListToolbar.tsx

@@ -9,58 +9,63 @@ interface ListToolBarProps {
 }
 
 const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) => {
-  const { table } = useDataGrid();
+  const { table, reload } = useDataGrid();
   const [usernameFilter, setUsernameFilter] = useState('');
   const [msisdn, setMsisdn] = useState('');
+  const [typeSearchValue, setSearchTypeValue] = useState<string>();
+  const [searchValue, setSearchValue] = useState<string>();
   const [fullname, setFullname] = useState('');
   const [merchantName, setMerchantName] = useState('');
 
   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUsernameFilter(e.target.value);
-    table.getColumn('username')?.setFilterValue(e.target.value);
   };
 
   const filtermsisdn = (e: React.ChangeEvent<HTMLInputElement>) => {
     setMsisdn(e.target.value);
-    table.getColumn('msisdn')?.setFilterValue(e.target.value);
   };
 
   const filterfullname = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFullname(e.target.value);
-    table.getColumn('fullname')?.setFilterValue(e.target.value);
   };
 
   const filtermerchantname = (e: React.ChangeEvent<HTMLInputElement>) => {
     setMerchantName(e.target.value);
-    table.getColumn('agent_name')?.setFilterValue(e.target.value);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault()
+     table.getColumn('username')?.setFilterValue(usernameFilter);
+     table.getColumn('msisdn')?.setFilterValue(msisdn);
+     table.getColumn('fullname')?.setFilterValue(fullname);
+     table.getColumn('agent_name')?.setFilterValue(merchantName);
+    // if (!merchantName && !fullname && !msisdn && !usernameFilter) reload()
   };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input type="text" placeholder="Search phone" value={msisdn} onChange={filtermsisdn}/>
-            </label>
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input type="text" placeholder="Search fullname" value={fullname} onChange={filterfullname}/>
-            </label>
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input type="text" placeholder="Search username" value={usernameFilter} onChange={handleUsernameChange}/>
-            </label>
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input type="text" placeholder="Search merchant name" value={merchantName} onChange={filtermerchantname}/>
-            </label>
-          </div>
+
+          <form onSubmit={(e:any) => handleSearch(e)}>
+            <div className="flex gap-3 items-center">
+                <label className="input input-sm w-1/3">
+                  <input type="text" placeholder="Search phone" value={msisdn} onChange={filtermsisdn}/>
+                </label>
+                <label className="input input-sm w-1/3">
+                  <input type="text" placeholder="Search fullname" value={fullname} onChange={filterfullname}/>
+                </label>
+                <label className="input input-sm w-1/3">
+                  <input type="text" placeholder="Search username" value={usernameFilter} onChange={handleUsernameChange}/>
+                </label>
+                <label className="input input-sm w-1/3">
+                  <input type="text" placeholder="Search merchant name" value={merchantName} onChange={filtermerchantname}/>
+                </label>
+              <Button variant="outline" className="h-7.5"><KeenIcon icon="magnifier" /></Button>
+              </div>
+          </form>
+
           <div className="flex gap-3 items-center">
-            {/* <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
-              Add Data
-            </Button> */}
             <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
                 {isReloading ? (

src/pages/members/kyc/Kyc.tsx

@@ -63,7 +63,7 @@ const Kyc = () => {
       setMembers(resMembers);
       let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
         params: {
-          limit: 50,
+          limit: 75,
           page: 1,
           with_deleted: false,
           order_field: 'name',

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

@@ -42,101 +42,13 @@ const ManageMembers = () => {
     fetchMasters();
   }, []);
   
-  // async function fetchCustomers(): Promise<any> {
-  //   setIsReloading(true);
-  //   try {
-  //     let customers = await axios.get(`${BASE_URL}/customer/list`, {
-  //       params: {
-  //         limit: pageSize,
-  //         page: 1 + currentPage,
-  //         with_deleted: false,
-  //         order_field: 'created_at',
-  //         order_direction: 'DESC'
-  //       }
-  //     });
-  //     let temp = 1;
-  //     let resMembers = customers.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');
-  //       }
-  //       el.name = el.fullname;
-  //       return el;
-  //     });
-  //     setMembers(resMembers);
-  //     return {
-  //       data: resMembers,
-  //       totalCount: customers.data.data.total_count,
-  //     }
-  //   } catch (error: any) {
-  //     toast.error(error.message);
-  //     console.log(error);
-  //   } finally {
-  //     setIsReloading(false);
-  //   }
-  // }
-
-  // const fetchCustomers = useCallback(
-  //   async ({ pageIndex, pageSize }:any) => {
-  //     setIsReloading(true);
-  //     try {
-  //       const res = await axios.get(`${BASE_URL}/customer/list`, {
-  //         params: {
-  //           limit: pageSize,
-  //           page: pageIndex + 1, // +1 because your API uses 1-based pages
-  //           with_deleted: false,
-  //           order_field: 'created_at',
-  //           order_direction: 'DESC',
-  //         },
-  //       });
-
-  //       const customers = res.data.data.list.map((el: any, index: number) => ({
-  //         ...el,
-  //         no: pageIndex * pageSize + index + 1,
-  //         date_birth: el.date_birth
-  //           ? new Date(el.date_birth).toLocaleString('sv-SE')
-  //           : null,
-  //         name: el.fullname,
-  //       }));
-
-  //       return {
-  //         data: customers,
-  //         totalCount: res.data.data.total_count,
-  //       };
-  //     } catch (error: any) {
-  //       toast.error(error.message);
-  //       console.error(error);
-  //       return { data: [], totalCount: 0 };
-  //     } finally {
-  //       setIsReloading(false);
-  //     }
-  //   },
-  //   []
-  // );
-
   const fetchCustomers = async (
     page: number,
     limit: number,
     sorting: any,
     filter: any
   ) => {
-    // [ SAMPLE
-    //     {
-    //         "id": "username",
-    //         "value": "d"
-    //     },
-    //     {
-    //         "id": "group_name",
-    //         "value": "Bank"
-    //     },
-    //     {
-    //         "id": "msisdn",
-    //         "value": "88"
-    //     }
-    // ]
     sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
-    // filter = filter.length ? { any: filter[0].value?.toLowerCase() } : {};
     filter = filter.length ? filter : {};
     
     const res = await axios.get(`${BASE_URL}/customer/list`, {
@@ -153,10 +65,8 @@ const ManageMembers = () => {
 
     const customers = res.data.data.list.map((el: any, index: number) => ({
       ...el,
-      no: page * pageSize + index + 1,
-      date_birth: el.date_birth
-        ? new Date(el.date_birth).toLocaleString('sv-SE')
-        : null,
+      no: (page) * limit + index + 1,
+      date_birth: el.date_birth ? new Date(el.date_birth).toLocaleString('sv-SE') : null,
       name: el.fullname,
     }));
     return { data: customers, totalCount: res?.data.data.total_count };

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

@@ -21,7 +21,7 @@ import ConfirmDialog from '@/components/confirm';
 const BASE_URL_CUSTOMER = apiConfig.service_customer;
 
 // ACCESS ADM
-export default function AdmAccess({page,groups,formData,handleClose,fetchCustomers,viewOnly,setViewOnly}: any) {
+export default function AdmAccess({page,groups,formData,handleClose,fetchCustomers,viewOnly,setViewOnly,isAdmin}: any) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
   const [changeGroup, setChangeGroup] = useState('');
@@ -112,15 +112,11 @@ export default function AdmAccess({page,groups,formData,handleClose,fetchCustome
           <div className="space-y-4">
             <div className="space-y-2">
               <p className="text-sm">Pin Status: {getPinStatus(formData.status).msg}</p>
-              <Button variant="default" onClick={(e) => buttonStatus(e)}>
-                {getPinStatus(formData.status).btn}
-              </Button>
+              <Button variant="default" onClick={(e) => buttonStatus(e)}>{getPinStatus(formData.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>
+              <Button variant="default" disabled={isAdmin} onClick={(e) => buttonResetPin(e)}>Reset PIN</Button>
             </div>
           </div>
 
@@ -128,15 +124,11 @@ export default function AdmAccess({page,groups,formData,handleClose,fetchCustome
           <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>
+              <Button variant="default" disabled={isAdmin} 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>
+              <Button variant="default" disabled={isAdmin} onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? 'Open Edit' : 'Close Edit'}</Button>
             </div>
           </div>
         </div>

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

@@ -1,6 +1,7 @@
 import { apiConfig } from '@/config/api.config';
 import { Alert, useDataGrid } from '@/components';
 import axios from 'axios';
+import { useAuthContext } from '@/auth';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import {
@@ -38,6 +39,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
     const [postoAdm, setPostoAdm] = useState([]);
     const [sucos, setSucos] = useState<any>([]);
     const [groups, setGroups] = useState([]);
+    const [isAdmin, setisAdmin] = useState(false);
     const [identity_type] = useState([
         { id: 'Eleitoral ID', name: 'Eleitoral ID' },
         { id: 'Bihete de Identidade', name: 'Bihete de Identidade' },
@@ -49,13 +51,14 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
         img: ''
     });
     const [banks] = useState([
-        { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
+        { 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: ''
     });
+    const { getUser } = useAuthContext();
 
     useEffect(() => {
         setFormData(initialData || {});
@@ -128,6 +131,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
     
     async function fetchMasterData() {
         try {
+            let userlogin:any = await getUser();
+            let userloginrole = userlogin?.data?.role?.name;
+            if (userloginrole === 'Admin') {
+                setisAdmin(true);
+                setViewOnly(true)
+            }
+
             let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
                 params: {
                   limit: 50,
@@ -214,7 +224,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser', previewImg, setPreviewImg): ''}
                             {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "create"||false): ''}
+                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "create"?false:true): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
                             {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
@@ -269,14 +279,14 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {(formData.id&&(page==='kyc'&&formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
 
                             {(formData.id && page!=='kyc') ? (
-                                <AdmAccess page={page}groups={groups}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
+                                <AdmAccess isAdmin={isAdmin} page={page}groups={groups}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
                             ): ""}
                             {(formData.id && page!=='kyc') ? (
                                 <CustomerWallet customerid={formData.id}/>
                             ) : ""}
 
                             <div className="col-span-1 md:col-span-2 flex justify-end gap-5">
-                                <Button onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
+                                <Button disabled={isAdmin} 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> */}
                                 {
@@ -284,7 +294,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                                         <Button onClick={onReject} variant="destructive" color="warning">Reject</Button>
                                     ) : ('')
                                 }
-                                <Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default">
+                                <Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default" disabled={isAdmin}>
                                     { formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
                                 </Button>
                             </div>

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

@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { UserPlus } from 'lucide-react';
 import { KeenIcon, useDataGrid } from '@/components';
 import { DefaultTooltip } from '@/components';
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import { toast } from 'sonner';
 import {
   Select,
@@ -13,7 +13,8 @@ import {
 } from '@/components/ui/select';
 import { getAuth } from '@/auth';
 import { apiConfig } from '@/config/api.config';
-  const API_URL = apiConfig.service_customer;
+import { useAuthContext } from '@/auth';
+const API_URL = apiConfig.service_customer;
 
 interface ListToolbarProps {
   createMember: () => void;
@@ -27,6 +28,18 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
   const { table, reload } = useDataGrid();
   const [searchValue, setSearchValue] = useState<string>();
   const [typeSearchValue, setSearchTypeValue] = useState<string>();
+  const [isAdmin, setisAdmin] = useState(false);
+  const { getUser } = useAuthContext();
+  
+  useEffect(() => {
+    getUserData();
+  }, []);
+
+  async function getUserData() {
+    let userlogin:any = await getUser();
+    let userloginrole = userlogin?.data?.role?.name;
+    if (userloginrole === 'Admin') setisAdmin(true);
+  }
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
@@ -127,30 +140,33 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
           </form>
 
           <div className="flex gap-3 items-center">
-            <Button
-              variant="outline"
-              className="h-7.5"
-              onClick={async () => {
-                const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
-                const result = await exporDataToExcel(filters);
+            { (!isAdmin) ? (
+              <>
+                <Button
+                  variant="outline"
+                  className="h-7.5"
+                  onClick={async () => {
+                    const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
+                    const result = await exporDataToExcel(filters);
+      
+                    if (result) {
+                      const url = window.URL.createObjectURL(result.blob);
+                      const a = document.createElement('a');
+                      a.href = url;
+                      a.download = result.filename;
+                      a.click();
+                      window.URL.revokeObjectURL(url);
+                    } else {
+                      toast.error('Failed to export data');
+                    }
+                  }}
+                >
+                  Export Data
+                </Button>
+                <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>Add Data</Button>
+              </>
+            ) : ('') }
 
-                if (result) {
-                  const url = window.URL.createObjectURL(result.blob);
-                  const a = document.createElement('a');
-                  a.href = url;
-                  a.download = result.filename;
-                  a.click();
-                  window.URL.revokeObjectURL(url);
-                } else {
-                  toast.error('Failed to export data');
-                }
-              }}
-            >
-              Export Data
-            </Button>
-            <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
-              Add Data
-            </Button>
             <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
               <Button 
                 variant="outline" 

src/pages/members/search-member/SearchMember.tsx

@@ -0,0 +1,47 @@
+import { Container, DataGridInner } from '@/components';
+// import {
+//   ManageTransferTypeContext,
+//   ManageTransferTypeContextProvider
+// } from './hooks/ManageTransferTypeContext';
+// import AddDialog from './blocks/AddDialog';
+// import { Breadcrumbs, Link } from '@mui/material';
+// import DeleteDialog from './blocks/DeleteDialog';
+// import { EditDialog } from './blocks/EditDialog';
+import { Helmet } from 'react-helmet';
+import { ManageSearchMemberContextProvider } from './hooks/ManageSearchMember';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const SearchMember = () => {
+
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Search Member</title>
+      </Helmet>
+      <ManageSearchMemberContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Search Member</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">Members</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Manage Search Member</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+
+        </Container>
+      </ManageSearchMemberContextProvider>
+    </>
+  );
+};
+
+export default SearchMember;

src/pages/members/search-member/blocks/DetailMember.tsx

@@ -0,0 +1,390 @@
+import { useState, useContext, useRef } from 'react';
+import axios from 'axios';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogBody
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import ConfirmDialog from '@/components/confirm';
+import { apiConfig } from '@/config/api.config';
+import { useManageSearchMemberContext } from '../hooks/useManageSearchMemberContext';
+
+const BASE_URL_CUSTOMER = apiConfig.service_customer;
+
+const DetailMember = () => {
+  const { 
+    showEditDialog, 
+    handleEditDialog, 
+    selectedCustomerData, 
+    doGetSearchMemberListData,
+    refreshTable 
+  } = useManageSearchMemberContext();
+  
+  const [confirmDialog, setConfirmDialog] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [previewImg, setPreviewImg] = useState({
+    status: false,
+    img: ''
+  });
+  const parentRef = useRef<any | null>(null);
+
+  const formatDate = (dateString: string) => {
+    if (!dateString) return 'No Data';
+    try {
+      return new Date(dateString).toLocaleDateString('en-GB');
+    } catch {
+      return 'Invalid Date';
+    }
+  };
+
+  const getPinStatus = (status: string) => {
+    if (status === 'Y')
+      return {
+        msg: 'Active',
+        btn: 'Block PIN',
+        canBlock: true,
+        canUnblock: false,
+        variant: 'destructive' as const,
+        showField: false 
+      };
+    if (status === 'N')
+      return {
+        msg: 'Not Active',
+        btn: 'PIN Not Active',
+        canBlock: false,
+        canUnblock: false,
+        variant: 'secondary' as const,
+        showField: true
+      };
+    if (status === 'P')
+      return {
+        msg: 'Suspend PIN',
+        btn: 'Unblock PIN',
+        canBlock: false,
+        canUnblock: true,
+        variant: 'default' as const,
+        showField: true
+      };
+    if (status === 'O')
+      return {
+        msg: 'Suspend OTP',
+        btn: 'Unblock OTP',
+        canBlock: false,
+        canUnblock: true,
+        variant: 'default' as const,
+        showField: true
+      };
+    return {
+      msg: 'Unknown Status',
+      btn: 'Unknown',
+      canBlock: false,
+      canUnblock: false,
+      variant: 'secondary' as const,
+      showField: true
+    };
+  };
+
+  const handleUnblockPin = async () => {
+    if (!selectedCustomerData?.id) {
+      toast.error('Customer data not available');
+      return;
+    }
+
+    try {
+      setIsUpdating(true);
+      await axios.put(`${BASE_URL_CUSTOMER}/customer/statuspin`, {
+        customerid: selectedCustomerData.id,
+        status: 'UnBlock'
+      });
+      
+      toast.success('PIN successfully unblocked');
+      
+      handleEditDialog(false, null);
+      
+      setTimeout(() => {
+        refreshTable();
+      }, 500);
+      
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to unblock PIN');
+    } finally {
+      setIsUpdating(false);
+      setConfirmDialog(false);
+    }
+  };
+
+  const handleAddDialog = (show: boolean) => {
+    handleEditDialog(show, show ? selectedCustomerData : null);
+  };
+
+  const imagePreview = (file: any) => {
+    if (file && typeof file === 'object' && file.type && file.type.startsWith('image/')) {
+      const previewURL = URL.createObjectURL(file);
+      return previewURL;
+    }
+    return file;
+  };
+
+  const handlePrevImg = (par: boolean) => {
+    if (par) setPreviewImg({ status: true, img: '' });
+    if (!par) setPreviewImg({ status: false, img: '' });
+  };
+
+  const onClickImg = (img: any) => {
+    setPreviewImg({ status: true, img });
+  };
+
+  const generateInput = (label: string, name: string, value: any, type: string = 'text', required: boolean = false, disabled: boolean = true) => {
+    const displayValue = value || '';
+    
+    function generateDate(isoString: string) {
+      return isoString.slice(0, 10);
+    }
+
+    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={displayValue ? (type === 'date' ? generateDate(displayValue) : displayValue) : ""}
+            onChange={() => {}} 
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const generateImage = (label: string, name: string, photoUrl: any) => {
+    return (
+      <>
+        {previewImg.status && (
+          <PreviewImage 
+            previewImgDialog={previewImg.status} 
+            handlePreviewImgDialog={handlePrevImg}
+            modalImage={previewImg.img}
+          />
+        )}
+        <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">
+            {photoUrl ? (
+              <div className="border-2 border-dashed border-red-300 rounded-md p-2">
+                <img 
+                  width={300} 
+                  height={250} 
+                  srcSet={imagePreview(photoUrl)} 
+                  src={imagePreview(photoUrl)} 
+                  alt={name} 
+                  style={{borderRadius: 10, cursor: 'pointer'}} 
+                  onClick={() => onClickImg(imagePreview(photoUrl))}
+                />
+              </div>
+            ) : (
+              <span>No Data</span>
+            )}
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const generatePinStatusField = (label: string, status: string) => {
+    const pinStatus = getPinStatus(status);
+    
+    if (!pinStatus.showField) {
+      return null;
+    }
+    
+    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}
+          </label>
+          <div className="flex-1 flex items-center gap-3 p-3 border border-gray-300 rounded-md bg-gray-50">
+            <span className="text-gray-900 flex-1">{pinStatus.msg}</span>
+            {pinStatus.canUnblock && (
+              <Button
+                variant={pinStatus.variant}
+                size="sm"
+                onClick={() => setConfirmDialog(true)}
+                disabled={isUpdating}
+              >
+                {isUpdating ? 'Unblocking...' : pinStatus.btn}
+              </Button>
+            )}
+            {!pinStatus.canUnblock && !pinStatus.canBlock && (
+              <Button
+                variant={pinStatus.variant}
+                size="sm"
+                disabled
+              >
+                {pinStatus.btn}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  if (!selectedCustomerData) {
+    return (
+      <Dialog open={showEditDialog} onOpenChange={(open) => handleAddDialog(open)}>
+        <DialogContent className="container-fixed max-w-[85%] flex flex-col p-2">
+          <DialogHeader>
+            <DialogTitle>Member - Detail</DialogTitle>
+            <DialogDescription></DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <div className="p-4 text-gray-500 text-center">No data available</div>
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <>
+      <Dialog open={showEditDialog} onOpenChange={(open) => handleAddDialog(open)}>
+        <DialogContent className="container-fixed max-w-[85%] flex flex-col p-2">
+          <DialogHeader>
+            <DialogTitle>Member - Detail</DialogTitle>
+            <DialogDescription></DialogDescription>
+          </DialogHeader>
+          
+          <DialogBody ref={parentRef}>
+            <div className="flex flex-col">
+              <div className="card-body grid grid-cols-1 md:grid-cols-2 gap-5">
+                
+                {/* Basic Information */}
+                {generateInput('Group', 'group_name', selectedCustomerData.group_name || selectedCustomerData.destinationGroup, 'text', true)}
+                {generateInput('Username', 'username', selectedCustomerData.username, 'text', true)}
+                {generateInput('Full Name', 'fullname', selectedCustomerData.fullname, 'text', true)}
+                {generateInput('Gender', 'gender', selectedCustomerData.gender, 'text', true)}
+                {generateInput('Date of Birth', 'date_birth', selectedCustomerData.date_birth, 'date', true)}
+                {generateInput('Phone Number', 'msisdn', selectedCustomerData.msisdn, 'text', true)}
+                {generateInput('Email', 'email', selectedCustomerData.email, 'text', true)}
+                {generateInput('Mother Fullname', 'mother_fullname', selectedCustomerData.mother_fullname, 'text', true)}
+                {generateInput('Identity Type', 'identity_type', selectedCustomerData.identity_type)}
+                {generateInput('Identity Number', 'identity_number', selectedCustomerData.identity_number)}
+                {generateInput('Address', 'address', selectedCustomerData.address, 'text', true)}
+
+                {/* Location Information */}
+                {generateInput('Profession', 'profession', selectedCustomerData.profession)}
+                {generateInput('Municipio', 'municipio_name', selectedCustomerData.municipio_name)}
+                {generateInput('Posto', 'posto_adms_name', selectedCustomerData.posto_adms_name)}
+                {generateInput('Suco', 'suco_name', selectedCustomerData.suco_name)}
+                {generateInput('Aldeia', 'aldeia_name', selectedCustomerData.aldeia_name)}
+                {generateInput('Nationality', 'nationality', selectedCustomerData.nationality, 'text', true)}
+                {generateImage('Photo', 'photouser', selectedCustomerData.photouser)} 
+                <div className="bg-white space-y-6 col-span-1 md:col-span-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                  </div>
+                </div>
+
+                {/* Bank Information Section */}
+                <div className="bg-white p-6 rounded-md shadow-md space-y-6 col-span-1 md:col-span-2">
+                  <h2 className="text-lg font-semibold">Bank Information</h2>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    {generateInput('Bank Name', 'bank_name', selectedCustomerData.bank_name)}
+                    {generateInput('Bank Account', 'bank_account', selectedCustomerData.bank_account)}
+                    {generateInput('IBank Number', 'ibank_number', selectedCustomerData.ibank_number)}
+                  </div>
+                </div>
+
+                {/* Agent Information Section */}
+                <div className="bg-white p-6 rounded-md shadow-md space-y-6 col-span-1 md:col-span-2">
+                  <h2 className="text-lg font-semibold">Agent Information</h2>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    {generateInput('License Number', 'license_number', selectedCustomerData.license_number)}
+                    {generateInput('Merchant Name', 'agent_name', selectedCustomerData.agent_name)}
+                    {generateInput('Merchant Address', 'merchantaddress', selectedCustomerData.merchantaddress)}
+                    {generateInput('Longitude Merchant', 'longitudemerchant', selectedCustomerData.longitudemerchant)}
+                    {generateInput('Latitude Merchant', 'latitudemerchant', selectedCustomerData.latitudemerchant)}
+                    {generateImage('Photo Merchant', 'photomerchant', selectedCustomerData.photomerchant)}
+                    {generateImage('File Selfie', 'file_selfie', selectedCustomerData.file_selfie)}
+                    {generateImage('File Document', 'file_document_id', selectedCustomerData.file_document_id)}
+                    {generateImage('File Document & Selfie', 'file_document_id_selfie', selectedCustomerData.file_document_id_selfie)}
+                    {generateImage('File Commercial License', 'file_commercial_license', selectedCustomerData.file_commercial_license)}
+                  </div>
+                </div>
+
+                {/* Status Information Section */}
+                <div className="bg-white p-6 rounded-md shadow-md space-y-6 col-span-1 md:col-span-2">
+                  <h2 className="text-lg font-semibold">Status Information</h2>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    {generatePinStatusField('PIN Status', selectedCustomerData.status || '')}
+                    {generateInput('Created Date', 'created_at', formatDate(selectedCustomerData.created_at))}
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="col-span-1 md:col-span-2 flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={() => handleAddDialog(false)}>
+                    Close
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={confirmDialog}
+        onOpenChange={setConfirmDialog}
+        content="Are you sure you want to unblock this customer's PIN?"
+        onYes={handleUnblockPin}
+        onNo={() => setConfirmDialog(false)}
+      />
+    </>
+  );
+};
+
+function PreviewImage({previewImgDialog, handlePreviewImgDialog, modalImage}: any) {
+  return (
+    <Dialog open={previewImgDialog} onOpenChange={(open) => handlePreviewImgDialog(open)}>
+      <DialogContent className="">
+        <DialogTitle aria-describedby={''}></DialogTitle>
+        <DialogBody>
+          <button
+            onClick={() => handlePreviewImgDialog(false)}
+            className="absolute top-2 right-2 text-white bg-red-600 hover:bg-red-800 rounded-full px-3 py-1 text-xl font-bold"
+          >
+            &times;
+          </button>
+          <img
+            src={modalImage}
+            alt="Preview"
+            className="max-w-full max-h-[80vh] rounded-lg"
+          />
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default DetailMember;

src/pages/members/search-member/blocks/FilterCard.tsx

@@ -0,0 +1,103 @@
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useState } from 'react';
+
+const CustomerFilterForm = ({ 
+  onFilter, 
+  onReset 
+}: { 
+  onFilter: (filters: { username?: string; msisdn?: string }) => void;
+  onReset?: () => void;
+}) => {
+  const [searchType, setSearchType] = useState<'username' | 'msisdn'>('username');
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!searchValue.trim()) {
+      alert('Please fill the search field');
+      return;
+    }
+    
+    const filters = searchType === 'username' 
+      ? { username: searchValue, msisdn: '' }
+      : { username: '', msisdn: searchValue };
+    
+    onFilter(filters);
+  };
+
+  const handleReset = () => {
+    setSearchType('username');
+    setSearchValue('');
+    if (onReset) {
+      onReset();
+    }
+  };
+
+  const getPlaceholder = () => {
+    return searchType === 'username' ? 'Enter username' : 'Enter phone number';
+  };
+
+  const getLabel = () => {
+    return searchType === 'username' ? 'Username' : 'Phone Number';
+  };
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="card max-w-[1200px] w-full">
+        <div className="card-body p-16">
+          <form onSubmit={handleSubmit} className="space-y-8">
+            <div>
+              <label htmlFor="searchType" className="block text-base font-medium text-gray-700 mb-2">
+                Type Search
+              </label>
+              <Select value={searchType} onValueChange={(value: 'username' | 'msisdn') => setSearchType(value)}>
+                <SelectTrigger className="w-full h-12 text-base">
+                  <SelectValue placeholder="Select search type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="username">Username</SelectItem>
+                  <SelectItem value="msisdn">Phone Number</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div>
+              <label htmlFor="searchValue" className="block text-base font-medium text-gray-700 mb-2">
+                Search
+              </label>
+              <Input
+                id="searchValue"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                placeholder={getPlaceholder()}
+                className="w-full h-12 text-base"
+              />
+            </div>
+            
+            <div className="flex gap-4">
+              <Button 
+                type="submit" 
+                className="bg-red-600 text-white px-8 py-3 text-base"
+              >
+                Submit
+              </Button>
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={handleReset}
+                className="border-gray-300 hover:bg-gray-50 px-8 py-3 text-base"
+              >
+                Reset
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerFilterForm;

src/pages/members/search-member/hooks/ManageSearchMember.tsx

@@ -0,0 +1,338 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import CustomerDetailDialog from '../blocks/DetailMember';
+import CustomerFilterForm from '../blocks/FilterCard';
+
+interface AccountProps {
+  id: string;
+  name: string;
+}
+
+interface CustomerData {
+  group_id: string;
+  group_name: string;
+  municipio_id: string;
+  municipio_name: string;
+  posto_adms_id: string;
+  posto_adms_name: string;
+  suco_id: string;
+  suco_name: string;
+  aldeia_id: string;
+  aldeia_name: string;
+  id: string;
+  msisdn: string;
+  email: string;
+  fullname: string;
+  username: string;
+  mother_fullname: string;
+  agent_name: string;
+  bank_name: string;
+  bank_account: string;
+  ibank_number: string;
+  address: string;
+  longitude: string;
+  latitude: string;
+  nationality: string;
+  file_selfie: string;
+  file_document_id: string;
+  file_document_id_selfie: string;
+  file_commercial_license: string;
+  identity_number: string;
+  merchantaddress: string;
+  license_number: string;
+  date_birth: string;
+  gender: string;
+  status: string;
+  created_at: string;
+  isneedapproval: string;
+  identity_type: string;
+  longitudemerchant: string;
+  latitudemerchant: string;
+  profession: string;
+  created_by: string;
+  approval_description_premium: string;
+  approval_description_agent: string;
+  photouser: string;
+  photomerchant: string;
+  destinationGroup: string;
+  statusApproval: string;
+}
+
+interface ContextProps {
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selectedData: CustomerData | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  selectedCustomerData: CustomerData | null;
+  doGetSearchMemberListData: (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => Promise<{ data: any[]; totalCount: number }>;
+  showTable: boolean;
+  showFilterCard: boolean;
+  currentFilters: any;
+  handleCustomFilter: (filters: { username?: string; msisdn?: string }) => void;
+  handleResetFilter: () => void;
+  handleShowSearchAgain: () => void;
+  refreshTable: () => void;
+}
+
+const initialProps: ContextProps = {
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  selectedCustomerData: null,
+  doGetSearchMemberListData: async () => ({ data: [], totalCount: 0 }),
+  showTable: false,
+  showFilterCard: true,
+  currentFilters: {},
+  handleCustomFilter: () => {},
+  handleResetFilter: () => {},
+  handleShowSearchAgain: () => {},
+  refreshTable: () => {}
+};
+
+const ManageSearchMemberContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_customer;
+
+const ManageSearchMemberContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedCustomerData, setSelectedCustomerData] = useState<CustomerData | null>(null);
+  const { GetData } = useCallApi();
+
+  const [showTable, setShowTable] = useState(false);
+  const [showFilterCard, setShowFilterCard] = useState(true);
+  const [currentFilters, setCurrentFilters] = useState({});
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  const handleCustomFilter = useCallback((filters: { username?: string; msisdn?: string }) => {
+    const formattedFilters: any[] = [];
+    
+    if (filters.username?.trim()) {
+      formattedFilters.push({ id: "username", value: filters.username.trim() });
+    }
+    
+    if (filters.msisdn?.trim()) {
+      formattedFilters.push({ id: "msisdn", value: filters.msisdn.trim() });
+    }
+
+    setCurrentFilters(formattedFilters);
+    setShowTable(true);
+    setShowFilterCard(false); 
+  }, []);
+
+  const handleResetFilter = useCallback(() => {
+    setCurrentFilters({});
+    setShowTable(false);
+    setShowFilterCard(true);
+  }, []);
+
+  const handleShowSearchAgain = useCallback(() => {
+    setShowFilterCard(true);
+    setShowTable(false);
+  }, []);
+
+  const refreshTable = useCallback(() => {
+    setRefreshTrigger(prev => prev + 1);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selectedData: CustomerData | null) => {
+    setSelectedCustomerData(show ? selectedData : null);
+    setShowEditDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const doGetSearchMemberListData = useCallback(
+    async (page: any, limit: any, sorting: any, filter: any) => {
+      try {
+        const finalSorting = sorting.length === 0 ? [{ id: 'name', desc: true }] : sorting;
+        
+        const filterToUse = Object.keys(currentFilters).length > 0 ? currentFilters : (filter.length ? filter : []);
+
+        const response = await GetData(`${API_URL}/customer/list`, {
+          limit: limit,
+          page: page + 1,
+          with_deleted: false,
+          order_field: 'username',
+          order_direction: 'DESC',
+          filter: JSON.stringify(filterToUse),
+          specialFilter: true
+        });
+
+        return {
+          data: response?.data?.list || [],
+          totalCount: response?.data?.total_count || 0
+        };
+      } catch (error) {
+        console.error('Fetch error:', error);
+        return { data: [], totalCount: 0 };
+      }
+    },
+    [GetData, currentFilters]
+  );
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.username,
+        id: 'username',
+        header: ({ column }) => <DataGridColumnHeader title="Username" column={column} />,
+        enableSorting: true,
+        enableHiding: false
+      },
+      {
+        accessorFn: (row) => row.fullname,
+        id: 'fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Fullname" column={column} />,
+        enableSorting: true,
+        enableHiding: false
+      },
+      {
+        accessorFn: (row) => row.msisdn,
+        id: 'phone_number',
+        header: ({ column }) => <DataGridColumnHeader title="Phone Number" column={column} />,
+        enableSorting: true
+      },
+      {
+        accessorFn: (row) => row.destinationGroup,
+        id: 'group',
+        header: ({ column }) => <DataGridColumnHeader title="Group" column={column} />,
+        enableSorting: true
+      },
+      {
+        accessorFn: (row) => row.email,
+        id: 'email',
+        header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
+        enableSorting: true
+      },
+      {
+        accessorFn: (row) => new Date(row.created_at).toLocaleString(),
+        id: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
+        enableSorting: true
+      },
+      {
+        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)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+            </>
+          );
+        },
+        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+      }
+    ],
+    [handleEditDialog]
+  );
+
+  const defaultSorting = useMemo(() => [{ id: 'name', desc: true }], []);
+
+  const contextValue = useMemo(
+    () => ({
+      showEditDialog,
+      handleEditDialog,
+      showAddDialog,
+      handleAddDialog,
+      selectedCustomerData,
+      doGetSearchMemberListData,
+      showTable,
+      showFilterCard,
+      currentFilters,
+      handleCustomFilter,
+      handleResetFilter,
+      handleShowSearchAgain,
+      refreshTable
+    }),
+    [
+      showEditDialog,
+      handleEditDialog,
+      showAddDialog,
+      handleAddDialog,
+      selectedCustomerData,
+      doGetSearchMemberListData,
+      showTable,
+      showFilterCard,
+      currentFilters,
+      handleCustomFilter,
+      handleResetFilter,
+      handleShowSearchAgain,
+      refreshTable
+    ]
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <ManageSearchMemberContext.Provider value={contextValue}>
+        <div className="px-4 py-6">
+          {showFilterCard && (
+            <div className="mb-6 mx-auto max-w-lg">
+              <div className="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
+                <h3 className="text-lg font-semibold mb-4 text-gray-800 text-center">Search Members</h3>
+                <CustomerFilterForm onFilter={handleCustomFilter} onReset={handleResetFilter} />
+              </div>
+            </div>
+          )}
+
+          {/* Table with Reset Button - Only visible after filter is applied */}
+          {showTable && (
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+              {/* Reset Button above table */}
+              <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+                <h3 className="text-lg font-semibold text-gray-800">Search Results</h3>
+                <Button 
+                  onClick={handleShowSearchAgain}
+                  variant="outline"
+                  className="border-blue-600 text-blue-600 hover:bg-blue-50"
+                >
+                  Search Again
+                </Button>
+              </div>
+              
+              <div className="p-4">
+                <DataGridProvider
+                  columns={columns}
+                  pagination={{ size: 10 }}
+                  layout={{ card: true }}
+                  sorting={defaultSorting}
+                  serverSide={true}
+                  key={refreshTrigger} 
+                  onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+                    doGetSearchMemberListData(pageIndex, pageSize, sorting, columnFilters)
+                  }
+                >
+                  {children}
+                </DataGridProvider>
+              </div>
+            </div>
+          )}
+        </div>
+        <CustomerDetailDialog />
+      </ManageSearchMemberContext.Provider>
+    </div>
+  );
+};
+
+export {ManageSearchMemberContext, ManageSearchMemberContextProvider };

src/pages/members/search-member/hooks/useManageSearchMemberContext.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+// import { ManageSearchMemberContext } from '../ManageSearchMember';
+import {ManageSearchMemberContext } from './ManageSearchMember';
+
+export const useManageSearchMemberContext = () => {
+  const context = useContext(ManageSearchMemberContext);
+  if (!context) {
+    throw new Error('useManageSearchMemberContext must be used within ManageSearchMemberContextProvider');
+  }
+  return context;
+};

src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx

@@ -237,7 +237,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       filter = filter.length === 0 ? {} : { name: { like: `%${filter[0].value?.toLowerCase()}%` } };
 
       const query: any = {
-        limit,
+        limit:100,
         page: 1,
         with_deleted: false,
         order_field: sorting[0].id,

src/pages/settings/user/manage-user/blocks/Types.ts

@@ -56,7 +56,6 @@ export const validateFormCreateUser = (
           { key: 'name', label: 'Name' },
           { key: 'username', label: 'Username' },
           { key: 'email', label: 'Email' },
-          { key: 'customerid', label: 'Customer ID' },
           { key: 'id_role', label: 'Role' },
           { key: 'status', label: 'Status' },
           { key: 'password', label: 'Password' },
@@ -65,7 +64,6 @@ export const validateFormCreateUser = (
       : [
           { key: 'name', label: 'Name' },
           { key: 'username', label: 'Username' },
-          { key: 'customerid', label: 'Customer ID' },
           { key: 'email', label: 'Email' },
           { key: 'id_role', label: 'Role' },
           { key: 'status', label: 'Status' }

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

@@ -224,8 +224,7 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}                                        </p>
+                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                     </div>
 
                                     <div>
@@ -299,7 +298,34 @@ const DetailApprovalTransaction = () => {
                                                     kind = 'RETURN';
                                                 } else if (transactionDetails?.kind === 'E') {
                                                     kind = 'REWARD';
+                                                } else if (transactionDetails?.kind === 'L') {
+                                                    kind = 'PURCHASE LOJA';
+                                                } else if (transactionDetails?.kind === 'B') {
+                                                    kind = 'TOP UP P24';
+                                                } else if (transactionDetails?.kind === 'A') {
+                                                    kind = 'TRANSFER AGENT';
+                                                } else if (transactionDetails?.kind === 'M') {
+                                                    kind = 'WITHDRAWAL AGENT';
+                                                } else if (transactionDetails?.kind === 'O') {
+                                                    kind = 'TOPUP AGENT';
+                                                } else if (transactionDetails?.kind === 'S') {
+                                                    kind = 'TOPUP P24';
+                                                } else if (transactionDetails?.kind === 'I') {
+                                                    kind = 'WITHDRAW MERCHANT';
+                                                } else if (transactionDetails?.kind === 'D') {
+                                                    kind = 'DONATION';
+                                                } else if (transactionDetails?.kind === 'F') {
+                                                    kind = 'FEE';
+                                                } else if (transactionDetails?.kind === 'V') {
+                                                    kind = 'REVERSAL';
+                                                } else if (transactionDetails?.kind === 'C') {
+                                                    kind = 'CASHBACK CASH';
+                                                } else if (transactionDetails?.kind === 'H') {
+                                                    kind = 'CASHBACK POINT';
+                                                } else if (transactionDetails?.kind === 'J') {
+                                                    kind = 'WITHDRAW ADMIN';
                                                 }
+
                                                 return kind;
                                             })()}
                                         </p>
@@ -419,7 +445,7 @@ const DetailApprovalTransaction = () => {
                                         Info
                                     </span>
                                 </h3>
-                                <div className="grid grid-cols-2 gap-4">
+                                <div className="grid grid-cols-3 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Date</p>
                                         <p className="font-medium">{transactionDetails?.transaction_date
@@ -436,9 +462,7 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}
-                                        </p>
+                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -502,7 +526,34 @@ const DetailApprovalTransaction = () => {
                                                     kind = 'RETURN';
                                                 } else if (transactionDetails?.kind === 'E') {
                                                     kind = 'REWARD';
+                                                } else if (transactionDetails?.kind === 'L') {
+                                                    kind = 'PURCHASE LOJA';
+                                                } else if (transactionDetails?.kind === 'B') {
+                                                    kind = 'TOP UP P24';
+                                                } else if (transactionDetails?.kind === 'A') {
+                                                    kind = 'TRANSFER AGENT';
+                                                } else if (transactionDetails?.kind === 'M') {
+                                                    kind = 'WITHDRAWAL AGENT';
+                                                } else if (transactionDetails?.kind === 'O') {
+                                                    kind = 'TOPUP AGENT';
+                                                } else if (transactionDetails?.kind === 'S') {
+                                                    kind = 'TOPUP P24';
+                                                } else if (transactionDetails?.kind === 'I') {
+                                                    kind = 'WITHDRAW MERCHANT';
+                                                } else if (transactionDetails?.kind === 'D') {
+                                                    kind = 'DONATION';
+                                                } else if (transactionDetails?.kind === 'F') {
+                                                    kind = 'FEE';
+                                                } else if (transactionDetails?.kind === 'V') {
+                                                    kind = 'REVERSAL';
+                                                } else if (transactionDetails?.kind === 'C') {
+                                                    kind = 'CASHBACK CASH';
+                                                } else if (transactionDetails?.kind === 'H') {
+                                                    kind = 'CASHBACK POINT';
+                                                } else if (transactionDetails?.kind === 'J') {
+                                                    kind = 'WITHDRAW ADMIN';
                                                 }
+
                                                 return kind;
                                             })()}
                                         </p>
@@ -526,6 +577,30 @@ const DetailApprovalTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                     </div>
                                 </div>
+                                <h3 className="font-semibold flex items-center">
+                                    Transfer Type
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Transfer Type
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-3 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transfer Type</p>
+                                        <p className="font-medium">
+                                            {
+                                                (() => {
+                                                    if (transactionDetails?.transfer.type === "S") {
+                                                        return "SEND";
+                                                    } else if (transactionDetails?.transfer.type === "R") {
+                                                        return "RECEIVE";
+                                                    } else {
+                                                        return "UNKNOWN";
+                                                    }
+                                                })()
+                                            }
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
                         )}
 
@@ -535,14 +610,12 @@ const DetailApprovalTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}
-                                        </p>
+                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                     </div>
-                                    <div>
+                                    {/* <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
                                         <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
-                                    </div>
+                                    </div> */}
                                     <div>
                                         <p className="text-sm text-gray-500">Email</p>
                                         <p className="font-medium">{transactionDetails?.origin_customer?.email ?? "-"}</p>
@@ -801,8 +874,9 @@ const DetailApprovalTransaction = () => {
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
-                                                    transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
+                                                {[...transactionDetails.log_approve]
+                                                    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+                                                    .map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
                                                         <tr key={index} className="border-t">
                                                             <td className="px-4 py-2 font-medium">
                                                                 {(() => {
@@ -815,13 +889,15 @@ const DetailApprovalTransaction = () => {
                                                                         status = 'REJECT';
                                                                     } else if (log.status === 'T') {
                                                                         status = 'NO NEED';
+                                                                    } else {
+                                                                        status = log.status || 'UNKNOWN';
                                                                     }
                                                                     return status;
                                                                 })()}
                                                             </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)
+                                                                    timeZone: 'Asia/Jakarta',
                                                                     year: 'numeric',
                                                                     month: '2-digit',
                                                                     day: '2-digit',
@@ -829,18 +905,11 @@ const DetailApprovalTransaction = () => {
                                                                     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>
-                                                    ))
-                                                ) : (
-                                                    <tr>
-                                                        <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
-                                                            No logs available
-                                                        </td>
-                                                    </tr>
-                                                )}
+                                                    ))}
                                             </tbody>
                                         </table>
                                     </div>
@@ -848,6 +917,7 @@ const DetailApprovalTransaction = () => {
                             </div>
                         )}
 
+
                         {activeTab === 'p24' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">P24 Logs</h3>

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

@@ -14,13 +14,11 @@ import {
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
-  // State untuk filter
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
   const [statusApproval, setStatusApproval] = useState<string>('');
   const [searchValue, setSearchValue] = useState<string>('');
   const [typeSearchValue, setSearchTypeValue] = useState<string>('');
 
-  // Set tanggal default saat pertama mount
   useEffect(() => {
     const today = new Date();
     const formatDate = (date: Date) => date.toISOString().split('T')[0];
@@ -30,28 +28,21 @@ const ListToolbar = () => {
     });
   }, []);
 
-  // Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
   const handleFilterData = useCallback(() => {
     try {
-      if (!trxDate.from || !trxDate.to) {
-        toast.error('Please select From and To dates');
-        return;
-      }
+      // if (!trxDate.from || !trxDate.to) {
+      //   toast.error('Please select From and To dates');
+      //   return;
+      // }
 
-      // Set filter tanggal
       table.getColumn('transaction_date')?.setFilterValue(trxDate);
-
-      // Set filter status approval
       table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
 
-      // Set filter search type sebagai column filter id 'searchtype'
       table.setColumnFilters((prevFilters) => {
-        // Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
         const filtered = prevFilters.filter(
           (f) => f.id !== 'searchtype' && f.id !== 'code'
         );
 
-        // Tambahkan filter baru jika ada
         if (typeSearchValue) {
           filtered.push({ id: 'searchtype', value: typeSearchValue });
         }
@@ -62,7 +53,6 @@ const ListToolbar = () => {
         return filtered;
       });
 
-      // Reset ke halaman pertama
       table.setPageIndex(0);
     } catch (error) {
       toast.error('Error applying filter');
@@ -79,7 +69,9 @@ const ListToolbar = () => {
             <input
               type="date"
               value={trxDate.from}
-              onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, from: event.target.value })
+              }
               name="from"
             />
           </label>
@@ -89,7 +81,9 @@ const ListToolbar = () => {
             <input
               type="date"
               value={trxDate.to}
-              onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, to: event.target.value })
+              }
               name="to"
             />
           </label>
@@ -110,7 +104,10 @@ const ListToolbar = () => {
 
           <Select
             value={typeSearchValue}
-            onValueChange={setSearchTypeValue}
+            onValueChange={(value) => {
+              setSearchTypeValue(value);
+              settrxDate({ from: '', to: '' }); // clear tanggal saat search type dipilih
+            }}
           >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
@@ -132,7 +129,6 @@ const ListToolbar = () => {
             />
           </label>
 
-          {/* Tombol Filter */}
           <Button onClick={handleFilterData}>
             Filter
           </Button>
@@ -147,13 +143,11 @@ const ListToolbar = () => {
                 const today = new Date();
                 const formatDate = (date: Date) => date.toISOString().split('T')[0];
 
-                // Reset semua filter dan tanggal ke hari ini
                 setSearchValue('');
                 setStatusApproval('');
                 settrxDate({ from: formatDate(today), to: formatDate(today) });
                 setSearchTypeValue('');
 
-                // Reset filter di tabel
                 table.getColumn('code')?.setFilterValue('');
                 table.getColumn('status_approve')?.setFilterValue('');
                 table.getColumn('transaction_date')?.setFilterValue('');

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

@@ -164,7 +164,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
             case 'C': return 'COMPLETE';
             case 'F': return 'FAILED';
             case 'O': return 'ON PROCESS';
-            case "P" : return 'PENDING';
+            case "P": return 'PENDING';
             case 'R': return 'ROLLBACK';
             case 'S': return 'REVERSAL';
             default: return 'UNKNOWN';
@@ -276,40 +276,16 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       let enddate = today.toISOString().split('T')[0];
       let transactioncode = '';
       let approvalstatus = '';
+      let searchType = '';
+      let codeValue = '';
 
       if (Array.isArray(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;
           }
 
-          if (f.id === 'code' && f.value) {
-            transactioncode = f.value;
-          }
-
-          if (f.id === 'status_approve' && f.value) {
-            approvalstatus = f.value;
-          }
-        });
-      }
-
-
-      // ✅ Declare formattedFilter early
-      const formattedFilter: any = {
-        "Transactions.transaction_date": {
-          from: `${startdate} 00:00:00`,
-          to: `${enddate} 23:59:59`
-        }
-      };
-
-      if (Array.isArray(filter)) {
-        let searchType = '';
-        let codeValue = '';
-
-        // Ambil code dan searchtype dulu
-        filter.forEach((f: any) => {
           if (f.id === 'code' && f.value) {
             codeValue = f.value;
           }
@@ -318,29 +294,35 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
             searchType = f.value;
           }
 
-          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
-            startdate = f.value.from;
-            enddate = f.value.to;
-            formattedFilter["Transactions.transaction_date"] = {
-              from: `${startdate} 00:00:00`,
-              to: `${enddate} 23:59:59`
-            };
+          if (f.id === 'status_approve' && f.value) {
+            approvalstatus = f.value;
           }
         });
+      }
 
-        // Terapkan berdasarkan searchtype + code
-        if (searchType && codeValue) {
-          if (searchType === "msisdn") {
-            formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
-          } else if (searchType === "fullname") {
-            formattedFilter["Transactions.origin_name"] = { like: `%${codeValue}%` };
-          } else if (searchType === "trxid") {
-            formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
-          }
+      // 💡 Build formattedFilter only after values are finalized
+      const formattedFilter: any = {};
+
+      // ✅ Only add transaction_date filter if searchType is NOT filled
+      if (!searchType) {
+        formattedFilter["Transactions.transaction_date"] = {
+          from: `${startdate} 00:00:00`,
+          to: `${enddate} 23:59:59`
+        };
+      }
+
+      // ✅ Apply searchType filters if both searchType and codeValue exist
+      if (searchType && codeValue) {
+        if (searchType === "msisdn") {
+          formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
+        } else if (searchType === "fullname") {
+          formattedFilter["Transactions.origin_name"] = { like: `%${codeValue}%` };
+        } else if (searchType === "trxid") {
+          formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
         }
       }
 
-      // Handle approval status filter
+      // ✅ Handle approval status
       formattedFilter["Transactions.status_approve"] = approvalstatus
         ? approvalstatus
         : { in: ["W", "Y", "N"] };
@@ -365,7 +347,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
 
     } catch (error) {
       console.error('Error fetching transaction', error);
-      return { data: [], totalCount: 0 }; // Fail-safe fallback
+      return { data: [], totalCount: 0 };
     }
   };
 

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

@@ -367,7 +367,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -456,22 +456,24 @@ const DetailTransaction = () => {
                                                     kind = 'TRANSFER AGENT';
                                                 } else if (transactionDetails?.kind === 'M') {
                                                     kind = 'WITHDRAWAL AGENT';
-                                                }else if( transactionDetails?.kind === 'O') {
+                                                } else if (transactionDetails?.kind === 'O') {
                                                     kind = 'TOPUP AGENT';
-                                                }else if (transactionDetails?.kind === 'S') {
+                                                } else if (transactionDetails?.kind === 'S') {
                                                     kind = 'TOPUP P24';
-                                                }else if (transactionDetails?.kind === 'I') {
+                                                } else if (transactionDetails?.kind === 'I') {
                                                     kind = 'WITHDRAW MERCHANT';
-                                                }else if (transactionDetails?.kind === 'D') {
+                                                } else if (transactionDetails?.kind === 'D') {
                                                     kind = 'DONATION';
-                                                }else if (transactionDetails?.kind === 'F') {
+                                                } else if (transactionDetails?.kind === 'F') {
                                                     kind = 'FEE';
-                                                }else if (transactionDetails?.kind === 'V') {
+                                                } else if (transactionDetails?.kind === 'V') {
                                                     kind = 'REVERSAL';
-                                                }else if( transactionDetails?.kind === 'C') {
+                                                } else if (transactionDetails?.kind === 'C') {
                                                     kind = 'CASHBACK CASH';
-                                                }else if( transactionDetails?.kind === 'H') {
+                                                } else if (transactionDetails?.kind === 'H') {
                                                     kind = 'CASHBACK POINT';
+                                                } else if (transactionDetails?.kind === 'J') {
+                                                    kind = 'WITHDRAW ADMIN';
                                                 }
 
                                                 return kind;
@@ -499,7 +501,7 @@ const DetailTransaction = () => {
                                         Info
                                     </span>
                                 </h3>
-                                <div className="grid grid-cols-2 gap-4">
+                                <div className="grid grid-cols-3 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Date</p>
                                         <p className="font-medium">{transactionDetails?.transaction_date
@@ -516,7 +518,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -589,12 +591,39 @@ const DetailTransaction = () => {
                                                     kind = 'TOP UP';
                                                 } else if (transactionDetails?.kind === 'R') {
                                                     kind = 'RETURN';
-                                                } else if (transactionDetails?.kind === 'E') {
                                                 } else if (transactionDetails?.kind === 'E') {
                                                     kind = 'REWARD';
+                                                } else if (transactionDetails?.kind === 'L') {
+                                                    kind = 'PURCHASE LOJA';
+                                                } else if (transactionDetails?.kind === 'B') {
+                                                    kind = 'TOP UP P24';
+                                                } else if (transactionDetails?.kind === 'A') {
+                                                    kind = 'TRANSFER AGENT';
+                                                } else if (transactionDetails?.kind === 'M') {
+                                                    kind = 'WITHDRAWAL AGENT';
+                                                } else if (transactionDetails?.kind === 'O') {
+                                                    kind = 'TOPUP AGENT';
+                                                } else if (transactionDetails?.kind === 'S') {
+                                                    kind = 'TOPUP P24';
+                                                } else if (transactionDetails?.kind === 'I') {
+                                                    kind = 'WITHDRAW MERCHANT';
+                                                } else if (transactionDetails?.kind === 'D') {
+                                                    kind = 'DONATION';
+                                                } else if (transactionDetails?.kind === 'F') {
+                                                    kind = 'FEE';
+                                                } else if (transactionDetails?.kind === 'V') {
+                                                    kind = 'REVERSAL';
+                                                } else if (transactionDetails?.kind === 'C') {
+                                                    kind = 'CASHBACK CASH';
+                                                } else if (transactionDetails?.kind === 'H') {
+                                                    kind = 'CASHBACK POINT';
+                                                } else if (transactionDetails?.kind === 'J') {
+                                                    kind = 'WITHDRAW ADMIN';
                                                 }
+
                                                 return kind;
                                             })()}
+
                                         </p>
                                     </div>
                                     <div>
@@ -614,6 +643,30 @@ const DetailTransaction = () => {
                                         <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
                                     </div>
                                 </div>
+                                <h3 className="font-semibold flex items-center">
+                                    Transfer Type
+                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                        Transfer Type
+                                    </span>
+                                </h3>
+                                <div className="grid grid-cols-3 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transfer Type</p>
+                                        <p className="font-medium">
+                                            {
+                                                (() => {
+                                                    if (transactionDetails?.transfer.type === "S") {
+                                                        return "SEND";
+                                                    } else if (transactionDetails?.transfer.type === "R") {
+                                                        return "RECEIVE";
+                                                    } else {
+                                                        return "UNKNOWN";
+                                                    }
+                                                })()
+                                            }
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
                         )}
 
@@ -623,13 +676,13 @@ const DetailTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.origin_name}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_name}</p>
                                     </div>
-                                    <div>
+                                    {/* <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
                                         <p className="font-medium">{transactionDetails?.origin_msisdn}</p>
                                         <p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
-                                    </div>
+                                    </div> */}
                                     <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
                                         <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
@@ -893,8 +946,9 @@ const DetailTransaction = () => {
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
-                                                    transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
+                                                {[...transactionDetails.log_approve]
+                                                    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+                                                    .map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
                                                         <tr key={index} className="border-t">
                                                             <td className="px-4 py-2 font-medium">
                                                                 {(() => {
@@ -907,13 +961,15 @@ const DetailTransaction = () => {
                                                                         status = 'REJECT';
                                                                     } else if (log.status === 'T') {
                                                                         status = 'NO NEED';
+                                                                    } else {
+                                                                        status = log.status || 'UNKNOWN';
                                                                     }
                                                                     return status;
                                                                 })()}
                                                             </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)
+                                                                    timeZone: 'Asia/Jakarta',
                                                                     year: 'numeric',
                                                                     month: '2-digit',
                                                                     day: '2-digit',
@@ -921,18 +977,11 @@ const DetailTransaction = () => {
                                                                     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>
-                                                    ))
-                                                ) : (
-                                                    <tr>
-                                                        <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
-                                                            No logs available
-                                                        </td>
-                                                    </tr>
-                                                )}
+                                                    ))}
                                             </tbody>
                                         </table>
                                     </div>

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

@@ -28,31 +28,29 @@ const ListToolbar = () => {
 
   const formatDate = (date: Date): string => date.toISOString().split('T')[0];
 
-  // Set tanggal default hari ini saat mount
   useEffect(() => {
     const today = new Date();
     const formatted = formatDate(today);
     settrxDate({ from: formatted, to: formatted });
   }, []);
 
-  // **Hilangkan semua useEffect yang auto apply filter saat input berubah**
-  // Karena kamu mau filter apply hanya lewat tombol Filter
-
-  // Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
-  const handleFilterData = useCallback(() => {
-    if (!trxDate.from || !trxDate.to) {
-      toast.error('Please select both From and To dates');
-      return;
+  // ✅ Reset tanggal jika typeSearchValue dipilih
+  useEffect(() => {
+    if (typeSearchValue) {
+      settrxDate({ from: '', to: '' });
     }
+  }, [typeSearchValue]);
+
+  const handleFilterData = useCallback(() => {
+    // if (!trxDate.from || !trxDate.to) {
+    //   toast.error('Please select both From and To dates');
+    //   return;
+    // }
 
-    // Terapkan filter tanggal
     table.getColumn('transaction_date')?.setFilterValue(trxDate);
 
-    // Terapkan filter jenis transaksi (kind)
     table.setColumnFilters((prev) => {
-      // Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
       const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
-      // Bangun array baru dengan filter yang diinginkan
       const filters: any[] = [...others];
 
       if (typeValue) filters.push({ id: 'kind', value: typeValue });
@@ -146,6 +144,7 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
+
           <Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Transaction Type" />
@@ -197,7 +196,6 @@ const ListToolbar = () => {
           <Button className="h-7.5" onClick={handleFilterData}>
             Filter
           </Button>
-
         </div>
 
         <div className="ml-auto flex gap-2">

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

@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router';
 import DetailTransaction from '../blocks/DetailTransaction';
 import ResendTransaction from '../blocks/ResendTransaction';
 import RollbackTransaction from '../blocks/RollbackTransaction';
+import { start } from 'repl';
 
 interface TransactionProps {
   id: number;
@@ -90,6 +91,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             case 'V': return 'REVERSAL';
             case 'C': return 'CASHBACK CASH';
             case 'H': return 'CASHBACK POINT';
+            case 'J': return 'WITHDRAW ADMIN';
             default: return '_';
           }
         },
@@ -298,24 +300,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       const today = new Date();
       const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
-      let startdate = firstDayOfMonth.toISOString().split('T')[0];
-      let enddate = today.toISOString().split('T')[0];
+      let startdate: string | undefined;
+      let enddate: string | undefined;
       let transactioncode = '';
       let type = '';
-
-      // ✅ Declare formattedFilter early
-      const formattedFilter: any = {
-        "Transactions.transaction_date": {
-          from: `${startdate} 00:00:00`,
-          to: `${enddate} 23:59:59`
-        }
-      };
+      let searchType = '';
+      let codeValue = '';
 
       if (Array.isArray(filter)) {
-        let searchType = '';
-        let codeValue = '';
-
-        // Ambil code dan searchtype dulu
+        // Ambil semua value dari filter terlebih dahulu
         filter.forEach((f: any) => {
           if (f.id === 'code' && f.value) {
             codeValue = f.value;
@@ -328,10 +321,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
             startdate = f.value.from;
             enddate = f.value.to;
-            formattedFilter["Transactions.transaction_date"] = {
-              from: `${startdate} 00:00:00`,
-              to: `${enddate} 23:59:59`
-            };
           }
 
           if (f.id === 'kind' && f.value) {
@@ -339,7 +328,30 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           }
         });
 
-        // Terapkan berdasarkan searchtype + code
+        // Kalau tidak ada searchType, baru pakai tanggal
+        if (!searchType) {
+          if (!startdate || !enddate) {
+            startdate = firstDayOfMonth.toISOString().split('T')[0];
+            enddate = today.toISOString().split('T')[0];
+          }
+        } else {
+          // Kosongkan supaya tidak digunakan di bawah
+          startdate = undefined;
+          enddate = undefined;
+        }
+
+        // Build formattedFilter setelah semua nilai diketahui
+        const formattedFilter: any = {};
+
+        // Tambahkan filter tanggal HANYA jika tidak ada searchType
+        if (startdate && enddate) {
+          formattedFilter["Transactions.transaction_date"] = {
+            from: `${startdate} 00:00:00`,
+            to: `${enddate} 23:59:59`
+          };
+        }
+
+        // Tambahkan filter berdasarkan searchType
         if (searchType && codeValue) {
           if (searchType === "msisdn") {
             formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
@@ -349,29 +361,31 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
           }
         }
+
+        // Tambahkan filter jenis transaksi jika ada
+        if (type) {
+          formattedFilter["Transactions.kind"] = type;
+        }
+
+        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)
+        });
+
+        if (!response || !response.data) {
+          console.warn('No data received:', response);
+          return { data: [], totalCount: 0 };
+        }
+
+        setTransaction(response.data.list);
+        return { data: response.data.list, totalCount: response.data.total_count };
       }
 
-
-      if (type) {
-        formattedFilter["Transactions.kind"] = type;
-      }
-
-      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)
-      });
-
-      if (!response || !response.data) {
-        console.warn('No data received:', response);
-        return { data: [], totalCount: 0 };
-      }
-
-      setTransaction(response.data.list);
-      return { data: response.data.list, totalCount: response.data.total_count };
+      return { data: [], totalCount: 0 };
 
     } catch (error) {
       console.error('Error fetching transaction', error);
@@ -380,6 +394,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
 
+
   return (
     <ManageTransactionContext.Provider
       value={{

src/pages/transaction/withdrawl-emoney/WithdrawalEmoney.tsx

@@ -0,0 +1,36 @@
+import { Helmet } from 'react-helmet';
+import { Container } from '@/components';
+import { Breadcrumbs, Link } from '@mui/material';
+import WithdrawInput from './blocks/WithdrawInput';
+import { TransactionWithdrawalEmoneyProvider } from './hooks/TransactionWithdrawalEmoneyContext';
+
+const WithdrawalEmoney = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Withdrawal Emoney</title>
+      </Helmet>
+      <TransactionWithdrawalEmoneyProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+            TRANSACTION WITHDRAWAL EMONEY
+          </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">Transaction</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Withdraw Saldo</span>
+            </Link>
+          </Breadcrumbs>
+          <WithdrawInput />
+        </Container>
+      </TransactionWithdrawalEmoneyProvider>
+    </>
+  );
+};
+
+export default WithdrawalEmoney;

src/pages/transaction/withdrawl-emoney/blocks/WithdrawInput.tsx

@@ -0,0 +1,300 @@
+import { getAuth } from '@/auth';
+import { Alert, Container } from '@/components';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { RefreshCw } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+const WithdrawInput = () => {
+  const initialForm: {
+    id_customer: string;
+    amount: string;
+    pin: string;
+    purpose: string;
+  } = {
+    id_customer: '',
+    amount: '',
+    pin: '',
+    purpose: ''
+  };
+
+  const [form, setForm] = useState(initialForm);
+  const [isLoading, setIsLoading] = useState(false);
+  const [customerMsisdn, setCustomerMsisdn] = useState<{ value: string; label: string }[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { GetData, PostData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const parsedUser = getAuth()?.user;
+  const API_URL = apiConfig.transaction;
+  const API_URL_WALLET = apiConfig.service_wallet;
+  const API_URL_CUSTOMER = apiConfig.service_customer;
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const ResetForm = () => {
+    setForm(initialForm);
+    setAlert({ show: false, message: '' });
+    setSearchTerm('');
+  };
+
+  const fetchCustomerMsisdn = async (sorting: any, filterValue: string) => {
+    const filter: any =
+      filterValue.trim().length === 0
+        ? {}
+        : {
+            or: [
+              { msisdn: { like: `%${filterValue}%` } },
+              { fullname: { like: `%${filterValue}%` } }
+            ]
+          };
+
+    const query: any = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+    };
+
+    if (filter && Object.keys(filter).length > 0) {
+      query.filter = JSON.stringify(filter);
+      // query.page = page + 1;
+    }
+
+    try {
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
+      setCustomerMsisdn(
+        response?.data.list.map((item: any) => ({
+          value: item.id,
+          label: `${item.msisdn} - ${item.fullname}`
+        }))
+      );
+    } catch (error) {
+      toast.error('Failed to fetch customer msisdn');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const doPostData = async (form: typeof initialForm) => {
+    setIsSubmitting(true);
+    // console.log(getAuth()?.user.customer.id);
+
+    try {
+      let response = await PostData(`${API_URL}/transaction/transfer`, {
+        msisdn_destination: '1112007',
+        amount: form.amount,
+        pin: form.pin,
+        purpose: form.purpose,
+        id_transaction_type: '380f270b-1f44-406f-a196-d6f784d68eb4',
+        id_origin_customer: form.id_customer,
+        type: 'S'
+      });
+      if (response?.status == true) {
+        toast.success('Success Request Topup');
+      } else {
+        toast.error(`${response?.message?.message}`);
+      }
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message || error?.message || 'Something went wrong';
+      toast.error(errorMessage);
+      setAlert({ show: true, message: errorMessage });
+    } finally {
+      setIsSubmitting(false);
+      setShowConfirmation(false);
+      ResetForm();
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (form.amount == '' || form.id_customer == '' || form.pin == '') {
+      setAlert({
+        show: true,
+        message: 'Please fill in all required fields.'
+      });
+      return;
+    }
+    setAlert({ show: false, message: '' });
+    setShowConfirmation(true);
+  };
+
+  const handleCancelSubmit = () => {
+    setShowConfirmation(false);
+  };
+
+  const handleMsisdnSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setSearchTerm(e.target.value);
+    setDropdownOpen(true);
+    const timer = setTimeout(() => {
+      fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], e.target.value);
+    }, 500);
+    return () => clearTimeout(timer);
+  };
+
+  const handleMsisdnSelect = (item: { value: string; label: string }) => {
+    setForm({ ...form, id_customer: item.value });
+    setDropdownOpen(false);
+    setSearchTerm(item.label);
+  };
+
+  useEffect(() => {
+    fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
+
+    const handleClickOutside = (event: any) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const filteredMsisdn = customerMsisdn
+    .filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
+    .slice(0, 10);
+
+  return (
+    <>
+      <Container className="flex items-center justify-center">
+        <div className="card max-w-[750px] w-full">
+          <div className="card-body p-10">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            {/* form */}
+            <form onSubmit={handleSubmit} className="space-y-6 mt-5">
+              <div className="relative" ref={dropdownRef}>
+                <label htmlFor="msisdn">MSISDN (Phone Number)</label>
+                <span className="text-red-500">*</span>
+                <div className="relative">
+                  <Input
+                    id="msisdn"
+                    type="text"
+                    value={searchTerm}
+                    onChange={handleMsisdnSearch}
+                    placeholder="Search MSISDN"
+                    onClick={() => setDropdownOpen(true)}
+                  />
+                  {dropdownOpen && (
+                    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                      {filteredMsisdn.length > 0 ? (
+                        filteredMsisdn.map((item, index) => (
+                          <div
+                            key={index}
+                            className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+                            onClick={() => handleMsisdnSelect(item)}
+                          >
+                            {item.label}
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-4 py-2 text-gray-500">
+                          {isLoading ? 'Loading...' : 'No results found'}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="amount">Amount</label>
+                <span className="text-red-500">*</span>
+                <Input
+                  id="topupAmount"
+                  type="number"
+                  min={0}
+                  value={form.amount}
+                  onChange={(e) => {
+                    const value = Number(e.target.value);
+                    if (value >= 0) {
+                      setForm({ ...form, amount: String(value) });
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                <label htmlFor="pin">PIN</label>
+                <span className="text-red-500">*</span>
+                <Input
+                  id="pin"
+                  type="password"
+                  value={form.pin}
+                  onChange={(e) => setForm({ ...form, pin: e.target.value })}
+                />
+              </div>
+              <div>
+                <label htmlFor="pin">Purpose</label>
+                <span className="text-red-500">*</span>
+                <Input
+                  id="purpose"
+                  type="text"
+                  value={form.purpose}
+                  onChange={(e) => setForm({ ...form, purpose: e.target.value })}
+                />
+              </div>
+              <div>
+                <Button type="button" onClick={handleSubmit}>
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Container>
+
+      {showConfirmation && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+            <h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
+            <p className="mb-6">
+              Are you sure you want to withdraw saldo of{' '}
+              <span className="font-semibold">
+                {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                  Number(form.amount)
+                )}{' '}
+              </span>
+              ?
+            </p>
+            <div className="flex justify-end space-x-3">
+              <Button
+                variant="outline"
+                onClick={handleCancelSubmit}
+                className="border-gray-300 text-gray-700"
+              >
+                Cancel
+              </Button>
+              <Button onClick={() => doPostData(form)} disabled={isSubmitting}>
+                {isSubmitting ? (
+                  <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                ) : (
+                  'Confirm'
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default WithdrawInput;

src/pages/transaction/withdrawl-emoney/hooks/TransactionWithdrawalEmoneyContext.tsx

@@ -0,0 +1,58 @@
+import { apiConfig } from '@/config/api.config';
+import { createContext } from 'react';
+
+interface TransactionWithdrawalProps {
+  id: string;
+  customers_id: string;
+  group_id: string;
+  username: string;
+  fullname: string;
+  email: string;
+  status: string;
+  created_at: Date;
+}
+
+interface ContextProps {}
+
+const initialProps: ContextProps = {};
+
+const TransactionWithdrawalEmoneyContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_customer;
+
+type StatusCode = 'W' | 'Y' | 'N' | 'T';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
+  N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
+  Y: { label: 'Approve', 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 TransactionWithdrawalEmoneyProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <TransactionWithdrawalEmoneyContext.Provider value={{}}>
+      <div>{children}</div>
+    </TransactionWithdrawalEmoneyContext.Provider>
+  );
+};
+
+export { TransactionWithdrawalEmoneyProvider, TransactionWithdrawalEmoneyContext };

src/pages/transaction/withdrawl-emoney/hooks/useTransactionWithdrawalEmoney.tsx

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

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

@@ -114,7 +114,8 @@ const AddFeeDialog = () => {
     deduct_from_account: '',
     credit_to: '',
     credit_destination: '00000000-0000-0000-0000-000000000000',
-    credit_destination_account: ''
+    credit_destination_account: '',
+    deduct_when: 'A'
   };
 
   const [formField, setFormField] = useState(initialState);
@@ -389,13 +390,19 @@ const AddFeeDialog = () => {
     );
   };
 
+  useEffect(() => {
+    if (formField.status_include === 'N') {
+      setFormField((prev) => ({ ...prev, deduct_when: 'A' }));
+    }
+  }, [formField.status_include]);
+
   return (
     <Dialog
       open={showAddFeeDialog}
       onOpenChange={(open) => {
         if (!open) {
-        handleAddFeeDialog(open);
-        handleCloseDialog();
+          handleAddFeeDialog(open);
+          handleCloseDialog();
         }
       }}
     >
@@ -835,6 +842,25 @@ const AddFeeDialog = () => {
                     </SelectContent>
                   </Select>
                 </div>
+                {formField.status_include === 'Y' && (
+                  <div className="w-full">
+                    <label className="form-label">
+                      Deduct When <span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.deduct_when}
+                      onValueChange={(value) => setFormField({ ...formField, deduct_when: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Deduct When" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="A">After</SelectItem>
+                        <SelectItem value="B">Before</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
 
                 <div className="flex justify-end pt-2.5 gap-5">
                   <Button

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

@@ -105,7 +105,8 @@ const EditFeeDialog = () => {
     deduct_from_account: '',
     credit_to: '',
     credit_destination: '00000000-0000-0000-0000-000000000000',
-    credit_destination_account: ''
+    credit_destination_account: '',
+    deduct_when: 'A'
   };
 
   const [formField, setFormField] = useState(initialState);
@@ -161,6 +162,15 @@ const EditFeeDialog = () => {
         }
       }
 
+      if (formField.status_include === 'Y' && !formField.deduct_origin) {
+        setAlert({
+          show: true,
+          message: 'Deduct Origin is required when Input is selected'
+        });
+        setIsSubmitting(false);
+        return;
+      }
+
       if (formField.credit_to === 'I' && !formField.credit_destination) {
         setAlert({
           show: true,
@@ -190,6 +200,9 @@ const EditFeeDialog = () => {
       if (formField.deduct_from !== 'I') {
         payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
       }
+      if (formField.status_include !== 'Y') {
+        payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
+      }
 
       // console.log(payload);
       try {
@@ -334,7 +347,8 @@ const EditFeeDialog = () => {
               response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
             credit_destination_account: response.data.credit_destination_account?.id || '',
             updated_by: parsedUser?.username,
-            updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
+            updated_at: new Date().toISOString().slice(0, 19).replace('T', ' '),
+            deduct_when: response.data.deduct_when || 'A'
           });
 
           if (response.data.transaction_type?.name) {
@@ -488,7 +502,6 @@ const EditFeeDialog = () => {
                       />
                     </div>
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Transfer Fee Name <span className="text-red-500">*</span>
@@ -503,7 +516,6 @@ const EditFeeDialog = () => {
                       }
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Description <span className="text-red-500">*</span>
@@ -518,7 +530,6 @@ const EditFeeDialog = () => {
                       }
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">Minimum Amount</label>
                     <NumericFormat
@@ -536,7 +547,6 @@ const EditFeeDialog = () => {
                       placeholder="Enter Minimum Amount"
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">Maximum Amount</label>
                     <NumericFormat
@@ -554,7 +564,6 @@ const EditFeeDialog = () => {
                       placeholder="Enter Maximum Amount"
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Period Start <span className="text-red-500">*</span>
@@ -569,7 +578,6 @@ const EditFeeDialog = () => {
                       }
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Period End <span className="text-red-500">*</span>
@@ -584,7 +592,6 @@ const EditFeeDialog = () => {
                       }
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">Deduct Amount</label>
                     <NumericFormat
@@ -602,7 +609,6 @@ const EditFeeDialog = () => {
                       placeholder="Enter Deduct Amount"
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">Deduct Percentage</label>
                     <NumericFormat
@@ -620,7 +626,6 @@ const EditFeeDialog = () => {
                       placeholder="Enter Deduct Percentage"
                     />
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Deduct From <span className="text-red-500">*</span>
@@ -645,70 +650,74 @@ const EditFeeDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
+                  {formField.deduct_from === 'I' && (
+                    <div className="w-full">
+                      <label className="form-label">
+                        Deduct Origin <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <div
+                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                          onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
+                        >
+                          <span className="truncate">
+                            {customers.find((customer) => customer.id === formField.deduct_origin)
+                              ?.username || 'Search customer...'}
+                          </span>
+                        </div>
 
-{formField.deduct_from === 'I' && (
-  <div className="w-full">
-    <label className="form-label">
-      Deduct Origin <span className="text-red-500">*</span>
-    </label>
-    <div className="relative">
-      <div
-        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-        onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
-      >
-        <span className="truncate">
-          {customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
-        </span>
-      </div>
-
-      {openDeductOrigin && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
-          <div className="sticky top-0 bg-white p-2 border-b">
-            <Input
-              className="h-8 text-sm"
-              type="text"
-              placeholder="Search customer..."
-              value={customerSearchTerm}
-              onChange={(e) => setCustomerSearchTerm(e.target.value)}
-              autoComplete="off"
-              onClick={(e) => e.stopPropagation()}
-              autoFocus
-            />
-          </div>
-          <div>
-            {customers
-              .filter(
-                (customer) =>
-                  customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
-                  customer.msisdn.includes(customerSearchTerm)
-              )
-              .map((customer) => (
-                <div
-                  key={customer.id}
-                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
-                  onClick={() => {
-                    setFormField({ ...formField, deduct_origin: customer.id });
-                    setOpenDeductOrigin(false);
-                  }}
-                >
-                  {customer.username}
-                </div>
-              ))}
-            {customers.filter(
-              (customer) =>
-                customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
-                customer.msisdn.includes(customerSearchTerm)
-            ).length === 0 && (
-              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  </div>
-)}
-
-
+                        {openDeductOrigin && (
+                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                            <div className="sticky top-0 bg-white p-2 border-b">
+                              <Input
+                                className="h-8 text-sm"
+                                type="text"
+                                placeholder="Search customer..."
+                                value={customerSearchTerm}
+                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                                autoComplete="off"
+                                onClick={(e) => e.stopPropagation()}
+                                autoFocus
+                              />
+                            </div>
+                            <div>
+                              {customers
+                                .filter(
+                                  (customer) =>
+                                    customer.username
+                                      .toLowerCase()
+                                      .includes(customerSearchTerm.toLowerCase()) ||
+                                    customer.msisdn.includes(customerSearchTerm)
+                                )
+                                .map((customer) => (
+                                  <div
+                                    key={customer.id}
+                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                    onClick={() => {
+                                      setFormField({ ...formField, deduct_origin: customer.id });
+                                      setOpenDeductOrigin(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </div>
+                                ))}
+                              {customers.filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              ).length === 0 && (
+                                <div className="px-3 py-2 text-sm text-gray-500">
+                                  No customer found
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
                   <div className="w-full">
                     <label className="form-label">
                       Deduct From Account <span className="text-red-500">*</span>
@@ -746,78 +755,78 @@ const EditFeeDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
+                  {formField.credit_to === 'I' && (
+                    <div className="w-full">
+                      <label className="form-label">
+                        Credit Destination <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <div
+                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                          onClick={() => setOpenCreditDestination(!openCreditDestination)}
+                        >
+                          <span className="truncate">
+                            {customers.find(
+                              (customer) => customer.id === formField.credit_destination
+                            )?.username || 'Search customer...'}
+                          </span>
+                        </div>
 
-{formField.credit_to === 'I' && (
-  <div className="w-full">
-    <label className="form-label">
-      Credit Destination <span className="text-red-500">*</span>
-    </label>
-    <div className="relative">
-      <div
-        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-        onClick={() => setOpenCreditDestination(!openCreditDestination)}
-      >
-        <span className="truncate">
-          {customers.find((customer) => customer.id === formField.credit_destination)
-            ?.username || 'Search customer...'}
-        </span>
-      </div>
-
-      {openCreditDestination && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
-          <div className="sticky top-0 bg-white p-2 border-b">
-            <Input
-              className="h-8 text-sm"
-              type="text"
-              placeholder="Search customer..."
-              value={customerSearchTerm}
-              onChange={(e) => setCustomerSearchTerm(e.target.value)}
-              autoComplete="off"
-              onClick={(e) => e.stopPropagation()}
-              autoFocus
-            />
-          </div>
-          <div>
-            {customers
-              .filter(
-                (customer) =>
-                  customer.username
-                    .toLowerCase()
-                    .includes(customerSearchTerm.toLowerCase()) ||
-                  customer.msisdn.includes(customerSearchTerm)
-              )
-              .map((customer) => (
-                <div
-                  key={customer.id}
-                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
-                  onClick={() => {
-                    setFormField({
-                      ...formField,
-                      credit_destination: customer.id
-                    });
-                    setOpenCreditDestination(false);
-                  }}
-                >
-                  {customer.username}
-                </div>
-              ))}
-            {customers.filter(
-              (customer) =>
-                customer.username
-                  .toLowerCase()
-                  .includes(customerSearchTerm.toLowerCase()) ||
-                customer.msisdn.includes(customerSearchTerm)
-            ).length === 0 && (
-              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  </div>
-)}
-
-
+                        {openCreditDestination && (
+                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                            <div className="sticky top-0 bg-white p-2 border-b">
+                              <Input
+                                className="h-8 text-sm"
+                                type="text"
+                                placeholder="Search customer..."
+                                value={customerSearchTerm}
+                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                                autoComplete="off"
+                                onClick={(e) => e.stopPropagation()}
+                                autoFocus
+                              />
+                            </div>
+                            <div>
+                              {customers
+                                .filter(
+                                  (customer) =>
+                                    customer.username
+                                      .toLowerCase()
+                                      .includes(customerSearchTerm.toLowerCase()) ||
+                                    customer.msisdn.includes(customerSearchTerm)
+                                )
+                                .map((customer) => (
+                                  <div
+                                    key={customer.id}
+                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                    onClick={() => {
+                                      setFormField({
+                                        ...formField,
+                                        credit_destination: customer.id
+                                      });
+                                      setOpenCreditDestination(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </div>
+                                ))}
+                              {customers.filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              ).length === 0 && (
+                                <div className="px-3 py-2 text-sm text-gray-500">
+                                  No customer found
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
                   <div className="w-full">
                     <label className="form-label">
                       Credit Destination Account <span className="text-red-500">*</span>
@@ -830,7 +839,6 @@ const EditFeeDialog = () => {
                       isLoadingWallets
                     )}
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Status <span className="text-red-500">*</span>
@@ -848,7 +856,6 @@ const EditFeeDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Status Include <span className="text-red-500">*</span>
@@ -856,7 +863,11 @@ const EditFeeDialog = () => {
                     <Select
                       value={formField.status_include}
                       onValueChange={(value) =>
-                        setFormField({ ...formField, status_include: value })
+                        setFormField({
+                          ...formField,
+                          status_include: value,
+                          deduct_when: value === 'N' ? 'A' : formField.deduct_when
+                        })
                       }
                     >
                       <SelectTrigger>
@@ -868,7 +879,27 @@ const EditFeeDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
-
+                  {formField.status_include === 'Y' && (
+                    <div className="w-full">
+                      <label className="form-label">
+                        Deduct When <span className="text-red-500">*</span>
+                      </label>
+                      <Select
+                        value={formField.deduct_when}
+                        onValueChange={(value) =>
+                          setFormField({ ...formField, deduct_when: value })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Deduct When" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="A">After</SelectItem>
+                          <SelectItem value="B">Before</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
                   <div className="flex justify-end pt-2.5 gap-5">
                     <Button variant={'outline'} type="button" onClick={resetForm}>
                       Reset

src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx

@@ -315,6 +315,21 @@ const ManageTransferFeeContextProvider = ({
           cellClassName: 'text-center'
         }
       },
+      {
+        accessorFn: (row: { deduct_when: string }) => {
+          const mapping: Record<string, string> = {
+            A: 'After',
+            B: 'Before'
+          };
+
+          return mapping[row.deduct_when] || 'Unknown';
+        },
+        id: 'deduct_when',
+        header: ({ column }) => <DataGridColumnHeader title="Status Deduct" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         id: 'actions',
         header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,

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

@@ -52,41 +52,15 @@ const ListToolbar = () => {
   const { handleAddDialog } = useManageTransferTypeContext();
   const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
   const { GetData } = useCallApi();
-  const [statusKind, setStatusKind] = useState('');
-  const [searchValue, setSearchValue] = useState('');
-  const [statusTypes, setStatusTypes] = useState('');
-  const [approval, setApproval] = useState('');
+
+  const [tempSearchValue, setTempSearchValue] = useState('');
+  const [tempStatusTypes, setTempStatusTypes] = useState('');
+  const [tempApproval, setTempApproval] = useState('');
+  const [tempStatusKind, setTempStatusKind] = useState('');
 
   const unique = (arr: string[]) => Array.from(new Set(arr));
   const types = unique(transferTypes.map((t) => t.type));
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
-      table.setPageIndex(0);
-    }
-  };
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
-
-  useEffect(() => {
-    table.getColumn('type')?.setFilterValue(statusTypes);
-  }, [statusTypes, table]);
-
-  useEffect(() => {
-    table.getColumn('status_approval')?.setFilterValue(approval);
-  }, [approval, table]);
-
-  useEffect(() => {
-    table.getColumn('status_kind')?.setFilterValue(statusKind);
-  }, [statusKind, table]);
-
   const fetchTransferTypes = async () => {
     try {
       const response = await GetData(`${API_URL}/transactiontype/list`, {
@@ -106,11 +80,21 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
     fetchTransferTypes();
   }, []);
 
+  const handleApplyFilter = () => {
+    table.getColumn('name')?.setFilterValue(tempSearchValue ? `%${tempSearchValue}%` : '');
+
+    table.getColumn('type')?.setFilterValue(tempStatusTypes);
+    table.getColumn('status_approval')?.setFilterValue(tempApproval);
+    table.getColumn('status_kind')?.setFilterValue(tempStatusKind);
+
+    table.setPageIndex(0);
+  };
+
   const handleClearFilter = () => {
-    setSearchValue('');
-    setStatusTypes('');
-    setApproval('');
-    setStatusKind('');
+    setTempSearchValue('');
+    setTempStatusTypes('');
+    setTempApproval('');
+    setTempStatusKind('');
 
     table.getColumn('status_kind')?.setFilterValue('');
     table.getColumn('name')?.setFilterValue('');
@@ -123,6 +107,27 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
     }, 0);
   };
 
+  const handleRefreshAndClearFilter = () => {
+    setTempSearchValue('');
+    setTempStatusTypes('');
+    setTempApproval('');
+    setTempStatusKind('');
+
+    table.getColumn('name')?.setFilterValue('');
+    table.getColumn('type')?.setFilterValue('');
+    table.getColumn('status_approval')?.setFilterValue('');
+    table.getColumn('status_kind')?.setFilterValue('');
+
+    table.setPageIndex(0);
+    reload();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleApplyFilter();
+    }
+  };
+
   return (
     <div className="card-header flex-wrap border-b-0 px-5">
       <div className="flex flex-wrap gap-1 w-full">
@@ -135,18 +140,18 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
               <input
                 type="text"
                 placeholder="Search Name"
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                className="input input-sm  w-full pl-9 text-ellipsis overflow-hidden"
+                value={tempSearchValue}
+                onChange={(e) => setTempSearchValue(e.target.value)}
+                className="input input-sm w-full pl-9 text-ellipsis overflow-hidden"
                 onKeyDown={handleKeyDown}
               />
             </div>
 
             <div className="min-w-[220px] shrink-0">
               <Select
-                key={`type-filter-${statusTypes}`}
-                value={statusTypes}
-                onValueChange={setStatusTypes}
+                key={`type-filter-${tempStatusTypes}`}
+                value={tempStatusTypes}
+                onValueChange={setTempStatusTypes}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -166,9 +171,9 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
 
             <div className="min-w-[220px] shrink-0">
               <Select
-                key={`approval-filter-${approval}`}
-                value={approval}
-                onValueChange={setApproval}
+                key={`approval-filter-${tempApproval}`}
+                value={tempApproval}
+                onValueChange={setTempApproval}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -186,11 +191,12 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
                 </SelectContent>
               </Select>
             </div>
+
             <div className="min-w-[220px] shrink-0">
               <Select
-                key={`status-kind-filter-${statusKind}`}
-                value={statusKind}
-                onValueChange={setStatusKind}
+                key={`status-kind-filter-${tempStatusKind}`}
+                value={tempStatusKind}
+                onValueChange={setTempStatusKind}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -223,12 +229,17 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
               </Select>
             </div>
 
-            <DefaultTooltip title={'Reset Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400 shrink-0"
-                onClick={handleClearFilter}
-              >
+            {/* Filter Button */}
+            <DefaultTooltip title={'Apply Filter'} placement={'top'}>
+              <Button variant="default" className="h-8 px-4 shrink-0" onClick={handleApplyFilter}>
+                <KeenIcon icon="filter" className="mr-1" />
+                Filter
+              </Button>
+            </DefaultTooltip>
+
+            {/* Clear Filter Button */}
+            <DefaultTooltip title={'Refresh Data (Keep Filter)'} placement={'top'}>
+              <Button variant="outline" className="h-8 px-3 shrink-0" onClick={() => reload()}>
                 <KeenIcon icon="arrow-circle-left" />
               </Button>
             </DefaultTooltip>
@@ -242,8 +253,8 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
             >
               Add
             </Button>
-            <DefaultTooltip title="Refresh" placement="top">
-              <Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
+            <DefaultTooltip title="Reset Filter & Refresh" placement="top">
+              <Button variant="outline" className="h-8 px-3" onClick={handleRefreshAndClearFilter}>
                 <KeenIcon icon="arrows-circle" />
               </Button>
             </DefaultTooltip>

src/routing/AppRoutingSetup.tsx

@@ -49,6 +49,8 @@ import AgentBalance from '@/pages/members/agent-balance/AgentBalance';
 
 // DISBURSEMENT
 import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
+import SearchMember from '@/pages/members/search-member/SearchMember';
+import WithdrawalEmoney from '@/pages/transaction/withdrawl-emoney/WithdrawalEmoney';
 
 // DISBURSEMENT
 
@@ -93,6 +95,8 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/members/create-member-credential" element={<MemberCredential />} />
           <Route path="/members/feedback-member" element={<FeedbackMemberMaster />} />
           <Route path="/members/agent-balance" element={<AgentBalance />} />
+          <Route path="/members/search-member" element={<SearchMember />} />
+          <Route path="/members/search-member" element={<SearchMember />} />
 
           <Route path="/access/access-type-management" element={<AccessType />} />
 
@@ -110,6 +114,7 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/transaction/topup" element={<TransactionTopup />} />
           <Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement />} />
           <Route path="/transaction/withdrawl-saldo" element={<TransactionWithdraw />} />
+          <Route path="/transaction/withdrawal-emoney" element={<WithdrawalEmoney />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/message/inbox" element={<Inbox />} />

vhosts.conf

@@ -0,0 +1,29 @@
+server {
+    listen 80 default_server;
+    server_name /usr/share/nginx/html;
+
+    root /usr/share/nginx/html;
+    index index.html index.htm;      
+
+    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
+      expires -1;
+      # access_log logs/static.log; # I don't usually include a static log
+    }
+
+    location ~* \.(?:css|js|json)$ {
+      try_files $uri =404;
+      expires 1y;
+      access_log off;
+      add_header Cache-Control "public";
+    }
+
+    # Any route containing a file extension (e.g. /devicesfile.js)
+    location ~ ^.+\..+$ {
+      try_files $uri =404;
+    }
+
+    # Any route that doesn't have a file extension (e.g. /devices)
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}