update

src/components/confirm.tsx

@@ -21,8 +21,8 @@ const ConfirmDialog = ({ open, onClose, title, content, onYes, onNo, onOpenChang
           </DialogBody>
         </DialogHeader>
         <DialogFooter className="flex justify-end gap-2 pt-4">
-          <Button color="secondary" onClick={onNo}>No</Button>
+          <Button type="button" color="secondary" onClick={onNo}>No</Button>
-          <Button color="primary" disabled={a} onClick={() => onClickYes()}>Yes</Button>
+          <Button type="button" color="primary" disabled={a} onClick={() => onClickYes()}>Yes</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -50,6 +50,7 @@ const AgentBalance = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [isReloading, setIsReloading] = useState(false);
   const [barcode, setBarcode] = useState('');
+  const [token_legacy, setToken_legacy] = useState('');
   // const [selectedMember, setSelectedMember] = useState(initBalance);
 
   useEffect(() => {
@@ -99,11 +100,15 @@ const AgentBalance = () => {
     setFormData(data);
     setDialogType('update');
     setIsDialogOpen(true);
+    let getTokenLegacy = await axios.get(`${BASE_URL}/token/get-token-legacy`, { params: { id: data.id } });
+    let temp = getTokenLegacy?.data?.data?.token_legacy || '';
+    setToken_legacy(temp)
   };
 
   const handleReload = async () => {
     setIsReloading(true);
     await fetchAgentBalance(currentPage, pageSize, '','');
+    closeDialog()
     setIsReloading(false);
     // fetchAgentBalance();
   };
@@ -112,13 +117,10 @@ const AgentBalance = () => {
     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`)
     }
   }
 
@@ -187,8 +189,11 @@ const AgentBalance = () => {
             <div className="relative">
               <PaymentCard
                 barcode={barcode}
+                token_legacy={token_legacy}
+                setToken_legacy={setToken_legacy}
                 customerId={formData.id}
                 agent_name={formData.agent_name}
+                handleReload={handleReload}
               />
             </div>
           </DialogContent>
@@ -199,8 +204,7 @@ const AgentBalance = () => {
 };
 
 //  ====================
-const PaymentCard = ({ barcode, agent_name, customerId }: any) => {
+const PaymentCard = ({ barcode, agent_name, customerId, token_legacy, setToken_legacy, handleReload }: any) => {
-  const [token_legacy, setToken_legacy] = useState('');
   const cardRef: any = useRef(null);
 
   const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
@@ -240,14 +244,16 @@ 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) return 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`);
+      await handleReload();
     } catch (error: any) {
-      toast.error(error.message);
+      let err_msg = error?.response?.data?.error || error.message
+      toast.error(err_msg);
     }
   };
 

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

@@ -35,10 +35,11 @@ const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) =
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
-     table.getColumn('username')?.setFilterValue(usernameFilter);
+    table.resetPageIndex()
-     table.getColumn('msisdn')?.setFilterValue(msisdn);
+    table.getColumn('username')?.setFilterValue(usernameFilter);
-     table.getColumn('fullname')?.setFilterValue(fullname);
+    table.getColumn('msisdn')?.setFilterValue(msisdn);
-     table.getColumn('agent_name')?.setFilterValue(merchantName);
+    table.getColumn('fullname')?.setFilterValue(fullname);
+    table.getColumn('agent_name')?.setFilterValue(merchantName);
     // if (!merchantName && !fullname && !msisdn && !usernameFilter) reload()
   };
 

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

@@ -112,11 +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 type="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" disabled={isAdmin} onClick={(e) => buttonResetPin(e)}>Reset PIN</Button>
+              <Button type="button" variant="default" disabled={isAdmin} onClick={(e) => buttonResetPin(e)}>Reset PIN</Button>
             </div>
           </div>
 
@@ -124,11 +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" disabled={isAdmin} onClick={(e) => openChangeGroupDialog(e)}>Change Group</Button>
+              <Button type="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" disabled={isAdmin} onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? 'Open Edit' : 'Close Edit'}</Button>
+              <Button type="button" variant="default" disabled={isAdmin} onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? 'Open Edit' : 'Close Edit'}</Button>
             </div>
           </div>
         </div>

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

@@ -45,7 +45,8 @@ export default function CustomerWallet({customerid}: any) {
               <tbody>
                 {customerWallet.map((item:any, index) => (
                   <tr
-                    key={item.id}
+                    // key={item.id}
+                    key={item.id ?? `wallet-${index}`}
                     className={`${
                       index % 2 === 0 ? "bg-gray-50" : "bg-white"
                     } hover:bg-gray-100`}

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

@@ -171,19 +171,24 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
 
     function buttonOnSubmit(e:any) {
         e.preventDefault();
-        if (dialogType === 'update') {
+        const requiredFields:any = {
-            // if (page === 'kyc' && formData.destinationGroup === "Premium" && !formData.approval_description_premium) return toast.warning(`Approval Premium Description needed!`)
+            msisdn: "msisdn",
-            // if (page === 'kyc' && formData.destinationGroup === "Agent" && !formData.approval_description_premium) return toast.warning(`Approval Agent Description needed!`)
+            email: "email",
-            if (!formData.msisdn||!formData.email||!formData.fullname||!formData.username||!formData.mother_fullname||!formData.address||!formData.nationality||!formData.date_birth||!formData.gender) {
+            fullname: "fullname",
-                return toast.warning(`Required fields cannot be empty: msisdn, email, fullname, username, mother Full Name, Address, Nationality, Date Of Birth, Gender.!`)
+            username: "username",
-            }
+            address: "Address",
+            nationality: "Nationality",
+            date_birth: "Date Of Birth",
+            gender: "Gender"
+        };
+
+        const missingFields = Object.keys(requiredFields).filter((key) => !formData[key]);
+
+        if (missingFields.length > 0) {
+            const missingNames = missingFields.map((key:any) => requiredFields[key]).join(", ");
+            return toast.warning(`Required fields cannot be empty: ${missingNames}!`);
         }
-        if (dialogType === 'create') {
+        // dialogType === 'update'
-            if (!formData.msisdn||!formData.email||!formData.fullname||!formData.username||!formData.mother_fullname||!formData.address||!formData.nationality||!formData.date_birth||!formData.gender) {
-                return toast.warning(`Required fields cannot be empty: msisdn, email, fullname, username, mother Full Name, Address, Nationality, Date Of Birth, Gender.!`)
-            }
-        }
-        // if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
         handleSubmit(formData);
     }
 
@@ -208,26 +213,21 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                 </DialogHeader>
                 <DialogBody ref={parentRef}>
                     <div className="flex flex-col">
-                        {alert.show && (
+                        <form>
-                            <Alert variant="danger">
+                        {alert.show && (<Alert variant="danger"><h3>{alert.message}</h3></Alert>)}
-                                <h3>{alert.message}</h3>
-                            </Alert>
-                        )}
 
                         {/* <div className="card-body grid gap-5"> */}
                         <div className="card-body grid grid-cols-1 md:grid-cols-2 gap-5">
 
                             {(formData.id || dialogType === "create") ? generateList(formData, handleChange, groups, 'group_id', 'Group', true, dialogType === "update"||false): ''}
-                            {/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
                             {(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:true): ''}
+                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, (dialogType === "create"||formData.group_name === 'Agent')?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', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateList(formData, handleChange, identity_type, 'identity_type', 'Identity Type', false, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
@@ -286,20 +286,20 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             ) : ""}
 
                             <div className="col-span-1 md:col-span-2 flex justify-end gap-5">
-                                <Button disabled={isAdmin} onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
+                                <Button type="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> */}
                                 {
                                     formData.isneedapproval == 1 && page === 'kyc' ? (
-                                        <Button onClick={onReject} variant="destructive" color="warning">Reject</Button>
+                                        <Button type="button" onClick={onReject} variant="destructive" color="warning">Reject</Button>
                                     ) : ('')
                                 }
-                                <Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default" disabled={isAdmin}>
+                                <Button type="submit" onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default" disabled={isAdmin}>
                                     { formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
                                 </Button>
                             </div>
                         </div>
-                        
+                        </form>
                     </div>
                 </DialogBody>
             </DialogContent>

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

@@ -43,7 +43,7 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
-    // setSearchValue(e.target.value)
+    table.resetPageIndex()
     if (typeSearchValue === 'username') {
       table.getColumn('username')?.setFilterValue(searchValue);
       table.getColumn('msisdn')?.setFilterValue('');