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

adding field status_kind on transfertype

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-30 16:08:40 +07:00
parent 49cdbbf12a
commit 9dfeac3998
4 changed files with 255 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,6 +82,7 @@ const AddDialog = () => {
status: '',
type: '',
status_approval: '',
status_kind: '',
created_by: '',
created_at: ''
};
@ -102,7 +103,8 @@ const AddDialog = () => {
'wallet_origin',
'wallet_destination',
'status',
'status_approval'
'status_approval',
'status_kind'
];
const missingFields = requiredFields.filter(
@ -506,6 +508,35 @@ const AddDialog = () => {
</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">
Status Kind
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.status_kind}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status_kind: value }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="R">Return</SelectItem>
<SelectItem value="T">Transfer</SelectItem>
<SelectItem value="P">Purchase</SelectItem>
<SelectItem value="W">Withdraw</SelectItem>
<SelectItem value="U">Top Up</SelectItem>
<SelectItem value="N">Top Up Patner</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">

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

@ -79,6 +79,7 @@ const EditDialog = () => {
status: string;
type: string;
status_approval: string;
status_kind: string;
updated_by: string;
updated_at: string;
permission: string[];
@ -91,6 +92,7 @@ const EditDialog = () => {
maximum_amount: 0,
max_transaction_per_day: 0,
status_approval: '',
status_kind: '',
type: '',
status: '',
permission: [],
@ -132,6 +134,7 @@ const EditDialog = () => {
'wallet_destination',
'status',
'status_approval',
'status_kind',
'type'
];
@ -345,11 +348,13 @@ const EditDialog = () => {
maximum_amount: response.data.maximum_amount,
max_transaction_per_day: response.data.max_transaction_per_day,
status_approval: response.data.status_approval,
status_kind: response.data.status_kind,
type: response.data.type || '',
status: response.data.status,
permission: permissionIds
}));
}
// console.log(response);
} catch (error) {
console.error('Error fetching transaction type', error);
setAlert({
@ -640,7 +645,35 @@ const EditDialog = () => {
</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">
Status Kind
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.status_kind}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status_kind: value }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="R">Return</SelectItem>
<SelectItem value="T">Transfer</SelectItem>
<SelectItem value="P">Purchase</SelectItem>
<SelectItem value="W">Withdraw</SelectItem>
<SelectItem value="U">Top Up</SelectItem>
<SelectItem value="N">Top Up Patner</SelectItem>
</SelectContent>
</Select>
</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">

158
src/pages/transfer/transfertype/blocks/ListToolBar.tsx
View File

@ -2,55 +2,181 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
import { Button } from '@/components/ui/button';
import { useEffect, useState } from 'react';
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem
} from '@/components/ui/select';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
interface TransferType {
id: number;
name: string;
type: string;
wallet_origin: { id: number; name: string };
wallet_destination: { id: number; name: string };
status_approval: string;
}
const API_URL = apiConfig.service_transaction;
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
const { handleAddDialog } = useManageTransferTypeContext();
const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
const { GetData } = useCallApi();
const [searchValue, setSearchValue] = useState('');
const [statusTypes, setStatusTypes] = useState('');
const [walletOrigins, setWalletOrigin] = useState('');
const [walletDestinations, setWalletDestination] = useState('');
const [approval, setApproval] = useState('');
const unique = (arr: string[]) => Array.from(new Set(arr));
const types = unique(transferTypes.map((t) => t.type));
const origins = unique(transferTypes.map((t) => t.wallet_origin.name));
const destinations = unique(transferTypes.map((t) => t.wallet_destination.name));
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
}, [searchValue]);
useEffect(() => {
table.getColumn('type')?.setFilterValue(statusTypes);
}, [statusTypes]);
useEffect(() => {
table
.getColumn('wallet_origin')
?.setFilterValue(walletOrigins === '__all__' ? '' : walletOrigins);
}, [walletOrigins]);
useEffect(() => {
table
.getColumn('wallet_destination')
?.setFilterValue(walletDestinations === '__all__' ? '' : walletDestinations);
}, [walletDestinations]);
useEffect(() => {
table.getColumn('status_approval')?.setFilterValue(approval);
}, [approval]);
const fetchTransferTypes = async () => {
try {
const response = await GetData(`${API_URL}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'created_at',
order_direction: 'ASC'
});
setTransferTypes(response?.data.list || []);
} catch (error) {
console.error('Error fetching transfer types', error);
}
};
useEffect(() => {
fetchTransferTypes();
}, []);
const handleClearFilter = () => {
setSearchValue('');
setStatusTypes('__all__');
setWalletOrigin('__all__');
setWalletDestination('__all__');
setApproval('__all__');
table.getColumn('name')?.setFilterValue('');
table.getColumn('type')?.setFilterValue('');
table.getColumn('wallet_origin')?.setFilterValue('');
table.getColumn('wallet_destination')?.setFilterValue('');
table.getColumn('status_approval')?.setFilterValue('');
table.setPageIndex(0);
};
const renderSelect = (
placeholder: string,
value: string,
onChange: (val: string) => void,
options: string[]
) => (
<div className="min-w-[220px]">
<Select value={value === '' ? undefined : value} onValueChange={onChange}>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map((opt) => (
<SelectItem key={opt} value={opt}>
{opt}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
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">
<div className="flex justify-between w-full items-center mb-3">
<div className="flex w-[34%] gap-2 items-center">
<label className="input input-sm w-full text-sm">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Transaction Type"
placeholder="Search Transaction Type Name"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onChange={(e) => setSearchValue(e.target.value)}
/>
</label>
</div>
<div className="flex gap-3 items-center">
<div className="flex gap-2 items-center">
<Button variant="outline" className="h-8 px-3 text-xs" onClick={handleClearFilter}>
Clear
</Button>
<Button
variant="outline"
className="h-7.5 text-[0.8rem]"
className="h-8 px-3 text-xs"
onClick={() => handleAddDialog(true)}
>
Add Data
Add
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
<DefaultTooltip title="Refresh" placement="top">
<Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>
</div>
</div>
{/* Filter bar */}
<div className="flex flex-wrap gap-2 w-full">
{renderSelect('Select Status Transaction Type', statusTypes, setStatusTypes, types)}
{renderSelect('Select Status Approval', approval, setApproval, ['Y', 'N'])}
{/* {renderSelect('Select Origin Wallet', walletOrigins, setWalletOrigin, origins)}
{renderSelect(
'Select Destination Wallet',
walletDestinations,
setWalletDestination,
destinations
)} */}
{/* {renderSelect('Origin', walletOrigins, setWalletOrigin, origins)}
{renderSelect('Destination', walletDestinations, setWalletDestination, destinations)} */}
</div>
</div>
</div>
);
};
export default ListToolbar;
export default ListToolbar;

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

@ -224,6 +224,27 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
enableHiding: false,
meta: { headerClassName: 'w-[150px]' }
},
{
accessorFn: (row: { status_kind: string }) => {
const mapping: Record<string, string> = {
R: "Return",
T: "Transfer",
P: "Purchasem",
W: "Withdrawm",
U: "Top Up",
N: "Top Up Patner"
};
return mapping[row.status_kind] || 'Unknown';
},
id: 'status_kind',
header: ({ column }) => (
<DataGridColumnHeader title="Status Kind" column={column} />
),
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
id: 'status_approval',
@ -266,15 +287,35 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
page: number,
limit: number,
sorting: any,
filter: any
columnFilters: any
) => {
const orderField = 'created_at';
const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
let filterObject: Record<string, any> = {};
filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
if (debouncedSearchTerm) {
filterObject["any"] = debouncedSearchTerm.toLowerCase();
}
if (columnFilters.length > 0) {
columnFilters.forEach((filter: any) => {
if (filter.id && filter.value) {
if (filter.id === 'name') {
filterObject["any"] = filter.value.toLowerCase();
}
else if (filter.id === 'wallet_origin') {
filterObject["wallet_origin.name"] = filter.value.toLowerCase();
}
else if (filter.id === 'wallet_destination') {
filterObject["wallet_destination.name"] = filter.value.toLowerCase();
}
else {
filterObject[filter.id] = filter.value.toLowerCase();
}
}
});
}
const response = await GetData(`${API_URL}/transactiontype/list`, {
limit: limit,
@ -282,8 +323,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
with_deleted: false,
order_field: orderField,
order_direction: orderDirection,
filter: JSON.stringify(filter)
filter: JSON.stringify(filterObject)
});
// console.log(response);
return { data: response?.data.list, totalCount: response?.data.total_count };
};
@ -327,4 +369,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
};
export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
export type { TransferType };
export type { TransferType };