fix transferttype + wallet history
This commit is contained in:
@ -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>
|
||||||
|
|||||||
@ -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}`}
|
||||||
|
|||||||
@ -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 };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user