chore: resolve merge conflict with development in ReportDepreciationTab

Development had added a forceRecompute/Refresh mechanism on top of V1 API.
Kept our V2 implementation which supersedes it — V2 uses a different
endpoint and response shape that doesn't support force_recompute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -45,3 +45,9 @@ next-env.d.ts
 
 # claude
 .claude
+
+# rtk
+rtk.exe
+
+# local specs
+/local-specs

.gitlab-ci.yml

@@ -15,7 +15,7 @@ default:
 # ==========================================================
 .build_template: &build_template
   stage: build
-  image: node:20-alpine
+  image: public.ecr.aws/docker/library/node:20-alpine
   cache:
     key: npm-cache
     paths:
@@ -30,6 +30,10 @@ 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
     - |
@@ -41,7 +45,11 @@ 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_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"
       }
       EOF
   artifacts:
@@ -56,7 +64,7 @@ default:
 .deploy_template: &deploy_template
   stage: deploy
   image:
-    name: amazon/aws-cli:latest
+    name: public.ecr.aws/aws-cli/aws-cli:latest
     entrypoint: ['/bin/sh', '-c']
   script:
     - set -e
@@ -142,6 +150,10 @@ 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
@@ -170,6 +182,9 @@ 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
@@ -183,3 +198,35 @@ 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,3 +1,4 @@
 npm run format
 npm run lint
-npx tsc --noEmit
+npm run typecheck
+git add .

.rtk/filters.toml

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

CLAUDE.md

@@ -0,0 +1,486 @@
+# 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**
+   - Call `resetFilter()` (single call — resets all `useTableFilter` state to defaults)
+   - Reset any local error state (e.g. `setHasDateError(false)`, dismiss toasts)
+   - Call `formik.resetForm({ values: { ...defaults } })` to sync formik to defaults
+   - Call `filterModal.closeModal()` at the end
+   - Attach to form `onReset` handler (not `formik.handleReset`)
+
+   ```tsx
+   const formikResetHandler = () => {
+     resetFilter();
+     setHasDateError(false);
+     if (dateErrorShown) { toast.dismiss(); setDateErrorShown(false); }
+     formik.resetForm({ values: { start_date: '', end_date: '', customers: [], filterBy: undefined } });
+     filterModal.closeModal();
+   };
+   // ...
+   <form onSubmit={formik.handleSubmit} onReset={formikResetHandler}>
+   ```
+
+**Optimization: Avoid useCallback and useMemo for trivial operations**
+
+- `useCallback` and `useMemo` add overhead; only use them when the computation is expensive or the result is passed to a memoized child
+- Simple derivations and pass-through handlers don't need them:
+
+  ```tsx
+  // ✅ Good: plain derivation
+  const data = isResponseSuccess(response) ? (response.data ?? []) : [];
+  const meta =
+    isResponseSuccess(response) && response.meta ? response.meta : null;
+
+  // ❌ Avoid: useMemo for trivial conditional access
+  const data = useMemo(
+    () => (isResponseSuccess(response) ? (response.data ?? []) : []),
+    [response]
+  );
+
+  // ✅ Good: simple handler
+  const handleChange = (val) => setFieldValue('location', val);
+
+  // ❌ Avoid: unnecessary useCallback
+  const handleChange = useCallback(
+    (val) => setFieldValue('location', val),
+    [setFieldValue]
+  );
+  ```
+
+- `useMemo` IS justified for large column definition arrays (TanStack Table re-processes on every render)
+
+**Best practice: Store OptionType objects directly, not IDs**
+
+For select inputs, store the complete `OptionType` object (or `OptionType[]` for multi-select) in both formik state and tableFilterState. `useTableFilter`'s `serializeValue` handles serialization automatically:
+
+- `OptionType<T>` → serialized as `String(value)` in the query string
+- `OptionType<T>[]` → serialized as comma-separated values (CSV) — ideal for multi-select API params like `customer_ids`, `sales_ids`
+
+```tsx
+const { state: tableFilterState, updateFilter, ... } = useTableFilter<{
+  search: string;
+  customers: OptionType<number>[];     // multi-select → serializes as CSV
+  location?: OptionType<string>;       // single-select → serializes as value string
+  filterBy?: OptionType<string>;       // single-select radio
+}>({
+  initial: {
+    search: '',
+    customers: [],
+    location: undefined,
+    filterBy: undefined,
+  },
+  paramMap: {
+    page: 'page',
+    pageSize: 'limit',
+    customers: 'customer_ids',   // serializes OptionType[] → "1,2,3"
+    location: 'location_id',     // serializes OptionType → "abc"
+    filterBy: 'filter_by',
+  },
+  persist: true,
+  storeName: 'my-table',
+});
+
+// Initialize formik directly from tableFilterState (no hardcoded defaults)
+const formik = useFormik({
+  initialValues: {
+    customers: tableFilterState.customers,
+    location: tableFilterState.location,
+    filterBy: tableFilterState.filterBy,
+  },
+  ...
+});
+
+// Use formik values directly — no computed helpers needed
+<SelectInputCheckbox value={formik.values.customers} onChange={(val) => formik.setFieldValue('customers', Array.isArray(val) ? val : [])} />
+<SelectInput        value={formik.values.location}  onChange={(val) => formik.setFieldValue('location', val)} />
+<SelectInputRadio   value={formik.values.filterBy ?? null} onChange={(val) => formik.setFieldValue('filterBy', !Array.isArray(val) ? (val ?? undefined) : undefined)} />
+```
+
+**Filter field naming convention**
+
+- Multi-select fields: use plural entity name — `customers`, `salesPersons`, `locations`
+- Single-select fields: use descriptive camelCase — `filterBy`, `status`, `category`
+- No `Filter` suffix (e.g. avoid `customerFilter`, `locationFilter`)
+
+**Filter modal: pass `openModal` directly, never use `enableReinitialize`**
+
+`enableReinitialize: true` resets formik mid-interaction whenever `tableFilterState` changes, breaking the modal UX. Pass `filterModal.openModal` directly to the button — no ref wrapper needed. Formik retains its last state across open/close, which is acceptable UX (values sync with `tableFilterState` on submit and reset anyway).
+
+```tsx
+// ❌ Avoid: enableReinitialize breaks modal mid-interaction
+const formik = useFormik({ initialValues: { ... }, enableReinitialize: true });
+
+// ❌ Avoid: unnecessary ref indirection
+const handleFilterModalOpenRef = useRef(() => {});
+handleFilterModalOpenRef.current = () => { formik.setValues({...}); filterModal.openModal(); };
+
+// ✅ Correct: pass openModal directly
+<ButtonFilter onClick={filterModal.openModal} ... />
+```
+
+Include `filterModal.openModal` in the `useEffect` deps array when it's used inside the effect.
+
+**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/`
+- `BalanceMonitoringTab` in `src/components/pages/report/finance/tab/` — multi-select + radio + date range
+
+## SWR fetch pattern
+
+Use `FinanceApi.getAllFetcher` (or the relevant service's `getAllFetcher`) when the result type matches the service generic `T`. When it differs, use `httpClientFetcher` with an explicit type:
+
+```tsx
+// ✅ Same type as service generic — use getAllFetcher
+const { data } = useSWR(
+  `${Api.basePath}${getTableFilterQueryString()}`,
+  Api.getAllFetcher
+);
+
+// ✅ Different type — use httpClientFetcher with explicit useSWR type
+const { data } = useSWR<
+  BaseApiResponse<BalanceMonitoringRow[]>,
+  AxiosError<BaseApiResponse>,
+  SWRHttpKey
+>(
+  `${FinanceApi.basePath}/balance-monitoring${getTableFilterQueryString()}`,
+  httpClientFetcher
+);
+```
+
+Always name the `toQueryString` alias `getTableFilterQueryString` when destructuring from `useTableFilter`.
+
+## 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).
+
+<!-- rtk-instructions v2 -->
+
+# RTK (Rust Token Killer) - Token-Optimized Commands
+
+## Golden Rule
+
+**Always prefix commands with `rtk`**. If RTK has a dedicated filter, it uses it. If not, it passes through unchanged. This means RTK is always safe to use.
+
+**Important**: Even in command chains with `&&`, use `rtk`:
+
+```bash
+# ❌ Wrong
+git add . && git commit -m "msg" && git push
+
+# ✅ Correct
+rtk git add . && rtk git commit -m "msg" && rtk git push
+```
+
+## RTK Commands by Workflow
+
+### Build & Compile (80-90% savings)
+
+```bash
+rtk cargo build         # Cargo build output
+rtk cargo check         # Cargo check output
+rtk cargo clippy        # Clippy warnings grouped by file (80%)
+rtk tsc                 # TypeScript errors grouped by file/code (83%)
+rtk lint                # ESLint/Biome violations grouped (84%)
+rtk prettier --check    # Files needing format only (70%)
+rtk next build          # Next.js build with route metrics (87%)
+```
+
+### Test (60-99% savings)
+
+```bash
+rtk cargo test          # Cargo test failures only (90%)
+rtk go test             # Go test failures only (90%)
+rtk jest                # Jest failures only (99.5%)
+rtk vitest              # Vitest failures only (99.5%)
+rtk playwright test     # Playwright failures only (94%)
+rtk pytest              # Python test failures only (90%)
+rtk rake test           # Ruby test failures only (90%)
+rtk rspec               # RSpec test failures only (60%)
+rtk test <cmd>          # Generic test wrapper - failures only
+```
+
+### Git (59-80% savings)
+
+```bash
+rtk git status          # Compact status
+rtk git log             # Compact log (works with all git flags)
+rtk git diff            # Compact diff (80%)
+rtk git show            # Compact show (80%)
+rtk git add             # Ultra-compact confirmations (59%)
+rtk git commit          # Ultra-compact confirmations (59%)
+rtk git push            # Ultra-compact confirmations
+rtk git pull            # Ultra-compact confirmations
+rtk git branch          # Compact branch list
+rtk git fetch           # Compact fetch
+rtk git stash           # Compact stash
+rtk git worktree        # Compact worktree
+```
+
+Note: Git passthrough works for ALL subcommands, even those not explicitly listed.
+
+### GitHub (26-87% savings)
+
+```bash
+rtk gh pr view <num>    # Compact PR view (87%)
+rtk gh pr checks        # Compact PR checks (79%)
+rtk gh run list         # Compact workflow runs (82%)
+rtk gh issue list       # Compact issue list (80%)
+rtk gh api              # Compact API responses (26%)
+```
+
+### JavaScript/TypeScript Tooling (70-90% savings)
+
+```bash
+rtk pnpm list           # Compact dependency tree (70%)
+rtk pnpm outdated       # Compact outdated packages (80%)
+rtk pnpm install        # Compact install output (90%)
+rtk npm run <script>    # Compact npm script output
+rtk npx <cmd>           # Compact npx command output
+rtk prisma              # Prisma without ASCII art (88%)
+```
+
+### Files & Search (60-75% savings)
+
+```bash
+rtk ls <path>           # Tree format, compact (65%)
+rtk read <file>         # Code reading with filtering (60%)
+rtk grep <pattern>      # Search grouped by file (75%)
+rtk find <pattern>      # Find grouped by directory (70%)
+```
+
+### Analysis & Debug (70-90% savings)
+
+```bash
+rtk err <cmd>           # Filter errors only from any command
+rtk log <file>          # Deduplicated logs with counts
+rtk json <file>         # JSON structure without values
+rtk deps                # Dependency overview
+rtk env                 # Environment variables compact
+rtk summary <cmd>       # Smart summary of command output
+rtk diff                # Ultra-compact diffs
+```
+
+### Infrastructure (85% savings)
+
+```bash
+rtk docker ps           # Compact container list
+rtk docker images       # Compact image list
+rtk docker logs <c>     # Deduplicated logs
+rtk kubectl get         # Compact resource list
+rtk kubectl logs        # Deduplicated pod logs
+```
+
+### Network (65-70% savings)
+
+```bash
+rtk curl <url>          # Compact HTTP responses (70%)
+rtk wget <url>          # Compact download output (65%)
+```
+
+### Meta Commands
+
+```bash
+rtk gain                # View token savings statistics
+rtk gain --history      # View command history with savings
+rtk discover            # Analyze Claude Code sessions for missed RTK usage
+rtk proxy <cmd>         # Run command without filtering (for debugging)
+rtk init                # Add RTK instructions to CLAUDE.md
+rtk init --global       # Add RTK to ~/.claude/CLAUDE.md
+```
+
+## Token Savings Overview
+
+| Category         | Commands                       | Typical Savings |
+| ---------------- | ------------------------------ | --------------- |
+| Tests            | vitest, playwright, cargo test | 90-99%          |
+| Build            | next, tsc, lint, prettier      | 70-87%          |
+| Git              | status, log, diff, add, commit | 59-80%          |
+| GitHub           | gh pr, gh run, gh issue        | 26-87%          |
+| Package Managers | pnpm, npm, npx                 | 70-90%          |
+| Files            | ls, read, grep, find           | 60-75%          |
+| Infrastructure   | docker, kubectl                | 85%             |
+| Network          | curl, wget                     | 65-70%          |
+
+Overall average: **60-90% token reduction** on common development operations.
+
+<!-- /rtk-instructions -->

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM public.ecr.aws/docker/library/node:20-alpine
 
 RUN apk add --no-cache git bash build-base curl
 

package.json

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

src/app/closing/detail/page.tsx

@@ -3,11 +3,10 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+import ClosingDetail from '@/components/pages/closing/ClosingDetailTabs';
 
 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';
 
@@ -34,33 +33,6 @@ 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();
 
@@ -76,12 +48,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading =
-    isLoadingClosing ||
-    isLoadingSales ||
-    isLoadingHppEkspedisi ||
-    isLoadingProject ||
-    isLoadingKandang;
+  const isLoading = isLoadingClosing || isLoadingProject || isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -91,12 +58,6 @@ 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-4'>
+    <section className='w-full p-3'>
       <ClosingsTable />
     </section>
   );

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

@@ -0,0 +1,11 @@
+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(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
+    ['expense-detail', expenseId],
+    ([_, id]) => ExpenseApi.getSingle(Number(id))
   );
 
   if (!expenseId) {

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

@@ -5,7 +5,6 @@ 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 { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 const FinanceDetailPage = () => {
   const router = useRouter();

src/app/finance/page.tsx

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

src/app/globals.css

@@ -68,6 +68,8 @@
 
   --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 p-4'>
+    <section className='w-full'>
       <InventoryAdjustmentTable />
     </section>
   );

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

@@ -1,54 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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/page.tsx

@@ -1,62 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,49 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,52 +0,0 @@
-'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/marketing/page.tsx

@@ -1,9 +1,14 @@
+import DeliveryOrderFormModal from '@/components/pages/marketing/DeliveryOrderFormModal';
 import MarketingTable from '@/components/pages/marketing/MarketingTable';
+import SalesOrderFormModal from '@/components/pages/marketing/SalesOrderFormModal';
 
 const Marketing = () => {
   return (
-    <div className='w-full p-4'>
+    <div className='w-full'>
       <MarketingTable />
+
+      <SalesOrderFormModal />
+      <DeliveryOrderFormModal />
     </div>
   );
 };

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,52 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,52 +0,0 @@
-'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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import PageNotFound from '@/components/helper/NotFoundPage';
+
+export default function NotFound() {
+  return <PageNotFound />;
+}

src/app/page.tsx

@@ -3,10 +3,9 @@
 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 { user, isLoadingUser } = useAuth();
+  const { 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, { useImperativeHandle } from 'react';
-import toast from 'react-hot-toast';
+import React from 'react';
+// import React, { useImperativeHandle } from 'react';
 
 const AddProjectFlock = () => {
   // useImperativeHandle(ref, () => ({

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

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

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

@@ -1,7 +1,6 @@
 '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';
@@ -13,11 +12,10 @@ const ProjectFlockDetailPage = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const {
-    data: projectFlock,
-    isLoading: isLoadingProjectFlock,
-    mutate: refreshProjectFlock,
-  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
 
   if (!projectFlockId) {
     router.back();
@@ -50,5 +48,3 @@ const ProjectFlockDetailPage = () => {
 };
 
 export default ProjectFlockDetailPage;
-ProjectFlockDetail;
-ProjectFlockDetail;

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import Drawer from '@/components/Drawer';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } 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,9 +23,12 @@ 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');
       }
@@ -34,6 +37,14 @@ export default function ProjectFlockLayout({
     toggleValidate();
   };
 
+  useEffect(() => {
+    if (isOpen && !formModal.open) {
+      formModal.openModal();
+    } else {
+      formModal.closeModal();
+    }
+  }, [isOpen]);
+
   return (
     <>
       {/* List page always rendered */}
@@ -43,18 +54,19 @@ export default function ProjectFlockLayout({
         />
       </div>
 
-      {/* Render Drawer only on /add */}
-      <Drawer
-        open={isOpen}
-        setOpen={(v) => {
-          if (!v) router.push('/production/project-flock');
-        }}
-        closeOnBackdropClick={isDetail ? true : false}
+      {/* Render Modal only on /add */}
+      <Modal
+        ref={formModal.ref}
+        position='end'
         onBackdropClick={handleBackdropClick}
-        variant='right'
-        zIndex='99999'
-        sidebarContent={isOpen && <div className=''>{children}</div>}
-      />
+        className={{
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+        }}
+      >
+        <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>
     </>
   );
 }

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

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

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

@@ -11,10 +11,13 @@ const RecordingDetail = () => {
   const searchParams = useSearchParams();
 
   const recordingId = searchParams.get('recordingId');
+  const recordingDetailKey = recordingId
+    ? ['recording-detail', recordingId]
+    : null;
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingId,
-    (id: string) => RecordingApi.getSingle(parseInt(id))
+    recordingDetailKey,
+    ([, id]: [string, 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 p-4 sm:p-0'>
+    <section className='w-full'>
       <RecordingTable />
     </section>
   );

src/app/production/transfer-to-laying/page.tsx

@@ -1,15 +1,25 @@
 import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
 import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const TransferToLaying = () => {
   return (
     <section className='w-full'>
       <TransferToLayingsTable />
 
-      <TransferToLayingFormModal />
+      <RequirePermission
+        permissions={[
+          'lti.production.transfer_to_laying.create',
+          'lti.production.transfer_to_laying.update',
+        ]}
+      >
+        <TransferToLayingFormModal />
+      </RequirePermission>
 
-      <TransferToLayingDetailModal />
+      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
+        <TransferToLayingDetailModal />
+      </RequirePermission>
     </section>
   );
 };

src/app/report/expense/page.tsx

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

src/app/report/marketing/page.tsx

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

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

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

src/components/Alert.tsx

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } 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, variant, color, className }: AlertProps) => {
+const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
   const alertBaseClassName = cn('alert', {
     'alert-soft': variant === 'soft',
     'alert-outline': variant === 'outline',
@@ -21,7 +22,11 @@ const Alert = ({ children, variant, color, className }: AlertProps) => {
     'alert-error': color === 'error',
   });
 
-  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
+  return (
+    <div ref={ref} className={cn(alertBaseClassName, className)}>
+      {children}
+    </div>
+  );
 };
 
 export default Alert;

src/components/Button.tsx

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

src/components/Drawer.tsx

@@ -16,7 +16,6 @@ interface DrawerProps {
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
   expandedContent?: ReactNode;
-  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -25,6 +24,7 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
+  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -39,7 +39,6 @@ const Drawer = ({
   onBackdropClick,
   closeOnBackdropClick = true,
   expandedContent,
-  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -56,6 +55,9 @@ const Drawer = ({
           ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
           : 'w-full max-w-[300px] lg:w-[300px]';
       }
+      if (className?.drawerSidebarContent) {
+        return '';
+      }
       return 'w-full sm:min-w-120 sm:w-fit';
     };
 
@@ -106,7 +108,9 @@ const Drawer = ({
     if (closeOnBackdropClick) {
       setOpen(false);
     }
-    onBackdropClick && onBackdropClick();
+    if (onBackdropClick) {
+      onBackdropClick();
+    }
   };
 
   return (
@@ -174,7 +178,7 @@ const Drawer = ({
             <div
               className={cn(
                 'border-l border-gray-200 bg-white flex flex-col h-full',
-                expandedWidth
+                className?.drawerExpandedContent
               )}
             >
               <div className='overflow-y-auto flex-1 h-full'>

src/components/MainDrawer.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useCallback } from 'react';
 import { usePathname } from 'next/navigation';
 
 import Image from 'next/image';
@@ -13,7 +12,6 @@ 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';
 
@@ -74,6 +72,8 @@ const MainDrawer = ({
 
   const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
 
+  const isPathnameNotFoundPage = formattedPathname === '/404/';
+
   const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
     permissionCheck(permission)
   );
@@ -82,10 +82,14 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
-  if (!isPermitted) {
+  if (!isPermitted && !isPathnameNotFoundPage) {
     return <PermissionNotFound />;
   }
 
+  if (isPathnameNotFoundPage) {
+    return children;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/Modal.tsx

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

src/components/Navbar.tsx

@@ -26,13 +26,17 @@ 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'>
-      Page {currentPage} of {totalPages}
+      Total Item: {totalItems} | 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 p-5 text-center'>
-    <span className='text-lg opacity-50'>
+  <div className='w-full text-center py-4'>
+    <span className='text-sm opacity-50'>
       Tidak ada data yang dapat ditampilkan...
     </span>
   </div>
@@ -173,6 +173,7 @@ const Table = <TData extends object>({
   const tableOptions: TableOptions<TData> = {
     columns,
     data: isLoading ? (DUMMY_SKELETON_DATA as TData[]) : data, // Type assertion
+    defaultColumn: { sortDescFirst: false },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -452,6 +453,20 @@ 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(
@@ -489,10 +504,6 @@ 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, useEffect, useState } from 'react';
+import { HTMLAttributes, ReactNode, useState } from 'react';
 import { cn } from '@/lib/helper';
 
 export interface TabItem {
@@ -6,6 +6,7 @@ export interface TabItem {
   label: ReactNode;
   content?: ReactNode;
   disabled?: boolean;
+  hide?: boolean;
 }
 
 export interface TabsProps
@@ -122,17 +123,19 @@ const Tabs = ({
     >
       <div className={getSideContentClasses()}>
         <div role='tablist' className={getTabsClasses()}>
-          {tabs.map(({ id, label, disabled }) => (
-            <button
-              key={id}
-              role='tab'
-              className={getTabClasses(id === activeTabId, disabled)}
-              onClick={() => !disabled && handleTabChange(id)}
-              disabled={disabled}
-            >
-              {label}
-            </button>
-          ))}
+          {tabs.map(({ id, label, disabled, hide }) =>
+            hide ? null : (
+              <button
+                key={id}
+                role='tab'
+                className={getTabClasses(id === activeTabId, disabled)}
+                onClick={() => !disabled && handleTabChange(id)}
+                disabled={disabled}
+              >
+                {label}
+              </button>
+            )
+          )}
         </div>
         {sideContent && sideContent}
       </div>

src/components/helper/ApprovalStepsV2.tsx

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

src/components/helper/ButtonFilter.tsx

@@ -3,15 +3,51 @@ 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, ...props }: ButtonFilterProps) => {
+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]);
   return (
     <Button
       {...props}
@@ -21,7 +57,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       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',
-        getFilledFormikValuesCount(values) > 0
+        activeCount > 0
           ? 'border-primary-gradient text-primary rounded-lg!'
           : 'rounded-lg',
         props.className
@@ -31,14 +67,12 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
         icon='heroicons:funnel'
         width={20}
         height={20}
-        className={
-          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
-        }
+        className={activeCount > 0 ? 'text-blue-600' : ''}
       />
       Filter
-      {getFilledFormikValuesCount(values) > 0 && (
+      {activeCount > 0 && (
         <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-          {getFilledFormikValuesCount(values)}
+          {activeCount}
         </span>
       )}
     </Button>

src/components/helper/NotFoundPage.tsx

@@ -0,0 +1,17 @@
+import Button from '@/components/Button';
+
+const PageNotFound = () => {
+  return (
+    <div className='w-full h-full flex-1 flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Halaman Tidak Ditemukan</h2>
+      <p className='text-gray-600 text-center'>
+        Halaman atau data yang anda cari tidak ditemukan.
+      </p>
+      <Button href='/dashboard' className='text-base-100'>
+        Kembali ke Dashboard
+      </Button>
+    </div>
+  );
+};
+
+export default PageNotFound;

src/components/helper/PermissionNotFound.tsx

@@ -1,10 +1,17 @@
+import Button from '@/components/Button';
+
 const PermissionNotFound = () => {
   return (
     <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
-      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <h2 className='text-2xl font-bold text-error'>
+        Hak Akses Tidak Ditemukan
+      </h2>
       <p className='text-gray-600 text-center'>
-        You do not have permission to access this page.
+        Anda tidak memiliki hak akses untuk mengakses halaman ini.
       </p>
+      <Button href='/dashboard' className='text-base-100'>
+        Kembali ke Dashboard
+      </Button>
     </div>
   );
 };

src/components/helper/StatusBadge.tsx

@@ -1,24 +1,30 @@
+import { ReactNode } from 'react';
+
 import Badge from '@/components/Badge';
+
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
 
 interface StatusBadgeProps {
   color: Color;
-  text: string;
+  text: ReactNode;
   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',
@@ -28,6 +34,7 @@ const StatusBadge = ({
             'bg-error/20': color === 'error',
             'bg-primary/20': color === 'info',
             'bg-[#FF9A20]/12': color === 'warning',
+            'bg-[#1166EF]/12': color === 'primary',
           },
           className?.badge
         ),
@@ -45,6 +52,7 @@ const StatusBadge = ({
           'text-error': color === 'error',
           'text-primary': color === 'info',
           'text-[#FF9A20]': color === 'warning',
+          'text-[#1166EF]': color === 'primary',
         })}
       >
         <circle r='6' cx='6' cy='6' fill='currentColor' />

src/components/helper/drawer/DrawerHeader.tsx

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

src/components/helper/form/FormErrors.tsx

@@ -1,7 +1,10 @@
+'use client';
+
 import Alert from '@/components/Alert';
 import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * Alert Unique Error List
@@ -10,34 +13,81 @@ import { useState } from 'react';
  */
 const AlertErrorList = ({
   formErrorList,
+  className,
   onClose,
+  title,
 }: {
   formErrorList: string[];
+  className?: {
+    alert?: string;
+    button?: string;
+    headerWrapper?: string;
+    headerIcon?: string;
+    headerText?: string;
+    titleWrapper?: string;
+    ul?: string;
+    li?: string;
+  };
   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 color='error' className='w-full flex flex-col gap-2 px-4'>
-      <div className='flex justify-between items-center gap-2 w-full'>
-        <div className='flex items-center gap-2'>
-          <Icon icon='material-symbols:error-outline' width={24} height={24} />
-          <span className='font-semibold'>
-            Terdapat {formErrorList.length} error pada form:
+    <Alert
+      ref={alertRef}
+      color='error'
+      className={cn(
+        'w-full flex flex-col gap-2 px-3 rounded-lg',
+        className?.alert
+      )}
+    >
+      <div
+        className={cn(
+          'flex justify-between items-center gap-2 w-full',
+          className?.headerWrapper
+        )}
+      >
+        <div className={cn('flex items-center gap-2', className?.titleWrapper)}>
+          <Icon
+            icon='material-symbols:error-outline'
+            className={cn(className?.headerIcon)}
+            width={20}
+            height={20}
+          />
+          <span className={cn('font-semibold text-sm', className?.headerText)}>
+            {title || `Terdapat ${formErrorList.length} error pada form:`}
           </span>
         </div>
         <Button
+          type='button'
           onClick={onClose}
           variant='link'
-          className='ml-auto p-0 w-fit text-white'
+          className={cn('ml-auto p-0 w-fit text-white', className?.button)}
           color='none'
         >
-          <Icon icon='material-symbols:close' width={24} height={24} />
+          <Icon icon='material-symbols:close' width={20} height={20} />
         </Button>
       </div>
-      <ul className='list-disc list-inside pl-8 space-y-1 w-full'>
+      <ul
+        className={cn(
+          'list-disc list-inside pl-4 space-y-1.5 w-full',
+          className?.ul
+        )}
+      >
         {formErrorList.map((error, index) => (
-          <li key={index} className='text-sm'>
+          <li key={index} className={cn('text-sm', className?.li)}>
             {error}
           </li>
         ))}

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,54 @@
+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

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

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

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

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

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

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

@@ -1,13 +1,8 @@
 'use client';
 
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
-
-export interface PdfColumn {
-  key: string;
-  header: string;
-  flex: number;
-  align?: 'left' | 'center' | 'right';
-}
+import { ReactNode } from 'react';
+import type { PdfColumn } from './types';
 
 const styles = StyleSheet.create({
   tableRow: {
@@ -48,23 +43,37 @@ const styles = StyleSheet.create({
   },
 });
 
-interface PdfTheadProps {
-  columns: PdfColumn[];
+interface PdfTheadProps<TData = Record<string, unknown>> {
+  columns: PdfColumn<TData>[];
+  data?: TData[];
 }
 
-export const PdfThead = ({ columns }: PdfTheadProps) => {
+export const PdfThead = <TData = Record<string, unknown>,>({
+  columns,
+  data,
+}: PdfTheadProps<TData>) => {
   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,
+                  flex: column.flex || 1,
                   textAlign: 'right' as const,
                   borderRightWidth: isLastColumn ? 0 : 1,
                 },
@@ -72,7 +81,7 @@ export const PdfThead = ({ columns }: PdfTheadProps) => {
             : [
                 styles.tableCellHeader,
                 {
-                  flex: column.flex,
+                  flex: column.flex || 1,
                   textAlign: align as 'left' | 'center' | 'right',
                   borderRightWidth: isLastColumn ? 0 : 1,
                 },
@@ -80,10 +89,16 @@ export const PdfThead = ({ columns }: PdfTheadProps) => {
 
         return (
           <View key={column.key} style={cellStyle}>
-            <Text>{column.header}</Text>
+            {typeof headerContent === 'string' ? (
+              <Text>{headerContent}</Text>
+            ) : (
+              headerContent
+            )}
           </View>
         );
       })}
     </View>
   );
 };
+
+export type { PdfColumn };

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

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

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,65 @@
+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,5 +1,4 @@
 import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';
-import { Icon } from '@iconify/react';
 
 const DataStateSkeleton = ({
   icon,

src/components/input/DebouncedTextArea.tsx

@@ -7,6 +7,7 @@ import TextArea, { TextAreaProps } from '@/components/input/TextArea';
 
 interface DebouncedTextAreaProps extends TextAreaProps {
   delay?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
@@ -19,6 +20,11 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
   const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
 
+  // Sync internal value with external props.value when it changes (e.g., form reset)
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
   const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
     e
   ) => {
@@ -35,6 +41,7 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   return (
     <TextArea
       {...props}
+      ref={props.ref}
       value={internalValue}
       onChange={internalChangeHandler}
     />

src/components/input/DropFileInput.tsx

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

src/components/input/NumberInput.tsx

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

src/components/input/PatternInput.tsx

@@ -4,7 +4,6 @@ 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='text-sm opacity-60'>{bottomLabel}</p>
+          <p className='mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
         )}
 
         {/* Pesan error */}
         {isError && errorMessage && (
-          <p className='text-sm text-error'>{errorMessage}</p>
+          <p className='mt-1.5 text-xs 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 {
-  value: string | number;
+export interface OptionType<T = string | number> {
+  value: T;
   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-gray-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'bg-base-100 border-base-content/10': !isDisabled,
+                  'bg-base-200 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 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':
+                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,
                   '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': !isError,
-                  'text-red-300!': isError,
+                cn('text-gray-400 text-sm leading-tight', {
+                  'text-error!': isError,
                 }),
               singleValue: () =>
-                cn({
-                  'm-0! text-gray-900 text-sm leading-tight': !isError,
-                  'text-error!': isError,
+                cn('m-0! text-gray-900 text-sm leading-tight', {
+                  'text-error!': isError && !readOnly,
                   '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-gray-100 border-base-content/10': !isDisabled,
-                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'bg-base-100 border-base-content/10': !isDisabled,
+                  'bg-base-200 border-base-content/10': isDisabled,
                   'border-error': isError,
                 },
                 className?.inputSuffix
@@ -403,31 +403,26 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           className={cn('w-full', className?.select)}
           classNames={{
             control: ({ isFocused, isDisabled }) =>
-              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,
-                }
-              ),
+              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,
+              }),
             valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
             placeholder: () =>
-              cn({
-                'text-gray-400 text-sm leading-tight': !isError,
-                'text-red-300!': isError,
+              cn('text-gray-400 text-sm leading-tight', {
+                'text-error!': isError,
               }),
             singleValue: () =>
-              cn({
-                'm-0! text-gray-900 text-sm leading-tight': !isError,
-                'text-error!': isError,
+              cn('m-0! text-gray-900 text-sm leading-tight', {
+                'text-error!': isError && !readOnly,
                 'text-gray-900!': readOnly,
               }),
             input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
@@ -493,9 +488,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         />
       )}
 
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {isError && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
+      )}
       {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );
@@ -526,7 +523,7 @@ const useSelect = <T,>(
 
     const qs = new URLSearchParams({
       ...(params ?? {}),
-      [searchKey]: inputValue ?? '',
+      [searchKey ? searchKey : 'search']: inputValue ?? '',
       [pageKey]: String(pageIndex + 1),
       [limitKey]: String(limit),
     }).toString();
@@ -569,23 +566,31 @@ 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;
 
-  if (isResponseSuccess(pages?.[latestPagesIndex])) {
-    formattedSuccessRawData = {
-      ...pages?.[latestPagesIndex],
-      data:
-        pages?.flatMap((page) => (isResponseSuccess(page) ? page.data : [])) ??
-        [],
-    };
-  }
+  const { formattedSuccessRawData, formattedErrorRawData } = useMemo(() => {
+    let successData: SuccessApiResponse<T[]> | undefined = undefined;
+    let errorData: ErrorApiResponse | undefined = undefined;
 
-  if (isResponseError(pages?.[latestPagesIndex])) {
-    formattedErrorRawData = pages?.[latestPagesIndex];
-  }
+    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,
+    };
+  }, [pages, latestPagesIndex]);
 
   return {
     inputValue,

src/components/input/TagInput.tsx

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

src/components/input/TextArea.tsx

@@ -28,6 +28,7 @@ export interface TextAreaProps {
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   rows?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const TextArea = ({
@@ -49,6 +50,7 @@ const TextArea = ({
   readOnly = false,
   isLoading = false,
   rows = 3,
+  ref,
 }: TextAreaProps) => {
   return (
     <div
@@ -99,6 +101,7 @@ const TextArea = ({
         onBlur={onBlur}
         disabled={disabled}
         readOnly={readOnly}
+        ref={ref}
       />
 
       {(isLoading || endAdornment) && (

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-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-base-100 border-base-content/10': !disabled,
+                  'bg-base-200 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 bg-white 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 border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -126,7 +126,8 @@ const TextInput = ({
                 'rounded-r-none!': inputSuffix,
                 'input-disabled': disabled,
                 'cursor-not-allowed': disabled,
-                'bg-gray-50': disabled,
+                'bg-base-100': !disabled,
+                'bg-base-200': disabled,
               },
               className?.inputWrapper
             )}
@@ -167,8 +168,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-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-base-content/10': disabled,
+                  'bg-base-100 border-base-content/10': !disabled,
+                  'bg-base-200 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -182,10 +183,12 @@ 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 bg-white 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 flex items-center border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
+              'bg-base-100': !disabled,
+              'bg-base-200': disabled,
             },
             className?.inputWrapper
           )}
@@ -201,7 +204,14 @@ const TextInput = ({
             onChange={onChange}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn('grow', className?.input)}
+            className={cn(
+              'grow bg-transparent outline-none',
+              {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
             readOnly={readOnly}
           />
 

src/components/modal/ConfirmationModal.tsx

@@ -122,10 +122,18 @@ const ConfirmationModal = ({
       closeOnBackdrop={closeOnBackdrop}
       className={{
         ...className,
-        modalBox: cn('rounded-xl p-4', className?.modalBox),
+        modalBox: cn(
+          'rounded-xl p-4 flex flex-col gap-4 max-h-[90vh]',
+          className?.modalBox
+        ),
       }}
     >
-      <div className='w-full flex flex-col gap-4'>
+      <div
+        className={cn(
+          'flex flex-col gap-4',
+          children && 'sticky top-0 bg-inherit z-10'
+        )}
+      >
         {iconPosition === 'center' ? (
           <>
             <div className='w-fit mx-auto'>
@@ -164,71 +172,74 @@ const ConfirmationModal = ({
             </div>
           </div>
         )}
+      </div>
 
-        {children && <div className='w-full'>{children}</div>}
+      {children && (
+        <div className='w-full flex-1 overflow-y-auto'>{children}</div>
+      )}
 
-        {(secondaryButton || primaryButton) && (
-          <div
-            className={cn('w-full grid gap-3', {
+      {(secondaryButton || primaryButton) && (
+        <div
+          className={cn(
+            'w-full grid gap-3',
+            children && 'sticky bottom-0 bg-inherit z-10',
+            {
               'grid-cols-2': secondaryButton && primaryButton,
               'grid-cols-1':
                 (secondaryButton && !primaryButton) ||
                 (!secondaryButton && primaryButton),
-            })}
-          >
-            {secondaryButton && secondaryButton.text && (
-              <Button
-                {...secondaryButton}
-                variant='outline'
-                color={secondaryButton?.color}
-                isLoading={secondaryButton?.isLoading}
-                disabled={
-                  secondaryButton?.isLoading !== undefined
-                    ? secondaryButton?.isLoading
-                    : isPrimaryButtonLoading
+            }
+          )}
+        >
+          {secondaryButton && secondaryButton.text && (
+            <Button
+              {...secondaryButton}
+              variant='outline'
+              color={secondaryButton?.color}
+              isLoading={secondaryButton?.isLoading}
+              disabled={
+                secondaryButton?.isLoading !== undefined
+                  ? secondaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              onClick={(e) => {
+                if (secondaryButton?.onClick) {
+                  secondaryButton.onClick(e);
+                } else {
+                  closeModalHandler();
                 }
-                onClick={(e) => {
-                  if (secondaryButton?.onClick) {
-                    secondaryButton.onClick(e);
-                  } else {
-                    closeModalHandler();
-                  }
-                }}
-                className={cn(
-                  'p-2 rounded-xl text-sm',
-                  secondaryButton?.className
-                )}
-              >
-                {secondaryButton?.text ?? 'Tidak'}
-              </Button>
-            )}
+              }}
+              className={cn(
+                'p-2 rounded-xl text-sm',
+                secondaryButton?.className
+              )}
+            >
+              {secondaryButton?.text ?? 'Tidak'}
+            </Button>
+          )}
 
-            {primaryButton && primaryButton.text && (
-              <Button
-                {...primaryButton}
-                color={primaryButton?.color ?? 'info'}
-                onClick={primaryButtonClickHandler}
-                isLoading={
-                  primaryButton?.isLoading !== undefined
-                    ? primaryButton?.isLoading
-                    : isPrimaryButtonLoading
-                }
-                disabled={
-                  primaryButton?.isLoading !== undefined
-                    ? primaryButton?.isLoading
-                    : isPrimaryButtonLoading
-                }
-                className={cn(
-                  'p-2 rounded-xl text-sm',
-                  primaryButton?.className
-                )}
-              >
-                {primaryButton?.text ?? 'Ya'}
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
+          {primaryButton && primaryButton.text && (
+            <Button
+              {...primaryButton}
+              color={primaryButton?.color ?? 'info'}
+              onClick={primaryButtonClickHandler}
+              isLoading={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              disabled={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
+            >
+              {primaryButton?.text ?? 'Ya'}
+            </Button>
+          )}
+        </div>
+      )}
     </Modal>
   );
 };

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -13,6 +13,7 @@ interface ConfirmationModalWithNotesProps
   extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
   rows?: number;
   placeholder?: string;
+  onClose?: () => void;
 
   primaryButton?: {
     text?: string;
@@ -32,6 +33,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
   className,
   rows = 3,
   placeholder = 'Catatan...',
+  onClose,
   ...props
 }) => {
   const randomId = useId();
@@ -41,6 +43,11 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
     setNotes(e.target.value);
   };
 
+  const closeModalHandler = () => {
+    onClose?.();
+    ref.current?.close();
+  };
+
   return (
     <ConfirmationModal
       ref={ref}
@@ -50,11 +57,32 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       primaryButton={{
         ...primaryButton,
         onClick: () => {
-          primaryButton?.onClick?.(notes);
+          if (primaryButton && primaryButton?.onClick) {
+            primaryButton?.onClick?.(notes);
+          } else {
+            closeModalHandler();
+          }
+
           setNotes('');
         },
       }}
-      secondaryButton={secondaryButton}
+      secondaryButton={
+        secondaryButton
+          ? {
+              ...secondaryButton,
+              text: secondaryButton?.text ?? 'Tidak',
+              onClick: (e) => {
+                if (secondaryButton && secondaryButton?.onClick) {
+                  secondaryButton.onClick?.(e);
+                } else {
+                  closeModalHandler();
+                }
+
+                setNotes('');
+              },
+            }
+          : undefined
+      }
       className={className}
       {...props}
     >

src/components/pages/ApprovalSteps.tsx

@@ -309,9 +309,10 @@ const useApprovalSteps = ({
   moduleId: string;
   params?: {
     page?: number;
-    limit: number | string;
+    limit?: number | string;
     search?: string;
     group_step_number?: boolean;
+    order_by_date?: 'ASC' | 'DESC';
   };
 }) => {
   // Membuat URL Parameters
@@ -319,6 +320,8 @@ const useApprovalSteps = ({
     page: params?.page?.toString() || '',
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
+    group_step_number: params?.group_step_number?.toString() || '',
+    order_by_date: params?.order_by_date || '',
   }).toString();
 
   // fetching data approvals

src/components/pages/closing/ClosingDetailTabs.tsx

@@ -5,28 +5,23 @@ 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/ClosingGeneralInformationTable';
-import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
-import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
+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 {
-  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 { 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 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;
 }
@@ -34,25 +29,24 @@ interface ClosingDetailProps {
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
-  salesData,
-  hppExpeditionData,
   projectData,
   kandangData,
 }) => {
-  const [activeTab, setActiveTab] = useState<string>('sapronak');
+  const [activeTabId, setActiveTabId] = useState<string>('sapronak');
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const closingDetailTabs = useMemo(() => {
     const validTabs = [
       {
         id: 'sapronak',
         label: 'Sapronak',
-        content: <ClosingSapronakTabContent projectFlockId={id} />,
+        content: <SapronakClosingTab projectFlockId={id} />,
       },
       {
         id: 'perhitunganSapronak',
         label: 'Perhitungan Sapronak',
         content: (
-          <ClosingSapronakCalculationTabContent
+          <SapronakCalculationClosingTab
             closingGeneralInformation={initialValue}
             projectFlockId={id}
           />
@@ -61,36 +55,42 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'penjualan',
         label: 'Penjualan',
-        content: <SalesReportTable initialValues={salesData} />,
+        content: <SalesClosingTab projectFlockId={id} />,
       },
       {
         id: 'overhead',
         label: 'Overhead',
-        content: <ClosingOverheadTabContent projectFlockId={id} />,
+        content: (
+          <OverheadClosingTab
+            projectFlockId={id}
+            generalInformation={initialValue}
+            kandangData={kandangData}
+          />
+        ),
       },
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
+        content: <HppExpeditionClosingTab projectFlockId={id} />,
       },
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: <ClosingProductionDataTabContent projectFlockId={id} />,
+        content: <ProductionDataClosingTab projectFlockId={id} />,
       },
       {
         id: 'keuangan',
         label: 'Keuangan',
-        content: <ClosingFinanceTabContent projectFlockId={id} />,
+        content: <FinanceClosingTab projectFlockId={id} />,
       },
     ];
 
     return validTabs;
-  }, [initialValue]);
+  }, [initialValue, kandangData, id]);
 
   return (
     <>
-      <section className='w-full max-w-7xl pb-16'>
+      <section className='w-full'>
         <header className='flex flex-col gap-4'>
           <Button
             href={
@@ -112,21 +112,24 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           kandangData={kandangData}
         />
 
-        {!kandangData && (
-          <ClosingKandangList
-            initialValue={initialValue}
-            projectData={projectData}
-          />
-        )}
+        <ClosingKandangList
+          initialValue={initialValue}
+          projectData={projectData}
+          selectedKandangId={kandangData?.id}
+        />
 
         <Tabs
-          activeTabId={activeTab}
-          onTabChange={setActiveTab}
+          activeTabId={activeTabId}
+          onTabChange={setActiveTabId}
           tabs={closingDetailTabs}
-          variant='lifted'
+          variant='boxed'
           className={{
-            wrapper: 'w-full mt-4',
+            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',
           }}
+          sideContent={tabActions[activeTabId] || null}
         />
       </section>
     </>

src/components/pages/closing/ClosingFinanceTabContent.tsx

@@ -1,17 +0,0 @@
-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;