mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
rstubryan
490 lines
12 KiB
TypeScript
490 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
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 { 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,
|
|
alasan_transfer: 'Restock',
|
|
tanggal_transfer: '2024-06-01',
|
|
warehouse_asal: {
|
|
...baseMetadata,
|
|
id: 1,
|
|
name: 'Warehouse A',
|
|
type: 'AREA',
|
|
area: { id: 1, name: 'Area 1' },
|
|
},
|
|
warehouse_tujuan: {
|
|
...baseMetadata,
|
|
id: 2,
|
|
name: 'Warehouse B',
|
|
type: 'AREA',
|
|
area: { id: 2, name: 'Area 2' },
|
|
},
|
|
product: [
|
|
{
|
|
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: [],
|
|
},
|
|
qty_product: 10,
|
|
},
|
|
],
|
|
ekspedisi: [
|
|
{
|
|
product_id: 1,
|
|
qty: 10,
|
|
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,
|
|
},
|
|
plat_nomor: 'B 1234 CD',
|
|
no_surat_jalan: 'SJ-001',
|
|
dokumen: 'doc1.pdf',
|
|
biaya_ekspedisi: 50000,
|
|
nama_sopir: 'Andi',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
...baseMetadata,
|
|
id: 2,
|
|
alasan_transfer: 'Mutasi Stok',
|
|
tanggal_transfer: '2024-06-02',
|
|
warehouse_asal: {
|
|
...baseMetadata,
|
|
id: 2,
|
|
name: 'Warehouse B',
|
|
type: 'AREA',
|
|
area: { id: 2, name: 'Area 2' },
|
|
},
|
|
warehouse_tujuan: {
|
|
...baseMetadata,
|
|
id: 3,
|
|
name: 'Warehouse C',
|
|
type: 'AREA',
|
|
area: { id: 3, name: 'Area 3' },
|
|
},
|
|
product: [
|
|
{
|
|
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: [],
|
|
},
|
|
qty_product: 5,
|
|
},
|
|
],
|
|
ekspedisi: [
|
|
{
|
|
product_id: 2,
|
|
qty: 5,
|
|
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,
|
|
},
|
|
plat_nomor: 'D 5678 EF',
|
|
no_surat_jalan: 'SJ-002',
|
|
dokumen: 'doc2.pdf',
|
|
biaya_ekspedisi: 60000,
|
|
nama_sopir: 'Budi',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
...baseMetadata,
|
|
id: 3,
|
|
alasan_transfer: 'Pengembalian',
|
|
tanggal_transfer: '2024-06-03',
|
|
warehouse_asal: {
|
|
...baseMetadata,
|
|
id: 3,
|
|
name: 'Warehouse C',
|
|
type: 'AREA',
|
|
area: { id: 3, name: 'Area 3' },
|
|
},
|
|
warehouse_tujuan: {
|
|
...baseMetadata,
|
|
id: 1,
|
|
name: 'Warehouse A',
|
|
type: 'AREA',
|
|
area: { id: 1, name: 'Area 1' },
|
|
},
|
|
product: [
|
|
{
|
|
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: [],
|
|
},
|
|
qty_product: 8,
|
|
},
|
|
],
|
|
ekspedisi: [
|
|
{
|
|
product_id: 3,
|
|
qty: 8,
|
|
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,
|
|
},
|
|
plat_nomor: 'F 9101 GH',
|
|
no_surat_jalan: 'SJ-003',
|
|
dokumen: 'doc3.pdf',
|
|
biaya_ekspedisi: 40000,
|
|
nama_sopir: 'Cici',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
...baseMetadata,
|
|
id: 4,
|
|
alasan_transfer: 'Transfer Internal',
|
|
tanggal_transfer: '2024-06-04',
|
|
warehouse_asal: {
|
|
...baseMetadata,
|
|
id: 4,
|
|
name: 'Warehouse D',
|
|
type: 'AREA',
|
|
area: { id: 4, name: 'Area 4' },
|
|
},
|
|
warehouse_tujuan: {
|
|
...baseMetadata,
|
|
id: 5,
|
|
name: 'Warehouse E',
|
|
type: 'AREA',
|
|
area: { id: 5, name: 'Area 5' },
|
|
},
|
|
product: [
|
|
{
|
|
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: [],
|
|
},
|
|
qty_product: 20,
|
|
},
|
|
],
|
|
ekspedisi: [
|
|
{
|
|
product_id: 4,
|
|
qty: 20,
|
|
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,
|
|
},
|
|
plat_nomor: 'H 2345 IJ',
|
|
no_surat_jalan: 'SJ-004',
|
|
dokumen: 'doc4.pdf',
|
|
biaya_ekspedisi: 30000,
|
|
nama_sopir: 'Dedi',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const MovementTable = () => {
|
|
const [search, setSearch] = useState('');
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(10);
|
|
const [sorting, setSorting] = useState<SortingState>([]);
|
|
const [, setSelectedMovement] = useState<Movement | undefined>(undefined);
|
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
|
|
|
const deleteModal = useModal();
|
|
|
|
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearch(e.target.value);
|
|
setPage(1);
|
|
};
|
|
|
|
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
|
const newVal = val as OptionType;
|
|
setPageSize(newVal.value as number);
|
|
setPage(1);
|
|
};
|
|
|
|
const confirmationModalDeleteClickHandler = async () => {
|
|
setIsDeleteLoading(true);
|
|
setTimeout(() => {
|
|
setIsDeleteLoading(false);
|
|
deleteModal.closeModal();
|
|
}, 1000);
|
|
};
|
|
|
|
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'>
|
|
<TableToolbar
|
|
addButton={{
|
|
href: '/inventory/movement/add',
|
|
label: 'Tambah Movement',
|
|
}}
|
|
search={{
|
|
value: search,
|
|
onChange: searchChangeHandler,
|
|
placeholder: 'Cari Movement',
|
|
}}
|
|
/>
|
|
<TableRowSizeSelector
|
|
value={pageSize}
|
|
onChange={pageSizeChangeHandler}
|
|
options={ROWS_OPTIONS}
|
|
/>
|
|
</div>
|
|
|
|
<Table
|
|
data={paginatedData}
|
|
columns={[
|
|
{
|
|
header: '#',
|
|
cell: (props) => pageSize * (page - 1) + props.row.index + 1,
|
|
},
|
|
{
|
|
accessorKey: 'warehouse_asal',
|
|
header: 'Gudang Asal',
|
|
cell: (props) => props.row.original.warehouse_asal.name,
|
|
},
|
|
{
|
|
accessorKey: 'warehouse_tujuan',
|
|
header: 'Gudang Tujuan',
|
|
cell: (props) => props.row.original.warehouse_tujuan.name,
|
|
},
|
|
{
|
|
accessorKey: 'product',
|
|
header: 'Nama Produk',
|
|
cell: (props) =>
|
|
props.row.original.product.map((p) => p.product.name),
|
|
},
|
|
{
|
|
accessorKey: 'alasan_transfer',
|
|
header: 'Catatan',
|
|
},
|
|
{
|
|
accessorKey: 'biaya_ekspedisi',
|
|
header: 'Biaya Ekspedisi',
|
|
cell: (props) =>
|
|
props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
|
|
},
|
|
{
|
|
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>
|
|
),
|
|
},
|
|
]}
|
|
pageSize={pageSize}
|
|
page={page}
|
|
totalItems={dummyMovements.length}
|
|
onPageChange={setPage}
|
|
isLoading={false}
|
|
sorting={sorting}
|
|
setSorting={setSorting}
|
|
className={{
|
|
containerClassName: cn({
|
|
'mb-20': paginatedData.length === 0,
|
|
}),
|
|
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
|
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
|
headerRowClassName: 'border-b border-b-gray-200',
|
|
headerColumnClassName:
|
|
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
|
bodyRowClassName: 'border-b border-b-gray-200',
|
|
bodyColumnClassName:
|
|
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
|
}}
|
|
/>
|
|
|
|
<ConfirmationModal
|
|
ref={deleteModal.ref}
|
|
type='error'
|
|
text={`Apakah anda yakin ingin menghapus data Movement ini?`}
|
|
secondaryButton={{
|
|
text: 'Tidak',
|
|
}}
|
|
primaryButton={{
|
|
text: 'Ya',
|
|
color: 'error',
|
|
isLoading: isDeleteLoading,
|
|
onClick: confirmationModalDeleteClickHandler,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MovementTable;
|