Merge branch 'fix/inventory-product' into 'development'

[FIX/FE] Inventory Product

See merge request mbugroup/lti-web-client!463

src/components/Pagination.tsx

@@ -226,7 +226,7 @@ const Pagination = ({
 
   const PageInfo = () => (
     <span className='text-nowrap text-sm font-medium text-base-content/50'>
-      Page {currentPage} of {totalPages}
+      Total Item: {totalItems} | Page {currentPage} of {totalPages}
     </span>
   );
 

src/components/pages/inventory/product/detail/StockLogTable.tsx

@@ -1,25 +1,11 @@
 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 StockLogTable = ({
+const stockLogTableColumns: ColumnDef<StockLog>[] = [
-  stockLogs,
-}: {
-  stockLogs: (StockLog & { warehouse_name: string; warehouse_id: number })[];
-}) => {
-  return (
-    <Card
-      title='Informasi Stock Produk'
-      collapsible
-      variant='bordered'
-      className={{
-        wrapper: 'w-full',
-      }}
-    >
-      <Table<StockLog>
-        data={stockLogs}
-        columns={[
   {
     header: 'ID',
     accessorKey: 'id',
@@ -76,7 +62,32 @@ const StockLogTable = ({
     header: 'Oleh',
     accessorKey: 'created_user.name',
   },
-        ]}
+];
+
+const StockLogTable = ({
+  stockLogs,
+}: {
+  stockLogs: (StockLog & { warehouse_name: string; warehouse_id: number })[];
+}) => {
+  const { state: tableFilterState, setPage, setPageSize } = useTableFilter();
+
+  return (
+    <Card
+      title='Informasi Stock Produk'
+      collapsible
+      variant='bordered'
+      className={{
+        wrapper: 'w-full',
+      }}
+    >
+      <Table<StockLog>
+        data={stockLogs}
+        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!',

src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx

@@ -1,25 +1,11 @@
 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 StockProductWarehouseTable = ({
+const stockProductWarehouseTableColumns: ColumnDef<ProductWarehouseStock>[] = [
-  productWarehouseStock,
-}: {
-  productWarehouseStock?: ProductWarehouseStock[];
-}) => {
-  return (
-    <Card
-      title='Informasi Gudang'
-      collapsible
-      variant='bordered'
-      className={{
-        wrapper: 'w-full',
-      }}
-    >
-      <Table<ProductWarehouseStock>
-        data={productWarehouseStock ?? []}
-        columns={[
   {
     header: 'Nama Gudang',
     accessorKey: 'warehouse_name',
@@ -42,7 +28,32 @@ const StockProductWarehouseTable = ({
       return formatNumber(props.row.original.current_stock);
     },
   },
-        ]}
+];
+
+const StockProductWarehouseTable = ({
+  productWarehouseStock,
+}: {
+  productWarehouseStock?: ProductWarehouseStock[];
+}) => {
+  const { state: tableFilterState, setPage, setPageSize } = useTableFilter();
+
+  return (
+    <Card
+      title='Informasi Gudang'
+      collapsible
+      variant='bordered'
+      className={{
+        wrapper: 'w-full',
+      }}
+    >
+      <Table<ProductWarehouseStock>
+        data={productWarehouseStock ?? []}
+        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!',