feat(FE-331): implement permission guard in closing

[FEAT/FE][US#334] Slicing and Integrate API Expedition HPP Report Table

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

.gitignore

@@ -39,3 +39,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# idea
+.idea
+
+# claude
+.claude

.gitlab-ci.yml

@@ -0,0 +1,189 @@
+stages:
+  - build
+  - deploy
+
+.build_template: &build_template
+  stage: build
+  image: node:20-alpine
+  cache:
+    key: npm-cache
+    paths:
+      - node_modules/
+  variables:
+    NPM_CONFIG_PRODUCTION: 'false'
+    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'
+    paths:
+      - out/
+    expire_in: 1 week
+
+.deploy_template: &deploy_template
+  stage: deploy
+  image:
+    name: amazon/aws-cli:latest
+    entrypoint: ['/bin/sh', '-c']
+  script:
+    - set -e
+    - aws --version
+    - echo "Cleaning up newline characters in AWS credentials..."
+    - export AWS_ACCESS_KEY_ID=$(echo $AWS_ACCESS_KEY_ID | tr -d '\r\n')
+    - export AWS_SECRET_ACCESS_KEY=$(echo $AWS_SECRET_ACCESS_KEY | tr -d '\r\n')
+    - echo "Deploying to s3://$S3_BUCKET in region $AWS_REGION"
+    - aws s3api head-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" || aws s3api create-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" --create-bucket-configuration LocationConstraint="$AWS_REGION"
+    - aws s3 sync ./out "s3://$S3_BUCKET" --delete --region "$AWS_REGION" --endpoint-url "https://s3.ap-southeast-3.amazonaws.com"
+
+    # CloudFront invalidation
+    - |
+      STATUS="success"
+      if [ -n "$CLOUDFRONT_DISTRIBUTION_ID" ]; then
+        echo "Invalidating CloudFront cache..."
+        if ! aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID" --paths "/*"; then
+          echo "CloudFront invalidation failed."
+          STATUS="failed"
+        fi
+      else
+        echo "No CloudFront distribution specified — skipping invalidation"
+      fi
+
+    # Notifikasi Discord
+    - |
+      RUN_URL="${CI_PROJECT_URL}/-/pipelines/${CI_PIPELINE_ID}"
+
+      if [ "$CI_COMMIT_BRANCH" = "development" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-DEV"
+      elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
+        ENVIRONMENT_NAME="WEB-LTI-STAGING"
+      else
+        ENVIRONMENT_NAME="UNKNOWN"
+      fi
+
+      if [ "$STATUS" = "success" ]; then
+        COLOR=3066993
+        TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
+        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."
+      fi
+
+      jq -n \
+        --arg title "$TITLE" \
+        --arg desc "$DESC" \
+        --arg color "$COLOR" \
+        --arg repo "$CI_PROJECT_PATH" \
+        --arg actor "$GITLAB_USER_LOGIN" \
+        --arg commit "$CI_COMMIT_SHA" \
+        --arg run_url "$RUN_URL" \
+        '{
+          username: "CI Bot - LTI WEB",
+          embeds: [{
+            title: $title,
+            description: $desc,
+            color: ($color|tonumber),
+            fields: [
+              {name: "Repository", value: $repo, inline: true},
+              {name: "Actor", value: $actor, inline: true},
+              {name: "Commit", value: $commit, inline: false},
+              {name: "Pipeline", value: ("[Open run](" + $run_url + ")"), inline: false}
+            ]
+          }]
+        }' > payload.json
+
+      curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
+
+# ====== DEVELOPMENT (Branch development) ======
+build:dev:
+  <<: *build_template
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "development"'
+  environment:
+    name: development
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
+
+deploy:dev:
+  <<: *deploy_template
+  needs: ['build:dev']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "development"'
+  variables:
+    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
+  environment:
+    name: development
+    url: https://dev-lti-erp.mbugroup.id
+
+# ====== STAGING (Branch staging) ======
+build:staging:
+  <<: *build_template
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  environment:
+    name: staging
+  variables:
+    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
+    NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
+
+deploy:staging:
+  <<: *deploy_template
+  needs: ['build:staging']
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "staging"'
+  variables:
+    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
+  environment:
+    name: staging
+    url: https://stg-lti-erp.mbugroup.id
+# ====== PRODUCTION ======
+# build:production:
+#   <<: *build_template
+#   rules:
+#     # pilih salah satu: pakai branch master ATAU pakai tags rilis
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
+#   environment:
+#     name: production
+
+# deploy:production:
+#   <<: *deploy_template
+#   needs: ["build:production"]
+#   rules:
+#     - if: '$CI_COMMIT_BRANCH == "master"'
+#     # - if: '$CI_COMMIT_TAG'   # selaras dengan rule di build:production
+#   variables:
+#     S3_BUCKET: "lti-erp.mbugroup.id"
+#     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
+#   environment:
+#     name: production
+

.husky/pre-commit

@@ -0,0 +1,3 @@
+npm run format
+npm run lint
+npm run build

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

Dockerfile

@@ -0,0 +1,25 @@
+FROM node:20-alpine
+
+RUN apk add --no-cache git bash build-base curl
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+# Buat config agar Next tahu output: export
+RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
+
+# Build project (Next.js 15 otomatis static export)
+RUN NEXT_DISABLE_TURBOPACK=1 npx next build
+
+# Copy static assets dan hasil build agar bisa diakses
+RUN mkdir -p .next/server/app/_next && \
+    cp -r .next/static .next/server/app/_next/static && \
+    cp -r public/* .next/server/app/
+
+EXPOSE 3000
+
+CMD ["npx", "serve", ".next/server/app", "-l", "3000"]

build-filter.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
+
+if [[ "$VERCEL_GIT_COMMIT_REF" == "master" || "$VERCEL_GIT_COMMIT_REF" == "development" ]]; then
+echo "✅ - Build can proceed"
+exit 1
+else
+echo "🛑 - Build cancelled"
+exit 0
+fi

docker-compose.yaml

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

eslint.config.mjs

@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -10,14 +10,14 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
     ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
     ],
   },
 ];

next.config.ts

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

package.json

@@ -6,21 +6,32 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "prepare": "husky",
+    "format": "prettier --write ."
   },
   "dependencies": {
+    "@react-pdf/renderer": "^4.3.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.2",
     "moment": "^2.30.1",
-    "next": "15.5.3",
+    "next": "15.5.9",
     "react": "19.1.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-hot-toast": "^2.6.0",
+    "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
+    "use-debounce": "^10.0.6",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "yup": "^1.7.0",
     "zustand": "^5.0.8"
   },
@@ -31,9 +42,11 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "daisyui": "^5.1.12",
+    "daisyui": "^5.5.8",
     "eslint": "^9",
-    "eslint-config-next": "15.5.3",
+    "eslint-config-next": "^15.5.7",
+    "husky": "^9.1.7",
+    "prettier": "^3.6.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

postcss.config.mjs

@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;

src/app/closing/detail/layout.tsx

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

src/app/closing/detail/page.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const ClosingDetailPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const closingId = searchParams.get('closingId');
+
+  const { data: closing, isLoading: isLoadingClosing } = useSWR(
+    closingId,
+    (id: number) => ClosingApi.getGeneralInfo(id)
+  );
+
+  const { data: salesData, isLoading: isLoadingSales } = useSWR(
+    closingId ? `sales-${closingId}` : null,
+    () => ClosingApi.getPenjualan(Number(closingId))
+  );
+
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
+  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 || isLoadingSales || isLoadingHppEkspedisi;
+
+  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}
+          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export default ClosingDetailPage;

src/app/closing/page.tsx

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

src/app/dashboard/page.tsx

@@ -0,0 +1,9 @@
+const Dashboard = () => {
+  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

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

@@ -0,0 +1,63 @@
+'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 === 1 ||
+      expense.data.latest_approval.step_number === 2 ||
+      expense.data.latest_approval.step_number === 3);
+
+  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/layout.tsx

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

src/app/expense/detail/page.tsx

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

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

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

@@ -0,0 +1,62 @@
+'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 === 4 ||
+      expense.data.latest_approval.step_number === 5);
+
+  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/layout.tsx

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

src/app/expense/realization/page.tsx

@@ -0,0 +1,67 @@
+'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 === 3;
+
+  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/globals.css

@@ -1,5 +1,54 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/daisyui.css';
+
+@plugin "daisyui/theme" {
+  name: 'lti';
+  default: false;
+  prefersdark: false;
+  color-scheme: 'light';
+
+  /* Primary Colors */
+  --color-primary: oklch(39.4% 0.177 301.9);
+  --color-primary-content: oklch(87.5% 0.038 274.5);
+
+  /* Secondary Colors */
+  --color-secondary: oklch(60.1% 0.258 335.7);
+  --color-secondary-content: oklch(99.4% 0.007 337.8);
+
+  /* Accent Colors */
+  --color-accent: oklch(76.2% 0.155 170.8);
+  --color-accent-content: oklch(7.2% 0.007 167.6);
+
+  /* Neutral Colors */
+  --color-neutral: oklch(22.4% 0.032 258.8);
+  --color-neutral-content: oklch(87.7% 0.016 257);
+
+  /* Base Colors */
+  --color-base-100: oklch(100% 0 0); /* #ffffff */
+  --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
+  --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
+  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+
+  /* Status/Utility Colors */
+  --color-info: oklch(67.4% 0.176 238.9);
+  --color-info-content: oklch(0% 0 0); /* #000000 */
+  --color-success: oklch(62.3% 0.147 149);
+  --color-success-content: oklch(100% 0 0); /* #ffffff */
+  --color-warning: oklch(82.2% 0.165 91.9);
+  --color-warning-content: oklch(0% 0 0); /* #000000 */
+  --color-error: oklch(61.8% 0.203 27.8);
+  --color-error-content: oklch(100% 0 0); /* #fffffff */
+
+  --radius-selector: 0rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.21875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
 
 :root {
   --color-primary: #1f74bf;
@@ -7,8 +56,19 @@
 
 @theme {
   --font-inter: var(--font-inter);
+
+  --container-sm: 40rem;
+  --container-md: 48rem;
+  --container-lg: 64rem;
+  --container-xl: 80rem;
+  --container-2xl: 96rem;
 }
 
 html {
   scrollbar-gutter: initial;
 }
+
+.react-select__menu-portal {
+  position: relative;
+  z-index: 99999 !important;
+}

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

@@ -0,0 +1,11 @@
+import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
+
+const CreateInventoryAdjustment = () => {
+  return (
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <InventoryAdjustmentForm />
+    </section>
+  );
+};
+
+export default CreateInventoryAdjustment;

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

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

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

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
+import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
+
+const DetailInventoryAdjustment = () => {
+  const router = useRouter();
+  const [inventoryAdjustment, setInventoryAdjustment] =
+    useState<InventoryAdjustment | null>(null);
+
+  // Ambil data dari router state
+  useEffect(() => {
+    const state = window.history.state?.usr as
+      | { inventoryAdjustment?: InventoryAdjustment }
+      | undefined;
+
+    if (state?.inventoryAdjustment) {
+      // jika object dikirim via router.push(state)
+      setInventoryAdjustment(state.inventoryAdjustment);
+    }
+  }, [router]);
+
+  const finalData = inventoryAdjustment;
+
+  if (!finalData) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  return (
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <InventoryAdjustmentForm initialValues={finalData} />
+    </section>
+  );
+};
+
+export default DetailInventoryAdjustment;

src/app/inventory/adjustment/page.tsx

@@ -0,0 +1,11 @@
+import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/InventoryAdjustmentTable';
+
+const InventoryAdjustment = () => {
+  return (
+    <section className='w-full p-4'>
+      <InventoryAdjustmentTable />
+    </section>
+  );
+};
+
+export default InventoryAdjustment;

src/app/inventory/movement/add/page.tsx

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

src/app/inventory/movement/detail/edit/page.tsx

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

src/app/inventory/movement/detail/layout.tsx

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

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

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

src/app/inventory/movement/page.tsx

@@ -0,0 +1,11 @@
+import MovementTable from '@/components/pages/inventory/movement/MovementTable';
+
+const Movement = () => {
+  return (
+    <section className='w-full p-4'>
+      <MovementTable />
+    </section>
+  );
+};
+
+export default Movement;

src/app/inventory/product/detail/layout.tsx

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

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

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

@@ -0,0 +1,11 @@
+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,7 +1,10 @@
 import type { Metadata, Viewport } from 'next';
 import { Inter } from 'next/font/google';
 import '@/app/globals.css';
+
+import { Toaster } from 'react-hot-toast';
 import MainDrawer from '@/components/MainDrawer';
+import RequireAuth from '@/components/helper/RequireAuth';
 
 const inter = Inter({
   variable: '--font-inter',
@@ -25,9 +28,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en'>
+    <html lang='en' data-theme='lti'>
       <body className={`${inter.variable} antialiased font-inter`}>
+        <RequireAuth>
           <MainDrawer>{children}</MainDrawer>
+        </RequireAuth>
+
+        <Toaster />
       </body>
     </html>
   );

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

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

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

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

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

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

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

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

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

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

src/app/marketing/detail/layout.tsx

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

src/app/marketing/detail/page.tsx

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

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

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

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

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

src/app/marketing/page.tsx

@@ -0,0 +1,11 @@
+import MarketingTable from '@/components/pages/marketing/MarketingTable';
+
+const Marketing = () => {
+  return (
+    <div className='w-full p-4'>
+      <MarketingTable />
+    </div>
+  );
+};
+
+export default Marketing;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
+
+const CustomerDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get('customerId');
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if (!costumerId) {
+    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 (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType='detail' initialValues={costumer.data} />
+      )}
+    </div>
+  );
+};
+
+export default CustomerDetail;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+'use client';
+
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const FlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const flockId = searchParams.get('flockId');
+
+  // Fetch Data
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
+
+  if (!flockId) {
+    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 (!isLoadingFlock && (!flock || isResponseError(flock))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingFlock && isResponseSuccess(flock) && (
+        <FlockForm formType='edit' initialValues={flock.data} />
+      )}
+    </div>
+  );
+};
+
+export default FlockEdit;

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

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

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

@@ -0,0 +1,49 @@
+'use client';
+
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const FlockDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const flockId = searchParams.get('flockId');
+
+  // Fetch Data
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
+
+  if (!flockId) {
+    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 (!isLoadingFlock && (!flock || isResponseError(flock))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingFlock && isResponseSuccess(flock) && (
+        <FlockForm formType='detail' initialValues={flock.data} />
+      )}
+    </div>
+  );
+};
+
+export default FlockDetail;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/master-data/product-category/detail/layout.tsx

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

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import ProductCategoryForm from '@/components/pages/master-data/product-category/form/ProductCategoryForm';
+
+import { ProductCategoryApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const ProductCategoryDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const productCategoryId = searchParams.get('productCategoryId');
+
+  const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
+    productCategoryId,
+    (id: number) => ProductCategoryApi.getSingle(id)
+  );
+
+  if (!productCategoryId) {
+    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 (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
+        <ProductCategoryForm
+          type='detail'
+          initialValues={productCategory.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ProductCategoryDetail;

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

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

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

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

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

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

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

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

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

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

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

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