update Dockerfile

Fix: LTI Issue #236

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

.gitlab-ci.yml

@@ -0,0 +1,44 @@
+stages:
+  - build
+
+variables:
+  # 🔧 Aktifkan Docker BuildKit (build lebih cepat & caching layer)
+  DOCKER_BUILDKIT: "1"
+  COMPOSE_DOCKER_CLI_BUILD: "1"
+  DOCKER_DRIVER: overlay2
+
+  # 🧠 Nama image (pakai commit short SHA)
+  IMAGE_NAME: "$CI_REGISTRY_IMAGE/web-lti:development_${CI_COMMIT_SHORT_SHA}"
+
+  # Cache npm (disimpan antar pipeline)
+  NPM_CACHE_DIR: "$CI_PROJECT_DIR/.npm"
+
+cache:
+  key: npm-cache
+  paths:
+    - .npm/
+
+build-image:
+  stage: build
+  image: docker:27.0.3
+  services:
+    - docker:dind
+
+  before_script:
+    - echo "🔐 Logging in to GitLab Container Registry..."
+    - echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" --password-stdin "$CI_REGISTRY"
+
+  script:
+    - echo "🚧 Building optimized Docker image..."
+    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from $CI_REGISTRY_IMAGE/web-lti:latest -t "$IMAGE_NAME" .
+    - docker push "$IMAGE_NAME"
+
+    # 🧹 Keep only last 3 images (hapus yang lama)
+    - echo "🧹 Cleaning old images..."
+    - docker image prune -af --filter "until=72h"
+
+  after_script:
+    - echo "✅ Build complete: $IMAGE_NAME"
+
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "development"'

.husky/pre-commit

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

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',
     ],
   },
 ];

package.json

@@ -6,7 +6,9 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "prepare": "husky",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.19.4",
@@ -14,11 +16,13 @@
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
+    "inputmask": "^5.0.9",
     "moment": "^2.30.1",
     "next": "15.5.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "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",
@@ -30,12 +34,15 @@
     "@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.1.12",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
+    "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/globals.css

@@ -1,5 +1,41 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/daisyui.css';
+
+@plugin "daisyui/theme" {
+  name: 'lti';
+  default: false;
+  prefersdark: false;
+  color-scheme: 'light';
+  --color-base-100: oklch(98% 0.001 106.423);
+  --color-base-200: oklch(97% 0.001 106.424);
+  --color-base-300: oklch(92% 0.003 48.717);
+  --color-base-content: oklch(22.389% 0.031 278.072);
+  --color-primary: oklch(60% 0.126 221.723);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(52% 0.105 223.128);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(45% 0.085 224.283);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(39% 0.07 227.392);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(58% 0.158 241.966);
+  --color-info-content: oklch(100% 0 0);
+  --color-success: oklch(62% 0.194 149.214);
+  --color-success-content: oklch(100% 0 0);
+  --color-warning: oklch(85% 0.199 91.936);
+  --color-warning-content: oklch(0% 0 0);
+  --color-error: oklch(57% 0.245 27.325);
+  --color-error-content: oklch(100% 0 0);
+  --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;

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,47 @@
+'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(() => {
+    console.log('Router State');
+    console.log(window.history.state);
+    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;
+
+  console.log('Final Data');
+  console.log(finalData);
+
+  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/layout.tsx

@@ -28,7 +28,7 @@ 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>

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

@@ -1,11 +1,11 @@
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+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 className='w-full p-4 flex flex-row justify-center'>
+      <CustomerForm />
     </section>
   );
-}
+};
 
-export default AddCustomer;
+export default AddCustomer;

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

@@ -1,45 +1,47 @@
-'use client'
+'use client';
 
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+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";
+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 costumerId = searchParams.get('customerId');
 
   const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
     costumerId,
     (id: number) => CustomerApi.getSingle(id)
   );
 
-  if(!costumerId){
+  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 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");
+  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" />}
+    <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} />
+        <CustomerForm formType='detail' initialValues={costumer.data} />
       )}
     </div>
-  )
+  );
 };
 
 export default CustomerDetail;

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

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

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

@@ -1,11 +1,11 @@
-import ProductCategoryForm from "@/components/pages/master-data/product-category/form/ProductCategoryForm";
+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">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductCategoryForm />
     </div>
   );
 };
 
-export default AddProductCategory;
+export default AddProductCategory;

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

@@ -9,39 +9,44 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const ProductCategoryEdit = () => {
-    const router = useRouter();
-    const searchParams = useSearchParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
-    const productCategoryId = searchParams.get('productCategoryId');
+  const productCategoryId = searchParams.get('productCategoryId');
 
-    const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
-        productCategoryId,
-        (id: number) => ProductCategoryApi.getSingle(id)
-    );
+  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;
-    }
+  if (!productCategoryId) {
+    router.back();
 
     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>
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
     );
-}
+  }
 
-export default ProductCategoryEdit;
+  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/page.tsx

@@ -29,16 +29,24 @@ const ProductCategoryDetail = () => {
     );
   }
 
-  if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
+  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 && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-        <ProductCategoryForm type='detail' initialValues={productCategory.data} />
+        <ProductCategoryForm
+          type='detail'
+          initialValues={productCategory.data}
+        />
       )}
     </div>
   );

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

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

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

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

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

@@ -13,9 +13,8 @@ const ProductEdit = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductEdit = () => {
   );
 };
 
-export default ProductEdit;
+export default ProductEdit;

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

@@ -13,9 +13,8 @@ const ProductDetail = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductDetail = () => {
   );
 };
 
-export default ProductDetail;
+export default ProductDetail;

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

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

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

@@ -8,4 +8,4 @@ const AddSupplier = () => {
   );
 };
 
-export default AddSupplier;
+export default AddSupplier;

src/app/master-data/supplier/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/supplier/detail/page.tsx

@@ -46,4 +46,4 @@ const SupplierDetail = () => {
   );
 };
 
-export default SupplierDetail;
+export default SupplierDetail;

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

@@ -1,4 +1,4 @@
-import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
+import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
   return (

src/app/production/chickin/add/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/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/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/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

@@ -0,0 +1,13 @@
+'use client';
+
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+
+const AddProjectFlock = () => {
+  return (
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <ProjectFlockForm formType='add' />
+    </section>
+  );
+};
+
+export default AddProjectFlock;

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

@@ -0,0 +1,47 @@
+'use client';
+
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const ProjectFlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get('projectFlockId');
+
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+
+  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 (!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))) {
+    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(projectFlock) && (
+        <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
+      )}
+    </div>
+  );
+};
+
+export default ProjectFlockEdit;

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

@@ -0,0 +1,55 @@
+'use client';
+
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+const ProjectFlockDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get('projectFlockId');
+
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
+
+  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;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm
+          formType='detail'
+          initialValues={projectFlock.data}
+          refreshProjectFlocks={refreshProjectFlock}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ProjectFlockDetail;

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

@@ -0,0 +1,11 @@
+import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
+
+const ProjectFlock = () => {
+  return (
+    <section className='w-full p-4'>
+      <ProjectFlockTable />
+    </section>
+  );
+};
+
+export default ProjectFlock;

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

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

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

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

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

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

src/app/production/recording/page.tsx

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

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/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/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

@@ -0,0 +1,11 @@
+import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
+
+const TransferToLaying = () => {
+  return (
+    <section className='w-full p-4'>
+      <TransferToLayingsTable />
+    </section>
+  );
+};
+
+export default TransferToLaying;

src/components/Badge.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface BadgeProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
+  children?: ReactNode;
+  className?: {
+    badge?: string;
+  };
+  variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const Badge = ({
+  children,
+  className,
+  variant = 'default',
+  color,
+  size = 'md',
+  ...props
+}: BadgeProps) => {
+  const getBadgeClasses = () => {
+    const baseClasses = 'badge';
+
+    const variantClasses = {
+      default: '',
+      outline: 'badge-outline',
+      ghost: 'badge-ghost',
+      soft: 'badge-soft',
+      dash: 'badge-dash',
+    };
+
+    const colorClasses = {
+      neutral: 'badge-neutral',
+      primary: 'badge-primary',
+      secondary: 'badge-secondary',
+      accent: 'badge-accent',
+      info: 'badge-info',
+      success: 'badge-success',
+      warning: 'badge-warning',
+      error: 'badge-error',
+    };
+
+    const sizeClasses = {
+      xs: 'badge-xs',
+      sm: 'badge-sm',
+      md: 'badge-md',
+      lg: 'badge-lg',
+      xl: 'badge-xl',
+    };
+
+    return cn(
+      baseClasses,
+      variantClasses[variant],
+      color && colorClasses[color],
+      sizeClasses[size],
+      className?.badge
+    );
+  };
+
+  return (
+    <span className={getBadgeClasses()} {...props}>
+      {children}
+    </span>
+  );
+};
+
+export default Badge;

src/components/Button.tsx

@@ -1,7 +1,5 @@
 import react from 'react';
-
 import Link from 'next/link';
-
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
 
@@ -10,6 +8,8 @@ interface ButtonProps extends react.ComponentProps<'button'> {
   color?: Color;
   href?: string;
   isLoading?: boolean;
+  target?: string;
+  rel?: string;
 }
 
 const Button = ({
@@ -22,6 +22,8 @@ const Button = ({
   className,
   disabled,
   onClick,
+  target,
+  rel,
   ...props
 }: ButtonProps) => {
   const btnBaseClassName = cn(
@@ -43,7 +45,7 @@ const Button = ({
       'btn-warning': color === 'warning',
       'btn-error': color === 'error',
     },
-    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+    'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all'
   );
 
   return (
@@ -68,6 +70,8 @@ const Button = ({
       {href && (
         <Link
           href={disabled ? '#' : href}
+          target={target}
+          rel={rel}
           aria-disabled={disabled}
           className={cn(
             btnBaseClassName,

src/components/Card.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  title?: string;
+  subtitle?: string;
+  image?: string;
+  imageAlt?: string;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  className?: {
+    wrapper?: string;
+    image?: string;
+    body?: string;
+    title?: string;
+    subtitle?: string;
+    actions?: string;
+    footer?: string;
+  };
+  variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Card = ({
+  title,
+  subtitle,
+  image,
+  imageAlt,
+  actions,
+  footer,
+  className,
+  variant = 'default',
+  size = 'md',
+  children,
+  ...props
+}: CardProps) => {
+  const getCardClasses = () => {
+    const baseClasses = 'card bg-base-100';
+
+    const variantClasses = {
+      default: '',
+      compact: 'card-compact',
+      bordered: 'border border-base-300',
+      shadow: 'shadow-xl',
+      'image-full': 'card-side card-compact shadow-xl',
+    };
+
+    const sizeClasses = {
+      sm: 'w-64',
+      md: 'w-96',
+      lg: 'w-[28rem]',
+    };
+
+    return cn(
+      baseClasses,
+      variantClasses[variant],
+      variant !== 'image-full' ? sizeClasses[size] : '',
+      className?.wrapper
+    );
+  };
+
+  const getImageClasses = () => {
+    if (variant === 'image-full') {
+      return cn('w-32 h-32 object-cover', className?.image);
+    }
+    return cn('h-48 object-cover', className?.image);
+  };
+
+  const getBodyClasses = () => {
+    const baseClasses = 'card-body';
+
+    if (variant === 'compact' || variant === 'image-full') {
+      return cn(baseClasses, 'p-4', className?.body);
+    }
+
+    return cn(baseClasses, 'p-6', className?.body);
+  };
+
+  const getTitleClasses = () => {
+    const sizeClasses = {
+      sm: 'text-lg',
+      md: 'text-xl',
+      lg: 'text-2xl',
+    };
+
+    return cn('card-title font-bold', sizeClasses[size], className?.title);
+  };
+
+  const getSubtitleClasses = () => {
+    return cn('text-base-content/70 text-sm mt-1', className?.subtitle);
+  };
+
+  const getActionsClasses = () => {
+    return cn('card-actions justify-end mt-4', className?.actions);
+  };
+
+  const getFooterClasses = () => {
+    return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
+  };
+
+  if (variant === 'image-full' && image) {
+    return (
+      <div className={getCardClasses()} {...props}>
+        <figure>
+          <img
+            src={image}
+            alt={imageAlt || title || 'Card image'}
+            className={getImageClasses()}
+          />
+        </figure>
+        <div className={getBodyClasses()}>
+          {title && <h2 className={getTitleClasses()}>{title}</h2>}
+          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+          {children}
+          {actions && <div className={getActionsClasses()}>{actions}</div>}
+        </div>
+        {footer && <div className={getFooterClasses()}>{footer}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={getCardClasses()} {...props}>
+      {image && (
+        <figure>
+          <img
+            src={image}
+            alt={imageAlt || title || 'Card image'}
+            className={getImageClasses()}
+          />
+        </figure>
+      )}
+      <div className={getBodyClasses()}>
+        {title && <h2 className={getTitleClasses()}>{title}</h2>}
+        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+        {children}
+        {actions && <div className={getActionsClasses()}>{actions}</div>}
+      </div>
+      {footer && <div className={getFooterClasses()}>{footer}</div>}
+    </div>
+  );
+};
+
+export default Card;

src/components/Collapse.tsx

@@ -68,7 +68,7 @@ export const Collapse = ({
     'collapse',
     variant === 'arrow' && 'collapse-arrow',
     variant === 'plus' && 'collapse-plus',
-    bordered && 'border base-content/20 border-opacity-20 rounded-box',
+    bordered && 'border base-content/20 border-opacity-20 rounded',
     disabled && 'opacity-60 pointer-events-none',
     !open && 'w-fit',
     className

src/components/MainDrawer.tsx

@@ -10,6 +10,7 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Navbar from '@/components/Navbar';
 import Collapse from '@/components/Collapse';
+import Button from '@/components/Button';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
@@ -155,9 +156,15 @@ const MainDrawerMenu = () => {
 };
 
 const MainDrawerContent = () => {
+  const { setMainDrawerOpen } = useUiStore();
+
+  const closeMainDrawerHandler = () => {
+    setMainDrawerOpen(false);
+  };
+
   return (
     <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex items-center gap-4'>
+      <div className='flex flex-row items-center gap-4'>
         <Image
           src='/assets/img/lti-logo.png'
           alt='MBU Logo'
@@ -167,6 +174,21 @@ const MainDrawerContent = () => {
         />
 
         <h1 className='text-xl font-bold'>LTI ERP</h1>
+
+        <div className='grow flex flex-row justify-end sm:hidden'>
+          <Button
+            variant='soft'
+            color='error'
+            onClick={closeMainDrawerHandler}
+            className='rounded-full'
+          >
+            <Icon
+              icon='material-symbols:close-rounded'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
       </div>
 
       <MainDrawerMenu />

src/components/Pagination.tsx

@@ -185,17 +185,17 @@ const Pagination = ({
                     currentPage <= 2
                       ? currentPage + 2
                       : currentPage === totalPages - 2
-                      ? 3
-                      : currentPage >= totalPages - 1
-                      ? 4
-                      : 1
+                        ? 3
+                        : currentPage >= totalPages - 1
+                          ? 4
+                          : 1
                   }
                   endPage={
                     currentPage <= 2 || currentPage >= totalPages - 1
                       ? totalPages - 3
                       : currentPage === totalPages - 2
-                      ? totalPages - 4
-                      : 2
+                        ? totalPages - 4
+                        : 2
                   }
                   onPageItemClick={pageChangeHandler}
                 />
@@ -242,15 +242,15 @@ const Pagination = ({
                     currentPage <= 3
                       ? currentPage + 2
                       : currentPage >= 4
-                      ? currentPage + 2
-                      : 1
+                        ? currentPage + 2
+                        : 1
                   }
                   endPage={
                     currentPage <= 3
                       ? totalPages - 2
                       : currentPage >= 4
-                      ? totalPages - 1
-                      : 0
+                        ? totalPages - 1
+                        : 0
                   }
                   onPageItemClick={pageChangeHandler}
                 />

src/components/PillBadge.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface PillBadgeProps {
+  content: ReactNode;
+  color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
+  className?: string;
+}
+
+const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
+        {
+          'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
+          'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
+          'border-green-200 bg-green-50 text-green-500': color === 'green',
+          'border-red-200 bg-red-50 text-red-500': color === 'red',
+          'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
+          'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
+        },
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default PillBadge;

src/components/Table.tsx

@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
   sorting,
   setSorting,
   manualSorting = false,
+  rowSelection,
+  setRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 

src/components/Tooltip.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface TooltipProps {
+  children?: ReactNode;
+  content?: ReactNode;
+  className?: {
+    wrapper?: string;
+    content?: string;
+  };
+  open?: boolean;
+  color?: Color;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ({
+  children,
+  content,
+  className,
+  open,
+  color,
+  position,
+}: TooltipProps) => {
+  const tooltipBaseClassName = cn('tooltip', {
+    'tooltip-open': typeof open === 'boolean' && open,
+
+    'tooltip-top': position === 'top',
+    'tooltip-bottom': position === 'bottom',
+    'tooltip-left': position === 'left',
+    'tooltip-right': position === 'right',
+
+    'tooltip-primary': color === 'primary',
+    'tooltip-secondary': color === 'secondary',
+    'tooltip-accent': color === 'accent',
+    'tooltip-neutral': color === 'neutral',
+    'tooltip-info': color === 'info',
+    'tooltip-success': color === 'success',
+    'tooltip-warning': color === 'warning',
+    'tooltip-error': color === 'error',
+  });
+  return (
+    <div className={cn(tooltipBaseClassName, className?.wrapper)}>
+      <div
+        className={cn(
+          'tooltip-content',
+          'max-w-60 sm:max-w-xs',
+          className?.content
+        )}
+      >
+        {content}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default Tooltip;

src/components/helper/RequireAuth.tsx

@@ -158,7 +158,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
 
   const { data: userResponse, isLoading: isLoadingUserResponse } =
     useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-      '/auth/get-me',
+      '/auth/sso/userinfo',
       httpClientFetcher,
       {
         shouldRetryOnError: false,
@@ -194,4 +194,4 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   return <>{children}</>;
 };
 
-export default RequireAuth;
+export default RequireAuth;

src/components/helper/form/FormActions.tsx

@@ -0,0 +1,87 @@
+import { Icon } from '@iconify/react';
+import { FormikContextType } from 'formik';
+import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
+
+interface FormActionsProps<T> {
+  type: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<T>;
+  editUrl?: string;
+  onDelete?: () => void;
+  disableSubmit?: boolean;
+}
+
+export const FormActions = <T,>({
+  type,
+  formik,
+  editUrl,
+  onDelete,
+  disableSubmit = false,
+}: FormActionsProps<T>) => {
+  return (
+    <div className='flex flex-row justify-between gap-2 flex-wrap'>
+      {type !== 'add' && onDelete && (
+        <div className='flex flex-row justify-start gap-2'>
+          <Button
+            type='button'
+            color='error'
+            onClick={onDelete}
+            className='px-4'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={24}
+              height={24}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+          {type !== 'edit' && editUrl && (
+            <Button
+              type='button'
+              color='warning'
+              href={editUrl}
+              className='px-4'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={24}
+                height={24}
+                className='justify-start text-sm'
+              />
+              Edit
+            </Button>
+          )}
+        </div>
+      )}
+      {type !== 'detail' && (
+        <div
+          className={cn('flex flex-row justify-end gap-2', {
+            'w-full': type === 'add',
+          })}
+        >
+          <Button
+            type='reset'
+            color='warning'
+            className='px-4'
+            onClick={() => {
+              formik.handleReset();
+              formik.validateForm();
+            }}
+          >
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            color='primary'
+            className='px-4'
+            isLoading={formik.isSubmitting}
+            disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/helper/form/FormHeader.tsx

@@ -0,0 +1,24 @@
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+
+interface FormHeaderProps {
+  type: 'add' | 'edit' | 'detail';
+  title: string;
+  backUrl: string;
+}
+
+export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
+  return (
+    <header className='flex flex-col gap-4'>
+      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
+        <Icon icon='uil:arrow-left' width={24} height={24} />
+        Kembali
+      </Button>
+      <h1 className='text-2xl font-bold text-center'>
+        {type === 'add' && `Tambah ${title}`}
+        {type === 'edit' && `Edit ${title}`}
+        {type === 'detail' && `Detail ${title}`}
+      </h1>
+    </header>
+  );
+};

src/components/input/CheckboxInput.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { HTMLProps, useEffect, useRef } from 'react';
+import { cn } from '@/lib/helper';
+
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+  name: string;
+  label?: string;
+  indeterminate?: boolean;
+  classNames?: {
+    wrapper?: string;
+    inputWrapper?: string;
+    checkbox?: string;
+    label?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+}
+
+const CheckboxInput = ({
+  indeterminate,
+  name,
+  label,
+  className,
+  classNames,
+  isValid,
+  isError,
+  errorMessage,
+  ...rest
+}: CheckboxInputProps) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
+    >
+      <div
+        className={cn(
+          'flex flex-row justify-center items-center gap-2',
+          classNames?.inputWrapper
+        )}
+      >
+        <input
+          type='checkbox'
+          ref={ref}
+          id={name}
+          name={name}
+          className={cn(
+            'checkbox cursor-pointer',
+            {
+              'border-error': isError,
+              'border-success': isValid,
+            },
+            className,
+            classNames?.checkbox
+          )}
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
+    </div>
+  );
+};
+
+export default CheckboxInput;

src/components/input/DateInput.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DateInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  placeholder?: string;
+  min?: string;
+  max?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+}
+
+const DateInput = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  min,
+  max,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+}: DateInputProps) => {
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'>*</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+
+      <div
+        className={cn(
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
+        )}
+      >
+        {startAdornment && startAdornment}
+
+        <input
+          type='date'
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          min={min}
+          max={max}
+          disabled={disabled}
+          className={cn('grow bg-transparent cursor-pointer', className?.input)}
+          readOnly={readOnly}
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+            {endAdornment && endAdornment}
+          </div>
+        )}
+      </div>
+
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export default DateInput;

src/components/input/FileInput.tsx

@@ -69,10 +69,7 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn(
-          'grow file-input w-full h-12 rounded-lg!',
-          className?.input
-        )}
+        className={cn('grow file-input w-full h-12 rounded', className?.input)}
         readOnly={readOnly}
       />
 

src/components/input/NumberInput.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { ChangeEvent, ReactNode } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+  decimalScale?: number;
+  allowNegative?: boolean;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
+}
+
+const NumberInput = ({
+  thousandSeparator = ',',
+  decimalSeparator = '.',
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  inputPrefix,
+  inputSuffix,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
+
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
+    }
+  };
+
+  return (
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      startAdornment={inputPrefix}
+      endAdornment={inputSuffix}
+      {...restProps}
+    />
+  );
+};
+
+export default NumberInput;

src/components/input/RadioInput.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { ChangeEventHandler, ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface RadioOption {
+  label: string;
+  value: string;
+}
+
+export interface RadioInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  options: RadioOption[];
+  variant?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    radioWrapper?: string;
+    radio?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  disabled?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+const RadioInput = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  options,
+  variant = 'radio-primary',
+  className,
+  isError,
+  errorMessage,
+  required = false,
+  disabled = false,
+  onChange,
+  onBlur,
+}: RadioInputProps) => {
+  return (
+    <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
+      {/* Label atas */}
+      {label && (
+        <label
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            { 'text-error': isError },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <span className='text-error ml-1' title='required'>
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      {/* Daftar opsi radio */}
+      <div
+        className={cn(
+          'flex flex-row flex-wrap gap-4 items-center',
+          className?.radioWrapper
+        )}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={cn(
+              'flex flex-row items-center gap-2 cursor-pointer',
+              disabled && 'opacity-60 cursor-not-allowed'
+            )}
+          >
+            <input
+              type='radio'
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={onChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              className={cn('radio', variant, className?.radio)}
+            />
+            <span className='text-sm'>{option.label}</span>
+          </label>
+        ))}
+      </div>
+
+      {/* Label bawah */}
+      {!isError && bottomLabel && (
+        <p className='text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {/* Pesan error */}
+      {isError && errorMessage && (
+        <p className='text-sm text-error'>{errorMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export default RadioInput;

src/components/input/SelectInput.tsx

@@ -1,28 +1,37 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-import Select, { OptionProps, GroupBase, InputActionMeta } from 'react-select';
+import useSWR from 'swr';
+
+import Select, {
+  OptionProps,
+  GroupBase,
+  InputActionMeta,
+  MultiValue,
+  SingleValue,
+} from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
-
-import { cn } from '@/lib/helper';
+import { cn, getByPath } from '@/lib/helper';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export interface OptionType {
   value: string | number;
   label: string;
-  className?: string; // for multi select
-  labelClassName?: string; // for multi select
+  className?: string;
+  labelClassName?: string;
 }
 
 export type OptionComponent<T = OptionType> = ComponentType<
   OptionProps<T, boolean, GroupBase<T>>
 >;
 
-interface SelectInputProps<T = OptionType> {
+interface SelectInputBaseProps<T = OptionType> {
   label?: ReactNode;
   bottomLabel?: ReactNode;
-  value?: T | T[];
-  onChange?: (val: T | T[] | null) => void;
   options: T[];
   optionComponent?: OptionComponent<T>;
   isDisabled?: boolean;
@@ -46,52 +55,73 @@ interface SelectInputProps<T = OptionType> {
   onInputChange?: (search: string) => void;
 }
 
+interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
+  createables?: boolean;
+  value?: T | T[] | null;
+  onChange?: (val: T | T[] | null) => void;
+}
+
 const animatedComponents = makeAnimated();
 
-const SelectInput = <T extends OptionType>({
-  label,
-  bottomLabel,
-  value,
-  onChange,
-  options,
-  optionComponent,
-  isDisabled,
-  isLoading,
-  isClearable,
-  isRtl,
-  isSearchable = true,
-  isMulti,
-  placeholder,
-  required,
-  className,
-  isError,
-  errorMessage,
-  isAnimated = true,
-  openMenu,
-  delay = 300,
-  onInputChange,
-}: SelectInputProps) => {
-  const [internalInputValue, setInternalInputValue] = useState('');
+const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
+  const {
+    label,
+    bottomLabel,
+    value,
+    onChange,
+    options,
+    optionComponent,
+    isDisabled,
+    isLoading,
+    isClearable,
+    isRtl,
+    isSearchable = true,
+    isMulti,
+    placeholder,
+    required,
+    className,
+    isError,
+    errorMessage,
+    isAnimated = true,
+    openMenu,
+    delay = 300,
+    createables = false,
+    onInputChange,
+  } = props;
 
-  const [debouncedInputValue] = useDebounce(internalInputValue, delay ?? 300);
+  const [internalInputValue, setInternalInputValue] = useState('');
+  const [debouncedInputValue] = useDebounce(internalInputValue, delay);
 
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-
-    return {
-      ...base,
-      IndicatorSeparator: () => null,
-    };
+    return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (value: string, meta: InputActionMeta) => {
-    if (meta.action === 'input-change') setInternalInputValue(value);
+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
+    if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
 
   useEffect(() => {
     onInputChange?.(debouncedInputValue);
-  }, [debouncedInputValue]);
+  }, [onInputChange, debouncedInputValue]);
+
+  const SelectComponent = createables ? CreatableSelect : Select;
+
+  /** 🎯 handleChange tanpa any */
+  const handleChange = (val: MultiValue<T> | SingleValue<T>): void => {
+    if (!val) {
+      onChange?.(null);
+      return;
+    }
+
+    if (isMulti) {
+      onChange?.(val as T[]);
+    } else {
+      onChange?.(val as T);
+    }
+  };
+
   return (
     <div
       className={cn(
@@ -103,28 +133,23 @@ const SelectInput = <T extends OptionType>({
         <span
           className={cn(
             'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
+            { 'text-error': isError },
             className?.label
           )}
         >
           {label}
           {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
+            <span className='tooltip tooltip-error' data-tip='required'>
+              <span className='text-error'> *</span>
+            </span>
           )}
         </span>
       )}
 
-      <Select
+      <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value}
-        onChange={(val) => onChange?.(val as T)}
+        value={value ?? (isMulti ? [] : null)}
+        onChange={handleChange}
         options={options}
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
@@ -136,14 +161,13 @@ const SelectInput = <T extends OptionType>({
         isRtl={isRtl}
         isSearchable={isSearchable}
         placeholder={placeholder}
-        className={cn('w-full', className)}
+        className={cn('w-full', className?.select)}
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
               {
-                'border-red-500! focus-within:border-red-500 focus-within:ring-2 focus-within:ring-red-200':
-                  isError,
+                'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
                 'border-gray-300': !isError && !isFocused,
                 'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
@@ -156,57 +180,41 @@ const SelectInput = <T extends OptionType>({
             cn({ 'text-gray-900': !isError, 'text-error!': isError }),
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
-          indicatorSeparator: () => cn('mx-1 h-4 w-px bg-gray-200'),
-          clearIndicator: () => cn('p-1 rounded-md hover:bg-gray-100'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
           menu: () =>
-            cn(
-              'border border-gray-200 rounded-lg bg-white shadow-lg rounded-lg!'
-            ),
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
-          groupHeading: () =>
-            cn('ml-2 mt-2 mb-1 text-xs font-medium text-gray-500'),
-          option: ({ isFocused, isSelected, isDisabled }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer! select-none', {
-              'text-gray-300': isDisabled,
+          option: ({ isFocused, isSelected }) =>
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
-              'text-gray-700': !isDisabled && !isFocused,
-              'active:bg-indigo-50': !isDisabled,
               'bg-blue-500!': isSelected,
+              'text-gray-700': !isFocused && !isSelected,
             }),
-          noOptionsMessage: () => cn('px-3 py-2 text-gray-500'),
-          loadingMessage: () => cn('px-3 py-2 text-gray-500'),
           multiValue: ({ getValue, index }) => {
-            const selectedValues = getValue();
-
+            const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1 rounded-md!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
           multiValueLabel: ({ getValue, index }) => {
-            const selectedValues = getValue();
-
+            const selectedValues = getValue() as T[];
             return cn('text-indigo-700', selectedValues[index]?.labelClassName);
           },
-          multiValueRemove: () =>
-            cn('p-1 rounded-sm! hover:bg-indigo-100 hover:text-indigo-800'),
         }}
         components={{
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
         }}
-        // make the menu float above modals/etc.
         menuPortalTarget={
           typeof document !== 'undefined' ? document.body : undefined
         }
         styles={{
-          // Tailwind can't set inline z-index on a portal; use styles here:
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
         }}
       />
@@ -219,4 +227,45 @@ const SelectInput = <T extends OptionType>({
   );
 };
 
+const useSelect = <T,>(
+  basePath: string,
+  valueKey: keyof T,
+  labelKey: keyof T,
+  searchKey: string = 'search',
+  params?: { [key: string]: string }
+) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const optionsUrlParams = useMemo(() => {
+    return new URLSearchParams({
+      [searchKey]: inputValue ?? '',
+      ...params,
+    }).toString();
+  }, [inputValue, searchKey]);
+
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
+  });
+
+  const options = isResponseSuccess(data)
+    ? data.data.map((item) => {
+        return {
+          value: getByPath<T, number>(item, valueKey as string),
+          label: getByPath<T, string>(item, labelKey as string),
+        };
+      })
+    : [];
+
+  return {
+    inputValue,
+    setInputValue,
+    options,
+    isLoadingOptions: isLoading,
+    rawData: data,
+  };
+};
+
+export { useSelect };
 export default SelectInput;

src/components/input/TextArea.tsx

@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
@@ -31,7 +27,7 @@ export interface TextAreaProps {
   endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  cols?: number;
+  rows?: number;
 }
 
 const TextArea = ({
@@ -52,7 +48,7 @@ const TextArea = ({
   onBlur,
   readOnly = false,
   isLoading = false,
-  cols = 3
+  rows = 3,
 }: TextAreaProps) => {
   return (
     <div
@@ -83,35 +79,35 @@ const TextArea = ({
           )}
         </label>
       )}
-        {startAdornment && startAdornment}
+      {startAdornment && startAdornment}
 
-        <textarea
-          className={cn(
-            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-            },
-            className?.inputWrapper
-          )}
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          cols={cols}
-          onChange={onChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-
-            {endAdornment && endAdornment}
-          </div>
+      <textarea
+        className={cn(
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
         )}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+
+      {(isLoading || endAdornment) && (
+        <div className='flex flex-row gap-2'>
+          {isLoading && <span className='loading loading-spinner' />}
+
+          {endAdornment && endAdornment}
+        </div>
+      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>

src/components/input/TextInput.tsx

@@ -87,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/menu/MenuItem.tsx

@@ -49,14 +49,18 @@ const MenuItem = ({
   );
 
   return (
-    <li onClick={onClick}>
+    <li>
       {href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!href && <a className={menuItemBaseClassName}>{menuItemContent}</a>}
+      {!href && (
+        <button className={menuItemBaseClassName} onClick={onClick}>
+          {menuItemContent}
+        </button>
+      )}
     </li>
   );
 };

src/components/pages/ApprovalSteps.tsx

@@ -0,0 +1,181 @@
+import { Icon } from '@iconify/react';
+import Steps from '@/components/steps/Steps';
+import StepItem from '@/components/steps/StepItem';
+import Tooltip from '@/components/Tooltip';
+
+import { cn, formatDate } from '@/lib/helper';
+import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import { ApprovalLine } from '@/types/config/constant';
+
+export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
+
+export type ApprovalStepLog = {
+  action_by?: string;
+  date?: string;
+  notes?: string | null;
+};
+
+interface ApprovalStepsProps {
+  approvals: {
+    name?: string;
+    status: ApprovalStepStatus;
+    logs?: ApprovalStepLog[];
+  }[];
+}
+
+const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
+  return (
+    <Steps direction='vertical' className='w-full md:steps-horizontal'>
+      {approvals.map((approval, idx) => {
+        const stepItemColor =
+          approval.status === 'APPROVED'
+            ? 'success'
+            : approval.status === 'REJECTED'
+              ? 'error'
+              : approval.status === 'WAITING'
+                ? 'warning'
+                : undefined;
+
+        const stepItemIcon =
+          approval.status === 'APPROVED'
+            ? 'material-symbols:check-rounded'
+            : approval.status === 'REJECTED'
+              ? 'material-symbols:close-rounded'
+              : approval.status === 'WAITING'
+                ? 'pajamas:dash-circle'
+                : approval.logs && approval.logs.length > 0
+                  ? 'material-symbols:info-outline-rounded'
+                  : 'bxs:hourglass';
+
+        return (
+          <StepItem
+            key={idx}
+            color={stepItemColor}
+            icon={
+              <Tooltip
+                color={stepItemColor}
+                position='right'
+                className={{
+                  wrapper: 'md:tooltip-bottom',
+                }}
+                content={
+                  <>
+                    {approval.logs && approval.logs.length > 0 && (
+                      <div className='flex flex-col gap-2'>
+                        {approval.logs?.map((approvalLog, logIdx) => (
+                          <div
+                            key={logIdx}
+                            className='flex flex-col text-base text-start'
+                          >
+                            {approvalLog.date && (
+                              <span>
+                                {formatDate(
+                                  approvalLog.date,
+                                  'YYYY-MM-DD, HH:mm:ss'
+                                )}
+                              </span>
+                            )}
+                            <span>Oleh: {approvalLog.action_by ?? '-'}</span>
+                            <span>Catatan: {approvalLog.notes ?? '-'}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                }
+              >
+                <Icon
+                  icon={stepItemIcon}
+                  width={24}
+                  height={24}
+                  className={cn({
+                    invisible:
+                      approval.status === 'IDLE' &&
+                      (!approval.logs ||
+                        (approval.logs && approval.logs.length === 0)),
+                  })}
+                />
+              </Tooltip>
+            }
+          >
+            {approval.name}
+          </StepItem>
+        );
+      })}
+    </Steps>
+  );
+};
+
+export const formatGroupedApprovalsToApprovalSteps = (
+  approvalLine: ApprovalLine,
+  groupedApprovals: BaseGroupedApproval[],
+  latestApproval: BaseApproval
+): ApprovalStepsProps['approvals'] => {
+  const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
+    approvalLine.map((approvalLineItem) => {
+      const approvalGroup = groupedApprovals.find(
+        (approvalGroupItem) =>
+          approvalGroupItem.step_number === approvalLineItem.step_number
+      );
+
+      const currentStepNumber = approvalLineItem.step_number;
+      const lastStepNumber =
+        groupedApprovals[groupedApprovals.length - 1].step_number;
+
+      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
+        throw new Error(
+          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+        );
+      }
+
+      if (!approvalGroup) {
+        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+
+        return {
+          name: approvalLineItem.step_name,
+          status: isWaiting ? 'WAITING' : 'IDLE',
+        };
+      }
+
+      let approvalStatus: ApprovalStepStatus;
+
+      if (approvalGroup.step_number <= latestApproval.step_number) {
+        switch (approvalGroup.approvals[0].action) {
+          case 'CREATED':
+          case 'APPROVED':
+            approvalStatus = 'APPROVED';
+            break;
+
+          case 'REJECTED':
+            approvalStatus = 'REJECTED';
+            break;
+
+          default:
+            approvalStatus = 'IDLE';
+            break;
+        }
+      } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
+        approvalStatus = 'WAITING';
+      } else {
+        approvalStatus = 'IDLE';
+      }
+
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
+        (approval) => ({
+          action_by: approval.action_by.name,
+          date: approval.action_at,
+          notes: approval.notes,
+        })
+      );
+
+      return {
+        name: approvalGroup.step_name,
+        status: approvalStatus,
+        logs: approvalLogs,
+      };
+    });
+
+  return formattedApprovalSteps;
+};
+
+export default ApprovalSteps;

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
+import { Icon } from '@iconify/react';
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+const InventoryAdjustmentTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      productCategorySort: '',
+      productSort: '',
+      warehouseSort: '',
+      stockSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      productCategorySort: 'sort_product_category',
+      productSort: 'sort_product',
+      warehouseSort: 'sort_warehouse',
+      stockSort: 'sort_stock',
+    },
+  });
+
+  // Fetch Data
+  const { data: inventoryAdjustments, isLoading } = useSWR(
+    `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
+    inventoryAdjustmentApi.getAllFetcher
+  );
+
+  // State
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  // Columns
+  const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      id: 'product_name',
+      header: 'Nama Produk',
+      accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
+    },
+    {
+      id: 'warehouse_name',
+      header: 'Gudang',
+      accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
+    },
+    {
+      id: 'created_at',
+      header: 'Tanggal',
+      accessorFn: (row) =>
+        new Date(row.created_at).toLocaleDateString('id-ID', {
+          day: '2-digit',
+          month: 'short',
+          year: 'numeric',
+        }),
+    },
+    {
+      id: 'before_quantity',
+      header: 'Stok Sebelum',
+      accessorFn: (row) => formatNumber(String(row.before_quantity)),
+    },
+    {
+      id: 'after_quantity',
+      header: 'Stok Sesudah',
+      accessorFn: (row) => formatNumber(String(row.after_quantity)),
+    },
+    {
+      id: 'quantity',
+      header: 'Kuantitas',
+      accessorFn: (row) => formatNumber(String(row.quantity)),
+    },
+    {
+      id: 'transaction_type',
+      header: 'Tipe Transaksi',
+      accessorFn: (row) => {
+        if (row.transaction_type === 'INCREASE') return 'Peningkatan';
+        if (row.transaction_type === 'DECREASE') return 'Penurunan';
+        return '-';
+      },
+      cell: (props) => {
+        const type = props.row.original.transaction_type;
+        const label =
+          type === 'INCREASE'
+            ? 'Peningkatan'
+            : type === 'DECREASE'
+              ? 'Penurunan'
+              : '-';
+
+        return (
+          <div
+            className={`small mx-auto badge badge-soft ${
+              type === 'INCREASE' ? 'badge-success' : 'badge-error'
+            }`}
+          >
+            {label}
+          </div>
+        );
+      },
+    },
+    {
+      id: 'created_by',
+      header: 'Oleh',
+      accessorFn: (row) => row.created_user?.name ?? '-',
+    },
+  ];
+
+  // Handler
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  // Effect
+  useEffect(() => {
+    const productCategorySortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'productCategory'
+    );
+    const productSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'product'
+    );
+    const warehouseSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'warehouse'
+    );
+    const stockSortFilter = sorting.find((sortItem) => sortItem.id === 'stock');
+
+    updateSortingFilter('productCategorySort', productCategorySortFilter);
+    updateSortingFilter('productSort', productSortFilter);
+    updateSortingFilter('warehouseSort', warehouseSortFilter);
+    updateSortingFilter('stockSort', stockSortFilter);
+  }, [sorting, updateSortingFilter]);
+
+  // Utils Function
+  const formatNumber = (value: string) => {
+    const numericValue = value.replace(/[^0-9.]/g, '');
+    const [integer, decimal] = numericValue.split('.');
+    const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+  };
+
+  // Render
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/inventory/adjustment/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+
+              {/* <DebouncedTextInput
+                name='search'
+                placeholder='Cari Stock Adjustment'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              /> */}
+            </div>
+
+            <div className='flex flex-row justify-end'>
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{ wrapper: 'min-w-28' }}
+              />
+            </div>
+          </div>
+
+          <Table<InventoryAdjustment>
+            data={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.data
+                : []
+            }
+            columns={inventoryAdjustmentsColumns}
+            pageSize={tableFilterState.pageSize}
+            page={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
+            className={{
+              containerClassName: cn({
+                'mb-20':
+                  isResponseSuccess(inventoryAdjustments) &&
+                  inventoryAdjustments?.data?.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',
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default InventoryAdjustmentTable;

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts

@@ -0,0 +1,40 @@
+import * as Yup from 'yup';
+
+export const InventoryAdjustmentFormSchema = Yup.object({
+  product_category: Yup.object({
+    value: Yup.number().required('ID Kategori Produk wajib diisi!'),
+    label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
+  }).nullable(),
+
+  product_category_id: Yup.number().nullable(),
+
+  product: Yup.object({
+    value: Yup.number().required('ID Produk wajib diisi!'),
+    label: Yup.string().required('Nama Produk wajib diisi!'),
+  }).nullable(),
+
+  product_id: Yup.number().nullable(),
+
+  warehouse: Yup.object({
+    value: Yup.number().required('ID Gudang wajib diisi!'),
+    label: Yup.string().required('Nama Gudang wajib diisi!'),
+  }).nullable(),
+
+  warehouse_id: Yup.number().nullable(),
+
+  transaction_type: Yup.string()
+    .oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
+    .nullable()
+    .required('Tipe transaksi wajib diisi'),
+
+  quantity: Yup.number()
+    .typeError('Kuantitas harus berupa angka')
+    .min(1, 'Minimal kuantitas adalah 1')
+    .required('Kuantitas wajib diisi'),
+
+  note: Yup.string().required('Catatan wajib diisi!'),
+});
+
+export type InventoryAdjustmentFormValues = Yup.InferType<
+  typeof InventoryAdjustmentFormSchema
+>;

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -0,0 +1,464 @@
+'use client';
+
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import {
+  CreateInventoryAdjustmentPayload,
+  InventoryAdjustment,
+} from '@/types/api/inventory/adjustment';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import {
+  InventoryAdjustmentFormSchema,
+  InventoryAdjustmentFormValues,
+} from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema';
+import useSWR from 'swr';
+import {
+  ProductApi,
+  ProductCategoryApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import TextInput from '@/components/input/TextInput';
+import RadioInput from '@/components/input/RadioInput';
+import TextArea from '@/components/input/TextArea';
+
+interface InventoryAdjustmentFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: InventoryAdjustment;
+}
+
+const InventoryAdjustmentForm = ({
+  type = 'add',
+  initialValues,
+}: InventoryAdjustmentFormProps) => {
+  // State
+  const router = useRouter();
+  const [
+    InventoryAdjustmentFormErrorMessage,
+    setInventoryAdjustmentFormErrorMessage,
+  ] = useState('');
+  const [selectedProductCategories, setSelectedProductCategories] =
+    useState('');
+  const [disabledProduct, setDisabledProduct] = useState(true);
+  const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
+  const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
+
+  // Submit Handler
+  const createInventoryAdjustmentHandler = useCallback(
+    async (payload: CreateInventoryAdjustmentPayload) => {
+      const createInventoryAdjustmentRes =
+        await inventoryAdjustmentApi.create(payload);
+
+      if (isResponseError(createInventoryAdjustmentRes)) {
+        setInventoryAdjustmentFormErrorMessage(
+          createInventoryAdjustmentRes.message
+        );
+        return;
+      }
+
+      toast.success(createInventoryAdjustmentRes?.message as string);
+      router.push('/inventory/adjustment');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<
+    Partial<InventoryAdjustmentFormValues>
+  >(() => {
+    return {
+      product_category_id: initialValues?.product_category?.id ?? 0,
+      product_id: initialValues?.product?.id ?? 0,
+      warehouse_id: initialValues?.warehouse?.id ?? 0,
+      product_category: undefined,
+      product: undefined,
+      warehouse: undefined,
+      quantity: initialValues?.quantity ?? 0,
+      transaction_type: undefined,
+      note: initialValues?.note ?? '',
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<InventoryAdjustmentFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues as InventoryAdjustmentFormValues,
+    validationSchema: InventoryAdjustmentFormSchema,
+    onSubmit: async (values) => {
+      setInventoryAdjustmentFormErrorMessage('');
+      const payload: CreateInventoryAdjustmentPayload = {
+        product_id: values.product_id as number,
+        warehouse_id: values.warehouse_id as number,
+        quantity: values.quantity as number,
+        transaction_type: values.transaction_type as string,
+        note: values.note,
+      };
+
+      switch (type) {
+        case 'add':
+          await createInventoryAdjustmentHandler(payload);
+          break;
+      }
+    },
+  });
+
+  // Fetch Data
+  const productCategoriesUrl = `${
+    ProductCategoryApi.basePath
+  }?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: productCategories, isLoading: isLoadingProductCategories } =
+    useSWR(productCategoriesUrl, ProductCategoryApi.getAllFetcher);
+
+  const productUrl = `${ProductApi.basePath}?${new URLSearchParams({
+    search: '',
+    product_category_id: selectedProductCategories,
+  }).toString()}`;
+  const { data: products, isLoading: isLoadingProducts } = useSWR(
+    productUrl,
+    ProductApi.getAllFetcher
+  );
+
+  const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+    warehouseUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  // Map Data to Options
+  const optionsProductCategory = isResponseSuccess(productCategories)
+    ? productCategories?.data.map((productCategory) => ({
+        value: productCategory.id,
+        label: productCategory.name,
+      }))
+    : [];
+  const optionsWarehouse = isResponseSuccess(warehouses)
+    ? warehouses?.data.map((warehouse) => ({
+        value: warehouse.id,
+        label: warehouse.name,
+      }))
+    : [];
+
+  // Options Handler
+  const productCategoryChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched('product_category_id', true);
+    formik.setFieldValue('product_category_id', (val as OptionType)?.value);
+
+    formik.setFieldValue('product_category', val);
+
+    setSelectedProductCategories((val as OptionType)?.value as string);
+    const disabled = (val as OptionType)?.value == null;
+    setDisabledProduct(disabled);
+    formik.setFieldValue('product_id', 0);
+    formik.setFieldValue('product', null);
+    formik.setFieldTouched('product', false);
+    formik.setFieldTouched('product_id', false);
+  };
+
+  const productChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('product', val);
+
+    formik.setFieldTouched('product_id', true);
+    formik.setFieldValue('product_id', (val as OptionType)?.value);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('warehouse', val);
+
+    formik.setFieldTouched('warehouse_id', true);
+    formik.setFieldValue('warehouse_id', (val as OptionType)?.value);
+  };
+
+  const resetHandler = () => {
+    formik.resetForm();
+    setQuantityLabel('Tambah Stok');
+    productCategoryChangeHandler(null);
+    productChangeHandler(null);
+    warehouseChangeHandler(null);
+  };
+
+  const { setValues: formikSetValues } = formik;
+
+  // Effect
+  useEffect(() => {
+    if (initialValues?.product_warehouse?.product?.id) {
+      setSelectedProductCategories(
+        String(initialValues.product_warehouse.product.id)
+      );
+      setDisabledProduct(false);
+      formik.setFieldValue(
+        'product_id',
+        initialValues.product_warehouse.product.id
+      );
+      formik.setFieldValue('product', {
+        value: initialValues.product_warehouse.product.id,
+        label: initialValues.product_warehouse.product.name,
+      });
+      formik.setFieldValue(
+        'warehouse_id',
+        initialValues.product_warehouse.warehouse.id
+      );
+      formik.setFieldValue('warehouse', {
+        value: initialValues.product_warehouse.warehouse.id,
+        label: initialValues.product_warehouse.warehouse.name,
+      });
+      formik.setFieldValue(
+        'quantity',
+        initialValues.product_warehouse.quantity
+      );
+      formik.setFieldValue(
+        'transaction_type',
+        initialValues.transaction_type.toLowerCase()
+      );
+      formik.setFieldValue('note', initialValues.note);
+    }
+    if (initialValues?.transaction_type) {
+      const type = initialValues.transaction_type.toLowerCase();
+      setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
+    }
+  }, [
+    formik,
+    initialValues,
+    setQuantityLabel,
+    setDisabledProduct,
+    setSelectedProductCategories,
+  ]);
+  useEffect(() => {
+    formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
+  }, [formikSetValues, formikInitialValues]);
+  useEffect(() => {
+    if (isResponseSuccess(products)) {
+      const options = products.data.map((p) => ({
+        value: p.id,
+        label: p.name,
+      }));
+      setOptionsProduct(options);
+    }
+  }, [products]);
+
+  // Utils Function
+  const formatNumber = (value: string) => {
+    const numericValue = value.replace(/[^0-9.]/g, '');
+    const [integer, decimal] = numericValue.split('.');
+    const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+  };
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/inventory/adjustment'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Penyesuaian Persediaan'}
+            {type === 'detail' && 'Detail Penyesuaian Persediaan'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            {/* Text Input Before Quantity */}
+            {type === 'detail' && initialValues && (
+              <>
+                <TextInput
+                  label='Stok Sebelum'
+                  name='before_quantity'
+                  type='text'
+                  value={formatNumber(String(initialValues.before_quantity))}
+                  readOnly={true}
+                />
+                <TextInput
+                  label='Stok Setelah'
+                  name='after_quantity'
+                  type='text'
+                  readOnly={true}
+                  value={formatNumber(String(initialValues.after_quantity))}
+                />
+              </>
+            )}
+
+            {/* Select Input Product Category */}
+            <SelectInput
+              required
+              label='Kategori Produk'
+              value={formik.values.product_category as OptionType}
+              onChange={productCategoryChangeHandler}
+              onInputChange={setSelectedProductCategories}
+              options={optionsProductCategory}
+              isLoading={isLoadingProductCategories}
+              isError={
+                formik.touched.product_category &&
+                Boolean(formik.errors.product_category)
+              }
+              errorMessage={formik.errors.product_category as string}
+              isDisabled={type === 'detail'}
+              isClearable
+            />
+
+            {/* Select Input Product */}
+            <SelectInput
+              required
+              label='Produk'
+              value={formik.values.product as OptionType}
+              onChange={productChangeHandler}
+              options={optionsProduct}
+              isLoading={isLoadingProducts}
+              isError={formik.touched.product && Boolean(formik.errors.product)}
+              errorMessage={formik.errors.product as string}
+              isDisabled={type === 'detail' || disabledProduct}
+              isClearable
+            />
+
+            {/* Select Input Warehouse */}
+            <SelectInput
+              required
+              label='Warehouse'
+              value={formik.values.warehouse as OptionType}
+              onChange={warehouseChangeHandler}
+              options={optionsWarehouse}
+              isLoading={isLoadingWarehouses}
+              isError={
+                formik.touched.warehouse && Boolean(formik.errors.warehouse)
+              }
+              errorMessage={formik.errors.warehouse as string}
+              isDisabled={type === 'detail'}
+              isClearable
+            />
+
+            {/* Radio Button Flag Stock */}
+            <RadioInput
+              name='transaction_type'
+              label='Tipe Transaksi'
+              options={[
+                { label: 'Tambah', value: 'increase' },
+                { label: 'Kurang', value: 'decrease' },
+              ]}
+              value={formik.values.transaction_type}
+              onChange={(e) => {
+                formik.handleChange(e);
+                setQuantityLabel(
+                  e.target.value === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'
+                );
+              }}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transaction_type &&
+                Boolean(formik.errors.transaction_type)
+              }
+              errorMessage={formik.errors.transaction_type as string}
+              variant='radio-primary'
+              required
+              bottomLabel={
+                formik.values.transaction_type == undefined
+                  ? 'Pilih salah satu tipe transaksi'
+                  : undefined
+              }
+              disabled={type === 'detail'}
+            />
+
+            {/* Number Input Stock */}
+            <TextInput
+              className={{
+                wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
+              }}
+              required
+              label={quantityLabel}
+              name='quantity'
+              type='text'
+              value={formatNumber(String(formik.values.quantity))}
+              onChange={(e) => {
+                const rawValue = e.target.value.replace(/,/g, '');
+                const numericValue = parseFloat(rawValue);
+                if (!isNaN(numericValue)) {
+                  formik.setFieldValue('quantity', numericValue);
+                } else {
+                  formik.setFieldValue('quantity', 0);
+                }
+              }}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.quantity && Boolean(formik.errors.quantity)
+              }
+              errorMessage={formik.errors.quantity as string}
+              readOnly={type === 'detail'}
+            />
+
+            {/* Text Area Input Reason */}
+            <TextArea
+              required
+              label='Alasan'
+              name='note'
+              value={formik.values.note as string}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.note && Boolean(formik.errors.note)}
+              errorMessage={formik.errors.note as string}
+              readOnly={type === 'detail'}
+            />
+          </div>
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2'>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={resetHandler}
+                >
+                  Reset
+                </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={
+                    !formik.isValid ||
+                    formik.isSubmitting ||
+                    formik.values.product == undefined
+                  }
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+          {InventoryAdjustmentFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{InventoryAdjustmentFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+    </>
+  );
+};
+
+export default InventoryAdjustmentForm;

src/components/pages/inventory/movement/MovementTable.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useState } from 'react';
+import useSWR from 'swr';
+import { SortingState } from '@tanstack/react-table';
+
+import Table from '@/components/Table';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { Movement } from '@/types/api/inventory/movement';
+import { MovementApi } from '@/services/api/inventory';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import { TableRowOptions } from '@/components/table/TableRowOptions';
+
+const MovementTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedMovement, setSelectedMovement] = useState<
+    Movement | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const deleteModal = useModal();
+
+  const {
+    data: movements,
+    isLoading,
+    mutate: refreshMovements,
+  } = useSWR(
+    `${MovementApi.basePath}${getTableFilterQueryString()}`,
+    MovementApi.getAllFetcher
+  );
+
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+    setPage(1);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    try {
+      await MovementApi.delete(selectedMovement?.id as number);
+      refreshMovements();
+      deleteModal.closeModal();
+    } finally {
+      setIsDeleteLoading(false);
+    }
+  };
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
+          addButton={{
+            href: '/inventory/movement/add',
+            label: 'Tambah',
+          }}
+          search={{
+            value: tableFilterState.search,
+            onChange: searchChangeHandler,
+            placeholder: 'Cari Movement',
+          }}
+        />
+        <TableRowSizeSelector
+          value={tableFilterState.pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
+      </div>
+
+      <Table<Movement>
+        data={isResponseSuccess(movements) ? movements?.data : []}
+        columns={[
+          {
+            header: '#',
+            cell: (props) =>
+              tableFilterState.pageSize * (tableFilterState.page - 1) +
+              props.row.index +
+              1,
+          },
+          {
+            accessorFn: (row) => row.source_warehouse?.name,
+            header: 'Gudang Asal',
+          },
+          {
+            accessorFn: (row) => row.destination_warehouse?.name,
+            header: 'Gudang Tujuan',
+          },
+          {
+            accessorKey: 'transfer_reason',
+            header: 'Catatan',
+          },
+          {
+            accessorKey: 'transfer_date',
+            header: 'Tanggal',
+            cell: (props) =>
+              new Date(props.row.original.transfer_date).toLocaleDateString(
+                'id-ID'
+              ),
+          },
+          {
+            accessorFn: (row) => {
+              const totalCost = row.deliveries?.reduce(
+                (sum, d) => sum + (d.shipping_cost_total || 0),
+                0
+              );
+              return totalCost?.toLocaleString('id-ID');
+            },
+            header: 'Biaya Pengiriman',
+          },
+          {
+            header: 'Aksi',
+            cell: (props) => {
+              const currentPageSize =
+                props.table.getPaginationRowModel().rows.length;
+              const currentPageRows =
+                props.table.getPaginationRowModel().flatRows;
+              const currentRowRelativeIndex =
+                currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+              const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+              const deleteClickHandler = () => {
+                setSelectedMovement(props.row.original);
+                deleteModal.openModal();
+              };
+
+              return (
+                <>
+                  {currentPageSize > 2 && (
+                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                      <TableRowOptions
+                        type='dropdown'
+                        recordId={props.row.original.id}
+                        basePath='/inventory/movement'
+                        queryParam='movementId'
+                        showEdit={false}
+                        showDelete={false}
+                      />
+                    </RowDropdownOptions>
+                  )}
+
+                  {currentPageSize <= 2 && (
+                    <RowCollapseOptions>
+                      <TableRowOptions
+                        type='collapse'
+                        recordId={props.row.original.id}
+                        basePath='/inventory/movement'
+                        queryParam='movementId'
+                        showEdit={false}
+                        showDelete={false}
+                      />
+                    </RowCollapseOptions>
+                  )}
+                </>
+              );
+            },
+          },
+        ]}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+        }
+        onPageChange={setPage}
+        isLoading={isLoading}
+        sorting={sorting}
+        setSorting={setSorting}
+        className={{
+          containerClassName: cn({
+            'mb-20':
+              isResponseSuccess(movements) && movements?.data?.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',
+        }}
+      />
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </div>
+  );
+};
+
+export default MovementTable;

src/components/pages/inventory/movement/form/MovementForm.schema.ts

@@ -0,0 +1,210 @@
+import * as Yup from 'yup';
+import { Movement } from '@/types/api/inventory/movement';
+
+export type ProductSchema = {
+  product: {
+    value: number;
+    label: string;
+  } | null;
+  product_id: number;
+  product_qty: number;
+};
+
+export type DeliverySchema = {
+  delivery_cost?: number | undefined;
+  delivery_cost_per_item?: number | undefined;
+  document?: File | string | null;
+  document_path?: string | null;
+  driver_name: string;
+  vehicle_plate: string;
+  supplier: {
+    value: number;
+    label: string;
+  } | null;
+  supplier_id: number;
+  products: {
+    product: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    product_qty: number;
+  }[];
+};
+
+const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
+  product: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  product_id: Yup.number().required('Produk wajib diisi!'),
+  product_qty: Yup.number()
+    .required('Qty wajib diisi!')
+    .min(1, 'Qty minimal 1!')
+    .typeError('Qty harus berupa angka!'),
+});
+
+const DeliveryProductObjectSchema = Yup.object({
+  product: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  product_id: Yup.number().required('Produk wajib diisi!'),
+  product_qty: Yup.number()
+    .required('Qty wajib diisi!')
+    .min(1, 'Qty minimal 1!')
+    .typeError('Qty harus berupa angka!'),
+});
+
+const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
+  delivery_cost: Yup.number()
+    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
+    .min(1, 'Biaya minimal 1!')
+    .typeError('Biaya harus berupa angka!')
+    .test('one-of-cost-fields', 'Wajib diisi salah satu!', function (value) {
+      const { delivery_cost_per_item } = this.parent;
+      return (
+        (value !== undefined && value > 0) ||
+        (delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
+      );
+    }),
+  delivery_cost_per_item: Yup.number()
+    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
+    .min(1, 'Biaya per item minimal 1!')
+    .typeError('Biaya per item harus berupa angka!')
+    .test('one-of-cost-fields', 'Wajib diisi salah satu!', function (value) {
+      const { delivery_cost } = this.parent;
+      return (
+        (value !== undefined && value > 0) ||
+        (delivery_cost !== undefined && delivery_cost > 0)
+      );
+    }),
+  document_path: Yup.string().optional(),
+  document_index: Yup.number().optional(),
+  document: Yup.mixed<File | string>()
+    .nullable()
+    .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
+      if (!value) return true;
+      if (typeof value === 'string') return true;
+      if (value instanceof File) return value.size <= 2 * 1024 * 1024;
+      return false;
+    }),
+  driver_name: Yup.string().required('Nama sopir wajib diisi!'),
+  vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
+  supplier: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  supplier_id: Yup.number().required('Supplier wajib diisi!'),
+  products: Yup.array()
+    .of(DeliveryProductObjectSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export const MovementFormSchema = Yup.object({
+  transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+  source_warehouse: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+    area: Yup.string().optional(),
+    location: Yup.string().optional(),
+  }).nullable(),
+  source_warehouse_id: Yup.number()
+    .required('Gudang asal wajib diisi!')
+    .typeError('Gudang asal wajib diisi!'),
+  destination_warehouse: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+    area: Yup.string().optional(),
+    location: Yup.string().optional(),
+  }).nullable(),
+  destination_warehouse_id: Yup.number()
+    .required('Gudang tujuan wajib diisi!')
+    .typeError('Gudang tujuan wajib diisi!'),
+  products: Yup.array()
+    .of(ProductObjectSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+  deliveries: Yup.array()
+    .of(DeliveryObjectSchema)
+    .min(1, 'Minimal harus ada 1 pengiriman!')
+    .required('Pengiriman wajib diisi!'),
+});
+
+export const UpdateMovementFormSchema = MovementFormSchema;
+
+export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
+
+export const getMovementFormInitialValues = (
+  initialValues?: Movement
+): MovementFormValues => {
+  const detailIdToProductId = new Map<number, { id: number; name: string }>();
+  initialValues?.details?.forEach((detail) => {
+    detailIdToProductId.set(detail.id, {
+      id: detail.product.id,
+      name: detail.product.name,
+    });
+  });
+
+  return {
+    transfer_reason: initialValues?.transfer_reason ?? '',
+    transfer_date: initialValues?.transfer_date ?? '',
+    source_warehouse: initialValues?.source_warehouse
+      ? {
+          value: initialValues.source_warehouse.id,
+          label: initialValues.source_warehouse.name,
+          area: initialValues.source_warehouse.area?.name ?? undefined,
+          location: initialValues.source_warehouse.location?.name ?? undefined,
+        }
+      : null,
+    source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
+    destination_warehouse: initialValues?.destination_warehouse
+      ? {
+          value: initialValues.destination_warehouse.id,
+          label: initialValues.destination_warehouse.name,
+          area: initialValues.destination_warehouse.area?.name ?? undefined,
+          location:
+            initialValues.destination_warehouse.location?.name ?? undefined,
+        }
+      : null,
+    destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
+    products:
+      initialValues?.details?.map((detail) => ({
+        product: {
+          value: detail.product.id,
+          label: detail.product.name,
+        },
+        product_id: detail.product.id,
+        product_qty: detail.quantity,
+      })) ?? [],
+    deliveries:
+      initialValues?.deliveries?.map((d) => ({
+        delivery_cost: d.shipping_cost_total ?? undefined,
+        delivery_cost_per_item: d.shipping_cost_item ?? undefined,
+        document_number: d.document_number ?? '',
+        document: d.document_path ?? null,
+        document_path: d.document_path ?? null,
+        driver_name: d.driver_name ?? '',
+        vehicle_plate: d.vehicle_plate ?? '',
+        supplier: d.supplier
+          ? { value: d.supplier.id, label: d.supplier.name }
+          : null,
+        supplier_id: d.supplier?.id ?? 0,
+        products:
+          d.items?.map((item) => {
+            const productData = detailIdToProductId.get(
+              item.stock_transfer_detail_id
+            );
+            return {
+              product: productData
+                ? { value: productData.id, label: productData.name }
+                : null,
+              product_id: productData?.id ?? 0,
+              product_qty: item.quantity,
+            };
+          }) ?? [],
+      })) ?? [],
+  };
+};

src/components/pages/inventory/movement/form/useMovementFormHandlers.ts

@@ -0,0 +1,95 @@
+import { useCallback, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-hot-toast';
+import { useModal } from '@/components/Modal';
+import { MovementApi } from '@/services/api/inventory';
+import {
+  CreateMovementPayload,
+  UpdateMovementPayload,
+} from '@/types/api/inventory/movement';
+import { isResponseError } from '@/lib/api-helper';
+
+export const useMovementFormHandlers = (initialValuesId?: number) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createMovementHandler = useCallback(
+    async (payload: CreateMovementPayload, documents: File[] = []) => {
+      const formData = new FormData();
+      formData.append('data', JSON.stringify(payload));
+      documents.forEach((file, index) => {
+        formData.append(`documents[${index}]`, file);
+      });
+
+      const res = await MovementApi.create(
+        formData as unknown as CreateMovementPayload
+      );
+      if (isResponseError(res)) {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  const updateMovementHandler = useCallback(
+    async (
+      movementId: number,
+      payload: UpdateMovementPayload,
+      documents: File[] = []
+    ) => {
+      let finalPayload: UpdateMovementPayload | FormData;
+
+      if (documents.length > 0) {
+        const formData = new FormData();
+        formData.append('data', JSON.stringify(payload));
+        documents.forEach((file, index) => {
+          formData.append(`documents[${index}]`, file);
+        });
+
+        finalPayload = formData as unknown as UpdateMovementPayload;
+      } else {
+        finalPayload = payload;
+      }
+
+      const res = await MovementApi.update(movementId, finalPayload);
+      if (res?.status === 'error') {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  const deleteMovementClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValuesId) return;
+
+    setIsDeleteLoading(true);
+    await MovementApi.delete(initialValuesId);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Movement!');
+    setIsDeleteLoading(false);
+    router.push('/inventory/movement');
+  }, [deleteModal, initialValuesId, router]);
+
+  return {
+    deleteModal,
+    movementFormErrorMessage,
+    isDeleteLoading,
+    createMovementHandler,
+    updateMovementHandler,
+    deleteMovementClickHandler,
+    confirmationModalDeleteClickHandler,
+  };
+};

src/components/pages/master-data/area/AreasTable.tsx

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
         variant='ghost'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const AreasTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const AreasTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/area/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/area/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Area
+                Tambah
               </Button>
             </div>
 

src/components/pages/master-data/bank/BanksTable.tsx

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -163,7 +155,7 @@ const BanksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -212,10 +204,15 @@ const BanksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/bank/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/bank/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Bank
+                Tambah
               </Button>
             </div>
 

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -15,10 +16,7 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
-import {
-  CellContext,
-  ColumnDef,
-} from '@tanstack/react-table';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -33,16 +31,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type == 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
         variant='ghost'
@@ -53,10 +42,10 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        className='justify-start text-sm'
         href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
+        className='justify-start text-sm'
       >
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
@@ -65,7 +54,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -75,7 +64,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -174,7 +163,7 @@ const CustomersTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -210,10 +199,15 @@ const CustomersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/customer/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/customer/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Customer
+                Tambah
               </Button>
             </div>
 
@@ -285,4 +279,4 @@ const CustomersTable = () => {
   );
 };
 
-export default CustomersTable;
+export default CustomersTable;

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -11,7 +11,11 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from './CustomerForm.schema';
+import {
+  CustomerFormSchema,
+  CustomerFormValues,
+  UpdateCustomerFormSchema,
+} from '@/components/pages/master-data/customer/form/CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -41,7 +45,6 @@ const CustomerForm = ({
   const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [picSelectInputValue, setPicSelectInputValue] = useState('');
-  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
 
   // Fetch Data
   const picUrl = `${UserApi.basePath}?${new URLSearchParams({
@@ -151,7 +154,8 @@ const CustomerForm = ({
   const formik = useFormik<CustomerFormValues>({
     initialValues: formikInitialValues,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setCustomerFormErrorMessage('');
@@ -252,7 +256,6 @@ const CustomerForm = ({
               }
               onChange={typeChangeHandler}
               options={typeOptions}
-              onInputChange={setTypeSelectInputValue}
               isError={formik.touched.type && Boolean(formik.errors.type)}
               errorMessage={formik.errors.type as string}
               isDisabled={formType === 'detail'}
@@ -309,7 +312,6 @@ const CustomerForm = ({
               isError={formik.touched.address && Boolean(formik.errors.address)}
               errorMessage={formik.errors.address}
               readOnly={formType === 'detail'}
-              cols={8}
             />
           </div>
 

src/components/pages/master-data/fcr/FcrsTable.tsx

@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const FcrsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const FcrsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/fcr/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/fcr/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah FCR
+                Tambah
               </Button>
             </div>
 

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { Flock } from '@/types/api/master-data/flock';
+import { cn } from '@/lib/helper';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { FlockApi } from '@/services/api/master-data';
+import { useModal } from '@/components/Modal';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import toast from 'react-hot-toast';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { ROWS_OPTIONS } from '@/config/constant';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+const RowsOptions = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Flock, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <Button
+        href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:edit-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Edit
+      </Button>
+      <Button
+        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='mdi:eye-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Detail
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const FlockTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: flocks,
+    isLoading,
+    mutate: refreshFlocks,
+  } = useSWR(
+    `${FlockApi.basePath}${getTableFilterQueryString()}`,
+    FlockApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedFlock, setSelectedFlock] = useState<Flock | undefined>(
+    undefined
+  );
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const flocksColumns: ColumnDef<Flock>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'created_at',
+      header: 'Dibuat pada',
+      cell: (props) =>
+        new Date(props.row.original.created_at).toLocaleDateString(),
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedFlock(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowsOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowsOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FlockApi.delete(selectedFlock?.id as number);
+    refreshFlocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Flock!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/flock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Flock'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
+        </div>
+
+        <Table<Flock>
+          data={isResponseSuccess(flocks) ? flocks?.data : []}
+          columns={flocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(flocks) && flocks?.data?.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',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Supplier ini (${selectedFlock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default FlockTable;

src/components/pages/master-data/flock/form/FlockForm.schema.ts

@@ -0,0 +1,11 @@
+import * as Yup from 'yup';
+
+export const FlockFormSchema = Yup.object({
+  name: Yup.string()
+    .required('Nama wajib diisi!')
+    .matches(/^[\p{L}\p{N}\s]+$/u, 'Nama tidak boleh mengandung simbol'),
+});
+
+export const UpdateFlockFormSchema = FlockFormSchema;
+
+export type FlockFormValues = Yup.InferType<typeof FlockFormSchema>;

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useModal } from '@/components/Modal';
+import { FlockApi } from '@/services/api/master-data';
+import { Flock } from '@/types/api/master-data/flock';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  FlockFormSchema,
+  FlockFormValues,
+  UpdateFlockFormSchema,
+} from '@/components/pages/master-data/flock/form/FlockForm.schema';
+import { useFormik } from 'formik';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import TextInput from '@/components/input/TextInput';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+interface FlockCustomProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Flock;
+}
+
+const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  // State
+  const [flockFormErrorMessage, setFlockFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FlockApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/flock');
+  };
+
+  // Initital Value
+  const formikInitialValue = useMemo<FlockFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<FlockFormValues>({
+    initialValues: formikInitialValue,
+    enableReinitialize: true,
+    validationSchema:
+      formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setFlockFormErrorMessage('');
+
+      // create payload
+      const payload = {
+        name: values.name,
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await FlockApi.create(payload);
+          break;
+        case 'edit':
+          await FlockApi.update(initialValues?.id as number, payload);
+          break;
+        default:
+          break;
+      }
+
+      router.push('/master-data/flock');
+    },
+  });
+
+  // Initialize Formik
+  const { setValues: formikSetValues } = formik;
+  useEffect(() => {
+    formikSetValues(formikInitialValue);
+  }, [formikSetValues, formikInitialValue]);
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/flock'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {formType === 'add' && 'Tambah Flock'}
+            {formType === 'edit' && 'Ubah Flock'}
+            {formType === 'detail' && 'Detail Flock'}
+          </h1>
+        </header>
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Fields Form */}
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama Flock'
+              name='name'
+              placeholder='Masukkan nama flock'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+          </div>
+
+          {/* Action Button  */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={() => deleteModal.openModal()}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {flockFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{flockFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Flock ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteClickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default FlockForm;

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -173,7 +165,7 @@ const KandangsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -238,10 +230,15 @@ const KandangsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/kandang/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/kandang/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Kandang
+                Tambah
               </Button>
             </div>