From 4b5ad0dcabf26301cfe2da63a8e15ef73ac937a4 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Wed, 6 May 2026 10:23:22 +0700 Subject: [PATCH 1/2] fix: show total item data --- src/components/Pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx index 43b26d90..1f2ba533 100644 --- a/src/components/Pagination.tsx +++ b/src/components/Pagination.tsx @@ -226,7 +226,7 @@ const Pagination = ({ const PageInfo = () => ( - Page {currentPage} of {totalPages} + Total Item: {totalItems} | Page {currentPage} of {totalPages} ); From e0a1922ed4744ce198a50e1e8da8f43cfb83b7b9 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Wed, 6 May 2026 10:31:00 +0700 Subject: [PATCH 2/2] fix: implement table filter --- .../product/detail/StockLogTable.tsx | 127 ++++++++++-------- .../detail/StockProductWarehouseTable.tsx | 59 ++++---- 2 files changed, 104 insertions(+), 82 deletions(-) diff --git a/src/components/pages/inventory/product/detail/StockLogTable.tsx b/src/components/pages/inventory/product/detail/StockLogTable.tsx index 0a305659..a8240952 100644 --- a/src/components/pages/inventory/product/detail/StockLogTable.tsx +++ b/src/components/pages/inventory/product/detail/StockLogTable.tsx @@ -1,13 +1,76 @@ import Card from '@/components/Card'; import Table from '@/components/Table'; import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper'; +import { useTableFilter } from '@/services/hooks/useTableFilter'; import { StockLog } from '@/types/api/inventory/product'; +import { ColumnDef } from '@tanstack/react-table'; + +const stockLogTableColumns: ColumnDef[] = [ + { + header: 'ID', + accessorKey: 'id', + }, + { + header: 'Tanggal', + accessorKey: 'created_at', + cell: (props) => { + return formatDate(props.row.original.created_at, 'DD-MMM-yyyy'); + }, + }, + { + header: 'Gudang', + accessorKey: 'warehouse_name', + }, + { + header: 'Stock Akhir', + accessorKey: 'stock', + cell: (props) => { + return formatNumber(props.row.original.stock); + }, + }, + { + header: 'Peningkatan', + accessorKey: 'increase', + cell: (props) => { + return formatNumber(props.row.original.increase); + }, + }, + { + header: 'Penurunan', + accessorKey: 'decrease', + cell: (props) => { + return formatNumber(props.row.original.decrease); + }, + }, + { + header: 'Jenis Transaksi', + accessorKey: 'loggable_type', + cell: (props) => { + return props.row.original.loggable_type + ? formatTitleCase(props.row.original.loggable_type) + : '-'; + }, + }, + { + header: 'Catatan', + accessorKey: 'notes', + cell: (props) => { + return props.row.original.notes ? props.row.original.notes : '-'; + }, + }, + { + header: 'Oleh', + accessorKey: 'created_user.name', + }, +]; const StockLogTable = ({ stockLogs, }: { stockLogs: (StockLog & { warehouse_name: string; warehouse_id: number })[]; }) => { + const { state: tableFilterState, setPage, setPageSize } = useTableFilter(); + return ( data={stockLogs} - columns={[ - { - header: 'ID', - accessorKey: 'id', - }, - { - header: 'Tanggal', - accessorKey: 'created_at', - cell: (props) => { - return formatDate(props.row.original.created_at, 'DD-MMM-yyyy'); - }, - }, - { - header: 'Gudang', - accessorKey: 'warehouse_name', - }, - { - header: 'Stock Akhir', - accessorKey: 'stock', - cell: (props) => { - return formatNumber(props.row.original.stock); - }, - }, - { - header: 'Peningkatan', - accessorKey: 'increase', - cell: (props) => { - return formatNumber(props.row.original.increase); - }, - }, - { - header: 'Penurunan', - accessorKey: 'decrease', - cell: (props) => { - return formatNumber(props.row.original.decrease); - }, - }, - { - header: 'Jenis Transaksi', - accessorKey: 'loggable_type', - cell: (props) => { - return props.row.original.loggable_type - ? formatTitleCase(props.row.original.loggable_type) - : '-'; - }, - }, - { - header: 'Catatan', - accessorKey: 'notes', - cell: (props) => { - return props.row.original.notes ? props.row.original.notes : '-'; - }, - }, - { - header: 'Oleh', - accessorKey: 'created_user.name', - }, - ]} + columns={stockLogTableColumns} + page={tableFilterState.page ?? 0} + pageSize={tableFilterState.pageSize} + onPageChange={setPage} + onPageSizeChange={setPageSize} + totalItems={stockLogs?.length ?? 0} className={{ containerClassName: 'mt-6', tableWrapperClassName: 'overflow-x-auto min-h-full!', diff --git a/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx b/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx index aa375bdc..4d361c5c 100644 --- a/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx +++ b/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx @@ -1,13 +1,42 @@ import Card from '@/components/Card'; import Table from '@/components/Table'; import { formatNumber } from '@/lib/helper'; +import { useTableFilter } from '@/services/hooks/useTableFilter'; import { ProductWarehouseStock } from '@/types/api/inventory/product'; +import { ColumnDef } from '@tanstack/react-table'; + +const stockProductWarehouseTableColumns: ColumnDef[] = [ + { + header: 'Nama Gudang', + accessorKey: 'warehouse_name', + }, + { + header: 'Lokasi', + accessorKey: 'location', + cell: (props) => { + return props.row.original.location != null + ? props.row.original.location.name + : '-'; + }, + }, + { + header: 'Stok', + accessorFn(row) { + return row.current_stock; + }, + cell: (props) => { + return formatNumber(props.row.original.current_stock); + }, + }, +]; const StockProductWarehouseTable = ({ productWarehouseStock, }: { productWarehouseStock?: ProductWarehouseStock[]; }) => { + const { state: tableFilterState, setPage, setPageSize } = useTableFilter(); + return ( data={productWarehouseStock ?? []} - columns={[ - { - header: 'Nama Gudang', - accessorKey: 'warehouse_name', - }, - { - header: 'Lokasi', - accessorKey: 'location', - cell: (props) => { - return props.row.original.location != null - ? props.row.original.location.name - : '-'; - }, - }, - { - header: 'Stok', - accessorFn(row) { - return row.current_stock; - }, - cell: (props) => { - return formatNumber(props.row.original.current_stock); - }, - }, - ]} + columns={stockProductWarehouseTableColumns} + pageSize={tableFilterState.pageSize} + page={tableFilterState.page ?? 0} + totalItems={productWarehouseStock?.length ?? 0} + onPageChange={setPage} + onPageSizeChange={setPageSize} className={{ containerClassName: 'mt-6', tableWrapperClassName: 'overflow-x-auto min-h-full!',