Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
Raja Oktafrianto
@ -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]
|
||||
|
||||
BIN
public/media/images/fixed-card.png
Normal file
BIN
public/media/images/fixed-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
@ -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 color="primary" disabled={a} onClick={() => onClickYes()}>Yes</Button>
|
||||
<Button type="button" color="secondary" onClick={onNo}>No</Button>
|
||||
<Button type="button" color="primary" disabled={a} onClick={() => onClickYes()}>Yes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -80,28 +80,28 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
|
||||
type = "Withdrawal Agent";
|
||||
break;
|
||||
case 'O':
|
||||
type = 'TOP UP AGENT';
|
||||
type = 'Top Up Agent';
|
||||
break;
|
||||
case 'S':
|
||||
type = 'TRANSFER P24';
|
||||
type = 'Transfer P24';
|
||||
break;
|
||||
case 'I':
|
||||
type = 'WIJTDRAW MERCHANT';
|
||||
type = 'Withdraw Merchant';
|
||||
break;
|
||||
case 'D':
|
||||
type = 'DONATION';
|
||||
type = 'Donation';
|
||||
break;
|
||||
case 'F':
|
||||
type = 'FEE';
|
||||
type = 'Fee';
|
||||
break;
|
||||
case 'V':
|
||||
type = 'REVERSAL';
|
||||
type = 'Reversal';
|
||||
break;
|
||||
case 'C':
|
||||
type = 'CASHBACK CASH';
|
||||
type = 'Cashback Cash';
|
||||
break;
|
||||
case 'H':
|
||||
type = 'CASHBACK POINT';
|
||||
type = 'Cashback Point';
|
||||
break;
|
||||
default:
|
||||
type = "Unknown";
|
||||
@ -136,7 +136,8 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="w-14 text-right text-sm text-gray-700">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(item.value)}{item.unit}</span>
|
||||
<span className="w-24 text-right text-sm text-gray-700 break-words">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(item.value)}{item.unit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -44,27 +44,35 @@ 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 [token_legacy, setToken_legacy] = useState('');
|
||||
// const [selectedMember, setSelectedMember] = useState(initBalance);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAgentBalance();
|
||||
// fetchAgentBalance();
|
||||
}, []);
|
||||
|
||||
async function fetchAgentBalance(): Promise<void> {
|
||||
setIsReloading(true);
|
||||
try {
|
||||
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: 20,
|
||||
page: 1,
|
||||
limit: limit,
|
||||
page: page + 1, // +1 because your API uses 1-based pages
|
||||
with_deleted: false,
|
||||
order_field: 'created_at',
|
||||
order_direction: 'DESC'
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(filter),
|
||||
specialFilter: true
|
||||
}
|
||||
});
|
||||
let temp = 1;
|
||||
@ -73,13 +81,7 @@ const AgentBalance = () => {
|
||||
if (!el.agent_name) el.agent_name = ''
|
||||
return el;
|
||||
});
|
||||
setDataBalance(resBalance);
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsReloading(false);
|
||||
}
|
||||
return { data: resBalance, totalCount: balances?.data.data.total_count }
|
||||
}
|
||||
|
||||
const openDialog = () => setIsDialogOpen(true);
|
||||
@ -95,27 +97,30 @@ const AgentBalance = () => {
|
||||
|
||||
const handleUpdate = async (data: any) => {
|
||||
await getQrCode(data.id);
|
||||
setFormData(data)
|
||||
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 = () => {
|
||||
const handleReload = async () => {
|
||||
setIsReloading(true);
|
||||
fetchAgentBalance();
|
||||
await fetchAgentBalance(currentPage, pageSize, '','');
|
||||
closeDialog()
|
||||
setIsReloading(false);
|
||||
// fetchAgentBalance();
|
||||
};
|
||||
|
||||
async function getQrCode(customerId: any): Promise<void> {
|
||||
try {
|
||||
setBarcode(``)
|
||||
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)
|
||||
toast.warning(error.message);
|
||||
console.log(error);
|
||||
} finally {
|
||||
// setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,10 +159,15 @@ const AgentBalance = () => {
|
||||
{isReloading && (
|
||||
<DataGridLoader />
|
||||
)}
|
||||
<DataGridProvider
|
||||
data={dataBalance}
|
||||
{!isReloading && (<DataGridProvider
|
||||
// data={dataBalance}
|
||||
pagination={{ size: pageSize }}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 10 }}
|
||||
layout={{ card: true }}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
fetchAgentBalance(pageIndex, pageSize, sorting, columnFilters)
|
||||
}
|
||||
toolbar={
|
||||
<ListToolBar
|
||||
createGroup={createGroup}
|
||||
@ -165,20 +175,26 @@ const AgentBalance = () => {
|
||||
isReloading={isReloading}
|
||||
/>
|
||||
}
|
||||
layout={{ card: true }}
|
||||
serverSide={false}
|
||||
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 flex justify-center items-center">
|
||||
<div className="relative">
|
||||
<PaymentCard barcode={barcode} customerId={formData.id} agent_name={formData.agent_name}/>
|
||||
<PaymentCard
|
||||
barcode={barcode}
|
||||
token_legacy={token_legacy}
|
||||
setToken_legacy={setToken_legacy}
|
||||
customerId={formData.id}
|
||||
agent_name={formData.agent_name}
|
||||
handleReload={handleReload}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@ -188,8 +204,7 @@ const AgentBalance = () => {
|
||||
};
|
||||
|
||||
// ====================
|
||||
const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
const [token_legacy, setToken_legacy] = useState('');
|
||||
const PaymentCard = ({ barcode, agent_name, customerId, token_legacy, setToken_legacy, handleReload }: any) => {
|
||||
const cardRef: any = useRef(null);
|
||||
|
||||
const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
|
||||
@ -197,7 +212,7 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
if (img.complete && img.naturalHeight !== 0) {
|
||||
resolve();
|
||||
} else {
|
||||
toast.warning(`No QR Code`)
|
||||
toast.warning(`No QR Code`);
|
||||
img.onload = () => resolve();
|
||||
}
|
||||
});
|
||||
@ -210,14 +225,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');
|
||||
@ -229,29 +244,48 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
|
||||
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`)
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
{/* Card content to render */}
|
||||
<div ref={cardRef} className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20">
|
||||
<div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
|
||||
<p className="text-[24px] font-semibold text-[#5b0066] mb-5">
|
||||
{agent_name}
|
||||
</p>
|
||||
{barcode && (
|
||||
<div
|
||||
ref={cardRef}
|
||||
className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20"
|
||||
>
|
||||
<img
|
||||
src={barcode}
|
||||
alt="Barcode"
|
||||
className="w-80 h-80 object-contain mb-2"
|
||||
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>
|
||||
|
||||
@ -269,12 +303,17 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
</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>
|
||||
|
||||
@ -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 }) => {
|
||||
@ -129,20 +143,6 @@ 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>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
|
||||
@ -9,58 +9,64 @@ 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.resetPageIndex()
|
||||
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">
|
||||
|
||||
<form onSubmit={(e:any) => handleSearch(e)}>
|
||||
<div className="flex 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>
|
||||
<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 ? (
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -42,79 +42,6 @@ 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,
|
||||
@ -138,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 };
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -171,19 +171,24 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
|
||||
function buttonOnSubmit(e:any) {
|
||||
e.preventDefault();
|
||||
if (dialogType === 'update') {
|
||||
// if (page === 'kyc' && formData.destinationGroup === "Premium" && !formData.approval_description_premium) return toast.warning(`Approval Premium Description needed!`)
|
||||
// if (page === 'kyc' && formData.destinationGroup === "Agent" && !formData.approval_description_premium) return toast.warning(`Approval Agent Description needed!`)
|
||||
if (!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.!`)
|
||||
const requiredFields:any = {
|
||||
msisdn: "msisdn",
|
||||
email: "email",
|
||||
fullname: "fullname",
|
||||
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') {
|
||||
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!`)
|
||||
// dialogType === 'update'
|
||||
handleSubmit(formData);
|
||||
}
|
||||
|
||||
@ -208,26 +213,21 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
</DialogHeader>
|
||||
<DialogBody ref={parentRef}>
|
||||
<div className="flex flex-col">
|
||||
{alert.show && (
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
<form>
|
||||
{alert.show && (<Alert variant="danger"><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', true, viewOnly): ''}
|
||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', false, 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>
|
||||
|
||||
@ -41,10 +41,9 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
|
||||
if (userloginrole === 'Admin') setisAdmin(true);
|
||||
}
|
||||
|
||||
|
||||
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('');
|
||||
|
||||
47
src/pages/members/search-member/SearchMember.tsx
Normal file
47
src/pages/members/search-member/SearchMember.tsx
Normal file
@ -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;
|
||||
390
src/pages/members/search-member/blocks/DetailMember.tsx
Normal file
390
src/pages/members/search-member/blocks/DetailMember.tsx
Normal file
@ -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"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<img
|
||||
src={modalImage}
|
||||
alt="Preview"
|
||||
className="max-w-full max-h-[80vh] rounded-lg"
|
||||
/>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailMember;
|
||||
103
src/pages/members/search-member/blocks/FilterCard.tsx
Normal file
103
src/pages/members/search-member/blocks/FilterCard.tsx
Normal file
@ -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;
|
||||
338
src/pages/members/search-member/hooks/ManageSearchMember.tsx
Normal file
338
src/pages/members/search-member/hooks/ManageSearchMember.tsx
Normal file
@ -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 };
|
||||
@ -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;
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -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('');
|
||||
|
||||
@ -53,12 +53,24 @@ const ManageApprovalTransactionContext = createContext<ContextProps>(initialProp
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
|
||||
const [showDetailDialog, setShowDetailDialog] = useState(false);
|
||||
const [showApprovalDialog, setShowApprovalDialog] = useState(false);
|
||||
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
|
||||
const [selectedTransactionIdForApproval, setSelectedTransactionIdForApproval] = useState<number | null>(null);
|
||||
const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
|
||||
|
||||
const handleShowDetail = (transactionId: any) => {
|
||||
setIsLoadingDetail(true);
|
||||
setSelectedTransactionId(transactionId);
|
||||
|
||||
// Simulasi loading (bisa ganti dengan fetch detail data jika perlu)
|
||||
setTimeout(() => {
|
||||
setShowDetailDialog(true);
|
||||
setIsLoadingDetail(false);
|
||||
}, 1000); // 500ms loading
|
||||
};
|
||||
|
||||
const { GetData } = useCallApi();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -236,11 +248,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
return (
|
||||
<div key={`actions-${row.id}`} className="flex gap-2 justify-center">
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => {
|
||||
setSelectedTransactionId(row.id);
|
||||
setShowDetailDialog(true);
|
||||
}}
|
||||
className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
|
||||
onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
|
||||
>
|
||||
<KeenIcon icon="eye" />
|
||||
</button>
|
||||
@ -276,40 +285,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,17 +303,24 @@ 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;
|
||||
if (f.id === 'status_approve' && f.value) {
|
||||
approvalstatus = f.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 💡 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`
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Terapkan berdasarkan searchtype + code
|
||||
// ✅ Apply searchType filters if both searchType and codeValue exist
|
||||
if (searchType && codeValue) {
|
||||
if (searchType === "msisdn") {
|
||||
formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
|
||||
@ -338,9 +330,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle approval status filter
|
||||
// ✅ Handle approval status
|
||||
formattedFilter["Transactions.status_approve"] = approvalstatus
|
||||
? approvalstatus
|
||||
: { in: ["W", "Y", "N"] };
|
||||
@ -365,7 +356,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 };
|
||||
}
|
||||
};
|
||||
|
||||
@ -385,6 +376,32 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
|
||||
{isLoadingDetail && (
|
||||
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-40">
|
||||
<svg
|
||||
className="w-8 h-8 animate-spin text-white mb-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="text-white text-lg font-medium">Loading data...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DataGridProvider
|
||||
columns={columns}
|
||||
pagination={{ size: 10 }}
|
||||
|
||||
@ -23,53 +23,56 @@ const ListToolbar = () => {
|
||||
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
|
||||
);
|
||||
|
||||
const [status, setStatus] = useState<string>(
|
||||
(table.getState().columnFilters.find(f => f.id === 'status')?.value as string) ?? ''
|
||||
);
|
||||
|
||||
const { GetData } = useCallApi();
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
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 others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code' && f.id !== 'status');
|
||||
const filters: any[] = [...others];
|
||||
|
||||
if (typeValue) filters.push({ id: 'kind', value: typeValue });
|
||||
if (typeSearchValue) filters.push({ id: 'searchtype', value: typeSearchValue });
|
||||
if (searchValue) filters.push({ id: 'code', value: searchValue });
|
||||
|
||||
if (status) filters.push({ id: 'status', value: status });
|
||||
return filters;
|
||||
});
|
||||
|
||||
table.setPageIndex(0);
|
||||
}, [trxDate, typeValue, typeSearchValue, searchValue, table]);
|
||||
}, [trxDate, typeValue, typeSearchValue, searchValue, status, table]);
|
||||
|
||||
const exporDataToExcel = async (
|
||||
typeSearchValue: string,
|
||||
searchValue: string,
|
||||
trxDate: any,
|
||||
typeValue: string
|
||||
typeValue: string,
|
||||
status: string
|
||||
) => {
|
||||
try {
|
||||
const formattedFilter: any = {
|
||||
@ -146,6 +149,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" />
|
||||
@ -173,6 +177,19 @@ const ListToolbar = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={status} onValueChange={(value) => setStatus(value)}>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Transaction Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="P">PENDING</SelectItem>
|
||||
<SelectItem value="O">ON PROCESS</SelectItem>
|
||||
<SelectItem value="F">FAILED</SelectItem>
|
||||
<SelectItem value="C">COMPLETE</SelectItem>
|
||||
<SelectItem value="R">ROLLBACK</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={typeSearchValue} onValueChange={(value) => setSearchTypeValue(value)}>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Search Type" />
|
||||
@ -197,7 +214,6 @@ const ListToolbar = () => {
|
||||
<Button className="h-7.5" onClick={handleFilterData}>
|
||||
Filter
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex gap-2">
|
||||
@ -209,7 +225,8 @@ const ListToolbar = () => {
|
||||
typeSearchValue || '',
|
||||
searchValue || '',
|
||||
trxDate || {},
|
||||
typeValue || ''
|
||||
typeValue || '',
|
||||
status || ''
|
||||
);
|
||||
|
||||
if (result) {
|
||||
@ -236,6 +253,7 @@ const ListToolbar = () => {
|
||||
setSearchValue('');
|
||||
setSearchTypeValue('');
|
||||
setTypeValue('');
|
||||
setStatus('');
|
||||
settrxDate({ from: formatDate(today), to: formatDate(today) });
|
||||
table.setColumnFilters([]);
|
||||
table.setPageIndex(0);
|
||||
|
||||
@ -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;
|
||||
@ -46,6 +47,7 @@ const ManageTransactionContext = createContext<ContextProps>(initialProps);
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
|
||||
const [showDetailDialog, setShowDetailDialog] = useState(false);
|
||||
const [showRollbackDialog, setShowRollbackDialog] = useState(false);
|
||||
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
|
||||
@ -57,6 +59,18 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
};
|
||||
|
||||
|
||||
const handleShowDetail = (transactionId: any) => {
|
||||
setIsLoadingDetail(true);
|
||||
setSelectedTransactionId(transactionId);
|
||||
|
||||
// Simulasi loading (bisa ganti dengan fetch detail data jika perlu)
|
||||
setTimeout(() => {
|
||||
setShowDetailDialog(true);
|
||||
setIsLoadingDetail(false);
|
||||
}, 1000); // 500ms loading
|
||||
};
|
||||
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
@ -260,18 +274,17 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
enableHiding: false,
|
||||
cell: (data) => {
|
||||
const row = data.row.original;
|
||||
const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
|
||||
// const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
|
||||
return (
|
||||
<div key={`actions-${row.id}`}>
|
||||
<div className="relative inline-block">
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => {
|
||||
setSelectedTransactionId(row.id);
|
||||
setShowDetailDialog(true);
|
||||
}}
|
||||
className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
|
||||
onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
|
||||
>
|
||||
<KeenIcon icon="eye" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
@ -299,24 +312,16 @@ 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`
|
||||
}
|
||||
};
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
let status = '';
|
||||
let searchType = '';
|
||||
let codeValue = '';
|
||||
|
||||
// Ambil code dan searchtype dulu
|
||||
if (Array.isArray(filter)) {
|
||||
// Ambil semua value dari filter terlebih dahulu
|
||||
filter.forEach((f: any) => {
|
||||
if (f.id === 'code' && f.value) {
|
||||
codeValue = f.value;
|
||||
@ -329,18 +334,45 @@ 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;
|
||||
}
|
||||
|
||||
if (f.id === 'kind' && f.value) {
|
||||
type = f.value;
|
||||
}
|
||||
|
||||
if (f.id === 'status' && f.value) {
|
||||
status = f.value;
|
||||
}
|
||||
});
|
||||
|
||||
// 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 = {};
|
||||
|
||||
if( status) {
|
||||
formattedFilter["Transactions.status"] = status;
|
||||
}
|
||||
|
||||
// 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`
|
||||
};
|
||||
}
|
||||
|
||||
if (f.id === 'kind' && f.value) {
|
||||
type = f.value;
|
||||
}
|
||||
});
|
||||
|
||||
// Terapkan berdasarkan searchtype + code
|
||||
// Tambahkan filter berdasarkan searchType
|
||||
if (searchType && codeValue) {
|
||||
if (searchType === "msisdn") {
|
||||
formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
|
||||
@ -350,9 +382,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tambahkan filter jenis transaksi jika ada
|
||||
if (type) {
|
||||
formattedFilter["Transactions.kind"] = type;
|
||||
}
|
||||
@ -373,6 +404,9 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
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);
|
||||
@ -381,6 +415,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<ManageTransactionContext.Provider
|
||||
value={{
|
||||
@ -395,6 +430,32 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
|
||||
{isLoadingDetail && (
|
||||
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-40">
|
||||
<svg
|
||||
className="w-8 h-8 animate-spin text-white mb-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="text-white text-lg font-medium">Loading data...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<DataGridProvider
|
||||
columns={columns}
|
||||
|
||||
@ -10,12 +10,12 @@ import { toast } from 'sonner';
|
||||
|
||||
const WithdrawInput = () => {
|
||||
const initialForm: {
|
||||
msisdn: string;
|
||||
id_customer: string;
|
||||
amount: string;
|
||||
pin: string;
|
||||
purpose: string;
|
||||
} = {
|
||||
msisdn: '',
|
||||
id_customer: '',
|
||||
amount: '',
|
||||
pin: '',
|
||||
purpose: ''
|
||||
@ -74,7 +74,7 @@ const WithdrawInput = () => {
|
||||
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
|
||||
setCustomerMsisdn(
|
||||
response?.data.list.map((item: any) => ({
|
||||
value: item.msisdn,
|
||||
value: item.id,
|
||||
label: `${item.msisdn} - ${item.fullname}`
|
||||
}))
|
||||
);
|
||||
@ -91,12 +91,12 @@ const WithdrawInput = () => {
|
||||
|
||||
try {
|
||||
let response = await PostData(`${API_URL}/transaction/transfer`, {
|
||||
msisdn_destination: form.msisdn,
|
||||
msisdn_destination: '1112007',
|
||||
amount: form.amount,
|
||||
pin: form.pin,
|
||||
purpose: form.purpose,
|
||||
id_transaction_type: '380f270b-1f44-406f-a196-d6f784d68eb4',
|
||||
id_origin_customer: getAuth()?.user.customer.id,
|
||||
id_origin_customer: form.id_customer,
|
||||
type: 'S'
|
||||
});
|
||||
if (response?.status == true) {
|
||||
@ -119,7 +119,7 @@ const WithdrawInput = () => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (form.amount == '' || form.msisdn == '' || form.pin == '') {
|
||||
if (form.amount == '' || form.id_customer == '' || form.pin == '') {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Please fill in all required fields.'
|
||||
@ -144,10 +144,10 @@ const WithdrawInput = () => {
|
||||
return () => clearTimeout(timer);
|
||||
};
|
||||
|
||||
const handleMsisdnSelect = (msisdn: string) => {
|
||||
setForm({ ...form, msisdn });
|
||||
const handleMsisdnSelect = (item: { value: string; label: string }) => {
|
||||
setForm({ ...form, id_customer: item.value });
|
||||
setDropdownOpen(false);
|
||||
setSearchTerm(msisdn);
|
||||
setSearchTerm(item.label);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -200,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>
|
||||
|
||||
@ -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 />} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user