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-07 18:16:10 +07:00
parent f1fe84bed2 c171716ee7
commit 755f68c5e4
65 changed files with 2834 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface SucosProps {
sucos_id: number;
@ -34,7 +35,7 @@ const API_URL = apiConfig.service_master_data;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog } = useManageAldeiasContext();
const { showAddDialog, handleAddDialog, selectedAldeias } = useManageAldeiasContext();
const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
@ -70,6 +71,13 @@ const AddDialog = () => {
handleAddDialog(false);
toast.success('Success Create Aldeias');
reload();
const createActivity = {
module: 'Manage Aldeias',
description: `Create Aldeia => ${selectedAldeias}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Error Create Aldeias');
setAlert({ show: true, message: 'Failed to create Aldeias. Please try again.' });

9
src/pages/master/aldeias/blocks/DeleteDialog.tsx
View File

@ -6,6 +6,7 @@ import { useCallback, useState } from 'react';
import { toast } from 'sonner';
import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -33,6 +34,14 @@ const DeleteDialog = () => {
handleDeleteDialog(false, null);
toast.success('Success Delete Aldeias');
reload();
const createActivity = {
module: 'Manage Aldeias',
description: `Edit Aldeia => ${selectedAldeias}`,
action: 'D'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Aldeias');

8
src/pages/master/aldeias/blocks/EditDialog.tsx
View File

@ -24,6 +24,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface SucosProps {
sucos_id: number;
@ -69,6 +70,13 @@ const EditDialog = () => {
handleEditDialog(false, null);
toast.success('Success Update Aldeias');
reload();
const createActivity = {
module: 'Manage Aldeias',
description: `Edit Aldeia => ${selectedAldeias}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Error Update Aldeias');
setAlert({ show: true, message: 'Error Update Aldeias' });

2
src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
View File

@ -89,7 +89,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
},
{
accessorFn: (row) => row.sucos.name,
id: 'sucos',
id: 'sucos_name',
header: ({ column }) => <DataGridColumnHeader title="Sucos" column={column} />,
enableSorting: true,
enableHiding: false,

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

@ -33,6 +33,7 @@ import {
SelectValue
} from '@/components/ui/select';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface CurrencyProps {
ID: string;
name: string;
@ -80,6 +81,13 @@ const AddDialog = () => {
resetForm();
handleAddDialog(false);
toast.success('Success Create Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Create Conversion => ${selectedConversion}`,
action: 'C'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Conversion');
@ -121,7 +129,7 @@ const AddDialog = () => {
}
doCreateConversion(e);
console.log(formField);
// console.log(formField);
setAlert({ show: false, message: '' });
};

12
src/pages/master/conversion/blocks/DeleteDialog.tsx
View File

@ -13,6 +13,7 @@ import {
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { DialogDescription } from '@radix-ui/react-dialog';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_wallet;
@ -30,7 +31,7 @@ const DeleteDialog = () => {
toast.error('No Conversion selected');
return;
}
console.log(selectedConversion);
// console.log(selectedConversion);
const response = await DeleteData(
`${API_URL}/dashboard/conversion/${selectedConversion}`,
{ id: selectedConversion }
@ -40,13 +41,20 @@ const DeleteDialog = () => {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Delete Conversion => ${selectedConversion}`,
action: 'D'
};
doSaveLogActivity(createActivity);
reload();
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Conversion');
}
}, [selectedConversion, DeleteData, handleDeleteDialog, reload]);
console.log(selectedConversion);
// 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">

8
src/pages/master/conversion/blocks/EditDialog.tsx
View File

@ -33,6 +33,7 @@ import {
SelectValue
} from '@/components/ui/select';
import { useManageConversionContext } from '../hooks/useManageConversionContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface CurrencyProps {
ID: string;
name: string;
@ -82,6 +83,13 @@ const EditDialog = () => {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update Conversion');
const createActivity = {
module: 'Manage Conversion',
description: `Update Conversion => ${selectedConversion}`,
action: 'U'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Conversion');

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

@ -159,7 +159,7 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
) => {
sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
console.log(sorting);
// console.log(sorting);
const response = await GetData(`${API_URL}/dashboard/conversion/`, {
limit: limit,
page: page + 1,
@ -168,7 +168,7 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
order_direction: sorting[0].desc ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
console.log(response?.data);
// console.log(response?.data);
return { data: response?.data.list, totalCount: response?.data.total_count };
};

44
src/pages/master/currency/CurrencyMaster.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Container, DataGridInner } from '@/components';
import { ManageCurrencyContextProvider } from './hooks/ManageCurrencyContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Delete } from 'lucide-react';
import AddDialog from './blocks/AddDialog';
import DeleteDialog from './blocks/DeleteDialog';
import EditDialog from './blocks/EditDialog';
// import EditDialog from './blocks/EditDialog';
const CurrencyMaster = () => {
return (
<ManageCurrencyContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</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 Currency</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<DeleteDialog />
<EditDialog />
{/* <EditDialog/>
<DeleteDialog/> */}
</Container>
</ManageCurrencyContextProvider>
);
};
export default CurrencyMaster;

234
src/pages/master/currency/blocks/AddDialog.tsx Normal file
View File

@ -0,0 +1,234 @@
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 { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
import { prefix } from 'stylis';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface CurrencyProps {
ID: string;
name: string;
}
const API_URL = apiConfig.service_wallet;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog, selectedCurrency } = useManageCurrencyContext();
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 = {
code: '',
name: '',
prefix: '',
status: '',
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 doCreateCurrency = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL}/dashboard/currency/`, formField);
if (response?.status) {
resetForm();
handleAddDialog(false);
toast.success('Success Create Currency');
const createActivity = {
module: 'Manage Currency',
description: `Create Currency=> ${selectedCurrency}`,
action: 'C'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Currency');
setAlert({ show: true, message: 'Failed to create Currency. Please try again.' });
}
},
[formField]
);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.code === '' ||
formField.name === '' ||
formField.prefix === '' ||
formField.status === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
doCreateCurrency(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => {
if (showAddDialog) {
setFormField({
...formField,
created_by: parsedUser.username,
created_at: formattedTime
});
}
}, [formattedTime]);
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>Cuurency - 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="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">
Code<span className="text-red-500">*</span>
</label>
<Input
className="input col-span-6"
type="text"
autoComplete="off"
value={formField.code}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, code: target.value }))
}
/>
</div>
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">
Name<span className="text-red-500">*</span>
</label>
<Input
className="input col-span-6"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">
Prefix<span className="text-red-500">*</span>
</label>
<Input
className="input col-span-6"
type="text"
autoComplete="off"
value={formField.prefix}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, prefix: target.value }))
}
/>
</div>
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">
Status<span className="text-red-500">*</span>
</label>
<div className="col-span-6">
<Select
value={formField.status}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status: value }))
}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select" />
</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;

56
src/pages/master/wallet/blocks/DeleteDialog.tsx → src/pages/master/currency/blocks/DeleteDialog.tsx
View File

@ -1,54 +1,62 @@
import { useCallApi } from '@/hooks';
import { useManageWalletContext } from '../hooks/useManageWalletContext';
import { Alert, useDataGrid } from '@/components';
import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
import { useCallback, useState } from 'react';
import { toast } from 'sonner';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
import { toast } from 'sonner';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { DialogDescription } from '@radix-ui/react-dialog';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
const API_URL = apiConfig.service_wallet;
const DeleteDialog = () => {
const { showDeleteDialog, handleDeleteDialog, selectedWallet } = useManageWalletContext();
const { DeleteData } = useCallApi();
const { showDeleteDialog, handleDeleteDialog, selectedCurrency } = useManageCurrencyContext();
const { reload } = useDataGrid();
const [alert, setAlert] = useState({ show: false, message: '' });
const { DeleteData } = useCallApi();
const [alert, setAlert] = useState({
show: false,
message: ''
});
const doDeleteWallet = useCallback(async () => {
if (!selectedWallet) {
toast.error('No wallet selected');
const doDeleteCurrency = useCallback(async () => {
if (!selectedCurrency) {
toast.error('No Currency selected');
return;
}
const response = await DeleteData(
`${API_URL}/wallet/delete/${selectedWallet.Wallet_id}/false`,
{
id: selectedWallet.Wallet_id
}
);
// console.log(selectedCurrency);
const response = await DeleteData(`${API_URL}/dashboard/currency/${selectedCurrency}`, {
id: selectedCurrency
});
if (response?.status) {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Wallet');
toast.success('Success Delete Currency');
const createActivity = {
module: 'Manage Currency',
description: `Delete Currency=> ${selectedCurrency}`,
action: 'D'
};
doSaveLogActivity(createActivity);
reload();
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Wallet');
toast.error('Failed Delete Currency');
}
}, [selectedWallet, handleDeleteDialog, DeleteData, reload]);
}, [selectedCurrency, DeleteData, handleDeleteDialog, reload]);
// console.log(selectedCurrency);
return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden">
<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>
@ -66,7 +74,7 @@ const DeleteDialog = () => {
<Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
Cancel
</Button>
<Button variant="destructive" onClick={doDeleteWallet}>
<Button variant="destructive" onClick={doDeleteCurrency}>
Delete
</Button>
</DialogFooter>

228
src/pages/master/currency/blocks/EditDialog.tsx Normal file
View File

@ -0,0 +1,228 @@
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 { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface CurrencyProps {
ID: string;
name: string;
}
const API_URL = apiConfig.service_wallet;
const EditDialog = () => {
const parentRef = useRef<any | null>(null);
const { showEditDialog, handleEditDialog, selectedCurrency } = useManageCurrencyContext();
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 = {
code: '',
name: '',
prefix: '',
status: '',
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 doUpdateCurrency = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!showEditDialog) return;
const response = await PutData(`${API_URL}/dashboard/currency/${selectedCurrency}`, {
...formField
});
if (response?.status) {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update Currency');
const createActivity = {
module: 'Manage Currency',
description: `Update Currency=> ${selectedCurrency}`,
action: 'U'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Error Create Currency');
setAlert({ show: true, message: 'Failed to Update Currency. Please try again.' });
}
},
[formField]
);
const doGetCurrencyById = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
// console.log('Transaction Type: ', response?.data);
if (response?.status) {
setFormField((prev) => ({
...prev,
status: response.data.status,
code: response.data.code,
name: response.data.name,
prefix: response.data.prefix
}));
}
// console.log('form fieldd Transaction Type: ', formField);
}, []);
useEffect(() => {
if (selectedCurrency) {
doGetCurrencyById(selectedCurrency);
}
}, [selectedCurrency]);
useEffect(() => {
if (showEditDialog) {
setFormField({
...formField,
created_by: parsedUser.username,
created_at: formattedTime
});
}
}, [formattedTime]);
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>Currency - 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={doUpdateCurrency}>
<div className="card-body grid gap-5">
<div className="w-full">
<label className="form-label">
Code
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.code}
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Name
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.name}
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Prefix
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.prefix}
onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Status
<span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select" defaultValue={formField.status} />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
</div>
</div>
</form>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default EditDialog;

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

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

199
src/pages/master/currency/hooks/ManageCurrencyContext.tsx Normal file
View File

@ -0,0 +1,199 @@
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 { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar';
import DeleteDialog from '../blocks/DeleteDialog';
interface Currency {
id: string;
code: string;
name: string;
prefix: string;
status: string;
}
interface ContextProps {
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_currency: string | null) => void;
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_currency: string | null) => void;
selectedCurrency: string | null;
currency: string | null;
}
const initialProps: ContextProps = {
showEditDialog: false,
handleEditDialog: () => {},
showAddDialog: false,
handleAddDialog: () => {},
showDeleteDialog: false,
handleDeleteDialog: () => {},
selectedCurrency: null,
currency: null
};
const ManageCurrencyContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_wallet;
const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode }) => {
const [showEditDialog, setShowEditDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const { GetData } = useCallApi();
const [selectedCurrency, setSelectedCurrency] = useState<string | null>(null);
const [currency, setCurrency] = useState<string | null>(null);
const handleEditDialog = useCallback((show: boolean, selected_currency: string | null) => {
setSelectedCurrency(show ? selected_currency : null);
setShowEditDialog(show);
}, []);
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const handleDeleteDialog = useCallback((show: boolean, selected_currency: string | null) => {
setShowDeleteDialog(show);
setSelectedCurrency(show ? selected_currency : null);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row) => row.code,
id: 'code',
header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row) => row.prefix,
id: 'prefix',
header: ({ column }) => <DataGridColumnHeader title="Prefix" 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>
);
}
},
{
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.ID)}
>
<KeenIcon icon="notepad-edit" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row.ID)}
>
<KeenIcon icon="trash" />
</button>
</>
);
},
meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
}
],
[handleEditDialog, handleDeleteDialog]
);
const doGetCurrency = 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/currency/`, {
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 (
<div className="min-h-screen">
<ManageCurrencyContext.Provider
value={{
showEditDialog,
handleEditDialog,
showAddDialog,
handleAddDialog,
showDeleteDialog,
handleDeleteDialog,
selectedCurrency,
currency
}}
>
<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 }) =>
doGetCurrency(pageIndex, pageSize, sorting)
}
>
{children}
</DataGridProvider>
</div>
</ManageCurrencyContext.Provider>
</div>
);
};
export { ManageCurrencyContext, ManageCurrencyContextProvider };
export type { Currency };

13
src/pages/master/currency/hooks/useManageCurrencyContext.tsx Normal file
View File

@ -0,0 +1,13 @@
import { useContext } from 'react';
import {ManageCurrencyContextProvider } from './ManageCurrencyContext';
import { ManageCurrencyContext } from '../hooks/ManageCurrencyContext';
const useManageCurrencyContext = () => {
const context = useContext(ManageCurrencyContext);
if (!context) throw new Error('useManageCurrencyContext must be used within AuthProvider');
return context;
};
export { useManageCurrencyContext };

12
src/pages/master/municipios/blocks/AddDialog.tsx
View File

@ -55,13 +55,13 @@ const AddDialog = () => {
resetForm();
reload();
toast.success('Municipio created successfully!');
// const createActivity = {
// module: 'Manage Municipio',
// description: `Create Municipio => ${selectedMunicipios}`,
// action: 'C'
// };
const createActivity = {
module: 'Manage Municipios',
description: `Create Municipio => ${selectedMunicipios}`,
action: 'C'
};
// doSaveLogActivity(createActivity);
doSaveLogActivity(createActivity);
} else {
toast.error('Failed to create municipio.');
setAlert({ show: true, message: 'Failed to create municipio. Please try again.' });

25
src/pages/master/municipios/blocks/DeleteDialog.tsx
View File

@ -4,9 +4,16 @@ 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 {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { DialogDescription } from '@radix-ui/react-dialog';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -25,16 +32,23 @@ const DeleteDialog = () => {
return;
}
const response = await DeleteData(
`${API_URL}/municipios/delete/${selectedMunicipios}/false`,
{ id: selectedMunicipios }
);
const response = await DeleteData(`${API_URL}/municipios/delete/${selectedMunicipios}/false`, {
id: selectedMunicipios
});
if (response?.status) {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Municipio');
reload();
const createActivity = {
module: 'Manage Municipios',
description: `Edit Municipio',', => ${selectedMunicipios}`,
action: 'D'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Municipio');
@ -43,7 +57,6 @@ const DeleteDialog = () => {
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>

12
src/pages/master/municipios/blocks/EditDialog.tsx
View File

@ -60,13 +60,13 @@ const EditDialog = () => {
resetForm();
toast.success('Success update municipio');
reload();
// const createActivity = {
// module: 'Manage Municipio',
// description: `Edit Municipio => ${selectedMunicipios}`,
// action: 'U'
// };
const createActivity = {
module: 'Manage Municipios',
description: `Edit Municipio => ${selectedMunicipios}`,
action: 'U'
};
// doSaveLogActivity(createActivity);
doSaveLogActivity(createActivity);
} else {
toast.error('Failed update user');
setAlert({ show: true, message: 'Failed to update municipio. Please try again.' });

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

@ -24,6 +24,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface MunicipioProps {
id: number;
@ -34,7 +35,7 @@ const API_URL = apiConfig.service_master_data;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog } = useManagePostoAdmsContext();
const { showAddDialog, handleAddDialog, selectedPostoAdms } = useManagePostoAdmsContext();
const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
@ -72,6 +73,13 @@ const AddDialog = () => {
resetForm();
reload();
toast.success('Posto Adm created successfully!');
const createActivity = {
module: 'Manage Posto Administrativo',
description: `Create PostoAdms => ${selectedPostoAdms}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed to create Posto Adm. Please try again.');
setAlert({ show: true, message: 'Failed to create Posto Adm. Please try again.' });

24
src/pages/master/postoadms/blocks/DeleteDialog.tsx
View File

@ -4,8 +4,16 @@ import { useCallApi } from '@/hooks';
import { useCallback, useState } from 'react';
import { apiConfig } from '@/config/api.config';
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 { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -24,16 +32,22 @@ const DeleteDialog = () => {
return;
}
const response = await DeleteData(
`${API_URL}/postoadms/delete/${selectedPostoAdms}/false`,
{ id: selectedPostoAdms }
);
const response = await DeleteData(`${API_URL}/postoadms/delete/${selectedPostoAdms}/false`, {
id: selectedPostoAdms
});
if (response?.status) {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Posto Adm');
reload();
const createActivity = {
module: 'Manage Posto Administrativo',
description: `Edit PostoAdms => ${selectedPostoAdms}`,
action: 'D'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Posto Adm');

9
src/pages/master/postoadms/blocks/EditDialog.tsx
View File

@ -24,6 +24,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface MunicipioProps {
id: number;
@ -72,6 +73,14 @@ const EditDialog = () => {
resetForm();
toast.success('Success Update Posto Adm');
reload();
const createActivity = {
module: 'Manage Posto Administrativo',
description: `Edit PostoAdms => ${selectedPostoAdms}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Error Update Posto Adm');
setAlert({ show: true, message: 'Failed to update posto adm. Please try again.' });

31
src/pages/master/products/blocks/AddDialog.tsx
View File

@ -22,6 +22,7 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface ProviderProps {
provider_id: number;
@ -32,7 +33,7 @@ const API_URL = apiConfig.service_master_data;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const parsedUser = getAuth()?.user;
const { showAddDialog, handleAddDialog } = useManageProductsContext();
const { showAddDialog, handleAddDialog, selectedProducts } = useManageProductsContext();
const { PostData, GetData } = useCallApi();
const { reload } = useDataGrid();
const [alert, setAlert] = useState({
@ -75,6 +76,14 @@ const AddDialog = () => {
handleAddDialog(false);
toast.success('Success Create Product');
reload();
const createActivity = {
module: 'Manage Products',
description: `Create Product => ${selectedProducts}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Create Product');
setAlert({ show: true, message: response?.message });
@ -173,9 +182,7 @@ const AddDialog = () => {
className="input"
type="text"
value={formField.name}
onChange={(e) =>
setFormField({ ...formField, name: e.target.value })
}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div>
</div>
@ -189,9 +196,7 @@ const AddDialog = () => {
className="input"
type="text"
value={formField.type}
onChange={(e) =>
setFormField({ ...formField, type: e.target.value })
}
onChange={(e) => setFormField({ ...formField, type: e.target.value })}
/>
</div>
</div>
@ -205,9 +210,7 @@ const AddDialog = () => {
className="input"
type="text"
value={formField.code}
onChange={(e) =>
setFormField({ ...formField, code: e.target.value })
}
onChange={(e) => setFormField({ ...formField, code: e.target.value })}
/>
</div>
</div>
@ -221,9 +224,7 @@ const AddDialog = () => {
className="input"
type="text"
value={formField.description}
onChange={(e) =>
setFormField({ ...formField, description: e.target.value })
}
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
/>
</div>
</div>
@ -323,9 +324,7 @@ const AddDialog = () => {
</label>
<Select
value={formField.status}
onValueChange={(value) =>
setFormField({ ...formField, status: value })
}
onValueChange={(value) => setFormField({ ...formField, status: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />

17
src/pages/master/products/blocks/DeleteDialog.tsx
View File

@ -4,8 +4,16 @@ import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { 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 { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -30,6 +38,13 @@ const DeleteDialog = () => {
handleDeleteDialog(false, null);
toast.success('Success Delete Product');
reload();
const createActivity = {
module: 'Manage Product',
description: `Edit Product',', => ${selectedProducts}`,
action: 'D'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Product');

9
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -22,6 +22,7 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface ProviderProps {
provider_id: string;
@ -74,6 +75,14 @@ const EditDialog = () => {
handleEditDialog(false, null);
toast.success('Product updated successfully.');
reload();
const createActivity = {
module: 'Manage Products',
description: `Edit Product => ${selectedProducts}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed to update Product. Please try again.');
setAlert({ show: true, message: 'Failed to update Product. Please try again.' });

10
src/pages/master/products/hooks/ManageProductsContext.tsx
View File

@ -73,7 +73,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.products_name,
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true,
@ -83,7 +83,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
}
},
{
accessorFn: (row) => row.products_description,
accessorFn: (row) => row.description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
@ -93,7 +93,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
}
},
{
accessorFn: (row) => row.products_price_point,
accessorFn: (row) => row.price_point,
id: 'price_point',
header: ({ column }) => <DataGridColumnHeader title="Price Point" column={column} />,
enableSorting: true,
@ -103,7 +103,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
}
},
{
accessorFn: (row) => row.products_price_cash,
accessorFn: (row) => row.price_cash,
id: 'price_cash',
header: ({ column }) => <DataGridColumnHeader title="Price Cash" column={column} />,
enableSorting: true,
@ -186,7 +186,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
sorting={[{ id: 'Product.id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getProductsLists(pageIndex, pageSize, sorting, columnFilters)

11
src/pages/master/profession/blocks/AddDialog.tsx
View File

@ -15,13 +15,14 @@ import {
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { reload } = useDataGrid();
const { PostData } = useCallApi();
const { showAddDialog, handleAddDialog } = useManageProfessionContext();
const { showAddDialog, handleAddDialog, selectedProfession } = useManageProfessionContext();
const parsedUser = getAuth()?.user;
const [alert, setAlert] = useState({
show: false,
@ -53,6 +54,14 @@ const AddDialog = () => {
handleAddDialog(false);
toast.success('Success Create Profession');
reload();
const createActivity = {
module: 'Manage Profession',
description: `Create Profession => ${selectedProfession}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Create Profession');
setAlert({ show: true, message: response?.message });

17
src/pages/master/profession/blocks/DeleteDialog.tsx
View File

@ -4,8 +4,16 @@ import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { 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 { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -29,6 +37,13 @@ const DeleteDialog = () => {
handleDeleteDialog(false, null);
toast.success('Success Delete Profession');
reload();
const createActivity = {
module: 'Manage Profession',
description: `Edit Profession', => ${selectedProfession}`,
action: 'D'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Profession');

9
src/pages/master/profession/blocks/EditDialog.tsx
View File

@ -15,6 +15,7 @@ import {
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
const EditDialog = () => {
@ -54,6 +55,14 @@ const EditDialog = () => {
handleEditDialog(false, null);
toast.success('Success Update Profession');
reload();
const createActivity = {
module: 'Manage Profession',
description: `Edit Profession => ${selectedProfession}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Update Profession');
setAlert({ show: true, message: 'Failed Update Profession' });

26
src/pages/master/provider/blocks/AddDialog.tsx
View File

@ -31,6 +31,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
export interface CustomerProps {
id: string;
@ -50,7 +51,7 @@ const API_URL_MASTERDATA = apiConfig.service_master_data;
const API_URL_TRANSACTION = apiConfig.service_transaction;
const AddDialog = () => {
const { showAddDialog, handleAddDialog } = useManageProviderContext();
const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext();
const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi();
const parentRef = useRef<any | null>(null);
@ -91,6 +92,13 @@ const AddDialog = () => {
resetForm();
handleAddDialog(false);
toast.success('Success Create Provider');
const createActivity = {
module: 'Manage Provider',
description: `Create Provider => ${selectedProvider}`,
action: 'C'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Failed Create Provider');
@ -293,7 +301,11 @@ const AddDialog = () => {
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
@ -301,13 +313,19 @@ const AddDialog = () => {
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList>
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,

17
src/pages/master/provider/blocks/DeleteDialog.tsx
View File

@ -4,8 +4,16 @@ import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { 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 { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -29,6 +37,13 @@ const DeleteDialog = () => {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
toast.success('Success Delete Provider');
const createActivity = {
module: 'Manage Provider',
description: `Delete Provider => ${selectedProvider}`,
action: 'D'
};
doSaveLogActivity(createActivity);
reload();
} else {
setAlert({ show: true, message: response?.message });

24
src/pages/master/provider/blocks/EditDialog.tsx
View File

@ -32,6 +32,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_MASTERDATA = apiConfig.service_master_data;
@ -82,6 +83,13 @@ const EditDialog = () => {
resetForm();
handleEditDialog(false, null);
toast.success('Provider updated successfully.');
const createActivity = {
module: 'Manage Provider',
description: `Update Provider => ${selectedProvider}`,
action: 'U'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Failed to update provider.');
@ -308,7 +316,11 @@ const EditDialog = () => {
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find((customer) => customer.id === formField.agent)
?.fullname || 'Select Agent'}
</button>
@ -316,13 +328,19 @@ const EditDialog = () => {
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList>
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,

6
src/pages/master/provider/blocks/ListToolbar.tsx
View File

@ -16,8 +16,10 @@ const ListToolbar = () => {
<input
type="text"
placeholder="Search Provider"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
value={(table.getColumn('provider_name')?.getFilterValue() as string) ?? ''}
onChange={(event) =>
table.getColumn('provider_name')?.setFilterValue(event.target.value)
}
/>
</label>
{/* <DefaultTooltip title={'Filter'} placement={'top'}>

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

@ -75,7 +75,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
() => [
{
accessorFn: (row) => row.provider_name,
id: 'name',
id: 'provider_name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true,
enableHiding: false,
@ -162,8 +162,9 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
const getProviderLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
const field = 'Provider.name';
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
filter = filter.length == 0 ? {} : { [field]: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL}/provider/list`, {
limit,
page: page + 1,
@ -172,7 +173,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) {

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

@ -24,6 +24,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface PostoAdmsProps {
PostoAdms_id: number;
@ -33,7 +34,7 @@ const API_URL = apiConfig.service_master_data;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog } = useManageSucosContext();
const { showAddDialog, handleAddDialog, selectedSucos } = useManageSucosContext();
const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
@ -69,6 +70,13 @@ const AddDialog = () => {
handleAddDialog(false);
reload();
toast.success('Sucos created successfully!');
const createActivity = {
module: 'Manage Sucos',
description: `Create Suco => ${selectedSucos}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed to create Sucos Please try again.');
setAlert({ show: true, message: 'Failed to create Sucos Please try again.' });

17
src/pages/master/sucos/blocks/DeleteDialog.tsx
View File

@ -4,8 +4,16 @@ import { useCallback, useState } from 'react';
import { useCallApi } from '@/hooks';
import { Alert, useDataGrid } from '@/components';
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 { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data;
@ -31,6 +39,13 @@ const DeleteDialog = () => {
handleDeleteDialog(false, null);
toast.success('Success Delete Sucos');
reload();
const createActivity = {
module: 'Manage Sucos',
description: `Edit Suco => ${selectedSucos}`,
action: 'D'
};
doSaveLogActivity(createActivity);
} else {
setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Sucos');

8
src/pages/master/sucos/blocks/EditDialog.tsx
View File

@ -24,6 +24,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface PostoAdmsProps {
PostoAdms_id: number; // Ubah ke PostoAdms_id
@ -76,6 +77,13 @@ const EditDialog = () => {
handleEditDialog(false, null);
toast.success('Success Update Sucos');
reload();
const createActivity = {
module: 'Manage Sucos',
description: `Edit Suco => ${selectedSucos}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Update Sucos');
setAlert({ show: true, message: 'Failed Update Sucos. Please try again' });

2
src/pages/master/sucos/hooks/ManageSucosContext.tsx
View File

@ -153,7 +153,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
const response = await GetData(`${API_URL}/sucos/list`, {
limit: limit,
page: page + 1,
with_deleted: true,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)

2
src/pages/master/wallet/WalletMaster.tsx
View File

@ -3,7 +3,6 @@ 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 (
@ -28,7 +27,6 @@ const WalletMaster = () => {
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageWalletContextProvider>
);

11
src/pages/master/wallet/blocks/AddDialog.tsx
View File

@ -22,6 +22,7 @@ import {
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface CurrencyProps {
ID: string;
@ -42,7 +43,7 @@ const API_URL_WALLET = apiConfig.service_wallet;
const API_URL_MASTER_DATA = apiConfig.service_master_data;
const AddDialog = () => {
const { showAddDialog, handleAddDialog } = useManageWalletContext();
const { showAddDialog, handleAddDialog, selectedWallet } = useManageWalletContext();
const { GetData, PostData } = useCallApi();
const { reload } = useDataGrid();
const [alert, setAlert] = useState({
@ -101,6 +102,14 @@ const AddDialog = () => {
handleAddDialog(false);
toast.success('Success Create Wallet');
reload();
const createActivity = {
module: 'Manage Wallet',
description: `Create Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Create Wallet');
setAlert({ show: true, message: 'Failed Create Wallet' });

46
src/pages/master/wallet/blocks/EditDialog.tsx
View File

@ -21,6 +21,7 @@ import {
SelectValue
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface CurrencyProps {
ID: string;
@ -53,13 +54,11 @@ const EditDialog = () => {
description: string;
status: string;
group: string[];
currency_id: string;
} = {
name: '',
description: '',
status: '',
group: [],
currency_id: ''
group: []
};
const [formField, setFormField] = useState(initialState);
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
@ -71,18 +70,26 @@ const EditDialog = () => {
};
const doUpdateWallet = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
async (payload: { name: string; description: string; status: string }) => {
// e.preventDefault();
const response = await PutData(
`${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`,
formField
payload
);
if (response?.status) {
handleEditDialog(false, null);
toast.success('Success Update Wallet');
reload();
const createActivity = {
module: 'Manage Wallet',
description: `Edit Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Update Wallet');
setAlert({ show: true, message: 'Failed Update Wallet' });
@ -94,8 +101,14 @@ const EditDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(formField);
doUpdateWallet(e);
// const { name, description, status } = formField;
const payload = {
name: formField.name,
description: formField.description,
status: formField.status
};
// console.log(payload);
doUpdateWallet(payload);
setAlert({ show: false, message: '' });
};
@ -156,8 +169,6 @@ const EditDialog = () => {
.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 }]);
@ -182,7 +193,7 @@ const EditDialog = () => {
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">
@ -246,17 +257,10 @@ const EditDialog = () => {
</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 />
<Input type="text" placeholder="Empty" value={selectedGroupNames} readOnly />
</div>
</div>
@ -264,7 +268,9 @@ const EditDialog = () => {
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Update</Button>
<Button variant="default" type="submit">
Update
</Button>
</div>
</div>
</form>

2
src/pages/master/wallet/blocks/ListToolbar.tsx
View File

@ -15,7 +15,7 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Provider"
placeholder="Search Wallet"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>

10
src/pages/master/wallet/hooks/ManageWalletContext.tsx
View File

@ -131,12 +131,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
>
<KeenIcon icon="notepad-edit" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row)}
>
<KeenIcon icon="trash" />
</button>
</>
);
},
@ -152,7 +146,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
limit,
page: page + 1,
@ -189,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 25 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
sorting={[{ id: 'name', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters)

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

@ -31,6 +31,7 @@ import {
CommandList
} from '@/components/ui/command';
import { NumericFormat } from 'react-number-format';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface GroupProps {
ID: string;
@ -48,7 +49,7 @@ interface WalletProps {
const API_URL_WALLET = apiConfig.service_wallet;
const AddDialog = () => {
const { showAddDialog, handleAddDialog } = useManageWalletRuleContext();
const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi();
const [open, setOpen] = useState(false);
@ -94,6 +95,14 @@ const AddDialog = () => {
handleAddDialog(false);
toast.success('Success Create Wallet Rule');
reload();
const createActivity = {
module: 'Manage Wallet Rule',
description: `Create Wallet Rule => ${selectedWalletRule?.ID}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Create Wallet Rule');
setAlert({ show: true, message: 'Failed Create Wallet Rule' });

8
src/pages/master/walletRule/blocks/DeleteDialog.tsx
View File

@ -13,6 +13,7 @@ import {
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL_WALLET = apiConfig.service_wallet;
@ -37,6 +38,13 @@ const DeleteDialog = () => {
toast.success('Wallet rule deleted successfully');
handleDeleteDialog(false, null);
reload();
const createActivity = {
module: 'Manage Wallet Rule',
description: `Edit Wallet Rule', => ${selectedWalletRule.ID}`,
action: 'D'
};
doSaveLogActivity(createActivity);
setAlert({ show: false, message: '' });
} else {
toast.error('Failed to delete wallet rule');

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

@ -31,6 +31,7 @@ import {
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface GroupProps {
ID: string;
@ -97,6 +98,14 @@ const EditDialog = () => {
handleEditDialog(false, null);
toast.success('Success Update Wallet Rule');
reload();
const createActivity = {
module: 'Manage Wallet Rule',
description: `Edit Wallet Rule => ${selectedWalletRule?.ID}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
toast.error('Failed Update Wallet Rule');
setAlert({ show: true, message: 'Failed Update Wallet Rule' });

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

@ -21,10 +21,11 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_dashboard;
const AddDialog = () => {
const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
const { showAddDialog, handleAddDialog, parents, selectedMenu } = useManageMenusContext();
const { reload } = useDataGrid();
const { PostData } = useCallApi();
const [open, setOpen] = useState(false);
@ -57,21 +58,28 @@ const AddDialog = () => {
return;
}
console.log('Data dikirim ke API:', formField);
// console.log('Data dikirim ke API:', formField);
const response = await PostData(`${API_URL}/menus/create`, formField);
console.log('Response from API:', response);
// console.log('Response from API:', response);
if (response?.status) {
handleAddDialog(false);
resetForm();
toast.success('Success Create Menu');
const createActivity = {
module: 'Manage Menu',
description: `Create Menu => ${selectedMenu}`,
action: 'C'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Failed Create Menu');
setAlert({ show: true, message: 'Failed Create Menu' });
}
console.log(formField);
// console.log(formField);
setAlert({ show: false, message: '' });
};

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

@ -14,6 +14,7 @@ import {
} from '@/components/ui/dialog';
import { EnforceSwitch } from '@/components/switch';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_dashboard;
const DeleteDialog = () => {
@ -34,6 +35,13 @@ const DeleteDialog = () => {
setAlert((prev) => ({ ...prev, show: false, message: '' }));
handleDeleteDialog(false, null);
toast.success('Success Delete Menu');
const createActivity = {
module: 'Manage Menu',
description: `DeleteMenu => ${selectedMenu}`,
action: 'D'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Failed Delete Menu');

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

@ -22,6 +22,7 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_dashboard;
@ -69,6 +70,13 @@ const EditDialog = () => {
handleEditDialog(false, null);
resetForm();
toast.success('Success Update Menu');
const createActivity = {
module: 'Manage Menu',
description: `Update Menu => ${selectedMenu}`,
action: 'U'
};
doSaveLogActivity(createActivity);
reload();
} else {
toast.error('Failed Update Menu');

31
src/pages/transaction/approval-transaction/ApprovalTransaction.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Container, DataGridInner } from '@/components';
import { ApprovalTransactionProvider } from './hooks/ApprovalTransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
const ApprovalTransaction = () => {
return (
<ApprovalTransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Transaction</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Approval Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ApprovalTransactionProvider>
);
};
export default ApprovalTransaction;

538
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx Normal file
View File

@ -0,0 +1,538 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
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 DetailApprovalTransaction = () => {
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 DetailApprovalTransaction;

82
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx Normal file
View File

@ -0,0 +1,82 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react';
import { toast } from 'sonner';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
// Set the initial state for trxDate
const [trxDate, settrxDate] = useState({ from: '', to: '' });
// Function to format date to YYYY-MM-DD
const formatDate = (date: Date): string => {
return date.toISOString().split('T')[0];
};
// useEffect to set the default date values
useEffect(() => {
const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
});
}, []);
const handleFilterData = useCallback(() => {
try {
table.getColumn('transaction_date')?.setFilterValue(trxDate);
} catch (error) {
toast.error('Error applying filter');
console.error('Error applying filter:', error);
}
}, [trxDate, table]);
useEffect(() => {
if (trxDate.from && trxDate.to) {
handleFilterData();
}
}, [trxDate]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex w-[50%] gap-3 items-center">
<label className="input input-sm w-1/3">
From
<input
type="date"
placeholder="From"
value={trxDate.from}
onChange={(event) =>
settrxDate({ ...trxDate, from: event.target.value })
}
name="from"
/>
</label>
<label className="input input-sm w-1/3">
To
<input
type="date"
placeholder="To"
value={trxDate.to}
onChange={(event) =>
settrxDate({ ...trxDate, to: event.target.value })
}
name="to"
/>
</label>
</div>
</div>
</div>
</div>
);
};
export default ListToolbar;

268
src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx Normal file
View File

@ -0,0 +1,268 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router';
import DetailApprovalTransaction from '../blocks/DetailApprovalTransaction';
interface ApprovalTransactionProps {
id: number;
name: string;
}
interface ContextProps {
getTransactionLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any,
filter: any
) => Promise<{ data: ApprovalTransactionProps[]; 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 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { }
};
const ManageApprovalTransactionContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.transaction;
const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
const { GetData } = useCallApi();
const navigate = useNavigate();
const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/transaction/history/${path}`);
};
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} />,
enableSorting: false,
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} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
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,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
accessorFn: (row) => {
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);
},
id: 'feeamount',
header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
accessorFn: (row) => {
let status;
if (row.status === 'C') {
status = 'COMPLETE';
} else if (row.status === 'F') {
status = 'FAILED';
} else if (row.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
},
accessorKey: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
accessorKey: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
enableSorting: false,
enableHiding: false,
cell: (data) => {
const row = data.row.original;
return (
<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: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
],
[]);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
let startdate;
let enddate;
let formattedFilter;
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];
enddate = nextWeek.toISOString().split('T')[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"
}
};
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,
with_deleted: false,
order_field: "Transactions.created_at",
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
});
setTransaction(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching transaction', error);
}
};
return (
<ManageApprovalTransactionContext.Provider
value={{
getTransactionLists,
showDetailDialog,
setShowDetailDialog,
selectedTransactionId,
setSelectedTransactionId
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DetailApprovalTransaction />
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
}
>
{children}
</DataGridProvider>
</ManageApprovalTransactionContext.Provider>
);
};
export { ApprovalTransactionProvider, ManageApprovalTransactionContext };
export type { ApprovalTransactionProps };

12
src/pages/transaction/approval-transaction/hooks/useApprovalTransactionContext.tsx Normal file
View File

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

2
src/pages/transaction/Transaction.tsx → src/pages/transaction/history-transaction/Transaction.tsx
View File

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

38
src/pages/transaction/blocks/DetailTransaction.tsx → src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -208,8 +208,44 @@ const DetailTransaction = () => {
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Product Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Product Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">{transactionDetails?.purchase.product.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_point)}
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">{transactionDetails?.purchase.product.type}</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">{transactionDetails?.purchase.product.provider.type}</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Transaction Information

0
src/pages/transaction/blocks/ListToolbar.tsx → src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
View File

0
src/pages/transaction/hooks/TransactionContext.tsx → src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

0
src/pages/transaction/hooks/useTransactionContext.tsx → src/pages/transaction/history-transaction/hooks/useTransactionContext.tsx
View File

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

@ -1,5 +1,5 @@
import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
import {
Alert,
@ -30,6 +30,15 @@ import {
import { Button } from '@/components/ui/button';
import { toast } from 'sonner';
import { getAuth } from '@/auth';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
interface WalletProps {
Wallet_id: string;
@ -48,6 +57,7 @@ const API_URL3_CUSTOMER = apiConfig.service_customer;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const [open, setOpen] = useState(false);
const { GetData } = useCallApi();
const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
const [wallets, setWallets] = useState<WalletProps[]>([]);
@ -70,37 +80,102 @@ const AddDialog = () => {
maximum_amount: 0,
max_transaction_per_day: 0,
status: '',
type: '',
status_approval: '',
created_by: '',
created_at: ''
};
const [formField, setFormField] = useState(initialState);
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
setFormField(initialState);
};
const [isSubmitting, setIsSubmitting] = useState(false);
const parsedUser = getAuth()?.user;
// Updated validation function to make only certain fields required
const validateForm = () => {
const requiredFields = [
'name',
'description',
'wallet_origin',
'wallet_destination',
'wallet_fee_destination',
'customer_fee_destination',
'status',
'status_approval'
];
const missingFields = requiredFields.filter(
(field) =>
formField[field as keyof typeof formField] === '' ||
formField[field as keyof typeof formField] === null ||
formField[field as keyof typeof formField] === undefined
);
if (missingFields.length > 0) {
setAlert({
show: true,
message: `Please fill out all required fields: ${missingFields.join(', ')}`
});
return false;
}
setAlert({ show: false, message: '' });
return true;
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// setIsSubmitting(true);
const payload = {
name: formField.name,
description: formField.description,
wallet_origin: formField.wallet_origin,
wallet_destination: formField.wallet_destination,
minimum_amount: formField.minimum_amount,
maximum_amount: formField.maximum_amount,
max_transaction_per_day: formField.max_transaction_per_day,
wallet_fee_destination: formField.wallet_fee_destination,
customer_fee_destination: formField.customer_fee_destination,
status_approval: formField.status_approval,
status: formField.status
};
setIsSubmitting(true);
if (!validateForm()) {
setIsSubmitting(false);
return;
}
doCreateTransferType(formField)
.then((success) => {
if (success) {
handleAddDialog(false);
toast.success('Success Create Transfer Type');
reload();
resetForm();
}
})
.finally(() => {
setIsSubmitting(false);
});
};
const doCreateTransferType = useCallback(
async (data: typeof formField) => {
try {
const response = await PostData(`${API_URL}/transactiontype/create`, data);
if (response?.status) {
setAlert({ show: false, message: '' });
return true;
} else {
setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
return false;
}
} catch (error) {
setAlert({
show: true,
message:
error instanceof Error
? error.message
: 'An error occurred while creating transfer type'
});
return false;
}
},
[PostData]
);
useEffect(() => {
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -128,7 +203,6 @@ const AddDialog = () => {
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
});
setCustomers(response?.data.list);
// console.log('CUSTOMER: ', response?.data.list);
} catch (error) {
console.error('Error fetching customer', error);
}
@ -161,34 +235,6 @@ const AddDialog = () => {
fetchWallets();
}, [showAddDialog]);
const doCreateTransferType = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
for (const key in formField) {
if (formField[key as keyof typeof formField] === '') {
setAlert({ show: true, message: 'All fields must be filled out' });
return;
}
}
setAlert({ show: false, message: '' });
const response = await PostData(`${API_URL}/transactiontype/create`, formField);
if (response?.status) {
setAlert({ show: false, message: '' });
handleAddDialog(false);
toast.success('Success Create Transfer Type');
reload();
resetForm();
} else {
setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
}
handleAddDialog(false);
},
[formField]
);
return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -198,7 +244,7 @@ const AddDialog = () => {
<div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">
Addd Transaction Type
Add Transaction Type
</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div>
@ -220,7 +266,7 @@ const AddDialog = () => {
<h3>{alert.message}</h3>
</Alert>
)}
<form action="" onSubmit={doCreateTransferType}>
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -228,15 +274,17 @@ const AddDialog = () => {
Transfer Type Name
<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
<div className="grow">
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
</div>
</div>
@ -246,15 +294,17 @@ const AddDialog = () => {
Description
<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.description}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, description: target.value }))
}
/>
<div className="grow">
<Input
className="input"
type="text"
autoComplete="off"
value={formField.description}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, description: target.value }))
}
/>
</div>
</div>
</div>
@ -263,20 +313,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Minimum Amount
</label>
<NumericFormat
className="input"
value={formField.minimum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
/>
<div className="grow">
<NumericFormat
className="input"
value={formField.minimum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
/>
</div>
</div>
</div>
@ -285,20 +337,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Maximum Amount
</label>
<NumericFormat
className="input"
value={formField.maximum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Maximum Amount"
/>
<div className="grow">
<NumericFormat
className="input"
value={formField.maximum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Maximum Amount"
/>
</div>
</div>
</div>
<div className="w-full">
@ -306,24 +360,26 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Max Transaction per day
</label>
<NumericFormat
className="input"
value={formField.max_transaction_per_day}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day: values.floatValue || 0
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
<div className="grow">
<NumericFormat
className="input"
value={formField.max_transaction_per_day}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day: values.floatValue || 0
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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">
From Account
<span className="text-red-500">*</span>
@ -351,7 +407,7 @@ const AddDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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">
To Account
<span className="text-red-500">*</span>
@ -378,7 +434,7 @@ const AddDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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 Destination Fee
<span className="text-red-500">*</span>
@ -405,35 +461,91 @@ const AddDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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">
Customer Fee Destination
<span className="text-red-500">*</span>
Customer Fee Destination<span className="text-red-500">*</span>
</label>
<div className="grow">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find(
(customer) => customer.id === formField.customer_fee_destination
)?.username || 'Select Customer'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customer_fee_destination: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
TransactionType Status
<span className="text-red-500"> *</span>
</label>
<div className="grow">
<Select
value={formField.customer_fee_destination}
onValueChange={(customer_fee_destination) =>
setFormField((prev) => ({ ...prev, customer_fee_destination }))
value={formField.type}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, type: value }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select Customer" />
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{customers.map((customer, idx) => (
<SelectItem value={customer.id} key={customer.id}>
{customer.username} - {customer.msisdn}
</SelectItem>
))}
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="O">Other </SelectItem>
<SelectItem value="CA">Change Customer to Agent </SelectItem>
<SelectItem value="AC">Change Agent to Customer </SelectItem>
<SelectItem value="CE">Return Customer Emoney </SelectItem>
<SelectItem value="AD">Return Agent Deposit </SelectItem>
<SelectItem value="AM">Return Agent Merchant </SelectItem>
<SelectItem value="AE">Return Agent Emoney </SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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 Approval
<span className="text-red-500">*</span>
@ -459,7 +571,7 @@ const AddDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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>

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

@ -22,10 +22,18 @@ import { apiConfig } from '@/config/api.config';
import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
import { toast } from 'sonner';
import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { getAuth } from '@/auth';
import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
import AddFeeDialog from '../../transferfee/blocks/AddDialog';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
const API_URL = apiConfig.service_transaction;
const API_URL_MASTERDATA = apiConfig.service_master_data;
@ -50,6 +58,7 @@ interface TranssactionTypeProps {
max_transaction_per_day: number;
status_approval: string;
status: string;
type: string;
wallet_origin: WalletProps;
wallet_destination: WalletProps;
wallet_fee_destination: WalletProps;
@ -58,7 +67,7 @@ interface TranssactionTypeProps {
const EditDialog = () => {
const parentRef = useRef<any | null>(null);
const { showEditDialog, handleEditDialog, selectedTransferType, accounts } =
const { showEditDialog, handleEditDialog, selectedTransferType } =
useManageTransferTypeContext();
const { reload } = useDataGrid();
const [wallets, setWallets] = useState<WalletProps[]>([]);
@ -66,29 +75,13 @@ const EditDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false);
const parsedUser = getAuth()?.user;
const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]);
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const resetForm = () => {
setFormField({
name: '',
description: '',
wallet_origin: '',
wallet_destination: '',
wallet_fee_destination: '',
customer_fee_destination: '',
minimum_amount: 0,
maximum_amount: 0,
max_transaction_per_day: 0,
status_approval: '',
status: '',
updated_by: '',
updated_at: ''
});
};
const [formField, setFormField] = useState({
const initialState = {
name: '',
description: '',
wallet_origin: '',
@ -99,40 +92,113 @@ const EditDialog = () => {
maximum_amount: 0,
max_transaction_per_day: 0,
status_approval: '',
type: '',
status: '',
updated_by: '',
updated_at: ''
});
};
const [formField, setFormField] = useState(initialState);
const resetForm = () => {
setFormField(initialState);
};
// Validation function to make certain fields required
const validateForm = () => {
const requiredFields = [
'name',
'description',
'wallet_origin',
'wallet_destination',
'wallet_fee_destination',
'customer_fee_destination',
'status',
'status_approval',
'type'
];
const missingFields = requiredFields.filter(
(field) =>
formField[field as keyof typeof formField] === '' ||
formField[field as keyof typeof formField] === null ||
formField[field as keyof typeof formField] === undefined
);
if (missingFields.length > 0) {
setAlert({
show: true,
message: `Please fill out all required fields: ${missingFields.join(', ')}`
});
return false;
}
setAlert({ show: false, message: '' });
return true;
};
useEffect(() => {
const updated_time = new Date();
const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
if (showEditDialog) {
setFormField({
...formField,
setFormField((prev) => ({
...prev,
updated_by: parsedUser?.username,
updated_at: formattedTime
});
}));
}
}, [showEditDialog]);
/* actions */
const doUpdateTransferType = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
if (!validateForm()) {
setIsSubmitting(false);
return;
}
doUpdateTransferType()
.then((success) => {
if (success) {
handleEditDialog(false, null);
toast.success('Success Update Transfer Type');
reload();
}
})
.finally(() => {
setIsSubmitting(false);
});
};
const doUpdateTransferType = useCallback(async () => {
try {
const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
...formField
});
if (response?.status) {
handleEditDialog(false, null);
toast.success('Success Update Transfer Type');
reload();
setAlert({ show: false, message: '' });
return true;
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
setAlert({ show: true, message: response?.message || 'Failed to update transfer type' });
return false;
}
},
[formField, selectedTransferType]
);
} catch (error) {
setAlert({
show: true,
message:
error instanceof Error
? error.message
: 'An error occurred while updating transfer type'
});
return false;
}
}, [formField, selectedTransferType, PutData]);
useEffect(() => {
if (!showEditDialog) return;
const getCustomerList = async (sorting: any) => {
try {
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
@ -143,7 +209,6 @@ const EditDialog = () => {
order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
});
// console.log('CUSTOMER: ', response?.data.list);
setCustomers(response?.data.list);
} catch (error) {
console.error('Error fetching customer', error);
@ -151,7 +216,8 @@ const EditDialog = () => {
};
getCustomerList([{ id: 'id', desc: false }]);
}, []);
}, [showEditDialog, GetData]);
const fetchWallets = useCallback(async () => {
const params = {
limit: 100,
@ -169,39 +235,48 @@ const EditDialog = () => {
} else {
setWallets([]);
}
}, []);
}, [GetData]);
useEffect(() => {
if (!showEditDialog) return;
fetchWallets();
}, [fetchWallets]);
}, [showEditDialog, fetchWallets]);
const fetchTransactionType = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
// console.log('Transaction Type: ', response?.data);
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response.data.name,
description: response.data.description,
wallet_origin: response.data.wallet_origin.id,
wallet_destination: response.data.wallet_destination.id,
wallet_fee_destination: response.data.wallet_fee_destination.id,
customer_fee_destination: response.data.customer_fee_destination.id,
minimum_amount: response.data.minimum_amount,
maximum_amount: response.data.maximum_amount,
max_transaction_per_day: response.data.max_transaction_per_day,
status_approval: response.data.status_approval,
status: response.data.status
}));
try {
const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response.data.name,
description: response.data.description,
wallet_origin: response.data.wallet_origin.id,
wallet_destination: response.data.wallet_destination.id,
wallet_fee_destination: response.data.wallet_fee_destination.id,
customer_fee_destination: response.data.customer_fee_destination.id,
minimum_amount: response.data.minimum_amount,
maximum_amount: response.data.maximum_amount,
max_transaction_per_day: response.data.max_transaction_per_day,
status_approval: response.data.status_approval,
type: response.data.type || '',
status: response.data.status
}));
}
// console.log(response);
} catch (error) {
console.error('Error fetching transaction type', error);
setAlert({
show: true,
message: 'Failed to load transaction type data'
});
}
// console.log('form fieldd Transaction Type: ', formField);
}, []);
}, [GetData]);
useEffect(() => {
if (selectedTransferType) {
fetchTransactionType(selectedTransferType);
}
}, [selectedTransferType]);
}, [selectedTransferType, fetchTransactionType]);
return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -230,11 +305,11 @@ const EditDialog = () => {
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0">
{alert.show && (
<Alert variant="danger">
<Alert variant="danger" className="mb-3">
<h3>{alert.message}</h3>
</Alert>
)}
<form action="" onSubmit={doUpdateTransferType}>
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -242,15 +317,17 @@ const EditDialog = () => {
Transfer Type Name
<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
<div className="grow">
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
</div>
</div>
@ -260,15 +337,17 @@ const EditDialog = () => {
Description
<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.description}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, description: target.value }))
}
/>
<div className="grow">
<Input
className="input"
type="text"
autoComplete="off"
value={formField.description}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, description: target.value }))
}
/>
</div>
</div>
</div>
@ -277,20 +356,22 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Minimum Amount
</label>
<NumericFormat
className="input"
value={formField.minimum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
/>
<div className="grow">
<NumericFormat
className="input"
value={formField.minimum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
minimum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Minimum Amount"
/>
</div>
</div>
</div>
@ -299,20 +380,22 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Maximum Amount
</label>
<NumericFormat
className="input"
value={formField.maximum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Maximum Amount"
/>
<div className="grow">
<NumericFormat
className="input"
value={formField.maximum_amount}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
maximum_amount: values.floatValue || 0
}));
}}
placeholder="Enter Maximum Amount"
/>
</div>
</div>
</div>
<div className="w-full">
@ -320,24 +403,26 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Max Transaction per day
</label>
<NumericFormat
className="input"
value={formField.max_transaction_per_day}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day: values.floatValue || 0
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
<div className="grow">
<NumericFormat
className="input"
value={formField.max_transaction_per_day}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day: values.floatValue || 0
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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">
From Account
<span className="text-red-500">*</span>
@ -353,8 +438,8 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
{wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
))}
@ -365,7 +450,7 @@ const EditDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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">
To Account
<span className="text-red-500">*</span>
@ -381,7 +466,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
{wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
@ -392,7 +477,7 @@ const EditDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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 Destination Fee
<span className="text-red-500">*</span>
@ -408,7 +493,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
{wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
@ -419,27 +504,84 @@ const EditDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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">
Customer Fee Destination
<span className="text-red-500">*</span>
Customer Fee Destination<span className="text-red-500">*</span>
</label>
<div className="grow">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find(
(customer) => customer.id === formField.customer_fee_destination
)?.username || 'Select Customer'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customer_fee_destination: customer.id
});
setOpen(false);
}}
>
{customer.username} - {customer.msisdn}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Type
<span className="text-red-500"> *</span>
</label>
<div className="grow">
<Select
value={formField.customer_fee_destination}
onValueChange={(customer_fee_destination) =>
setFormField((prev) => ({ ...prev, customer_fee_destination }))
value={formField.type}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, type: value }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select Customer" />
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{customers.map((customer, idx) => (
<SelectItem value={customer.id} key={customer.id}>
{customer.username} - {customer.msisdn}
</SelectItem>
))}
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="O">Other </SelectItem>
<SelectItem value="CA">Change Customer to Agent </SelectItem>
<SelectItem value="AC">Change Agent to Customer </SelectItem>
<SelectItem value="CE">Return Customer Emoney </SelectItem>
<SelectItem value="AD">Return Agent Deposit </SelectItem>
<SelectItem value="AM">Return Agent Merchant </SelectItem>
<SelectItem value="AE">Return Agent Emoney </SelectItem>
</SelectContent>
</Select>
</div>
@ -447,12 +589,11 @@ const EditDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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 Approval
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.status_approval}
@ -473,12 +614,11 @@ const EditDialog = () => {
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<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>
<div className="grow">
<Select
value={formField.status}
@ -514,10 +654,11 @@ const EditDialog = () => {
</div>
</div>
</form>
{/* Bagian Transaction Fee */}
{/* Transaction Fee Section */}
<ManageTransferFeeContextProvider>
<Container>
<div className="grid gap-5 lg:gap-7.5">
<div className="grid gap-5 lg:gap-7.5 mt-5">
<DataGridInner />
</div>
<AddFeeDialog />
@ -530,4 +671,4 @@ const EditDialog = () => {
);
};
export { EditDialog };
export { EditDialog };

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

@ -20,6 +20,7 @@ interface TransferType {
walletOriginId: string;
walletDestinationId: string;
status: string;
type: string;
}
interface ContextProps {
@ -155,6 +156,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.type,
id: 'type',
header: ({ column }) => (
<DataGridColumnHeader title="TransactionType Status" column={column} />
),
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
id: 'status',

8
src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
View File

@ -11,15 +11,15 @@ 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"
placeholder="Search Wallet"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
value={(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('msisdn')?.setFilterValue(event.target.value)}
/>
</label>
</label> */}
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<Button
variant="outline"

151
src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
View File

@ -71,9 +71,8 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
accessorKey: 'msisdn',
header: ({ column }) => <DataGridColumnHeader title="MSISDN" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
@ -82,9 +81,8 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorFn: (row) => row.currency.name,
id: 'currency_name',
header: ({ column }) => <DataGridColumnHeader title="Currency" column={column} />,
accessorKey: 'amount' ,
header: ({ column }) => <DataGridColumnHeader title="Ammount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
@ -92,9 +90,84 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorFn: (row) => row.currency.prefix,
id: 'currency_prefix',
header: ({ column }) => <DataGridColumnHeader title="Prefix" column={column} />,
accessorKey: 'trx_count_today' ,
header: ({ column }) => <DataGridColumnHeader title="Transaction Count Today" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'amount_this_month' ,
header: ({ column }) => <DataGridColumnHeader title="Ammount This Month" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'CreatedAt' ,
header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
cell: ({ row }) =>
new Date(row.original.CreatedAt).toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}),
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.balance_type.name,
id: 'balance_type_name',
header: ({ column }) => <DataGridColumnHeader title="Balance Type Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.balance_type.currency.name,
id: 'currency_name',
header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.balance_type.currency.code,
id: 'currency_code',
header: ({ column }) => <DataGridColumnHeader title="Currency Code" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.group.name,
id: 'group_name',
header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorFn: (row) => row.group.is_bank,
id: 'is_bank',
header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
@ -124,42 +197,44 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
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]'
}
}
// {
// 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`, {
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
limit,
page: page + 1,
with_deleted: false,
@ -167,7 +242,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
// filter: JSON.stringify(filter)
});
console.log(response?.data);
// console.log(response?.data);
setWallets(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
@ -192,7 +267,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider
columns={columns}
pagination={{ size: 5 }}
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}