agent

.woodpecker.yml

@@ -49,23 +49,35 @@ steps:
     commands:
       - npm i typescript -g
       - npm run build:production
-      - echo '✅ success compile typescript and ready to deploy'
+      - echo '✅ success compile typescript'
     when:
       branch:
         - master
+    depends_on: [setup]
 
-  - name: deploy
+  - name: build-image
     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:
         - 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
@@ -119,3 +131,4 @@ steps:
         - success
       branch:
         - master
+    depends_on: [setup, build-src, build-image, deploy]

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

@@ -104,7 +104,7 @@ const AgentBalance = () => {
 
   const handleUpdate = async (data: any) => {
     await getQrCode(data.id);
-    setFormData(data)
+    setFormData(data);
     setDialogType('update');
     setIsDialogOpen(true);
   };
@@ -116,14 +116,14 @@ const AgentBalance = () => {
     // fetchAgentBalance();
   };
 
-  async function getQrCode(customerId:any): Promise<void> {
+  async function getQrCode(customerId: any): Promise<void> {
     try {
-      setBarcode(``)
+      setBarcode(``);
-      let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
+      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)
+      toast.warning(error.message);
       console.log(error);
     } finally {
       // setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
@@ -193,7 +193,11 @@ const AgentBalance = () => {
         <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}/>
+              <PaymentCard
+                barcode={barcode}
+                customerId={formData.id}
+                agent_name={formData.agent_name}
+              />
             </div>
           </DialogContent>
         </Dialog>
@@ -203,20 +207,20 @@ const AgentBalance = () => {
 };
 
 //  ====================
-const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
+const PaymentCard = ({ barcode, agent_name, customerId }: any) => {
   const [token_legacy, setToken_legacy] = useState('');
-  const cardRef:any = useRef(null);
+  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`)
+        toast.warning(`No QR Code`);
         img.onload = () => resolve();
       }
     });
-  };
+  }; 
 
   const handleDownload = async () => {
     if (!cardRef.current) return;
@@ -225,14 +229,14 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
     if (img) {
       await waitForImageLoad(img);
     } else {
-      return toast.warning(`No QR Code`)
+      return toast.warning(`No QR Code`);
     }
 
     const canvas = await html2canvas(cardRef.current, {
       useCORS: true,
       allowTaint: false,
       backgroundColor: 'white',
-      scale: 2,
+      scale: 2
     });
 
     const dataUrl = canvas.toDataURL('image/png');
@@ -244,32 +248,49 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
 
   const updateTokenLegacy = async () => {
     try {
-      if (!token_legacy) toast.warning(`Token Legacy can not be empty`)
+      if (!token_legacy) toast.warning(`Token Legacy can not be empty`);
-      await axios.post(`${BASE_URL}/token/insert-token-legacy`, { customerid: customerId, token_legacy });
+      await axios.post(`${BASE_URL}/token/insert-token-legacy`, {
-      toast.success(`Success Update Token Legacy`)
+        customerid: customerId,
-    } catch (error:any) {
+        token_legacy
-      toast.error(error.message)
+      });
+      toast.success(`Success Update Token Legacy`);
+    } catch (error: any) {
+      toast.error(error.message);
     }
-  }
+  };
 
   return (
     <div className="flex flex-col items-center">
-      {/* Card content to render */}
+      <div
-      <div ref={cardRef} className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20">
+        ref={cardRef}
-        <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
+        className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20"
-          <p className="text-[24px] font-semibold text-[#5b0066] mb-5">
+      >
-            {agent_name}
+        <img
-          </p>
+          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 && (
-            <img
+            <div className="mb-8">
-              src={barcode}
+              <img src={barcode} alt="Barcode" className="w-60 h-60 object-contain" />
-              alt="Barcode"
+            </div>
-              className="w-80 h-80 object-contain mb-2"
-            />
           )}
+
+          <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">
@@ -279,17 +300,22 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
             className="input"
             name="token_legacy"
             value={token_legacy}
-            onChange={(e:any) => setToken_legacy(e.target.value)}
+            onChange={(e: any) => setToken_legacy(e.target.value)}
           />
         </div>
       </div>
 
-      {/* Download Button */}
       <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">
+        <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">
+        <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>

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/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) {
+      // if (!trxDate.from || !trxDate.to) {
-        toast.error('Please select From and To dates');
+      //   toast.error('Please select From and To dates');
-        return;
+      //   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

@@ -159,12 +159,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorFn: (row) => {
-          
+
           switch (row.status) {
             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) {
+          if (f.id === 'status_approve' && f.value) {
-            startdate = f.value.from;
+            approvalstatus = f.value;
-            enddate = f.value.to;
-            formattedFilter["Transactions.transaction_date"] = {
-              from: `${startdate} 00:00:00`,
-              to: `${enddate} 23:59:59`
-            };
           }
         });
+      }
 
-        // Terapkan berdasarkan searchtype + code
+      // 💡 Build formattedFilter only after values are finalized
-        if (searchType && codeValue) {
+      const formattedFilter: any = {};
-          if (searchType === "msisdn") {
+
-            formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
+      // ✅ Only add transaction_date filter if searchType is NOT filled
-          } else if (searchType === "fullname") {
+      if (!searchType) {
-            formattedFilter["Transactions.origin_name"] = { like: `%${codeValue}%` };
+        formattedFilter["Transactions.transaction_date"] = {
-          } else if (searchType === "trxid") {
+          from: `${startdate} 00:00:00`,
-            formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
+          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/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**
+  // ✅ Reset tanggal jika typeSearchValue dipilih
-  // Karena kamu mau filter apply hanya lewat tombol Filter
+  useEffect(() => {
-
+    if (typeSearchValue) {
-  // Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
+      settrxDate({ from: '', to: '' });
-  const handleFilterData = useCallback(() => {
-    if (!trxDate.from || !trxDate.to) {
-      toast.error('Please select both From and To dates');
-      return;
     }
+  }, [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;
@@ -299,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 startdate: string | undefined;
-      let enddate = today.toISOString().split('T')[0];
+      let enddate: string | undefined;
       let transactioncode = '';
       let type = '';
-
+      let searchType = '';
-      // ✅ Declare formattedFilter early
+      let codeValue = '';
-      const formattedFilter: any = {
-        "Transactions.transaction_date": {
-          from: `${startdate} 00:00:00`,
-          to: `${enddate} 23:59:59`
-        }
-      };
 
       if (Array.isArray(filter)) {
-        let searchType = '';
+        // Ambil semua value dari filter terlebih dahulu
-        let codeValue = '';
-
-        // Ambil code dan searchtype dulu
         filter.forEach((f: any) => {
           if (f.id === 'code' && f.value) {
             codeValue = f.value;
@@ -329,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) {
@@ -340,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}%` };
@@ -350,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 };
       }
 
-
+      return { data: [], totalCount: 0 };
-      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 };
 
     } catch (error) {
       console.error('Error fetching transaction', error);
@@ -381,6 +394,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
 
+
   return (
     <ManageTransactionContext.Provider
       value={{

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

@@ -72,7 +72,6 @@ const WithdrawInput = () => {
 
     try {
       const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
-      console.log(response?.data);
       setCustomerMsisdn(
         response?.data.list.map((item: any) => ({
           value: item.id,
@@ -145,10 +144,10 @@ const WithdrawInput = () => {
     return () => clearTimeout(timer);
   };
 
-  const handleMsisdnSelect = (msisdn: string) => {
+  const handleMsisdnSelect = (item: { value: string; label: string }) => {
-    setForm({ ...form, id_customer: msisdn });
+    setForm({ ...form, id_customer: item.value });
     setDropdownOpen(false);
-    setSearchTerm(msisdn);
+    setSearchTerm(item.label);
   };
 
   useEffect(() => {
@@ -201,7 +200,7 @@ const WithdrawInput = () => {
                           <div
                             key={index}
                             className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-                            onClick={() => handleMsisdnSelect(item.value)}
+                            onClick={() => handleMsisdnSelect(item)}
                           >
                             {item.label}
                           </div>

src/routing/AppRoutingSetup.tsx

@@ -49,6 +49,7 @@ 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
@@ -94,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 />} />