This commit is contained in:
wayanrivan
2025-05-21 16:43:00 +07:00
4 changed files with 48 additions and 42 deletions

View File

@ -23,7 +23,7 @@ const HistoryTransactionDisbursement = () => {
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">History Disbursement</span> <span className="text-sm">Disbursement</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5"> <div className="grid gap-5 lg:gap-7.5">

View File

@ -285,7 +285,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'execution_date', desc: false }]} sorting={[{ id: 'execution_date', desc: true }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getTransactionLists(pageIndex, pageSize, sorting, columnFilters) getTransactionLists(pageIndex, pageSize, sorting, columnFilters)

View File

@ -29,25 +29,26 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
const [typeSearchValue, setSearchTypeValue] = useState<string>(); const [typeSearchValue, setSearchTypeValue] = useState<string>();
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchValue(e.target.value) e.preventDefault()
// setSearchValue(e.target.value)
if (typeSearchValue === 'username') { if (typeSearchValue === 'username') {
table.getColumn('username')?.setFilterValue(e.target.value); table.getColumn('username')?.setFilterValue(searchValue);
table.getColumn('msisdn')?.setFilterValue(''); table.getColumn('msisdn')?.setFilterValue('');
} }
if (typeSearchValue === 'msisdn') { if (typeSearchValue === 'msisdn') {
table.getColumn('msisdn')?.setFilterValue(e.target.value); table.getColumn('msisdn')?.setFilterValue(searchValue);
table.getColumn('username')?.setFilterValue(''); table.getColumn('username')?.setFilterValue('');
} }
if (groupFilter) table.getColumn('group_name')?.setFilterValue(groupFilter); table.getColumn('group_name')?.setFilterValue(groupFilter);
}; };
const handleGroupChange = (e: any) => { const handleGroupChange = (e: any) => {
let value = e.target.value; let value = e.target.value;
if (value === '__all__') value = ''; if (value === '__all__') value = '';
setGroupFilter(value); setGroupFilter(value);
if (typeSearchValue === 'username') table.getColumn('username')?.setFilterValue(searchValue); // if (typeSearchValue === 'username') table.getColumn('username')?.setFilterValue(searchValue);
if (typeSearchValue === 'msisdn') table.getColumn('msisdn')?.setFilterValue(searchValue); // if (typeSearchValue === 'msisdn') table.getColumn('msisdn')?.setFilterValue(searchValue);
table.getColumn('group_name')?.setFilterValue(value); // table.getColumn('group_name')?.setFilterValue(value);
}; };
const generateExportFilters = (groupFilter: string, typeSearchValue: any, searchValue: any): { id: string; value: string }[] => { const generateExportFilters = (groupFilter: string, typeSearchValue: any, searchValue: any): { id: string; value: string }[] => {
@ -83,43 +84,48 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
<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">
<Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}> <form onSubmit={(e:any) => handleSearch(e)}>
<SelectTrigger className="input input-sm w-[250px] h-[31px]"> <div className="flex gap-3 items-center">
<SelectValue placeholder="Select Group" /> <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
</SelectTrigger> <SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectContent> <SelectValue placeholder="Select Group" />
<SelectItem value={"__all__"}>All Group</SelectItem> </SelectTrigger>
{groups.map((el: any, idx: any) => ( <SelectContent>
<SelectItem key={idx} value={el.name}> <SelectItem value={"__all__"}>All Group</SelectItem>
{el.name} {groups.map((el: any, idx: any) => (
</SelectItem> <SelectItem key={idx} value={el.name}>
))} {el.name}
</SelectContent> </SelectItem>
</Select> ))}
</SelectContent>
</Select>
<Select value={typeSearchValue} onValueChange={(value) => {setSearchTypeValue(value)}}> <Select value={typeSearchValue} onValueChange={(value) => {setSearchTypeValue(value)}}>
<SelectTrigger className="input input-sm w-[250px] h-[31px]"> <SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Search Type" /> <SelectValue placeholder="Select Search Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="username">Username</SelectItem> <SelectItem value="username">Username</SelectItem>
<SelectItem value="msisdn">Phone Number</SelectItem> <SelectItem value="msisdn">Phone Number</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<label className="input input-sm w-1/3"> <label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" /> {/* <KeenIcon icon="magnifier" /> */}
<input <input
type="text" type="text"
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
value={searchValue} value={searchValue}
onChange={(e:any) => handleSearch(e)} onChange={(e:any) => setSearchValue(e.target.value)}
/> />
</label> </label>
<Button variant="outline" className="h-7.5">
<KeenIcon icon="magnifier" />
</Button>
</div>
</form>
</div>
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<Button <Button
variant="outline" variant="outline"