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

Merge branch 'feat/FE/US-35/TASK-62-65-slicing-ui-for-inventory-movement-forms' into 'feat/FE/US-35/stock-transfer'

Browse Source 
Feat/fe/us 35/task 62 65 slicing ui for inventory movement forms

See merge request mbugroup/lti-web-client!5
This commit is contained in:
Restu Bumi Ryan Ramadhan
2025-10-09 06:11:39 +00:00
parent 94a5ce5604 e2036ab3dc
commit 558a1788dc
6 changed files with 815 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/inventory/movement/page.tsx
+11
View File
@@ -0,0 +1,11 @@
import MovementTable from '@/components/pages/inventory/movement/MovementTable';
const Movement = () => {
return (
<section className='w-full p-4'>
<MovementTable />
</section>
);
};
export default Movement;
src/components/pages/inventory/movement/MovementTable.tsx
+651
View File
@@ -0,0 +1,651 @@
'use client';
import { useState, useMemo } from 'react';
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
import { Icon } from '@iconify/react';
import Table from '@/components/Table';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import Button from '@/components/Button';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import { cn } from '@/lib/helper';
import { ROWS_OPTIONS } from '@/config/constant';
import { Movement } from '@/types/api/inventory/movement';
import { BaseMetadata } from '@/types/api/api-general';
// Dummy data
const baseMetadata: 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',
phone: '08123456789',
email: 'supplier1@example.com',
address: 'Address 1',
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',
},
],
name: 'Movement 1',
},
{
...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',
phone: '08123456780',
email: 'supplier2@example.com',
address: 'Address 2',
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',
},
],
name: 'Movement 2',
},
{
...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',
phone: '08123456781',
email: 'supplier3@example.com',
address: 'Address 3',
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',
},
],
name: 'Movement 3',
},
{
...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',
phone: '08123456782',
email: 'supplier4@example.com',
address: 'Address 4',
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',
},
],
name: 'Movement 4',
},
{
...baseMetadata,
id: 5,
alasan_transfer: 'Distribusi',
tanggal_transfer: '2024-06-05',
warehouse_asal: {
...baseMetadata,
id: 5,
name: 'Warehouse E',
type: 'AREA',
area: { id: 5, name: 'Area 5' },
},
warehouse_tujuan: {
...baseMetadata,
id: 1,
name: 'Warehouse A',
type: 'AREA',
area: { id: 1, name: 'Area 1' },
},
product: [
{
product: {
...baseMetadata,
id: 5,
name: 'Product B',
brand: 'Brand B',
sku: 'SKU-B',
product_price: 8000,
selling_price: 9500,
tax: 2,
expiry_period: 120,
uom: {
...baseMetadata,
id: 5,
name: 'PAK',
},
product_category: {
...baseMetadata,
id: 5,
code: 'CAT-5',
name: 'Category 5',
},
suppliers: [],
flags: [],
},
qty_product: 15,
},
],
ekspedisi: [
{
product_id: 5,
qty: 15,
supplier: {
...baseMetadata,
id: 5,
name: 'Supplier 5',
alias: 'S5',
category: 'Distribusi',
pic: 'PIC 5',
type: 'Type 5',
phone: '08123456783',
email: 'supplier5@example.com',
address: 'Address 5',
account_number: '1234567894',
balance: 300,
due_date: 25,
},
plat_nomor: 'K 6789 KL',
no_surat_jalan: 'SJ-005',
dokumen: 'doc5.pdf',
biaya_ekspedisi: 70000,
nama_sopir: 'Eka',
},
],
name: 'Movement 5',
},
];
const RowOptionsMenu = ({
type = 'dropdown',
props,
deleteClickHandler,
}: {
type: 'dropdown' | 'collapse';
props: CellContext<Movement, unknown>;
deleteClickHandler: () => void;
}) => (
<div
tabIndex={type === 'dropdown' ? 0 : undefined}
className={cn(
{
'dropdown-content': type === 'dropdown',
'mt-2': type === 'collapse',
},
'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
)}
>
<Button
href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
variant='ghost'
color='primary'
className='justify-start text-sm'
>
<Icon icon='mdi:eye-outline' width={16} height={16} />
Detail
</Button>
<Button
href={`/inventory/movement/detail/edit/?movementId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
>
<Icon icon='material-symbols:edit-outline' width={16} height={16} />
Edit
</Button>
<Button
onClick={deleteClickHandler}
variant='ghost'
color='error'
className='text-error hover:text-inherit'
>
<Icon
icon='material-symbols:delete-outline-rounded'
width={16}
height={16}
className='justify-start text-sm'
/>
Delete
</Button>
</div>
);
const MovementTable = () => {
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedMovement, setSelectedMovement] = useState<
Movement | undefined
>(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const paginatedData = useMemo(() => {
const start = (page - 1) * pageSize;
return dummyMovements.slice(start, start + pageSize);
}, [page, pageSize]);
const movementsColumns: ColumnDef<Movement>[] = [
{
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),
},
{
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}>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
];
const deleteModal = useModal();
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
setTimeout(() => {
setIsDeleteLoading(false);
deleteModal.closeModal();
}, 1000);
};
const searchChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (
e
) => {
setSearch(e.target.value);
setPage(1);
};
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
setPageSize(newVal.value as number);
setPage(1);
};
return (
<>
<div className='w-full p-0 sm:p-4'>
<div className='flex flex-col gap-2 mb-4'>
<div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
<div className='flex flex-row'>
<Button href='/inventory/movement/add' color='primary'>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah Movement
</Button>
</div>
<DebouncedTextInput
name='search'
placeholder='Cari Movement'
value={search}
onChange={searchChangeHandler}
className={{ wrapper: 'sm:max-w-3xs' }}
/>
</div>
<div className='flex flex-row justify-end'>
<SelectInput
label='Baris'
options={ROWS_OPTIONS}
value={{
label: String(pageSize),
value: pageSize,
}}
onChange={pageSizeChangeHandler}
className={{ wrapper: 'max-w-28' }}
/>
</div>
</div>
<Table<Movement>
data={paginatedData}
columns={movementsColumns}
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',
}}
/>
</div>
<ConfirmationModal
ref={deleteModal.ref}
type='error'
text={`Apakah anda yakin ingin menghapus data Movement ini (${selectedMovement?.name})?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler,
}}
/>
</>
);
};
export default MovementTable;
src/components/pages/inventory/movement/form/MovementForm.schema.ts
+67
View File
@@ -0,0 +1,67 @@
import * as Yup from 'yup';
export const MovementFormSchema = Yup.object({
alasan_transfer: Yup.string()
.required('Alasan Transfer wajib diisi!'),
tanggal_transfer: Yup.date()
.required('Tanggal Transfer wajib diisi!')
.typeError('Tanggal Transfer tidak valid!'),
warehouse_asal: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
warehouse_asal_id: Yup.number()
.required('Gudang Asal wajib diisi!'),
warehouse_tujuan: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
warehouse_tujuan_id: Yup.number()
.required('Gudang Tujuan wajib diisi!'),
alasan: Yup.string()
.required('Alasan wajib diisi!'),
product: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
product_id: Yup.array()
.of(Yup.number()).min(1, 'Pilih minimal 1 produk')
.required('Produk wajib diisi!'),
qty_product: Yup.array()
.of(Yup.number().min(1, 'Kuantitas minimal 1'))
.min(1, 'Pilih minimal 1 produk')
.required('Kuantitas wajib diisi!'),
ekspedisi: Yup.array().of(
Yup.object({
product: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
product_id: Yup.number()
.required('Produk wajib diisi!'),
qty: Yup.number().min(1, 'Kuantitas minimal 1')
.required('Kuantitas wajib diisi!'),
supplier: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
supplier_id: Yup.number()
.required('Supplier wajib diisi!'),
plat_nomor: Yup.string()
.required('Plat Nomor wajib diisi!'),
no_surat_jalan: Yup.string()
.required('No Surat Jalan wajib diisi!'),
dokumen: Yup.mixed()
.required('Dokumen wajib diisi!'),
biaya_ekspedisi: Yup.number()
.min(0, 'Biaya Ekspedisi minimal 0')
.required('Biaya Ekspedisi wajib diisi!'),
nama_sopir: Yup.string()
.required('Nama Sopir wajib diisi!'),
})
).min(1, 'Pilih minimal 1 ekspedisi').required('Ekspedisi wajib diisi!'),
});
export const UpdateMovementFormSchema = MovementFormSchema;
export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
src/config/constant.ts
+23
View File
@@ -12,6 +12,29 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
icon: 'gg:chart', icon: 'gg:chart',
}, },
{
title: 'Persediaan',
link: '/inventory',
icon: 'mdi:warehouse',
submenu: [
{
title: 'Product',
link: '/inventory/product',
icon: 'mdi:package-variant-closed',
},
{
title: 'Penyesuaian Stok',
link: '/inventory/adjustment',
icon: 'mdi:database-edit',
},
{
title: 'Transfer Stok',
link: '/inventory/movement',
icon: 'mdi:swap-horizontal',
},
],
},
{ {
title: 'Master Data', title: 'Master Data',
link: '/master-data', link: '/master-data',
src/services/api/inventory.ts
+12
View File
@@ -0,0 +1,12 @@
import {
CreateMovementPayload,
Movement,
UpdateMovementPayload,
} from "@/types/api/inventory/movement";
import {BaseApiService} from "@/services/api/base";
export const MovementApi = new BaseApiService<
Movement,
CreateMovementPayload,
UpdateMovementPayload
>('/inventory/movements');
src/types/api/inventory/movement.d.ts
Vendored
+51
View File
@@ -0,0 +1,51 @@
import {BaseMetadata} from '@/types/api/api-general';
import {Product} from "@/types/api/master-data/product";
import {Supplier} from "@/types/api/master-data/supplier";
import {Warehouse} from "@/types/api/master-data/warehouse";
export type BaseMovement = {
id: number;
alasan_transfer: string;
tanggal_transfer: string;
warehouse_asal: Warehouse;
warehouse_tujuan: Warehouse;
product: Array<{
product: Product;
qty_product: number;
}>;
ekspedisi: Array<{
product_id: number;
qty: number;
supplier: Supplier;
plat_nomor: string;
no_surat_jalan: string;
dokumen: string;
biaya_ekspedisi: number;
nama_sopir: string;
}>;
name: string;
};
export type Movement = BaseMetadata & BaseMovement;
export type CreateMovementPayload = {
alasan: string;
warehouse_asal_id: number;
warehouse_tujuan_id: number;
product: Array<{
product_id: number;
qty_product: number;
}>;
ekspedisi: Array<{
product_id: number;
qty: number;
supplier_id: number;
plat_nomor: string;
no_surat_jalan: string;
dokumen: string;
biaya_ekspedisi: number;
nama_sopir: string;
}>;
}
export type UpdateMovementPayload = CreateMovementPayload;