Merge branch 'development' into 'production'

Development

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

.rtk/filters.toml

@@ -0,0 +1,13 @@
+# Project-local RTK filters — commit this file with your repo.
+# Filters here override user-global and built-in filters.
+# Docs: https://github.com/rtk-ai/rtk#custom-filters
+schema_version = 1
+
+# Example: suppress build noise from a custom tool
+# [filters.my-tool]
+# description = "Compact my-tool output"
+# match_command = "^my-tool\\s+build"
+# strip_ansi = true
+# strip_lines_matching = ["^\\s*$", "^Downloading", "^Installing"]
+# max_lines = 30
+# on_empty = "my-tool: ok"

CLAUDE.md

@@ -260,3 +260,155 @@ const handleExportExcel = useCallback(async () => {
 - Do **not** import `xlsx`, `@react-pdf/renderer`, `jspdf`, `exceljs` in page/tab components.
 
 **Reference implementation:** `MarketingReportApiService.exportDailyMarketingToExcel` / `exportDailyMarketingToPDF` in [src/services/api/report/marketing-report.ts](src/services/api/report/marketing-report.ts), consumed by [src/components/pages/report/marketing/tab/DailyMarketingTab.tsx](src/components/pages/report/marketing/tab/DailyMarketingTab.tsx).
+
+<!-- rtk-instructions v2 -->
+
+# RTK (Rust Token Killer) - Token-Optimized Commands
+
+## Golden Rule
+
+**Always prefix commands with `rtk`**. If RTK has a dedicated filter, it uses it. If not, it passes through unchanged. This means RTK is always safe to use.
+
+**Important**: Even in command chains with `&&`, use `rtk`:
+
+```bash
+# ❌ Wrong
+git add . && git commit -m "msg" && git push
+
+# ✅ Correct
+rtk git add . && rtk git commit -m "msg" && rtk git push
+```
+
+## RTK Commands by Workflow
+
+### Build & Compile (80-90% savings)
+
+```bash
+rtk cargo build         # Cargo build output
+rtk cargo check         # Cargo check output
+rtk cargo clippy        # Clippy warnings grouped by file (80%)
+rtk tsc                 # TypeScript errors grouped by file/code (83%)
+rtk lint                # ESLint/Biome violations grouped (84%)
+rtk prettier --check    # Files needing format only (70%)
+rtk next build          # Next.js build with route metrics (87%)
+```
+
+### Test (60-99% savings)
+
+```bash
+rtk cargo test          # Cargo test failures only (90%)
+rtk go test             # Go test failures only (90%)
+rtk jest                # Jest failures only (99.5%)
+rtk vitest              # Vitest failures only (99.5%)
+rtk playwright test     # Playwright failures only (94%)
+rtk pytest              # Python test failures only (90%)
+rtk rake test           # Ruby test failures only (90%)
+rtk rspec               # RSpec test failures only (60%)
+rtk test <cmd>          # Generic test wrapper - failures only
+```
+
+### Git (59-80% savings)
+
+```bash
+rtk git status          # Compact status
+rtk git log             # Compact log (works with all git flags)
+rtk git diff            # Compact diff (80%)
+rtk git show            # Compact show (80%)
+rtk git add             # Ultra-compact confirmations (59%)
+rtk git commit          # Ultra-compact confirmations (59%)
+rtk git push            # Ultra-compact confirmations
+rtk git pull            # Ultra-compact confirmations
+rtk git branch          # Compact branch list
+rtk git fetch           # Compact fetch
+rtk git stash           # Compact stash
+rtk git worktree        # Compact worktree
+```
+
+Note: Git passthrough works for ALL subcommands, even those not explicitly listed.
+
+### GitHub (26-87% savings)
+
+```bash
+rtk gh pr view <num>    # Compact PR view (87%)
+rtk gh pr checks        # Compact PR checks (79%)
+rtk gh run list         # Compact workflow runs (82%)
+rtk gh issue list       # Compact issue list (80%)
+rtk gh api              # Compact API responses (26%)
+```
+
+### JavaScript/TypeScript Tooling (70-90% savings)
+
+```bash
+rtk pnpm list           # Compact dependency tree (70%)
+rtk pnpm outdated       # Compact outdated packages (80%)
+rtk pnpm install        # Compact install output (90%)
+rtk npm run <script>    # Compact npm script output
+rtk npx <cmd>           # Compact npx command output
+rtk prisma              # Prisma without ASCII art (88%)
+```
+
+### Files & Search (60-75% savings)
+
+```bash
+rtk ls <path>           # Tree format, compact (65%)
+rtk read <file>         # Code reading with filtering (60%)
+rtk grep <pattern>      # Search grouped by file (75%)
+rtk find <pattern>      # Find grouped by directory (70%)
+```
+
+### Analysis & Debug (70-90% savings)
+
+```bash
+rtk err <cmd>           # Filter errors only from any command
+rtk log <file>          # Deduplicated logs with counts
+rtk json <file>         # JSON structure without values
+rtk deps                # Dependency overview
+rtk env                 # Environment variables compact
+rtk summary <cmd>       # Smart summary of command output
+rtk diff                # Ultra-compact diffs
+```
+
+### Infrastructure (85% savings)
+
+```bash
+rtk docker ps           # Compact container list
+rtk docker images       # Compact image list
+rtk docker logs <c>     # Deduplicated logs
+rtk kubectl get         # Compact resource list
+rtk kubectl logs        # Deduplicated pod logs
+```
+
+### Network (65-70% savings)
+
+```bash
+rtk curl <url>          # Compact HTTP responses (70%)
+rtk wget <url>          # Compact download output (65%)
+```
+
+### Meta Commands
+
+```bash
+rtk gain                # View token savings statistics
+rtk gain --history      # View command history with savings
+rtk discover            # Analyze Claude Code sessions for missed RTK usage
+rtk proxy <cmd>         # Run command without filtering (for debugging)
+rtk init                # Add RTK instructions to CLAUDE.md
+rtk init --global       # Add RTK to ~/.claude/CLAUDE.md
+```
+
+## Token Savings Overview
+
+| Category         | Commands                       | Typical Savings |
+| ---------------- | ------------------------------ | --------------- |
+| Tests            | vitest, playwright, cargo test | 90-99%          |
+| Build            | next, tsc, lint, prettier      | 70-87%          |
+| Git              | status, log, diff, add, commit | 59-80%          |
+| GitHub           | gh pr, gh run, gh issue        | 26-87%          |
+| Package Managers | pnpm, npm, npx                 | 70-90%          |
+| Files            | ls, read, grep, find           | 60-75%          |
+| Infrastructure   | docker, kubectl                | 85%             |
+| Network          | curl, wget                     | 65-70%          |
+
+Overall average: **60-90% token reduction** on common development operations.
+
+<!-- /rtk-instructions -->

src/components/Table.tsx

@@ -173,6 +173,7 @@ const Table = <TData extends object>({
   const tableOptions: TableOptions<TData> = {
     columns,
     data: isLoading ? (DUMMY_SKELETON_DATA as TData[]) : data, // Type assertion
+    defaultColumn: { sortDescFirst: false },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -69,6 +69,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       secondaryButton={
         secondaryButton
           ? {
+              ...secondaryButton,
               text: secondaryButton?.text ?? 'Tidak',
               onClick: (e) => {
                 if (secondaryButton && secondaryButton?.onClick) {

src/components/pages/expense/ExpensesTable.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
   ColumnDef,
   Row,
   SortingState,
+  Updater,
 } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
@@ -47,7 +42,8 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 type ExpenseTableFilters = {
   search: string;
-  nameSort: string;
+  sort_by: string;
+  order_by: string;
   transactionDate: string;
   realizationDate: string;
   locationId: string;
@@ -242,7 +238,8 @@ const ExpensesTable = () => {
       page: 1,
       pageSize: 10,
       search: '',
-      nameSort: '',
+      sort_by: '',
+      order_by: '',
       transactionDate: '',
       realizationDate: '',
       locationId: '',
@@ -261,7 +258,8 @@ const ExpensesTable = () => {
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      nameSort: 'sort_name',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
       transactionDate: 'transaction_date',
       realizationDate: 'realization_date',
       locationId: 'location_id',
@@ -319,7 +317,26 @@ const ExpensesTable = () => {
   const [exportProgressStartDate, setExportProgressStartDate] = useState('');
   const [exportProgressEndDate, setExportProgressEndDate] = useState('');
 
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.order_by === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('order_by', '', true);
+    }
+  };
+
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
@@ -437,10 +454,12 @@ const ExpensesTable = () => {
       cell: (props) => props.row.original.location?.name ?? '-',
     },
     {
+      accessorKey: 'created_user',
       accessorFn: (row) => row.created_user.name ?? '-',
       header: 'Nama Pengaju',
     },
     {
+      accessorKey: 'supplier',
       accessorFn: (row) => row.supplier.name ?? '-',
       header: 'Uraian',
     },
@@ -454,17 +473,20 @@ const ExpensesTable = () => {
     },
     {
       header: 'Status Pencairan',
+      enableSorting: false,
       cell: (props) => (
         <RealizationStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
     {
       header: 'Status BOP',
+      enableSorting: false,
       cell: (props) => (
         <ExpenseStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
     {
+      accessorKey: 'is_paid',
       header: 'Status Lunas',
       cell: (props) => {
         return (
@@ -478,6 +500,14 @@ const ExpensesTable = () => {
         );
       },
     },
+    {
+      accessorKey: 'created_at',
+      header: 'Tanggal Dibuat',
+      cell: (props) =>
+        props.row.original.created_at
+          ? formatDate(props.row.original.created_at, 'DD MMM YYYY')
+          : '-',
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -882,17 +912,6 @@ const ExpensesTable = () => {
     }
   }, [getTableFilterQueryString]);
 
-  // track sorting
-  useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
-    if (!isNameSorted) {
-      updateFilter('nameSort', '', false);
-    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
-  }, [sorting, updateFilter]);
-
   return (
     <>
       <div className='w-full'>
@@ -1051,7 +1070,8 @@ const ExpensesTable = () => {
                 'page',
                 'pageSize',
                 'search',
-                'nameSort',
+                'sort_by',
+                'order_by',
                 'userId',
                 'locationName',
                 'vendorName',
@@ -1152,7 +1172,8 @@ const ExpensesTable = () => {
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
               sorting={sorting}
-              setSorting={setSorting}
+              setSorting={handleSortingChange}
+              manualSorting
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               enableRowSelection={tableEnableRowSelectionHandler}

src/components/pages/finance/FinanceTable.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  SortingState,
+  Updater,
+} from '@tanstack/react-table';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
@@ -183,7 +188,8 @@ const FinanceTable = () => {
       bankIds: '',
       customerIds: '',
       supplierIds: '',
-      sortBy: '',
+      sort_by: '',
+      orderBy: '',
       startDate: '',
       endDate: '',
       bankNames: '',
@@ -197,7 +203,8 @@ const FinanceTable = () => {
       bankIds: 'bank_ids',
       customerIds: 'customer_ids',
       supplierIds: 'supplier_ids',
-      sortBy: 'sort_date',
+      sort_by: 'sort_by',
+      orderBy: 'sort_order',
       startDate: 'start_date',
       endDate: 'end_date',
     },
@@ -248,7 +255,7 @@ const FinanceTable = () => {
       updateFilter('bankIds', values.bank_ids, true);
       updateFilter('customerIds', values.customer_ids, true);
       updateFilter('supplierIds', values.supplier_ids, true);
-      updateFilter('sortBy', values.sort_by, true);
+      updateFilter('sort_by', values.sort_by, true);
       updateFilter('startDate', values.start_date, true);
       updateFilter('endDate', values.end_date, true);
       // Save display names for restoration on modal reopen
@@ -276,7 +283,8 @@ const FinanceTable = () => {
       updateFilter('bankIds', '', true);
       updateFilter('customerIds', '', true);
       updateFilter('supplierIds', '', true);
-      updateFilter('sortBy', '', true);
+      updateFilter('sort_by', '', true);
+      updateFilter('orderBy', '', true);
       updateFilter('startDate', '', true);
       updateFilter('endDate', '', true);
       updateFilter('bankNames', '', true);
@@ -394,6 +402,26 @@ const FinanceTable = () => {
     );
   };
 
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.orderBy === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('orderBy', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('orderBy', '', true);
+    }
+  };
+
   const startDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     const endDate = filterFormik.values.end_date;
@@ -505,7 +533,7 @@ const FinanceTable = () => {
     // Restore sort by
     const restoredSortBy =
       sortByOptions.find(
-        (opt) => String(opt.value) === tableFilterState.sortBy
+        (opt) => String(opt.value) === tableFilterState.sort_by
       ) || null;
     setSelectedSortBy(restoredSortBy);
 
@@ -516,7 +544,7 @@ const FinanceTable = () => {
       bank_ids: tableFilterState.bankIds || '',
       customer_ids: tableFilterState.customerIds || '',
       supplier_ids: tableFilterState.supplierIds || '',
-      sort_by: tableFilterState.sortBy || '',
+      sort_by: tableFilterState.sort_by || '',
       start_date: tableFilterState.startDate || '',
       end_date: tableFilterState.endDate || '',
     });
@@ -540,10 +568,12 @@ const FinanceTable = () => {
       {
         header: 'ID',
         accessorKey: 'payment_code',
+        enableSorting: true,
       },
       {
         header: 'References Number',
         accessorKey: 'reference_number',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           const value = props.row.original.reference_number;
           return <span>{value ?? '-'}</span>;
@@ -552,6 +582,7 @@ const FinanceTable = () => {
       {
         header: 'Jenis Transaksi',
         accessorKey: 'transaction_type',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           const value = props.row.original.transaction_type
             .split('_')
@@ -561,7 +592,8 @@ const FinanceTable = () => {
       },
       {
         header: 'Pihak',
-        accessorFn: (finance: Finance) => finance.party?.name,
+        accessorKey: 'customer_name',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           if (props.row.original.party?.id) {
             return <span>{props.row.original.party?.name}</span>;
@@ -571,16 +603,22 @@ const FinanceTable = () => {
       },
       {
         header: 'Tanggal Pembayaran',
-        accessorFn: (finance: Finance) =>
-          formatDate(finance.payment_date, 'DD MMM YYYY'),
+        accessorKey: 'payment_date',
+        enableSorting: true,
+        cell: (props) =>
+          formatDate(props.row.original.payment_date, 'DD MMM YYYY'),
       },
       {
         header: 'Tanggal Dibuat',
-        accessorFn: (finance) => formatDate(finance.created_at, 'DD MMM YYYY'),
+        accessorKey: 'created_at',
+        enableSorting: true,
+        cell: (props) =>
+          formatDate(props.row.original.created_at, 'DD MMM YYYY'),
       },
       {
         header: 'Metode Pembayaran',
         accessorKey: 'payment_method',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           const value = props.row.original.payment_method.split('_').join(' ');
           return <span>{formatTitleCase(value)}</span>;
@@ -588,20 +626,26 @@ const FinanceTable = () => {
       },
       {
         header: 'Bank',
-        accessorFn: (finance: Finance) =>
-          finance.bank
-            ? `${finance.bank?.alias} - ${finance.bank?.account_number} - ${finance.bank?.owner}`
+        accessorKey: 'bank',
+        enableSorting: true,
+        cell: (props) =>
+          props.row.original.bank
+            ? `${props.row.original.bank?.alias} - ${props.row.original.bank?.account_number} - ${props.row.original.bank?.owner}`
             : '-',
       },
       {
         header: 'Pengeluaran (Rp)',
-        accessorFn: (finance: Finance) =>
-          formatCurrency(Math.abs(finance.expense_amount)),
+        accessorKey: 'expense_amount',
+        enableSorting: true,
+        cell: (props) =>
+          formatCurrency(Math.abs(props.row.original.expense_amount)),
       },
       {
         header: 'Pemasukan (Rp)',
-        accessorFn: (finance: Finance) =>
-          formatCurrency(Math.abs(finance.income_amount)),
+        accessorKey: 'income_amount',
+        enableSorting: true,
+        cell: (props) =>
+          formatCurrency(Math.abs(props.row.original.income_amount)),
       },
       {
         header: 'Aksi',
@@ -707,6 +751,7 @@ const FinanceTable = () => {
                 'page',
                 'pageSize',
                 'search',
+                'orderBy',
                 'bankNames',
                 'customerNames',
                 'supplierNames',
@@ -749,6 +794,9 @@ const FinanceTable = () => {
               onPageChange={setPage}
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
+              sorting={sorting}
+              setSorting={handleSortingChange}
+              manualSorting
               className={{
                 containerClassName: cn('p-3 mb-0'),
                 headerColumnClassName: 'text-nowrap',

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -849,7 +849,11 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
                         className='p-3  shadow-button-soft text-base-100 rounded-lg text-sm font-semibold'
                         disabled={deliveryRejected}
                       >
-                        Approve
+                        {marketing?.data?.latest_approval?.step_number === 1 &&
+                          'Approve'}
+
+                        {marketing?.data?.latest_approval?.step_number === 2 &&
+                          'Deliver Item'}
                       </Button>
                     </div>
                   )}

src/components/pages/marketing/MarketingTable.tsx

@@ -297,6 +297,8 @@ const MarketingTable = () => {
 
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
     useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeliveryLoading, setIsDeliveryLoading] = useState(false);
 
   const filterResetHandler = () => {
     updateFilter('product_ids', '', true);
@@ -452,6 +454,9 @@ const MarketingTable = () => {
       return;
     }
 
+    setIsApproveLoading(true);
+
+    try {
       const approveMarketingRes: BaseApiResponse<unknown> | undefined =
         approveAction === 'APPROVED'
           ? await MarketingApi.bulkApprovals(
@@ -460,7 +465,11 @@ const MarketingTable = () => {
               '',
               notes || `APPROVED marketing ${idsToProcess.join(', ')}`
             )
-        : await SalesOrderApi.bulkApprovals(idsToProcess, approveAction, notes);
+          : await SalesOrderApi.bulkApprovals(
+              idsToProcess,
+              approveAction,
+              notes
+            );
 
       if (isResponseSuccess(approveMarketingRes)) {
         confirmationModal.closeModal();
@@ -469,6 +478,9 @@ const MarketingTable = () => {
       }
 
       refreshMarketing();
+    } finally {
+      setIsApproveLoading(false);
+    }
   };
 
   const bulkDeliveryDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
@@ -530,13 +542,21 @@ const MarketingTable = () => {
   };
 
   const confirmationModalDeliveryClickHandler = async (notes: string) => {
-    const res = await SalesOrderApi.delivery(selectedItem?.id as number, notes);
+    setIsDeliveryLoading(true);
+    try {
+      const res = await SalesOrderApi.delivery(
+        selectedItem?.id as number,
+        notes
+      );
       deliveryModal.closeModal();
       toast.success(res?.message as string);
       refreshMarketing?.();
       router.push(
         `/marketing/detail/delivery-orders/edit?id=${selectedItem?.id}`
       );
+    } finally {
+      setIsDeliveryLoading(false);
+    }
   };
 
   const getRowCanSelect = useCallback(
@@ -772,6 +792,14 @@ const MarketingTable = () => {
           }
         },
       },
+      {
+        accessorKey: 'created_at',
+        header: 'Tanggal Dibuat',
+        cell: (props) =>
+          props.row.original.created_at
+            ? formatDate(props.row.original.created_at, 'DD MMM yyyy')
+            : '-',
+      },
       {
         id: 'actions',
         maxSize: 80,
@@ -1012,11 +1040,13 @@ const MarketingTable = () => {
         text={`Apakah anda yakin ingin ${approveAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan tahap ${selectedApprovalStep ?? '-'} (${idsToProcess.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
+          isLoading: isApproveLoading,
           onClick: confirmationModal.closeModal,
         }}
         primaryButton={{
           text: 'Ya',
           color: approveAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
           onClick: approveMarketingHandler,
         }}
       />
@@ -1040,10 +1070,12 @@ const MarketingTable = () => {
         text={`Apakah anda yakin ingin deliver penjualan ${selectedItem?.so_number}?`}
         secondaryButton={{
           text: 'Tidak',
+          isLoading: isDeliveryLoading,
         }}
         primaryButton={{
           text: 'Ya',
           color: 'success',
+          isLoading: isDeliveryLoading,
           onClick: confirmationModalDeliveryClickHandler,
         }}
       />
@@ -1103,6 +1135,7 @@ const MarketingTable = () => {
             <Button
               variant='outline'
               color='none'
+              disabled={isSubmittingBulkDelivery}
               onClick={() => {
                 bulkDeliveryModal.closeModal();
                 setBulkDeliveryDate('');
@@ -1115,6 +1148,7 @@ const MarketingTable = () => {
             <Button
               color='success'
               isLoading={isSubmittingBulkDelivery}
+              disabled={isSubmittingBulkDelivery}
               onClick={() =>
                 submitBulkDeliveryApprovalHandler(
                   idsToProcess,

src/components/pages/marketing/SalesOrderFormModal.tsx

@@ -246,6 +246,7 @@ const SalesOrderFormModal = ({
                 })
                 .filter((item) => Boolean(item)),
             } as UpdateDeliveryOrderPayload);
+
       switch (modalAction) {
         case 'add':
           await createMarketingHandler(payload as CreateSalesOrderPayload);
@@ -261,11 +262,7 @@ const SalesOrderFormModal = ({
 
   // ===== Formik Error List =====
   const { formErrorList, setFormErrorList, close, handleFormSubmit } =
-    useFormikErrorList(formik, {
-      onAfterSubmit: () => {
-        router.push('/marketing');
-      },
-    });
+    useFormikErrorList(formik);
 
   // ================== FORM REPEATER HANDLER ==================
   const createMarketingHandler = async (values: CreateSalesOrderPayload) => {

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -71,14 +71,14 @@ export const DeliveryOrderSchema: Yup.ObjectSchema<DeliveryOrderSchemaType> =
       .required('Pengiriman wajib diisi!')
       .test(
         'at-least-one-valid-row',
-        'Minimal harus  ada satu baris pengiriman yang lengkap diisi!',
+        'Seluruh data pengiriman harus diisi lengkap!',
         function (items) {
           if (!items || items.length === 0) return false;
 
-          // VALIDASI: minimal 1 item valid full
+          // VALIDASI: seluruh item harus valid full
           const itemSchema = DeliveryOrderProductSchema;
 
-          const hasValidItem = items.some((item) => {
+          const hasValidItem = items.every((item) => {
             if (!item) return false;
             return itemSchema.isValidSync(item, { abortEarly: true });
           });
@@ -123,8 +123,17 @@ export const SalesProductToFieldValues = (
     total_price: product.total_price,
     marketing_type: product.marketing_type
       ? {
-          value: product.marketing_type,
-          label: formatTitleCase(product.marketing_type),
+          value:
+            product.marketing_type === 'AYAM' ||
+            product.marketing_type === 'AYAM_PULLET'
+              ? 'AYAM,AYAM_PULLET'
+              : product.marketing_type,
+          label: formatTitleCase(
+            product.marketing_type === 'AYAM' ||
+              product.marketing_type === 'AYAM_PULLET'
+              ? 'AYAM'
+              : product.marketing_type
+          ),
         }
       : null,
     convertion_unit: product.convertion_unit
@@ -185,8 +194,17 @@ export const DeliveryProductToFieldValues = (
       marketing_product_id: item.marketing_product_id ?? salesOrder?.id,
       marketing_type: salesOrder?.marketing_type
         ? {
-            value: salesOrder?.marketing_type,
-            label: formatTitleCase(salesOrder?.marketing_type),
+            value:
+              salesOrder?.marketing_type === 'AYAM' ||
+              salesOrder?.marketing_type === 'AYAM_PULLET'
+                ? 'AYAM,AYAM_PULLET'
+                : salesOrder?.marketing_type,
+            label: formatTitleCase(
+              salesOrder?.marketing_type === 'AYAM' ||
+                salesOrder?.marketing_type === 'AYAM_PULLET'
+                ? 'AYAM'
+                : salesOrder?.marketing_type
+            ),
           }
         : null,
       convertion_unit: salesOrder?.convertion_unit

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -146,15 +146,6 @@ const DeliveryOrderProductForm = ({
   );
 
   // ============ Fetch Data ============
-  const { data: productData } = useSWR(
-    selectedProduct?.value
-      ? ProductApi.basePath + '/' + selectedProduct?.value
-      : null,
-    () =>
-      selectedProduct?.value
-        ? ProductApi.getSingle(Number(selectedProduct?.value))
-        : undefined
-  );
 
   // Options Week dari minggu 1 - 22
   // const optionsWeek = useMemo(() => {
@@ -440,7 +431,8 @@ const DeliveryOrderProductForm = ({
         handleBlurField(currentInput);
         formik.setFieldValue(
           'uom',
-          isResponseSuccess(productData) ? productData?.data?.uom?.name : ''
+          initialValues?.marketing_product?.product_warehouse_data?.product?.uom
+            ?.name ?? ''
         );
       },
     }
@@ -813,9 +805,8 @@ const DeliveryOrderProductForm = ({
             endAdornment={
               <div className='flex items-center gap-2'>
                 <span className='text-sm text-gray-500'>
-                  {isResponseSuccess(productData)
-                    ? productData?.data?.uom.name
-                    : ''}
+                  {initialValues?.marketing_product?.product_warehouse_data
+                    ?.product?.uom?.name ?? ''}
                 </span>
               </div>
             }
@@ -826,9 +817,8 @@ const DeliveryOrderProductForm = ({
                     (item) => item.id === formik.values.marketing_product_id
                   )?.qty +
                   ' ' +
-                  (isResponseSuccess(productData)
-                    ? productData?.data?.uom.name
-                    : '')
+                  (initialValues?.marketing_product?.product_warehouse_data
+                    ?.product?.uom?.name ?? '')
                 : ''
             }
           />

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -252,6 +252,11 @@ const SalesOrderProductForm = ({
       setSelectedProductWarehouse(productWarehouse || null);
       formik.setFieldValue('product_warehouse_data', productWarehouse || null);
       formik.setFieldValue('qty', productWarehouse?.quantity);
+
+      if (productWarehouse?.quantity) {
+        handleFieldChange('qty', productWarehouse?.quantity);
+      }
+
       formik.setFieldValue('uom', productWarehouse?.product?.uom?.name || '');
       if (
         productWarehouse?.week !== undefined &&

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -189,6 +189,11 @@ const CustomersTable = () => {
         accessorKey: 'email',
         header: 'Email',
       },
+      {
+        accessorKey: 'bank_name',
+        header: 'Nama Bank',
+        cell: (props) => props.row.original.bank_name || '-',
+      },
       {
         header: 'Aksi',
         cell: (props: CellContext<Customer, unknown>) => {

src/components/pages/master-data/customer/form/CustomerForm.schema.ts

@@ -27,6 +27,9 @@ export const CustomerFormSchema = Yup.object({
     .email('Format email tidak valid!')
     .required('Email wajib diisi!'),
 
+  bank_name: Yup.string()
+    .min(3, 'Nama bank minimal 3 karakter!')
+    .required('Nama bank wajib diisi!'),
   account_number: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
     .required('Nomor rekening wajib diisi!'),

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -142,6 +142,7 @@ const CustomerForm = ({
           },
       type: normalizeType(initialValues?.type),
       address: initialValues?.address ?? '',
+      bank_name: initialValues?.bank_name ?? '',
       account_number: initialValues?.account_number ?? '',
     };
   }, [initialValues]);
@@ -164,6 +165,7 @@ const CustomerForm = ({
         pic_id: values.picId,
         type: (values.type as OptionType).value as string,
         address: values.address,
+        bank_name: values.bank_name,
         account_number: values.account_number,
       };
 
@@ -286,6 +288,22 @@ const CustomerForm = ({
               errorMessage={formik.errors.phone}
               readOnly={formType === 'detail'}
             />
+            <TextInput
+              required
+              label='Nama Bank'
+              name='bank_name'
+              placeholder='Masukkan nama bank customer'
+              value={formik.values.bank_name}
+              onChange={(e) =>
+                formik.setFieldValue('bank_name', e.target.value.toUpperCase())
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.bank_name && Boolean(formik.errors.bank_name)
+              }
+              errorMessage={formik.errors.bank_name}
+              readOnly={formType === 'detail'}
+            />
             <TextInput
               required
               label='Nomor Rekening'

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -326,6 +326,11 @@ const SuppliersTable = () => {
         accessorKey: 'email',
         header: 'Email',
       },
+      {
+        accessorKey: 'bank_name',
+        header: 'Nama Bank',
+        cell: (props) => props.row.original.bank_name || '-',
+      },
       {
         accessorKey: 'address',
         header: 'Alamat',

src/components/pages/master-data/supplier/form/SupplierForm.schema.ts

@@ -31,6 +31,9 @@ export const SupplierFormSchema = Yup.object({
   npwp: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
     .required('Nomor NPWP wajib diisi!'),
+  bank_name: Yup.string()
+    .min(3, 'Nama bank minimal 3 karakter!')
+    .required('Nama bank wajib diisi!'),
   account_number: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
     .required('Nomor rekening wajib diisi!'),

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -122,6 +122,7 @@ const SupplierForm = ({
       email: initialValues?.email ?? '',
       address: initialValues?.address ?? '',
       npwp: initialValues?.npwp ?? '',
+      bank_name: initialValues?.bank_name ?? '',
       account_number: initialValues?.account_number ?? '',
       due_date: initialValues?.due_date ?? 1,
     };
@@ -149,6 +150,7 @@ const SupplierForm = ({
         email: values.email,
         address: values.address,
         npwp: values.npwp,
+        bank_name: values.bank_name,
         account_number: values.account_number,
         due_date: parseInt(values.due_date.toString()),
       };
@@ -368,6 +370,22 @@ const SupplierForm = ({
               errorMessage={formik.errors.npwp}
               readOnly={formType === 'detail'}
             />
+            <TextInput
+              required
+              label='Nama Bank'
+              name='bank_name'
+              placeholder='Masukkan nama bank supplier'
+              value={formik.values.bank_name}
+              onChange={(e) =>
+                formik.setFieldValue('bank_name', e.target.value.toUpperCase())
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.bank_name && Boolean(formik.errors.bank_name)
+              }
+              errorMessage={formik.errors.bank_name}
+              readOnly={formType === 'detail'}
+            />
             <TextInput
               required
               label='Nomor Rekening'

src/components/pages/purchase/PurchaseTable.tsx

@@ -2,7 +2,12 @@
 
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  SortingState,
+  Updater,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import Link from 'next/link';
@@ -34,6 +39,8 @@ import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 
 type PurchaseTableFilters = {
   search: string;
+  sort_by: string;
+  order_by: string;
   po_date: string;
   approval_status: string;
   product_category_id: string;
@@ -157,18 +164,6 @@ const RowOptionsMenu = ({
 };
 
 const PurchaseTable = () => {
-  // ===== STATE MANAGEMENT =====
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
-    useState(false);
-  const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
-  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
-    null
-  );
-  const [exportProgressStartDate, setExportProgressStartDate] = useState('');
-  const [exportProgressEndDate, setExportProgressEndDate] = useState('');
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   // ===== TABLE FILTER STATE =====
   const {
     state: tableFilterState,
@@ -180,6 +175,8 @@ const PurchaseTable = () => {
   } = useTableFilter<PurchaseTableFilters>({
     initial: {
       search: '',
+      sort_by: '',
+      order_by: '',
       po_date: '',
       approval_status: '',
       product_category_id: '',
@@ -198,6 +195,8 @@ const PurchaseTable = () => {
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
       po_date: 'po_date',
       approval_status: 'approval_status',
       product_category_id: 'product_category_id',
@@ -219,6 +218,36 @@ const PurchaseTable = () => {
     storeName: 'purchase-table',
   });
 
+  // ===== STATE MANAGEMENT =====
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+  const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
+  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
+    null
+  );
+  const [exportProgressStartDate, setExportProgressStartDate] = useState('');
+  const [exportProgressEndDate, setExportProgressEndDate] = useState('');
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.order_by === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('order_by', '', true);
+    }
+  };
+
   // ===== MODAL HOOKS =====
   const filterModal = useModal();
   const deleteModal = useModal();
@@ -237,6 +266,7 @@ const PurchaseTable = () => {
   // ===== TABLE COLUMNS DEFINITION =====
   const purchaseColumns: ColumnDef<Purchase>[] = [
     {
+      accessorKey: 'po_number',
       header: 'No. PR/PO',
       cell: (props) => {
         const { pr_number, po_number } = props.row.original;
@@ -278,7 +308,7 @@ const PurchaseTable = () => {
       cell: (props) => props.row.original.requester_name || '-',
     },
     {
-      accessorKey: 'products.name',
+      accessorKey: 'products',
       header: 'Produk',
       cell: (props) => {
         const products = props.row.original.products;
@@ -293,7 +323,7 @@ const PurchaseTable = () => {
       },
     },
     {
-      accessorKey: 'location.name',
+      accessorKey: 'location',
       header: 'Lokasi',
       cell: (props) => props.row.original.location?.name || '-',
     },
@@ -323,6 +353,7 @@ const PurchaseTable = () => {
     },
     {
       header: 'Aging',
+      enableSorting: false,
       cell: (props) => {
         const purchase = props.row.original;
         if (!purchase.po_date) return '-';
@@ -334,6 +365,7 @@ const PurchaseTable = () => {
       },
     },
     {
+      accessorKey: 'status',
       header: 'Status Approval',
       cell: (props) => {
         const approval = props.row.original.latest_approval;
@@ -378,6 +410,14 @@ const PurchaseTable = () => {
         );
       },
     },
+    {
+      accessorKey: 'created_at',
+      header: 'Tanggal Dibuat',
+      cell: (props) =>
+        props.row.original.created_at
+          ? formatDate(props.row.original.created_at, 'DD MMM YYYY')
+          : '-',
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -658,6 +698,7 @@ const PurchaseTable = () => {
                 'search',
                 'filter_by',
                 'sort_by',
+                'order_by',
                 'product_category_name',
                 'supplier_name',
                 'area_name',
@@ -771,7 +812,8 @@ const PurchaseTable = () => {
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
               sorting={sorting}
-              setSorting={setSorting}
+              setSorting={handleSortingChange}
+              manualSorting
               className={{
                 containerClassName: cn('p-3 mb-0'),
                 headerColumnClassName: 'text-nowrap',

src/components/pages/report/expense/tab/ReportExpenseTab.tsx

@@ -39,7 +39,7 @@ import {
 } from '@/services/api/master-data';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Nonstock } from '@/types/api/master-data/nonstock';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, SortingState, Updater } from '@tanstack/react-table';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import ButtonFilter from '@/components/helper/ButtonFilter';
@@ -73,6 +73,25 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  // ===== SORTING STATE =====
+  const [sortBy, setSortBy] = useState('');
+  const [orderBy, setOrderBy] = useState('');
+
+  const sorting: SortingState = sortBy
+    ? [{ id: sortBy, desc: orderBy === 'desc' }]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      setSortBy(next[0].id);
+      setOrderBy(next[0].desc ? 'desc' : 'asc');
+    } else {
+      setSortBy('');
+      setOrderBy('');
+    }
+  };
+
   const handleFilterModalOpenRef = useRef(() => {});
 
   const filterModal = useModal();
@@ -252,6 +271,8 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
       if (filterParams.category) {
         params.append('category', filterParams.category);
       }
+      if (sortBy) params.append('sort_by', sortBy);
+      if (orderBy) params.append('sort_order', orderBy);
 
       Object.entries(extraParams ?? {}).forEach(([key, value]) => {
         params.set(key, value);
@@ -259,7 +280,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
 
       return params.toString();
     },
-    [filterParams]
+    [filterParams, sortBy, orderBy]
   );
 
   // ===== DATA FETCHING =====
@@ -443,19 +464,23 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     return [
       {
         header: 'No',
+        enableSorting: false,
         cell: (props) => (page - 1) * pageSize + props.row.index + 1,
       },
       {
         header: 'No. PO',
         accessorKey: 'po_number',
+        enableSorting: true,
       },
       {
         header: 'No. Referensi',
         accessorKey: 'reference_number',
+        enableSorting: true,
       },
       {
         header: 'Tanggal Realisasi',
         accessorKey: 'realization_date',
+        enableSorting: true,
         cell: ({ row }) => {
           return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
         },
@@ -463,6 +488,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
       {
         header: 'Tanggal Transaksi',
         accessorKey: 'transaction_date',
+        enableSorting: true,
         cell: ({ row }) => {
           return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
         },
@@ -470,21 +496,30 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
       {
         header: 'Kategori',
         accessorKey: 'category',
+        enableSorting: true,
       },
       {
         header: 'Produk',
+        accessorKey: 'product',
+        enableSorting: true,
         accessorFn: (row) => row.pengajuan?.nonstock?.name,
       },
       {
         header: 'Supplier',
+        accessorKey: 'supplier',
+        enableSorting: true,
         accessorFn: (row) => row.supplier?.name,
       },
       {
         header: 'Lokasi',
+        accessorKey: 'location',
+        enableSorting: true,
         accessorFn: (row) => row.kandang?.location?.name,
       },
       {
         header: 'Kandang',
+        accessorKey: 'kandang',
+        enableSorting: true,
         accessorFn: (row) => row.kandang?.name,
       },
       {
@@ -492,23 +527,19 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         columns: [
           {
             header: 'Qty',
-            id: 'qty_pengajuan',
-            accessorFn: (row) => row.pengajuan?.qty,
+            accessorKey: 'qty_pengajuan',
             cell: ({ row }) =>
               row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
           },
           {
             header: 'Harga',
-            id: 'harga_pengajuan',
-            accessorFn: (row) => row.pengajuan?.price,
+            accessorKey: 'price_pengajuan',
             cell: ({ row }) =>
               formatCurrency(row.original.pengajuan?.price || 0),
           },
           {
             header: 'Total',
-            id: 'total_pengajuan',
-            accessorFn: (row) =>
-              (row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
+            accessorKey: 'total_pengajuan',
             cell: ({ row }) => {
               const total =
                 (row.original.pengajuan?.qty || 0) *
@@ -523,23 +554,19 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         columns: [
           {
             header: 'Qty',
-            id: 'qty_realisasi',
-            accessorFn: (row) => row.realisasi?.qty,
+            accessorKey: 'qty_realisasi',
             cell: ({ row }) =>
               row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
           },
           {
             header: 'Harga',
-            id: 'harga_realisasi',
-            accessorFn: (row) => row.realisasi?.price,
+            accessorKey: 'price_realisasi',
             cell: ({ row }) =>
               formatCurrency(row.original.realisasi?.price || 0),
           },
           {
             header: 'Total',
-            id: 'total_realisasi',
-            accessorFn: (row) =>
-              (row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
+            accessorKey: 'total_realisasi',
             cell: ({ row }) => {
               const total =
                 (row.original.realisasi?.qty || 0) *
@@ -550,6 +577,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         ],
       },
       {
+        id: 'realization_status',
         header: 'Status Pencairan',
         cell: (props) => (
           <RealizationStatusBadge
@@ -558,6 +586,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         ),
       },
       {
+        id: 'bop_status',
         header: 'Status BOP',
         cell: (props) => (
           <ExpenseStatusBadge approval={props.row.original?.latest_approval} />
@@ -602,6 +631,9 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
               totalItems={meta?.total_results || 0}
               onPageChange={setPage}
               onPageSizeChange={setPageSize}
+              sorting={sorting}
+              setSorting={handleSortingChange}
+              manualSorting
               className={{
                 containerClassName: 'w-full mb-0!',
                 tableWrapperClassName: 'overflow-x-auto',

src/figma-make/components/base/date-picker.tsx

@@ -20,6 +20,7 @@ interface DatePickerProps {
   disabled?: boolean;
   placeholder?: string;
   formatDisplay?: (date: string) => string;
+  hasError?: boolean;
 }
 
 export function DatePicker({
@@ -28,6 +29,7 @@ export function DatePicker({
   disabled = false,
   placeholder = 'Select date',
   formatDisplay,
+  hasError = false,
 }: DatePickerProps) {
   const [open, setOpen] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(() => {
@@ -154,7 +156,7 @@ export function DatePicker({
         <Button
           variant='outline'
           disabled={disabled}
-          className='w-full justify-start text-left font-normal border-gray-200 hover:bg-gray-50'
+          className={`w-full justify-start text-left font-normal hover:bg-gray-50 ${hasError ? 'border-red-500 focus:ring-red-500' : 'border-gray-200'}`}
         >
           <CalendarIcon className='mr-2 h-4 w-4 text-gray-500' />
           {date ? (

src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx

@@ -181,6 +181,8 @@ export function DailyChecklistContent() {
   const [initialLoading, setInitialLoading] = useState(!!checklistIdFromUrl);
 
   const [emptyKandangEndDate, setEmptyKandangEndDate] = useState<string>('');
+  const [emptyKandangEndDateError, setEmptyKandangEndDateError] =
+    useState<string>('');
 
   const [existingDocuments, setExistingDocuments] = useState<Document[]>([]);
   const [documents, setDocuments] = useState<File[]>([]);
@@ -233,8 +235,12 @@ export function DailyChecklistContent() {
         setEmptyKandang(isEmptyKandang);
         setSelectedCategory(isEmptyKandang ? 'empty_kandang' : data.category);
 
-        if (isEmptyKandang && data.empty_kandang_end_date) {
-          const rawEnd = data.empty_kandang_end_date;
+        if (
+          isEmptyKandang &&
+          data.empty_kandang &&
+          data.empty_kandang.end_date
+        ) {
+          const rawEnd = data.empty_kandang.end_date;
           setEmptyKandangEndDate(
             rawEnd.length > 10 ? rawEnd.slice(0, 10) : rawEnd
           );
@@ -784,6 +790,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (emptyKandang && !emptyKandangEndDate) {
+      setEmptyKandangEndDateError('Tanggal akhir kandang kosong wajib diisi');
+      return;
+    }
+
     setIsLoadingDraft(true);
 
     try {
@@ -861,6 +872,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (emptyKandang && !emptyKandangEndDate) {
+      setEmptyKandangEndDateError('Tanggal akhir kandang kosong wajib diisi');
+      return;
+    }
+
     if (!isKandangEmpty) {
       if (selectedEmployees.length === 0) {
         toast.error('Pilih minimal 1 ABK');
@@ -1220,11 +1236,20 @@ export function DailyChecklistContent() {
                     <div className='mt-1.5'>
                       <DatePicker
                         date={emptyKandangEndDate}
-                        onDateChange={setEmptyKandangEndDate}
+                        onDateChange={(val) => {
+                          setEmptyKandangEndDate(val);
+                          if (val) setEmptyKandangEndDateError('');
+                        }}
                         disabled={!isChecklistStatusDraft}
                         placeholder='Pilih tanggal'
                         formatDisplay={formatDateForDisplay}
+                        hasError={!!emptyKandangEndDateError}
                       />
+                      {emptyKandangEndDateError && (
+                        <p className='text-xs text-red-500 mt-1'>
+                          {emptyKandangEndDateError}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>

src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx

@@ -60,6 +60,7 @@ interface ChecklistHeader {
   progress_percent: number;
   total_phases: number;
   total_activities: number;
+  empty_kandang_end_date?: string | null;
 }
 
 interface PhaseGroup {
@@ -179,6 +180,9 @@ export function DetailDailyChecklistContent() {
 
       setDocuments(rawDetailChecklist?.document_urls || []);
 
+      const emptyKandangEndDate =
+        rawDetailChecklist?.empty_kandang?.end_date ?? null;
+
       const checklistData = {
         id: rawDetailChecklist?.id,
         date: rawDetailChecklist?.date,
@@ -205,6 +209,7 @@ export function DetailDailyChecklistContent() {
           progress_percent: 0,
           total_phases: 0,
           total_activities: 0,
+          empty_kandang_end_date: emptyKandangEndDate,
         });
         setLoading(false);
         return;
@@ -272,6 +277,7 @@ export function DetailDailyChecklistContent() {
           progress_percent: 0,
           total_phases: new Set(tasks.map((t) => t.phase_id)).size,
           total_activities: tasks.length,
+          empty_kandang_end_date: emptyKandangEndDate,
         });
         setLoading(false);
         return;
@@ -322,6 +328,7 @@ export function DetailDailyChecklistContent() {
         progress_percent: progressPercent,
         total_phases: uniquePhases.size,
         total_activities: uniqueActivities.size,
+        empty_kandang_end_date: emptyKandangEndDate,
       });
     } catch (error) {
       console.error('Error fetching checklist detail:', error);
@@ -777,6 +784,18 @@ export function DetailDailyChecklistContent() {
                   {CATEGORY_LABELS[header.category] || header.category}
                 </p>
               </div>
+              {header.category === 'empty_kandang' && (
+                <div>
+                  <Label className='text-xs text-gray-500'>
+                    Tanggal Selesai Kandang Kosong
+                  </Label>
+                  <p className='text-sm font-medium text-gray-900 mt-1'>
+                    {header.empty_kandang_end_date
+                      ? formatDate(header.empty_kandang_end_date)
+                      : '-'}
+                  </p>
+                </div>
+              )}
               <div>
                 <Label className='text-xs text-gray-500'>Status</Label>
                 <div className='mt-1'>{getStatusBadge(header.status)}</div>

src/types/api/daily-checklist/daily-checklist.d.ts

@@ -12,8 +12,11 @@ export type BaseDailyChecklist = {
   status: string;
   category: string;
   date: string;
-  empty_kandang?: boolean;
-  empty_kandang_end_date?: string | null;
+  empty_kandang?: {
+    id: boolean;
+    start_date: string;
+    end_date: string;
+  };
   kandang?: Pick<BaseKandang, 'id' | 'name' | 'status' | 'capacity'>;
   total_phase: number;
   total_activity: number;

src/types/api/master-data/customer.d.ts

@@ -10,6 +10,7 @@ export type BaseCustomer = {
   phone: string;
   email: string;
   account_number: string;
+  bank_name: string;
 };
 
 export type Customer = BaseMetadata & BaseCustomer;
@@ -22,6 +23,7 @@ export type CreateCustomerPayload = {
   phone: string;
   email: string;
   account_number: string;
+  bank_name: string;
 };
 
 export type UpdateCustomerPayload = CreateCustomerPayload;

src/types/api/master-data/supplier.d.ts

@@ -16,6 +16,7 @@ export type BaseSupplier = {
   account_number: string;
   due_date: number;
   balance?: number;
+  bank_name: string;
 };
 
 export type Supplier = BaseMetadata & BaseSupplier;
@@ -45,6 +46,7 @@ export type CreateSupplierPayload = {
   account_number: string;
   due_date: number;
   balance?: number;
+  bank_name: string;
 };
 
 export type UpdateSupplierPayload = CreateSupplierPayload;