TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

Browse Source
This commit is contained in:
unknown
2025-04-01 22:38:44 +07:00
parent 28de8e64e8 cc95b3efa7
commit 12c7670197
44 changed files with 3079 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/data-grid/DataGridContext.tsx
View File

@ -181,6 +181,7 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
reload: loadData
}}
>
{loading && <div className="fixed inset-0 flex items-center justify-center z-50"></div>}
{props.children ? props.children : <DataGridInner />}
</DataGridContext.Provider>
);

4
src/components/data-grid/DataGridLoader.tsx
View File

@ -5,10 +5,10 @@ export const DataGridLoader = () => {
const { props } = useDataGrid();
return (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-6 min-w-[160px] bg-card text-muted-foreground px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
<div className="text-muted-foreground bg-card flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
<svg
className="animate-spin -ml-1 h-5 w-5 text-muted-foreground"
className="animate-spin -ml-1 h-5 w-5 text-muted-foreground flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"

10
src/pages/master/conversion/ConversionMaster.tsx
View File

@ -1,6 +1,12 @@
import { Container, DataGridInner } from '@/components';
import { ManageConversionContextProvider } from './hooks/ManageConversionContext';
import { Breadcrumbs, Link } from '@mui/material';
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import { Delete } from 'lucide-react';
import DeleteDialog from './blocks/DeleteDialog';
// import EditDialog from './blocks/EditDialog';
const ConversionMaster = () => {
return (
@ -24,6 +30,10 @@ const ConversionMaster = () => {
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog/>
<DeleteDialog/>
</Container>
</ManageConversionContextProvider>
);

287
src/pages/master/conversion/blocks/AddDialog.tsx
View File

@ -0,0 +1,287 @@
import { apiConfig } from '@/config/api.config';
import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { getAuth } from '@/auth';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
import { set } from 'date-fns';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
interface CurrencyProps {
ID: string;
name: string;
}
const API_URL = apiConfig.service_wallet;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog, selectedConversion } = useManageConversionContext();
const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState = {
status: '',
id_currency_origin: '',
id_currency_destination: '',
buy: 0,
sell: 0,
created_by: '',
created_at: ''
};
const [formField, setFormField] = useState(initialState);
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
const doCreateConversion = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL}/dashboard/conversion`, formField);
if (response?.status) {
resetForm();
handleAddDialog(false);
toast.success('Success Create Conversion');
reload();
} else {
toast.error('Error Create Conversion');
setAlert({ show: true, message: 'Failed to create Conversion. Please try again.' });
}
},
[formField]
);
const doFetchCurrency = async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/dashboard/currency/`, {
limit: 1000,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
setCurrencies(response?.data.list);
} catch (error) {
console.error('Error fetching currency', error);
}
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.id_currency_origin === '' ||
formField.id_currency_destination === '' ||
formField.buy === 0 ||
formField.sell === 0 ||
formField.status === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
doCreateConversion(e);
console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => {
if (showAddDialog) {
setFormField({
...formField,
created_by: parsedUser.username,
created_at: formattedTime
});
}
}, [formattedTime]);
useEffect(() => {
doFetchCurrency([{ id: 'name', desc: false }]);
}, []);
useEffect(() => {
if (showAddDialog === false) {
resetForm();
}
}, [showAddDialog]);
return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Conversion - Create</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody ref={parentRef}>
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
)}
<form onSubmit={handleSubmit}>
<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>
<div className="grow">
<Select
value={formField.status}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status: value }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</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>
</Dialog>
);
};
export default AddDialog;

79
src/pages/master/conversion/blocks/DeleteDialog.tsx Normal file
View File

@ -0,0 +1,79 @@
import { Alert, useDataGrid } from '@/components';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
import { useCallback, useState } from 'react';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
import { toast } from 'sonner';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { DialogDescription } from '@radix-ui/react-dialog';
const API_URL = apiConfig.service_wallet;
const DeleteDialog = () => {
const { showDeleteDialog, handleDeleteDialog, selectedConversion } = useManageConversionContext();
const { reload } = useDataGrid();
const { DeleteData } = useCallApi();
const [alert, setAlert] = useState({
show: false,
message: ''
});
const doDeleteConversion = useCallback(async () => {
if (!selectedConversion) {
toast.error('No Conversion selected');
return;
}
console.log(selectedConversion);
const response = await DeleteData(
`${API_URL}/dashboard/conversion/${selectedConversion}`,
{ id: selectedConversion }
);
if (response?.status) {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Conversion');
reload();
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Conversion');
}
}, [selectedConversion, DeleteData, handleDeleteDialog, reload]);
console.log(selectedConversion);
return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(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 delete this data!</span>
</Alert>
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
)}
</DialogHeader>
<DialogFooter className="flex justify-end items-center gap-4 mt-3">
<Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
Cancel
</Button>
<Button variant="destructive" onClick={doDeleteConversion}>
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default DeleteDialog;

299
src/pages/master/conversion/blocks/EditDialog.tsx Normal file
View File

@ -0,0 +1,299 @@
import { apiConfig } from '@/config/api.config';
import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { getAuth } from '@/auth';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
import { set } from 'date-fns';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
interface CurrencyProps {
ID: string;
name: string;
}
const API_URL = apiConfig.service_wallet;
const EditDialog = () => {
const parentRef = useRef<any | null>(null);
const { showEditDialog, handleEditDialog, selectedConversion } = useManageConversionContext();
const { reload } = useDataGrid();
const { PostData, GetData, PutData } = useCallApi();
const parsedUser = getAuth()?.user;
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState = {
status: '',
id_currency_origin: '',
id_currency_destination: '',
buy: 0,
sell: 0,
created_by: '',
created_at: ''
};
const [formField, setFormField] = useState(initialState);
const updated_time = new Date();
const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
const doUpdateConversion = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if(!showEditDialog) return;
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{
...formField
});
if (response?.status) {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update Conversion');
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;
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/dashboard/currency/`, {
limit: 1000,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
setCurrencies(response?.data.list);
} catch (error) {
console.error('Error fetching currency', error);
}
};
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]);
useEffect(() => {
if (showEditDialog) {
setFormField({
...formField,
created_by: parsedUser.username,
created_at: formattedTime
});
}
}, [formattedTime]);
useEffect(() => {
if (showEditDialog) {
doGetCurrency([{ id: 'name', desc: false }]);
}
}, [showEditDialog]);
useEffect(() => {
if (showEditDialog === false) {
resetForm();
}
}, [showEditDialog]);
return (
<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>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody ref={parentRef}>
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</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>
</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>
<div className="grow">
<Select
value={formField.status}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status: value }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</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>
</Dialog>
);
};
export default EditDialog;

4
src/pages/master/conversion/blocks/ListToolbar.tsx
View File

@ -11,7 +11,7 @@ const ListToolbar = () => {
<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">
<KeenIcon icon="magnifier" />
<input
type="text"
@ -19,7 +19,7 @@ const ListToolbar = () => {
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>
</label>
</label> */}
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<Button
variant="outline"

217
src/pages/master/conversion/hooks/ManageConversionContext.tsx
View File

@ -3,79 +3,123 @@ import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
import { ColumnDef } from '@tanstack/react-table';
import { createContext, useCallback, useMemo, useState } from 'react';
import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar';
interface ConversionProps {
id: string;
interface CurrencyProps {
ID: string;
name: string;
}
interface Conversion {
id: string;
id_currency_origin: string;
id_currency_destination: string;
buy: number;
sell: number;
status: string;
}
interface ContextProps {
conversion: ConversionProps[];
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_conversion: string | null) => void;
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_conversion: string | null) => void;
selectedConversion: string | null;
getConversionLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any
) => Promise<{ data: ConversionProps[]; totalCount: number } | undefined>;
conversion: string | null;
}
const initialProps: ContextProps = {
conversion: [],
showAddDialog: false,
handleAddDialog: () => {},
showEditDialog: false,
handleEditDialog: () => {},
showAddDialog: false,
handleAddDialog: () => {},
showDeleteDialog: false,
handleDeleteDialog: () => {},
selectedConversion: null,
getConversionLists: async () => undefined
conversion: null,
};
const ManageConversionContext = createContext<ContextProps>(initialProps);
const API_URL_WALLET = apiConfig.service_wallet;
const API_URL = apiConfig.service_wallet;
const ManageConversionContextProvider = ({ children }: { children: React.ReactNode }) => {
const [conversions, setConversions] = useState<ConversionProps[]>([]);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedConversion, setSelectedConversion] = useState<string | null>(null);
const { GetData } = useCallApi();
const [selectedConversion, setSelectedConversion] = useState<string | null>(null);
const [conversion, setConversion] = useState<string | null>(null);
const handleEditDialog = useCallback((show: boolean, selected_conversion: string | null) => {
setSelectedConversion(show ? selected_conversion : null);
setShowEditDialog(show);
}, []);
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_conversion: string | null) => {
setShowEditDialog(show);
setSelectedConversion(show ? selected_conversion : null);
}, []);
const handleDeleteDialog = useCallback((show: boolean, selected_conversion: string | null) => {
setShowEditDialog(show);
setShowDeleteDialog(show);
setSelectedConversion(show ? selected_conversion : null);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
accessorFn: (row) => row.currency_origin.name,
id: 'id_currency_origin',
header: ({ column }) => <DataGridColumnHeader title="Currency Origin" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row) => row.currency_destination.name,
id: 'id_currency_destination',
header: ({ column }) => <DataGridColumnHeader title="Currency Destination" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row) => row.buy,
id: 'buy',
header: ({ column }) => <DataGridColumnHeader title="Buy" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row) => row.sell,
id: 'sell',
header: ({ column }) => <DataGridColumnHeader title="Sell" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[150px]' },
cell: ({ row }) => {
const isActive = row.original.status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
}
},
{
@ -89,79 +133,80 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
<>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleEditDialog(true, row.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.id)}
onClick={() => handleDeleteDialog(true, row.ID)}
>
<KeenIcon icon="trash" />
</button>
</>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
}
],
[]
[handleEditDialog, handleDeleteDialog]
);
const getConversionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL_WALLET}/dashboard/conversion`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
console.log(response?.data);
setConversions(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching Conversion', error);
}
const doGetConversion = async (
page: number,
limit: number,
sorting: any,
filter: any
) => {
sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
console.log(sorting);
const response = await GetData(`${API_URL}/dashboard/conversion/`, {
limit: limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
console.log(response?.data);
return { data: response?.data.list, totalCount: response?.data.total_count };
};
return (
<ManageConversionContext.Provider
value={{
conversion: conversions,
showAddDialog,
handleAddDialog,
showEditDialog,
handleEditDialog,
showDeleteDialog,
handleDeleteDialog,
selectedConversion,
getConversionLists
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getConversionLists(pageIndex, pageSize, sorting, columnFilters)
}
<div className="min-h-screen">
<ManageConversionContext.Provider
value={{
showEditDialog,
handleEditDialog,
showAddDialog,
handleAddDialog,
showDeleteDialog,
handleDeleteDialog,
selectedConversion,
conversion
}}
>
{children}
</DataGridProvider>
</ManageConversionContext.Provider>
<Toaster expand visibleToasts={9} duration={3000} />
<div className="px-4">
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
layout={{ card: true }}
toolbar={<ListToolbar />}
sorting={[{ id: 'ID', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
doGetConversion(pageIndex, pageSize, sorting, columnFilters)
}
>
{children}
</DataGridProvider>
</div>
</ManageConversionContext.Provider>
</div>
);
};
export { ManageConversionContext, ManageConversionContextProvider };
export type { ConversionProps };
export type { Conversion };

18
src/pages/master/provider/hooks/ManageProviderContext.tsx
View File

@ -109,8 +109,22 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
cell: ({ row }) => {
const isActive = row.original.provider_status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
},
meta: {
headerClassName: 'w-[100px]'
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
},
{
@ -158,7 +172,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
// console.log(response?.data);
console.log(response?.data);
setProvider(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {

37
src/pages/master/wallet/WalletMaster.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Container, DataGridInner } from '@/components';
import { ManageWalletContextProvider } from './hooks/ManageWalletContext';
import { Breadcrumbs, Link } from '@mui/material';
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
const WalletMaster = () => {
return (
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Wallet</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Wallet</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageWalletContextProvider>
);
};
export default WalletMaster;

298
src/pages/master/wallet/blocks/AddDialog.tsx Normal file
View File

@ -0,0 +1,298 @@
import { useCallApi } from '@/hooks';
import { useManageWalletContext } from '../hooks/useManageWalletContext';
import { Alert, useDataGrid } from '@/components';
import React, { useCallback, useEffect, useState } from 'react';
import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
interface CurrencyProps {
ID: string;
code: string;
name: string;
prefix: string;
status: string;
}
interface GroupProps {
id: string;
name: string;
description: string;
status: string;
}
const API_URL_WALLET = apiConfig.service_wallet;
const API_URL_MASTER_DATA = apiConfig.service_master_data;
const AddDialog = () => {
const { showAddDialog, handleAddDialog } = useManageWalletContext();
const { GetData, PostData } = useCallApi();
const { reload } = useDataGrid();
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState: {
name: string;
description: string;
status: string;
group: string[];
currency_id: string;
} = {
name: '',
description: '',
status: '',
group: [],
currency_id: ''
};
const [formField, setFormField] = useState(initialState);
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [groups, setGroups] = useState<GroupProps[]>([]);
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
const handleGroupChange = (groupId: string) => {
setFormField((prevState) => {
const isSelected = prevState.group.includes(groupId);
if (isSelected) {
// Remove the group if already selected
return {
...prevState,
group: prevState.group.filter((id) => id !== groupId)
};
} else {
// Add the group if not selected
return {
...prevState,
group: [...prevState.group, groupId]
};
}
});
};
const doCreateWallet = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL_MASTER_DATA}/wallet/create`, formField);
if (response?.status) {
handleAddDialog(false);
toast.success('Success Create Wallet');
reload();
} else {
toast.error('Failed Create Wallet');
setAlert({ show: true, message: 'Failed Create Wallet' });
}
},
[formField]
);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.name.trim() === '' ||
formField.description.trim() === '' ||
formField.status.trim() === '' ||
formField.group.length === 0 ||
formField.currency_id.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
console.log(formField);
doCreateWallet(e);
setAlert({ show: false, message: '' });
};
const getCurrencyLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/currency`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('Currency: ', response?.data);
setCurrencies(response?.data.list);
} catch (error) {
console.error('Error fetching currency', error);
}
};
const getGroupLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_MASTER_DATA}/groups/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('Group: ', response?.data);
setGroups(response?.data.list);
} catch (error) {
console.error('Error fetching group', error);
}
};
useEffect(() => {
getCurrencyLists([{ id: 'name', desc: false }]);
getGroupLists([{ id: 'name', desc: false }]);
}, []);
useEffect(() => {
if (showAddDialog === false) {
resetForm();
}
}, [showAddDialog]);
return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Wallet - Create</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody className="scrollable">
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</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<span className="text-red-500">*</span>
</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<span className="text-red-500">*</span>
</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<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">
Currency<span className="text-red-500">*</span>
</label>
<Select
value={formField.currency_id}
onValueChange={(value) => setFormField({ ...formField, currency_id: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Currency Type" />
</SelectTrigger>
<SelectContent>
{currencies.map((currency) => (
<SelectItem key={currency.ID} value={currency.ID}>
{currency.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">
Groups<span className="text-red-500">*</span>
</label>
<div className="flex flex-wrap gap-3">
{groups.map((group) => (
<label key={group.id} className="inline-flex items-center">
<input
type="checkbox"
className="h-4 w-4"
checked={formField.group.includes(group.id)}
onChange={() => handleGroupChange(group.id)}
/>
<span className="ml-2">{group.name}</span>
</label>
))}
</div>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Create</Button>
</div>
</div>
</form>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default AddDialog;

78
src/pages/master/wallet/blocks/DeleteDialog.tsx Normal file
View File

@ -0,0 +1,78 @@
import { useCallApi } from '@/hooks';
import { useManageWalletContext } from '../hooks/useManageWalletContext';
import { Alert, useDataGrid } from '@/components';
import { useCallback, useState } from 'react';
import { toast } from 'sonner';
import { apiConfig } from '@/config/api.config';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
const API_URL = apiConfig.service_master_data;
const DeleteDialog = () => {
const { showDeleteDialog, handleDeleteDialog, selectedWallet } = useManageWalletContext();
const { DeleteData } = useCallApi();
const { reload } = useDataGrid();
const [alert, setAlert] = useState({ show: false, message: '' });
const doDeleteWallet = useCallback(async () => {
if (!selectedWallet) {
toast.error('No wallet selected');
return;
}
const response = await DeleteData(
`${API_URL}/wallet/delete/${selectedWallet.Wallet_id}/false`,
{
id: selectedWallet.Wallet_id
}
);
if (response?.status) {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Wallet');
reload();
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Wallet');
}
}, [selectedWallet, handleDeleteDialog, DeleteData, reload]);
return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-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 delete this data!</span>
</Alert>
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
)}
</DialogHeader>
<DialogFooter className="flex justify-end items-center gap-4 mt-3">
<Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
Cancel
</Button>
<Button variant="destructive" onClick={doDeleteWallet}>
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default DeleteDialog;

278
src/pages/master/wallet/blocks/EditDialog.tsx Normal file
View File

@ -0,0 +1,278 @@
import { Alert, useDataGrid } from '@/components';
import { useManageWalletContext } from '../hooks/useManageWalletContext';
import { useCallApi } from '@/hooks';
import React, { useCallback, useEffect, useState } from 'react';
import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
interface CurrencyProps {
ID: string;
code: string;
name: string;
prefix: string;
status: string;
}
interface GroupProps {
id: string;
name: string;
description: string;
status: string;
}
const API_URL_WALLET = apiConfig.service_wallet;
const API_URL_MASTER_DATA = apiConfig.service_master_data;
const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext();
const { reload } = useDataGrid();
const { GetData, PutData } = useCallApi();
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState: {
name: string;
description: string;
status: string;
group: string[];
currency_id: string;
} = {
name: '',
description: '',
status: '',
group: [],
currency_id: ''
};
const [formField, setFormField] = useState(initialState);
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [groups, setGroups] = useState<GroupProps[]>([]);
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
const doUpdateWallet = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PutData(
`${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`,
formField
);
if (response?.status) {
handleEditDialog(false, null);
toast.success('Success Update Wallet');
reload();
} else {
toast.error('Failed Update Wallet');
setAlert({ show: true, message: 'Failed Update Wallet' });
}
},
[formField]
);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(formField);
doUpdateWallet(e);
setAlert({ show: false, message: '' });
};
const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
id
});
console.log(response);
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response?.data.name,
description: response?.data.description,
status: response?.data.status,
currency_id: response?.data.id_currency,
group: Array.isArray(response?.data.group)
? response?.data.group.map((target: GroupProps) => target.id)
: []
}));
}
}, []);
const getCurrencyLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/currency`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('Currency: ', response?.data);
setCurrencies(response?.data.list);
} catch (error) {
console.error('Error fetching currency', error);
}
};
const getGroupLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_MASTER_DATA}/groups/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('Group: ', response?.data);
setGroups(response?.data.list);
} catch (error) {
console.error('Error fetching group', error);
}
};
const selectedGroupNames = groups
.filter((g) => formField.group.includes(g.id))
.map((g) => g.name)
.join(', ');
const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
useEffect(() => {
getCurrencyLists([{ id: 'name', desc: false }]);
getGroupLists([{ id: 'name', desc: false }]);
}, []);
useEffect(() => {
if (selectedWallet) {
// setFormField((prev) => ({
// ...prev,
// name: selectedWallet?.Wallet_name,
// description: selectedWallet?.Wallet_description,
// status: selectedWallet?.Wallet_status,
// currency_id: selectedWallet?.Wallet_currency_id,
// group: selectedWallet?.Wallet_group
// }));
doFetchData(selectedWallet?.Wallet_id);
}
}, [selectedWallet]);
useEffect(() => {
if (showEditDialog === false) {
resetForm();
}
}, [showEditDialog]);
// console.log(selectedWallet);
return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Wallet - Update</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody className="scrollable">
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</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>
<Input type="text" placeholder='Empty' value={selectedCurrency?.name || ''} readOnly />
</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>
<Input type="text" placeholder='Empty' value={selectedGroupNames} readOnly />
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Update</Button>
</div>
</div>
</form>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default EditDialog;

55
src/pages/master/wallet/blocks/ListToolbar.tsx Normal file
View File

@ -0,0 +1,55 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useManageWalletContext } from '../hooks/useManageWalletContext';
const ListToolbar = () => {
const { reload, table } = useDataGrid();
const { handleAddDialog } = useManageWalletContext();
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 Provider"
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={() => handleAddDialog(true)}
>
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 default ListToolbar;

205
src/pages/master/wallet/hooks/ManageWalletContext.tsx Normal file
View File

@ -0,0 +1,205 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react';
import { Toaster } from 'sonner';
import ListToolbar from '../blocks/ListToolbar';
interface WalletProps {
Wallet_id: string;
Wallet_name: string;
Wallet_status: string;
Wallet_description: string;
Wallet_group: string[];
Wallet_currency_id: string;
}
interface ContextProps {
wallet: WalletProps[];
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
selectedWallet: WalletProps | null;
getWalletLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any
) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>;
}
const initialProps: ContextProps = {
wallet: [],
showAddDialog: false,
handleAddDialog: (show: boolean) => {},
showEditDialog: false,
handleEditDialog: (show: boolean, selected_wallet: WalletProps | null) => {},
showDeleteDialog: false,
handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => {},
selectedWallet: null,
getWalletLists: async () => ({ data: [], totalCount: 0 })
};
const ManageWalletContext = createContext<ContextProps>(initialProps);
const API_URL_MASTER_DATA = apiConfig.service_master_data;
const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }) => {
const [wallets, setWallets] = useState<WalletProps[]>([]);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedWallet, setSelectedWallet] = useState<WalletProps | null>(null);
const { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_wallet: WalletProps | null) => {
setShowEditDialog(show);
setSelectedWallet(show ? selected_wallet : null);
}, []);
const handleDeleteDialog = useCallback((show: boolean, selected_wallet: WalletProps | null) => {
setShowDeleteDialog(show);
setSelectedWallet(show ? selected_wallet : null);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.Wallet_name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.Wallet_description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.Wallet_status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => {
const isActive = row.original.Wallet_status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
},
meta: {
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
},
{
id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
enableSorting: false,
enableHiding: false,
cell: (data) => {
const row = data.row.original;
return (
<>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleEditDialog(true, row)}
>
<KeenIcon icon="notepad-edit" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row)}
>
<KeenIcon icon="trash" />
</button>
</>
);
},
meta: {
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
}
],
[]
);
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 ? {} : { any: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
// console.log(response?.data);
setWallets(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching Wallet', error);
}
};
return (
<ManageWalletContext.Provider
value={{
wallet: wallets,
showAddDialog,
handleAddDialog,
showEditDialog,
handleEditDialog,
showDeleteDialog,
handleDeleteDialog,
selectedWallet,
getWalletLists
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider
columns={columns}
pagination={{ size: 25 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters)
}
>
{children}
</DataGridProvider>
</ManageWalletContext.Provider>
);
};
export { ManageWalletContext, ManageWalletContextProvider };
export type { WalletProps };

12
src/pages/master/wallet/hooks/useManageWalletContext.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useContext } from 'react';
import { ManageWalletContext } from './ManageWalletContext';
const useManageWalletContext = () => {
const context = useContext(ManageWalletContext);
if (!context) {
throw new Error('useManageWalletContext must be used within a ManageWalletContextProvider');
}
return context;
};
export { useManageWalletContext };

10
src/pages/master/walletRule/blocks/AddDialog.tsx
View File

@ -105,15 +105,7 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.id_group.trim() === '' ||
formField.max_transaction_per_day === 0 ||
formField.balance_minimum === 0 ||
formField.balance_maximum === 0 ||
formField.credit_limit === 0 ||
formField.monthly_limit === 0 ||
formField.status.trim() === ''
) {
if (formField.id_group.trim() === '' || formField.status.trim() === '') {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}

10
src/pages/master/walletRule/blocks/EditDialog.tsx
View File

@ -108,15 +108,7 @@ const EditDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.id_group.trim() === '' ||
formField.max_transaction_per_day === 0 ||
formField.balance_minimum === 0 ||
formField.balance_maximum === 0 ||
formField.credit_limit === 0 ||
formField.monthly_limit === 0 ||
formField.status.trim() === ''
) {
if (formField.id_group.trim() === '' || formField.status.trim() === '') {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}

18
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
View File

@ -137,10 +137,24 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: true,
enableSorting: false,
enableHiding: false,
cell: ({ row }) => {
const isActive = row.original.status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
},
meta: {
headerClassName: 'w-[250px]'
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
},
{

80
src/pages/menu/manage-menu/blocks/AddDIalog.tsx
View File

@ -12,16 +12,22 @@ import {
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { FormControl,NativeSelect } from "@mui/material";
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
const API_URL = apiConfig.service_dashboard;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
const { reload } = useDataGrid();
const { PostData } = useCallApi();
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -51,8 +57,11 @@ const AddDialog = () => {
return;
}
console.log('Data dikirim ke API:', formField);
const response = await PostData(`${API_URL}/menus/create`, formField);
console.log('Response from API:', response);
if (response?.status) {
handleAddDialog(false);
resetForm();
@ -67,7 +76,10 @@ const AddDialog = () => {
};
const resetForm = () => {
setFormField(initialState);
setFormField({
...initialState,
status: formField.status // Pertahankan nilai status terpilih
});
setAlert({ show: false, message: '' });
};
@ -78,7 +90,7 @@ const AddDialog = () => {
<DialogTitle>Menu - Create</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody ref={parentRef}>
<DialogBody className="scrollable">
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
@ -133,24 +145,21 @@ const AddDialog = () => {
<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">Parent</label>
<FormControl fullWidth margin="dense">
<NativeSelect
defaultValue={30}
value={formField.id_parent}
onChange={(e: any) => setFormField({ ...formField, id_parent: e.target.value })}
inputProps={{
name: 'id_parent',
id: 'uncontrolled-native',
}}
>
<option value={''}>As Parent</option>
{
parents ? parents.map((el: any) => (
<option key={el.id} value={el.id}>{el.name}</option>
)) : ''
}
</NativeSelect>
</FormControl>
<Select
value={formField.id_parent}
onValueChange={(value) => setFormField({ ...formField, id_parent: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select As Parent" />
</SelectTrigger>
<SelectContent>
{parents.map((parent: any) => (
<SelectItem key={parent.id} value={parent.id}>
{parent.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
@ -190,21 +199,18 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span>
</label>
<FormControl fullWidth margin="dense">
<NativeSelect
defaultValue={30}
value={formField.status}
onChange={(e: any) => setFormField({ ...formField, status: e.target.value })}
inputProps={{
name: 'status',
id: 'uncontrolled-native',
}}
>
<option value={''}>Select</option>
<option value={"Y"}>Active</option>
<option value={"N"}>Inactive</option>
</NativeSelect>
</FormControl>
<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>

21
src/pages/menu/manage-menu/blocks/DeleteDialog.tsx
View File

@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { ChangeEvent, useCallback, useState } from 'react';
import { toast } from 'sonner';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { EnforceSwitch } from '@/components/switch';
import { Button } from '@/components/ui/button';
@ -13,14 +20,13 @@ const DeleteDialog = () => {
const { showDeleteDialog, handleDeleteDialog, selectedMenu }: any = useManageMenusContext();
const { reload } = useDataGrid();
const { DeleteData } = useCallApi();
const [enforce, setEnforce] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const doDeleteMenu = async () => {
const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/${enforce}`, {
const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/false`, {
id: selectedMenu.id
});
@ -44,15 +50,6 @@ const DeleteDialog = () => {
<Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">you will delete this data!</span>
<div className="mt-2 flex items-center gap-x-2">
<label className="form-label max-w-56">Hard Delete</label>
<EnforceSwitch
enforce={enforce}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setEnforce(e.target.checked);
}}
/>
</div>
</Alert>
{alert.show && (
<Alert variant="danger">

91
src/pages/menu/manage-menu/blocks/EditDialog.tsx
View File

@ -12,15 +12,25 @@ import {
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { FormControl,NativeSelect } from "@mui/material";
import { FormControl, NativeSelect } from '@mui/material';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
const API_URL = apiConfig.service_dashboard;
const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any = useManageMenusContext();
const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any =
useManageMenusContext();
const { reload } = useDataGrid();
const { PutData } = useCallApi();
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -38,11 +48,12 @@ const EditDialog = () => {
const handleUpdate = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
selectedMenu.module === '' ||
selectedMenu.name === '' ||
selectedMenu.link === '' ||
selectedMenu.id_parent === '' ||
selectedMenu.order_number === 0 ||
selectedMenu.status === ''
) {
@ -51,8 +62,8 @@ const EditDialog = () => {
}
const updateMenu = selectedMenu;
if (updateMenu.id_parent === null) updateMenu.id_parent = "";
delete updateMenu.parentName
if (updateMenu.id_parent === null) updateMenu.id_parent = '';
delete updateMenu.parentName;
const response = await PutData(`${API_URL}/menus/update/${selectedMenu.id}`, selectedMenu);
if (response?.status) {
handleEditDialog(false, null);
@ -67,7 +78,7 @@ const EditDialog = () => {
};
const resetForm = () => {
setSelectedMenu(initialState)
setSelectedMenu(initialState);
setAlert({ show: false, message: '' });
};
@ -78,7 +89,7 @@ const EditDialog = () => {
<DialogTitle>Menu - Update</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody>
<DialogBody className="scrollable">
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
@ -132,24 +143,27 @@ const EditDialog = () => {
<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">ID Parent</label>
<FormControl fullWidth margin="dense">
<NativeSelect
defaultValue={30}
value={selectedMenu.id_parent}
onChange={(e: any) => setSelectedMenu({ ...selectedMenu, id_parent: e.target.value })}
inputProps={{
name: 'id_parent',
id: 'uncontrolled-native',
}}
>
{
parents ? parents.map((el: any) => (
<option key={el.id} value={el.id}>{el.name}</option>
)) : ''
}
</NativeSelect>
</FormControl>
<label className="form-label flex items-center gap-1 max-w-56">Parent</label>
<Select
value={selectedMenu.id_parent || ''}
onValueChange={(value) => {
setSelectedMenu({
...selectedMenu,
id_parent: value === '' ? null : value
});
}}
>
<SelectTrigger>
<SelectValue placeholder="Select As Parent" />
</SelectTrigger>
<SelectContent>
{parents.map((parent: any) => (
<SelectItem key={parent.id} value={parent.id}>
{parent.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
@ -165,7 +179,10 @@ const EditDialog = () => {
value={selectedMenu.order_number === 0 ? '' : selectedMenu.order_number}
onChange={(e) => {
const value = parseInt(e.target.value, 10);
setSelectedMenu({ ...selectedMenu, order_number: isNaN(value) ? 0 : value });
setSelectedMenu({
...selectedMenu,
order_number: isNaN(value) ? 0 : value
});
}}
/>
</div>
@ -184,6 +201,26 @@ const EditDialog = () => {
</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={selectedMenu.status}
onValueChange={(value) => setSelectedMenu({ ...selectedMenu, 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">
Status<span className="text-red-500">*</span>
@ -203,7 +240,7 @@ const EditDialog = () => {
</NativeSelect>
</FormControl>
</div>
</div>
</div> */}
<div className="flex justify-end">
<Button className="btn btn-primary">Save Changes</Button>

25
src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
View File

@ -133,12 +133,27 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.status,
id: 'status',
accessorKey: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
cell: ({ row }) => {
const isActive = row.original.status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
},
{
id: 'actions',
@ -211,7 +226,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
link: child.link,
id_parent: child.id_parent,
status: child.status,
order_number: child.order_number
order_number: parent.order_number
};
});
@ -242,7 +257,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
const total_count = transformedData.length;
const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);
console.log(response.data);
console.log('data', paginatedData);
// setMenus(transformedData);
return { data: paginatedData, totalCount: total_count };
} catch (error) {

11
src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
View File

@ -8,6 +8,8 @@ import { ListToolBar } from '../blocks';
import { useCallApi } from '@/hooks';
interface ContextProps {
showSearchDialog: boolean;
handleSearchDialog: (show: boolean) => void;
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_user: string | null) => void;
showAddDialog: boolean;
@ -35,6 +37,8 @@ interface RoleListProps {
}
const initialProps: ContextProps = {
showSearchDialog: false,
handleSearchDialog: (show: boolean) => {},
showEditDialog: false,
handleEditDialog: () => {},
showAddDialog: false,
@ -52,6 +56,7 @@ const API_URL = apiConfig.service_dashboard;
const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) => {
/* state */
const [showEditDialog, setShowEditDialog] = useState(false);
const [showSearchDialog, setShowSearchDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedUser, setSelectedUser] = useState<string | null>(null);
@ -59,6 +64,10 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
const { GetData } = useCallApi();
/* action */
const handleSearchDialog = useCallback((show: boolean) => {
setShowSearchDialog(show);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
setSelectedUser(show ? selected_user : null);
setShowEditDialog(show);
@ -219,6 +228,8 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
return (
<ManageUserContext.Provider
value={{
showSearchDialog,
handleSearchDialog,
showEditDialog,
handleEditDialog,
selectedUser,

2
src/pages/transaction/Transaction.tsx
View File

@ -13,7 +13,7 @@ const Transaction = () => {
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
<span className="text-sm">Transaction</span>
</Link>
<Link underline="none" color="inherit">

538
src/pages/transaction/blocks/DetailTransaction.tsx Normal file
View File

@ -0,0 +1,538 @@
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
const API_URL = apiConfig.transaction;
const DetailTransaction = () => {
const { GetData } = useCallApi();
const {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
useEffect(() => {
const fetchTransactionDetails = async () => {
if (selectedTransactionId) {
try {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
id: selectedTransactionId
});
// console.log(response?.data);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
}
}
};
if (showDetailDialog && selectedTransactionId) {
fetchTransactionDetails();
}
}, [showDetailDialog, selectedTransactionId, GetData]);
const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Transaction Details</DialogTitle>
</DialogHeader>
<DialogBody>
{/* Tabs Navigation */}
<div className="flex border-b border-gray-200">
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('detail')}
>
Detail Transaction
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('origincustomer')}
>
Origin Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')}
>
Transaction Log
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('approve')}
>
Approval Log
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('p24')}
>
Log P24
</button>
</div>
{/* Tab Content */}
<div className="py-4 overflow-y-auto max-h-[400px]">
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Transaction Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p>
</div>
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.kind === 'P'
? transactionDetails?.purchase.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
: transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
{(() => {
let status;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Transaction Type</p>
<p className="font-medium">
{(() => {
let kind;
if (transactionDetails?.kind === 'T') {
kind = 'TRANSFER';
} else if (transactionDetails?.kind === 'P') {
kind = 'PURCHASE';
} else if (transactionDetails?.kind === 'W') {
kind = 'WITHDRAW';
} else if (transactionDetails?.kind === 'U') {
kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') {
kind = 'RETURN';
}
return kind;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Purchase
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Purchase
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.cashback)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">{transactionDetails?.purchase.cashback_point}</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.fee_amount)}</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Transaction Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p>
</div>
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
{(() => {
let status;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Transaction Type</p>
<p className="font-medium">
{(() => {
let kind;
if (transactionDetails?.kind === 'T') {
kind = 'TRANSFER';
} else if (transactionDetails?.kind === 'P') {
kind = 'PURCHASE';
} else if (transactionDetails?.kind === 'W') {
kind = 'WITHDRAW';
} else if (transactionDetails?.kind === 'U') {
kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') {
kind = 'RETURN';
}
return kind;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Reference</p>
<p className="font-medium">{transactionDetails?.transfer.reference}</p>
</div>
<div>
<p className="text-sm text-gray-500">Destination Iban</p>
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'origincustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.origin_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">Username</p>
<p className="font-medium">{transactionDetails?.origin_customer.username}</p>
</div>
</div>
</div>
)}
{activeTab === 'log' && (
<div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3>
<div className="border rounded-lg overflow-x-auto">
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th>
</tr>
</thead>
<tbody>
{transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 font-medium">
{(() => {
let status;
if (log.status === 'P') {
status = 'PENDING';
} else if (log.status === 'O') {
status = 'ON PROCESS';
} else if (log.status === 'F') {
status = 'FAILED';
} else if (log.status === 'C') {
status = 'COMPLETE';
}
return status;
})()}
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
)}
{activeTab === 'approve' && (
<div className="space-y-4">
<h3 className="font-semibold">Approval Logs</h3>
{transactionDetails?.log_approve.length === 0 ? (
<p className="text-sm text-gray-500">No data available</p>
) : (
<div className="border rounded-lg overflow-x-auto">
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
</tr>
</thead>
<tbody>
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 font-medium">
{(() => {
let status;
if (log.status === 'W') {
status = 'WAITING';
} else if (log.status === 'Y') {
status = 'APPROVE';
} else if (log.status === 'N') {
status = 'REJECT';
} else if (log.status === 'T') {
status = 'NO NEED';
}
return status;
})()}
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</div>
)}
{activeTab === 'p24' && (
<div className="space-y-4">
<h3 className="font-semibold">P24 Logs</h3>
{transactionDetails?.p24.length === 0 ? (
<p className="text-sm text-gray-500">No data available</p>
) : (
<div className="border rounded-lg overflow-x-auto">
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr>
</thead>
<tbody>
{transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</div>
)}
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default DetailTransaction;

103
src/pages/transaction/hooks/TransactionContext.tsx
View File

@ -8,6 +8,7 @@ import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router';
import DetailTransaction from '../blocks/DetailTransaction';
interface TransactionProps {
id: number;
@ -23,16 +24,26 @@ interface ContextProps {
order_direction: any,
filter: any
) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
showDetailDialog: boolean;
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
}
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 })
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { }
};
const ManageTransactionContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.transaction;
const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [transaction, setTransaction] = useState<TransactionProps[]>([]);
const { GetData } = useCallApi();
const navigate = useNavigate();
@ -42,6 +53,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const columns = useMemo<ColumnDef<any>[]>(
() => [
// {
// accessorKey: 'transaction_date',
// header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
// enableSorting: false,
// enableHiding: false,
// meta: {
// headerClassName: 'w-[250px]'
// }
// },
{
accessorKey: 'transaction_date',
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@ -49,8 +69,22 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
cell: ({ row }) => {
// Memformat tanggal dan waktu dari ISO ke format biasa (DD-MM-YYYY HH:MM:SS)
const transactionDate = new Date(row.original.transaction_date);
const formattedDateTime = transactionDate.toLocaleString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false // Gunakan format 24 jam
});
return formattedDateTime; // Format DD-MM-YYYY HH:MM:SS (menggunakan waktu yang sudah ada)
}
},
},
{
accessorKey: 'origin_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
@ -61,8 +95,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}
},
{
accessorFn: (row) =>
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.purchase.amount),
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.amount;
const transferAmount = row?.transfer?.amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
@ -73,19 +111,13 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
},
{
accessorFn: (row) => {
let fee;
if (row.kind === 'P') {
fee = row.purchase.fee_amount;
} else {
fee = row.transfer.fee_amount;
}
return fee.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
});
const purchaseAmount = row?.purchase?.fee_amount;
const transferAmount = row?.transfer?.fee_amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
},
accessorKey: 'fee',
header: ({ column }) => <DataGridColumnHeader title="Fee" column={column} />,
id: 'feeamount',
header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
@ -97,9 +129,9 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
let status;
if (row.status === 'C') {
status = 'COMPLETE';
} else if(row.status === 'F') {
} else if (row.status === 'F') {
status = 'FAILED';
} else if(row.status === 'O') {
} else if (row.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
@ -138,13 +170,19 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableSorting: false,
enableHiding: false,
cell: (data) => {
const row = data.row.original.id;
const row = data.row.original;
return (
<>
<button className="btn btn-sm btn-icon btn-clear btn-light">
<div key={`actions-${row.id}`}>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionId(row.id);
setShowDetailDialog(true);
}}
>
<KeenIcon icon="eye" />
</button>
</>
</div>
);
},
meta: {
@ -161,25 +199,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
let enddate;
let formattedFilter;
if (filter == undefined || filter.length==0) {
if (filter == undefined || filter.length == 0) {
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
startdate = today.toISOString().split('T')[0];
startdate = today.toISOString().split('T')[0];
enddate = nextWeek.toISOString().split('T')[0];
}else if (filter != undefined || filter.length!=0) {
} else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from;
enddate = filter[0].value.to;
}
formattedFilter = {
"Transactions.transaction_date": {
from: startdate+" 00:00:00",
to: enddate+" 23:59:59"
from: startdate + " 00:00:00",
to: enddate + " 23:59:59"
}
};
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,
@ -199,10 +237,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
return (
<ManageTransactionContext.Provider
value={{
getTransactionLists
getTransactionLists,
showDetailDialog,
setShowDetailDialog,
selectedTransactionId,
setSelectedTransactionId
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DetailTransaction />
<DataGridProvider
columns={columns}

14
src/pages/transfer/transferfee/blocks/AddDialog.tsx
View File

@ -150,9 +150,7 @@ const AddFeeDialog = () => {
e.preventDefault();
for (const key in formField) {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === 0
) {
formField[key as keyof typeof formField] === '' ) {
setAlert({ show: true, message: 'All fields must be filled out' });
return;
}
@ -163,7 +161,7 @@ const AddFeeDialog = () => {
...formField
});
if (response?.status) {
toast.success('Success Create Transfer Fee');
// toast.success('Success Create Transfer Fee');
reload();
resetForm();
handleAddFeeDialog(false);
@ -225,7 +223,7 @@ const AddFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Minimum Amount <span className="text-red-500">*</span></label>
<label className="form-label">Minimum Amount</label>
<NumericFormat
className="input"
value={formField.minimum_amount}
@ -242,7 +240,7 @@ const AddFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Maximum Amount <span className="text-red-500">*</span></label>
<label className="form-label">Maximum Amount</label>
<NumericFormat
className="input"
value={formField.maximum_amount}
@ -283,7 +281,7 @@ const AddFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Amount <span className="text-red-500">*</span></label>
<label className="form-label">Deduct Amount</label>
<NumericFormat
className="input"
value={formField.deduct_amount}
@ -300,7 +298,7 @@ const AddFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Percentage <span className="text-red-500">*</span></label>
<label className="form-label">Deduct Percentage</label>
<NumericFormat
className="input"
value={formField.deduct_percentage}

7
src/pages/transfer/transferfee/blocks/DeleteDialog.tsx
View File

@ -1,4 +1,4 @@
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle , DialogDescription} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Alert, useDataGrid } from '@/components';
import { useCallback, useState } from 'react';
@ -6,7 +6,6 @@ import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner';
import { useCallApi } from '@/hooks';
import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
import { DialogDescription } from '@radix-ui/react-dialog';
const API_URL = apiConfig.service_transaction;
@ -27,10 +26,10 @@ const DeleteDialog = () => {
if (response?.status) {
setAlert({ show: false, message: '' });
handleDeleteFeeDialog(false, null);
toast.success('Success Delete Product');
// toast.success('Success Delete Transaction Fee');
reload();
} else {
toast.error('Failed Delete Product');
// toast.error('Failed Delete Transaction Fee');
setAlert({ show: true, message: response?.message });
}
}, [selectedTransferFee]);

77
src/pages/transfer/transferfee/blocks/EditDialog.tsx
View File

@ -96,10 +96,11 @@ const EditFeeDialog = () => {
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, {
...formField, });
...formField
});
if (response?.status) {
handleEditFeeDialog(false, null);
toast.success('Success Update User');
// toast.success('Success Update Transaction Fee');
reload();
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
@ -252,7 +253,9 @@ const EditFeeDialog = () => {
<div className="card flex flex-col gap-5">
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<label className="form-label">Transfer Free Name <span className="text-red-500">*</span></label>
<label className="form-label">
Transfer Free Name <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
@ -264,7 +267,9 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Description <span className="text-red-500">*</span></label>
<label className="form-label">
Description <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
@ -276,7 +281,9 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Minimum Amount <span className="text-red-500">*</span></label>
<label className="form-label">
Minimum Amount
</label>
<NumericFormat
className="input"
value={formField.minimum_amount}
@ -293,7 +300,9 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Maximum Amount <span className="text-red-500">*</span></label>
<label className="form-label">
Maximum Amount
</label>
<NumericFormat
className="input"
value={formField.maximum_amount}
@ -310,7 +319,9 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Period Start <span className="text-red-500">*</span></label>
<label className="form-label">
Period Start <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="date"
@ -322,7 +333,9 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Period End <span className="text-red-500">*</span></label>
<label className="form-label">
Period End <span className="text-red-500">*</span>
</label>
<Input
className="input"
type="date"
@ -334,7 +347,8 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Amount <span className="text-red-500">*</span></label>
<label className="form-label">
Deduct Amount</label>
<NumericFormat
className="input"
value={formField.deduct_amount}
@ -351,7 +365,8 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Percentage <span className="text-red-500">*</span></label>
<label className="form-label">
Deduct Percentage </label>
<NumericFormat
className="input"
value={formField.deduct_percentage}
@ -368,7 +383,9 @@ const EditFeeDialog = () => {
/>
</div>
<div className="w-full">
<label className="form-label">Transacsion Type ID <span className="text-red-500">*</span></label>
<label className="form-label">
Transacsion Type ID <span className="text-red-500">*</span>
</label>
<Select
value={formField.transaction_type}
onValueChange={(transaction_type) =>
@ -388,7 +405,9 @@ const EditFeeDialog = () => {
</Select>
</div>
<div className="w-full">
<label className="form-label">Status <span className="text-red-500">*</span></label>
<label className="form-label">
Status <span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) => setFormField({ ...formField, status: value })}
@ -403,7 +422,9 @@ const EditFeeDialog = () => {
</Select>
</div>
<div className="w-full">
<label className="form-label">Status Included <span className="text-red-500">*</span></label>
<label className="form-label">
Status Included <span className="text-red-500">*</span>
</label>
<Select
value={formField.status_include}
onValueChange={(value) =>
@ -420,20 +441,22 @@ const EditFeeDialog = () => {
</Select>
</div>
<div className="w-full">
<label className="form-label">Priority <span className="text-red-500">*</span></label>
<Select
value={formField.priority}
onValueChange={(value) => setFormField({ ...formField, priority: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Priority" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
<label className="form-label">
Priority <span className="text-red-500">*</span>
</label>
<Select
value={formField.priority}
onValueChange={(value) => setFormField({ ...formField, priority: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Priority" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
{/* <div className="w-full">
<label className="form-label">Priotity <span className="text-red-500">*</span></label>

20
src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
View File

@ -10,10 +10,10 @@ import { EditFeeDialog } from '../blocks/EditDialog';
interface ContextProps {
showEditFeeDialog: boolean;
handleEditFeeDialog: (show: boolean, selectedTransferFee: string | null) => void;
handleEditFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
showAddFeeDialog: boolean;
handleAddFeeDialog: (show: boolean) => void;
handleDeleteFeeDialog: (show: boolean, selectedTransferFee: string | null) => void;
handleDeleteFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
showDeleteFeeDialog: boolean;
selectedTransferFee: string | null;
}
@ -39,8 +39,8 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
const [selectedTransferFee, setSelectedTransferFee] = useState<string | null>(null);
const { GetData } = useCallApi();
const handleEditFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => {
setSelectedTransferFee(show ? selectedTransferFee : null);
const handleEditFeeDialog = useCallback((show: boolean, selected_TransferFee: string | null) => {
setSelectedTransferFee(show ? selected_TransferFee : null);
setShowEditFeeDialog(show);
}, []);
@ -48,8 +48,8 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
setShowAddFeeDialog(show);
}, []);
const handleDeleteFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => {
setSelectedTransferFee(show ? selectedTransferFee : null);
const handleDeleteFeeDialog = useCallback((show: boolean, selected_TransferFee: string | null) => {
setSelectedTransferFee(show ? selected_TransferFee : null);
setShowDeleteFeeDialog(show);
}, []);
const doGetTransferFeeListData = async (
@ -62,7 +62,7 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() };
const response = await GetData(`${API_URL}/transactionfees/list`, {
limit: limit,
page: 1,
page: page+1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'ASC' : 'DESC',
@ -203,9 +203,9 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
return (
<div className="container mx-auto py-5">
<div className="flex justify-between items-center mb-4">
<h1 className="text-2xl font-semibold">Manage Transaction Fee</h1>
</div>
<div className="flex justify-between items-center mt-6">
<h1 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h1>
</div>
<ManageTransferFeeContext.Provider
value={{
showEditFeeDialog,

37
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -165,10 +165,7 @@ const AddDialog = () => {
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
for (const key in formField) {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === 0
) {
if (formField[key as keyof typeof formField] === '') {
setAlert({ show: true, message: 'All fields must be filled out' });
return;
}
@ -229,6 +226,7 @@ const AddDialog = () => {
<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">
Transfer Type Name
<span className="text-red-500">*</span>
</label>
<Input
className="input"
@ -246,6 +244,7 @@ const AddDialog = () => {
<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"
@ -325,7 +324,10 @@ const AddDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">From Account</label>
<label className="form-label flex items-center gap-1 max-w-56">
From Account
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.wallet_origin}
@ -350,7 +352,10 @@ const AddDialog = () => {
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">To Account</label>
<label className="form-label flex items-center gap-1 max-w-56">
To Account
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.wallet_destination}
@ -374,7 +379,10 @@ const AddDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Wallet Destination Fee</label>
<label className="form-label flex items-center gap-1 max-w-56">
Wallet Destination Fee
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.wallet_fee_destination}
@ -398,7 +406,10 @@ const AddDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Customer Fee Destination</label>
<label className="form-label flex items-center gap-1 max-w-56">
Customer Fee Destination
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.customer_fee_destination}
@ -423,7 +434,10 @@ const AddDialog = () => {
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status Approval</label>
<label className="form-label flex items-center gap-1 max-w-56">
Status Approval
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
@ -446,7 +460,10 @@ const AddDialog = () => {
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status</label>
<label className="form-label flex items-center gap-1 max-w-56">
Status
<span className="text-red-500"> *</span>
</label>
<div className="grow">
<Select

2
src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
View File

@ -34,7 +34,7 @@ const DeleteDialog = () => {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
reload();
setTimeout(() => toast.success('Success Delete Product'), 0);
setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
} else {
setAlert({ show: true, message: response?.message });
setTimeout(() => toast.error('Failed Delete Product'), 0);

49
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -124,7 +124,7 @@ const EditDialog = () => {
});
if (response?.status) {
handleEditDialog(false, null);
toast.success('Success Update User');
toast.success('Success Update Transfer Type');
reload();
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
@ -240,7 +240,7 @@ const EditDialog = () => {
<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">
Transfer Type Name
<span className="text-red-500">*</span>
<span className="text-red-500">*</span>
</label>
<Input
className="input"
@ -258,7 +258,7 @@ const EditDialog = () => {
<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>
<span className="text-red-500">*</span>
</label>
<Input
className="input"
@ -276,7 +276,6 @@ const EditDialog = () => {
<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">
Minimum Amount
<span className="text-red-500">*</span>
</label>
<NumericFormat
className="input"
@ -287,7 +286,7 @@ const EditDialog = () => {
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
@ -299,7 +298,6 @@ const EditDialog = () => {
<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">
Maximum Amount
<span className="text-red-500">*</span>
</label>
<NumericFormat
className="input"
@ -320,8 +318,7 @@ const EditDialog = () => {
<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">
Maximum Transaction per day
<span className="text-red-500">*</span>
Max Transaction per day
</label>
<NumericFormat
className="input"
@ -341,7 +338,9 @@ const EditDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">From Account<span className="text-red-500">*</span>
<label className="form-label flex items-center gap-1 max-w-56">
From Account
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
@ -354,8 +353,8 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
{wallet.Wallet_name}
</SelectItem>
))}
@ -367,7 +366,9 @@ const EditDialog = () => {
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">To Account<span className="text-red-500">*</span>
<label className="form-label flex items-center gap-1 max-w-56">
To Account
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
@ -381,7 +382,7 @@ const EditDialog = () => {
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
))}
@ -392,7 +393,9 @@ const EditDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Wallet Fee Destination<span className="text-red-500">*</span>
<label className="form-label flex items-center gap-1 max-w-56">
Wallet Destination Fee
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
@ -406,7 +409,7 @@ const EditDialog = () => {
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
))}
@ -417,7 +420,9 @@ const EditDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Select Customer<span className="text-red-500">*</span>
<label className="form-label flex items-center gap-1 max-w-56">
Customer Fee Destination
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
@ -427,7 +432,7 @@ const EditDialog = () => {
}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
<SelectValue placeholder="Select Customer" />
</SelectTrigger>
<SelectContent>
{customers.map((customer, idx) => (
@ -440,9 +445,12 @@ const EditDialog = () => {
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status Approval<span className="text-red-500">*</span>
<label className="form-label flex items-center gap-1 max-w-56">
Status Approval
<span className="text-red-500">*</span>
</label>
<div className="grow">
@ -466,7 +474,9 @@ const EditDialog = () => {
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status<span className="text-red-500">*</span>
<label className="form-label flex items-center gap-1 max-w-56">
Status
<span className="text-red-500"> *</span>
</label>
<div className="grow">
@ -487,6 +497,7 @@ const EditDialog = () => {
</div>
</div>
</div>
<div className="flex justify-end pt-2.5 gap-5">
<Button
variant={'outline'}

16
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -85,6 +85,14 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.wallet_origin?.name || 'N/A',
id: 'wallet_origin',
@ -127,14 +135,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.wallet_fee_destination.name,
id: 'wallet_fee_destination',

32
src/pages/wallet/wallet-history/WalletHistory.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Container, DataGridInner } from '@/components';
import { ManageWalletContextProvider } from './hooks/ManageWalletHistoryContext';
import { Breadcrumbs, Link } from '@mui/material';
const WalletHistory = () => {
return (
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet History</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">Wallet</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Wallet History</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ManageWalletContextProvider>
);
};
export default WalletHistory;

48
src/pages/wallet/wallet-history/blocks/ListToolbar.tsx Normal file
View File

@ -0,0 +1,48 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageWalletContext } from '../hooks/useManageWalletHistoryContext';
import { Button } from '@/components/ui/button';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageWalletContext();
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 Wallet"
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">
<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;

211
src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx Normal file
View File

@ -0,0 +1,211 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar';
interface WalletProps {
id: string;
name: string;
id_currency: string;
status: string;
}
interface ContextProps {
wallets: WalletProps[];
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
selectedWallet: WalletProps | null;
getWalletLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any
) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>;
}
const initialProps: ContextProps = {
wallets: [],
showAddDialog: false,
handleAddDialog: (show: boolean) => {},
showEditDialog: false,
handleEditDialog: (show: boolean, selected_wallet: object | null) => {},
showDeleteDialog: false,
handleDeleteDialog: (show: boolean, selected_wallet: object | null) => {},
selectedWallet: null,
getWalletLists: async () => undefined
};
const ManageWalletContext = createContext<ContextProps>(initialProps);
const API_URL_WALLET = apiConfig.service_wallet;
const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }) => {
const [wallets, setWallets] = useState<WalletProps[]>([]);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedWallet, setSelectedWallet] = useState<WalletProps | null>(null);
const { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_wallet: WalletProps | null) => {
setShowEditDialog(show);
setSelectedWallet(show ? selected_wallet : null);
}, []);
const handleDeleteDialog = useCallback((show: boolean, selected_wallet: WalletProps | null) => {
setShowDeleteDialog(show);
setSelectedWallet(show ? selected_wallet : null);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[550px]',
cellClassName: 'p-[20px]'
}
},
{
accessorFn: (row) => row.currency.name,
id: 'currency_name',
header: ({ column }) => <DataGridColumnHeader title="Currency" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.currency.prefix,
id: 'currency_prefix',
header: ({ column }) => <DataGridColumnHeader title="Prefix" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
cell: ({ row }) => {
const isActive = row.original.status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
// {
// id: 'actions',
// header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
// cell: (data) => {
// const row = data.row.original;
// return (
// <>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleEditDialog(true, row)}
// >
// <KeenIcon icon="notepad-edit" />
// </button>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleDeleteDialog(true, row)}
// >
// <KeenIcon icon="trash" />
// </button>
// </>
// );
// },
// meta: {
// headerClassName: 'w-[150px]'
// }
// }
],
[]
);
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: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
// filter: JSON.stringify(filter)
});
console.log(response?.data);
setWallets(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching Wallet', error);
}
};
return (
<ManageWalletContext.Provider
value={{
wallets,
showAddDialog,
handleAddDialog,
showEditDialog,
handleEditDialog,
showDeleteDialog,
handleDeleteDialog,
selectedWallet,
getWalletLists
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider
columns={columns}
pagination={{ size: 5 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters)
}
>
{children}
</DataGridProvider>
</ManageWalletContext.Provider>
);
};
export { ManageWalletContext, ManageWalletContextProvider };
export type { WalletProps };

12
src/pages/wallet/wallet-history/hooks/useManageWalletHistoryContext.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useContext } from 'react';
import { ManageWalletContext } from './ManageWalletHistoryContext';
const useManageWalletContext = () => {
const context = useContext(ManageWalletContext);
if (!context) {
throw new Error('useManageWalletContext must be used within a ManageWalletContextProvider');
}
return context;
};
export { useManageWalletContext };

7
src/routing/AppRoutingSetup.tsx
View File

@ -34,6 +34,8 @@ import ProductsMaster from '@/pages/master/products/ProductsMaster';
import ProviderMaster from '@/pages/master/provider/ProviderMaster';
import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
import WalletMaster from '@/pages/master/wallet/WalletMaster';
const AppRoutingSetup = (): ReactElement => {
return (
@ -55,6 +57,9 @@ const AppRoutingSetup = (): ReactElement => {
element={<PostoAdmsMaster />}
/>
<Route path="/master-data/conversion" element={<ConversionMaster />} />
<Route path="/master-data/wallet" element={<WalletMaster />} />
<Route path="/master-data/wallet-rule" element={<WalletRuleMaster />} />
<Route path="/account/home/user-profile" element={<AccountUserProfilePage />} />
@ -72,6 +77,8 @@ const AppRoutingSetup = (): ReactElement => {
<Route path="/transfer-type/transfer-type-management" element={<TransferType />} />
<Route path="/wallet/wallet-history" element={<WalletHistory />} />
<Route path="/notification/notification-management" element={<ManageNotification />} />
<Route path="/transaction" element={<Transaction />} />