export data transaction
This commit is contained in:
wayanrivan
@ -10,35 +10,33 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { getAuth } from '@/auth';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
||||
const [searchValue, setSearchValue] = useState<string>();
|
||||
|
||||
// const [statusValue, setStatusValue] = useState<string>(
|
||||
// (table.getColumn('status')?.getFilterValue() as string) ?? ''
|
||||
// );
|
||||
|
||||
const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
|
||||
const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
|
||||
const [typeValue, setTypeValue] = useState<string>(
|
||||
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
|
||||
);
|
||||
|
||||
const [typeSearchValue, setSearchTypeValue] = useState<string>();
|
||||
const { GetData } = useCallApi();
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const formatDate = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// table.getColumn('status')?.setFilterValue(statusValue);
|
||||
// table.setPageIndex(0);
|
||||
// }, 200);
|
||||
// return () => clearTimeout(timer);
|
||||
// }, [statusValue, table]);
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
settrxDate({
|
||||
from: formatDate(today),
|
||||
to: formatDate(today),
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
@ -51,10 +49,8 @@ const ListToolbar = () => {
|
||||
return () => clearTimeout(timer);
|
||||
}, [typeValue, table]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
// Add search type filter to column filters
|
||||
table.setColumnFilters((prev) => [
|
||||
...prev.filter((f) => f.id !== 'searchtype'),
|
||||
{ id: 'searchtype', value: typeSearchValue },
|
||||
@ -64,26 +60,14 @@ const ListToolbar = () => {
|
||||
return () => clearTimeout(timer);
|
||||
}, [typeSearchValue, table]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('code')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
// const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
settrxDate({
|
||||
from: formatDate(today),
|
||||
to: formatDate(today),
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleFilterData = useCallback(() => {
|
||||
try {
|
||||
table.getColumn('transaction_date')?.setFilterValue(trxDate);
|
||||
@ -99,6 +83,58 @@ const ListToolbar = () => {
|
||||
}
|
||||
}, [trxDate]);
|
||||
|
||||
const exporDataToExcel = async (
|
||||
typeSearchValue: string,
|
||||
searchValue: string,
|
||||
trxDate: any,
|
||||
typeValue: string
|
||||
) => {
|
||||
try {
|
||||
const formattedFilter: any = {
|
||||
"Transactions.transaction_date": {
|
||||
from: `${trxDate.from} 00:00:00`,
|
||||
to: `${trxDate.to} 23:59:59`
|
||||
}
|
||||
};
|
||||
|
||||
if (typeSearchValue === 'msisdn') {
|
||||
formattedFilter['origin_customer.msisdn'] = searchValue;
|
||||
} else if (typeSearchValue === 'fullname') {
|
||||
formattedFilter['origin_customer.fullname'] = searchValue;
|
||||
} else if (typeSearchValue === 'trxid') {
|
||||
formattedFilter['Transactions.code'] = searchValue;
|
||||
}
|
||||
|
||||
if (typeValue) {
|
||||
formattedFilter["Transactions.kind"] = typeValue;
|
||||
}
|
||||
|
||||
const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
|
||||
|
||||
const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch file');
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const contentDisposition = response.headers.get('content-disposition');
|
||||
const filenameMatch = contentDisposition?.match(/filename="?(.+)"?/);
|
||||
const filename = filenameMatch ? filenameMatch[1] : 'transaction_history.xlsx';
|
||||
|
||||
return { blob, filename };
|
||||
} catch (error) {
|
||||
console.error('Error exporting data:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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 justify-between items-center">
|
||||
@ -107,7 +143,6 @@ const ListToolbar = () => {
|
||||
From
|
||||
<input
|
||||
type="date"
|
||||
placeholder="From"
|
||||
value={trxDate.from}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, from: event.target.value })
|
||||
@ -120,7 +155,6 @@ const ListToolbar = () => {
|
||||
To
|
||||
<input
|
||||
type="date"
|
||||
placeholder="To"
|
||||
value={trxDate.to}
|
||||
onChange={(event) =>
|
||||
settrxDate({ ...trxDate, to: event.target.value })
|
||||
@ -129,27 +163,9 @@ const ListToolbar = () => {
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* <Select
|
||||
value={statusValue}
|
||||
onValueChange={(value) => {
|
||||
setStatusValue(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="C">COMPLETE</SelectItem>
|
||||
<SelectItem value="F">FAILED</SelectItem>
|
||||
<SelectItem value="O">ON PROCESS</SelectItem>
|
||||
</SelectContent>
|
||||
</Select> */}
|
||||
|
||||
<Select
|
||||
value={typeValue}
|
||||
onValueChange={(value) => {
|
||||
setTypeValue(value);
|
||||
}}
|
||||
onValueChange={(value) => setTypeValue(value)}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Transaction Type" />
|
||||
@ -160,15 +176,13 @@ const ListToolbar = () => {
|
||||
<SelectItem value="W">WITHDRAW</SelectItem>
|
||||
<SelectItem value="U">TOP UP</SelectItem>
|
||||
<SelectItem value="R">RETURN</SelectItem>
|
||||
<SelectItem value='N'>TOP UP PARTNER</SelectItem>
|
||||
<SelectItem value="N">TOP UP PARTNER</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={typeSearchValue}
|
||||
onValueChange={(value) => {
|
||||
setSearchTypeValue(value);
|
||||
}}
|
||||
onValueChange={(value) => setSearchTypeValue(value)}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Search Type" />
|
||||
@ -184,37 +198,59 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
|
||||
placeholder={`Search ${typeSearchValue || ''}`}
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto">
|
||||
<div className="ml-auto flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5"
|
||||
onClick={async () => {
|
||||
const result = await exporDataToExcel(
|
||||
typeSearchValue || '',
|
||||
searchValue || '',
|
||||
trxDate || {},
|
||||
typeValue || ''
|
||||
);
|
||||
|
||||
if (result) {
|
||||
const url = window.URL.createObjectURL(result.blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = result.filename;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} else {
|
||||
toast.error('Failed to export data');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Export Data
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5"
|
||||
onClick={() => {
|
||||
// Preserve trxDate values (from, to) and reset others
|
||||
const today = new Date();
|
||||
// const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
// Only reset filters excluding from and to
|
||||
setSearchValue('');
|
||||
setSearchTypeValue('');
|
||||
// setStatusValue('');
|
||||
setTypeValue('');
|
||||
settrxDate({
|
||||
from: formatDate(today),
|
||||
to: formatDate(today),
|
||||
});
|
||||
|
||||
// Reset other filters except for date range
|
||||
table.setColumnFilters([
|
||||
{ id: 'code', value: '' },
|
||||
// { id: 'status', value: '' },
|
||||
{ id: 'kind', value: '' },
|
||||
]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user