Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
unknown
@ -19,6 +19,16 @@ const HeaderLogo = () => {
|
||||
const { pathname } = useLocation();
|
||||
const { isRTL } = useLanguage();
|
||||
const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[0]);
|
||||
const [isSticky, setIsSticky] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsSticky(window.scrollY > 100);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
MENU_ROOT.forEach((item) => {
|
||||
@ -55,7 +65,9 @@ const HeaderLogo = () => {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center">
|
||||
<h3 className="text-gray-50 text-xl hidden md:block">TPAY Dashboard Portal</h3>
|
||||
<h3 className={`text-xl hidden md:block ${isSticky ? 'text-black' : 'text-gray-50'}`}>
|
||||
TPAY Dashboard Portal
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
export type Group = {
|
||||
@ -8,7 +9,7 @@ export type Group = {
|
||||
description: string;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Group>[] = [
|
||||
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
|
||||
{
|
||||
accessorKey: 'no',
|
||||
header: 'ID'
|
||||
@ -30,8 +31,19 @@ export const columns: ColumnDef<Group>[] = [
|
||||
accessorKey: 'description',
|
||||
header: 'Description'
|
||||
},
|
||||
// {
|
||||
// id: 'actions',
|
||||
// header: 'Actions'
|
||||
// }
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
const dataMembers = row.original;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleUpdate(dataMembers)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
49
src/pages/groups/ListToolbar.tsx
Normal file
49
src/pages/groups/ListToolbar.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
|
||||
Add Data
|
||||
</Button>
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ListToolBar };
|
||||
@ -1,5 +1,5 @@
|
||||
import { DataTable } from '@/components/ui/DataTable';
|
||||
import { columns, Group } from './Column';
|
||||
import { getColumns, Group } from './Column';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import { Helmet } from 'react-helmet';
|
||||
@ -24,6 +24,8 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { toast } from 'sonner';
|
||||
import { Container, DataGridProvider } from '@/components';
|
||||
import { ListToolBar } from './ListToolbar';
|
||||
// import { DialogHeader } from '@/components/ui/dialog';
|
||||
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
const BASE_URL = apiConfig.service_customer;
|
||||
@ -66,7 +68,7 @@ const ManageGroups = () => {
|
||||
let resGroups = groups.data.data.list.map((el: any) => {
|
||||
el.no = temp++;
|
||||
return el;
|
||||
});
|
||||
})
|
||||
setDataGroup(resGroups);
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
@ -89,9 +91,9 @@ const ManageGroups = () => {
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formData.groupName) return toast.warning(`Group name can not be empty!`)
|
||||
if (!formData.status) return toast.warning(`Status can not be empty!`)
|
||||
if (!formData.description) return toast.warning(`Description can not be empty!`)
|
||||
if (!formData.groupName) return toast.warning(`Group name can not be empty!`);
|
||||
if (!formData.status) return toast.warning(`Status can not be empty!`);
|
||||
if (!formData.description) return toast.warning(`Description can not be empty!`);
|
||||
setIsDialogOpen(false);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
@ -134,7 +136,7 @@ const ManageGroups = () => {
|
||||
description: formData.description,
|
||||
created_at: new Date()
|
||||
});
|
||||
toast.success(`Success create group`)
|
||||
toast.success(`Success create group`);
|
||||
} else if (dialogType === 'update') {
|
||||
await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
|
||||
name: formData.groupName,
|
||||
@ -142,14 +144,14 @@ const ManageGroups = () => {
|
||||
description: formData.description,
|
||||
updated_at: new Date()
|
||||
});
|
||||
toast.success(`Success update group`)
|
||||
toast.success(`Success update group`);
|
||||
} else if (dialogType === 'delete') {
|
||||
await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
|
||||
toast.success(`Success delete group`)
|
||||
toast.success(`Success delete group`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
toast.error(error.message)
|
||||
toast.error(error.message);
|
||||
} finally {
|
||||
await fetchGroups();
|
||||
setDialogOpen(false);
|
||||
@ -162,19 +164,19 @@ const ManageGroups = () => {
|
||||
<Helmet>
|
||||
<title>TPAY | Manage Group</title>
|
||||
</Helmet>
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={
|
||||
`Are you sure you want to ` +
|
||||
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
|
||||
}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
|
||||
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
|
||||
<Container>
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={
|
||||
`Are you sure you want to ` +
|
||||
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
|
||||
}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Groups</h1>
|
||||
<Breadcrumbs>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
@ -188,84 +190,101 @@ const ManageGroups = () => {
|
||||
<span className="text-sm">Manage Groups</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<DataTable
|
||||
{/* <div className="w-full overflow-x-auto px-4"> */}
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5">
|
||||
{/* <DataTable
|
||||
data={dataGroup}
|
||||
columns={columns}
|
||||
createData={createGroup}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={null}
|
||||
/>
|
||||
</div>
|
||||
/> */}
|
||||
<DataGridProvider
|
||||
data={dataGroup}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 25 }}
|
||||
toolbar={<ListToolBar createGroup={createGroup} />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'created_at', desc: 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">
|
||||
<div className="flex justify-between">
|
||||
<DialogTitle>{dialogType==='create'?"Create New Group":"Update Group"}</DialogTitle>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ borderColor: 'white', color: 'grey' }}
|
||||
onClick={closeDialog}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Button>
|
||||
</Box>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="p-5 mt-5">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Group Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="groupName"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.groupName}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Active Status:
|
||||
</label>
|
||||
<FormControl>
|
||||
<RadioGroup name="status" row value={formData.status} onChange={handleChange}>
|
||||
<FormControlLabel
|
||||
value="Y"
|
||||
checked={formData.status === 'Y'}
|
||||
control={<Radio />}
|
||||
label="Yes"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="N"
|
||||
checked={formData.status === 'N'}
|
||||
control={<Radio />}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Description:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={isDialogOpen} onClose={closeDialog}>
|
||||
<DialogContent className="w-full">
|
||||
<div className="flex justify-between">
|
||||
<DialogTitle>
|
||||
{dialogType === 'create' ? 'Create New Group' : 'Update Group'}
|
||||
</DialogTitle>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ borderColor: 'white', color: 'grey' }}
|
||||
onClick={closeDialog}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Button>
|
||||
</Box>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="p-5 mt-5">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Group Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="groupName"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.groupName}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Active Status:
|
||||
</label>
|
||||
<FormControl>
|
||||
<RadioGroup name="status" row value={formData.status} onChange={handleChange}>
|
||||
<FormControlLabel
|
||||
value="Y"
|
||||
checked={formData.status === 'Y'}
|
||||
control={<Radio />}
|
||||
label="Yes"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="N"
|
||||
checked={formData.status === 'N'}
|
||||
control={<Radio />}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Description:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -27,8 +27,8 @@ import {
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
|
||||
interface SucosProps {
|
||||
sucos_id: number;
|
||||
sucos_name: string;
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
@ -40,6 +40,7 @@ const EditDialog = () => {
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [sucos, setSucos] = useState<SucosProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -96,8 +97,8 @@ const EditDialog = () => {
|
||||
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
|
||||
});
|
||||
|
||||
// console.log('SUCOS', response?.data);
|
||||
setSucos(response?.data.list);
|
||||
console.log(sucos);
|
||||
} catch (error) {
|
||||
console.error('Error fetching Sucos', error);
|
||||
setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
|
||||
@ -105,6 +106,7 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
|
||||
|
||||
if (response?.status) {
|
||||
@ -120,6 +122,7 @@ const EditDialog = () => {
|
||||
sucosId: 0
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -176,72 +179,87 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Aldeia Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Sucos ID<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
|
||||
'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Sucos..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Sucos found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.sucos_id}
|
||||
value={suco.sucos_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
sucosId: suco.sucos_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.sucos_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Aldeia Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Aldeia Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Sucos ID<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{sucos.find((suco) => suco.id === formField.sucosId)
|
||||
?.name || 'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Sucos..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Sucos found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.id}
|
||||
value={suco.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
sucosId: suco.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,23 +1,47 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Aldeia"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
|
||||
@ -122,7 +122,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@ const EditDialog = () => {
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -74,8 +75,8 @@ const EditDialog = () => {
|
||||
const doUpdateConversion = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if(!showEditDialog) return;
|
||||
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{
|
||||
if (!showEditDialog) return;
|
||||
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
|
||||
...formField
|
||||
});
|
||||
|
||||
@ -83,24 +84,24 @@ const EditDialog = () => {
|
||||
resetForm();
|
||||
handleEditDialog(false, null);
|
||||
toast.success('Success Update Conversion');
|
||||
const createActivity = {
|
||||
module: 'Manage Conversion',
|
||||
description: `Update Conversion => ${selectedConversion}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
const createActivity = {
|
||||
module: 'Manage Conversion',
|
||||
description: `Update Conversion => ${selectedConversion}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
reload();
|
||||
} else {
|
||||
toast.error('Error Create Conversion');
|
||||
setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' });
|
||||
}
|
||||
}
|
||||
},
|
||||
[formField]
|
||||
);
|
||||
|
||||
const doGetCurrency = async (sorting: any) => {
|
||||
if (!showEditDialog)return;
|
||||
if (!showEditDialog) return;
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
const response = await GetData(`${API_URL}/dashboard/currency/`, {
|
||||
@ -117,30 +118,29 @@ const EditDialog = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const doGetConversionById = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
|
||||
console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
status: response.data.status,
|
||||
id_currency_origin: response.data.id_currency_origin,
|
||||
id_currency_destination: response.data.id_currency_destination,
|
||||
buy: response.data.buy,
|
||||
sell: response.data.sell,
|
||||
}));
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedConversion) {
|
||||
doGetConversionById(selectedConversion);
|
||||
}
|
||||
}, [selectedConversion]);
|
||||
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
|
||||
console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
status: response.data.status,
|
||||
id_currency_origin: response.data.id_currency_origin,
|
||||
id_currency_destination: response.data.id_currency_destination,
|
||||
buy: response.data.buy,
|
||||
sell: response.data.sell
|
||||
}));
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedConversion) {
|
||||
doFetchData(selectedConversion);
|
||||
}
|
||||
}, [selectedConversion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showEditDialog) {
|
||||
@ -156,8 +156,7 @@ const EditDialog = () => {
|
||||
if (showEditDialog) {
|
||||
doGetCurrency([{ id: 'name', desc: false }]);
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
|
||||
}, [showEditDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showEditDialog === false) {
|
||||
@ -166,7 +165,7 @@ const EditDialog = () => {
|
||||
}, [showEditDialog]);
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open,null)}>
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Conversion - Update</DialogTitle>
|
||||
@ -180,96 +179,110 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={doUpdateConversion}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_origin}
|
||||
onValueChange={(id_currency_origin) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_origin }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_destination}
|
||||
onValueChange={(id_currency_destination) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_destination }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Buy<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.buy}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
buy: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Buy"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Sell
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.sell}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
sell: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Sell"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<p className="mt-4 text-gray-500">Loading Conversion Details...</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={doUpdateConversion}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_origin}
|
||||
onValueChange={(id_currency_origin) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_origin }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_destination}
|
||||
onValueChange={(id_currency_destination) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_destination }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Buy<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.buy}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
buy: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Buy"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Sell
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.sell}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
sell: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Sell"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
@ -287,16 +300,16 @@ const EditDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -49,6 +49,7 @@ const EditDialog = () => {
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -98,7 +99,8 @@ const EditDialog = () => {
|
||||
[formField]
|
||||
);
|
||||
|
||||
const doGetCurrencyById = useCallback(async (id: string) => {
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
|
||||
// console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
@ -110,12 +112,13 @@ const EditDialog = () => {
|
||||
prefix: response.data.prefix
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCurrency) {
|
||||
doGetCurrencyById(selectedCurrency);
|
||||
doFetchData(selectedCurrency);
|
||||
}
|
||||
}, [selectedCurrency]);
|
||||
|
||||
@ -150,74 +153,93 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={doUpdateCurrency}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Code
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Prefix
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.prefix}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Currency Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={doUpdateCurrency}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Code
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Prefix
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.prefix}
|
||||
onChange={(e) =>
|
||||
setFormField((prev) => ({ ...prev, prefix: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, status: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext';
|
||||
import AddDialog from './blocks/AddDialog';
|
||||
import SearchDialog from './blocks/SearchDialog';
|
||||
import EditDialog from './blocks/EditDialog';
|
||||
import DeleteDialog from './blocks/DeleteDialog';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
@ -35,7 +34,6 @@ const Municipios = () => {
|
||||
<AddDialog />
|
||||
<EditDialog />
|
||||
<DeleteDialog />
|
||||
<SearchDialog />
|
||||
</Container>
|
||||
</ManageMunicipiosProvider>
|
||||
</>
|
||||
|
||||
@ -26,6 +26,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -75,6 +76,7 @@ const EditDialog = () => {
|
||||
);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
|
||||
|
||||
if (response?.status) {
|
||||
@ -88,6 +90,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -141,27 +144,42 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2.5">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Municipio Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2.5">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const ListToolbar = () => {
|
||||
@ -9,15 +9,18 @@ const ListToolbar = () => {
|
||||
const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
|
||||
const [searchName, setSearchName] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleFilterData = useCallback(() => {
|
||||
try {
|
||||
table.getColumn('name')?.setFilterValue(searchName);
|
||||
} catch (error) {
|
||||
toast.error('Error applying filter');
|
||||
console.error('Error applying filter:', error);
|
||||
}
|
||||
}, [searchName, table]);
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -28,9 +31,9 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Municipio"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
|
||||
interface PostoAdmsProps {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const SearchDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const { showSearchDialog, handleSearchDialog, municipios } = useManageMunicipiosContext();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
id: 0,
|
||||
name: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
|
||||
const [isFound, setIsFound] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const id = Number(formField.id);
|
||||
|
||||
if (formField.id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill name field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/municipios/postoadms/${id}`);
|
||||
|
||||
if (response.data.status) {
|
||||
setPostoadms(response.data.data);
|
||||
setIsFound(true);
|
||||
// console.log('Found postoadms: ', response.data.data);
|
||||
} else {
|
||||
setPostoadms([]);
|
||||
setIsFound(false);
|
||||
setAlert({ show: true, message: 'No postoadms found.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching postoadms', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
setIsFound(false);
|
||||
setPostoadms([]);
|
||||
};
|
||||
// console.log(municipios);
|
||||
return (
|
||||
<Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
|
||||
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<DialogHeader className="p-2 border-0">
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">
|
||||
Search Postoadms
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
||||
onClick={() => {
|
||||
handleSearchDialog(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<div className="flex flex-col px-0">
|
||||
{alert.show && (
|
||||
<Alert variant="danger" className="mb-5">
|
||||
{alert.message}
|
||||
</Alert>
|
||||
)}
|
||||
<form action="" onSubmit={handleSubmit}>
|
||||
<div className="card-body grid-cols-6 gap-5 p-0">
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={formField.id.toString()}
|
||||
onValueChange={(target) => {
|
||||
const selectedMunicipio = municipios.find((m) => m.id.toString() === target);
|
||||
if (selectedMunicipio) {
|
||||
setFormField({
|
||||
...formField,
|
||||
id: selectedMunicipio.id,
|
||||
name: selectedMunicipio.name
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="col-span-6">
|
||||
<SelectValue placeholder="Select Municipios" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{municipios.map((municipio) => (
|
||||
<SelectItem key={municipio.id} value={municipio.id.toString()}>
|
||||
{municipio.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{isFound && postoadms.length > 0 && (
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<h2 className="text-md font-semibold">Postu Administravo: </h2>
|
||||
<br />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm form-hint">
|
||||
{postoadms.map((posto) => posto.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end pt-2.5 gap-5 col-span-6">
|
||||
<Button variant={'outline'} type="reset" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant={'default'} type="submit">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchDialog;
|
||||
@ -132,7 +132,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import AddDialog from './blocks/AddDialog';
|
||||
import DeleteDialog from './blocks/DeleteDialog';
|
||||
import EditDialog from './blocks/EditDialog';
|
||||
import SearchDialog from './blocks/SearchDialog';
|
||||
import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext';
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
@ -37,7 +36,6 @@ const PostoAdmsMaster = () => {
|
||||
<AddDialog />
|
||||
<EditDialog />
|
||||
<DeleteDialog />
|
||||
<SearchDialog />
|
||||
</Container>
|
||||
</ManagePostoAdmsContextProvider>
|
||||
</>
|
||||
|
||||
@ -41,6 +41,7 @@ const EditDialog = () => {
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
@ -112,6 +113,7 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
|
||||
|
||||
if (response?.status) {
|
||||
@ -126,6 +128,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -184,71 +187,86 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Postu Administrativo Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{municipios.find((municipio) => municipio.id === formField.municipio_id)
|
||||
?.name || 'Select Municipio'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Municipio..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Municipio found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{municipios.map((municipio) => (
|
||||
<CommandItem
|
||||
key={municipio.id}
|
||||
value={municipio.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
municipio_id: municipio.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{municipio.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Postu Administrativo Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Postu Administrativo Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{municipios.find((municipio) => municipio.id === formField.municipio_id)
|
||||
?.name || 'Select Municipio'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Municipio..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Municipio found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{municipios.map((municipio) => (
|
||||
<CommandItem
|
||||
key={municipio.id}
|
||||
value={municipio.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
municipio_id: municipio.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{municipio.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -2,43 +2,54 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Postu Administrativo"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
{/* <Button
|
||||
variant="outline"
|
||||
className="h-7.5 text-[0.8rem]"
|
||||
onClick={() => handleSearchDialog(true)}
|
||||
>
|
||||
Search Sucos
|
||||
</Button> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
|
||||
interface SucosProps {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const SearchDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const { showSearchDialog, handleSearchDialog, postoAdms } = useManagePostoAdmsContext();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
id: 0,
|
||||
name: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [sucos, setSucos] = useState<SucosProps[]>([]);
|
||||
const [isFound, setIsFound] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const id = Number(formField.id);
|
||||
|
||||
if (formField.id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill name field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`);
|
||||
|
||||
if (response.data.status) {
|
||||
setSucos(response.data.data);
|
||||
console.log(sucos);
|
||||
setIsFound(true);
|
||||
console.log('Found postoadms: ', response.data.data);
|
||||
} else {
|
||||
setSucos([]);
|
||||
setIsFound(false);
|
||||
setAlert({ show: true, message: 'No postoadms found.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching postoadms', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
setIsFound(false);
|
||||
setSucos([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
|
||||
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogHeader className="p-2 border-0">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">Search Sucos</h1>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
||||
onClick={() => {
|
||||
handleSearchDialog(false);
|
||||
handleReset();
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
|
||||
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
|
||||
|
||||
<div className="grid grid-cols-8 gap-1 w-full items-center">
|
||||
<label className="form-label flex items-center col-span-3">
|
||||
Postu Administrativo Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{formField.name || 'Select PostoAdms'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search PostoAdms..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No PostoAdms found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoAdms.map((postoAdm) => (
|
||||
<CommandItem
|
||||
key={postoAdm.PostoAdms_id}
|
||||
value={postoAdm.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
id: postoAdm.PostoAdms_id,
|
||||
name: postoAdm.PostoAdms_name
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{postoAdm.PostoAdms_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{isFound && sucos.length > 0 && (
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<h2 className="text-md font-semibold">Sucos: </h2>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm form-hint">
|
||||
{sucos.map((suco) => suco.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="reset" variant="outline" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="submit" variant="default">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchDialog;
|
||||
@ -97,7 +97,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.municipios_name,
|
||||
accessorFn: (row) => row.Municipios_name,
|
||||
id: 'municipios_name',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
|
||||
enableSorting: false,
|
||||
@ -131,7 +131,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
@ -139,17 +139,28 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
|
||||
[handleEditDialog, handleDeleteDialog]
|
||||
);
|
||||
|
||||
const getPostoAdmsLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
const getPostoAdmsLists = async (
|
||||
page: number,
|
||||
limit: number,
|
||||
sorting: any,
|
||||
filters: any[] = []
|
||||
) => {
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
|
||||
// filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
|
||||
|
||||
let filter = '';
|
||||
if (filters.length > 0 && filters[0].value) {
|
||||
filter = filters[0].value.toLowerCase();
|
||||
}
|
||||
|
||||
const response = await GetData(`${API_URL}/postoadms/list`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: sorting[0].id,
|
||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC',
|
||||
filter: JSON.stringify(filter)
|
||||
filter
|
||||
});
|
||||
// console.log(response?.data);
|
||||
// const sortedList = response.data.data.list.sort((a: PostoAdmsProps, b: PostoAdmsProps) => {
|
||||
|
||||
@ -36,6 +36,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [alert, setAlert] = useState({
|
||||
@ -123,6 +124,7 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
|
||||
// console.log(response);
|
||||
|
||||
@ -144,6 +146,7 @@ const EditDialog = () => {
|
||||
} else {
|
||||
setFormField(initialState);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -214,225 +217,242 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.type}
|
||||
onChange={(e) => setFormField({ ...formField, type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField({ ...formField, code: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Price Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Price Cash<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Cashback Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Cashback Cash<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(e) => setFormField({ ...formField, status: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Provider ID
|
||||
</label>
|
||||
<Select
|
||||
value={formField.provider}
|
||||
onValueChange={(e) => setFormField({ ...formField, provider: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Provider" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{providers.map((provider) => (
|
||||
<SelectItem key={provider.provider_id} value={provider.provider_id}>
|
||||
{provider.provider_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Process on Third Party<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.process_on_third_party}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, process_on_third_party: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Yes</SelectItem>
|
||||
<SelectItem value="N">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Products Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.type}
|
||||
onChange={(e) => setFormField({ ...formField, type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField({ ...formField, code: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) =>
|
||||
setFormField({ ...formField, description: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Price Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Price Cash<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Cashback Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Cashback Cash<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(e) => setFormField({ ...formField, status: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Provider ID
|
||||
</label>
|
||||
<Select
|
||||
value={formField.provider}
|
||||
onValueChange={(e) => setFormField({ ...formField, provider: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Provider" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{providers.map((provider) => (
|
||||
<SelectItem key={provider.provider_id} value={provider.provider_id}>
|
||||
{provider.provider_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Process on Third Party<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.process_on_third_party}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, process_on_third_party: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Yes</SelectItem>
|
||||
<SelectItem value="N">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,36 +1,38 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageProductsContext } from '../hooks/useManageProductsContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageProductsContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Products"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -231,7 +231,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [alert, setAlert] = useState({
|
||||
@ -72,6 +73,7 @@ const EditDialog = () => {
|
||||
);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
|
||||
|
||||
if (response?.status) {
|
||||
@ -82,6 +84,7 @@ const EditDialog = () => {
|
||||
} else {
|
||||
setFormField(initialState);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -134,27 +137,42 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Profession Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,38 +1,39 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { set } from 'date-fns';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { reload, table } = useDataGrid();
|
||||
const { handleAddDialog } = useManageProfessionContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Profession"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -102,7 +102,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
@ -151,7 +151,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolbar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'id', desc: false }]}
|
||||
sorting={[{ id: 'name', desc: false }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getProfessionLists(pageIndex, pageSize, sorting, columnFilters)
|
||||
|
||||
@ -47,6 +47,7 @@ const EditDialog = () => {
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -146,6 +147,7 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
|
||||
// console.log(response);
|
||||
if (response?.status) {
|
||||
@ -159,6 +161,7 @@ const EditDialog = () => {
|
||||
agent: response?.data.agent?.id || null
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -206,7 +209,7 @@ const EditDialog = () => {
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
getTransactionTypeList([{ id: 'name', desc: false }]);
|
||||
}, []);
|
||||
// console.log(selectedProvider);
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
|
||||
@ -222,170 +225,192 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, name: target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) => setFormField({ ...formField, type: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="h2h">Host to Host</SelectItem>
|
||||
<SelectItem value="agent">Agent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => setFormField({ ...formField, status: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Transaction Type Id<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.transaction_type}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, transaction_type: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Transaction Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{transactions.map((transaction) => (
|
||||
<SelectItem key={transaction.id} value={transaction.id}>
|
||||
{transaction.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formField.type === 'agent' ? (
|
||||
<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">
|
||||
Agent Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{customers.find((customer) => customer.id === formField.agent)
|
||||
?.username || 'Select Agent'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Agent..." />
|
||||
<CommandList
|
||||
className="max-h-[300px] overflow-y-auto"
|
||||
style={{ touchAction: 'pan-y' }}
|
||||
onWheel={(e) => {
|
||||
e.currentTarget.scrollTop += e.deltaY;
|
||||
}}
|
||||
>
|
||||
<CommandEmpty>No Agent found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{customers.map((customer) => (
|
||||
<CommandItem
|
||||
key={customer.id}
|
||||
value={customer.username}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
agent: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<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">
|
||||
Agent Name
|
||||
</label>
|
||||
<Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Provider Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, name: target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) =>
|
||||
setFormField({ ...formField, description: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) => setFormField({ ...formField, type: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="h2h">Host to Host</SelectItem>
|
||||
<SelectItem value="agent">Agent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => setFormField({ ...formField, status: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Transaction Type Id<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.transaction_type}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, transaction_type: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Transaction Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{transactions.map((transaction) => (
|
||||
<SelectItem key={transaction.id} value={transaction.id}>
|
||||
{transaction.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formField.type === 'agent' ? (
|
||||
<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">
|
||||
Agent Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{customers.find((customer) => customer.id === formField.agent)
|
||||
?.username || 'Select Agent'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Agent..." />
|
||||
<CommandList
|
||||
className="max-h-[300px] overflow-y-auto"
|
||||
style={{ touchAction: 'pan-y' }}
|
||||
onWheel={(e) => {
|
||||
e.currentTarget.scrollTop += e.deltaY;
|
||||
}}
|
||||
>
|
||||
<CommandEmpty>No Agent found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{customers.map((customer) => (
|
||||
<CommandItem
|
||||
key={customer.id}
|
||||
value={customer.username}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
agent: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<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">
|
||||
Agent Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Type Agent Only"
|
||||
readOnly
|
||||
className="cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageProviderContext } from '../hooks/useManageProviderContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { reload, table } = useDataGrid();
|
||||
const { handleAddDialog } = useManageProviderContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -15,24 +28,11 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Provider"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -129,7 +129,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
},
|
||||
@ -158,7 +158,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,6 +33,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -93,6 +94,7 @@ const EditDialog = () => {
|
||||
);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
// console.log('Ini datanya:', id);
|
||||
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
|
||||
// console.log('API Response:', response);
|
||||
@ -106,6 +108,7 @@ const EditDialog = () => {
|
||||
status: response.data.status
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
// const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -159,95 +162,112 @@ const EditDialog = () => {
|
||||
<div className="flex flex-col">
|
||||
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
|
||||
|
||||
<form onSubmit={doUpdateReward}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
className="input col-span-6"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(RewardType).map(
|
||||
([label, value]: [string, RewardTypeValue]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Amount<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<NumericFormat
|
||||
className="input col-span-6"
|
||||
value={formField.amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Amount"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, status: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">InActive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Reward Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={doUpdateReward}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
className="input col-span-6"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, type: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(RewardType).map(
|
||||
([label, value]: [string, RewardTypeValue]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Amount<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<NumericFormat
|
||||
className="input col-span-6"
|
||||
value={formField.amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Amount"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, status: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">InActive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,23 +1,36 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageRewardContext } from '../hooks/useManageRewardContext';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageRewardContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Reward"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,8 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
headerClassName: 'w-[250px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -138,7 +139,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
heaaderClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import { ManageSucosContextProvider } from './hooks/ManageSucosContext';
|
||||
import AddDialog from './blocks/AddDialog';
|
||||
import EditDialog from './blocks/EditDialog';
|
||||
import DeleteDialog from './blocks/DeleteDialog';
|
||||
import SearchDialog from './blocks/SearchDialog';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
@ -37,7 +36,6 @@ const SucosMaster = () => {
|
||||
<AddDialog />
|
||||
<EditDialog />
|
||||
<DeleteDialog />
|
||||
<SearchDialog />
|
||||
</Container>
|
||||
</ManageSucosContextProvider>
|
||||
</>
|
||||
|
||||
@ -34,12 +34,12 @@ interface PostoAdmsProps {
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const EditDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const { showEditDialog, handleEditDialog, selectedSucos, sucos } = useManageSucosContext();
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
@ -112,6 +112,7 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
|
||||
// console.log('Data Sucos:', response?.data);
|
||||
|
||||
@ -127,6 +128,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -183,72 +185,87 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Sucos Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Postu Administrativo Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
|
||||
?.PostoAdms_name || 'Select Postu Administrativo'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Postu Administrativo..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoadms.map((posto) => (
|
||||
<CommandItem
|
||||
key={posto.PostoAdms_id}
|
||||
value={posto.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
postoId: posto.PostoAdms_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{posto.PostoAdms_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Sucos Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Sucos Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Postu Administrativo Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
|
||||
?.PostoAdms_name || 'Select Postu Administrativo'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Postu Administrativo..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoadms.map((posto) => (
|
||||
<CommandItem
|
||||
key={posto.PostoAdms_id}
|
||||
value={posto.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
postoId: posto.PostoAdms_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{posto.PostoAdms_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,45 +1,54 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageSucosContext } from '../hooks/useManageSucosContext';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManageSucosContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('sucos_name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('sucos_name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('sucos_name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Sucos"
|
||||
value={String(table.getColumn(`sucos_name`)?.getFilterValue() ?? '')}
|
||||
onChange={(event) =>
|
||||
table.getColumn('sucos_name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
{/* <Button
|
||||
variant="outline"
|
||||
className="h-7.5 text-[0.8rem]"
|
||||
onClick={() => handleSearchDialog(true)}
|
||||
>
|
||||
Search Aldeias
|
||||
</Button> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import { useManageSucosContext } from '../hooks/useManageSucosContext';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
|
||||
interface AldeiasProps {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const SearchDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const { showSearchDialog, handleSearchDialog, sucos } = useManageSucosContext();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
id: 0,
|
||||
name: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [aldeia, setAldeia] = useState<AldeiasProps[]>([]);
|
||||
const [isFound, setIsFound] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const id = Number(formField.id);
|
||||
|
||||
if (formField.id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill name field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`);
|
||||
|
||||
if (response.data.status) {
|
||||
setAldeia(response.data.data);
|
||||
console.log(aldeia);
|
||||
setIsFound(true);
|
||||
console.log('Found Sucos: ', response.data.data);
|
||||
} else {
|
||||
setAldeia([]);
|
||||
setIsFound(false);
|
||||
setAlert({ show: true, message: 'No sucos found.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching sucos', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch sucos. Please try again.' });
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
setIsFound(false);
|
||||
setAldeia([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
|
||||
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogHeader className="p-2 border-0">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">Search Aldeias</h1>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
||||
onClick={() => {
|
||||
handleSearchDialog(false);
|
||||
handleReset();
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
|
||||
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
|
||||
|
||||
<div className="grid grid-cols-8 gap-1 w-full items-center">
|
||||
<label className="form-label flex items-center col-span-3">
|
||||
Sucos Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{formField.name || 'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Sucos..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No PostoAdms found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.sucos_id}
|
||||
value={suco.sucos_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
id: suco.sucos_id,
|
||||
name: suco.sucos_name
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.sucos_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{isFound && sucos.length > 0 && (
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<h2 className="text-md font-semibold">Aldeias: </h2>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm form-hint">
|
||||
{aldeia.map((aldeias) => aldeias.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="reset" variant="outline" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="submit" variant="default">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchDialog;
|
||||
@ -9,9 +9,12 @@ import { useNavigate } from 'react-router';
|
||||
import axios from 'axios';
|
||||
|
||||
interface SucosProps {
|
||||
sucos_id: number;
|
||||
sucos_name: string;
|
||||
posto_name: string;
|
||||
id: string;
|
||||
name: string;
|
||||
posto: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
@ -86,7 +89,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.sucos_name,
|
||||
accessorFn: (row) => row.name,
|
||||
id: 'sucos_name',
|
||||
filterFn: (row, columnId, filterValue) => {
|
||||
const value = row.getValue<string>(columnId);
|
||||
@ -100,13 +103,15 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'posto_name',
|
||||
accessorKey: 'posto.name',
|
||||
id: 'posto_name',
|
||||
filterFn: (row, columnId, filterValue) => {
|
||||
const value = row.getValue<string>(columnId);
|
||||
return String(value).includes(String(filterValue));
|
||||
},
|
||||
header: ({ column }) => <DataGridColumnHeader title="Postu Administrativo Name" column={column} />,
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="Postu Administrativo Name" column={column} />
|
||||
),
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
@ -124,13 +129,13 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleEditDialog(true, row.sucos_id)}
|
||||
onClick={() => handleEditDialog(true, row.id)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDeleteDialog(true, row.sucos_id)}
|
||||
onClick={() => handleDeleteDialog(true, row.id)}
|
||||
>
|
||||
<KeenIcon icon="trash" />
|
||||
</button>
|
||||
@ -138,7 +143,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
@ -158,8 +163,8 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
|
||||
filter: JSON.stringify(filter)
|
||||
});
|
||||
// console.log('Sucos List Response:', response?.data);
|
||||
setSucos(response?.data.list || []); // Pastikan default value adalah array kosong
|
||||
console.log('Sucos List Response:', response?.data);
|
||||
setSucos(response?.data.list || []);
|
||||
return { data: response?.data.list, totalCount: response?.data.total_count };
|
||||
} catch (error) {
|
||||
console.error('Error fetching Sucos', error);
|
||||
|
||||
@ -45,6 +45,7 @@ const EditDialog = () => {
|
||||
const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext();
|
||||
const { reload } = useDataGrid();
|
||||
const { GetData, PutData } = useCallApi();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -115,6 +116,7 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
|
||||
id
|
||||
});
|
||||
@ -132,6 +134,7 @@ const EditDialog = () => {
|
||||
: []
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const getCurrencyLists = async (sorting: any) => {
|
||||
@ -213,91 +216,110 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Wallet Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
placeholder="Wallet Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
|
||||
placeholder="Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Status</label>
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => setFormField({ ...formField, status: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Currency</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedCurrency?.name}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Groups</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedGroupNames}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button variant="default" type="submit">
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Wallet Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5">
|
||||
<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">
|
||||
Wallet Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
placeholder="Wallet Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) =>
|
||||
setFormField({ ...formField, description: e.target.value })
|
||||
}
|
||||
placeholder="Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Status</label>
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => setFormField({ ...formField, status: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Currency
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedCurrency?.name}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Groups</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedGroupNames}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button variant="default" type="submit">
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,36 +1,52 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageWalletContext } from '../hooks/useManageWalletContext';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { reload, table } = useDataGrid();
|
||||
const { handleAddDialog } = useManageWalletContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('wallets.name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('wallets.name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('wallets.name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Wallet"
|
||||
value={(table.getColumn('wallets.name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('wallets.name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
|
||||
@ -146,7 +146,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
filter = filter.length == 0 ? {} : { name: { like: `%${filter[0].value?.toLowerCase()}%` } };
|
||||
filter = filter.length == 0 ? {} : { 'wallets.name': { like: `%${filter[0].value?.toLowerCase()}%` } };
|
||||
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { ManageKycDeletionContextProvider } from './hooks/ManageKycDeletionContext';
|
||||
import { ManageKycDeletionContextProvider } from './hooks';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
|
||||
@ -9,11 +9,12 @@ import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageKycDeletionContext } from '../hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import { useDataGrid } from '@/components';
|
||||
|
||||
const API_URL = apiConfig.service_customer;
|
||||
const DetailDialog = () => {
|
||||
const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
|
||||
const { reload } = useDataGrid();
|
||||
|
||||
return (
|
||||
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
|
||||
@ -38,8 +39,14 @@ const DetailDialog = () => {
|
||||
|
||||
<div className="flex justify-end gap-2 mt-3">
|
||||
<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
|
||||
<Button onClick={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
|
||||
<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
|
||||
<Button onClick={async() => {
|
||||
await handleApproveReject(detailKyc.id, 'N')
|
||||
reload()
|
||||
}} variant="destructive" color="warning">Reject</Button>
|
||||
<Button onClick={async() => {
|
||||
await handleApproveReject(detailKyc.id, 'Y')
|
||||
reload()
|
||||
}} variant="default" color="primary">Approve</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (<div></div>)}
|
||||
|
||||
@ -37,7 +37,7 @@ interface ContextProps {
|
||||
selectedIdCustomer: string | null;
|
||||
detailKyc: any | null;
|
||||
setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
|
||||
handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
|
||||
handleApproveReject: (customerDeletionId: string, status_approve: string) => Promise<any>;
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
@ -50,7 +50,7 @@ const initialProps: ContextProps = {
|
||||
setShowDetailDialog: () => { },
|
||||
detailKyc: async () => {},
|
||||
setDetailKyc: () => { },
|
||||
handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
|
||||
handleApproveReject: async () => ({customerDeletionId: '0', status_approve: 'Y'}),
|
||||
};
|
||||
|
||||
const ManageKycDeletionContext = createContext<ContextProps>(initialProps);
|
||||
@ -271,7 +271,6 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
<DetailDialog />
|
||||
|
||||
<DataGridProvider
|
||||
columns={columns}
|
||||
@ -285,6 +284,7 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
|
||||
}
|
||||
>
|
||||
{children}
|
||||
<DetailDialog />
|
||||
</DataGridProvider>
|
||||
</ManageKycDeletionContext.Provider>
|
||||
);
|
||||
|
||||
@ -212,41 +212,37 @@ const Kyc = () => {
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
KYC Upgrade Members
|
||||
</h1>
|
||||
<div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
<Breadcrumbs>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">KYC Upgrade Members</h1>
|
||||
<Breadcrumbs>
|
||||
<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">Members</span>
|
||||
</Link>
|
||||
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">KYC Upgrade Members</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<div className="min-w-[800px]">
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 25 }}
|
||||
toolbar={<ListToolBar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'created_at', desc: true }]}
|
||||
serverSide={false}
|
||||
onRowSelectionChange={(selected, table: any) => {
|
||||
const selectedRow = table.getSelectedRowModel().rows[0];
|
||||
if (selectedRow) handleUpdate(selectedRow.original);
|
||||
}}
|
||||
></DataGridProvider>
|
||||
</div>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">KYC Upgrade Members</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
{/* <div className="w-full overflow-x-auto"> */}
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5">
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 25 }}
|
||||
toolbar={<ListToolBar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'created_at', desc: true }]}
|
||||
serverSide={false}
|
||||
onRowSelectionChange={(selected, table: any) => {
|
||||
const selectedRow = table.getSelectedRowModel().rows[0];
|
||||
if (selectedRow) handleUpdate(selectedRow.original);
|
||||
}}
|
||||
></DataGridProvider>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -7,7 +7,7 @@ import axios from 'axios';
|
||||
import DetailMember from './blocks/DetailMember';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { useAuthContext } from '@/auth';
|
||||
import { DataGridInner, LoaderTransparant } from '@/components';
|
||||
import { Container, DataGridInner, LoaderTransparant } from '@/components';
|
||||
import { DataGridProvider } from '@/components';
|
||||
import { toast } from 'sonner';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
@ -189,67 +189,59 @@ const ManageMembers = () => {
|
||||
<Helmet>
|
||||
<title>TPAY | Manage Members</title>
|
||||
</Helmet>
|
||||
<div>
|
||||
<div className="container mx-auto w-full">
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={`Are you sure you want to ${dialogType}?`}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
<Container>
|
||||
<ConfirmDialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
title="Confirm Action"
|
||||
content={`Are you sure you want to ${dialogType}?`}
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
{member.id !== '' || dialogType === 'create' ? (
|
||||
<DetailMember
|
||||
showAddDialog={isDialogOpen}
|
||||
setShowAddDialog={setShowAddDialog}
|
||||
handleClose={closeDialog}
|
||||
handleSubmit={handleSubmit}
|
||||
initialData={member}
|
||||
fetchCustomers={fetchCustomers}
|
||||
profession={profession}
|
||||
dialogType={dialogType}
|
||||
/>
|
||||
{member.id !== '' || dialogType === 'create' ? (
|
||||
<DetailMember
|
||||
showAddDialog={isDialogOpen}
|
||||
setShowAddDialog={setShowAddDialog}
|
||||
handleClose={closeDialog}
|
||||
handleSubmit={handleSubmit}
|
||||
initialData={member}
|
||||
fetchCustomers={fetchCustomers}
|
||||
profession={profession}
|
||||
dialogType={dialogType}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
Manage Members
|
||||
</h1>
|
||||
<div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
<Breadcrumbs>
|
||||
<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>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Members</h1>
|
||||
<Breadcrumbs>
|
||||
<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 Members</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<div className="min-w-[800px]">
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
columns={getColumns(handleUpdate)}
|
||||
layout={{ card: true }}
|
||||
serverSide={false}
|
||||
toolbar={
|
||||
<ListToolbar createMember={createMember} />
|
||||
}
|
||||
onRowSelectionChange={(selected, table: any) => {
|
||||
const selectedRow = table.getSelectedRowModel().rows[0];
|
||||
if (selectedRow) handleUpdate(selectedRow.original);
|
||||
}}
|
||||
>
|
||||
</DataGridProvider>
|
||||
</div>
|
||||
</div>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Manage Members</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
{/* <div className="w-full overflow-x-auto px-4"> */}
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5">
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
pagination={{ size: 25 }}
|
||||
columns={getColumns(handleUpdate)}
|
||||
layout={{ card: true }}
|
||||
serverSide={false}
|
||||
toolbar={<ListToolbar createMember={createMember} />}
|
||||
onRowSelectionChange={(selected, table: any) => {
|
||||
const selectedRow = table.getSelectedRowModel().rows[0];
|
||||
if (selectedRow) handleUpdate(selectedRow.original);
|
||||
}}
|
||||
></DataGridProvider>
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageMenusContext } from '../hooks/useManageMenusContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageMenusContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -18,37 +20,33 @@ const ListToolbar = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Menu"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
|
||||
{/* <KeenIcon icon="filter" />
|
||||
>>>>>>> raja
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
|
||||
@ -1,10 +1,22 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ListToolBar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageNotificationContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const handleKeydown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('content')?.setFilterValue(searchValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -16,21 +28,20 @@ const ListToolBar = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users"
|
||||
value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeydown}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
onClick={handleSearch}
|
||||
>
|
||||
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
|
||||
{/* <KeenIcon icon="filter" /> */}
|
||||
{/* </Button>
|
||||
</DefaultTooltip> */}
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -150,14 +150,16 @@ const AddDialog = () => {
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}>
|
||||
<div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5">
|
||||
{alert.show && (
|
||||
{alert.show && (
|
||||
<div className="absolute top-5 left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}>
|
||||
<div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5">
|
||||
<form action="" onSubmit={doCreatePosition}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
|
||||
@ -145,7 +145,7 @@ const EditDialog = () => {
|
||||
<DialogHeader className="p-0 border-0">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex items-center justify-between flex-wrap grow relative">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">Positions - Edit</h1>
|
||||
</div>
|
||||
@ -156,14 +156,16 @@ const EditDialog = () => {
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
{alert.show && (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<div className="flex flex-col px-0">
|
||||
{alert.show && (
|
||||
<Alert variant="danger" className="mb-3">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
<form action="" onSubmit={doEditPosition}>
|
||||
<div className="card-body grid gap-5 p-0">
|
||||
<div className="w-full">
|
||||
|
||||
@ -1,24 +1,48 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManagePositionContext } from '../hooks';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useState } from 'react';
|
||||
|
||||
const ListToolBar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManagePositionContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/6">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search roles"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<div className="flex w-[50%] gap-3 items-center">
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search roles"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -158,8 +158,8 @@ const ManagePositionContextProvider = ({ children }: { children: React.ReactNode
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'order_number',
|
||||
order_direction: 'ASC',
|
||||
filter: JSON.stringify({})
|
||||
order_direction: 'ASC'
|
||||
// filter: JSON.stringify({})
|
||||
};
|
||||
const response = await GetData(`${API_URL}/menus/list`, params);
|
||||
if (response?.status) {
|
||||
|
||||
@ -153,7 +153,7 @@ const EditDialog = () => {
|
||||
email: response.data.email,
|
||||
id_role: response.data.idRole,
|
||||
status: response.data.status,
|
||||
customerid: response.data.customerid?.id || ''
|
||||
customerid: response.data.customer?.id || ''
|
||||
}));
|
||||
// console.log('Customer ID from API:', response?.data.customerid);
|
||||
} else {
|
||||
|
||||
@ -1,38 +1,47 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useUserContext } from '../hooks';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ListToolBar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useUserContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('username')?.setFilterValue(searchValue);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<label className="input input-sm w-1/3">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Users"
|
||||
value={(table.getColumn('username')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('username')?.setFilterValue(event.target.value)
|
||||
}
|
||||
placeholder="Search Username"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
onClick={handleSearch}
|
||||
>
|
||||
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
|
||||
{/* <KeenIcon icon="filter" />
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -86,7 +86,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.customer?.username,
|
||||
id: 'customer',
|
||||
id: 'Users.customer',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
@ -98,7 +98,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
|
||||
accessorFn: (row) => row.email,
|
||||
id: 'email',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
|
||||
enableSorting: true,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[350px]'
|
||||
@ -106,9 +106,9 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: 'name',
|
||||
id: 'Users.name',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
|
||||
enableSorting: true,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
@ -116,7 +116,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.role.name,
|
||||
id: 'role_name',
|
||||
id: 'Users.role',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Role Name" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
@ -239,7 +239,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolBar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'Users.username', desc: false }]}
|
||||
sorting={[{ id: 'Users.created_at', desc: false }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
doGetListData(pageIndex, pageSize, sorting, columnFilters)
|
||||
|
||||
@ -17,7 +17,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Alert, useDataGrid } from '@/components';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { toast } from 'sonner';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@ -59,15 +58,24 @@ const ApprovalDialog = () => {
|
||||
toast.error('Please select a status.');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await PostData(`${API_URL}/transaction/set-approval`, {
|
||||
id_transaction: transactionDetails.id,
|
||||
status: formField.status,
|
||||
notes: formField.notes,
|
||||
});
|
||||
|
||||
if (response?.status === false) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: response?.message?.error?.message || 'Approval failed',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (response?.status) {
|
||||
setAlert({ show: false, message: '' });
|
||||
toast.success('Success Update Position');
|
||||
toast.success('Success Update Approval');
|
||||
const createActivity = {
|
||||
module: 'Approval Transaction',
|
||||
description: `Change status approve for transaction => ${transactionDetails.code}`,
|
||||
@ -84,13 +92,13 @@ const ApprovalDialog = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (showApprovalDialog) {
|
||||
// Reset form fields when dialog opens
|
||||
setFormField({
|
||||
transaction_code: '',
|
||||
status: '',
|
||||
notes: '',
|
||||
});
|
||||
setTransactionDetails(null); // Optional reset
|
||||
setTransactionDetails(null);
|
||||
setAlert({ show: false, message: '' });
|
||||
}
|
||||
}, [showApprovalDialog]);
|
||||
|
||||
@ -116,7 +124,6 @@ const ApprovalDialog = () => {
|
||||
}
|
||||
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
|
||||
|
||||
// Set formField.transaction_code once details are fetched
|
||||
useEffect(() => {
|
||||
if (transactionDetails) {
|
||||
setFormField((prev) => ({
|
||||
@ -138,7 +145,6 @@ const ApprovalDialog = () => {
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<label className="form-label max-w-56">Status</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
value={formField.status}
|
||||
@ -177,6 +183,14 @@ const ApprovalDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{alert.show && (
|
||||
<div className="mt-4">
|
||||
<span className="inline-block bg-red-100 text-red-800 text-sm font-medium px-4 py-2 rounded-md">
|
||||
{alert.message}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
@ -193,4 +207,4 @@ const ApprovalDialog = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ApprovalDialog;
|
||||
export default ApprovalDialog;
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useState } from 'react';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const TransactionDisbursement = () => {
|
||||
const [form, setForm] = useState({
|
||||
msisdn: '',
|
||||
amount: '',
|
||||
pin: ''
|
||||
});
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log('Submitted Data:', form);
|
||||
if (form.amount == '' || form.msisdn == '' || form.pin == '') {
|
||||
toast.warning('Please fill in all required fields.')
|
||||
return
|
||||
}
|
||||
try {
|
||||
let requestTopup = await PostData(`${API_URL}/transaction/topup-downline`, {
|
||||
msisdn_destination: form.msisdn,
|
||||
amount: form.amount,
|
||||
pin: form.pin
|
||||
})
|
||||
if (requestTopup?.status == true) {
|
||||
toast.success('Success Request Topup')
|
||||
} else {
|
||||
toast.warning(`${requestTopup?.message}`)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed')
|
||||
}
|
||||
// TODO: Kirim ke backend atau proses lainnya
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | Transaction Disbursement Saldo</title>
|
||||
</Helmet>
|
||||
<TransactionDisbursementProvider>
|
||||
<Container className="mb-7">
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</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">Transaction</span>
|
||||
</Link>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Disbursement Saldo</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
<Container className="flex items-center justify-center">
|
||||
<div className="card max-w-[750px] w-full">
|
||||
<div className="card-body p-10">
|
||||
{/* form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="msisdn">Destination MSISDN</label><span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="msisdn"
|
||||
type="number"
|
||||
value={form.msisdn}
|
||||
onChange={(e) => setForm({ ...form, msisdn: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="amount"
|
||||
type="number"
|
||||
value={form.amount}
|
||||
onChange={(e) => setForm({ ...form, amount: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="pin"
|
||||
type="password"
|
||||
value={form.pin}
|
||||
onChange={(e) => setForm({ ...form, pin: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="submit">Submit</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Container>
|
||||
</TransactionDisbursementProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionDisbursement;
|
||||
@ -0,0 +1,61 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
// Set the initial state for trxDate
|
||||
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
||||
|
||||
// Function to format date to YYYY-MM-DD
|
||||
const formatDate = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
// useEffect to set the default date values
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const nextWeek = new Date(today);
|
||||
nextWeek.setDate(today.getDate() + 7);
|
||||
|
||||
settrxDate({
|
||||
from: formatDate(today), // Set 'from' to today
|
||||
to: formatDate(nextWeek), // Set 'to' to 7 days later
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleFilterData = useCallback(() => {
|
||||
try {
|
||||
table.getColumn('transaction_date')?.setFilterValue(trxDate);
|
||||
} catch (error) {
|
||||
toast.error('Error applying filter');
|
||||
console.error('Error applying filter:', error);
|
||||
}
|
||||
}, [trxDate, table]);
|
||||
|
||||
useEffect(() => {
|
||||
if (trxDate.from && trxDate.to) {
|
||||
handleFilterData();
|
||||
}
|
||||
}, [trxDate]);
|
||||
|
||||
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 gap-3 items-center ml-auto">
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
@ -0,0 +1,80 @@
|
||||
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { toast } from 'sonner';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { createContext, useCallback, useMemo, useState } from 'react';
|
||||
import ListToolbar from '../blocks/ListToolbar';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import moment from 'moment';
|
||||
|
||||
interface TransactionDisbursementProps {
|
||||
id: string;
|
||||
customers_id: string;
|
||||
group_id: string;
|
||||
username: string;
|
||||
fullname: string;
|
||||
email: string;
|
||||
status: string;
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
|
||||
};
|
||||
|
||||
const TransactionDisbursementContext = createContext<ContextProps>(initialProps);
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
type StatusCode = 'W' | 'Y' | 'N' | 'T';
|
||||
|
||||
interface StatusInfo {
|
||||
label: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const statusMap: Record<StatusCode, StatusInfo> = {
|
||||
W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
|
||||
T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
|
||||
N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
|
||||
Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' },
|
||||
};
|
||||
|
||||
export const renderStatusBadge = (statusRaw: string | null | undefined) => {
|
||||
const status = statusRaw as StatusCode;
|
||||
const { label, bg, text } = statusMap[status] ?? {
|
||||
label: 'Unknown',
|
||||
bg: 'bg-gray-100',
|
||||
text: 'text-gray-600',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// const { reload } = useDataGrid();
|
||||
|
||||
const TransactionDisbursementProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
return (
|
||||
<TransactionDisbursementContext.Provider
|
||||
value={{}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
</TransactionDisbursementContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export { TransactionDisbursementProvider, TransactionDisbursementContext };
|
||||
export type { TransactionDisbursementProps };
|
||||
2
src/pages/transaction/disbursement-saldo/hooks/index.tsx
Normal file
2
src/pages/transaction/disbursement-saldo/hooks/index.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './TransactionDisbursementContext';
|
||||
export * from './useTransactionDisbursementContext';
|
||||
@ -0,0 +1,12 @@
|
||||
import { useContext } from 'react';
|
||||
import { TransactionDisbursementContext } from './TransactionDisbursementContext';
|
||||
|
||||
const useTransactionDisbursementContext = () => {
|
||||
const context = useContext(TransactionDisbursementContext);
|
||||
|
||||
if (!context) throw new Error('useTransactionDisbursementContext must be used within AuthProvider');
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
export { useTransactionDisbursementContext };
|
||||
@ -2,6 +2,7 @@ import { Container, DataGridInner } from '@/components';
|
||||
import { TransactionProvider } from './hooks/TransactionContext';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import ResendTransaction from './blocks/ResendTransaction';
|
||||
|
||||
const Transaction = () => {
|
||||
return (
|
||||
@ -28,6 +29,7 @@ const Transaction = () => {
|
||||
<div className="grid gap-5 lg:gap-7.5">
|
||||
<DataGridInner />
|
||||
</div>
|
||||
<ResendTransaction />
|
||||
</Container>
|
||||
</TransactionProvider>
|
||||
</>
|
||||
|
||||
@ -0,0 +1,205 @@
|
||||
import { useTransactionContext } from '../hooks/useTransactionContext';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Alert, useDataGrid } from '@/components';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { toast } from 'sonner';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const ResendTransaction = () => {
|
||||
const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const { reload } = useDataGrid();
|
||||
const [transactionDetails, setTransactionDetails] = useState<any>(null);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialStatePin = {
|
||||
pin: ''
|
||||
};
|
||||
const [formField, setFormField] = useState(initialStatePin);
|
||||
|
||||
useEffect(() => {
|
||||
if (showResendDialog) {
|
||||
// Reset form fields when dialog opens
|
||||
setFormField({
|
||||
pin: ''
|
||||
});
|
||||
setAlert({ show: false, message: '' });
|
||||
setTransactionDetails(null); // Optional reset
|
||||
}
|
||||
}, [showResendDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTransactionDetails = async () => {
|
||||
if (selectedTransactionForResend) {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
|
||||
{
|
||||
id: selectedTransactionForResend,
|
||||
}
|
||||
);
|
||||
setTransactionDetails(response?.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if (showResendDialog && selectedTransactionForResend) {
|
||||
fetchTransactionDetails();
|
||||
}
|
||||
}, [showResendDialog, selectedTransactionForResend, GetData]);
|
||||
|
||||
const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {
|
||||
|
||||
if (pintransactiion.trim() === '') {
|
||||
setAlert({ show: true, message: 'Please fill pin.' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (pintransactiion.length < 6) {
|
||||
setAlert({ show: true, message: 'Pin length must be 6 characters long.' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
toast.error('No Transaction selected');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.type) {
|
||||
toast.error('No Transaction Type selected');
|
||||
return;
|
||||
}
|
||||
|
||||
let apiEndpoint: string | null | undefined = null;
|
||||
let apiJsonData: any | null | undefined = null;
|
||||
|
||||
switch (data.kind) {
|
||||
case 'T':
|
||||
apiEndpoint = `${API_URL}/transaction/transfer`;
|
||||
apiJsonData = {
|
||||
id_origin_customer: data.origin_customer.id,
|
||||
msisdn_destination: data.transfer.destination_customer.msisdn,
|
||||
id_transaction_type: data.type.id,
|
||||
amount: String(data.transfer.amount),
|
||||
pin: pintransactiion,
|
||||
type: data.transfer.type
|
||||
}
|
||||
break;
|
||||
case 'U':
|
||||
apiEndpoint = `${API_URL}/transaction/topup`;
|
||||
apiJsonData = {
|
||||
id_origin_customer: data.origin_customer.id,
|
||||
id_transaction_type: data.type.id,
|
||||
pin_p24: data.transfer.pin_p24,
|
||||
amount: String(data.transfer.amount),
|
||||
pin: pintransactiion
|
||||
}
|
||||
break;
|
||||
case 'W':
|
||||
apiEndpoint = `${API_URL}/transaction/withdraw`;
|
||||
apiJsonData = {
|
||||
id_origin_customer: data.origin_customer.id,
|
||||
id_transaction_type: data.type.id,
|
||||
destination_iban: data.transfer.destination_iban,
|
||||
amount: String(data.transfer.amount),
|
||||
pin: pintransactiion
|
||||
}
|
||||
break;
|
||||
case 'P':
|
||||
apiEndpoint = `${API_URL}/transaction/purchase`;
|
||||
apiJsonData = {
|
||||
id_origin_customer: data.origin_customer.id,
|
||||
code_product: "object purchase : masih null",
|
||||
wallet: "emoney or point",
|
||||
destination_number: "parameter number",
|
||||
destination_amount: "parameter amount",
|
||||
pin: pintransactiion
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (!apiEndpoint || !apiJsonData) {
|
||||
toast.error('Invalid transaction');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await PostData(apiEndpoint, apiJsonData);
|
||||
|
||||
if (response?.status) {
|
||||
setAlert({ show: false, message: '' });
|
||||
handleResendDialog(false, null);
|
||||
toast.success('Success Retry Transaction');
|
||||
reload();
|
||||
|
||||
const createActivity = {
|
||||
module: 'History Transaction',
|
||||
description: `Retry Transaction => ${selectedTransactionForResend}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
} else {
|
||||
setAlert({ show: true, message: response?.message });
|
||||
toast.error('Failed Retry Transaction');
|
||||
}
|
||||
}, [selectedTransactionForResend, PostData, handleResendDialog, reload]);
|
||||
|
||||
return (
|
||||
<Dialog open={showResendDialog} onOpenChange={(open) => handleResendDialog(open, null)}>
|
||||
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogHeader className="p-0 border-0 block">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<Alert variant="warning">
|
||||
<h3 className="text-lg">Are you sure?</h3>
|
||||
<span className="text-sm">You will retry this transaction!</span>
|
||||
</Alert>
|
||||
{alert.show && (
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
</DialogHeader>
|
||||
<DialogBody>
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Pin<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="password"
|
||||
value={formField.pin}
|
||||
onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
|
||||
/></DialogBody>
|
||||
<DialogFooter className="flex justify-end items-center gap-4 mt-3">
|
||||
<Button variant="outline" onClick={() => handleResendDialog(false, null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}>
|
||||
Retry
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResendTransaction;
|
||||
@ -9,6 +9,9 @@ import ListToolbar from '../blocks/ListToolbar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useNavigate } from 'react-router';
|
||||
import DetailTransaction from '../blocks/DetailTransaction';
|
||||
import { log } from 'console';
|
||||
import ResendTransaction from '../blocks/ResendTransaction';
|
||||
import { comment } from 'stylis';
|
||||
|
||||
interface TransactionProps {
|
||||
id: number;
|
||||
@ -28,6 +31,9 @@ interface ContextProps {
|
||||
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
selectedTransactionId: number | null;
|
||||
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
|
||||
showResendDialog: boolean;
|
||||
handleResendDialog: (show: boolean, selected_transaction: string | null) => void;
|
||||
selectedTransactionForResend: string | null;
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
@ -35,7 +41,10 @@ const initialProps: ContextProps = {
|
||||
showDetailDialog: false,
|
||||
setShowDetailDialog: () => { },
|
||||
selectedTransactionId: null,
|
||||
setSelectedTransactionId: () => { }
|
||||
setSelectedTransactionId: () => { },
|
||||
showResendDialog: false,
|
||||
handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
|
||||
selectedTransactionForResend: null
|
||||
};
|
||||
|
||||
const ManageTransactionContext = createContext<ContextProps>(initialProps);
|
||||
@ -50,6 +59,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const handleNavigate = (path: string) => {
|
||||
const url = navigate(`${API_URL}/transaction/history/${path}`);
|
||||
};
|
||||
const [showResendDialog, setShowResendDialog] = useState(false);
|
||||
const [selectedTransactionForResend, setSelectedTransactionForResend] = useState<string | null>(null);
|
||||
|
||||
const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => {
|
||||
setSelectedTransactionForResend(show ? selected_transaction : null);
|
||||
setShowResendDialog(show);
|
||||
}, []);
|
||||
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
@ -162,7 +179,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
|
||||
@ -188,6 +205,7 @@ 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;
|
||||
return (
|
||||
<div key={`actions-${row.id}`}>
|
||||
<button
|
||||
@ -199,6 +217,18 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
>
|
||||
<KeenIcon icon="eye" />
|
||||
</button>
|
||||
{/* add new button for resend transaction failed */}
|
||||
{isVisible &&
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
title="Retry Transaction"
|
||||
onClick={() => {
|
||||
handleResendDialog(true, row.id);
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="abstract-37" />
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@ -208,7 +238,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
}
|
||||
}
|
||||
],
|
||||
[]);
|
||||
[handleResendDialog]);
|
||||
|
||||
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
@ -259,7 +289,10 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
showDetailDialog,
|
||||
setShowDetailDialog,
|
||||
selectedTransactionId,
|
||||
setSelectedTransactionId
|
||||
setSelectedTransactionId,
|
||||
showResendDialog,
|
||||
handleResendDialog,
|
||||
selectedTransactionForResend
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
|
||||
99
src/pages/transaction/topup/TransactionTopup.tsx
Normal file
99
src/pages/transaction/topup/TransactionTopup.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useState } from 'react';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const TransactionTopup = () => {
|
||||
const [form, setForm] = useState({
|
||||
topupAmount: '',
|
||||
pin: ''
|
||||
});
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log('Submitted Data:', form);
|
||||
|
||||
if (form.pin == '' || form.topupAmount) {
|
||||
toast.warning('Please fill in all required fields.')
|
||||
return
|
||||
}
|
||||
try {
|
||||
let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
|
||||
amount: form.topupAmount,
|
||||
pin: form.pin
|
||||
})
|
||||
if (requestTopup?.status == true) {
|
||||
toast.success('Success Request Topup')
|
||||
} else {
|
||||
toast.warning(`${requestTopup?.message}`)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed')
|
||||
}
|
||||
// TODO: Kirim ke backend atau proses lainnya
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | Transaction Topup Request</title>
|
||||
</Helmet>
|
||||
<TransactionTopupProvider>
|
||||
<Container className="mb-7">
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</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">Transaction</span>
|
||||
</Link>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Topup</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
<Container className="flex items-center justify-center">
|
||||
<div className="card max-w-[750px] w-full">
|
||||
<div className="card-body p-10">
|
||||
{/* form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="topupAmount"
|
||||
type="number"
|
||||
value={form.topupAmount}
|
||||
onChange={(e) => setForm({ ...form, topupAmount: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="pin"
|
||||
type="password"
|
||||
value={form.pin}
|
||||
onChange={(e) => setForm({ ...form, pin: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="submit">Submit</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Container>
|
||||
</TransactionTopupProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionTopup;
|
||||
61
src/pages/transaction/topup/blocks/ListToolbar.tsx
Normal file
61
src/pages/transaction/topup/blocks/ListToolbar.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
// Set the initial state for trxDate
|
||||
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
||||
|
||||
// Function to format date to YYYY-MM-DD
|
||||
const formatDate = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
// useEffect to set the default date values
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const nextWeek = new Date(today);
|
||||
nextWeek.setDate(today.getDate() + 7);
|
||||
|
||||
settrxDate({
|
||||
from: formatDate(today), // Set 'from' to today
|
||||
to: formatDate(nextWeek), // Set 'to' to 7 days later
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleFilterData = useCallback(() => {
|
||||
try {
|
||||
table.getColumn('transaction_date')?.setFilterValue(trxDate);
|
||||
} catch (error) {
|
||||
toast.error('Error applying filter');
|
||||
console.error('Error applying filter:', error);
|
||||
}
|
||||
}, [trxDate, table]);
|
||||
|
||||
useEffect(() => {
|
||||
if (trxDate.from && trxDate.to) {
|
||||
handleFilterData();
|
||||
}
|
||||
}, [trxDate]);
|
||||
|
||||
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 gap-3 items-center ml-auto">
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
@ -0,0 +1,80 @@
|
||||
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { toast } from 'sonner';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { createContext, useCallback, useMemo, useState } from 'react';
|
||||
import ListToolbar from '../blocks/ListToolbar';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import moment from 'moment';
|
||||
|
||||
interface TransactionTopupProps {
|
||||
id: string;
|
||||
customers_id: string;
|
||||
group_id: string;
|
||||
username: string;
|
||||
fullname: string;
|
||||
email: string;
|
||||
status: string;
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
|
||||
};
|
||||
|
||||
const TransactionTopupContext = createContext<ContextProps>(initialProps);
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
type StatusCode = 'W' | 'Y' | 'N' | 'T';
|
||||
|
||||
interface StatusInfo {
|
||||
label: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const statusMap: Record<StatusCode, StatusInfo> = {
|
||||
W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
|
||||
T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
|
||||
N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
|
||||
Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' },
|
||||
};
|
||||
|
||||
export const renderStatusBadge = (statusRaw: string | null | undefined) => {
|
||||
const status = statusRaw as StatusCode;
|
||||
const { label, bg, text } = statusMap[status] ?? {
|
||||
label: 'Unknown',
|
||||
bg: 'bg-gray-100',
|
||||
text: 'text-gray-600',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// const { reload } = useDataGrid();
|
||||
|
||||
const TransactionTopupProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
return (
|
||||
<TransactionTopupContext.Provider
|
||||
value={{}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
</TransactionTopupContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export { TransactionTopupProvider, TransactionTopupContext };
|
||||
export type { TransactionTopupProps };
|
||||
2
src/pages/transaction/topup/hooks/index.tsx
Normal file
2
src/pages/transaction/topup/hooks/index.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './TransactionTopupContext';
|
||||
export * from './useTransactionTopupContext';
|
||||
@ -0,0 +1,12 @@
|
||||
import { useContext } from 'react';
|
||||
import { TransactionTopupContext } from './TransactionTopupContext';
|
||||
|
||||
const useTransactionTopupContext = () => {
|
||||
const context = useContext(TransactionTopupContext);
|
||||
|
||||
if (!context) throw new Error('useTransactionTopupContext must be used within AuthProvider');
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
export { useTransactionTopupContext };
|
||||
@ -467,6 +467,10 @@ const AddDialog = () => {
|
||||
<SelectItem value="AM">Return Agent Merchant </SelectItem>
|
||||
<SelectItem value="AE">Return Agent Emoney </SelectItem>
|
||||
<SelectItem value="R">Reward Point </SelectItem>
|
||||
<SelectItem value="TE">Top Up Escrow </SelectItem>
|
||||
<SelectItem value="TM">Top Up Master Agent </SelectItem>
|
||||
<SelectItem value="TA">Top Up Agent </SelectItem>
|
||||
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@ -589,7 +589,7 @@ const EditDialog = () => {
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="D">Disbursement </SelectItem>
|
||||
<SelectItem value="D">Disbursement </SelectItem>
|
||||
<SelectItem value="O">Other </SelectItem>
|
||||
<SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem>
|
||||
<SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem>
|
||||
@ -600,6 +600,9 @@ const EditDialog = () => {
|
||||
<SelectItem value="AM">Return Agent Merchant </SelectItem>
|
||||
<SelectItem value="AE">Return Agent Emoney </SelectItem>
|
||||
<SelectItem value="R">Reward Point </SelectItem>
|
||||
<SelectItem value="TE">Top Up Escrow </SelectItem>
|
||||
<SelectItem value="TM">Top Up Master Agent </SelectItem>
|
||||
<SelectItem value="TA">Top Up Agent </SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,21 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
|
||||
|
||||
const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -16,8 +27,8 @@ const ListToolbar = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Transaction Type"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@ -41,4 +52,4 @@ const ListToolbar = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
export default ListToolbar;
|
||||
@ -6,6 +6,22 @@ import { ColumnDef } from '@tanstack/react-table';
|
||||
import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import ListToolbar from '../blocks/ListToolBar';
|
||||
|
||||
function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
|
||||
interface AccountProps {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -33,6 +49,8 @@ interface ContextProps {
|
||||
selectedTransferType: string | null;
|
||||
transferType: string | null;
|
||||
accounts: AccountProps[];
|
||||
searchTerm: string;
|
||||
setSearchTerm: (term: string) => void;
|
||||
}
|
||||
|
||||
const initialProps: ContextProps = {
|
||||
@ -44,7 +62,9 @@ const initialProps: ContextProps = {
|
||||
handleDeleteDialog: () => {},
|
||||
selectedTransferType: null,
|
||||
accounts: [],
|
||||
transferType: null
|
||||
transferType: null,
|
||||
searchTerm: '',
|
||||
setSearchTerm: () => {}
|
||||
};
|
||||
|
||||
const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
|
||||
@ -59,6 +79,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
const { GetData } = useCallApi();
|
||||
const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
|
||||
const [transferType, setTransferType] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState<string>('');
|
||||
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 200);
|
||||
|
||||
const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
|
||||
setSelectedTransferType(show ? selected_transfertype : null);
|
||||
@ -159,7 +182,10 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
AD: 'Return Agent Deposit',
|
||||
AM: 'Return Agent Merchant',
|
||||
AE: 'Return Agent Emoney',
|
||||
R: 'Reward Point'
|
||||
R: 'Reward Point',
|
||||
TE:'Top Up Escrow',
|
||||
TM:'Top Up Master Agent',
|
||||
TA:'Top Up Agent'
|
||||
};
|
||||
|
||||
return mapping[row.type] || 'Unknown';
|
||||
@ -228,7 +254,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
|
||||
const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
|
||||
|
||||
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
|
||||
const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
|
||||
|
||||
filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
|
||||
|
||||
const response = await GetData(`${API_URL}/transactiontype/list`, {
|
||||
limit: limit,
|
||||
@ -238,7 +266,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
order_direction: orderDirection,
|
||||
filter: JSON.stringify(filter)
|
||||
});
|
||||
// console.log(response?.data.list);
|
||||
return { data: response?.data.list, totalCount: response?.data.total_count };
|
||||
};
|
||||
|
||||
@ -254,7 +281,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
handleDeleteDialog,
|
||||
selectedTransferType,
|
||||
accounts,
|
||||
transferType
|
||||
transferType,
|
||||
searchTerm,
|
||||
setSearchTerm
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
@ -280,4 +309,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
};
|
||||
|
||||
export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
|
||||
export type { TransferType };
|
||||
export type { TransferType };
|
||||
@ -10,6 +10,8 @@ import DashboardHomePage from '@/pages/dashboards/home/DashboardHomePage';
|
||||
import ManageUserPage from '@/pages/settings/user/manage-user/ManageUserPage';
|
||||
import Transaction from '@/pages/transaction/history-transaction/Transaction';
|
||||
import ApprovalTransaction from '@/pages/transaction/approval-transaction/ApprovalTransaction';
|
||||
import TransactionTopup from '@/pages/transaction/topup/TransactionTopup';
|
||||
import TransactionDisbursement from '@/pages/transaction/disbursement-saldo/TransactionDisbursement';
|
||||
import LogActivityPage from '@/pages/settings/user/log-activity/LogActivityPage';
|
||||
import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePositionPage';
|
||||
import ManageAccount from '@/pages/account/manage-account/ManageAccount';
|
||||
@ -96,6 +98,8 @@ const AppRoutingSetup = (): ReactElement => {
|
||||
|
||||
<Route path="/transaction" element={<Transaction />} />
|
||||
<Route path="/approval-transaction" element={<ApprovalTransaction />} />
|
||||
<Route path="/transaction/topup" element={<TransactionTopup/>} />
|
||||
<Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement/>} />
|
||||
<Route path="/menu/menu-management" element={<ManageMenu />} />
|
||||
<Route path="/menu/welcome" element={<Welcome />} />
|
||||
<Route path="/message/inbox" element={<Inbox />} />
|
||||
|
||||
Reference in New Issue
Block a user