fix transferttype + wallet history

This commit is contained in:
bagusajisaputroo
2025-05-02 15:02:16 +07:00
parent c596f1b600
commit eb2a1b35b4
4 changed files with 56 additions and 67 deletions

View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { import {
Select, Select,
SelectContent, SelectContent,
@ -59,16 +59,12 @@ const EditDialog = () => {
if (response?.status) { if (response?.status) {
toast.success('Feedback reviewed successfully'); toast.success('Feedback reviewed successfully');
// Close the edit dialog
handleEditDialog(false, null); handleEditDialog(false, null);
// First close the detail dialog to reset its state
handleDetailDialog(false, null); handleDetailDialog(false, null);
// Refresh the main data grid first
refreshData(); refreshData();
// Wait a tiny bit then reopen the detail with refreshed data
setTimeout(() => { setTimeout(() => {
handleDetailDialog(true, selectedFeedback); handleDetailDialog(true, selectedFeedback);
}, 300); }, 300);
@ -97,7 +93,6 @@ const EditDialog = () => {
} }
const data = response.data; const data = response.data;
// console.log('Fetched data:', data);
setReviewNotes(data.review_notes || ''); setReviewNotes(data.review_notes || '');
@ -112,7 +107,11 @@ const EditDialog = () => {
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="p-0 w-full sm:max-w-2xl bg-white rounded-lg overflow-hidden"> <DialogContent className="p-0 w-full sm:max-w-2xl bg-white rounded-lg overflow-hidden [&>button]:hidden">
<DialogHeader>
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<div className="relative"> <div className="relative">
<div className="p-6 flex items-center justify-between border-b"> <div className="p-6 flex items-center justify-between border-b">
<div> <div>

View File

@ -46,8 +46,6 @@ const typeLabelMap: Record<string, string> = {
IC: 'Income Merchant' IC: 'Income Merchant'
}; };
// Import section remains the same...
const ListToolbar = () => { const ListToolbar = () => {
const { table, reload } = useDataGrid(); const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageTransferTypeContext(); const { handleAddDialog } = useManageTransferTypeContext();
@ -97,32 +95,25 @@ const ListToolbar = () => {
}, []); }, []);
const handleClearFilter = () => { const handleClearFilter = () => {
// Reset state variables
setSearchValue(''); setSearchValue('');
setStatusTypes(''); setStatusTypes('');
setApproval(''); setApproval('');
// Clear all column filters
table.getColumn('name')?.setFilterValue(''); table.getColumn('name')?.setFilterValue('');
table.getColumn('type')?.setFilterValue(''); table.getColumn('type')?.setFilterValue('');
table.getColumn('status_approval')?.setFilterValue(''); table.getColumn('status_approval')?.setFilterValue('');
// Force reset the Select components by using setTimeout
// This ensures the state updates are processed before resetting the UI
setTimeout(() => { setTimeout(() => {
// Reset to first page
table.setPageIndex(0); table.setPageIndex(0);
// Reload the data
reload(); reload();
}, 0); }, 0);
}; };
return ( return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5"> <div className="card-header flex-wrap border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full"> <div className="flex flex-wrap gap-1 w-full">
{/* Top bar */}
<div className="flex justify-between w-full items-center mb-3"> <div className="flex justify-between w-full items-center mb-3">
<div className="flex w-[34%] gap-2 items-center"> <div className="flex w-[34%] gap-1 items-center">
<label className="input input-sm w-full text-sm"> <label className="input input-sm w-full text-sm">
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
<input <input
@ -153,9 +144,7 @@ const ListToolbar = () => {
</div> </div>
</div> </div>
{/* Filter bar */}
<div className="flex flex-wrap gap-2 w-full"> <div className="flex flex-wrap gap-2 w-full">
{/* Type Filter */}
<div className="min-w-[220px]"> <div className="min-w-[220px]">
<Select <Select
key={`type-filter-${statusTypes}`} key={`type-filter-${statusTypes}`}
@ -175,7 +164,6 @@ const ListToolbar = () => {
</Select> </Select>
</div> </div>
{/* Approval Filter */}
<div className="min-w-[220px]"> <div className="min-w-[220px]">
<Select <Select
key={`approval-filter-${approval}`} key={`approval-filter-${approval}`}

View File

@ -325,7 +325,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
order_direction: orderDirection, order_direction: orderDirection,
filter: JSON.stringify(filterObject) filter: JSON.stringify(filterObject)
}); });
console.log(response); // console.log(response);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
}; };

View File

@ -19,6 +19,13 @@ interface WalletProps {
name: string; name: string;
} }
const getOneMonthsAgo = () => {
const today = new Date();
return new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
};
const formatDate = (date: Date): string => date.toISOString().split('T')[0];
const ListToolbar = () => { const ListToolbar = () => {
const { table, reload } = useDataGrid(); const { table, reload } = useDataGrid();
const { GetData } = useCallApi(); const { GetData } = useCallApi();
@ -32,12 +39,10 @@ const ListToolbar = () => {
); );
const [wallets, setWallets] = useState<WalletProps[]>([]); const [wallets, setWallets] = useState<WalletProps[]>([]);
const formatDate = (date: Date): string => date.toISOString().split('T')[0];
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const threeMonthsAgo = getOneMonthsAgo();
setDateRange({ from: formatDate(firstDayOfMonth), to: formatDate(today) }); setDateRange({ from: formatDate(threeMonthsAgo), to: formatDate(today) });
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -45,7 +50,6 @@ const ListToolbar = () => {
table.getColumn('msisdn')?.setFilterValue(searchValue); table.getColumn('msisdn')?.setFilterValue(searchValue);
table.setPageIndex(0); table.setPageIndex(0);
}, 200); }, 200);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [searchValue, table]); }, [searchValue, table]);
@ -89,35 +93,49 @@ const ListToolbar = () => {
}, []); }, []);
const handleClearAllFilters = () => { const handleClearAllFilters = () => {
const today = new Date();
const threeMonthsAgo = getOneMonthsAgo();
const resetDateRange = {
from: formatDate(threeMonthsAgo),
to: formatDate(today)
};
setSearchValue(''); setSearchValue('');
setWalletId(''); setWalletId('');
setDateRange(resetDateRange);
const today = new Date(); // table.getAllColumns().forEach((column) => {
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); // if (column.id !== 'CreatedAt') {
setDateRange({ // column.setFilterValue(undefined);
from: formatDate(firstDayOfMonth), // }
to: formatDate(today) // });
});
table.getAllColumns().forEach((column) => {
if (column.id !== 'CreatedAt') {
column.setFilterValue(undefined);
}
});
table.getColumn('CreatedAt')?.setFilterValue(resetDateRange);
table.setPageIndex(0); table.setPageIndex(0);
};
table.getColumn('CreatedAt')?.setFilterValue({ const handleRefresh = () => {
from: formatDate(firstDayOfMonth), const today = new Date();
const threeMonthsAgo = getOneMonthsAgo();
const resetDateRange = {
from: formatDate(threeMonthsAgo),
to: formatDate(today) to: formatDate(today)
}); };
setSearchValue('');
setWalletId('');
setDateRange(resetDateRange);
table.setColumnFilters([{ id: 'CreatedAt', value: resetDateRange }]);
table.setPageIndex(0);
reload();
}; };
return ( return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5"> <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 flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center"> <div className="flex justify-between w-full items-center">
<div className="flex gap-3 items-center flex-wrap"> <div className="flex flex-wrap items-end gap-3 w-full">
<label className="input input-sm w-[160px]"> <label className="input input-sm w-[160px]">
From From
<input <input
@ -146,14 +164,9 @@ const ListToolbar = () => {
/> />
</label> </label>
<div className="w-[220px]"> <div className="w-[160px]">
<Select <Select value={walletId} onValueChange={(value) => setWalletId(value)}>
value={walletId} <SelectTrigger className="h-[32px]">
onValueChange={(value) => {
setWalletId(value);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select Wallet" /> <SelectValue placeholder="Select Wallet" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -165,25 +178,14 @@ const ListToolbar = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<Button variant="outline" size="sm" onClick={handleClearAllFilters}>
Clear Filter
</Button>
</div> </div>
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<Button variant="outline" size="sm" onClick={handleClearAllFilters}>
Clear
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}> <DefaultTooltip title={'Refresh'} placement={'top'}>
<Button <Button variant="outline" className="h-7.5" onClick={handleRefresh}>
variant="outline"
className="h-7.5"
onClick={() => {
setSearchValue('');
setWalletId('');
table.setColumnFilters((prev) => prev.filter((f) => f.id === 'CreatedAt'));
table.setPageIndex(0);
reload();
}}
>
<KeenIcon icon="arrows-circle" /> <KeenIcon icon="arrows-circle" />
</Button> </Button>
</DefaultTooltip> </DefaultTooltip>