Merge branch 'development' into 'staging'

Development

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

.gitlab-ci.yml

@@ -2,6 +2,17 @@ stages:
   - build
   - deploy
 
+# ==========================================================
+# ✅ Global defaults
+# ==========================================================
+default:
+  tags:
+    - server-development-biznet
+  interruptible: true
+
+# ==========================================================
+# 🏗️ Build Template
+# ==========================================================
 .build_template: &build_template
   stage: build
   image: node:20-alpine
@@ -39,6 +50,9 @@ stages:
       - out/
     expire_in: 1 week
 
+# ==========================================================
+# 🚀 Deploy Template
+# ==========================================================
 .deploy_template: &deploy_template
   stage: deploy
   image:
@@ -73,8 +87,8 @@ stages:
 
       if [ "$CI_COMMIT_BRANCH" = "development" ]; then
         ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-PROD"
+      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-STAGING"
       else
         ENVIRONMENT_NAME="UNKNOWN"
       fi
@@ -82,11 +96,11 @@ stages:
       if [ "$STATUS" = "success" ]; then
         COLOR=3066993
         TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
-        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` completed successfully."
+        DESC="Deployment job on branch \${CI_COMMIT_REF_NAME}\ completed successfully."
       else
         COLOR=15158332
         TITLE="❌ Deployment ${ENVIRONMENT_NAME} Failed"
-        DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` encountered issues."
+        DESC="Deployment job on branch \${CI_COMMIT_REF_NAME}\ encountered issues."
       fi
 
       jq -n \
@@ -114,7 +128,9 @@ stages:
 
       curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
 
-# ====== DEVELOPMENT (Branch development) ======
+# ==========================================================
+# ==== DEVELOPMENT (Branch development) ======
+# ==========================================================
 build:dev:
   <<: *build_template
   rules:
@@ -122,8 +138,6 @@ build:dev:
   environment:
     name: development
   variables:
-    # NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
-    # NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
     NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
     NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
     NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
@@ -141,25 +155,31 @@ deploy:dev:
   environment:
     name: development
     url: https://dev-lti-erp.mbugroup.id
-# ====== PRODUCTION ======
-# build:production:
-#   <<: *build_template
-#   rules:
-#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
-#     - if: '$CI_COMMIT_BRANCH == "master"'
-#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
-#   environment:
-#     name: production
 
-# deploy:production:
-#   <<: *deploy_template
-#   needs: ["build:production"]
-#   rules:
-#     - if: '$CI_COMMIT_BRANCH == "master"'
-#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
-#   variables:
-#     S3_BUCKET: "lti-erp.mbugroup.id"
-#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
-#   environment:
-#     name: production
+# ==========================================================
+# ====== STAGING (Branch staging) ======
+# ==========================================================
+build:staging:
+  <<: *build_template
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  environment:
+    name: staging
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
+    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'
 
+deploy:staging:
+  <<: *deploy_template
+  needs: ['build:staging']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  variables:
+    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
+  environment:
+    name: staging
+    url: https://stg-lti-erp.mbugroup.id

.husky/pre-commit

@@ -1,3 +1,3 @@
 npm run format
 npm run lint
-npm run build
+npx tsc --noEmit

Dockerfile

@@ -1,25 +1,38 @@
-FROM node:20-alpine
-
-RUN apk add --no-cache git bash build-base curl
+# =========================
+# Builder stage
+# =========================
+FROM golang:1.23-alpine AS builder
 
+RUN apk add --no-cache git ca-certificates tzdata
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm ci
+COPY go.mod go.sum ./
+RUN go mod download
 
 COPY . .
 
-# Buat config agar Next tahu output: export
-RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
+# Build API binary
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -trimpath -ldflags="-s -w" -o lti-api ./cmd/api
 
-# Build project (Next.js 15 otomatis static export)
-RUN NEXT_DISABLE_TURBOPACK=1 npx next build
+# Build SEED binary (pastikan cmd/seed ada)
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -trimpath -ldflags="-s -w" -o lti-seed ./cmd/seed
 
-# Copy static assets dan hasil build agar bisa diakses
-RUN mkdir -p .next/server/app/_next && \
-    cp -r .next/static .next/server/app/_next/static && \
-    cp -r public/* .next/server/app/
+# =========================
+# Runtime stage
+# =========================
+FROM alpine:3.20
 
-EXPOSE 3000
+RUN apk add --no-cache ca-certificates tzdata curl bash postgresql-client \
+  && adduser -D -H -u 10001 appuser
 
-CMD ["npx", "serve", ".next/server/app", "-l", "3000"]
+WORKDIR /app
+
+COPY --from=builder /app/lti-api /app/lti-api
+COPY --from=builder /app/lti-seed /app/lti-seed
+
+USER appuser
+EXPOSE 8081
+
+CMD ["/app/lti-api"]

docker-compose.yaml

@@ -1,39 +0,0 @@
-version: '3.9'
-
-services:
-  dev-web-lti:
-    container_name: dev-web-lti
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - '3002:3000'
-    env_file:
-      - .env
-    environment:
-      NODE_ENV: production
-      APP_ENV: production
-    networks:
-      - dev-lti-network
-    restart: always
-    deploy:
-      resources:
-        limits:
-          cpus: '3.0'
-          memory: 3G
-        reservations:
-          cpus: '1.0'
-          memory: 512M
-    extra_hosts:
-      - 'host.docker.internal:host-gateway'
-    # Optional: aktifkan healthcheck jika punya endpoint
-    # healthcheck:
-    #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
-    #   interval: 10s
-    #   timeout: 3s
-    #   retries: 10
-    #   start_period: 15s
-
-networks:
-  dev-lti-network:
-    external: true

package.json

@@ -15,20 +15,37 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "exceljs": "^4.4.0",
     "formik": "^2.4.6",
+    "html-to-image": "^1.11.13",
+    "input-otp": "^1.4.2",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.2",
+    "lucide-react": "^0.562.0",
     "moment": "^2.30.1",
-    "next": "^15.5.7",
-    "react": "19.1.0",
+    "next": "15.5.9",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "^19.1.2",
     "react-day-picker": "^9.11.1",
-    "react-dom": "19.1.0",
+    "react-dom": "^19.1.2",
     "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.70.0",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
+    "react-resizable-panels": "2.1.7",
     "react-select": "^5.10.2",
+    "recharts": "^3.6.0",
+    "sonner": "^2.0.7",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.6",
+    "vaul": "^1.1.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },
@@ -39,7 +56,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "daisyui": "^5.5.8",
+    "daisyui": "^5.5.14",
     "eslint": "^9",
     "eslint-config-next": "^15.5.7",
     "husky": "^9.1.7",

src/app/closing/detail/page.tsx

@@ -3,25 +3,34 @@
 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 { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { ProjectFlockKandangApi } from '@/services/api/production';
 
 const ClosingDetailPage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const closingId = searchParams.get('closingId');
+  const kandangId = searchParams.get('kandangId'); // project flock kandang ID
 
   const { data: closing, isLoading: isLoadingClosing } = useSWR(
     closingId,
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
-  const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    closingId ? `sales-${closingId}` : null,
-    () => ClosingApi.getPenjualan(Number(closingId))
+  // WORKAROUND - get flock data from closing ID
+  const { data: projectData, isLoading: isLoadingProject } = useSWR(
+    `flock-${closingId}`,
+    () => ProjectFlockApi.getSingle(Number(closingId))
+  );
+  // WORKAROUND - get kandang data from closing ID
+  const { data: kandangData, isLoading: isLoadingKandang } = useSWR(
+    kandangId ? `kandang-${closingId}-${kandangId}` : null,
+    () => ProjectFlockKandangApi.getSingle(Number(kandangId))
   );
 
   if (!closingId) {
@@ -39,7 +48,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales;
+  const isLoading = isLoadingClosing || isLoadingProject || isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -49,7 +58,12 @@ const ClosingDetailPage = () => {
         <ClosingDetail
           id={Number(closingId)}
           initialValue={closing.data}
-          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          projectData={
+            isResponseSuccess(projectData) ? projectData.data : undefined
+          }
+          kandangData={
+            isResponseSuccess(kandangData) ? kandangData.data : undefined
+          }
         />
       )}
     </div>

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/daily-checklist/page.tsx

@@ -0,0 +1,11 @@
+import { DailyChecklistContent } from '@/figma-make/components/pages/daily-checklist/DailyChecklistContent';
+
+const DailyChecklistPage = () => {
+  return (
+    <section className='w-full'>
+      <DailyChecklistContent />
+    </section>
+  );
+};
+
+export default DailyChecklistPage;

src/app/daily-checklist/dashboard/page.tsx

@@ -0,0 +1,11 @@
+import { Dashboard as DashboardDailyChecklist } from '@/figma-make/components/pages/dashboard/Dashboard';
+
+const DailyChecklistDashboardPage = () => {
+  return (
+    <section className='w-full'>
+      <DashboardDailyChecklist />
+    </section>
+  );
+};
+
+export default DailyChecklistDashboardPage;

src/app/daily-checklist/list-daily-checklist/detail/page.tsx

@@ -0,0 +1,11 @@
+import { DetailDailyChecklistContent } from '@/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent';
+
+const ListDailyChecklistDetailPage = () => {
+  return (
+    <section className='w-full'>
+      <DetailDailyChecklistContent />
+    </section>
+  );
+};
+
+export default ListDailyChecklistDetailPage;

src/app/daily-checklist/list-daily-checklist/page.tsx

@@ -0,0 +1,11 @@
+import { ListDailyChecklistContent } from '@/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent';
+
+const ListDailyChecklistPage = () => {
+  return (
+    <section className='w-full'>
+      <ListDailyChecklistContent />
+    </section>
+  );
+};
+
+export default ListDailyChecklistPage;

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

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

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

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

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

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

src/app/daily-checklist/reports/page.tsx

@@ -0,0 +1,11 @@
+import { DailyChecklistReportsContent } from '@/figma-make/components/pages/reports/DailyChecklistReportsContent';
+
+const DailyChecklistReportsPage = () => {
+  return (
+    <section className='w-full'>
+      <DailyChecklistReportsContent />
+    </section>
+  );
+};
+
+export default DailyChecklistReportsPage;

src/app/dashboard/page.tsx

@@ -1,9 +1,7 @@
+import DashboardProduction from '@/components/pages/dashboard/DashboardProduction';
+
 const Dashboard = () => {
-  return (
-    <section className='w-full p-4'>
-      <h1 className='text-3xl font-bold text-primary'>Dashboard</h1>
-    </section>
-  );
+  return <DashboardProduction />;
 };
 
 export default Dashboard;

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

@@ -38,9 +38,11 @@ const ExpenseEditPage = () => {
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
     expense.data.latest_approval.step_number !== 5 &&
+    expense.data.latest_approval.step_number !== 6 &&
     (expense.data.latest_approval.step_number === 1 ||
       expense.data.latest_approval.step_number === 2 ||
-      expense.data.latest_approval.step_number === 3);
+      expense.data.latest_approval.step_number === 3 ||
+      expense.data.latest_approval.step_number === 4);
 
   if (!isLoadingExpense && !isExpenseCanBeEdited) {
     router.back();

src/app/expense/page.tsx

@@ -2,7 +2,7 @@ import ExpensesTable from '@/components/pages/expense/ExpensesTable';
 
 const Expense = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <ExpensesTable />
     </section>
   );

src/app/expense/realization/edit/page.tsx

@@ -38,8 +38,8 @@ const ExpenseRealizationEditPage = () => {
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
     expense.data.latest_approval.action !== 'REJECTED' &&
-    (expense.data.latest_approval.step_number === 4 ||
-      expense.data.latest_approval.step_number === 5);
+    (expense.data.latest_approval.step_number === 5 ||
+      expense.data.latest_approval.step_number === 6);
 
   if (!isLoadingExpense && !isExpenseRealizationCanBeEdited) {
     router.back();

src/app/expense/realization/page.tsx

@@ -37,7 +37,7 @@ const ExpenseRealization = () => {
   const isExpenseCanBeRealized =
     isResponseSuccess(expense) &&
     expense.data.latest_approval.action !== 'REJECTED' &&
-    expense.data.latest_approval.step_number === 3;
+    expense.data.latest_approval.step_number === 4;
 
   if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
     if (typeof window !== 'undefined') {

src/app/finance/add/adjust/page.tsx

@@ -0,0 +1,5 @@
+const FinanceAdjust = () => {
+  return <div>Finance Adjust</div>;
+};
+
+export default FinanceAdjust;

src/app/finance/add/initial-balance/page.tsx

@@ -0,0 +1,7 @@
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const FinanceAddInitialBalancePage = () => {
+  return <FormFinanceAddInitialBalance type='add' />;
+};
+
+export default FinanceAddInitialBalancePage;

src/app/finance/add/injection/page.tsx

@@ -0,0 +1,7 @@
+import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
+
+const FinanceAddInjectionPage = () => {
+  return <FormFinanceInjection type='add' />;
+};
+
+export default FinanceAddInjectionPage;

src/app/finance/add/page.tsx

@@ -1,16 +1,7 @@
-import FinanceForm from '@/components/pages/finance/form/FinanceForm';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'Finance | Add',
-};
+import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
 
 const FinanceAddPage = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <FinanceForm formType='add' />
-    </div>
-  );
+  return <FormFinanceAdd />;
 };
 
 export default FinanceAddPage;

src/app/finance/detail/edit/initial-balance/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const EditFinanceInitialBalancePage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceAddInitialBalance
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceInitialBalancePage;

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
+
+const EditFinanceInjectionPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceInjection
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceInjectionPage;

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+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';
+
+const EditFinanceTransactionPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceAdd
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceTransactionPage;

src/app/finance/detail/page.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import FinanceDetail from '@/components/pages/finance/FinanceDetail';
+import useSWR from 'swr';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const FinanceDetailPage = () => {
+  const router = useRouter();
+  const financeId = useSearchParams().get('financeId');
+
+  const { data: finance } = useSWR(financeId, () =>
+    FinanceApi.getSingle(Number(financeId))
+  );
+
+  if (!financeId) {
+    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 (!finance || isResponseError(finance)) {
+  //   router.replace('/404');
+  //   return;
+  // }
+
+  return (
+    <>
+      {isResponseSuccess(finance) && <FinanceDetail finance={finance.data} />}
+    </>
+  );
+};
+
+export default FinanceDetailPage;

src/app/finance/page.tsx

@@ -1,9 +1,12 @@
-import FinancesTable from '@/components/pages/finance/FinancesTable';
+'use client';
+
+import FinanceTable from '@/components/pages/finance/FinanceTable';
 
 const Finance = () => {
   return (
-    <section className='w-full p-4'>
-      <FinancesTable />
+    <section className='size-full p-6'>
+      <div className='flex flex-row gap-4'></div>
+      <FinanceTable />
     </section>
   );
 };

src/app/globals.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/tailwind.css';
 @import '../styles/daisyui.css';
+@import '../figma-make/styles/theme.css';
 
 @plugin "daisyui/theme" {
   name: 'lti';
@@ -28,16 +30,16 @@
   --color-base-100: oklch(100% 0 0); /* #ffffff */
   --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
   --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+  --color-base-content: #18181b;
 
   /* Status/Utility Colors */
   --color-info: oklch(67.4% 0.176 238.9);
   --color-info-content: oklch(0% 0 0); /* #000000 */
-  --color-success: oklch(62.3% 0.147 149);
+  --color-success: #00d390;
   --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: oklch(82.2% 0.165 91.9);
+  --color-warning: #fcb700;
   --color-warning-content: oklch(0% 0 0); /* #000000 */
-  --color-error: oklch(61.8% 0.203 27.8);
+  --color-error: #ff3a3a;
   --color-error-content: oklch(100% 0 0); /* #fffffff */
 
   --radius-selector: 0rem;
@@ -51,17 +53,23 @@
 }
 
 :root {
-  --color-primary: #1f74bf;
+  --color-primary: #0069e0;
 }
 
 @theme {
   --font-inter: var(--font-inter);
+  --font-roboto: var(--font-roboto);
 
   --container-sm: 40rem;
   --container-md: 48rem;
   --container-lg: 64rem;
   --container-xl: 80rem;
   --container-2xl: 96rem;
+
+  --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/movement/page.tsx

@@ -2,7 +2,7 @@ import MovementTable from '@/components/pages/inventory/movement/MovementTable';
 
 const Movement = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <MovementTable />
     </section>
   );

src/app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter } from 'next/font/google';
+import { Inter, Roboto } from 'next/font/google';
 import '@/app/globals.css';
 
 import { Toaster } from 'react-hot-toast';
+import { Toaster as SonnerToaster } from '@/figma-make/components/base/sonner';
 import MainDrawer from '@/components/MainDrawer';
 import RequireAuth from '@/components/helper/RequireAuth';
 
@@ -11,6 +12,12 @@ const inter = Inter({
   subsets: ['latin'],
 });
 
+const roboto = Roboto({
+  variable: '--font-roboto',
+  subsets: ['latin'],
+  weight: ['200', '300', '400', '500', '600', '700', '900'],
+});
+
 export const viewport: Viewport = {
   themeColor: '#1f74bf',
   colorScheme: 'light',
@@ -29,12 +36,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='en' data-theme='lti'>
-      <body className={`${inter.variable} antialiased font-inter`}>
+      <body
+        className={`${inter.variable} ${roboto.variable} antialiased font-inter`}
+      >
         <RequireAuth>
           <MainDrawer>{children}</MainDrawer>
         </RequireAuth>
 
         <Toaster />
+        <SonnerToaster position='top-right' />
       </body>
     </html>
   );

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/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/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/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/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/production-standard/add/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
+
+const AddProductionStandardPage = () => {
+  return (
+    <>
+      <ProductionStandardForm formType='add' />
+    </>
+  );
+};
+
+export default AddProductionStandardPage;

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

@@ -0,0 +1,56 @@
+'use client';
+
+import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProductionStandardApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const EditProductionStandardPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const productionStandardId = searchParams.get('productionStandardId');
+
+  // Fetch Data
+  const { data: productionStandard, isLoading: isLoadingProductionStandard } =
+    useSWR(productionStandardId, (id: number) =>
+      ProductionStandardApi.getSingle(id)
+    );
+
+  if (!productionStandardId) {
+    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 (
+    !isLoadingProductionStandard &&
+    (!productionStandard || isResponseError(productionStandard))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      {isLoadingProductionStandard && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductionStandard &&
+        isResponseSuccess(productionStandard) && (
+          <ProductionStandardForm
+            formType='edit'
+            initialValue={productionStandard.data}
+          />
+        )}
+    </>
+  );
+};
+
+export default EditProductionStandardPage;

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

@@ -0,0 +1,56 @@
+'use client';
+
+import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProductionStandardApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const DetailProductionStandardPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const productionStandardId = searchParams.get('productionStandardId');
+
+  // Fetch Data
+  const { data: productionStandard, isLoading: isLoadingProductionStandard } =
+    useSWR(productionStandardId, (id: number) =>
+      ProductionStandardApi.getSingle(id)
+    );
+
+  if (!productionStandardId) {
+    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 (
+    !isLoadingProductionStandard &&
+    (!productionStandard || isResponseError(productionStandard))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      {isLoadingProductionStandard && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductionStandard &&
+        isResponseSuccess(productionStandard) && (
+          <ProductionStandardForm
+            formType='detail'
+            initialValue={productionStandard.data}
+          />
+        )}
+    </>
+  );
+};
+
+export default DetailProductionStandardPage;

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

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

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();
@@ -25,5 +24,9 @@ export default function Home() {
     );
   }
 
-  return <>Loading...</>;
+  return (
+    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
+      <span className='loading loading-spinner loading-lg'></span>
+    </main>
+  );
 }

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/chickin/add/page.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import ProjectFlockChickinDetail from '@/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail';
-import { useSearchParams } from 'next/navigation';
-
-const AddChickin = () => {
-  const searchParams = useSearchParams();
-  const projectFlockId = searchParams.get('projectFlockId');
-
-  return (
-    <>
-      <section className='w-full'>
-        <ProjectFlockChickinDetail projectFlockId={Number(projectFlockId)} />
-      </section>
-    </>
-  );
-};
-
-export default AddChickin;

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

@@ -1,10 +0,0 @@
-import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
-
-const Chickin = () => {
-  return (
-    <section className='w-full'>
-      <ChickinTable />
-    </section>
-  );
-};
-export default Chickin;

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

@@ -14,13 +14,13 @@ const ProjectFlockClosingPage = () => {
   const projectFlockKandangId = searchParams.get('projectFlockKandangId');
 
   const { data: projectFlockKandang, isLoading: isLoadingProjectFlockKandang } =
-    useSWR(projectFlockKandangId, (id: number) =>
-      ProjectFlockKandangApi.getSingle(id)
+    useSWR(`get-flock-kandang-id/${projectFlockKandangId}`, () =>
+      ProjectFlockKandangApi.getSingle(parseInt(projectFlockKandangId ?? ''))
     );
 
   const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
+    `get-flock-id/${projectFlockId}`,
+    () => ProjectFlockApi.getSingle(parseInt(projectFlockId ?? ''))
   );
 
   if (!projectFlockId || !projectFlockKandangId) {

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,
@@ -15,7 +15,7 @@ export default function ProjectFlockLayout({
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
 
-  const isAdd = pathname.endsWith('/add');
+  const isAdd = pathname.includes('/add');
   const isEdit = pathname.includes('/detail/edit');
   const isDetail = pathname.includes('/detail');
   const isChickin = pathname.includes('/chickin/add/kandang');
@@ -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

@@ -14,7 +14,7 @@ const RecordingEdit = () => {
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
     recordingId,
-    (id: number) => RecordingApi.getSingle(id) // Gunakan RecordingApi
+    (id: string) => RecordingApi.getSingle(parseInt(id))
   );
 
   if (!recordingId) {

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

@@ -14,7 +14,7 @@ const RecordingDetail = () => {
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
     recordingId,
-    (id: number) => RecordingApi.getSingle(id)
+    (id: string) => RecordingApi.getSingle(parseInt(id))
   );
 
   if (!recordingId) {

src/app/production/recording/page.tsx

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

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

@@ -1,11 +0,0 @@
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-const AddTransferToLaying = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <TransferToLayingForm />
-    </div>
-  );
-};
-
-export default AddTransferToLaying;

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

@@ -1,63 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    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 (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  if (
-    isResponseSuccess(transferToLaying) &&
-    transferToLaying.data.approval.step_number === 2
-  ) {
-    router.replace('/production/transfer-to-laying');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='edit'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingEdit;

src/app/production/transfer-to-laying/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/production/transfer-to-laying/detail/page.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    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 (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='detail'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingDetail;

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

@@ -1,9 +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 p-4'>
+    <section className='w-full'>
       <TransferToLayingsTable />
+
+      <RequirePermission
+        permissions={[
+          'lti.production.transfer_to_laying.create',
+          'lti.production.transfer_to_laying.update',
+        ]}
+      >
+        <TransferToLayingFormModal />
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
+        <TransferToLayingDetailModal />
+      </RequirePermission>
     </section>
   );
 };

src/app/production/uniformity/add/page.tsx

@@ -0,0 +1,7 @@
+import UniformityForm from '@/components/pages/production/uniformity/form/UniformityForm';
+
+const AddUniformity = () => {
+  return <UniformityForm formType='add' />;
+};
+
+export default AddUniformity;

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

@@ -0,0 +1,49 @@
+'use client';
+
+import UniformityDetail from '@/components/pages/production/uniformity/detail/UniformityDetail';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { UniformityApi } from '@/services/api/uniformity';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const UniformityDetailPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const uniformityId = searchParams.get('uniformityId');
+
+  const { data: uniformity, isLoading: isLoadingUniformity } = useSWR(
+    uniformityId,
+    (id: string) => UniformityApi.getUniformityDetail(parseInt(id))
+  );
+
+  if (!uniformityId) {
+    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 (!isLoadingUniformity && (!uniformity || isResponseError(uniformity))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full h-full flex flex-col justify-center'>
+      {isLoadingUniformity && (
+        <div className='w-full flex flex-row justify-center items-center p-4 min-h-screen'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      )}
+      {isResponseSuccess(uniformity) && (
+        <UniformityDetail initialValues={uniformity.data} />
+      )}
+    </div>
+  );
+};
+
+export default UniformityDetailPage;

src/app/production/uniformity/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import UniformityPageWrapper from '@/components/pages/production/uniformity/UniformityPageWrapper';
+
+export default function UniformityLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <UniformityPageWrapper>{children}</UniformityPageWrapper>;
+}

src/app/production/uniformity/page.tsx

@@ -0,0 +1,7 @@
+import UniformityTable from '@/components/pages/production/uniformity/UniformityTable';
+
+const Uniformity = () => {
+  return <UniformityTable />;
+};
+
+export default Uniformity;

src/app/purchase/page.tsx

@@ -2,7 +2,7 @@ import PurchaseTable from '@/components/pages/purchase/PurchaseTable';
 
 const Purchase = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <PurchaseTable />
     </section>
   );

src/app/report/expense/detail/page.tsx

@@ -0,0 +1,5 @@
+const ReportExpenseDetail = () => {
+  return <div>ReportExpenseDetail</div>;
+};
+
+export default ReportExpenseDetail;

src/app/report/expense/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import ReportExpenseTabs from '@/components/pages/report/expense/ReportExpenseTabs';
+
+const ReportExpense = () => {
+  return <ReportExpenseTabs />;
+};
+
+export default ReportExpense;

src/app/report/finance/page.tsx

@@ -0,0 +1,7 @@
+import FinanceTabs from '@/components/pages/report/finance/FinanceTabs';
+
+const Finance = () => {
+  return <FinanceTabs />;
+};
+
+export default Finance;

src/app/report/logistic-stock/page.tsx

@@ -0,0 +1,7 @@
+import LogisticStockTabs from '@/components/pages/report/logistic-stock/LogisticStockTabs';
+
+const LogisticStock = () => {
+  return <LogisticStockTabs />;
+};
+
+export default LogisticStock;

src/app/report/marketing/page.tsx

@@ -0,0 +1,7 @@
+import MarketingReportContent from '@/components/pages/report/marketing/MarketingTabs';
+
+const MarketingReportPage = () => {
+  return <MarketingReportContent />;
+};
+
+export default MarketingReportPage;

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

@@ -0,0 +1,11 @@
+import ProductionResultTabs from '@/components/pages/report/production-result/ProductionResultTabs';
+
+const ProductionResultReportPage = () => {
+  return (
+    <section className='w-full max-w-full'>
+      <ProductionResultTabs />
+    </section>
+  );
+};
+
+export default ProductionResultReportPage;

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/Badge.tsx

@@ -3,29 +3,25 @@
 import { HTMLAttributes, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
+import type { Color, Variant, Size } from '@/types/theme';
 
 export interface BadgeProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
   children?: ReactNode;
   className?: {
     badge?: string;
+    status?: string;
   };
-  variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
-  color?:
-    | 'neutral'
-    | 'primary'
-    | 'secondary'
-    | 'accent'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'error';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  statusIndicator?: boolean;
+  variant?: Variant;
+  color?: Color;
+  size?: Size;
 }
 
 const Badge = ({
   children,
   className,
+  statusIndicator = false,
   variant = 'default',
   color,
   size = 'md',
@@ -34,7 +30,7 @@ const Badge = ({
   const getBadgeClasses = () => {
     const baseClasses = 'badge';
 
-    const variantClasses = {
+    const variantClasses: Record<Variant, string> = {
       default: '',
       outline: 'badge-outline',
       ghost: 'badge-ghost',
@@ -42,7 +38,7 @@ const Badge = ({
       dash: 'badge-dash',
     };
 
-    const colorClasses = {
+    const colorClasses: Record<Color, string> = {
       neutral: 'badge-neutral',
       primary: 'badge-primary',
       secondary: 'badge-secondary',
@@ -51,9 +47,10 @@ const Badge = ({
       success: 'badge-success',
       warning: 'badge-warning',
       error: 'badge-error',
+      none: '',
     };
 
-    const sizeClasses = {
+    const sizeClasses: Record<Size, string> = {
       xs: 'badge-xs',
       sm: 'badge-sm',
       md: 'badge-md',
@@ -70,8 +67,31 @@ const Badge = ({
     );
   };
 
+  const getStatusClasses = () => {
+    if (!statusIndicator) return '';
+
+    const statusIndicatorClasses: Record<Color, string> = {
+      neutral: 'bg-neutral',
+      primary: 'bg-primary',
+      secondary: 'bg-secondary',
+      accent: 'bg-accent',
+      info: 'bg-info',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      error: 'bg-error',
+      none: '',
+    };
+
+    return cn(
+      'w-2.5 h-2.5 rounded-full',
+      color && statusIndicatorClasses[color],
+      className?.status
+    );
+  };
+
   return (
     <span className={getBadgeClasses()} {...props}>
+      {statusIndicator && <span className={getStatusClasses()} />}
       {children}
     </span>
   );

src/components/Breadcrumb.tsx

@@ -0,0 +1,263 @@
+import React, { useId } from 'react';
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+import { cn, findMenuPath } from '@/lib/helper';
+import { Size } from '@/types/theme';
+import Button from '@/components/Button';
+import { MAIN_DRAWER_LINKS } from '@/config/constant';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  isDisabled?: boolean;
+}
+
+interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+  items: BreadcrumbItem[];
+  size?: Size;
+  maxVisibleItems?: number;
+  showEllipsisDropdown?: boolean;
+}
+
+export function buildBreadcrumbs(pathname: string): BreadcrumbItem[] {
+  const menuPath = findMenuPath(MAIN_DRAWER_LINKS, pathname);
+
+  if (!menuPath) return [];
+
+  return menuPath.map((menu, index) => {
+    const isLast = index === menuPath.length - 1;
+
+    return {
+      label: menu.text,
+      href: isLast ? menu.link : undefined,
+      isActive: isLast,
+      icon: menu.icon ? (
+        <Icon icon={menu.icon} width={16} height={16} />
+      ) : undefined,
+    };
+  });
+}
+
+const EllipsisDropdown = ({
+  hiddenItems,
+}: {
+  hiddenItems: BreadcrumbItem[];
+}) => {
+  const dropdownId = useId();
+  const anchorId = useId();
+
+  return (
+    <li>
+      {/* Ellipsis Button */}
+      <Button
+        popoverTarget={dropdownId}
+        variant='ghost'
+        color='none'
+        style={
+          {
+            anchorName: `--breadcrumb-ellipsis-anchor-${anchorId}`,
+          } as React.CSSProperties
+        }
+      >
+        <Icon icon='material-symbols:more-horiz' width={16} height={16} />
+      </Button>
+
+      {/* Dropdown Menu using popover API */}
+      <ul
+        className='dropdown menu rounded-box bg-base-100 border border-base-300 shadow-lg z-[9999] [&_a:hover]:no-underline [&_a:focus]:no-underline [&&]:no-underline [&&_a]:no-underline [&&]:hover:no-underline [&&]:flex [&&]:items-start [&&]:justify-start w-max'
+        popover='auto'
+        id={dropdownId}
+        style={
+          {
+            positionAnchor: `--breadcrumb-ellipsis-anchor-${anchorId}`,
+          } as React.CSSProperties
+        }
+      >
+        {hiddenItems.map((item, index) => {
+          const itemStyles = cn(
+            '[&]:flex [&]:items-center [&]:justify-start py-1 text-sm',
+            // Disabled state
+            item.isDisabled && 'text-base-content/40 opacity-50',
+            // Active/Last state
+            (item.isActive || item.isDisabled) && 'text-primary',
+            // Regular clickable state
+            !item.isDisabled && 'text-base-content/50'
+          );
+
+          const itemContent = (
+            <div className={itemStyles}>
+              {item.icon && (
+                <span className='inline-flex mr-2'>{item.icon}</span>
+              )}
+              {item.label}
+            </div>
+          );
+
+          return (
+            <li
+              key={`ellipsis-${index}`}
+              className='[&&]:text-left [&&]:block w-full'
+            >
+              {item.href && !item.isDisabled ? (
+                <Link
+                  href={item.href}
+                  className='block !no-underline [&&]:text-left w-full'
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {itemContent}
+                </Link>
+              ) : (
+                <div className='block !no-underline [&&]:cursor-default [&&]:hover:cursor-default [&&]:hover:bg-base-100 [&&]:text-left'>
+                  {itemContent}
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </li>
+  );
+};
+
+const Breadcrumb = ({
+  items,
+  size = 'md',
+  maxVisibleItems = 3,
+  showEllipsisDropdown = true,
+  className,
+  ...props
+}: BreadcrumbsProps) => {
+  const sizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+  };
+
+  const getItemStyles = (
+    item: BreadcrumbItem,
+    position: 'first' | 'middle' | 'last' = 'middle'
+  ) => {
+    const baseClasses = 'inline-flex items-center gap-2';
+
+    // Disabled state
+    if (item.isDisabled) {
+      return `${baseClasses} text-base-content/40 !cursor-default opacity-50 hover:!no-underline`;
+    }
+
+    // Active/Last state (no underline)
+    if (item.isActive || position === 'last') {
+      return `${baseClasses} text-primary !cursor-pointer hover:!no-underline`;
+    }
+
+    // Regular clickable state
+    return `${baseClasses} text-base-content/60`;
+  };
+
+  const renderItem = (
+    item: BreadcrumbItem,
+    position: 'first' | 'middle' | 'last' = 'middle'
+  ) => {
+    const styles = getItemStyles(item, position);
+
+    // Disabled items
+    if (item.isDisabled) {
+      return (
+        <span className={styles}>
+          {item.icon && item.icon}
+          {item.label}
+        </span>
+      );
+    }
+
+    // Active/Last items
+    if (item.isActive || position === 'last') {
+      if (item.href) {
+        return (
+          <Link href={item.href} className={styles}>
+            {item.icon && (
+              <span className='inline-flex gap-2'>{item.icon}</span>
+            )}
+            {item.label}
+          </Link>
+        );
+      }
+      return (
+        <span className={styles}>
+          {item.icon && item.icon}
+          {item.label}
+        </span>
+      );
+    }
+
+    // Regular items
+    if (item.href) {
+      return (
+        <Link href={item.href} className={styles}>
+          {item.icon && <span className='inline-flex gap-2'>{item.icon}</span>}
+          {item.label}
+        </Link>
+      );
+    }
+
+    return (
+      <span className={styles}>
+        {item.icon && item.icon}
+        {item.label}
+      </span>
+    );
+  };
+
+  const renderBreadcrumbList = () => {
+    // Show all items if within limit
+    if (items.length <= maxVisibleItems) {
+      return items.map((item, index) => {
+        const position =
+          index === 0
+            ? 'first'
+            : index === items.length - 1
+              ? 'last'
+              : 'middle';
+        return <li key={index}>{renderItem(item, position)}</li>;
+      });
+    }
+
+    // Collapsed items indexing when exceeding limit
+    const firstItem = items[0];
+    const lastItem = items[items.length - 1];
+    const visibleMiddleItems = items.slice(1, -1).slice(-(maxVisibleItems - 2));
+    const hiddenItems = items.slice(1, -1).slice(0, -(maxVisibleItems - 2));
+    const showEllipsis = showEllipsisDropdown && hiddenItems.length > 0;
+
+    return (
+      <>
+        <li>{renderItem(firstItem, 'first')}</li>
+
+        {/* Ellipsis for hidden items with dropdown */}
+        {showEllipsis && <EllipsisDropdown hiddenItems={hiddenItems} />}
+
+        {/* Middle items */}
+        {visibleMiddleItems.map((item, index) => (
+          <li key={`middle-${index}`}>{renderItem(item, 'middle')}</li>
+        ))}
+
+        <li>{renderItem(lastItem, 'last')}</li>
+      </>
+    );
+  };
+
+  return (
+    <nav
+      aria-label='Breadcrumb'
+      className={cn('breadcrumbs', sizeClasses[size], className)}
+      {...props}
+    >
+      <ul className='text-sm'>{renderBreadcrumbList()}</ul>
+    </nav>
+  );
+};
+
+export default Breadcrumb;

src/components/Button.tsx

@@ -2,11 +2,12 @@ import react from 'react';
 import Link from 'next/link';
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
+import { UrlObject } from 'url';
 
 export interface ButtonProps extends react.ComponentProps<'button'> {
   variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
   color?: Color;
-  href?: string;
+  href?: string | UrlObject;
   isLoading?: boolean;
   target?: string;
   rel?: string;

src/components/Card.tsx

@@ -22,6 +22,7 @@ export interface CardProps
   onCollapsedChange?: (collapsed: boolean) => void;
   className?: {
     wrapper?: string;
+    wrapperContent?: string;
     image?: string;
     body?: string;
     title?: string;
@@ -122,6 +123,10 @@ const Card = ({
     return cn(baseClasses, 'p-6', className?.body);
   };
 
+  const getCollapsibleClasses = () => {
+    return cn('', className?.collapsible);
+  };
+
   const getTitleClasses = () => {
     const sizeClasses = {
       sm: 'text-lg',
@@ -144,11 +149,19 @@ const Card = ({
     return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
+  const getWrapperContentClasses = () => {
+    return cn('space-y-4', className?.wrapperContent);
+  };
+
   const renderCardContent = () => {
     const hasContent = children || actions || footer;
 
     const titleContent = (
-      <div className='group flex items-center !justify-between w-full'>
+      <div
+        className={
+          `group flex items-center justify-between! w-full` + getTitleClasses()
+        }
+      >
         <div className='flex-1'>
           {title && <h2 className={getTitleClasses()}>{title}</h2>}
           {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
@@ -156,7 +169,7 @@ const Card = ({
         {collapsible && (
           <button
             onClick={() => handleCollapsedChange(!isCollapsed)}
-            className='btn btn-ghost btn-sm btn-circle'
+            className={`btn btn-ghost btn-sm btn-circle` + getTitleClasses()}
             aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
           >
             <Icon
@@ -173,7 +186,7 @@ const Card = ({
     );
 
     const cardContent = (
-      <div className='space-y-4'>
+      <div className={getWrapperContentClasses()}>
         {children}
         {actions && <div className={getActionsClasses()}>{actions}</div>}
         {footer && <div className={getFooterClasses()}>{footer}</div>}
@@ -204,6 +217,7 @@ const Card = ({
               titleClassName='w-full cursor-pointer'
               contentClassName='p-0'
               fullWidth={true}
+              className={getCollapsibleClasses()}
             >
               {cardContent}
             </Collapse>

src/components/Drawer.tsx

@@ -15,6 +15,7 @@ interface DrawerProps {
   className?: DrawerClassName;
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
+  expandedContent?: ReactNode;
 }
 
 type DrawerClassName = {
@@ -23,6 +24,7 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
+  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -36,6 +38,7 @@ const Drawer = ({
   className,
   onBackdropClick,
   closeOnBackdropClick = true,
+  expandedContent,
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -46,12 +49,24 @@ const Drawer = ({
       drawerSidebarContent: 'min-h-full bg-base-100',
     };
 
+    const getSidebarWidth = () => {
+      if (variant === 'sidebar') {
+        return expandedContent
+          ? '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';
+    };
+
     if (variant === 'sidebar') {
       return {
         ...baseClassNames,
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full max-w-[300px] lg:w-[300px]'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'right') {
@@ -60,11 +75,11 @@ const Drawer = ({
         drawer: cn(baseClassNames.drawer, 'drawer-end'),
         drawerSide: cn(
           baseClassNames.drawerSide,
-          'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
+          'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'left') {
@@ -76,7 +91,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     }
@@ -138,14 +153,37 @@ const Drawer = ({
           onClick={closeDrawer}
         />
 
-        {/* Sidebar Content */}
+        {/* Sidebar Content - Full height container */}
         <div
           className={cn(
-            varianClassName?.drawerSidebarContent,
-            className?.drawerContent
+            'flex h-screen bg-base-100 overflow-hidden',
+            variant === 'right' && 'flex-row'
           )}
         >
-          {sidebarContent}
+          {/* Primary Sidebar Content */}
+          <div
+            className={cn(
+              varianClassName?.drawerSidebarContent,
+              className?.drawerSidebarContent,
+              'overflow-y-auto'
+            )}
+          >
+            {sidebarContent}
+          </div>
+
+          {/* Expanded Drawer (Right side, side-by-side) */}
+          {expandedContent && (
+            <div
+              className={cn(
+                'border-l border-gray-200 bg-white flex flex-col h-full',
+                className?.drawerExpandedContent
+              )}
+            >
+              <div className='overflow-y-auto flex-1 h-full'>
+                {expandedContent}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

src/components/Dropdown.tsx

@@ -0,0 +1,114 @@
+import React, { ReactNode, useState, useRef } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
+  align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  hover?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
+}
+
+const Dropdown = ({
+  trigger,
+  children,
+  className,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
+    }
+  };
+
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
+  };
+
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
+        {trigger}
+      </div>
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/FloatingActionsButton.tsx

@@ -5,6 +5,8 @@ import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 
+import { useAuth } from '@/services/hooks/useAuth';
+
 type FloatingActionsButtonProps = {
   actions: {
     action: 'DETAIL' | 'EDIT' | 'DELETE';
@@ -13,6 +15,7 @@ type FloatingActionsButtonProps = {
     onClick?: () => void;
     hidden?: boolean;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
@@ -20,6 +23,7 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -31,9 +35,12 @@ const FloatingActionsButton = ({
   selectedRowIds,
   onClose,
 }: FloatingActionsButtonProps) => {
+  const { permissionCheck } = useAuth();
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
-    selectedRowIds.length > 0 ? 'bottom-[10%]' : 'bottom-[-100%]';
+    selectedRowIds.length > 0
+      ? 'bottom-[5%] opacity-100'
+      : 'bottom-[-5%] opacity-0';
 
   // Helper untuk menentukan gaya warna tombol approval
   const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
@@ -53,7 +60,7 @@ const FloatingActionsButton = ({
     // Container utama FAB
     <div
       className={cn(
-        `absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
+        `fixed ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
         'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
         'bg-slate-950 backdrop-blur-md'
       )}
@@ -69,7 +76,18 @@ const FloatingActionsButton = ({
             <div className='flex gap-4 items-center'>
               {/* Render Aksi dari props.actions */}
               {actions
-                .filter((action) => !action.hidden)
+                .filter((action) => {
+                  if (action.hidden) return false;
+                  if (action.permissions) {
+                    if (typeof action.permissions === 'string') {
+                      return permissionCheck(action.permissions);
+                    }
+                    return action.permissions.some((permission) =>
+                      permissionCheck(permission)
+                    );
+                  }
+                  return true;
+                })
                 .map((action, index) => {
                   return (
                     <Button
@@ -109,29 +127,41 @@ const FloatingActionsButton = ({
 
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {approvals.map((approval, index) => (
-            <Button
-              key={index}
-              onClick={approval.onClick}
-              className={cn(
-                'btn btn-lg w-full',
-                'bg-white/20 border-white/30',
-                'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
-                approval.disabled
-                  ? 'cursor-not-allowed'
-                  : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
-              )}
-              disabled={approval.disabled}
-            >
-              <Icon
-                icon={approval.icon}
-                width={20}
-                height={20}
-                className={`text-${getApprovalColor(approval.action)}`}
-              />
-              {approval.label || approval.action}
-            </Button>
-          ))}
+          {approvals
+            .filter((approval) => {
+              if (approval.permissions) {
+                if (typeof approval.permissions === 'string') {
+                  return permissionCheck(approval.permissions);
+                }
+                return approval.permissions.some((permission) =>
+                  permissionCheck(permission)
+                );
+              }
+              return true;
+            })
+            .map((approval, index) => (
+              <Button
+                key={index}
+                onClick={approval.onClick}
+                className={cn(
+                  'btn btn-lg w-full',
+                  'bg-white/20 border-white/30',
+                  'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
+                  approval.disabled
+                    ? 'cursor-not-allowed'
+                    : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
+                )}
+                disabled={approval.disabled}
+              >
+                <Icon
+                  icon={approval.icon}
+                  width={20}
+                  height={20}
+                  className={`text-${getApprovalColor(approval.action)}`}
+                />
+                {approval.label || approval.action}
+              </Button>
+            ))}
         </div>
       </div>
     </div>

src/components/MainDrawer.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useCallback } from 'react';
 import { usePathname } from 'next/navigation';
 
 import Image from 'next/image';
@@ -9,10 +8,12 @@ import Drawer from '@/components/Drawer';
 import Navbar from '@/components/Navbar';
 import Button from '@/components/Button';
 import SidebarMenu from '@/components/molecules/SidebarMenu';
+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';
 
 const MainDrawerContent = () => {
   const pathname = usePathname();
@@ -23,29 +24,34 @@ const MainDrawerContent = () => {
   };
 
   return (
-    <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex flex-row items-center gap-4'>
-        <Image
-          src='/assets/img/lti-logo.png'
-          alt='MBU Logo'
-          width={256}
-          height={256}
-          className='w-full max-w-16 h-auto'
-        />
+    <div className='w-full flex flex-col'>
+      <div className='p-3 flex flex-row items-center gap-4 border-b border-base-content/10'>
+        <div className='flex flex-row items-center gap-2'>
+          <Image
+            src='/assets/img/lti-logo.png'
+            alt='LTI Logo'
+            width={40}
+            height={40}
+            className='w-full max-w-10 h-auto'
+          />
 
-        <h1 className='text-xl font-bold'>LTI ERP</h1>
+          <div className='font-roboto'>
+            <h1 className='text-sm font-semibold'>LTI ERP</h1>
+            <p className='text-sm text-black/50'>Lumbung Telur Indonesia</p>
+          </div>
+        </div>
 
         <div className='grow flex flex-row justify-end sm:hidden'>
           <Button
             variant='soft'
             color='error'
             onClick={closeMainDrawerHandler}
-            className='rounded-full'
+            className='p-1 rounded-full'
           >
             <Icon
               icon='material-symbols:close-rounded'
-              width={24}
-              height={24}
+              width={16}
+              height={16}
             />
           </Button>
         </div>
@@ -62,54 +68,41 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
+  const { permissionCheck } = useAuth();
 
-  const getPageTitle = useCallback(() => {
-    let title = '';
+  const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
 
-    const activeMenu = MAIN_DRAWER_LINKS.find((item) =>
-      isPathActive(pathname, item.link)
-    );
+  const isPathnameNotFoundPage = formattedPathname === '/404/';
 
-    const traverseMenuTitle = (menu: typeof activeMenu) => {
-      if (!menu) return;
-
-      const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
-
-      if (!title) {
-        title += menu?.text;
-      } else {
-        title += ' - ' + menu?.text;
-      }
-
-      if (!hasSubmenu || !menu.submenu) return;
-
-      const activeSubmenu = menu.submenu?.find((item) =>
-        isPathActive(pathname, item.link)
-      );
-
-      traverseMenuTitle(activeSubmenu);
-    };
-
-    traverseMenuTitle(activeMenu);
-
-    return title;
-  }, [pathname]);
-
-  const pageTitle = getPageTitle();
+  const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
+    permissionCheck(permission)
+  );
 
   const toggleSidebar = () => {
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
+  if (!isPermitted && !isPathnameNotFoundPage) {
+    return <PermissionNotFound />;
+  }
+
+  if (isPathnameNotFoundPage) {
+    return children;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}
       setOpen={setMainDrawerOpen}
       openOnLarge
       sidebarContent={<MainDrawerContent />}
+      className={{
+        drawerSide: 'border-r border-base-content/10',
+        drawerSidebarContent: 'min-w-[244px] lg:w-[244px]',
+      }}
     >
       <main className='w-full h-full flex flex-col'>
-        <Navbar title={pageTitle as string} toggleSidebar={toggleSidebar} />
+        <Navbar toggleSidebar={toggleSidebar} />
 
         {children}
       </main>

src/components/Modal.tsx

@@ -53,15 +53,25 @@ interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
+  onBackdropClick?: () => void;
+  position?: 'top' | 'middle' | 'bottom' | 'start' | 'end';
   className?: {
     modal?: string;
     modalBox?: string;
   };
 }
 
-const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+const Modal = ({
+  ref,
+  children,
+  closeOnBackdrop,
+  onBackdropClick,
+  position = 'middle',
+  className,
+}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
+      onBackdropClick?.();
       ref.current?.close();
     }
   };
@@ -69,7 +79,17 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   return (
     <dialog
       ref={ref}
-      className={cn('modal', className?.modal)}
+      className={cn(
+        'modal',
+        {
+          'modal-top': position === 'top',
+          'modal-middle': position === 'middle',
+          'modal-bottom': position === 'bottom',
+          'modal-start': position === 'start',
+          'modal-end': position === 'end',
+        },
+        className?.modal
+      )}
       onClick={handleBackdropClick}
     >
       <div className={cn('modal-box', className?.modalBox)}>{children}</div>

src/components/Navbar.tsx

@@ -1,26 +1,28 @@
 'use client';
 
 import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
 import { Icon } from '@iconify/react';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
+import Breadcrumb, { buildBreadcrumbs } from '@/components/Breadcrumb';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
 import { isResponseError } from '@/lib/api-helper';
+import { useUiStore } from '@/stores/ui/ui.store';
 
 interface NavbarProps {
-  title: string;
   toggleSidebar?: () => void;
 }
 
-const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
+const Navbar = ({ toggleSidebar }: NavbarProps) => {
   const { setUser } = useAuth();
   const router = useRouter();
+  const pathname = usePathname();
+  const navbarActions = useUiStore((state) => state.navbarActions);
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
@@ -35,39 +37,54 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
   };
 
   return (
-    <div className='navbar px-4 bg-base-100 shadow-sm'>
+    <div className='navbar p-3 bg-base-100 border-b border-base-content/10'>
       <div className='flex-1'>
         <div className='flex flex-row items-center gap-4'>
           {toggleSidebar && (
-            <Button onClick={toggleSidebar} className='block lg:hidden'>
-              <Icon
-                icon='material-symbols:menu-rounded'
-                width={24}
-                height={24}
-              />
+            <Button
+              variant='ghost'
+              color='none'
+              onClick={toggleSidebar}
+              className='block lg:hidden p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+            >
+              <Icon icon='heroicons:bars-3' width={20} height={20} />
             </Button>
           )}
 
-          <span className='font-bold text-xl text-primary'>{title}</span>
+          <Breadcrumb items={buildBreadcrumbs(pathname)} />
         </div>
       </div>
 
-      <div className='flex gap-2'>
-        <Dropdown
-          position='bottom-end'
-          trigger={
-            <div className='btn btn-ghost btn-circle avatar'>
-              <div className='w-10 rounded-full border flex justify-center items-center'>
-                <Icon icon='uil:user' width={40} height={40} />
-              </div>
-            </div>
-          }
-          contentClassName='w-52 mt-3'
+      <div className='flex gap-2 items-center'>
+        {/* Page-specific actions */}
+        {navbarActions && <div className='mr-2'>{navbarActions}</div>}
+        <PopoverButton
+          tabIndex={0}
+          variant='ghost'
+          color='none'
+          popoverTarget='accountNavbar'
+          anchorName='--account-navbar'
+          className='p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
         >
-          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
-            <MenuItem title='Logout' onClick={logoutClickHandler} />
-          </Menu>
-        </Dropdown>
+          <Icon icon='heroicons:user' width={20} height={20} />
+        </PopoverButton>
+
+        <PopoverContent
+          id='accountNavbar'
+          anchorName='--account-navbar'
+          position='bottom-start'
+          className='rounded-xl border border-base-content/5 shadow-sm'
+        >
+          <Button
+            onClick={logoutClickHandler}
+            variant='ghost'
+            color='error'
+            className='p-3 justify-start text-sm font-semibold w-full'
+          >
+            <Icon icon='heroicons-outline:logout' width={20} height={20} />
+            Logout
+          </Button>
+        </PopoverContent>
       </div>
     </div>
   );

src/components/Table.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react';
 import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
+  getExpandedRowModel,
   getSortedRowModel,
   TableOptions,
   useReactTable,
@@ -15,6 +16,7 @@ import {
   OnChangeFn,
   Row,
   HeaderContext,
+  ExpandedState,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -31,11 +33,16 @@ interface TableClassNames {
   headerColumnClassName?: string;
   tableBodyClassName?: string;
   bodyRowClassName?: string;
+  selectedBodyRowClassName?: string;
   bodyColumnClassName?: string;
+  bodySubRowClassName?: (depth: number) => string;
+  selectedBodySubRowClassName?: (depth: number) => string;
+  bodySubRowColumnClassName?: (depth: number) => string;
   tableFooterClassName?: string;
   footerRowClassName?: string;
   footerColumnClassName?: string;
   paginationClassName?: string;
+  skeletonCellClassName?: string;
 }
 
 export interface TableProps<TData extends object> {
@@ -59,14 +66,27 @@ export interface TableProps<TData extends object> {
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   renderFooter?: boolean;
   withCheckbox?: boolean;
+  withPagination?: boolean;
   rowOptions?: number[];
+  /**
+   * Custom row renderer. Should return a complete <tr> element or null.
+   * This gives full control over the row structure including colspan.
+   * Return null to render the default row.
+   */
+  renderCustomRow?: (row: Row<TData>) => ReactNode | null;
+  getRowCanExpand?: (row: Row<TData>) => boolean;
+  renderSubComponent?: (props: { row: Row<TData> }) => React.ReactElement;
+  expanded?: ExpandedState;
+  getSubRows?: (originalRow: TData, index: number) => TData[] | undefined;
 }
 
-const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
+const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
+  id: 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>
@@ -80,11 +100,18 @@ export const TABLE_DEFAULT_STYLING = {
   tableHeaderClassName: '',
   headerRowClassName: '',
   headerColumnClassName:
-    'px-4 py-3 border-base-content/10 text-base-content/50',
+    'px-4 py-3 border-base-content/10 text-base-content/50 text-sm font-medium',
   tableBodyClassName: '',
-  bodyRowClassName: 'border-t border-base-content/10',
-  bodyColumnClassName: 'px-4 py-3 text-base-content',
-  paginationClassName: '',
+  bodyRowClassName:
+    'transition-all duration-200 border-t border-base-content/10 bg-transparent',
+  selectedBodyRowClassName: 'bg-primary/5',
+  bodyColumnClassName: 'px-4 py-3 text-base-content font-medium',
+  bodySubRowClassName: (depth: number) =>
+    'transition-all duration-200 border-t border-base-content/10 bg-transparent',
+  selectedBodySubRowClassName: (depth: number) => 'bg-primary/5',
+  bodySubRowColumnClassName: (depth: number) =>
+    'px-4 py-3 text-base-content font-medium',
+  paginationClassName: 'px-3',
   tableFooterClassName: 'font-semibold border-base-content/10',
   footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
   footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
@@ -111,7 +138,13 @@ const Table = <TData extends object>({
   enableRowSelection,
   renderFooter = false,
   withCheckbox = false,
+  withPagination = true,
   rowOptions = [10, 20, 50, 100],
+  renderCustomRow,
+  getRowCanExpand,
+  renderSubComponent,
+  expanded = {},
+  getSubRows,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -144,10 +177,14 @@ const Table = <TData extends object>({
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: setPagination,
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: getRowCanExpand ?? (getSubRows ? undefined : () => false),
+    getSubRows,
     manualSorting,
     state: {
       pagination,
       globalFilter: fuzzySearchValue,
+      expanded,
     },
     filterFns: {
       fuzzy: fuzzyFilter,
@@ -215,14 +252,40 @@ const Table = <TData extends object>({
   }, [pageSize, setPageSize]);
 
   return (
-    <div className={tableClassNames.containerClassName}>
-      <div className={tableClassNames.tableWrapperClassName}>
-        <table className={tableClassNames.tableClassName}>
-          <thead className={tableClassNames.tableHeaderClassName}>
+    <div
+      className={cn(
+        TABLE_DEFAULT_STYLING.containerClassName,
+        tableClassNames.containerClassName,
+        {
+          'mb-0': !withPagination,
+        }
+      )}
+    >
+      <div
+        className={cn(
+          TABLE_DEFAULT_STYLING.tableWrapperClassName,
+          tableClassNames.tableWrapperClassName
+        )}
+      >
+        <table
+          className={cn(
+            TABLE_DEFAULT_STYLING.tableClassName,
+            tableClassNames.tableClassName
+          )}
+        >
+          <thead
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableHeaderClassName,
+              tableClassNames.tableHeaderClassName
+            )}
+          >
             {table.getHeaderGroups().map((headerGroup) => (
               <tr
                 key={headerGroup.id}
-                className={tableClassNames.headerRowClassName}
+                className={cn(
+                  TABLE_DEFAULT_STYLING.headerRowClassName,
+                  tableClassNames.headerRowClassName
+                )}
               >
                 {headerGroup.headers.map((header) => {
                   const columnRelativeDepth =
@@ -255,6 +318,7 @@ const Table = <TData extends object>({
                         {
                           'border-b': header.colSpan > 1,
                         },
+                        TABLE_DEFAULT_STYLING.headerColumnClassName,
                         tableClassNames.headerColumnClassName
                       )}
                     >
@@ -304,34 +368,124 @@ const Table = <TData extends object>({
             ))}
           </thead>
 
-          <tbody className={tableClassNames.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className={tableClassNames.bodyRowClassName}>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
+          <tbody
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableBodyClassName,
+              tableClassNames.tableBodyClassName
+            )}
+          >
+            {table.getRowModel().rows.map((row) => {
+              const customRowContent = renderCustomRow?.(row);
+
+              if (customRowContent) {
+                return renderCustomRow?.(row);
+              }
+
+              return (
+                <Fragment key={row.id}>
+                  <tr
+                    data-depth={row.depth}
                     className={cn(
-                      { 'first:w-9 first:pr-0': withCheckbox },
-                      tableClassNames.bodyColumnClassName
+                      row.depth > 0
+                        ? tableClassNames.bodySubRowClassName(row.depth)
+                        : tableClassNames.bodyRowClassName,
+                      {
+                        [tableClassNames.selectedBodyRowClassName!]:
+                          row.getIsSelected() && row.depth === 0,
+                        [tableClassNames.selectedBodySubRowClassName(
+                          row.depth
+                        )!]: row.getIsSelected() && row.depth > 0,
+                      }
                     )}
                   >
-                    {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {row.getVisibleCells().map((cell) => (
+                      <td
+                        key={cell.id}
+                        className={cn(
+                          { 'first:w-9 first:pr-0': withCheckbox },
+                          TABLE_DEFAULT_STYLING.bodyColumnClassName,
+                          row.depth > 0
+                            ? tableClassNames.bodySubRowColumnClassName(
+                                row.depth
+                              )
+                            : tableClassNames.bodyColumnClassName
+                        )}
+                      >
+                        {!isLoading &&
+                          flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
 
-                    {isLoading && <div className='skeleton w-full h-4' />}
+                        {isLoading && (
+                          <div
+                            className={cn(
+                              'skeleton w-full h-4',
+                              tableClassNames.skeletonCellClassName
+                            )}
+                          />
+                        )}
+                      </td>
+                    ))}
+                  </tr>
+
+                  {row.getIsExpanded() && (
+                    <>
+                      {renderSubComponent && (
+                        <tr
+                          className={cn(
+                            TABLE_DEFAULT_STYLING.bodySubRowClassName(1),
+                            tableClassNames.bodySubRowClassName(1),
+                            {
+                              [tableClassNames.selectedBodySubRowClassName(1)]:
+                                row.getIsSelected(),
+                            }
+                          )}
+                        >
+                          <td colSpan={row.getVisibleCells().length}>
+                            {renderSubComponent({ row })}
+                          </td>
+                        </tr>
+                      )}
+                    </>
+                  )}
+                </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>
-            ))}
+                </tr>
+              )}
           </tbody>
-          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
+          <tfoot
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableFooterClassName,
+              tableClassNames.tableFooterClassName
+            )}
+          >
             {renderFooter && (
-              <tr className={cn(tableClassNames.footerRowClassName)}>
+              <tr
+                className={cn(
+                  TABLE_DEFAULT_STYLING.footerRowClassName,
+                  tableClassNames.footerRowClassName
+                )}
+              >
                 {table.getAllLeafColumns().map((column) => (
                   <td
                     key={column.id}
                     className={cn(
                       { 'first:w-9 first:pr-0': withCheckbox },
+                      TABLE_DEFAULT_STYLING.footerColumnClassName,
                       tableClassNames.footerColumnClassName
                     )}
                   >
@@ -349,28 +503,33 @@ const Table = <TData extends object>({
         </table>
       </div>
 
-      {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+      {data.length > 0 &&
+        table.getRowModel().rows.length > 0 &&
         !isLoading &&
-        emptyContent}
-
-      {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
-        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
-          <Pagination
-            totalItems={isServerSideTable ? totalItems : table.getRowCount()}
-            itemsPerPage={table.getState().pagination.pageSize}
-            currentPage={
-              isServerSideTable
-                ? page
-                : table.getState().pagination.pageIndex + 1
-            }
-            onPrevPage={prevPageClickHandler}
-            onNextPage={nextPageClickHandler}
-            onPageChange={pageChangeHandler}
-            rowOptions={rowOptions}
-            onRowChange={onPageSizeChange}
-          />
-        </div>
-      )}
+        withPagination && (
+          <div
+            className={cn(
+              'mt-5',
+              TABLE_DEFAULT_STYLING.paginationClassName,
+              tableClassNames.paginationClassName
+            )}
+          >
+            <Pagination
+              totalItems={isServerSideTable ? totalItems : table.getRowCount()}
+              itemsPerPage={table.getState().pagination.pageSize}
+              currentPage={
+                isServerSideTable
+                  ? page
+                  : table.getState().pagination.pageIndex + 1
+              }
+              onPrevPage={prevPageClickHandler}
+              onNextPage={nextPageClickHandler}
+              onPageChange={pageChangeHandler}
+              rowOptions={rowOptions}
+              onRowChange={onPageSizeChange}
+            />
+          </div>
+        )}
     </div>
   );
 };

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 {
@@ -21,11 +21,14 @@ export interface TabsProps
   className?:
     | string
     | {
+        container?: string;
         wrapper?: string;
         tab?: string;
         content?: string;
+        tabHeaderWrapper?: string;
       };
   onTabChange?: (tabId: string) => void;
+  sideContent?: ReactNode;
 }
 
 const Tabs = ({
@@ -37,6 +40,7 @@ const Tabs = ({
   activeTabId: controlledActiveId,
   className,
   onTabChange,
+  sideContent,
   ...props
 }: TabsProps) => {
   // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
@@ -53,10 +57,15 @@ const Tabs = ({
     onTabChange?.(tabId);
   };
 
-  const { wrapper: wrapperClassName, tab: tabClassName } =
-    typeof className === 'object'
-      ? className
-      : { wrapper: className, tab: undefined };
+  const {
+    container: containerClassName,
+    wrapper: wrapperClassName,
+    tab: tabClassName,
+    content: contentClassName,
+    tabHeaderWrapper: tabHeaderWrapperClassName,
+  } = typeof className === 'object'
+    ? className
+    : { wrapper: className, tab: undefined };
 
   const getTabsClasses = () => {
     const variantClasses: Record<string, string> = {
@@ -97,6 +106,10 @@ const Tabs = ({
       tabClassName
     );
 
+  const getSideContentClasses = () => {
+    return cn('flex flex-row', tabHeaderWrapperClassName);
+  };
+
   const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
 
   return (
@@ -104,24 +117,29 @@ const Tabs = ({
       {...props}
       className={cn(
         'w-full',
-        typeof className === 'string' ? className : undefined
+        typeof className === 'string' ? className : containerClassName
       )}
     >
-      <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>
-        ))}
+      <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>
+          ))}
+        </div>
+        {sideContent && sideContent}
       </div>
 
-      {activeContent && <div className='mt-4'>{activeContent}</div>}
+      {activeContent && (
+        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
+      )}
     </div>
   );
 };

src/components/dropdown/Dropdown.tsx

@@ -1,111 +1,109 @@
-'use client';
+import React, { ReactNode, useState, useRef } from 'react';
 
-import { ReactNode, useRef, useEffect, useState } from 'react';
 import { cn } from '@/lib/helper';
 
-interface DropdownProps {
+export interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
-  position?:
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
   align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
   hover?: boolean;
-  className?: string;
-  contentClassName?: string;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
 }
 
 const Dropdown = ({
   trigger,
   children,
-  position = 'bottom',
-  align = 'start',
-  hover = false,
   className,
-  contentClassName,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
 }: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
     }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  // Build position classes
-  const getPositionClasses = () => {
-    const classes: string[] = [];
-
-    // Handle combined positions like 'top-start'
-    if (position.includes('-')) {
-      const [pos, al] = position.split('-');
-      classes.push(`dropdown-${pos}`);
-      classes.push(`dropdown-${al}`);
-    } else {
-      classes.push(`dropdown-${position}`);
-      if (align !== 'start') {
-        classes.push(`dropdown-${align}`);
-      }
-    }
-
-    return classes.join(' ');
   };
 
-  const handleToggle = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // alert('clicked');
-    setIsOpen(!isOpen);
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
   };
 
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
-    <div
-      ref={dropdownRef}
-      className={cn(
-        'dropdown',
-        getPositionClasses(),
-        hover && 'dropdown-hover',
-        isOpen && 'dropdown-open',
-        className
-      )}
-    >
-      {/* Trigger Button */}
-      <div onClick={handleToggle} className='cursor-pointer'>
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
         {trigger}
       </div>
-
-      {/* Dropdown Content - Only render when open */}
-      {isOpen && (
-        <div
-          tabIndex={-1}
-          className={cn('dropdown-content z-[10]', contentClassName)}
-          onClick={() => setIsOpen(false)} // Close on item click
-        >
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
           {children}
         </div>
       )}

src/components/helper/ApprovalStepsV2.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import { BaseApproval } from '@/types/api/api-general';
+import Button from '@/components/Button';
+
+import { cn, formatDate } from '@/lib/helper';
+
+interface ApprovalStepsV2Props {
+  title?: string;
+  approvals?: BaseApproval[];
+  steps: {
+    step_number: number;
+    step_name: string;
+  }[];
+  maxVisibleSteps?: number;
+  className?: {
+    wrapper?: string;
+    stepsWrapper?: string;
+    stepsContainer?: string;
+  };
+}
+
+const ApprovalStepsV2 = ({
+  title = 'Progress Details',
+  approvals,
+  steps,
+  maxVisibleSteps = 2,
+  className,
+}: ApprovalStepsV2Props) => {
+  const [isSeeAll, setIsSeeAll] = useState(false);
+  const [formattedApprovals, setFormattedApprovals] = useState<
+    (BaseApproval & { isActive: boolean })[]
+  >([]);
+
+  const latestApprovalStepNumber =
+    approvals?.[approvals.length - 1].step_number ?? 0;
+
+  const lastStepNumber = steps[steps.length - 1].step_number;
+
+  const isLatestApprovalStepNumberLessThanLastStepNumber =
+    latestApprovalStepNumber < lastStepNumber;
+
+  const slicedFormattedApprovals = useMemo(() => {
+    return formattedApprovals.slice(0, isSeeAll ? undefined : maxVisibleSteps);
+  }, [formattedApprovals, isSeeAll]);
+
+  const seeMoreClickHandler = () => {
+    setIsSeeAll((prevVal) => !prevVal);
+  };
+
+  useEffect(() => {
+    if (approvals) {
+      const tempFormattedApprovals: (BaseApproval & { isActive: boolean })[] =
+        [];
+
+      approvals.forEach((approval) => {
+        tempFormattedApprovals.push({
+          ...approval,
+          isActive: true,
+        });
+      });
+
+      if (isLatestApprovalStepNumberLessThanLastStepNumber) {
+        const latestApprovalStepNumberIndexInSteps = steps.findIndex(
+          (step) => step.step_number === latestApprovalStepNumber
+        );
+
+        const slicedSteps = steps.slice(
+          latestApprovalStepNumberIndexInSteps + 1
+        );
+
+        slicedSteps.forEach((step) => {
+          tempFormattedApprovals.push({
+            action: 'APPROVED',
+            action_at: new Date().toISOString(),
+            action_by: {
+              id: 0,
+              id_user: 0,
+              email: '',
+              name: '',
+            },
+            step_name: step.step_name,
+            step_number: step.step_number,
+            isActive: false,
+          });
+        });
+      }
+
+      setFormattedApprovals(tempFormattedApprovals);
+    }
+  }, [approvals]);
+
+  return (
+    <div
+      className={cn(
+        'w-full p-4 flex flex-col border-b border-base-content/10',
+        className?.wrapper
+      )}
+    >
+      <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+        {title}
+      </h4>
+
+      <div
+        className={cn(
+          'mt-6 mb-8 flex flex-col gap-10',
+          className?.stepsWrapper
+        )}
+      >
+        {slicedFormattedApprovals.map((approval, idx) => {
+          const isApprovalActionCreated = approval.action === 'CREATED';
+          const isApprovalActionUpdated = approval.action === 'UPDATED';
+          const isApprovalActionRejected = approval.action === 'REJECTED';
+          const isApprovalActionApproved = approval.action === 'APPROVED';
+
+          const approvalIcon =
+            isApprovalActionCreated || isApprovalActionUpdated
+              ? 'heroicons:clock-solid'
+              : isApprovalActionRejected
+                ? 'heroicons:x-circle-solid'
+                : isApprovalActionApproved
+                  ? 'heroicons:check-badge-solid'
+                  : 'heroicons:check-badge-solid';
+
+          return (
+            <div key={idx} className='w-full flex flex-row items-stretch gap-3'>
+              <div className='w-fit self-stretch relative'>
+                <div className='w-fit h-fit flex flex-col items-start'>
+                  <Icon
+                    icon={approvalIcon}
+                    width={24}
+                    height={24}
+                    className={cn({
+                      'text-warning':
+                        isApprovalActionCreated || isApprovalActionUpdated,
+                      'text-error': isApprovalActionRejected,
+                      'text-success': isApprovalActionApproved,
+                      'text-base-content/20': !approval.isActive,
+                    })}
+                  />
+
+                  {idx < formattedApprovals.length - 1 && (
+                    <div className='absolute top-6 left-1/2 -translate-x-1/2 w-0 min-h-full h-[calc(100%)] mx-auto my-2 border border-dashed border-base-content/10' />
+                  )}
+                </div>
+              </div>
+
+              <div
+                className={cn('w-full flex flex-col gap-1 text-base-content', {
+                  'text-base-content/20': !approval.isActive,
+                })}
+              >
+                <div className='flex flex-col'>
+                  <span className='text-xs'>{approval.step_name}</span>
+                  <span className='text-sm font-semibold'>
+                    {(isApprovalActionCreated || isApprovalActionUpdated) &&
+                      'Diajukan oleh '}
+                    {isApprovalActionRejected && 'Ditolak oleh '}
+                    {isApprovalActionApproved && 'Disetujui oleh '}
+                    {approval.isActive ? approval.action_by.name : '...'}
+                  </span>
+                </div>
+
+                {approval.isActive && (
+                  <p className='w-full max-w-60 p-3 bg-base-content/5 rounded-xl text-xs text-base-content/50'>
+                    Created at :{' '}
+                    {formatDate(approval.action_at, 'DD-MM-YYYY, HH:mm')}
+                    <br />
+                    Notes : {approval.notes ?? '-'}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {formattedApprovals.length > maxVisibleSteps && (
+        <Button
+          variant='outline'
+          color='none'
+          onClick={seeMoreClickHandler}
+          className={cn(
+            'px-3 py-2 gap-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-lg transition-all'
+          )}
+        >
+          <Icon
+            icon='heroicons-outline:chevron-double-down'
+            width={20}
+            height={20}
+            className={cn('transition-all duration-300', {
+              '-rotate-180': isSeeAll,
+            })}
+          />
+          See {isSeeAll ? 'Less' : 'More'}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ApprovalStepsV2;

src/components/helper/ButtonFilter.tsx

@@ -0,0 +1,48 @@
+import Button, { ButtonProps } from '@/components/Button';
+import { getFilledFormikValuesCount } from '@/lib/formik-helper';
+import { cn } from '@/lib/helper';
+import { Icon } from '@iconify/react';
+import { FormikValues } from 'formik';
+
+export type ButtonFilterProps = ButtonProps & {
+  values: FormikValues;
+  onClick: () => void;
+};
+
+// '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) => {
+  return (
+    <Button
+      {...props}
+      onClick={onClick}
+      variant='outline'
+      color='none'
+      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
+          ? 'border-primary-gradient text-primary rounded-lg!'
+          : 'rounded-lg',
+        props.className
+      )}
+    >
+      <Icon
+        icon='heroicons:funnel'
+        width={20}
+        height={20}
+        className={
+          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
+        }
+      />
+      Filter
+      {getFilledFormikValuesCount(values) > 0 && (
+        <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+          {getFilledFormikValuesCount(values)}
+        </span>
+      )}
+    </Button>
+  );
+};
+
+export default ButtonFilter;

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

@@ -0,0 +1,19 @@
+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'>
+        Hak Akses Tidak Ditemukan
+      </h2>
+      <p className='text-gray-600 text-center'>
+        Anda tidak memiliki hak akses untuk mengakses halaman ini.
+      </p>
+      <Button href='/dashboard' className='text-base-100'>
+        Kembali ke Dashboard
+      </Button>
+    </div>
+  );
+};
+
+export default PermissionNotFound;

src/components/helper/RequireAuth.tsx

@@ -5,6 +5,7 @@ import useSWR from 'swr';
 
 import { useAuth } from '@/services/hooks/useAuth';
 import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { AuthApi } from '@/services/api/auth';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
 import { AxiosError } from 'axios';
@@ -27,6 +28,9 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     SWRHttpKey
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
+
+    // refresh every 12 minutes
+    refreshInterval: 12 * 60 * 1000,
   });
 
   useEffect(() => {
@@ -52,6 +56,27 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     setIsLoadingUser(isLoadingUserResponse);
   }, [isLoadingUserResponse]);
 
+  useEffect(() => {
+    const interval = setInterval(
+      async () => {
+        await AuthApi.refresh();
+      },
+      12 * 60 * 1000
+    );
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const refreshUserSession = async () => {
+      await AuthApi.refresh();
+    };
+
+    if (user) {
+      refreshUserSession();
+    }
+  }, [user]);
+
   if (
     (isLoadingUserResponse && !userResponse && !userErrorResponse) ||
     (!userResponse && !userErrorResponse)
@@ -63,7 +88,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     );
   }
 
-  if (userErrorResponse) {
+  if (!isLoadingUserResponse && userErrorResponse) {
     return (
       <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
         <h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
@@ -71,10 +96,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
           Please try refreshing the page or contact support if the problem
           persists.
         </p>
-        <button
-          className='btn btn-primary'
-          onClick={() => window.location.reload()}
-        >
+        <button className='btn btn-primary' onClick={() => redirectToSSO()}>
           Retry
         </button>
       </div>