Update .gitlab-ci.yml file

.gitignore

@@ -40,11 +40,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# prettier
+.prettierrc
+
 # idea
 .idea
-
-# claude
-.claude
-
-# rtk
-rtk.exe

.gitlab-ci.yml

@@ -2,62 +2,33 @@ stages:
   - build
   - deploy
 
-# ==========================================================
+# ====== TEMPLATE: BUILD STATIC NEXT.JS ======
-# ✅ Global defaults
-# ==========================================================
-default:
-  tags:
-    - server-development-biznet
-  interruptible: true
-
-# ==========================================================
-# 🏗️ Build Template
-# ==========================================================
 .build_template: &build_template
   stage: build
-  image: public.ecr.aws/docker/library/node:20-alpine
+  image: node:20-alpine
   cache:
     key: npm-cache
     paths:
       - node_modules/
   variables:
-    NPM_CONFIG_PRODUCTION: 'false'
+    NPM_CONFIG_PRODUCTION: "false"
-    NODE_ENV: ''
+    NODE_ENV: ""
   script:
     - echo "Installing dependencies..."
     - npm ci --no-audit --no-fund
-    - echo "Build env used:"
-    - echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
-    - echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
-    - echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
     - echo "Building Next.js static export..."
     - npx next build
-    - |
-      mkdir -p out
-      cat <<EOF > out/build-info.json
-      {
-        "commit": "$CI_COMMIT_SHORT_SHA",
-        "pipeline": "$CI_PIPELINE_ID",
-        "built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
-        "NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
-        "NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
-        "NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
-      }
-      EOF
   artifacts:
-    name: 'out-$CI_COMMIT_SHORT_SHA'
+    name: "out-$CI_COMMIT_SHORT_SHA"
     paths:
       - out/
     expire_in: 1 week
 
-# ==========================================================
-# 🚀 Deploy Template
-# ==========================================================
 .deploy_template: &deploy_template
   stage: deploy
   image:
-    name: public.ecr.aws/aws-cli/aws-cli:latest
+    name: amazon/aws-cli:latest
-    entrypoint: ['/bin/sh', '-c']
+    entrypoint: ["/bin/sh", "-c"]
   script:
     - set -e
     - aws --version
@@ -85,10 +56,11 @@ default:
     - |
       RUN_URL="${CI_PROJECT_URL}/-/pipelines/${CI_PIPELINE_ID}"
 
-      if [ "$CI_COMMIT_BRANCH" = "development" ]; then
+      # Tentukan nama environment
+      if [ "$CI_COMMIT_BRANCH" = "devops-s3" ]; then
         ENVIRONMENT_NAME="WEB-LTI-DEV"
-      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+      elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
-        ENVIRONMENT_NAME="WEB-LTI-STAGING"
+        ENVIRONMENT_NAME="WEB-LTI-PROD"
       else
         ENVIRONMENT_NAME="UNKNOWN"
       fi
@@ -96,11 +68,11 @@ default:
       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 \
@@ -128,86 +100,50 @@ default:
 
       curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
 
-# ==========================================================
+# ====== DEVELOPMENT (Branch devops-s3) ======
-# ==== DEVELOPMENT (Branch development) ======
-# ==========================================================
 build:dev:
   <<: *build_template
   rules:
-    - if: '$CI_COMMIT_BRANCH == "development"'
+    - if: '$CI_COMMIT_BRANCH == "devops-s3"'
   environment:
-    name: development
+    name: devops-s3
   variables:
-    NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: "https://dev-api-lti.mbugroup.id"
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: "https://dev-api-sso.mbugroup.id"
-    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
 deploy:dev:
   <<: *deploy_template
-  needs: ['build:dev']
+  needs: ["build:dev"]
   rules:
-    - if: '$CI_COMMIT_BRANCH == "development"'
+    - if: '$CI_COMMIT_BRANCH == "devops-s3"'
   variables:
-    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
+    S3_BUCKET: "dev-lti-erp.mbugroup.id"
-    AWS_REGION: 'ap-southeast-3'
+    AWS_REGION: "ap-southeast-3"
-    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
+    CLOUDFRONT_DISTRIBUTION_ID: "E1Z8XTA8XF1GIV"
   environment:
-    name: development
+    name: devops-s3
     url: https://dev-lti-erp.mbugroup.id
 
-# ==========================================================
+# ====== PRODUCTION ======
-# ====== STAGING (Branch staging) ======
+# build:production:
-# ==========================================================
+#   <<: *build_template
-build:staging:
+#   rules:
-  <<: *build_template
+#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
-  rules:
+#     - if: '$CI_COMMIT_BRANCH == "master"'
-    - if: '$CI_COMMIT_BRANCH == "staging"'
+#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
-  environment:
+#   environment:
-    name: staging
+#     name: production
-  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:production:
-  <<: *deploy_template
+#   <<: *deploy_template
-  needs: ['build:staging']
+#   needs: ["build:production"]
-  rules:
+#   rules:
-    - if: '$CI_COMMIT_BRANCH == "staging"'
+#     - if: '$CI_COMMIT_BRANCH == "master"'
-  variables:
+#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
-    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
+#   variables:
-    AWS_REGION: 'ap-southeast-3'
+#     S3_BUCKET: "lti-erp.mbugroup.id"
-    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
+#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
-  environment:
+#   environment:
-    name: staging
+#     name: production
-    url: https://stg-lti-erp.mbugroup.id
+    # url: https://royalgoldcapital.com 
 
-# ==========================================================
-# ====== STAGING (Branch production) ======
-# ==========================================================
-build:production:
-  <<: *build_template
-  rules:
-    - if: '$CI_COMMIT_BRANCH == "production"'
-  environment:
-    name: staging
-  variables:
-    NEXT_PUBLIC_LTI_URL: 'https://lti-erp.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://auth-erp.mbugroup.id'
-    NEXT_PUBLIC_API_BASE_URL: 'https://api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
-
-deploy:production:
-  <<: *deploy_template
-  needs: ['build:production']
-  rules:
-    - if: '$CI_COMMIT_BRANCH == "production"'
-  variables:
-    S3_BUCKET: 'production-lti-erp.mbugroup.id'
-    AWS_REGION: 'ap-southeast-3'
-    CLOUDFRONT_DISTRIBUTION_ID: 'E1SSLXKYYITASJ'
-  environment:
-    name: staging
-    url: https://lti-erp.mbugroup.id

.husky/pre-commit

@@ -1,3 +1,2 @@
-npm run format
 npm run lint
-npm run typecheck
+npm run build

Dockerfile

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

docker-compose.yaml

@@ -1,4 +1,4 @@
-version: '3.9'
+version: "3.9"
 
 services:
   dev-web-lti:
@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-      - '3002:3000'
+      - "3002:3000"
     env_file:
       - .env
     environment:
@@ -19,13 +19,13 @@ services:
     deploy:
       resources:
         limits:
-          cpus: '3.0'
+          cpus: "3.0"
           memory: 3G
         reservations:
-          cpus: '1.0'
+          cpus: "1.0"
           memory: 512M
     extra_hosts:
-      - 'host.docker.internal:host-gateway'
+      - "host.docker.internal:host-gateway"
     # Optional: aktifkan healthcheck jika punya endpoint
     # healthcheck:
     #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
@@ -36,4 +36,4 @@ services:
 
 networks:
   dev-lti-network:
-    external: true
+    external: true

next.config.ts

@@ -3,7 +3,6 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   output: 'export',
   images: { unoptimized: true },
-  trailingSlash: true,
 };
 
 export default nextConfig;

package.json

@@ -7,47 +7,26 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
-    "typecheck": "next typegen && tsc --noEmit",
     "prepare": "husky",
-    "format": "prettier --write .",
+    "format": "prettier --write ."
-    "pre-commit": "npm run format && npm run lint && npm run typecheck && npm run build"
   },
   "dependencies": {
-    "@react-pdf/renderer": "^4.3.1",
     "@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",
+    "inputmask": "^5.0.9",
-    "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.9",
+    "next": "15.5.3",
-    "next-themes": "^0.4.6",
+    "react": "19.1.0",
-    "radix-ui": "^1.4.3",
+    "react-dom": "19.1.0",
-    "react": "^19.1.2",
-    "react-day-picker": "^9.11.1",
-    "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"
   },
@@ -55,12 +34,13 @@
     "@eslint/eslintrc": "^3",
     "@iconify/react": "^6.0.2",
     "@tailwindcss/postcss": "^4",
+    "@types/inputmask": "^5.0.7",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "daisyui": "^5.5.14",
+    "daisyui": "^5.1.12",
     "eslint": "^9",
-    "eslint-config-next": "^15.5.7",
+    "eslint-config-next": "15.5.3",
     "husky": "^9.1.7",
     "prettier": "^3.6.2",
     "tailwindcss": "^4",

src/app/closing/detail/page.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-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)
-  );
-
-  // 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) {
-    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 (!isLoadingClosing && (!closing || isResponseError(closing))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isLoading = isLoadingClosing || isLoadingProject || isLoadingKandang;
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoading && <span className='loading loading-spinner loading-xl' />}
-
-      {!isLoading && isResponseSuccess(closing) && (
-        <ClosingDetail
-          id={Number(closingId)}
-          initialValue={closing.data}
-          projectData={
-            isResponseSuccess(projectData) ? projectData.data : undefined
-          }
-          kandangData={
-            isResponseSuccess(kandangData) ? kandangData.data : undefined
-          }
-        />
-      )}
-    </div>
-  );
-};
-
-export default ClosingDetailPage;

src/app/closing/page.tsx

@@ -1,11 +0,0 @@
-import ClosingsTable from '@/components/pages/closing/ClosingsTable';
-
-const Closing = () => {
-  return (
-    <section className='w-full p-3'>
-      <ClosingsTable />
-    </section>
-  );
-};
-
-export default Closing;

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

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

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

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

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

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

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

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

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

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

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

src/app/expense/add/page.tsx

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

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

@@ -1,65 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseRequestForm from '@/components/pages/expense/form/ExpenseRequestForm';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseEditPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const expenseId = searchParams.get('expenseId');
-
-  const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
-  );
-
-  if (!expenseId) {
-    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 (!isLoadingExpense && (!expense || isResponseError(expense))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isExpenseCanBeEdited =
-    !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 === 4);
-
-  if (!isLoadingExpense && !isExpenseCanBeEdited) {
-    router.back();
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseRequestForm type='edit' initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseEditPage;

src/app/expense/detail/page.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseDetail from '@/components/pages/expense/ExpenseDetail';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseDetailPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const expenseId = searchParams.get('expenseId');
-
-  const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
-  );
-
-  if (!expenseId) {
-    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 (!isLoadingExpense && (!expense || isResponseError(expense))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseDetail initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseDetailPage;

src/app/expense/page.tsx

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

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

@@ -1,62 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseRealizationForm from '@/components/pages/expense/form/ExpenseRealizationForm';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseRealizationEditPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const expenseId = searchParams.get('expenseId');
-
-  const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
-  );
-
-  if (!expenseId) {
-    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 (!isLoadingExpense && (!expense || isResponseError(expense))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isExpenseRealizationCanBeEdited =
-    !isLoadingExpense &&
-    isResponseSuccess(expense) &&
-    expense.data.latest_approval.action !== 'REJECTED' &&
-    (expense.data.latest_approval.step_number === 5 ||
-      expense.data.latest_approval.step_number === 6);
-
-  if (!isLoadingExpense && !isExpenseRealizationCanBeEdited) {
-    router.back();
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseRealizationForm type='edit' initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseRealizationEditPage;

src/app/expense/realization/page.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import ExpenseRealizationForm from '@/components/pages/expense/form/ExpenseRealizationForm';
-
-import { ExpenseApi } from '@/services/api/expense';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const ExpenseRealization = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const expenseId = searchParams.get('expenseId');
-
-  const { data: expense, isLoading: isLoadingExpense } = useSWR(
-    expenseId,
-    (id: number) => ExpenseApi.getSingle(id)
-  );
-
-  if (!expenseId) {
-    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 (!isLoadingExpense && (!expense || isResponseError(expense))) {
-    router.replace('/404');
-    return;
-  }
-
-  const isExpenseCanBeRealized =
-    isResponseSuccess(expense) &&
-    expense.data.latest_approval.action !== 'REJECTED' &&
-    expense.data.latest_approval.step_number === 4;
-
-  if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
-    if (typeof window !== 'undefined') {
-      router.back();
-    }
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingExpense && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingExpense && isResponseSuccess(expense) && (
-        <ExpenseRealizationForm initialValues={expense.data} />
-      )}
-    </div>
-  );
-};
-
-export default ExpenseRealization;

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

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

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

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

@@ -1,7 +0,0 @@
-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,7 +0,0 @@
-import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
-
-const FinanceAddPage = () => {
-  return <FormFinanceAdd />;
-};
-
-export default FinanceAddPage;

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

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

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

@@ -1,51 +0,0 @@
-'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/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/finance/detail/page.tsx

@@ -1,39 +0,0 @@
-'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 +0,0 @@
-'use client';
-
-import FinanceTable from '@/components/pages/finance/FinanceTable';
-
-const Finance = () => {
-  return <FinanceTable />;
-};
-
-export default Finance;

src/app/globals.css

@@ -1,47 +1,32 @@
 @import 'tailwindcss';
 @plugin "daisyui";
-@import '../styles/tailwind.css';
 @import '../styles/daisyui.css';
-@import '../figma-make/styles/theme.css';
 
 @plugin "daisyui/theme" {
   name: 'lti';
   default: false;
   prefersdark: false;
   color-scheme: 'light';
-
+  --color-base-100: oklch(98% 0.001 106.423);
-  /* Primary Colors */
+  --color-base-200: oklch(97% 0.001 106.424);
-  --color-primary: oklch(39.4% 0.177 301.9);
+  --color-base-300: oklch(92% 0.003 48.717);
-  --color-primary-content: oklch(87.5% 0.038 274.5);
+  --color-base-content: oklch(22.389% 0.031 278.072);
-
+  --color-primary: oklch(60% 0.126 221.723);
-  /* Secondary Colors */
+  --color-primary-content: oklch(100% 0 0);
-  --color-secondary: oklch(60.1% 0.258 335.7);
+  --color-secondary: oklch(52% 0.105 223.128);
-  --color-secondary-content: oklch(99.4% 0.007 337.8);
+  --color-secondary-content: oklch(100% 0 0);
-
+  --color-accent: oklch(45% 0.085 224.283);
-  /* Accent Colors */
+  --color-accent-content: oklch(100% 0 0);
-  --color-accent: oklch(76.2% 0.155 170.8);
+  --color-neutral: oklch(39% 0.07 227.392);
-  --color-accent-content: oklch(7.2% 0.007 167.6);
+  --color-neutral-content: oklch(100% 0 0);
-
+  --color-info: oklch(58% 0.158 241.966);
-  /* Neutral Colors */
+  --color-info-content: oklch(100% 0 0);
-  --color-neutral: oklch(22.4% 0.032 258.8);
+  --color-success: oklch(62% 0.194 149.214);
-  --color-neutral-content: oklch(87.7% 0.016 257);
+  --color-success-content: oklch(100% 0 0);
-
+  --color-warning: oklch(85% 0.199 91.936);
-  /* Base Colors */
+  --color-warning-content: oklch(0% 0 0);
-  --color-base-100: oklch(100% 0 0); /* #ffffff */
+  --color-error: oklch(57% 0.245 27.325);
-  --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
+  --color-error-content: oklch(100% 0 0);
-  --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --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: #00d390;
-  --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: #fcb700;
-  --color-warning-content: oklch(0% 0 0); /* #000000 */
-  --color-error: #ff3a3a;
-  --color-error-content: oklch(100% 0 0); /* #fffffff */
-
   --radius-selector: 0rem;
   --radius-field: 0.25rem;
   --radius-box: 0.25rem;
@@ -53,30 +38,13 @@
 }
 
 :root {
-  --color-primary: #0069e0;
+  --color-primary: #1f74bf;
 }
 
 @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 {
   scrollbar-gutter: initial;
 }
-
-.react-select__menu-portal {
-  position: relative;
-  z-index: 99999 !important;
-}

src/app/inventory/adjustment/detail/page.tsx

@@ -12,6 +12,8 @@ const DetailInventoryAdjustment = () => {
 
   // Ambil data dari router state
   useEffect(() => {
+    console.log('Router State');
+    console.log(window.history.state);
     const state = window.history.state?.usr as
       | { inventoryAdjustment?: InventoryAdjustment }
       | undefined;
@@ -24,6 +26,9 @@ const DetailInventoryAdjustment = () => {
 
   const finalData = inventoryAdjustment;
 
+  console.log('Final Data');
+  console.log(finalData);
+
   if (!finalData) {
     return (
       <div className='w-full flex flex-row justify-center items-center p-4'>

src/app/inventory/adjustment/page.tsx

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

src/app/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 sm:p-0'>
+    <section className='w-full p-4'>
       <MovementTable />
     </section>
   );

src/app/inventory/product/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/inventory/product/detail/page.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import InventoryProductDetail from '@/components/pages/inventory/product/detail/InventoryProductDetail';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { InventoryProductApi } from '@/services/api/inventory';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-const InventoryProductDetailPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const inventoryProductId = searchParams.get('inventoryProductId');
-
-  const { data: inventoryProduct, isLoading: isLoadingInventoryProduct } =
-    useSWR(inventoryProductId, (id: number) =>
-      InventoryProductApi.getSingle(id)
-    );
-
-  if (!inventoryProductId) {
-    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 (
-    !isLoadingInventoryProduct &&
-    (!inventoryProduct || isResponseError(inventoryProduct))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='size-full'>
-      {isLoadingInventoryProduct && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingInventoryProduct && isResponseSuccess(inventoryProduct) && (
-        <InventoryProductDetail inventoryProduct={inventoryProduct.data} />
-      )}
-    </div>
-  );
-};
-
-export default InventoryProductDetailPage;

src/app/inventory/product/page.tsx

@@ -1,11 +0,0 @@
-import InventoryProductTable from '@/components/pages/inventory/product/InventoryProductTable';
-
-const InventoryProductPage = () => {
-  return (
-    <div className='size-full'>
-      <InventoryProductTable />
-    </div>
-  );
-};
-
-export default InventoryProductPage;

src/app/layout.tsx

@@ -1,9 +1,8 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter, Roboto } from 'next/font/google';
+import { Inter } 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';
 
@@ -12,12 +11,6 @@ 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',
@@ -36,15 +29,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='en' data-theme='lti'>
-      <body
+      <body className={`${inter.variable} antialiased font-inter`}>
-        className={`${inter.variable} ${roboto.variable} antialiased font-inter`}
-      >
         <RequireAuth>
           <MainDrawer>{children}</MainDrawer>
         </RequireAuth>
 
         <Toaster />
-        <SonnerToaster position='top-right' />
       </body>
     </html>
   );

src/app/marketing/page.tsx

@@ -1,16 +0,0 @@
-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'>
-      <MarketingTable />
-
-      <SalesOrderFormModal />
-      <DeliveryOrderFormModal />
-    </div>
-  );
-};
-
-export default Marketing;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,56 +0,0 @@
-'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/layout.tsx

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

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

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

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

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

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

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

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

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

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

src/app/not-found.tsx

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

src/app/page.tsx

@@ -1,32 +1,11 @@
-'use client';
+import { redirect } from 'next/navigation';
-
-import { useEffect } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
-import { useAuth } from '@/services/hooks/useAuth';
 
 export default function Home() {
-  const { isLoadingUser } = useAuth();
+  redirect('/dashboard');
-
-  const router = useRouter();
-  const pathname = usePathname();
-
-  useEffect(() => {
-    if (pathname === '/') {
-      router.replace('/dashboard');
-    }
-  }, [pathname]);
-
-  if (isLoadingUser) {
-    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>
-    );
-  }
 
   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>
+      <h1>LTI ERP</h1>
     </main>
   );
 }

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

@@ -0,0 +1,270 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import useSWR from 'swr';
+
+const AddChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const projectFlockId = searchParams.get('projectFlockId');
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  // States
+  const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
+    undefined
+  );
+  const [projectFlockKandang, setProjectFlockKandang] =
+    useState<BaseApiResponse<ProjectFlockKandang>>();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
+
+  // Fetch Data
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
+
+  const getProjectFlockKandangUrl = `/kandangs/lookup`;
+  // Mapping Options
+  const options = isResponseSuccess(listProjectFlock)
+    ? listProjectFlock?.data.map((projectFlock) => {
+        return {
+          value: projectFlock.id,
+          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
+        };
+      })
+    : [];
+
+  const chickinModal = useModal();
+  const alertModal = useModal();
+
+  if (!projectFlockId) {
+    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 (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  // Handle Function
+  const handleChickinClick = async (kandang: Kandang) => {
+    setIsLoadingProjectFlockKandang(true);
+    setSelectedKandang(kandang);
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (isResponseSuccess(ProjectFlockKandangRes)) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
+        chickinModal.openModal();
+      } else {
+        alertModal.openModal();
+      }
+    }
+  };
+  const handleAfterSubmit = () => {
+    chickinModal.closeModal();
+    router.push('/production/chickin');
+  };
+
+  return (
+    <>
+      {isResponseSuccess(projectFlock) && (
+        <>
+          <section className='w-full p-4'>
+            <header className='flex flex-col gap-4'>
+              <Button
+                href='/production/project-flock'
+                variant='link'
+                className='w-fit p-0 text-primary'
+              >
+                <Icon icon='uil:arrow-left' width={24} height={24} />
+                Kembali
+              </Button>
+
+              <div className='flex flex-col gap-4 w-full my-4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
+                  <SelectInput
+                    required
+                    isSearchable
+                    label='Project Flock'
+                    options={options}
+                    isLoading={isLoadingListProjectFlock}
+                    value={{
+                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
+                      value: projectFlock.data?.id,
+                    }}
+                    onChange={(val) =>
+                      router.push(
+                        `/production/chickin/add?projectFlockId=${
+                          (val as OptionType | null)?.value
+                        }`
+                      )
+                    }
+                    onInputChange={(val) => {
+                      setSearchProjectFlock(val);
+                    }}
+                  />
+                </div>
+              </div>
+            </header>
+            <Table<Kandang>
+              data={projectFlock.data?.kandangs}
+              columns={[
+                {
+                  header: '#',
+                  cell: (props) =>
+                    tableFilterState.pageSize * (tableFilterState.page - 1) +
+                    props.row.index +
+                    1,
+                },
+                {
+                  accessorKey: 'name',
+                  header: 'Nama Kandang',
+                },
+                {
+                  header: 'Aksi',
+                  cell: (props) => {
+                    return (
+                      <>
+                        <Button
+                          color='success'
+                          variant='outline'
+                          onClick={() => {
+                            handleChickinClick(props.row.original);
+                          }}
+                          disabled={isLoadingProjectFlockKandang}
+                        >
+                          <Icon
+                            icon='mdi:home-import-outline'
+                            width={24}
+                            height={24}
+                          />
+                          Chickin
+                        </Button>
+                      </>
+                    );
+                  },
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data?.kandangs?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </section>
+          <Modal ref={chickinModal.ref}>
+            <div className='flex flex-row justify-between items-center'>
+              <h1 className='text-xl font-semibold text-center mb-6'>
+                Chickin Kandang - {selectedKandang?.name}
+              </h1>
+              <Button
+                color='error'
+                variant='link'
+                onClick={chickinModal.closeModal}
+              >
+                <Icon
+                  className='text-black'
+                  icon='uil:times'
+                  width={24}
+                  height={24}
+                />
+              </Button>
+            </div>
+            {isResponseSuccess(projectFlockKandang) &&
+              !isLoadingProjectFlockKandang && (
+                <ChickinForm
+                  initialValues={{
+                    project_flock_kandang: projectFlockKandang.data,
+                    created_user: projectFlock.data?.created_user,
+                    created_at: projectFlock.data?.created_at,
+                    updated_at: projectFlock.data?.updated_at,
+                    approval: projectFlock.data?.approval,
+                  }}
+                  afterSubmit={handleAfterSubmit}
+                />
+              )}
+          </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default AddChickin;

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

@@ -0,0 +1,351 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ChickinApi } from '@/services/api/production';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Chickin,
+  ChickinApprovalPayload,
+} from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+/**
+ * TODO: Refactor code - pindahin detail ke reuseable component
+ *       setelah implement approval and reject
+ */
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const confirmModal = useModal();
+  const deleteModal = useModal();
+  const chickinModal = useModal();
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
+
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    // chickin.data?.approval.step_number == 1 ? false : true
+    true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] =
+    useState(!isApprovedDisabled);
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  if (!chickinId) {
+    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 && (!chickin || isResponseError(chickin))) {
+    router.replace('/404');
+    return;
+  }
+
+  if (!isResponseSuccess(chickin)) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (chickin?.data.id === undefined) return;
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.customRequest<
+      BaseApiResponse<Chickin>,
+      ChickinApprovalPayload
+    >(`/approvals`, {
+      method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [chickin.data.id],
+      },
+    });
+
+    if (isResponseSuccess(approveChickinRes)) {
+      if (refreshChickin) {
+        await refreshChickin();
+      }
+      toast.success(approveChickinRes.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ChickinApi.delete(
+      chickin.data?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/chickin');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <>
+      <div className='w-full p-4 flex flex-col justify-center gap-4'>
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading && isResponseSuccess(chickin) && (
+          <>
+            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={(() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                })}
+                disabled={!chickin?.data.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!chickin?.data.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </div> */}
+            <Card
+              title='Informasi Umum'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Area</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.area
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kategori</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.category}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Lokasi</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.location
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Periode</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.period}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kandang</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+              </div>
+            </Card>
+            <Card
+              title='Detail Chickin'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock Kandang</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }{' '}
+                    - {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
+                  <div className='text-sm'>
+                    {chickin.data.chick_in_date
+                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+                          'id-ID'
+                        )
+                      : '-'}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
+                  <div className='text-sm'>
+                    {chickin.data.quantity?.toLocaleString('id-ID')}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Catatan</div>
+                  <div className='text-sm'>{chickin.data.note}</div>
+                </div>
+              </div>
+            </Card>
+            <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                color='error'
+                onClick={() => {
+                  deleteModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Delete
+              </Button>
+              <Button
+                color='warning'
+                onClick={() => {
+                  chickinModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                Edit
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang -{' '}
+            {chickin?.data?.project_flock_kandang &&
+              chickin?.data?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm
+          initialValues={chickin?.data}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickin();
+            chickinModal.closeModal();
+          }}
+        />
+      </Modal>
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } chickin berikut? (${
+          chickin?.data.project_flock_kandang?.project_flock.flock.name
+        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default DetailChickin;

src/app/production/chickin/page.tsx

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

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

@@ -1,18 +1,10 @@
 'use client';
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
-import React from 'react';
-// import React, { useImperativeHandle } from 'react';
 
 const AddProjectFlock = () => {
-  // useImperativeHandle(ref, () => ({
-  //   validate() {
-  //     toast.success('Validating');
-  //     return false;
-  //   },
-  // }));
   return (
-    <section className='w-full flex flex-row justify-center'>
+    <section className='w-full p-4 flex flex-row justify-center'>
       <ProjectFlockForm formType='add' />
     </section>
   );

src/app/production/project-flock/chickin/add/kandang/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/project-flock/chickin/add/kandang/page.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockKandangApi } from '@/services/api/production';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-export default function AddChickinKandang() {
-  const searchParams = useSearchParams();
-  const projectFlockKandangId = searchParams.get('projectFlockKandangId');
-  const projectFlockId = searchParams.get('projectFlockId');
-  const router = useRouter();
-
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoading,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(
-    `get-single-project-flock-kandang/${projectFlockKandangId}`,
-    async () =>
-      ProjectFlockKandangApi.getSingle(
-        parseInt(projectFlockKandangId as string)
-      )
-  );
-
-  if (!projectFlockKandangId) {
-    router.push(`/production/chickin/add?projectFlockId=${projectFlockId}`);
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoading && !projectFlockKandang) {
-    router.replace('/404');
-    return;
-  }
-
-  const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
-  };
-
-  return (
-    <>
-      <section className='size-full'>
-        {isLoading && <span className='loading loading-spinner loading-xl' />}
-        {!isLoading &&
-          isResponseSuccess(projectFlockKandang) &&
-          projectFlockId && (
-            <ChickinForm
-              initialValues={projectFlockKandang.data}
-              afterSubmit={handleAfterSubmit}
-            />
-          )}
-      </section>
-    </>
-  );
-}

src/app/production/project-flock/closing/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/project-flock/closing/page.tsx

@@ -1,63 +0,0 @@
-'use client';
-import ProjectFlockClosingForm from '@/components/pages/production/project-flock/closing/ProjectFlockClosingForm';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockKandangApi } from '@/services/api/production';
-import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-const ProjectFlockClosingPage = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const projectFlockId = searchParams.get('projectFlockId');
-  const projectFlockKandangId = searchParams.get('projectFlockKandangId');
-
-  const { data: projectFlockKandang, isLoading: isLoadingProjectFlockKandang } =
-    useSWR(`get-flock-kandang-id/${projectFlockKandangId}`, () =>
-      ProjectFlockKandangApi.getSingle(parseInt(projectFlockKandangId ?? ''))
-    );
-
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    `get-flock-id/${projectFlockId}`,
-    () => ProjectFlockApi.getSingle(parseInt(projectFlockId ?? ''))
-  );
-
-  if (!projectFlockId || !projectFlockKandangId) {
-    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 (
-    !isLoadingProjectFlock &&
-    (!projectFlock || isResponseError(projectFlock)) &&
-    !isLoadingProjectFlockKandang &&
-    (!projectFlockKandang || isResponseError(projectFlockKandang))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full h-full flex flex-col justify-center'>
-      {isLoadingProjectFlock ||
-        (isLoadingProjectFlockKandang && (
-          <span className='loading loading-spinner loading-xl' />
-        ))}
-      {isResponseSuccess(projectFlock) &&
-        isResponseSuccess(projectFlockKandang) && (
-          <ProjectFlockClosingForm
-            projectFlock={projectFlock.data}
-            projectFlockKandang={projectFlockKandang.data}
-          />
-        )}
-    </div>
-  );
-};
-
-export default ProjectFlockClosingPage;

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

@@ -2,7 +2,7 @@
 
 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 { ProjectFlockApi } from '@/services/api/production';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
@@ -12,7 +12,7 @@ const ProjectFlockEdit = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
     projectFlockId,
     (id: number) => ProjectFlockApi.getSingle(id)
   );
@@ -27,20 +27,17 @@ const ProjectFlockEdit = () => {
     );
   }
 
-  if (
+  if (!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))) {
-    !isLoadingProjectFlock &&
-    (!projectFlock || isResponseError(projectFlock))
-  ) {
     router.replace('/404');
     return;
   }
 
   return (
-    <div className='w-full flex flex-col justify-center'>
+    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingProjectFlock && (
+      {isLoadingCostumer && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
         <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
       )}
     </div>

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

@@ -1,21 +1,22 @@
 '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 { ProjectFlockApi } from '@/services/api/production';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-const ProjectFlockDetailPage = () => {
+const ProjectFlockDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+  const {
-    projectFlockId,
+    data: projectFlock,
-    (id: number) => ProjectFlockApi.getSingle(id)
+    isLoading: isLoadingProjectFlock,
-  );
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();
@@ -36,15 +37,19 @@ const ProjectFlockDetailPage = () => {
   }
 
   return (
-    <div className='w-full h-full flex flex-col justify-center'>
+    <div className='w-full p-4 flex flex-row justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {isResponseSuccess(projectFlock) && (
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
-        <ProjectFlockDetail projectFlock={projectFlock.data} />
+        <ProjectFlockForm
+          formType='detail'
+          initialValues={projectFlock.data}
+          refreshProjectFlocks={refreshProjectFlock}
+        />
       )}
     </div>
   );
 };
 
-export default ProjectFlockDetailPage;
+export default ProjectFlockDetail;

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

@@ -1,72 +0,0 @@
-'use client';
-
-import { usePathname, useRouter } from 'next/navigation';
-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,
-}: {
-  children: ReactNode;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const toggleValidate = useUiStore((s) => s.toggleValidate);
-
-  const isAdd = pathname.includes('/add');
-  const isEdit = pathname.includes('/detail/edit');
-  const isDetail = pathname.includes('/detail');
-  const isChickin = pathname.includes('/chickin/add/kandang');
-  const isClosing = pathname.includes('/closing');
-
-  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');
-      }
-    });
-
-    toggleValidate();
-  };
-
-  useEffect(() => {
-    if (isOpen && !formModal.open) {
-      formModal.openModal();
-    } else {
-      formModal.closeModal();
-    }
-  }, [isOpen]);
-
-  return (
-    <>
-      {/* List page always rendered */}
-      <div className='min-h-sceen w-full relative'>
-        <ProjectFlockTable
-          refresh={() => !isOpen && router.push('/production/project-flock')}
-        />
-      </div>
-
-      {/* Render Modal only on /add */}
-      <Modal
-        ref={formModal.ref}
-        position='end'
-        onBackdropClick={handleBackdropClick}
-        className={{
-          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
-        }}
-      >
-        <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/project-flock/page.tsx

@@ -2,7 +2,7 @@ import ProjectFlockTable from '@/components/pages/production/project-flock/Proje
 
 const ProjectFlock = () => {
   return (
-    <section className='size-full p-4'>
+    <section className='w-full p-4'>
       <ProjectFlockTable />
     </section>
   );

src/app/production/recording/add/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/recording/detail/edit/page.tsx

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

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

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

src/app/production/recording/page.tsx

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

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

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

@@ -0,0 +1,148 @@
+'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';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+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>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
+  ) {
+    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}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='edit'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;

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

@@ -0,0 +1,148 @@
+'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';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+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>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
+  ) {
+    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}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='detail'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;

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

@@ -1,25 +1,9 @@
 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'>
+    <section className='w-full p-4'>
       <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

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

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

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

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

src/app/purchase/add/page.tsx

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

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

@@ -1,47 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
-import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-
-const PurchaseEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const purchaseId = searchParams.get('purchaseId');
-
-  const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
-    purchaseId,
-    (id: number) => PurchaseApi.getSingle(id)
-  );
-
-  if (!purchaseId) {
-    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 (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingPurchase && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequestForm type='edit' initialValues={purchase.data} />
-      )}
-    </div>
-  );
-};
-
-export default PurchaseEdit;

src/app/purchase/detail/page.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import PurchaseOrderDetail from '@/components/pages/purchase/order/PurchaseOrderDetail';
-import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-
-const PurchaseDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const purchaseId = searchParams.get('purchaseId');
-
-  const {
-    data: purchase,
-    isLoading: isLoadingPurchase,
-    mutate: mutatePurchase,
-  } = useSWR(purchaseId, (id: number) => PurchaseApi.getSingle(id));
-
-  if (!purchaseId) {
-    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 (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4'>
-      {isLoadingPurchase && (
-        <div className='w-full flex flex-row justify-center items-center'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      )}
-      {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseOrderDetail
-          type='detail'
-          initialValues={purchase.data}
-          refetchData={mutatePurchase}
-        />
-      )}
-    </div>
-  );
-};
-
-export default PurchaseDetail;