refactor(FE): Disable invoice download feature

.gitignore

@@ -45,6 +45,3 @@ next-env.d.ts
 
 # claude
 .claude
-
-# rtk
-rtk.exe

.gitlab-ci.yml

@@ -15,7 +15,7 @@ default:
 # ==========================================================
 .build_template: &build_template
   stage: build
-  image: public.ecr.aws/docker/library/node:20-alpine
+  image: node:20-alpine
   cache:
     key: npm-cache
     paths:
@@ -30,10 +30,6 @@ default:
     - echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
     - echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
     - echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
-    - echo "NEXT_PUBLIC_APP_ENV=$NEXT_PUBLIC_APP_ENV"
-    - echo "NEXT_PUBLIC_HELPDESK_URL=$NEXT_PUBLIC_HELPDESK_URL"
-    - echo "NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL=$NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL"
-    - echo "NEXT_PUBLIC_S3_PUBLIC_BASE_URL=$NEXT_PUBLIC_S3_PUBLIC_BASE_URL"
     - echo "Building Next.js static export..."
     - npx next build
     - |
@@ -45,11 +41,7 @@ default:
         "built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
         "NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
         "NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
-        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL",
-        "NEXT_PUBLIC_APP_ENV": "$NEXT_PUBLIC_APP_ENV",
-        "NEXT_PUBLIC_HELPDESK_URL": "$NEXT_PUBLIC_HELPDESK_URL",
-        "NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL": "$NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL"
-        "NEXT_PUBLIC_S3_PUBLIC_BASE_URL": "NEXT_PUBLIC_S3_PUBLIC_BASE_URL"
+        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
       }
       EOF
   artifacts:
@@ -64,7 +56,7 @@ default:
 .deploy_template: &deploy_template
   stage: deploy
   image:
-    name: public.ecr.aws/aws-cli/aws-cli:latest
+    name: amazon/aws-cli:latest
     entrypoint: ['/bin/sh', '-c']
   script:
     - set -e
@@ -150,10 +142,6 @@ build:dev:
     NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
     NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
     NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
-    NEXT_PUBLIC_APP_ENV: 'development'
-    NEXT_PUBLIC_HELPDESK_URL: 'https://dev-helpdesk.mbugroup.id/'
-    NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL: 'https://dev-dashboard-ho.mbugroup.id/'
-    NEXT_PUBLIC_S3_PUBLIC_BASE_URL: 'https://mbu-lti-storage.s3.ap-southeast-3.amazonaws.com'
 
 deploy:dev:
   <<: *deploy_template
@@ -182,9 +170,6 @@ build:staging:
     NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
     NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
     NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
-    NEXT_PUBLIC_APP_ENV: 'staging'
-    NEXT_PUBLIC_HELPDESK_URL: 'https://stg-helpdesk.mbugroup.id/'
-    NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL: 'https://stg-dashboard-ho.mbugroup.id/'
 
 deploy:staging:
   <<: *deploy_template
@@ -198,35 +183,3 @@ deploy:staging:
   environment:
     name: staging
     url: https://stg-lti-erp.mbugroup.id
-
-# ==========================================================
-# ====== (Branch production) ======
-# ==========================================================
-build:production:
-  <<: *build_template
-  rules:
-    - if: '$CI_COMMIT_BRANCH == "production"'
-  environment:
-    name: staging
-  variables:
-    NEXT_PUBLIC_LTI_URL: 'https://lti-erp.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://auth-erp.mbugroup.id'
-    NEXT_PUBLIC_API_BASE_URL: 'https://api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
-    NEXT_PUBLIC_APP_ENV: 'production'
-    NEXT_PUBLIC_HELPDESK_URL: 'https://helpdesk.mbugroup.id/'
-    NEXT_PUBLIC_DASHBOARD_ACCOUNTING_URL: 'https://dashboard-ho.mbugroup.id/'
-    NEXT_PUBLIC_S3_PUBLIC_BASE_URL: 'https://mbu-lti-storage.s3.ap-southeast-3.amazonaws.com/'
-
-deploy:production:
-  <<: *deploy_template
-  needs: ['build:production']
-  rules:
-    - if: '$CI_COMMIT_BRANCH == "production"'
-  variables:
-    S3_BUCKET: 'production-lti-erp.mbugroup.id'
-    AWS_REGION: 'ap-southeast-3'
-    CLOUDFRONT_DISTRIBUTION_ID: 'E1SSLXKYYITASJ'
-  environment:
-    name: staging
-    url: https://lti-erp.mbugroup.id

.husky/pre-commit

@@ -1,4 +1,3 @@
 npm run format
 npm run lint
-npm run typecheck
-git add .
+npx tsc --noEmit

CLAUDE.md

@@ -1,262 +0,0 @@
-# LTI Web Client
-
-Next.js 15 (App Router) + React 19 + TypeScript front-end for the LTI ERP system.
-
-## Tech stack
-
-- **Framework:** Next.js 15.5 (App Router, Turbopack)
-- **UI:** React 19, Tailwind CSS v4, Radix UI, daisyUI, lucide-react
-- **State:** zustand
-- **Forms:** Formik + Yup, react-hook-form
-- **Data fetching:** axios + SWR (custom `httpClient` / `httpClientFetcher` in `src/services/http`)
-- **Tables:** @tanstack/react-table
-- **Reporting:** @react-pdf/renderer, jspdf, exceljs, xlsx, recharts
-
-## Scripts
-
-- `npm run dev` — lint + dev server (Turbopack)
-- `npm run build` — production build
-- `npm run lint` — ESLint
-- `npm run typecheck` — `next typegen && tsc --noEmit`
-- `npm run format` — Prettier
-- `npm run pre-commit` — format + lint + typecheck + build (Husky pre-commit hook)
-
-## Project structure
-
-```
-src/
-  app/              # Next.js App Router routes (one folder per feature)
-  components/
-    pages/{feature}/  # Page-specific components (mirrors src/app)
-    helper/           # Cross-cutting helpers (e.g. SuspenseHelper)
-    ui/               # Shared UI primitives
-  services/
-    api/            # API service classes (extend BaseApiService)
-    http/           # httpClient / httpClientFetcher
-    hooks/          # Service-level hooks
-  stores/           # zustand stores grouped by domain
-  types/api/        # Request/response types per feature
-  lib/              # Shared helpers (api-helper, formik-helper, utils, validation, …)
-  config/, styles/
-```
-
-## Feature development standard
-
-**Always follow this order when adding a new feature.** This is a team convention — deviating creates churn in code review.
-
-1. **Types** — Define payload and response types in `src/types/api/{feature}` (or `{feature}.d.ts` for small features).
-2. **API service** — Add `src/services/api/{feature}.ts` exporting a class that extends `BaseApiService<T, CreatePayload, UpdatePayload>` from [src/services/api/base.ts](src/services/api/base.ts). Use a subfolder (e.g. `src/services/api/daily-checklist/`) when the feature has multiple resource classes.
-3. **Page** — Create the route under `src/app/{feature}` and a matching `src/components/pages/{feature}` folder for its components.
-4. **Component slicing** — Break the page UI into components inside `src/components/pages/{feature}`.
-5. **Wire up the API** — Consume the service class from step 2 inside the page/components (often via SWR).
-6. **Detail layout** — When a route reads URL params via `useSearchParams` (e.g. `/feature/detail?id=123`), add `src/app/{feature}/detail/layout.tsx` that wraps `children` in `<SuspenseHelper>` from `@/components/helper/SuspenseHelper`.
-7. **Shared state** — Use zustand stores in `src/stores/{domain}` when state must cross component boundaries.
-8. **Helpers** — Reuse from [src/lib](src/lib) first (`api-helper.ts`, `formik-helper.ts`, `utils/`, `validation/`, etc.). Add new helpers there.
-
-### Reference implementations
-
-`closing`, `finance`, `expense`, `production`, `inventory`, `marketing`, `master-data`, `purchase`, `report`, `daily-checklist`, `dashboard` — all live in both `src/app/{feature}` and `src/components/pages/{feature}` and follow the standard above.
-
-## Conventions
-
-- Path alias `@/` maps to `src/`.
-- Detail pages that read `useSearchParams` MUST be wrapped in `<SuspenseHelper>` via a `layout.tsx` (see [src/app/finance/detail/layout.tsx](src/app/finance/detail/layout.tsx) for the canonical pattern).
-- API service classes inherit CRUD methods (`getAll`, `getSingle`, etc.) from `BaseApiService` — extend the class for feature-specific endpoints rather than calling `httpClient` directly from components.
-- Pre-commit runs format + lint + typecheck + build; do not bypass with `--no-verify`.
-
-## Table filter persistence pattern
-
-Data tables across all modules (master-data, inventory, finance, purchase, etc.) use `useTableFilter` with `persist: true` to persist filter state in localStorage. This allows users' search, pagination, and filter choices to survive page refreshes.
-
-**Three core principles (apply to all table components):**
-
-1. **Set formik initialValues from tableFilterState** (not hardcoded defaults)
-   - Ensures the filter modal displays currently active filters when opened
-   - Initialize directly from persisted state: `location: tableFilterState.locationFilter`
-
-2. **Pass `true` as last parameter to updateFilter calls**
-   - `updateFilter('fieldName', value, true)` immediately persists to localStorage
-   - Resets pagination to page 1 when filters change (via SWR revalidation)
-   - Apply to: search handlers, filter form submissions, reset handlers
-
-3. **Create custom formikResetHandler function**
-   - Clear each filter with `updateFilter(fieldName, defaultValue, true)`
-   - Call `formik.resetForm({ values: { ...defaults } })`
-   - Close the modal at the end
-   - Attach to both button `onClick` and form `onReset` handler
-
-**Optimization: Avoid useCallback for simple handlers**
-
-- `useCallback` adds overhead and is only useful for complex logic or memoized child components
-- Simple pass-through handlers don't need it:
-
-  ```tsx
-  // ✅ Good: Simple handler without useCallback
-  const handleFilterChange = (val) => setFieldValue('location', val);
-
-  // ❌ Avoid: Unnecessary useCallback overhead
-  const handleFilterChange = useCallback(
-    (val) => setFieldValue('location', val),
-    [setFieldValue]
-  );
-  ```
-
-**Best practice: Store OptionType objects directly, not IDs**
-
-For select inputs, store the complete `OptionType` object in both formik state and tableFilterState. This eliminates the need for computed helper values (like searching options arrays to find the matching object).
-
-```tsx
-// Type the useTableFilter with the filter state structure
-const { state: tableFilterState, updateFilter, ... } = useTableFilter<{
-  search: string;
-  locationFilter?: OptionType<string>;
-  picFilter?: OptionType<string>;
-}>({
-  initial: {
-    search: '',
-    locationFilter: undefined,
-    picFilter: undefined
-  },
-  paramMap: {
-    page: 'page',
-    pageSize: 'limit',
-    locationFilter: 'location_id',
-    picFilter: 'pic_id',
-  },
-  persist: true,
-  storeName: 'kandangs-table',
-});
-
-// Initialize formik with tableFilterState values (now typed OptionType objects)
-const formik = useFormik<KandangFilterType>({
-  initialValues: {
-    location: tableFilterState.locationFilter,
-    pic: tableFilterState.picFilter,
-  },
-  ...
-});
-
-// Handlers store the complete OptionType, not just the ID
-const handleFilterLocationChange = useCallback(
-  (val) => setFieldValue('location', val),
-  [setFieldValue]
-);
-
-// Use formik values directly in select inputs (no computed helpers needed)
-<SelectInput
-  value={formik.values.location}
-  onChange={handleFilterLocationChange}
-  ...
-/>
-```
-
-**Apply this pattern to:**
-
-- Any data table component across any module that needs persistent filters
-- Master-data tables, inventory lists, finance reports, purchase orders, etc.
-- Whenever users' filter/search/pagination choices should survive page refreshes
-
-**Reference implementations:**
-
-- `SupplierTable`, `KandangsTable`, `LocationsTable`, `CustomersTable` in `src/components/pages/master-data/`
-- Use same pattern for data tables in other modules (inventory, finance, purchase, etc.)
-
-## Server-side sorting pattern
-
-Data tables use TanStack Table's `SortingState` wired to `useTableFilter` so that sorting triggers a server re-fetch rather than client-side reordering.
-
-**Four-part wiring:**
-
-1. **Local sort state** — `const [sorting, setSorting] = useState<SortingState>([]);`
-
-2. **`useTableFilter` config** — Add `sort_by` and `order_by` to `initial` and `paramMap`. The `paramMap` key is the internal name; the value is the query param name sent to the server (they can differ, e.g. `order_by` → `sort_order`):
-
-   ```ts
-   initial: { sort_by: '', order_by: '' }
-   paramMap:  { sort_by: 'sort_by', order_by: 'sort_order' }
-   ```
-
-3. **`useEffect` sync** — Watches `sorting` and pushes changes into `useTableFilter`:
-
-   ```ts
-   useEffect(() => {
-     if (sorting.length > 0) {
-       updateFilter('sort_by', sorting[0].id, true);
-       updateFilter('order_by', sorting[0].desc ? 'desc' : 'asc', true);
-     } else {
-       updateFilter('sort_by', '');
-       updateFilter('order_by', '');
-     }
-   }, [sorting]);
-   ```
-
-4. **SWR key** — SWR uses `getTableFilterToQueryString()` as its key, so any filter change (including sort) automatically re-fetches with the new query params. TanStack Table's built-in client sorting is effectively disabled; the server does the sorting.
-
-**Pass `sorting`, `setSorting`, and `manualSorting` to `<Table>`:**
-
-```tsx
-<Table sorting={sorting} setSorting={handleSortingChange} manualSorting={true} ... />
-```
-
-`manualSorting={true}` is required — without it TanStack Table still applies its own client-side sort pass on top of the server-sorted data, producing incorrect order.
-
-**Reference implementation:** `MarketingTable` in [src/components/pages/marketing/MarketingTable.tsx](src/components/pages/marketing/MarketingTable.tsx).
-
-## Server-side file export pattern
-
-All file exports (Excel, PDF, or any format) must use **server-side generation** — the server returns a binary blob and the browser triggers a download. Never generate files client-side with `xlsx`, `@react-pdf/renderer`, `jspdf`, or similar libraries.
-
-**Rule:** Export methods live in the API service class, not in components. Components only build the query string and call the service method.
-
-### Service method (in `src/services/api/{feature}.ts`)
-
-```ts
-async exportToExcel(initialQueryString: string) {
-  const params = new URLSearchParams(initialQueryString);
-
-  params.set('export', 'excel'); // or 'pdf', 'csv', etc.
-  params.set('page', '1');
-  params.set('limit', '99999999999');
-
-  const res = await httpClient<Blob>(`${this.basePath}?${params.toString()}`, {
-    method: 'GET',
-    responseType: 'blob',
-  });
-
-  const url = window.URL.createObjectURL(new Blob([res]));
-  const link = document.createElement('a');
-  link.href = url;
-  link.setAttribute('download', `filename-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`);
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-}
-```
-
-- Change `export=excel` → `export=pdf` (and the file extension) for PDF exports.
-- Add one method per format; keep them side-by-side in the same service class.
-
-### Component handler (in the page/tab component)
-
-```ts
-const handleExportExcel = useCallback(async () => {
-  setIsExcelExportLoading(true);
-  try {
-    const params = new URLSearchParams();
-    if (filterParams.foo) params.set('foo', filterParams.foo);
-    // ... map all active filter params ...
-
-    await FeatureApi.exportToExcel(params.toString());
-    toast.success('Excel berhasil dibuat dan diunduh.');
-  } catch {
-    toast.error('Gagal membuat Excel. Silakan coba lagi.');
-  } finally {
-    setIsExcelExportLoading(false);
-  }
-}, [filterParams, searchValue]);
-```
-
-- Do **not** fetch all rows into the component to build the file — delegate entirely to the service method.
-- 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).

Dockerfile

@@ -1,4 +1,4 @@
-FROM public.ecr.aws/docker/library/node:20-alpine
+FROM node:20-alpine
 
 RUN apk add --no-cache git bash build-base curl
 
@@ -22,4 +22,4 @@ RUN mkdir -p .next/server/app/_next && \
 
 EXPOSE 3000
 
-CMD ["npx", "serve", ".next/server/app", "-l", "3000"]
+CMD ["npx", "serve", ".next/server/app", "-l", "3000"]

package.json

@@ -7,10 +7,8 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
-    "typecheck": "next typegen && tsc --noEmit",
     "prepare": "husky",
-    "format": "prettier --write .",
-    "pre-commit": "npm run format && npm run lint && npm run typecheck && npm run build"
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.3.1",

src/app/closing/detail/page.tsx

@@ -3,10 +3,11 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-import ClosingDetail from '@/components/pages/closing/ClosingDetailTabs';
+import ClosingDetail from '@/components/pages/closing/ClosingDetail';
 
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { ProjectFlockKandangApi } from '@/services/api/production';
 
@@ -33,6 +34,33 @@ const ClosingDetailPage = () => {
     () => ProjectFlockKandangApi.getSingle(Number(kandangId))
   );
 
+  const { data: salesData, isLoading: isLoadingSales } = useSWR(
+    kandangId
+      ? `sales-${closingId}-${kandangId}`
+      : closingId
+        ? `sales-${closingId}`
+        : null,
+    () =>
+      kandangId
+        ? ClosingApi.getPenjualanByKandang(Number(closingId), Number(kandangId))
+        : ClosingApi.getPenjualan(Number(closingId))
+  );
+
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    kandangId
+      ? `hpp-ekspedisi-${closingId}-${kandangId}`
+      : closingId
+        ? `hpp-ekspedisi-${closingId}`
+        : null,
+    () =>
+      kandangId
+        ? ClosingApi.getHppEkspedisiByKandang(
+            Number(closingId),
+            Number(kandangId)
+          )
+        : ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
   if (!closingId) {
     router.back();
 
@@ -48,7 +76,12 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingProject || isLoadingKandang;
+  const isLoading =
+    isLoadingClosing ||
+    isLoadingSales ||
+    isLoadingHppEkspedisi ||
+    isLoadingProject ||
+    isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -58,6 +91,12 @@ const ClosingDetailPage = () => {
         <ClosingDetail
           id={Number(closingId)}
           initialValue={closing.data}
+          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
           projectData={
             isResponseSuccess(projectData) ? projectData.data : undefined
           }

src/app/closing/page.tsx

@@ -2,7 +2,7 @@ import ClosingsTable from '@/components/pages/closing/ClosingsTable';
 
 const Closing = () => {
   return (
-    <section className='w-full p-3'>
+    <section className='w-full p-4'>
       <ClosingsTable />
     </section>
   );

src/app/daily-checklist/master-data/kandang/page.tsx

@@ -1,11 +0,0 @@
-import { MasterKandangContent } from '@/figma-make/components/pages/master-data/kandang/MasterKandangContent';
-
-const MasterKandangPage = () => {
-  return (
-    <section className='w-full'>
-      <MasterKandangContent />
-    </section>
-  );
-};
-
-export default MasterKandangPage;

src/app/expense/detail/page.tsx

@@ -15,8 +15,8 @@ const ExpenseDetailPage = () => {
   const expenseId = searchParams.get('expenseId');
 
   const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    ['expense-detail', expenseId],
-    ([_, id]) => ExpenseApi.getSingle(Number(id))
+    expenseId,
+    (id: number) => ExpenseApi.getSingle(id)
   );
 
   if (!expenseId) {

src/app/finance/detail/edit/page.tsx

@@ -5,6 +5,7 @@ import useSWR from 'swr';
 import { FinanceApi } from '@/services/api/finance';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
 
 const EditFinanceTransactionPage = () => {
   const router = useRouter();

src/app/finance/detail/page.tsx

@@ -4,7 +4,7 @@ import FinanceDetail from '@/components/pages/finance/FinanceDetail';
 import useSWR from 'swr';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FinanceApi } from '@/services/api/finance';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const FinanceDetailPage = () => {
   const router = useRouter();

src/app/finance/page.tsx

@@ -3,7 +3,12 @@
 import FinanceTable from '@/components/pages/finance/FinanceTable';
 
 const Finance = () => {
-  return <FinanceTable />;
+  return (
+    <section className='size-full p-6'>
+      <div className='flex flex-row gap-4'></div>
+      <FinanceTable />
+    </section>
+  );
 };
 
 export default Finance;

src/app/globals.css

@@ -68,8 +68,6 @@
 
   --shadow-button-soft:
     0 3px 2px -2px var(--color-base-200), 0 4px 3px -2px var(--color-base-200);
-
-  --shadow-bg: 0px -2px 4px 0px #00000014;
 }
 
 html {

src/app/inventory/adjustment/page.tsx

@@ -2,7 +2,7 @@ import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/In
 
 const InventoryAdjustment = () => {
   return (
-    <section className='w-full'>
+    <section className='w-full p-4'>
       <InventoryAdjustmentTable />
     </section>
   );

src/app/marketing/add/delivery-orders/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/marketing/add/delivery-orders/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const EditMarketingDelivery = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('marketingId');
+
+  const {
+    data: marketing,
+    isLoading: isLoading,
+    mutate: refreshMarketing,
+  } = useSWR(`get-so-${soId}`, () =>
+    MarketingApi.getSingle(soId ? parseInt(soId) : 0)
+  );
+
+  if (!soId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <MarketingForm
+          formType='add_deliver'
+          initialValues={marketing.data}
+          afterSubmit={() => {
+            refreshMarketing();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+export default EditMarketingDelivery;

src/app/marketing/add/sales-orders/page.tsx

@@ -0,0 +1,11 @@
+import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
+
+const AddSalesOrder = () => {
+  return (
+    <div className='size-full p-4'>
+      <MarketingForm formType='add' />
+    </div>
+  );
+};
+
+export default AddSalesOrder;

src/app/marketing/detail/delivery-orders/edit/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/marketing/detail/delivery-orders/edit/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const EditMarketingDelivery = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('marketingId');
+
+  const {
+    data: marketing,
+    isLoading: isLoading,
+    mutate: refreshMarketing,
+  } = useSWR(`get-so-${soId}`, () =>
+    MarketingApi.getSingle(soId ? parseInt(soId) : 0)
+  );
+
+  if (!soId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
+
+  if (
+    isResponseSuccess(marketing) &&
+    marketing.data.latest_approval.step_number != 3
+  ) {
+    toast.error('Data Marketing perlu dilakukan approval terlebih dahulu!');
+    router.back();
+  }
+
+  return (
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <MarketingForm
+          formType='edit_deliver'
+          initialValues={marketing.data}
+          afterSubmit={() => {
+            refreshMarketing();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+export default EditMarketingDelivery;

src/app/marketing/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/marketing/detail/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import MarketingDetail from '@/components/pages/marketing/detail/MarketingDetail';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const DetailMarketing = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('marketingId');
+
+  const {
+    data: marketing,
+    isLoading: isLoading,
+    mutate: refreshMarketing,
+  } = useSWR(soId, (id: number) => MarketingApi.getSingle(id));
+
+  if (!soId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <MarketingDetail
+          initialValues={marketing.data}
+          refresh={refreshMarketing}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DetailMarketing;

src/app/marketing/detail/sales-orders/edit/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/marketing/detail/sales-orders/edit/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const EditSalesOrder = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('marketingId');
+
+  const {
+    data: marketing,
+    isLoading: isLoading,
+    mutate: refreshMarketing,
+  } = useSWR(`get-so-${soId}`, () =>
+    MarketingApi.getSingle(soId ? parseInt(soId) : 0)
+  );
+
+  if (!soId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
+  return (
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <MarketingForm
+          formType='edit'
+          initialValues={marketing.data}
+          afterSubmit={() => {
+            refreshMarketing();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+export default EditSalesOrder;

src/app/master-data/area/page.tsx

@@ -1,7 +1,11 @@
 import AreasTable from '@/components/pages/master-data/area/AreasTable';
 
 const Nonstock = () => {
-  return <AreasTable />;
+  return (
+    <section className='w-full p-4'>
+      <AreasTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/bank/page.tsx

@@ -1,7 +1,11 @@
 import BanksTable from '@/components/pages/master-data/bank/BanksTable';
 
 const Bank = () => {
-  return <BanksTable />;
+  return (
+    <section className='w-full p-4'>
+      <BanksTable />
+    </section>
+  );
 };
 
 export default Bank;

src/app/master-data/customer/page.tsx

@@ -1,7 +1,11 @@
 import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
 
 const Customer = () => {
-  return <CustomersTable />;
+  return (
+    <section className='w-full p-4'>
+      <CustomersTable />
+    </section>
+  );
 };
 
 export default Customer;

src/app/master-data/fcr/add/page.tsx

@@ -0,0 +1,11 @@
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+const AddFcr = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <FcrForm />
+    </div>
+  );
+};
+
+export default AddFcr;

src/app/master-data/fcr/detail/edit/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+import { FcrApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { FcrWithStandards } from '@/types/api/master-data/fcr';
+
+const FcrEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const fcrId = searchParams.get('fcrId');
+
+  const { data: fcr, isLoading: isLoadingFcr } = useSWR(
+    fcrId,
+    (id: number) =>
+      FcrApi.getSingle(id) as Promise<
+        BaseApiResponse<FcrWithStandards> | undefined
+      >
+  );
+
+  if (!fcrId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFcr && <span className='loading loading-spinner loading-xl' />}
+      {!isLoadingFcr && isResponseSuccess(fcr) && (
+        <FcrForm type='edit' initialValues={fcr.data} />
+      )}
+    </div>
+  );
+};
+
+export default FcrEdit;

src/app/master-data/fcr/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/master-data/fcr/detail/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+import { FcrApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FcrWithStandards } from '@/types/api/master-data/fcr';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+const FcrDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const fcrId = searchParams.get('fcrId');
+
+  const { data: fcr, isLoading: isLoadingFcr } = useSWR(
+    fcrId,
+    (id: number) =>
+      FcrApi.getSingle(id) as Promise<
+        BaseApiResponse<FcrWithStandards> | undefined
+      >
+  );
+
+  if (!fcrId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFcr && <span className='loading loading-spinner loading-xl' />}
+      {!isLoadingFcr && isResponseSuccess(fcr) && (
+        <FcrForm type='detail' initialValues={fcr.data} />
+      )}
+    </div>
+  );
+};
+
+export default FcrDetail;

src/app/master-data/fcr/page.tsx

@@ -0,0 +1,11 @@
+import FcrsTable from '@/components/pages/master-data/fcr/FcrsTable';
+
+const Fcr = () => {
+  return (
+    <section className='w-full p-4'>
+      <FcrsTable />
+    </section>
+  );
+};
+
+export default Fcr;

src/app/master-data/flock/page.tsx

@@ -1,7 +1,11 @@
 import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
 
 const Flock = () => {
-  return <FlockTable />;
+  return (
+    <section className='w-full p-4'>
+      <FlockTable />
+    </section>
+  );
 };
 
 export default Flock;

src/app/master-data/kandang/page.tsx

@@ -1,7 +1,11 @@
 import KandangsTable from '@/components/pages/master-data/kandang/KandangsTable';
 
 const Nonstock = () => {
-  return <KandangsTable />;
+  return (
+    <section className='w-full p-4'>
+      <KandangsTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/location/page.tsx

@@ -1,7 +1,11 @@
 import LocationsTable from '@/components/pages/master-data/location/LocationsTable';
 
 const Nonstock = () => {
-  return <LocationsTable />;
+  return (
+    <section className='w-full p-4'>
+      <LocationsTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/nonstock/page.tsx

@@ -1,7 +1,11 @@
 import NonstocksTable from '@/components/pages/master-data/nonstock/NonstocksTable';
 
 const Nonstock = () => {
-  return <NonstocksTable />;
+  return (
+    <section className='w-full p-4'>
+      <NonstocksTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/product-category/page.tsx

@@ -1,7 +1,11 @@
 import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
 
 const ProductCategory = () => {
-  return <ProductCategoryTable />;
+  return (
+    <section className='w-full p-4'>
+      <ProductCategoryTable />
+    </section>
+  );
 };
 
 export default ProductCategory;

src/app/master-data/product/page.tsx

@@ -1,7 +1,11 @@
 import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
-  return <ProductsTable />;
+  return (
+    <section className='w-full p-4'>
+      <ProductsTable />
+    </section>
+  );
 };
 
 export default Product;

src/app/master-data/production-standard/page.tsx

@@ -1,7 +1,11 @@
 import ProductionStandardTable from '@/components/pages/master-data/production-standard/ProductionStandardTable';
 
 const ProductionStandardPage = () => {
-  return <ProductionStandardTable />;
+  return (
+    <div className='w-full'>
+      <ProductionStandardTable />
+    </div>
+  );
 };
 
 export default ProductionStandardPage;

src/app/master-data/supplier/page.tsx

@@ -1,7 +1,11 @@
 import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
-  return <SuppliersTable />;
+  return (
+    <section className='w-full p-4'>
+      <SuppliersTable />
+    </section>
+  );
 };
 
 export default Supplier;

src/app/master-data/system-config/page.tsx

@@ -1,11 +0,0 @@
-import { SystemConfigContent } from '@/figma-make/components/pages/master-data/system-config/SystemConfigContent';
-
-const SystemConfigPage = () => {
-  return (
-    <section className='w-full'>
-      <SystemConfigContent />
-    </section>
-  );
-};
-
-export default SystemConfigPage;

src/app/master-data/uom/page.tsx

@@ -1,7 +1,11 @@
 import UomsTable from '@/components/pages/master-data/uom/UomsTable';
 
 const Nonstock = () => {
-  return <UomsTable />;
+  return (
+    <section className='w-full p-4'>
+      <UomsTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/warehouse/page.tsx

@@ -1,7 +1,11 @@
 import WarehousesTable from '@/components/pages/master-data/warehouse/WarehousesTable';
 
 const Warehouse = () => {
-  return <WarehousesTable />;
+  return (
+    <section className='w-full p-4'>
+      <WarehousesTable />
+    </section>
+  );
 };
 
 export default Warehouse;

src/app/page.tsx

@@ -3,9 +3,10 @@
 import { useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useAuth } from '@/services/hooks/useAuth';
+import { redirectToSSO } from '@/lib/auth-helper';
 
 export default function Home() {
-  const { isLoadingUser } = useAuth();
+  const { user, isLoadingUser } = useAuth();
 
   const router = useRouter();
   const pathname = usePathname();

src/app/production/project-flock/add/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
-import React from 'react';
-// import React, { useImperativeHandle } from 'react';
+import React, { useImperativeHandle } from 'react';
+import toast from 'react-hot-toast';
 
 const AddProjectFlock = () => {
   // useImperativeHandle(ref, () => ({

src/app/production/project-flock/detail/edit/page.tsx

@@ -12,10 +12,11 @@ const ProjectFlockEdit = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlocks,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();

src/app/production/project-flock/detail/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import ProjectFlockDetail from '@/components/pages/production/project-flock/detail/ProjectFlockDetail';
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -12,10 +13,11 @@ const ProjectFlockDetailPage = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();

src/app/production/project-flock/layout.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import React, { ReactNode, useEffect } from 'react';
+import Drawer from '@/components/Drawer';
+import React, { ReactNode } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 import { useUiStore } from '@/stores/ui/ui.store';
-import Modal, { useModal } from '@/components/Modal';
 
 export default function ProjectFlockLayout({
   children,
@@ -23,12 +23,9 @@ export default function ProjectFlockLayout({
 
   const isOpen = isAdd || isEdit || isDetail || isChickin || isClosing;
 
-  const formModal = useModal();
-
   const handleBackdropClick = () => {
     const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
       if (isValid) {
-        formModal.closeModal();
         unsub(); // berhenti listen
         router.push('/production/project-flock');
       }
@@ -37,14 +34,6 @@ export default function ProjectFlockLayout({
     toggleValidate();
   };
 
-  useEffect(() => {
-    if (isOpen && !formModal.open) {
-      formModal.openModal();
-    } else {
-      formModal.closeModal();
-    }
-  }, [isOpen]);
-
   return (
     <>
       {/* List page always rendered */}
@@ -54,19 +43,18 @@ export default function ProjectFlockLayout({
         />
       </div>
 
-      {/* Render Modal only on /add */}
-      <Modal
-        ref={formModal.ref}
-        position='end'
-        onBackdropClick={handleBackdropClick}
-        className={{
-          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+      {/* Render Drawer only on /add */}
+      <Drawer
+        open={isOpen}
+        setOpen={(v) => {
+          if (!v) router.push('/production/project-flock');
         }}
-      >
-        <div className='w-full sm:w-[446px] h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-hidden'>
-          {isOpen && children}
-        </div>
-      </Modal>
+        closeOnBackdropClick={isDetail ? true : false}
+        onBackdropClick={handleBackdropClick}
+        variant='right'
+        zIndex='99999'
+        sidebarContent={isOpen && <div className=''>{children}</div>}
+      />
     </>
   );
 }

src/app/production/recording/detail/edit/page.tsx

@@ -11,13 +11,10 @@ const RecordingEdit = () => {
   const searchParams = useSearchParams();
 
   const recordingId = searchParams.get('recordingId');
-  const recordingDetailKey = recordingId
-    ? ['recording-detail', recordingId]
-    : null;
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingDetailKey,
-    ([, id]: [string, string]) => RecordingApi.getSingle(parseInt(id))
+    recordingId,
+    (id: string) => RecordingApi.getSingle(parseInt(id))
   );
 
   if (!recordingId) {

src/app/production/recording/detail/page.tsx

@@ -11,13 +11,10 @@ const RecordingDetail = () => {
   const searchParams = useSearchParams();
 
   const recordingId = searchParams.get('recordingId');
-  const recordingDetailKey = recordingId
-    ? ['recording-detail', recordingId]
-    : null;
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingDetailKey,
-    ([, id]: [string, string]) => RecordingApi.getSingle(parseInt(id))
+    recordingId,
+    (id: string) => RecordingApi.getSingle(parseInt(id))
   );
 
   if (!recordingId) {

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full'>
+    <section className='w-full p-4 sm:p-0'>
       <RecordingTable />
     </section>
   );

src/app/report/expense/page.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import ReportExpenseTabs from '@/components/pages/report/expense/ReportExpenseTabs';
+import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
 
 const ReportExpense = () => {
-  return <ReportExpenseTabs />;
+  return (
+    <div className='w-full p-4'>
+      <ReportExpenseTable />
+    </div>
+  );
 };
 
 export default ReportExpense;

src/app/report/marketing/page.tsx

@@ -1,7 +1,11 @@
-import MarketingReportContent from '@/components/pages/report/marketing/MarketingTabs';
+import MarketingReportContent from '@/components/pages/report/MarketingReportContent';
 
 const MarketingReportPage = () => {
-  return <MarketingReportContent />;
+  return (
+    <section className='w-full p-4'>
+      <MarketingReportContent />
+    </section>
+  );
 };
 
 export default MarketingReportPage;

src/app/report/production-result/page.tsx

@@ -1,9 +1,9 @@
-import ProductionResultTabs from '@/components/pages/report/production-result/ProductionResultTabs';
+import ProductionResultContent from '@/components/pages/report/production-result/ProductionResultContent';
 
 const ProductionResultReportPage = () => {
   return (
-    <section className='w-full max-w-full'>
-      <ProductionResultTabs />
+    <section className='w-full max-w-7xl pb-16'>
+      <ProductionResultContent />
     </section>
   );
 };

src/components/Alert.tsx

@@ -1,16 +1,15 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
 interface AlertProps {
-  ref?: Ref<HTMLDivElement> | undefined;
   variant?: 'outline' | 'dash' | 'soft';
   color?: 'info' | 'success' | 'warning' | 'error';
   children?: ReactNode;
   className?: string;
 }
 
-const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
+const Alert = ({ children, variant, color, className }: AlertProps) => {
   const alertBaseClassName = cn('alert', {
     'alert-soft': variant === 'soft',
     'alert-outline': variant === 'outline',
@@ -22,11 +21,7 @@ const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
     'alert-error': color === 'error',
   });
 
-  return (
-    <div ref={ref} className={cn(alertBaseClassName, className)}>
-      {children}
-    </div>
-  );
+  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
 };
 
 export default Alert;

src/components/Button.tsx

@@ -51,7 +51,7 @@ const Button = ({
 
   return (
     <>
-      {(!href || (href && disabled)) && (
+      {!href && (
         <button
           {...props}
           type={type}
@@ -68,9 +68,9 @@ const Button = ({
         </button>
       )}
 
-      {href && !disabled && (
+      {href && (
         <Link
-          href={href}
+          href={disabled ? '#' : href}
           target={target}
           rel={rel}
           aria-disabled={disabled}

src/components/Drawer.tsx

@@ -108,9 +108,7 @@ const Drawer = ({
     if (closeOnBackdropClick) {
       setOpen(false);
     }
-    if (onBackdropClick) {
-      onBackdropClick();
-    }
+    onBackdropClick && onBackdropClick();
   };
 
   return (

src/components/MainDrawer.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useCallback } from 'react';
 import { usePathname } from 'next/navigation';
 
 import Image from 'next/image';
@@ -12,6 +13,7 @@ import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
+import { isPathActive } from '@/lib/helper';
 import { ROUTE_PERMISSIONS } from '@/config/route-permission';
 import { useAuth } from '@/services/hooks/useAuth';
 

src/components/Modal.tsx

@@ -31,11 +31,7 @@ export const useModal = (isNestingModal = false) => {
   }, []);
 
   const toggle = useCallback(() => {
-    if (open) {
-      closeModal();
-    } else {
-      openModal();
-    }
+    open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
   useEffect(() => {

src/components/Navbar.tsx

@@ -26,17 +26,13 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
+
     if (isResponseError(logoutRes)) {
       toast.error('Gagal logout! Coba lagi!');
       return;
     }
 
     setUser(undefined);
-    const redirect = (logoutRes as { redirect?: string })?.redirect;
-    if (redirect) {
-      window.location.href = redirect;
-      return;
-    }
     router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
   };
 

src/components/Pagination.tsx

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

src/components/Table.tsx

@@ -85,8 +85,8 @@ const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
 }));
 
 const emptyContentDefaultValue = (
-  <div className='w-full text-center py-4'>
-    <span className='text-sm opacity-50'>
+  <div className='w-full p-5 text-center'>
+    <span className='text-lg opacity-50'>
       Tidak ada data yang dapat ditampilkan...
     </span>
   </div>
@@ -452,20 +452,6 @@ const Table = <TData extends object>({
                 </Fragment>
               );
             })}
-
-            {(data.length === 0 || table.getRowModel().rows.length === 0) &&
-              !isLoading && (
-                <tr>
-                  <td
-                    colSpan={
-                      table.getAllLeafColumns().length + (withCheckbox ? 1 : 0)
-                    }
-                    className='p-0'
-                  >
-                    {emptyContent}
-                  </td>
-                </tr>
-              )}
           </tbody>
           <tfoot
             className={cn(
@@ -503,6 +489,10 @@ const Table = <TData extends object>({
         </table>
       </div>
 
+      {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+        !isLoading &&
+        emptyContent}
+
       {data.length > 0 &&
         table.getRowModel().rows.length > 0 &&
         !isLoading &&

src/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, useState } from 'react';
+import { HTMLAttributes, ReactNode, useEffect, useState } from 'react';
 import { cn } from '@/lib/helper';
 
 export interface TabItem {

src/components/helper/ApprovalStepsV2.tsx

@@ -9,7 +9,6 @@ import Button from '@/components/Button';
 import { cn, formatDate } from '@/lib/helper';
 
 interface ApprovalStepsV2Props {
-  title?: string;
   approvals?: BaseApproval[];
   steps: {
     step_number: number;
@@ -24,7 +23,6 @@ interface ApprovalStepsV2Props {
 }
 
 const ApprovalStepsV2 = ({
-  title = 'Progress Details',
   approvals,
   steps,
   maxVisibleSteps = 2,
@@ -101,7 +99,7 @@ const ApprovalStepsV2 = ({
       )}
     >
       <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-        {title}
+        Progress Details
       </h4>
 
       <div

src/components/helper/ButtonFilter.tsx

@@ -3,51 +3,15 @@ import { getFilledFormikValuesCount } from '@/lib/formik-helper';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 import { FormikValues } from 'formik';
-import { useMemo } from 'react';
 
 export type ButtonFilterProps = ButtonProps & {
   values: FormikValues;
   onClick: () => void;
-  excludeFields?: string[];
-  fieldGroups?: string[][];
 };
 
 // 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
 
-const ButtonFilter = ({
-  values,
-  onClick,
-  excludeFields = [],
-  fieldGroups = [],
-  ...props
-}: ButtonFilterProps) => {
-  const activeCount = useMemo(() => {
-    const filteredValues: FormikValues = {};
-    Object.keys(values).forEach((key) => {
-      if (!excludeFields.includes(key)) {
-        filteredValues[key] = values[key];
-      }
-    });
-
-    let count = getFilledFormikValuesCount(filteredValues);
-
-    fieldGroups.forEach((group) => {
-      const groupFields = group.filter(
-        (field) => !excludeFields.includes(field)
-      );
-      const filledGroupFields = groupFields.filter(
-        (field) => filteredValues[field]
-      );
-      if (
-        filledGroupFields.length === groupFields.length &&
-        groupFields.length > 1
-      ) {
-        count -= groupFields.length - 1;
-      }
-    });
-
-    return count;
-  }, [values, excludeFields, fieldGroups]);
+const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
   return (
     <Button
       {...props}
@@ -57,7 +21,7 @@ const ButtonFilter = ({
       className={cn(
         'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
         'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-        activeCount > 0
+        getFilledFormikValuesCount(values) > 0
           ? 'border-primary-gradient text-primary rounded-lg!'
           : 'rounded-lg',
         props.className
@@ -67,12 +31,14 @@ const ButtonFilter = ({
         icon='heroicons:funnel'
         width={20}
         height={20}
-        className={activeCount > 0 ? 'text-blue-600' : ''}
+        className={
+          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
+        }
       />
       Filter
-      {activeCount > 0 && (
+      {getFilledFormikValuesCount(values) > 0 && (
         <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-          {activeCount}
+          {getFilledFormikValuesCount(values)}
         </span>
       )}
     </Button>

src/components/helper/StatusBadge.tsx

@@ -1,30 +1,24 @@
-import { ReactNode } from 'react';
-
 import Badge from '@/components/Badge';
-
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
 
 interface StatusBadgeProps {
   color: Color;
-  text: ReactNode;
+  text: string;
   className?: {
     badge?: string;
     status?: string;
   };
-  onClick?: () => void;
 }
 
 const StatusBadge = ({
   color = 'neutral',
   text,
   className,
-  onClick,
 }: StatusBadgeProps) => {
   return (
     <Badge
       variant='soft'
-      onClick={onClick}
       className={{
         badge: cn(
           'px-2 py-1 w-full flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content',

src/components/helper/drawer/DrawerHeader.tsx

@@ -27,7 +27,7 @@ export interface DrawerHeaderProps {
 
 const DrawerHeader = ({
   leftIcon = 'mdi:close',
-  leftIconSize = 20,
+  leftIconSize = 24,
   leftIconHref,
   leftIconOnClick,
   leftIconClassName,
@@ -43,7 +43,7 @@ const DrawerHeader = ({
         icon={leftIcon}
         width={leftIconSize}
         height={leftIconSize}
-        className={cn('cursor-pointer text-base-content ', leftIconClassName)}
+        className={cn('cursor-pointer', leftIconClassName)}
       />
     );
 
@@ -73,7 +73,7 @@ const DrawerHeader = ({
   return (
     <div
       className={cn(
-        'flex flex-row justify-between items-center p-4 border-b border-base-content/10',
+        'flex flex-row justify-between items-center px-4 pt-4 pb-4 border-b border-base-content/10',
         className
       )}
     >
@@ -82,7 +82,7 @@ const DrawerHeader = ({
         {renderLeftIcon()}
 
         {showDivider && subtitle && (
-          <div className='w-px h-full border-none bg-base-content/10' />
+          <div className='divider divider-horizontal p-0 m-0'></div>
         )}
 
         {subtitle && (

src/components/helper/form/FormErrors.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import Alert from '@/components/Alert';
 import Button from '@/components/Button';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useEffect, useRef } from 'react';
+import { useState } from 'react';
 
 /**
  * Alert Unique Error List
@@ -31,22 +29,10 @@ const AlertErrorList = ({
   onClose: () => void;
   title?: string;
 }) => {
-  const alertRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (formErrorList.length > 0) {
-      alertRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    }
-  }, [formErrorList.length]);
-
   if (formErrorList.length === 0) return null;
 
   return (
     <Alert
-      ref={alertRef}
       color='error'
       className={cn(
         'w-full flex flex-col gap-2 px-3 rounded-lg',
@@ -71,7 +57,6 @@ const AlertErrorList = ({
           </span>
         </div>
         <Button
-          type='button'
           onClick={onClose}
           variant='link'
           className={cn('ml-auto p-0 w-fit text-white', className?.button)}

src/components/helper/pdf/badge/PdfParamBadge.tsx

@@ -1,27 +0,0 @@
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import type { Style } from '@react-pdf/types';
-
-type PdfParamBadgeProps = {
-  children: React.ReactNode;
-  style?: Style;
-};
-
-const styles = StyleSheet.create({
-  parameterBadge: {
-    backgroundColor: '#F5F5F5',
-    color: '#333333',
-    padding: 4,
-    borderRadius: 4,
-    fontSize: 8,
-    marginRight: 8,
-    marginBottom: 4,
-  },
-});
-
-export const PdfParamBadge = ({ children, style }: PdfParamBadgeProps) => {
-  return (
-    <View style={[styles.parameterBadge, ...(style ? [style] : [])]}>
-      <Text>{children}</Text>
-    </View>
-  );
-};

src/components/helper/pdf/badge/PdfStatusBadge.tsx

@@ -1,54 +0,0 @@
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import type { Style } from '@react-pdf/types';
-
-type PdfStatusBadgeProps = {
-  children: React.ReactNode;
-  style?: Style;
-};
-
-const styles = StyleSheet.create({
-  statusBadge: {
-    paddingVertical: 2,
-    paddingHorizontal: 4,
-    borderRadius: 12,
-    fontSize: 7,
-    fontWeight: 'bold',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    backgroundColor: '#F5F5F5',
-    borderColor: '#E5E7EB',
-  },
-  statusBadgeText: {
-    fontSize: 7,
-    fontWeight: 'bold',
-    color: '#333333',
-  },
-});
-
-export const PdfStatusBadge = ({ children, style }: PdfStatusBadgeProps) => {
-  const styleRecord = style as Record<string, unknown>;
-  const color = styleRecord?.color as string | undefined;
-
-  const viewStyle = Object.entries(styleRecord || {}).reduce(
-    (acc, [key, value]) => {
-      if (key !== 'color') {
-        acc[key] = value;
-      }
-      return acc;
-    },
-    {} as Record<string, unknown>
-  );
-
-  return (
-    <View
-      style={[
-        styles.statusBadge,
-        ...(Object.keys(viewStyle).length > 0 ? [viewStyle as Style] : []),
-      ]}
-    >
-      <Text style={[styles.statusBadgeText, ...(color ? [{ color }] : [])]}>
-        {children}
-      </Text>
-    </View>
-  );
-};

src/components/helper/pdf/layout/PdfPageNumber.tsx

@@ -1,48 +0,0 @@
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import type { Style } from '@react-pdf/types';
-
-type PdfPageNumberProps = {
-  style?: Style;
-  /**
-   * Format template for page number.
-   * Use {pageNumber} and {totalPages} as placeholders.
-   * Default: "{pageNumber} / {totalPages}"
-   */
-  format?: string;
-};
-
-const styles = StyleSheet.create({
-  footer: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    position: 'absolute',
-    fontSize: 8,
-    bottom: 30,
-    left: 0,
-    right: 0,
-    textAlign: 'center',
-    color: 'grey',
-  },
-});
-
-export const PdfPageNumber = ({
-  style,
-  format = '{pageNumber} / {totalPages}',
-}: PdfPageNumberProps) => {
-  return (
-    <View style={style || styles.footer} fixed>
-      <Text
-        render={({ pageNumber, totalPages }) =>
-          format
-            .replace('{pageNumber}', String(pageNumber))
-            .replace('{totalPages}', String(totalPages))
-        }
-        fixed
-      />
-    </View>
-  );
-};

src/components/helper/pdf/table/PdfTable.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { View, StyleSheet } from '@react-pdf/renderer';
-import type { PdfColumn } from './types';
-import { PdfThead } from './PdfThead';
-import { PdfTbody } from './PdfTbody';
-import { PdfTfoot } from './PdfTfoot';
+import { PdfThead, PdfColumn } from './PdfThead';
+import { PdfTbody, PdfTbodyCell } from './PdfTbody';
+import { PdfTfoot, PdfTfootCell } from './PdfTfoot';
 
 const styles = StyleSheet.create({
   table: {
@@ -14,10 +13,10 @@ const styles = StyleSheet.create({
   },
 });
 
-interface PdfTableProps<TData = Record<string, unknown>> {
-  columns: PdfColumn<TData>[];
-  data: TData[];
-  showFooter?: boolean;
+interface PdfTableProps {
+  columns: PdfColumn[];
+  data: PdfTbodyCell[][];
+  footer?: PdfTfootCell[];
   footerLabel?: string;
   firstRow?: {
     valueKey: string;
@@ -27,26 +26,20 @@ interface PdfTableProps<TData = Record<string, unknown>> {
   };
 }
 
-export const PdfTable = <TData = Record<string, unknown>,>({
+export const PdfTable = ({
   columns,
   data,
-  showFooter = false,
+  footer,
   footerLabel = 'Total',
   firstRow,
-}: PdfTableProps<TData>) => {
-  // Check if any column has footer defined
-  const hasFooter =
-    showFooter || columns.some((col) => col.footer !== undefined);
-
+}: PdfTableProps) => {
   return (
     <View style={styles.table}>
-      <PdfThead columns={columns} data={data} />
-      <PdfTbody columns={columns} data={data} firstRow={firstRow} />
-      {hasFooter && data.length > 0 && (
-        <PdfTfoot columns={columns} data={data} label={footerLabel} />
+      <PdfThead columns={columns} />
+      <PdfTbody columns={columns} rows={data} firstRow={firstRow} />
+      {footer && footer.length > 0 && (
+        <PdfTfoot columns={columns} cells={footer} label={footerLabel} />
       )}
     </View>
   );
 };
-
-export type { PdfColumn };

src/components/helper/pdf/table/PdfTbody.tsx

@@ -1,8 +1,22 @@
 'use client';
 
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import { ReactNode } from 'react';
-import type { PdfColumn } from './types';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface PdfTbodyCell {
+  key: string;
+  value: string | number | React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  color?: string;
+  formatAs?: 'text' | 'date' | 'currency' | 'number';
+  formatDate?: string;
+}
 
 const styles = StyleSheet.create({
   tableRow: {
@@ -57,22 +71,21 @@ const styles = StyleSheet.create({
   },
 });
 
-interface PdfTbodyProps<TData = Record<string, unknown>> {
-  columns: PdfColumn<TData>[];
-  data: TData[];
+interface PdfTbodyProps {
+  columns: PdfColumn[];
+  rows: PdfTbodyCell[][];
   firstRow?: {
     valueKey: string;
     value: number;
     align?: 'right';
     color?: string;
   };
+  formatDate?: (date: string, format: string) => string;
+  formatNumber?: (num: number) => string;
+  formatCurrency?: (num: number) => string;
 }
 
-export const PdfTbody = <TData = Record<string, unknown>,>({
-  columns,
-  data,
-  firstRow,
-}: PdfTbodyProps<TData>) => {
+export const PdfTbody = ({ columns, rows, firstRow }: PdfTbodyProps) => {
   return (
     <>
       {/* First Row */}
@@ -80,17 +93,17 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
         <View style={[styles.tableRow, styles.tableBorderBottom]}>
           {columns.map((column, index) => {
             const isLastColumn = index === columns.length - 1;
-            const isFirstRowColumn = column.key === firstRow.valueKey;
-            const align = column.align || 'left';
+            const isfirstRowColumn = column.key === firstRow.valueKey;
+            const align = column.align || 'center';
 
             const cellStyle =
               column.key === 'no'
-                ? [styles.tableCellNo, { flex: column.flex || 1 }]
-                : isFirstRowColumn
+                ? [styles.tableCellNo, { flex: column.flex }]
+                : isfirstRowColumn
                   ? [
                       styles.tableCellRight,
                       {
-                        flex: column.flex || 1,
+                        flex: column.flex,
                         color: firstRow.color || 'black',
                         borderRightWidth: isLastColumn ? 0 : 1,
                       },
@@ -99,7 +112,7 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
                     ? [
                         styles.tableCellRight,
                         {
-                          flex: column.flex || 1,
+                          flex: column.flex,
                           borderRightWidth: isLastColumn ? 0 : 1,
                         },
                       ]
@@ -107,7 +120,7 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
                       ? [
                           styles.tableCellCenter,
                           {
-                            flex: column.flex || 1,
+                            flex: column.flex,
                             borderRightWidth: isLastColumn ? 0 : 1,
                           },
                         ]
@@ -115,15 +128,15 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
                         ? [
                             styles.tableCellLast,
                             {
-                              flex: column.flex || 1,
+                              flex: column.flex,
                               borderRightWidth: 0,
                             },
                           ]
-                        : [styles.tableCell, { flex: column.flex || 1 }];
+                        : [styles.tableCell, { flex: column.flex }];
 
             return (
               <View key={column.key} style={cellStyle}>
-                <Text>{isFirstRowColumn ? firstRow.value : ''}</Text>
+                <Text>{isfirstRowColumn ? firstRow.value : ''}</Text>
               </View>
             );
           })}
@@ -131,8 +144,8 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
       )}
 
       {/* Data Rows */}
-      {data.map((row, rowIndex) => {
-        const isLastRow = rowIndex === data.length - 1;
+      {rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === rows.length - 1;
 
         return (
           <View
@@ -143,27 +156,19 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
             ]}
           >
             {columns.map((column, colIndex) => {
+              const cell = row.find((c) => c.key === column.key);
               const isLastColumn = colIndex === columns.length - 1;
-              const align = column.align || 'left';
-
-              // Get cell content from column.cell function or fallback to row value
-              let cellContent: ReactNode;
-              if (column.cell) {
-                cellContent = column.cell({ row, index: rowIndex });
-              } else {
-                cellContent =
-                  ((row as Record<string, unknown>)[column.key] as ReactNode) ??
-                  '-';
-              }
+              const align = cell?.align || column.align || 'center';
 
               const cellStyle =
                 column.key === 'no'
-                  ? [styles.tableCellNo, { flex: column.flex || 1 }]
+                  ? [styles.tableCellNo, { flex: column.flex }]
                   : align === 'right'
                     ? [
                         styles.tableCellRight,
                         {
-                          flex: column.flex || 1,
+                          flex: column.flex,
+                          color: cell?.color || 'black',
                           borderRightWidth: isLastColumn ? 0 : 1,
                         },
                       ]
@@ -171,30 +176,37 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
                       ? [
                           styles.tableCellCenter,
                           {
-                            flex: column.flex || 1,
+                            flex: column.flex,
+                            color: cell?.color || 'black',
                             borderRightWidth: isLastColumn ? 0 : 1,
                           },
                         ]
                       : isLastColumn
                         ? [
                             styles.tableCellLast,
-                            { flex: column.flex || 1, borderRightWidth: 0 },
+                            { flex: column.flex, borderRightWidth: 0 },
                           ]
                         : [
                             styles.tableCell,
                             {
-                              flex: column.flex || 1,
+                              flex: column.flex,
+                              color: cell?.color || 'black',
                               borderRightWidth: isLastColumn ? 0 : 1,
                             },
                           ];
 
               return (
                 <View key={column.key} style={cellStyle}>
-                  {typeof cellContent === 'string' ||
-                  typeof cellContent === 'number' ? (
-                    <Text>{String(cellContent)}</Text>
+                  {cell?.value !== undefined &&
+                  cell?.value !== null &&
+                  cell?.value !== '' ? (
+                    typeof cell.value === 'object' ? (
+                      cell.value
+                    ) : (
+                      <Text>{String(cell.value)}</Text>
+                    )
                   ) : (
-                    cellContent
+                    <Text>-</Text>
                   )}
                 </View>
               );
@@ -205,5 +217,3 @@ export const PdfTbody = <TData = Record<string, unknown>,>({
     </>
   );
 };
-
-export type { PdfColumn };

src/components/helper/pdf/table/PdfTfoot.tsx

@@ -1,8 +1,21 @@
 'use client';
 
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import { ReactNode } from 'react';
-import type { PdfColumn } from './types';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface PdfTfootCell {
+  key: string;
+  value: string | number;
+  align?: 'left' | 'center' | 'right';
+  flex?: number;
+  color?: string;
+}
 
 const styles = StyleSheet.create({
   tableRow: {
@@ -56,86 +69,63 @@ const styles = StyleSheet.create({
   },
 });
 
-interface PdfTfootProps<TData = Record<string, unknown>> {
-  columns: PdfColumn<TData>[];
-  data: TData[];
+interface PdfTfootProps {
+  columns: PdfColumn[];
+  cells: PdfTfootCell[];
   label?: string;
 }
 
-export const PdfTfoot = <TData = Record<string, unknown>,>({
+export const PdfTfoot = ({
   columns,
-  data,
+  cells,
   label = 'Total',
-}: PdfTfootProps<TData>) => {
+}: PdfTfootProps) => {
   return (
     <View style={[styles.tableRow, styles.summaryRow]}>
       {columns.map((column, index) => {
         const isLastColumn = index === columns.length - 1;
-
-        // Get footer content from column definition
-        let footerContent: ReactNode;
-        if (typeof column.footer === 'function') {
-          footerContent = column.footer(data);
-        } else {
-          footerContent = column.footer;
-        }
-
-        // Use label for first column (usually 'no' column)
-        const displayContent = column.key === 'no' ? label : footerContent;
-
-        // Determine alignment
-        const align = column.footerAlign || column.align || 'left';
-        const color = column.footerColor || 'black';
+        const cellData = cells.find((c) => c.key === column.key);
 
         const cellStyle =
           column.key === 'no'
             ? [
                 styles.tableCellNo,
-                {
-                  flex: column.flex || 1,
-                  borderRightWidth: isLastColumn ? 0 : 1,
-                  color,
-                },
+                { flex: column.flex, borderRightWidth: isLastColumn ? 0 : 1 },
               ]
-            : align === 'right'
+            : cellData?.align === 'right'
               ? [
                   styles.tableCellRight,
                   {
-                    flex: column.flex || 1,
-                    color,
+                    flex: column.flex,
+                    color: cellData?.color || 'black',
                     borderRightWidth: isLastColumn ? 0 : 1,
                   },
                 ]
-              : align === 'center'
+              : cellData?.align === 'center'
                 ? [
                     styles.tableCellCenter,
                     {
-                      flex: column.flex || 1,
-                      color,
+                      flex: column.flex,
+                      color: cellData?.color || 'black',
                       borderRightWidth: isLastColumn ? 0 : 1,
                     },
                   ]
                 : isLastColumn
-                  ? [styles.tableCellLast, { flex: column.flex || 1, color }]
-                  : [styles.tableCell, { flex: column.flex || 1, color }];
+                  ? [styles.tableCellLast, { flex: column.flex }]
+                  : [
+                      styles.tableCell,
+                      {
+                        flex: column.flex,
+                        color: cellData?.color || 'black',
+                      },
+                    ];
 
         return (
           <View key={column.key} style={cellStyle}>
-            {displayContent !== undefined && displayContent !== null ? (
-              typeof displayContent === 'string' ||
-              typeof displayContent === 'number' ? (
-                <Text>{String(displayContent)}</Text>
-              ) : (
-                displayContent
-              )
-            ) : (
-              <Text>-</Text>
-            )}
+            <Text>{column.key === 'no' ? label : cellData?.value || ''}</Text>
           </View>
         );
       })}
     </View>
   );
 };
-
-export type { PdfColumn };

src/components/helper/pdf/table/PdfThead.tsx

@@ -1,8 +1,13 @@
 'use client';
 
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import { ReactNode } from 'react';
-import type { PdfColumn } from './types';
+
+export interface PdfColumn {
+  key: string;
+  header: string;
+  flex: number;
+  align?: 'left' | 'center' | 'right';
+}
 
 const styles = StyleSheet.create({
   tableRow: {
@@ -43,37 +48,23 @@ const styles = StyleSheet.create({
   },
 });
 
-interface PdfTheadProps<TData = Record<string, unknown>> {
-  columns: PdfColumn<TData>[];
-  data?: TData[];
+interface PdfTheadProps {
+  columns: PdfColumn[];
 }
 
-export const PdfThead = <TData = Record<string, unknown>,>({
-  columns,
-  data,
-}: PdfTheadProps<TData>) => {
+export const PdfThead = ({ columns }: PdfTheadProps) => {
   return (
     <View style={[styles.tableRow, styles.tableHeader]}>
       {columns.map((column, index) => {
+        const align = column.align || 'center';
         const isLastColumn = index === columns.length - 1;
 
-        // Get header content from column definition
-        let headerContent: ReactNode;
-        if (typeof column.header === 'function') {
-          headerContent = column.header(data || []);
-        } else {
-          headerContent = column.header || column.key;
-        }
-
-        // Determine alignment - columns align right by default for numeric data
-        const align = column.align || 'left';
-
         const cellStyle =
           align === 'right'
             ? [
                 styles.tableCellHeaderRight,
                 {
-                  flex: column.flex || 1,
+                  flex: column.flex,
                   textAlign: 'right' as const,
                   borderRightWidth: isLastColumn ? 0 : 1,
                 },
@@ -81,7 +72,7 @@ export const PdfThead = <TData = Record<string, unknown>,>({
             : [
                 styles.tableCellHeader,
                 {
-                  flex: column.flex || 1,
+                  flex: column.flex,
                   textAlign: align as 'left' | 'center' | 'right',
                   borderRightWidth: isLastColumn ? 0 : 1,
                 },
@@ -89,16 +80,10 @@ export const PdfThead = <TData = Record<string, unknown>,>({
 
         return (
           <View key={column.key} style={cellStyle}>
-            {typeof headerContent === 'string' ? (
-              <Text>{headerContent}</Text>
-            ) : (
-              headerContent
-            )}
+            <Text>{column.header}</Text>
           </View>
         );
       })}
     </View>
   );
 };
-
-export type { PdfColumn };

src/components/helper/pdf/table/index.ts

@@ -2,4 +2,6 @@ export { PdfTable } from './PdfTable';
 export { PdfThead } from './PdfThead';
 export { PdfTbody } from './PdfTbody';
 export { PdfTfoot } from './PdfTfoot';
-export type { PdfColumn } from './types';
+export type { PdfColumn } from './PdfThead';
+export type { PdfTbodyCell } from './PdfTbody';
+export type { PdfTfootCell } from './PdfTfoot';

src/components/helper/pdf/table/types.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-
-/**
- * PdfColumn - Mirip dengan ColumnDef di TanStack Table
- * Mengatur header (thead), body (tbody), dan footer (tfoot) dalam satu definisi
- */
-export interface PdfColumn<TData = Record<string, unknown>> {
-  key: string;
-  flex?: number;
-
-  // Header configuration (thead)
-  header?: string | ((data: TData[]) => ReactNode);
-
-  // Body configuration (tbody)
-  align?: 'left' | 'center' | 'right';
-  cell?: (props: { row: TData; index: number }) => ReactNode | string | number;
-
-  // Footer configuration (tfoot)
-  footer?: string | number | ((data: TData[]) => ReactNode | string | number);
-  footerAlign?: 'left' | 'center' | 'right';
-  footerColor?: string;
-}
-
-export type { PdfColumn as default };

src/components/helper/pdf/typography/PdfTypography.tsx

@@ -1,80 +0,0 @@
-import { Color } from '@/types/theme';
-import { Text, StyleSheet } from '@react-pdf/renderer';
-import type { Style } from '@react-pdf/types';
-
-type TypographySize = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'small' | 'label';
-
-type TypographyVariant = Color | 'default';
-
-type PdfTypographyProps = {
-  children: React.ReactNode;
-  size?: TypographySize;
-  variant?: TypographyVariant;
-  color?: string;
-  style?: Style;
-};
-
-const styles = StyleSheet.create({
-  h1: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    marginBottom: 5,
-  },
-  h2: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  h3: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    marginBottom: 4,
-  },
-  h4: {
-    fontSize: 9,
-    fontWeight: 'bold',
-    marginBottom: 3,
-  },
-  p: {
-    fontSize: 10,
-    marginBottom: 4,
-  },
-  small: {
-    fontSize: 8,
-    marginBottom: 2,
-  },
-  label: {
-    fontSize: 9,
-    marginBottom: 5,
-  },
-});
-
-const variantColors: Record<TypographyVariant, string> = {
-  default: '#333333',
-  primary: '#1f74bf',
-  secondary: '#6B7280',
-  accent: '#8B5CF6',
-  neutral: '#6B7280',
-  info: '#3B82F6',
-  success: '#065F46',
-  warning: '#92400E',
-  error: '#DC2626',
-  none: '#333333',
-};
-
-export const PdfTypography = ({
-  children,
-  size = 'p',
-  variant = 'default',
-  color,
-  style,
-}: PdfTypographyProps) => {
-  const sizeStyle = styles[size];
-  const textColor = color || variantColors[variant];
-
-  return (
-    <Text style={[sizeStyle, { color: textColor }, ...(style ? [style] : [])]}>
-      {children}
-    </Text>
-  );
-};

src/components/helper/pdf/utils/pdf-badge.ts

@@ -1,65 +0,0 @@
-export type StatusColor = {
-  bg: string;
-  text: string;
-  border: string;
-};
-
-// Due status colors (for debt supplier reports)
-export const dueStatusColors: Record<string, StatusColor> = {
-  'SUDAH JATUH TEMPO': {
-    bg: '#FEE2E2',
-    text: '#991B1B',
-    border: '#F87171',
-  }, // error/red
-  'BELUM JATUH TEMPO': {
-    bg: '#D1FAE5',
-    text: '#065F46',
-    border: '#34D399',
-  }, // success/green
-  'MENDEKATI JATUH TEMPO': {
-    bg: '#FEF3C7',
-    text: '#92400E',
-    border: '#FBBF24',
-  }, // warning/yellow
-};
-
-// Payment status colors (for customer payment & debt supplier reports)
-export const paymentStatusColors: Record<string, StatusColor> = {
-  'BELUM LUNAS': {
-    bg: '#FEF3C7',
-    text: '#92400E',
-    border: '#FBBF24',
-  }, // warning/yellow
-  LUNAS: {
-    bg: '#DBEAFE',
-    text: '#1E40AF',
-    border: '#60A5FA',
-  }, // primary/blue
-  'PEMBAYARAN SEBAGIAN': { bg: '#D1FAE5', text: '#065F46', border: '#34D399' }, // success/green
-  PEMBAYARAN: {
-    bg: '#D1FAE5',
-    text: '#065F46',
-    border: '#34D399',
-  }, // success/green
-};
-
-// Fallback color for unknown statuses
-export const fallbackStatusColor: StatusColor = {
-  bg: '#F3F4F6',
-  text: '#374151',
-  border: '#D1D5DB',
-}; // neutral
-
-export const getPDFBadgeStyle = (
-  statusText: string,
-  type: 'due' | 'payment' = 'payment'
-): StatusColor => {
-  const normalizedStatus = statusText.toUpperCase().trim();
-
-  const colors =
-    type === 'due'
-      ? dueStatusColors[normalizedStatus]
-      : paymentStatusColors[normalizedStatus];
-
-  return colors || fallbackStatusColor;
-};

src/components/helper/skeleton/DataStateSkeleton.tsx

@@ -1,4 +1,5 @@
 import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';
+import { Icon } from '@iconify/react';
 
 const DataStateSkeleton = ({
   icon,

src/components/input/DropFileInput.tsx

@@ -134,20 +134,14 @@ const DropFileInput: React.FC<DropFileInputProps> = ({
 
         {!isError && bottomLabel && (
           <p
-            className={cn(
-              'w-full mt-1.5 text-xs opacity-60',
-              className?.bottomLabel
-            )}
+            className={cn('w-full text-sm opacity-60', className?.bottomLabel)}
           >
             {bottomLabel}
           </p>
         )}
         {isError && (
           <p
-            className={cn(
-              'w-full mt-1.5 text-xs text-error',
-              className?.errorMessage
-            )}
+            className={cn('w-full text-sm text-error', className?.errorMessage)}
           >
             {errorMessage}
           </p>

src/components/input/NumberInput.tsx

@@ -35,9 +35,7 @@ const NumberInput = ({
       | undefined;
 
     if (newChangeEvent) {
-      newChangeEvent.target.value = parseFloat(
-        numberFormatValues.value
-      ) as unknown as string;
+      newChangeEvent.target.value = numberFormatValues.value;
 
       onChange?.(newChangeEvent);
     }

src/components/input/PatternInput.tsx

@@ -4,6 +4,7 @@ import { ChangeEvent } from 'react';
 import {
   PatternFormat,
   NumberFormatBase,
+  NumberFormatBaseProps,
   OnValueChange,
 } from 'react-number-format';
 import TextInput, { TextInputProps } from '@/components/input/TextInput';

src/components/input/RadioInput.tsx

@@ -144,12 +144,12 @@ export const RadioGroup = ({
 
         {/* Label bawah */}
         {!isError && bottomLabel && (
-          <p className='mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+          <p className='text-sm opacity-60'>{bottomLabel}</p>
         )}
 
         {/* Pesan error */}
         {isError && errorMessage && (
-          <p className='mt-1.5 text-xs text-error'>{errorMessage}</p>
+          <p className='text-sm text-error'>{errorMessage}</p>
         )}
       </div>
     </RadioGroupContext.Provider>

src/components/input/SelectInput.tsx

@@ -24,8 +24,8 @@ import {
 } from '@/types/api/api-general';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
-export interface OptionType<T = string | number> {
-  value: T;
+export interface OptionType {
+  value: string | number;
   label: string;
   className?: string;
   labelClassName?: string;
@@ -246,8 +246,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               className={cn(
                 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-base-100 border-base-content/10': !isDisabled,
-                  'bg-base-200 border-base-content/10': isDisabled,
+                  'bg-gray-100 border-base-content/10': !isDisabled,
+                  'bg-gray-50 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputPrefix
@@ -278,28 +278,28 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             className={cn('w-full flex-1', className?.select)}
             classNames={{
               control: ({ isFocused, isDisabled }) =>
-                cn('w-full border transition-shadow', 'rounded-lg!', {
-                  'bg-base-100!': !isDisabled && !readOnly,
-                  'bg-base-200! text-gray-400 cursor-not-allowed':
+                cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
+                  'cursor-pointer!': !readOnly && !isDisabled,
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment,
+                  'border-base-content/10!': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed':
                     isDisabled && !readOnly,
                   'bg-transparent! cursor-not-allowed!': readOnly,
-                  'cursor-pointer!': !readOnly && !isDisabled,
-                  'border-error!': isError,
-                  'ring-2 ring-error/20': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200':
-                    isFocused && !startAdornment && !isError,
-                  'border-base-content/10!': !isError && !isFocused,
                   'rounded-l-none!': inputPrefix && !startAdornment,
                   'rounded-r-none!': inputSuffix && !startAdornment,
                 }),
               valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
               placeholder: () =>
-                cn('text-gray-400 text-sm leading-tight', {
-                  'text-error!': isError,
+                cn({
+                  'text-gray-400 text-sm leading-tight': !isError,
+                  'text-red-300!': isError,
                 }),
               singleValue: () =>
-                cn('m-0! text-gray-900 text-sm leading-tight', {
-                  'text-error!': isError && !readOnly,
+                cn({
+                  'm-0! text-gray-900 text-sm leading-tight': !isError,
+                  'text-error!': isError,
                   'text-gray-900!': readOnly,
                 }),
               input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
@@ -370,8 +370,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               className={cn(
                 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-base-100 border-base-content/10': !isDisabled,
-                  'bg-base-200 border-base-content/10': isDisabled,
+                  'bg-gray-100 border-base-content/10': !isDisabled,
+                  'bg-gray-50 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputSuffix
@@ -403,26 +403,31 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           className={cn('w-full', className?.select)}
           classNames={{
             control: ({ isFocused, isDisabled }) =>
-              cn('w-full border transition-shadow rounded-lg!', {
-                'bg-base-100!': !isDisabled && !readOnly,
-                'bg-base-200! text-gray-400 cursor-not-allowed':
-                  isDisabled && !readOnly,
-                'bg-transparent! cursor-not-allowed!': readOnly,
-                'cursor-pointer!': !readOnly && !isDisabled,
-                'border-error!': isError,
-                'ring-2 ring-error/20': isError,
-                'border-indigo-500 ring-2 ring-indigo-200':
-                  isFocused && !startAdornment && !isError,
-                'border-base-content/10!': !isError && !isFocused,
-              }),
+              cn(
+                'w-full border bg-white transition-shadow',
+                // Gunakan rounded-lg untuk semua kasus
+                'rounded-lg!',
+                {
+                  'cursor-pointer!': !readOnly && !isDisabled,
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment,
+                  'border-base-content/10!': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
+                }
+              ),
             valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
             placeholder: () =>
-              cn('text-gray-400 text-sm leading-tight', {
-                'text-error!': isError,
+              cn({
+                'text-gray-400 text-sm leading-tight': !isError,
+                'text-red-300!': isError,
               }),
             singleValue: () =>
-              cn('m-0! text-gray-900 text-sm leading-tight', {
-                'text-error!': isError && !readOnly,
+              cn({
+                'm-0! text-gray-900 text-sm leading-tight': !isError,
+                'text-error!': isError,
                 'text-gray-900!': readOnly,
               }),
             input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
@@ -488,11 +493,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         />
       )}
 
-      {isError && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
-      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );
@@ -523,7 +526,7 @@ const useSelect = <T,>(
 
     const qs = new URLSearchParams({
       ...(params ?? {}),
-      [searchKey ? searchKey : 'search']: inputValue ?? '',
+      [searchKey]: inputValue ?? '',
       [pageKey]: String(pageIndex + 1),
       [limitKey]: String(limit),
     }).toString();
@@ -566,31 +569,23 @@ const useSelect = <T,>(
     setSize(size + 1);
   };
 
+  let formattedSuccessRawData: SuccessApiResponse<T[]> | undefined = undefined;
+  let formattedErrorRawData: ErrorApiResponse | undefined = undefined;
+
   const latestPagesIndex = pages?.length ? pages.length - 1 : 0;
 
-  const { formattedSuccessRawData, formattedErrorRawData } = useMemo(() => {
-    let successData: SuccessApiResponse<T[]> | undefined = undefined;
-    let errorData: ErrorApiResponse | undefined = undefined;
-
-    if (isResponseSuccess(pages?.[latestPagesIndex])) {
-      successData = {
-        ...pages![latestPagesIndex],
-        data:
-          pages?.flatMap((page) =>
-            isResponseSuccess(page) ? page.data : []
-          ) ?? [],
-      };
-    }
-
-    if (isResponseError(pages?.[latestPagesIndex])) {
-      errorData = pages![latestPagesIndex];
-    }
-
-    return {
-      formattedSuccessRawData: successData,
-      formattedErrorRawData: errorData,
+  if (isResponseSuccess(pages?.[latestPagesIndex])) {
+    formattedSuccessRawData = {
+      ...pages?.[latestPagesIndex],
+      data:
+        pages?.flatMap((page) => (isResponseSuccess(page) ? page.data : [])) ??
+        [],
     };
-  }, [pages, latestPagesIndex]);
+  }
+
+  if (isResponseError(pages?.[latestPagesIndex])) {
+    formattedErrorRawData = pages?.[latestPagesIndex];
+  }
 
   return {
     inputValue,

src/components/input/TagInput.tsx

@@ -159,11 +159,9 @@ const TagInput: React.FC<TagInputProps> = ({
 
       {/* Bottom label or error message */}
       {!isError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };

src/components/input/TextInput.tsx

@@ -104,8 +104,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-base-100 border-base-content/10': !disabled,
-                  'bg-base-200 border-base-content/10': disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -118,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
+              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -126,8 +126,7 @@ const TextInput = ({
                 'rounded-r-none!': inputSuffix,
                 'input-disabled': disabled,
                 'cursor-not-allowed': disabled,
-                'bg-base-100': !disabled,
-                'bg-base-200': disabled,
+                'bg-gray-50': disabled,
               },
               className?.inputWrapper
             )}
@@ -168,8 +167,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-base-100 border-base-content/10': !disabled,
-                  'bg-base-200 border-base-content/10': disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -183,12 +182,10 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
+            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
-              'bg-base-100': !disabled,
-              'bg-base-200': disabled,
             },
             className?.inputWrapper
           )}
@@ -204,14 +201,7 @@ const TextInput = ({
             onChange={onChange}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn(
-              'grow bg-transparent outline-none',
-              {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              },
-              className?.input
-            )}
+            className={cn('grow', className?.input)}
             readOnly={readOnly}
           />
 

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -56,7 +56,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       closeOnBackdrop={closeOnBackdrop}
       primaryButton={{
         ...primaryButton,
-        onClick: () => {
+        onClick: (e) => {
           if (primaryButton && primaryButton?.onClick) {
             primaryButton?.onClick?.(notes);
           } else {

src/components/pages/closing/ClosingDetail.tsx

@@ -5,23 +5,28 @@ import { useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
-import ClosingGeneralInformationTable from '@/components/pages/closing/table/ClosingGeneralInformationTable';
-import SapronakClosingTab from '@/components/pages/closing/tab/SapronakClosingTab';
-import ProductionDataClosingTab from '@/components/pages/closing/tab/ProductionDataClosingTab';
+import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
+import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
 
-import { ClosingGeneralInformation } from '@/types/api/closing';
-import SapronakCalculationClosingTab from '@/components/pages/closing/tab/SapronakCalculationClosingTab';
-import OverheadClosingTab from '@/components/pages/closing/tab/OverheadClosingTab';
-import FinanceClosingTab from '@/components/pages/closing/tab/FinanceClosingTab';
-import SalesClosingTab from '@/components/pages/closing/tab/SalesClosingTab';
-import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditionClosingTab';
+import {
+  ClosingGeneralInformation,
+  BaseClosingSales,
+  ClosingHppExpedition,
+} from '@/types/api/closing';
+import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
+import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
+import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
+import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
+import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
 import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
+  salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
   projectData?: ProjectFlock;
   kandangData?: ProjectFlockKandang;
 }
@@ -29,24 +34,25 @@ interface ClosingDetailProps {
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
+  salesData,
+  hppExpeditionData,
   projectData,
   kandangData,
 }) => {
-  const [activeTabId, setActiveTabId] = useState<string>('sapronak');
-  const tabActions = useTabActionsStore((state) => state.tabActions);
+  const [activeTab, setActiveTab] = useState<string>('sapronak');
 
   const closingDetailTabs = useMemo(() => {
     const validTabs = [
       {
         id: 'sapronak',
         label: 'Sapronak',
-        content: <SapronakClosingTab projectFlockId={id} />,
+        content: <ClosingSapronakTabContent projectFlockId={id} />,
       },
       {
         id: 'perhitunganSapronak',
         label: 'Perhitungan Sapronak',
         content: (
-          <SapronakCalculationClosingTab
+          <ClosingSapronakCalculationTabContent
             closingGeneralInformation={initialValue}
             projectFlockId={id}
           />
@@ -55,13 +61,13 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'penjualan',
         label: 'Penjualan',
-        content: <SalesClosingTab projectFlockId={id} />,
+        content: <SalesReportTable initialValues={salesData} />,
       },
       {
         id: 'overhead',
         label: 'Overhead',
         content: (
-          <OverheadClosingTab
+          <ClosingOverheadTabContent
             projectFlockId={id}
             generalInformation={initialValue}
             kandangData={kandangData}
@@ -71,26 +77,26 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: <HppExpeditionClosingTab projectFlockId={id} />,
+        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
       },
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: <ProductionDataClosingTab projectFlockId={id} />,
+        content: <ClosingProductionDataTabContent projectFlockId={id} />,
       },
       {
         id: 'keuangan',
         label: 'Keuangan',
-        content: <FinanceClosingTab projectFlockId={id} />,
+        content: <ClosingFinanceTabContent projectFlockId={id} />,
       },
     ];
 
     return validTabs;
-  }, [initialValue, kandangData, id]);
+  }, [initialValue]);
 
   return (
     <>
-      <section className='w-full'>
+      <section className='w-full max-w-7xl pb-16'>
         <header className='flex flex-col gap-4'>
           <Button
             href={
@@ -112,24 +118,21 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           kandangData={kandangData}
         />
 
-        <ClosingKandangList
-          initialValue={initialValue}
-          projectData={projectData}
-          selectedKandangId={kandangData?.id}
-        />
+        {!kandangData && (
+          <ClosingKandangList
+            initialValue={initialValue}
+            projectData={projectData}
+          />
+        )}
 
         <Tabs
-          activeTabId={activeTabId}
-          onTabChange={setActiveTabId}
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
           tabs={closingDetailTabs}
-          variant='boxed'
+          variant='lifted'
           className={{
-            tabHeaderWrapper:
-              'relative justify-between items-center py-3 before:absolute before:top-0 before:left-0 before:right-0 before:-mx-4 before:border-t before:border-base-content/10 after:absolute after:bottom-0 after:left-0 after:right-0 after:-mx-4 after:border-b after:border-base-content/10',
-            tab: 'w-fit',
-            content: 'p-0 m-0',
+            wrapper: 'w-full mt-4',
           }}
-          sideContent={tabActions[activeTabId] || null}
         />
       </section>
     </>

src/components/pages/closing/ClosingFinanceTabContent.tsx

@@ -0,0 +1,17 @@
+import ClosingFinanceTable from '@/components/pages/closing/ClosingFinanceTable';
+
+const ClosingFinanceTabContent = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <ClosingFinanceTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default ClosingFinanceTabContent;

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -0,0 +1,399 @@
+import Card from '@/components/Card';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import { ClosingApi } from '@/services/api/closing';
+import { HppItem, ProfitLossItem } from '@/types/api/closing';
+import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+const ClosingFinanceTable = ({
+  projectFlockId,
+}: {
+  projectFlockId: number;
+}) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const { data: finance, isLoading } = useSWR(
+    `/closing/finance/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
+    () =>
+      ClosingApi.getFinance(
+        projectFlockId,
+        kandangId ? Number(kandangId) : undefined
+      )
+  );
+
+  const hppTableData: HppItem[] = useMemo(() => {
+    if (isResponseSuccess(finance)) {
+      const customItems = {
+        label: 'HPP dan Pengeluaran',
+        code: 'custom_row',
+      } as HppItem;
+      const purchases = finance.data.hpp.items.filter(
+        (item) => item.category === 'purchase'
+      );
+      const totalBudgeting = {
+        label: 'HPP dan Bahan Baku',
+        code: 'custom_row',
+      } as HppItem;
+      const overheads = finance.data.hpp.items.filter(
+        (item) => item.category === 'overhead'
+      );
+      return [customItems, ...purchases, totalBudgeting, ...overheads];
+    }
+    return [];
+  }, [finance]);
+
+  const profitLossTableData: ProfitLossItem[] = useMemo(() => {
+    if (isResponseSuccess(finance)) {
+      const incomes = finance.data.profit_loss.items.filter(
+        (item) => item.type === 'income'
+      );
+      const purchases = finance.data.profit_loss.items.filter(
+        (item) => item.type === 'purchase'
+      );
+      const overheads = finance.data.profit_loss.items.filter(
+        (item) => item.type === 'overhead'
+      );
+      const grossProfit = {
+        label: 'LABA RUGI BRUTO',
+        code: 'custom_row',
+        type: 'gross_profit',
+        rp_per_bird:
+          finance.data.profit_loss.summary.gross_profit.rp_per_bird ?? 0,
+        rp_per_kg: finance.data.profit_loss.summary.gross_profit.rp_per_kg ?? 0,
+        amount: finance.data.profit_loss.summary.gross_profit.amount ?? 0,
+      } as ProfitLossItem;
+      const subtotal = {
+        label: 'Subtotal',
+        code: 'custom_row',
+        type: 'subtotal',
+        rp_per_bird:
+          finance.data.profit_loss.summary.sub_total.rp_per_bird ?? 0,
+        rp_per_kg: finance.data.profit_loss.summary.sub_total.rp_per_kg ?? 0,
+        amount: finance.data.profit_loss.summary.sub_total.amount ?? 0,
+      } as ProfitLossItem;
+      return [...incomes, ...purchases, grossProfit, ...overheads, subtotal];
+    }
+    return [];
+  }, [finance]);
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-6'>
+            <div className='flex flex-col gap-1'>
+              <div>Laba Rugi Brutto</div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.summary.gross_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+            <div className='flex flex-col gap-1'>
+              <div>Laba Rugi Netto</div>
+              <div className='text-lg font-bold'>
+                {isResponseSuccess(finance)
+                  ? formatCurrency(
+                      finance.data.profit_loss.summary.net_profit.amount
+                    )
+                  : '-'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title='HPP Purchases'
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<HppItem>
+              data={hppTableData}
+              isLoading={isLoading}
+              columns={[
+                {
+                  header: 'No.',
+                  enableSorting: false,
+                  accessorFn: (item, index) => {
+                    if (item.code === 'custom_row') return '-';
+                    const dataRowsBefore = hppTableData
+                      .slice(0, index)
+                      .filter((row) => row.code !== 'custom_row').length;
+                    return dataRowsBefore + 1;
+                  },
+                  footer: (props) => {
+                    return 'HPP';
+                  },
+                },
+                {
+                  header: 'Jenis',
+                  enableSorting: false,
+                  accessorFn: (item) => formatTitleCase(item.label || '-'),
+                },
+                {
+                  header: 'Budgeting',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'budgeting_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp.summary?.budgeting
+                                ?.rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'budgeting_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp.summary?.budgeting?.rp_per_kg ||
+                                0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'budgeting_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.budgeting?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'budgeting_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp.summary?.budgeting?.amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+                {
+                  header: 'Realization',
+                  enableSorting: false,
+                  columns: [
+                    {
+                      header: 'Rp/Ekor',
+                      id: 'realization_rp_per_bird',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_bird || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_bird' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp.summary?.realization
+                                ?.rp_per_bird || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Rp/Kg',
+                      id: 'realization_rp_per_kg',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.rp_per_kg || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_rp_per_kg' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp.summary?.realization
+                                ?.rp_per_kg || 0
+                            )
+                          : '-';
+                      },
+                    },
+                    {
+                      header: 'Jumlah (Rp)',
+                      id: 'realization_amount',
+                      enableSorting: false,
+                      accessorFn: (item) =>
+                        formatCurrency(item.realization?.amount || 0),
+                      footer: (props) => {
+                        return props.column.id === 'realization_amount' &&
+                          isResponseSuccess(finance)
+                          ? formatCurrency(
+                              finance.data.hpp.summary?.realization?.amount || 0
+                            )
+                          : '-';
+                      },
+                    },
+                  ],
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.code === 'custom_row') {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                    >
+                      <td
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      ></td>
+                      <td
+                        colSpan={7}
+                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
+                      >
+                        <div className='font-bold'>
+                          {formatTitleCase(rowData.label ?? '-')}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+        <Card
+          title='Profit/Loss'
+          variant='bordered'
+          collapsible
+          className={{
+            wrapper: 'w-full',
+          }}
+        >
+          <div className='mt-6 p-0 mb-0'>
+            <Table<ProfitLossItem>
+              data={profitLossTableData}
+              isLoading={isLoading}
+              columns={[
+                {
+                  header: 'Jenis',
+                  enableSorting: false,
+                  accessorFn: (item) => item.label,
+                  cell: (item) => (
+                    <div className=''>
+                      {formatTitleCase(item.row.original.label || '-')}
+                    </div>
+                  ),
+                  footer: () => (
+                    <div className='font-bold uppercase'>LABA RUGI NETTO</div>
+                  ),
+                },
+                {
+                  header: 'Rp/Ekor',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
+                  footer: () => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.summary.net_profit
+                              .rp_per_bird || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Rp/Kg',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
+                  footer: () => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.summary.net_profit
+                              .rp_per_kg || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Jumlah (Rp)',
+                  enableSorting: false,
+                  accessorFn: (item) => formatCurrency(item.amount || 0),
+                  footer: () => (
+                    <div className='font-bold'>
+                      {isResponseSuccess(finance)
+                        ? formatCurrency(
+                            finance.data.profit_loss.summary.net_profit
+                              .amount || 0
+                          )
+                        : formatCurrency(0)}
+                    </div>
+                  ),
+                },
+              ]}
+              renderCustomRow={(row) => {
+                const rowData = row.original;
+                if (rowData.code === 'custom_row') {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={TABLE_DEFAULT_STYLING.footerRowClassName}
+                    >
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold ps-6 uppercase'>
+                          {formatTitleCase(rowData.label ?? '-')}
+                        </div>
+                      </td>
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold'>
+                          {formatCurrency(rowData.rp_per_bird ?? 0)}
+                        </div>
+                      </td>
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold'>
+                          {formatCurrency(rowData.rp_per_kg ?? 0)}
+                        </div>
+                      </td>
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold'>
+                          {formatCurrency(rowData.amount ?? 0)}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                }
+                return null;
+              }}
+              className={{
+                paginationClassName: 'hidden',
+              }}
+              renderFooter={isResponseSuccess(finance)}
+            />
+          </div>
+        </Card>
+      </>
+    </div>
+  );
+};
+
+export default ClosingFinanceTable;

src/components/pages/closing/ClosingIncomingSapronaksSummaryTable.tsx

@@ -1,20 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
+import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
-import Badge from '@/components/Badge';
+import Collapse from '@/components/Collapse';
 
 import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingIncomingSapronakSummary } from '@/types/api/closing';
-import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';
 
 interface ClosingIncomingSapronaksSummaryTableProps {
   projectFlockId: number;
@@ -55,60 +55,20 @@ const ClosingIncomingSapronaksSummaryTable = ({
     }
   );
 
+  const [open, setOpen] = useState(true);
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
   const incomingSapronaksColumns: ColumnDef<ClosingIncomingSapronakSummary>[] =
     [
       {
-        header: 'No',
+        header: '#',
         cell: (props) => props.row.index + 1,
       },
       {
         accessorKey: 'category',
         header: 'Kategori',
-        cell: (props) => {
-          const categories = props.row.original.category
-            .split(' ')
-            .filter((cat) => cat.trim());
-          const maxBadges = 4;
-          const visibleCategories = categories.slice(0, maxBadges);
-          const remainingCount = categories.length - maxBadges;
-
-          return (
-            <div className='flex flex-wrap gap-1 whitespace-nowrap'>
-              {visibleCategories.map((category, index) => (
-                <Badge
-                  key={index}
-                  variant='soft'
-                  className={{
-                    badge: cn(
-                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
-                    ),
-                  }}
-                  title={category}
-                >
-                  {category.length > 12
-                    ? `${category.slice(0, 12)}...`
-                    : category}
-                </Badge>
-              ))}
-              {remainingCount > 0 && (
-                <Badge
-                  variant='soft'
-                  className={{
-                    badge: cn(
-                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
-                    ),
-                  }}
-                  title={categories.join(' ')}
-                >
-                  +{remainingCount}
-                </Badge>
-              )}
-            </div>
-          );
-        },
       },
       {
         accessorKey: 'total_qty',
@@ -118,6 +78,10 @@ const ClosingIncomingSapronaksSummaryTable = ({
       },
     ];
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   // track sorting
   useEffect(() => {
     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
@@ -129,35 +93,44 @@ const ClosingIncomingSapronaksSummaryTable = ({
     }
   }, [sorting, updateFilter]);
 
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(incomingSapronakSummaries)
+          ? incomingSapronakSummaries.data.length > 0
+          : false
+      );
+    }
+  }, [incomingSapronakSummaries, isResponseSuccess]);
+
   return (
-    <div className='w-full'>
-      <Card
-        className={{
-          wrapper: 'w-full rounded-lg',
-          body: 'p-0',
-          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-          collapsible: 'rounded-lg',
-        }}
-        variant='bordered'
-        title='Ringkasan Sapronak Masuk'
-        collapsible
-        defaultCollapsed={false}
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Ringkasan Sapronak Masuk</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
       >
-        {isLoadingIncomingSapronakSummaries ? (
-          <SapronakClosingSkeleton
-            type='incoming'
-            columns={incomingSapronaksColumns}
-          />
-        ) : isResponseSuccess(incomingSapronakSummaries) &&
-          incomingSapronakSummaries.data.length === 0 ? (
-          <SapronakClosingSkeleton
-            type='incoming'
-            columns={incomingSapronaksColumns}
-            iconName='heroicons:chart-bar'
-            title='Ringkasan Sapronak Masuk Tidak Ditemukan'
-            subtitle='Tidak ada ringkasan sapronak masuk untuk periode ini.'
-          />
-        ) : (
+        <div className='w-full p-0'>
           <Table<ClosingIncomingSapronakSummary>
             data={
               isResponseSuccess(incomingSapronakSummaries)
@@ -185,21 +158,16 @@ const ClosingIncomingSapronaksSummaryTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-5!',
-              tableWrapperClassName:
-                'overflow-x-auto rounded-tr-none rounded-tl-none',
-              tableClassName: 'w-full table-auto text-sm',
-              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
-              headerColumnClassName:
-                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
-              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
-              bodyColumnClassName:
-                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(incomingSapronakSummaries) &&
+                  incomingSapronakSummaries?.data?.length === 0,
+              }),
             }}
           />
-        )}
-      </Card>
-    </div>
+        </div>
+      </Collapse>
+    </Card>
   );
 };
 

src/components/pages/closing/ClosingIncomingSapronaksTable.tsx

@@ -9,14 +9,13 @@ import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
-import Badge from '@/components/Badge';
+import Collapse from '@/components/Collapse';
 
 import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingIncomingSapronak } from '@/types/api/closing';
-import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';
 
 interface ClosingIncomingSapronaksTableProps {
   projectFlockId: number;
@@ -52,12 +51,14 @@ const ClosingIncomingSapronaksTable = ({
       ClosingApi.getAllIncomingSapronakFetcher
     );
 
+  const [open, setOpen] = useState(true);
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
   const incomingSapronaksColumns: ColumnDef<ClosingIncomingSapronak>[] = [
     {
-      header: 'No',
+      header: '#',
       cell: (props) => props.row.index + 1,
     },
     {
@@ -80,48 +81,6 @@ const ClosingIncomingSapronaksTable = ({
     {
       accessorKey: 'product_category',
       header: 'Kategori Produk',
-      cell: (props) => {
-        const categories = props.row.original.product_category
-          .split(' ')
-          .filter((cat) => cat.trim());
-        const maxBadges = 4;
-        const visibleCategories = categories.slice(0, maxBadges);
-        const remainingCount = categories.length - maxBadges;
-
-        return (
-          <div className='flex flex-wrap gap-1 whitespace-nowrap'>
-            {visibleCategories.map((category, index) => (
-              <Badge
-                key={index}
-                variant='soft'
-                className={{
-                  badge: cn(
-                    'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
-                  ),
-                }}
-                title={category}
-              >
-                {category.length > 12
-                  ? `${category.slice(0, 12)}...`
-                  : category}
-              </Badge>
-            ))}
-            {remainingCount > 0 && (
-              <Badge
-                variant='soft'
-                className={{
-                  badge: cn(
-                    'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
-                  ),
-                }}
-                title={categories.join(' ')}
-              >
-                +{remainingCount}
-              </Badge>
-            )}
-          </div>
-        );
-      },
     },
     {
       accessorKey: 'source_warehouse',
@@ -158,59 +117,56 @@ const ClosingIncomingSapronaksTable = ({
     }
   }, [sorting, updateFilter]);
 
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(incomingSapronaks)
+          ? incomingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [incomingSapronaks, isResponseSuccess]);
+
   return (
-    <div className='w-full pt-3'>
-      <Card
-        className={{
-          wrapper: 'w-full rounded-lg',
-          body: 'p-0',
-          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-          collapsible: 'rounded-lg',
-        }}
-        variant='bordered'
-        title='Sapronak Masuk'
-        collapsible
-        defaultCollapsed={false}
-      >
-        <div className='flex flex-col gap-2 my-4'>
-          <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
-            <DebouncedTextInput
-              name='search'
-              placeholder='Cari Sapronak Masuk'
-              value={tableFilterState.search}
-              onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Masuk</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
             />
           </div>
-        </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Masuk'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
 
-        {isLoadingIncomingSapronaks ? (
-          <SapronakClosingSkeleton
-            type='incoming'
-            columns={incomingSapronaksColumns}
-          />
-        ) : isResponseSuccess(incomingSapronaks) &&
-          incomingSapronaks.data.length === 0 ? (
-          <SapronakClosingSkeleton
-            type='incoming'
-            columns={incomingSapronaksColumns}
-            iconName='heroicons:chart-bar'
-            title='Data Sapronak Masuk Tidak Ditemukan'
-            subtitle='Tidak ada data sapronak masuk untuk periode ini.'
-          />
-        ) : (
           <Table<ClosingIncomingSapronak>
             data={
               isResponseSuccess(incomingSapronaks)
@@ -238,21 +194,16 @@ const ClosingIncomingSapronaksTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-5!',
-              tableWrapperClassName:
-                'overflow-x-auto rounded-tr-none rounded-tl-none',
-              tableClassName: 'w-full table-auto text-sm',
-              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
-              headerColumnClassName:
-                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
-              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
-              bodyColumnClassName:
-                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(incomingSapronaks) &&
+                  incomingSapronaks?.data?.length === 0,
+              }),
             }}
           />
-        )}
-      </Card>
-    </div>
+        </div>
+      </Collapse>
+    </Card>
   );
 };
 

src/components/pages/closing/ClosingKandangList.tsx

@@ -5,28 +5,23 @@ import { ProjectFlock } from '@/types/api/production/project-flock';
 const ClosingKandangList = ({
   initialValue,
   projectData,
-  selectedKandangId,
 }: {
   initialValue?: ClosingGeneralInformation;
   projectData?: ProjectFlock;
-  selectedKandangId?: number;
 }) => {
   return (
-    <div className='w-full py-3 @container relative before:absolute before:top-0 before:left-0 before:right-0 before:-mx-4 before:border-t before:border-base-content/10'>
+    <div className='w-full my-4 @container'>
       <div className='flex flex-col @sm:flex-row gap-4'>
         <div className='w-full'>
           <div className='overflow-x-auto'>
-            <h1 className='font-bold mb-3'>Kandang</h1>
-            <div className='flex flex-wrap gap-2'>
+            <h1 className='font-bold my-4'>Kandang</h1>
+            <div className='flex flex-wrap gap-2 mb-4'>
               {projectData?.kandangs?.map((kandang) => (
                 <Button
                   key={kandang.id}
                   variant='outline'
-                  className='px-3 py-2.5 w-fit text-sm rounded-lg shadow-sm'
                   href={`/closing/detail/?closingId=${initialValue?.flock_id}&kandangId=${kandang.project_flock_kandang_id}`}
-                  disabled={
-                    selectedKandangId === kandang.project_flock_kandang_id
-                  }
+                  className='min-w-32'
                 >
                   {kandang.name}
                 </Button>

src/components/pages/closing/ClosingOutgoingSapronaksSummaryTable.tsx

@@ -1,20 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
+import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
-import Badge from '@/components/Badge';
+import Collapse from '@/components/Collapse';
 
 import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ClosingApi } from '@/services/api/closing';
 import { ClosingOutgoingSapronakSummary } from '@/types/api/closing';
-import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';
 
 interface ClosingOutgoingSapronaksSummaryTableProps {
   projectFlockId: number;
@@ -55,60 +55,20 @@ const ClosingOutgoingSapronaksSummaryTable = ({
     }
   );
 
+  const [open, setOpen] = useState(true);
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
   const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronakSummary>[] =
     [
       {
-        header: 'No',
+        header: '#',
         cell: (props) => props.row.index + 1,
       },
       {
         accessorKey: 'category',
         header: 'Kategori',
-        cell: (props) => {
-          const categories = props.row.original.category
-            .split(' ')
-            .filter((cat) => cat.trim());
-          const maxBadges = 4;
-          const visibleCategories = categories.slice(0, maxBadges);
-          const remainingCount = categories.length - maxBadges;
-
-          return (
-            <div className='flex flex-wrap gap-1 whitespace-nowrap'>
-              {visibleCategories.map((category, index) => (
-                <Badge
-                  key={index}
-                  variant='soft'
-                  className={{
-                    badge: cn(
-                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/5 whitespace-nowrap'
-                    ),
-                  }}
-                  title={category}
-                >
-                  {category.length > 12
-                    ? `${category.slice(0, 12)}...`
-                    : category}
-                </Badge>
-              ))}
-              {remainingCount > 0 && (
-                <Badge
-                  variant='soft'
-                  className={{
-                    badge: cn(
-                      'px-2 py-1 flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content bg-base-content/20'
-                    ),
-                  }}
-                  title={categories.join(' ')}
-                >
-                  +{remainingCount}
-                </Badge>
-              )}
-            </div>
-          );
-        },
       },
       {
         accessorKey: 'total_qty',
@@ -118,6 +78,10 @@ const ClosingOutgoingSapronaksSummaryTable = ({
       },
     ];
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   // track sorting
   useEffect(() => {
     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
@@ -129,35 +93,44 @@ const ClosingOutgoingSapronaksSummaryTable = ({
     }
   }, [sorting, updateFilter]);
 
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(outgoingSapronakSummaries)
+          ? outgoingSapronakSummaries.data.length > 0
+          : false
+      );
+    }
+  }, [outgoingSapronakSummaries, isResponseSuccess]);
+
   return (
-    <div className='w-full'>
-      <Card
-        className={{
-          wrapper: 'w-full rounded-lg border-none',
-          body: 'p-0',
-          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-          collapsible: 'rounded-lg',
-        }}
-        variant='bordered'
-        title='Ringkasan Sapronak Keluar'
-        collapsible
-        defaultCollapsed={false}
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Ringkasan Sapronak Keluar</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
       >
-        {isLoadingOutgoingSapronakSummaries ? (
-          <SapronakClosingSkeleton
-            type='outgoing'
-            columns={outgoingSapronaksColumns}
-          />
-        ) : isResponseSuccess(outgoingSapronakSummaries) &&
-          outgoingSapronakSummaries.data.length === 0 ? (
-          <SapronakClosingSkeleton
-            type='outgoing'
-            columns={outgoingSapronaksColumns}
-            iconName='heroicons:chart-bar'
-            title='Ringkasan Sapronak Keluar Tidak Ditemukan'
-            subtitle='Tidak ada ringkasan sapronak keluar untuk periode ini.'
-          />
-        ) : (
+        <div className='w-full p-0'>
           <Table<ClosingOutgoingSapronakSummary>
             data={
               isResponseSuccess(outgoingSapronakSummaries)
@@ -185,21 +158,16 @@ const ClosingOutgoingSapronaksSummaryTable = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             className={{
-              containerClassName: 'w-full mb-5!',
-              tableWrapperClassName:
-                'overflow-x-auto rounded-tr-none rounded-tl-none',
-              tableClassName: 'w-full table-auto text-sm',
-              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
-              headerColumnClassName:
-                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
-              bodyRowClassName: 'hover:bg-gray-50 transition-colors',
-              bodyColumnClassName:
-                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(outgoingSapronakSummaries) &&
+                  outgoingSapronakSummaries?.data?.length === 0,
+              }),
             }}
           />
-        )}
-      </Card>
-    </div>
+        </div>
+      </Collapse>
+    </Card>
   );
 };
 

src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingOutgoingSapronak } from '@/types/api/closing';
+
+interface ClosingOutgoingSapronaksTableProps {
+  projectFlockId: number;
+}
+
+const ClosingOutgoingSapronaksTable = ({
+  projectFlockId,
+}: ClosingOutgoingSapronaksTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
+    useSWR(
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
+      ClosingApi.getAllOutgoingSapronakFetcher
+    );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronak>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'reference_number',
+      header: 'No. Referensi',
+    },
+    {
+      accessorKey: 'transaction_type',
+      header: 'Jenis Transaksi',
+    },
+    {
+      accessorKey: 'product_name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori Produk',
+    },
+    {
+      accessorKey: 'source_warehouse',
+      header: 'Gudang Asal',
+    },
+    {
+      accessorKey: 'destination_warehouse',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+      cell: (props) =>
+        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Keterangan',
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(outgoingSapronaks)
+          ? outgoingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [outgoingSapronaks, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Keluar</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Keluar'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<ClosingOutgoingSapronak>
+            data={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.data
+                : []
+            }
+            columns={outgoingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingOutgoingSapronaks}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(outgoingSapronaks) &&
+                  outgoingSapronaks?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingOutgoingSapronaksTable;

src/components/pages/closing/ClosingOverheadTabContent.tsx

@@ -1,22 +1,22 @@
-import OverheadClosingTable from '@/components/pages/closing/table/OverheadClosingTable';
+import ClosingOverheadTable from '@/components/pages/closing/ClosingOverheadTable';
 import { ClosingGeneralInformation } from '@/types/api/closing';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
-interface OverheadClosingTabProps {
+interface ClosingOverheadTabContentProps {
   projectFlockId: number;
   generalInformation?: ClosingGeneralInformation;
   kandangData?: ProjectFlockKandang;
 }
 
-const OverheadClosingTab = ({
+const ClosingOverheadTabContent = ({
   projectFlockId,
   generalInformation,
   kandangData,
-}: OverheadClosingTabProps) => {
+}: ClosingOverheadTabContentProps) => {
   return (
     <div className='flex flex-col gap-4'>
       {projectFlockId && (
-        <OverheadClosingTable
+        <ClosingOverheadTable
           projectFlockId={projectFlockId}
           generalInformation={generalInformation}
           kandangData={kandangData}
@@ -26,4 +26,4 @@ const OverheadClosingTab = ({
   );
 };
 
-export default OverheadClosingTab;
+export default ClosingOverheadTabContent;

src/components/pages/closing/ClosingOverheadTable.tsx

@@ -1,5 +1,5 @@
 import Card from '@/components/Card';
-import Table from '@/components/Table';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { ClosingApi } from '@/services/api/closing';
@@ -14,19 +14,18 @@ import { ColumnDef } from '@tanstack/react-table';
 import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import useSWR from 'swr';
-import OverheadClosingSkeleton from '@/components/pages/closing/skeleton/OverheadClosingSkeleton';
 
-interface OverheadClosingTableProps {
+interface ClosingOverheadTableProps {
   projectFlockId: number;
   generalInformation?: ClosingGeneralInformation;
   kandangData?: ProjectFlockKandang;
 }
 
-const OverheadClosingTable = ({
+const ClosingOverheadTable = ({
   projectFlockId,
   generalInformation,
   kandangData,
-}: OverheadClosingTableProps) => {
+}: ClosingOverheadTableProps) => {
   const searchParams = useSearchParams();
   const kandangId = searchParams.get('kandangId');
 
@@ -38,7 +37,7 @@ const OverheadClosingTable = ({
     }
   );
 
-  const { data: overheadKandang } = useSWR(
+  const { data: overheadKandang, isLoading: isLoadingOverheadKandang } = useSWR(
     kandangId
       ? `${ClosingApi.basePath}/${projectFlockId}/${kandangId}/overhead`
       : undefined,
@@ -209,84 +208,42 @@ const OverheadClosingTable = ({
   );
 
   return (
-    <div className='w-full pt-3'>
+    <>
       <Card
-        className={{
-          wrapper: 'w-full rounded-lg border-none',
-          body: 'p-0',
-          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-          collapsible: 'rounded-lg',
-        }}
-        variant='bordered'
         title='Pengeluaran Overhead'
         collapsible
         defaultCollapsed={false}
+        className={{
+          wrapper: 'w-full',
+          body: 'p-4 shadow',
+        }}
       >
-        {isLoadingOverhead ? (
-          <OverheadClosingSkeleton columns={columns} />
-        ) : !isResponseSuccess(overhead) ? (
-          <OverheadClosingSkeleton
-            columns={columns}
-            iconName='heroicons:chart-bar'
-            title='Data Overhead Tidak Ditemukan'
-            subtitle='Tidak ada data overhead untuk periode ini.'
-          />
-        ) : kandangId && !isResponseSuccess(overheadKandang) ? (
-          <OverheadClosingSkeleton
-            columns={columns}
-            iconName='heroicons:chart-bar'
-            title='Data Overhead Tidak Ditemukan'
-            subtitle='Tidak ada data overhead untuk periode ini.'
-          />
-        ) : (!kandangId && overhead.data?.overheads.length === 0) ||
-          (kandangId &&
-            isResponseSuccess(overheadKandang) &&
-            overheadKandang.data?.overheads.length === 0) ? (
-          <OverheadClosingSkeleton
-            columns={columns}
-            iconName='heroicons:chart-bar'
-          />
-        ) : (
-          <Table<Overhead>
-            data={
-              kandangId
-                ? isResponseSuccess(overheadKandang)
-                  ? (overheadKandang.data?.overheads ?? [])
-                  : []
-                : isResponseSuccess(overhead)
-                  ? (overhead.data?.overheads ?? [])
-                  : []
-            }
-            columns={columns}
-            className={{
-              containerClassName: 'w-full mb-0!',
-              tableWrapperClassName:
-                'overflow-x-auto rounded-tr-none rounded-tl-none',
-              tableClassName: 'w-full table-auto text-sm',
-              headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
-              headerColumnClassName: cn(
-                'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
-                'whitespace-nowrap'
-              ),
-              bodyRowClassName:
-                'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
-              bodyColumnClassName:
-                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
-              tableFooterClassName:
-                'bg-gray-100 font-semibold border border-gray-200',
-              footerRowClassName: 'border-t-2 border-gray-300',
-              footerColumnClassName:
-                'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
-            }}
-            isLoading={isLoadingOverhead}
-            renderFooter={
-              isResponseSuccess(overhead)
-                ? overhead.data?.overheads.length > 0
-                : false
-            }
-          />
-        )}
-        {kandangId && !isLoadingOverhead && isResponseSuccess(overhead) && (
+        <Table<Overhead>
+          data={
+            kandangId
+              ? isResponseSuccess(overheadKandang)
+                ? (overheadKandang.data?.overheads ?? [])
+                : []
+              : isResponseSuccess(overhead)
+                ? (overhead.data?.overheads ?? [])
+                : []
+          }
+          columns={columns}
+          className={{
+            containerClassName: 'my-4',
+            headerColumnClassName: cn(
+              TABLE_DEFAULT_STYLING.headerColumnClassName,
+              'whitespace-nowrap'
+            ),
+          }}
+          isLoading={isLoadingOverhead}
+          renderFooter={
+            isResponseSuccess(overhead)
+              ? overhead.data?.overheads.length > 0
+              : false
+          }
+        />
+        {kandangId && (
           <Card
             className={{
               wrapper: 'w-full',
@@ -341,8 +298,8 @@ const OverheadClosingTable = ({
           </Card>
         )}
       </Card>
-    </div>
+    </>
   );
 };
 
-export default OverheadClosingTable;
+export default ClosingOverheadTable;

src/components/pages/closing/ClosingProductionDataTabContent.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+
+interface ClosingProductionDataTabContentProps {
+  projectFlockId: number;
+}
+
+const ClosingProductionDataTabContent = ({
+  projectFlockId,
+}: ClosingProductionDataTabContentProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const { data: productionData, isLoading } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/production-data?kandang_id=${kandangId ? `${kandangId}` : ''}`,
+    () => ClosingApi.getProductionData(projectFlockId, Number(kandangId))
+  );
+
+  if (isLoading) {
+    return (
+      <div className='w-full flex justify-center py-8'>
+        <span className='loading loading-spinner loading-lg' />
+      </div>
+    );
+  }
+
+  if (!productionData || !isResponseSuccess(productionData)) {
+    return (
+      <div className='w-full text-center py-8 text-gray-500'>
+        Gagal memuat data produksi.
+      </div>
+    );
+  }
+
+  const { purchase, sales, performance } = productionData.data;
+
+  // Helper for consistent row styling
+  const DataRow = ({
+    label,
+    value,
+    unit = '',
+    valueClassName = 'font-bold text-gray-800',
+    unitClassName = 'text-gray-500 w-12 text-right',
+  }: {
+    label: string;
+    value: string | number;
+    unit?: string;
+    valueClassName?: string;
+    unitClassName?: string;
+  }) => (
+    <div className='flex justify-between items-center py-1'>
+      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
+      <div className='flex gap-2 w-1/2 justify-end items-center'>
+        <span className={valueClassName}>{value}</span>
+        {unit && <span className={unitClassName}>{unit}</span>}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className='w-full rounded-xl p-8 shadow-sm'>
+      <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
+
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
+        {/* Left Column */}
+        <div className='space-y-10'>
+          {/* Purchase Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Pembelian
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Populasi Awal'
+                value={formatNumber(purchase.initial_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Claim Culling'
+                value={formatNumber(purchase.claim_culling)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Populasi Akhir'
+                value={formatNumber(purchase.final_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Pakan Masuk'
+                value={formatNumber(purchase.feed_in)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai'
+                value={formatNumber(purchase.feed_used)}
+                unit='Kg'
+              />
+            </div>
+          </section>
+
+          {/* Sales Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Penjualan
+            </h3>
+            <div className='space-y-4'>
+              {/* Chicken Sales */}
+              <div className='space-y-1'>
+                <DataRow
+                  label='Penjualan (Ekor)'
+                  value={formatNumber(sales.chicken.sales_population)}
+                  unit='Ekor'
+                />
+                <DataRow
+                  label='Penjualan (Kg)'
+                  value={formatNumber(sales.chicken.sales_weight)}
+                  unit='Kg'
+                />
+                <DataRow
+                  label='Bobot Rata-Rata'
+                  value={formatNumber(sales.chicken.avg_weight)}
+                  unit='Kg/Ekor'
+                />
+                <DataRow
+                  label='Harga Jual Rata-Rata'
+                  value={formatNumber(sales.chicken.avg_selling_price)}
+                  unit='Rupiah'
+                />
+              </div>
+
+              {/* Egg Sales (if available) */}
+              {sales.egg && (
+                <>
+                  <div className='h-px bg-gray-100 my-2' />
+                  <div className='space-y-1'>
+                    <DataRow
+                      label='Telur (Butir)'
+                      value={formatNumber(sales.egg.egg_pieces)}
+                      unit='Butir'
+                    />
+                    <DataRow
+                      label='Telur (Kg)'
+                      value={formatNumber(sales.egg.egg_mass)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Berat Telur Rata-Rata'
+                      value={formatNumber(sales.egg.avg_egg_weight)}
+                      unit='Kg'
+                    />
+                    <DataRow
+                      label='Harga Jual Telur Rata-Rata'
+                      value={formatNumber(sales.egg.avg_selling_price)}
+                      unit='Rupiah'
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </section>
+        </div>
+
+        {/* Divider Line (Absolute centered) */}
+        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
+
+        {/* Right Column */}
+        <div className='space-y-10 flex flex-col h-full'>
+          {/* Performance Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Performance
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Deplesi'
+                value={formatNumber(performance.depletion)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Umur'
+                value={formatNumber(performance.age_day)}
+                unit='Hari'
+              />
+              <DataRow
+                label='Mortalitas Std'
+                value={formatNumber(performance.mor_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='Mortalitas Act'
+                value={formatNumber(performance.mor_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF Mortalitas'
+                value={formatNumber(performance.mor_diff)}
+                unitClassName='hidden'
+              />
+              {/* <DataRow
+                label='AWG Std'
+                value={formatNumber(performance.awg_std)}
+                unit='Gr/Hari'
+              />
+              <DataRow
+                label='AWG Act'
+                value={formatNumber(performance.awg_act)}
+                unit='Gr/Hari'
+              /> */}
+              <DataRow
+                label='Feed Intake Std'
+                value={formatNumber(performance.feed_intake_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='Feed Intake Act'
+                value={formatNumber(performance.feed_intake)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Std'
+                value={formatNumber(performance.fcr_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Act'
+                value={formatNumber(performance.fcr_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF FCR'
+                value={formatNumber(performance.fcr_diff)}
+                unitClassName='hidden'
+              />
+
+              {/* Laying Specific Fields */}
+              {performance.hen_day_act !== undefined && (
+                <>
+                  <DataRow
+                    label='Hen Day Std'
+                    value={formatNumber(performance.hen_day_std!)}
+                    unit='%'
+                  />
+                  <DataRow
+                    label='Hen Day Act'
+                    value={formatNumber(performance.hen_day_act)}
+                    unit='%'
+                  />
+                </>
+              )}
+
+              {performance.egg_mass !== undefined && (
+                <>
+                  <DataRow
+                    label='Egg Mass Std'
+                    value={formatNumber(performance.egg_mass_std!)}
+                    unit='Kg'
+                  />
+                  <DataRow
+                    label='Egg Mass Act'
+                    value={formatNumber(performance.egg_mass)}
+                    unit='Kg'
+                  />
+                </>
+              )}
+
+              {performance.egg_weight !== undefined && (
+                <>
+                  <DataRow
+                    label='Egg Weight Std'
+                    value={formatNumber(performance.egg_weight_std!)}
+                    unit='Gr'
+                  />
+                  <DataRow
+                    label='Egg Weight Act'
+                    value={formatNumber(performance.egg_weight)}
+                    unit='Gr'
+                  />
+                </>
+              )}
+
+              {performance.hen_housed_act !== undefined && (
+                <>
+                  <DataRow
+                    label='Hen Housed Std'
+                    value={formatNumber(performance.hen_housed_std!)}
+                    unit='%'
+                  />
+                  <DataRow
+                    label='Hen Housed Act'
+                    value={formatNumber(performance.hen_housed_act)}
+                    unit='%'
+                  />
+                </>
+              )}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingProductionDataTabContent;