gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-23 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-62,63,65): refactor Movement and ProductWarehouse APIs, update MovementForm schema, and enhance MovementTable functionality

Browse Source
This commit is contained in:
rstubryan
2025-10-16 14:33:49 +07:00
parent aa21088e99
commit c6a0c542aa
7 changed files with 277 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/inventory/movement/MovementTable.tsx
+123 -499
View File
@@ -1,463 +1,56 @@
'use client';
import { useState, useMemo } from 'react';
import { useState } from 'react';
import useSWR from 'swr';
import { SortingState } from '@tanstack/react-table';
import { Icon } from '@iconify/react';
import Table from '@/components/Table';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import { ROWS_OPTIONS } from '@/config/constant';
import { Movement } from '@/types/api/inventory/movement';
import { MovementApi } from '@/services/api/inventory';
import { cn } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { ROWS_OPTIONS } from '@/config/constant';
import { TableToolbar } from '@/components/table/TableToolbar';
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
import { TableRowOptions } from '@/components/table/TableRowOptions';
import { OptionType } from '@/components/input/SelectInput';
import Button from '@/components/Button';
import { cn } from '@/lib/helper';
// Dummy data
const baseMetadata = {
created_user: {
id: 1,
id_user: 1,
email: 'user@example.com',
name: 'User',
},
created_at: '2024-06-01T00:00:00Z',
updated_at: '2024-06-01T00:00:00Z',
};
const dummyMovements: Movement[] = [
{
...baseMetadata,
id: 1,
transfer_reason: 'Restock',
transfer_date: '2024-06-01',
source_warehouse: {
...baseMetadata,
id: 1,
name: 'Warehouse A',
type: 'AREA',
area: { id: 1, name: 'Area 1' },
},
destination_warehouse: {
...baseMetadata,
id: 2,
name: 'Warehouse B',
type: 'AREA',
area: { id: 2, name: 'Area 2' },
},
products: [
{
product: {
...baseMetadata,
id: 1,
name: 'Product X',
brand: 'Brand X',
sku: 'SKU-X',
product_price: 10000,
selling_price: 12000,
tax: 10,
expiry_period: 365,
uom: {
...baseMetadata,
id: 1,
name: 'PCS',
},
product_category: {
...baseMetadata,
id: 1,
code: 'CAT-1',
name: 'Category 1',
},
suppliers: [],
flags: [],
},
product_qty: 10,
},
],
deliveries: [
{
delivery_cost: 50000,
delivery_cost_per_item: 5000,
document: 'doc1.pdf',
driver_name: 'Andi',
vehicle_plate: 'B 1234 CD',
supplier: {
...baseMetadata,
id: 1,
name: 'Supplier 1',
alias: 'S1',
category: 'General',
pic: 'PIC 1',
type: 'Type 1',
hatchery: 'Hatchery 1',
phone: '08123456789',
email: 'supplier1@example.com',
address: 'Address 1',
npwp: '1234567890123456',
account_number: '1234567890',
balance: 0,
due_date: 30,
},
products: [
{
product: {
...baseMetadata,
id: 1,
name: 'Product X',
brand: 'Brand X',
sku: 'SKU-X',
product_price: 10000,
selling_price: 12000,
tax: 10,
expiry_period: 365,
uom: {
...baseMetadata,
id: 1,
name: 'PCS',
},
product_category: {
...baseMetadata,
id: 1,
code: 'CAT-1',
name: 'Category 1',
},
suppliers: [],
flags: [],
},
product_qty: 10,
},
],
},
],
},
{
...baseMetadata,
id: 2,
transfer_reason: 'Mutasi Stok',
transfer_date: '2024-06-02',
source_warehouse: {
...baseMetadata,
id: 2,
name: 'Warehouse B',
type: 'AREA',
area: { id: 2, name: 'Area 2' },
},
destination_warehouse: {
...baseMetadata,
id: 3,
name: 'Warehouse C',
type: 'AREA',
area: { id: 3, name: 'Area 3' },
},
products: [
{
product: {
...baseMetadata,
id: 2,
name: 'Product Y',
brand: 'Brand Y',
sku: 'SKU-Y',
product_price: 20000,
selling_price: 25000,
tax: 5,
expiry_period: 180,
uom: {
...baseMetadata,
id: 2,
name: 'BOX',
},
product_category: {
...baseMetadata,
id: 2,
code: 'CAT-2',
name: 'Category 2',
},
suppliers: [],
flags: [],
},
product_qty: 5,
},
],
deliveries: [
{
delivery_cost: 60000,
delivery_cost_per_item: 12000,
document: 'doc2.pdf',
driver_name: 'Budi',
vehicle_plate: 'D 5678 EF',
supplier: {
...baseMetadata,
id: 2,
name: 'Supplier 2',
alias: 'S2',
category: 'Special',
pic: 'PIC 2',
type: 'Type 2',
hatchery: 'Hatchery 2',
phone: '08123456780',
email: 'supplier2@example.com',
address: 'Address 2',
npwp: '1234567890123457',
account_number: '1234567891',
balance: 1000,
due_date: 15,
},
products: [
{
product: {
...baseMetadata,
id: 2,
name: 'Product Y',
brand: 'Brand Y',
sku: 'SKU-Y',
product_price: 20000,
selling_price: 25000,
tax: 5,
expiry_period: 180,
uom: {
...baseMetadata,
id: 2,
name: 'BOX',
},
product_category: {
...baseMetadata,
id: 2,
code: 'CAT-2',
name: 'Category 2',
},
suppliers: [],
flags: [],
},
product_qty: 5,
},
],
},
],
},
{
...baseMetadata,
id: 3,
transfer_reason: 'Pengembalian',
transfer_date: '2024-06-03',
source_warehouse: {
...baseMetadata,
id: 3,
name: 'Warehouse C',
type: 'AREA',
area: { id: 3, name: 'Area 3' },
},
destination_warehouse: {
...baseMetadata,
id: 1,
name: 'Warehouse A',
type: 'AREA',
area: { id: 1, name: 'Area 1' },
},
products: [
{
product: {
...baseMetadata,
id: 3,
name: 'Product Z',
brand: 'Brand Z',
sku: 'SKU-Z',
product_price: 15000,
selling_price: 18000,
tax: 8,
expiry_period: 90,
uom: {
...baseMetadata,
id: 3,
name: 'KG',
},
product_category: {
...baseMetadata,
id: 3,
code: 'CAT-3',
name: 'Category 3',
},
suppliers: [],
flags: [],
},
product_qty: 8,
},
],
deliveries: [
{
delivery_cost: 40000,
delivery_cost_per_item: 5000,
document: 'doc3.pdf',
driver_name: 'Cici',
vehicle_plate: 'F 9101 GH',
supplier: {
...baseMetadata,
id: 3,
name: 'Supplier 3',
alias: 'S3',
category: 'Return',
pic: 'PIC 3',
type: 'Type 3',
hatchery: 'Hatchery 3',
phone: '08123456781',
email: 'supplier3@example.com',
address: 'Address 3',
npwp: '1234567890123458',
account_number: '1234567892',
balance: 500,
due_date: 10,
},
products: [
{
product: {
...baseMetadata,
id: 3,
name: 'Product Z',
brand: 'Brand Z',
sku: 'SKU-Z',
product_price: 15000,
selling_price: 18000,
tax: 8,
expiry_period: 90,
uom: {
...baseMetadata,
id: 3,
name: 'KG',
},
product_category: {
...baseMetadata,
id: 3,
code: 'CAT-3',
name: 'Category 3',
},
suppliers: [],
flags: [],
},
product_qty: 8,
},
],
},
],
},
{
...baseMetadata,
id: 4,
transfer_reason: 'Transfer Internal',
transfer_date: '2024-06-04',
source_warehouse: {
...baseMetadata,
id: 4,
name: 'Warehouse D',
type: 'AREA',
area: { id: 4, name: 'Area 4' },
},
destination_warehouse: {
...baseMetadata,
id: 5,
name: 'Warehouse E',
type: 'AREA',
area: { id: 5, name: 'Area 5' },
},
products: [
{
product: {
...baseMetadata,
id: 4,
name: 'Product A',
brand: 'Brand A',
sku: 'SKU-A',
product_price: 5000,
selling_price: 7000,
tax: 0,
expiry_period: 60,
uom: {
...baseMetadata,
id: 4,
name: 'LITER',
},
product_category: {
...baseMetadata,
id: 4,
code: 'CAT-4',
name: 'Category 4',
},
suppliers: [],
flags: [],
},
product_qty: 20,
},
],
deliveries: [
{
delivery_cost: 30000,
delivery_cost_per_item: 1500,
document: 'doc4.pdf',
driver_name: 'Dedi',
vehicle_plate: 'H 2345 IJ',
supplier: {
...baseMetadata,
id: 4,
name: 'Supplier 4',
alias: 'S4',
category: 'Internal',
pic: 'PIC 4',
type: 'Type 4',
hatchery: 'Hatchery 4',
phone: '08123456782',
email: 'supplier4@example.com',
address: 'Address 4',
npwp: '1234567890123459',
account_number: '1234567893',
balance: 200,
due_date: 20,
},
products: [
{
product: {
...baseMetadata,
id: 4,
name: 'Product A',
brand: 'Brand A',
sku: 'SKU-A',
product_price: 5000,
selling_price: 7000,
tax: 0,
expiry_period: 60,
uom: {
...baseMetadata,
id: 4,
name: 'LITER',
},
product_category: {
...baseMetadata,
id: 4,
code: 'CAT-4',
name: 'Category 4',
},
suppliers: [],
flags: [],
},
product_qty: 20,
},
],
},
],
},
];
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import { TableRowOptions } from '@/components/table/TableRowOptions';
const MovementTable = () => {
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const {
state: tableFilterState,
updateFilter,
setPage,
setPageSize,
toQueryString: getTableFilterQueryString,
} = useTableFilter({
initial: { search: '' },
paramMap: { page: 'page', pageSize: 'limit' },
});
const [sorting, setSorting] = useState<SortingState>([]);
const [, setSelectedMovement] = useState<Movement | undefined>(undefined);
const [selectedMovement, setSelectedMovement] = useState<
Movement | undefined
>(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const deleteModal = useModal();
const {
data: movements,
isLoading,
mutate: refreshMovements,
} = useSWR(
`${MovementApi.basePath}${getTableFilterQueryString()}`,
MovementApi.getAllFetcher
);
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value);
updateFilter('search', e.target.value);
setPage(1);
};
@@ -469,17 +62,15 @@ const MovementTable = () => {
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
setTimeout(() => {
setIsDeleteLoading(false);
try {
await MovementApi.delete(selectedMovement?.id as number);
refreshMovements();
deleteModal.closeModal();
}, 1000);
} finally {
setIsDeleteLoading(false);
}
};
const paginatedData = useMemo(() => {
const start = (page - 1) * pageSize;
return dummyMovements.slice(start, start + pageSize);
}, [page, pageSize]);
return (
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-2 mb-4'>
@@ -489,85 +80,118 @@ const MovementTable = () => {
label: 'Tambah Movement',
}}
search={{
value: search,
value: tableFilterState.search,
onChange: searchChangeHandler,
placeholder: 'Cari Movement',
}}
/>
<TableRowSizeSelector
value={pageSize}
value={tableFilterState.pageSize}
onChange={pageSizeChangeHandler}
options={ROWS_OPTIONS}
/>
</div>
<Table
data={paginatedData}
<Table<Movement>
data={isResponseSuccess(movements) ? movements?.data : []}
columns={[
{
header: '#',
cell: (props) => pageSize * (page - 1) + props.row.index + 1,
},
{
accessorKey: 'source_warehouse',
header: 'Gudang Asal',
cell: (props) => props.row.original.source_warehouse.name,
},
{
accessorKey: 'destination_warehouse',
header: 'Gudang Tujuan',
cell: (props) => props.row.original.destination_warehouse.name,
},
{
accessorKey: 'products',
header: 'Nama Produk',
cell: (props) =>
props.row.original.products
.map((p) => p.product.name)
.join(', '),
tableFilterState.pageSize * (tableFilterState.page - 1) +
props.row.index +
1,
},
{
accessorFn: (row) => row.source_warehouse?.name,
header: 'Gudang Asal',
},
{
accessorFn: (row) => row.destination_warehouse?.name,
header: 'Gudang Tujuan',
},
{
accessorKey: 'transfer_reason',
header: 'Catatan',
},
{
accessorKey: 'delivery_cost',
header: 'Biaya Pengiriman',
accessorKey: 'transfer_date',
header: 'Tanggal',
cell: (props) =>
props.row.original.deliveries
.reduce((sum, d) => sum + d.delivery_cost, 0)
.toLocaleString('id-ID'),
new Date(props.row.original.transfer_date).toLocaleDateString(
'id-ID'
),
},
{
id: 'actions',
cell: (props) => (
<div className='dropdown dropdown-end'>
<Button tabIndex={0} variant='ghost' className='px-2'>
<Icon icon='carbon:overflow-menu-vertical' />
</Button>
<TableRowOptions
type='dropdown'
recordId={props.row.original.id}
basePath='/inventory/movement'
onDelete={() => {
setSelectedMovement(props.row.original);
deleteModal.openModal();
}}
/>
</div>
),
accessorFn: (row) => {
const totalCost = row.deliveries?.reduce(
(sum, d) => sum + (d.shipping_cost_total || 0),
0
);
return totalCost?.toLocaleString('id-ID');
},
header: 'Biaya Pengiriman',
},
{
header: 'Aksi',
cell: (props) => {
const currentPageSize =
props.table.getPaginationRowModel().rows.length;
const currentPageRows =
props.table.getPaginationRowModel().flatRows;
const currentRowRelativeIndex =
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
const deleteClickHandler = () => {
setSelectedMovement(props.row.original);
deleteModal.openModal();
};
return (
<>
{currentPageSize > 2 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<TableRowOptions
type='dropdown'
recordId={props.row.original.id}
basePath='/inventory/movement'
onDelete={deleteClickHandler}
queryParam='movementId'
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<TableRowOptions
type='collapse'
recordId={props.row.original.id}
basePath='/inventory/movement'
onDelete={deleteClickHandler}
queryParam='movementId'
/>
</RowCollapseOptions>
)}
</>
);
},
},
]}
pageSize={pageSize}
page={page}
totalItems={dummyMovements.length}
pageSize={tableFilterState.pageSize}
page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
totalItems={
isResponseSuccess(movements) ? movements?.meta?.total_results : 0
}
onPageChange={setPage}
isLoading={false}
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
className={{
containerClassName: cn({
'mb-20': paginatedData.length === 0,
'mb-20':
isResponseSuccess(movements) && movements?.data?.length === 0,
}),
tableWrapperClassName: 'overflow-x-auto min-h-full!',
tableClassName: 'font-inter w-full table-auto min-h-full!',