chore: add FINANCE_TRANSACTION_TYPE_OPTIONS and FINANCE_PAYMENT_METHOD_OPTIONS constant

.gitlab-ci.yml

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

.husky/pre-commit

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

package.json

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

src/app/closing/detail/page.tsx

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

src/app/closing/page.tsx

@@ -2,7 +2,7 @@ import ClosingsTable from '@/components/pages/closing/ClosingsTable';
 
 const Closing = () => {
   return (
-    <section className='w-full p-3'>
+    <section className='w-full p-4'>
       <ClosingsTable />
     </section>
   );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/dashboard/page.tsx

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

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

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

src/app/expense/page.tsx

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

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

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

src/app/expense/realization/page.tsx

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

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

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

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

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

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

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

src/app/finance/add/page.tsx

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

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

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

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

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

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

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

src/app/finance/detail/page.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import FinanceDetail from '@/components/pages/finance/FinanceDetail';
-import useSWR from 'swr';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { FinanceApi } from '@/services/api/finance';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const FinanceDetailPage = () => {
-  const router = useRouter();
-  const financeId = useSearchParams().get('financeId');
-
-  const { data: finance } = useSWR(financeId, () =>
-    FinanceApi.getSingle(Number(financeId))
-  );
-
-  if (!financeId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  // if (!finance || isResponseError(finance)) {
-  //   router.replace('/404');
-  //   return;
-  // }
-
-  return (
-    <>
-      {isResponseSuccess(finance) && <FinanceDetail finance={finance.data} />}
-    </>
-  );
-};
-
-export default FinanceDetailPage;

src/app/finance/page.tsx

@@ -1,9 +1,11 @@
-'use client';
+import FinancesTable from '@/components/pages/finance/FinancesTable';
-
-import FinanceTable from '@/components/pages/finance/FinanceTable';
 
 const Finance = () => {
-  return <FinanceTable />;
+  return (
+    <section className='w-full p-4'>
+      <FinancesTable />
+    </section>
+  );
 };
 
 export default Finance;

src/app/globals.css

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

src/app/inventory/adjustment/page.tsx

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

src/app/inventory/movement/page.tsx

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

src/app/layout.tsx

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

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

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

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

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

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

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

src/app/marketing/detail/page.tsx

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

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

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

src/app/marketing/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/not-found.tsx

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

src/app/page.tsx

@@ -3,9 +3,10 @@
 import { useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useAuth } from '@/services/hooks/useAuth';
+import { redirectToSSO } from '@/lib/auth-helper';
 
 export default function Home() {
-  const { isLoadingUser } = useAuth();
+  const { user, isLoadingUser } = useAuth();
 
   const router = useRouter();
   const pathname = usePathname();
@@ -24,9 +25,5 @@ export default function Home() {
     );
   }
 
-  return (
+  return <>Loading...</>;
-    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
-      <span className='loading loading-spinner loading-lg'></span>
-    </main>
-  );
 }

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

@@ -1,8 +1,8 @@
 'use client';
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
-import React from 'react';
+import React, { useImperativeHandle } from 'react';
-// import React, { useImperativeHandle } from 'react';
+import toast from 'react-hot-toast';
 
 const AddProjectFlock = () => {
   // useImperativeHandle(ref, () => ({

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 'use client';
 
 import ProjectFlockDetail from '@/components/pages/production/project-flock/detail/ProjectFlockDetail';
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -12,10 +13,11 @@ const ProjectFlockDetailPage = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+  const {
-    projectFlockId,
+    data: projectFlock,
-    (id: number) => ProjectFlockApi.getSingle(id)
+    isLoading: isLoadingProjectFlock,
-  );
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();
@@ -48,3 +50,5 @@ const ProjectFlockDetailPage = () => {
 };
 
 export default ProjectFlockDetailPage;
+ProjectFlockDetail;
+ProjectFlockDetail;

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import React, { ReactNode, useEffect } from 'react';
+import Drawer from '@/components/Drawer';
+import React, { ReactNode } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 import { useUiStore } from '@/stores/ui/ui.store';
-import Modal, { useModal } from '@/components/Modal';
 
 export default function ProjectFlockLayout({
   children,
@@ -15,7 +15,7 @@ export default function ProjectFlockLayout({
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
 
-  const isAdd = pathname.includes('/add');
+  const isAdd = pathname.endsWith('/add');
   const isEdit = pathname.includes('/detail/edit');
   const isDetail = pathname.includes('/detail');
   const isChickin = pathname.includes('/chickin/add/kandang');
@@ -23,12 +23,9 @@ export default function ProjectFlockLayout({
 
   const isOpen = isAdd || isEdit || isDetail || isChickin || isClosing;
 
-  const formModal = useModal();
-
   const handleBackdropClick = () => {
     const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
       if (isValid) {
-        formModal.closeModal();
         unsub(); // berhenti listen
         router.push('/production/project-flock');
       }
@@ -37,14 +34,6 @@ export default function ProjectFlockLayout({
     toggleValidate();
   };
 
-  useEffect(() => {
-    if (isOpen && !formModal.open) {
-      formModal.openModal();
-    } else {
-      formModal.closeModal();
-    }
-  }, [isOpen]);
-
   return (
     <>
       {/* List page always rendered */}
@@ -54,19 +43,18 @@ export default function ProjectFlockLayout({
         />
       </div>
 
-      {/* Render Modal only on /add */}
+      {/* Render Drawer only on /add */}
-      <Modal
+      <Drawer
-        ref={formModal.ref}
+        open={isOpen}
-        position='end'
+        setOpen={(v) => {
-        onBackdropClick={handleBackdropClick}
+          if (!v) router.push('/production/project-flock');
-        className={{
-          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
         }}
-      >
+        closeOnBackdropClick={isDetail ? true : false}
-        <div className='w-full sm:w-[446px] h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-hidden'>
+        onBackdropClick={handleBackdropClick}
-          {isOpen && children}
+        variant='right'
-        </div>
+        zIndex='99999'
-      </Modal>
+        sidebarContent={isOpen && <div className=''>{children}</div>}
+      />
     </>
   );
 }

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

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

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

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

src/app/production/recording/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/production/uniformity/layout.tsx

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

src/app/production/uniformity/page.tsx

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

src/app/purchase/page.tsx

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

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

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

src/app/report/expense/page.tsx

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

src/app/report/finance/page.tsx

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

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

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

src/app/report/marketing/page.tsx

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

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

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

src/components/Alert.tsx

@@ -1,16 +1,15 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
 interface AlertProps {
-  ref?: Ref<HTMLDivElement> | undefined;
   variant?: 'outline' | 'dash' | 'soft';
   color?: 'info' | 'success' | 'warning' | 'error';
   children?: ReactNode;
   className?: string;
 }
 
-const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
+const Alert = ({ children, variant, color, className }: AlertProps) => {
   const alertBaseClassName = cn('alert', {
     'alert-soft': variant === 'soft',
     'alert-outline': variant === 'outline',
@@ -22,11 +21,7 @@ const Alert = ({ children, ref, variant, color, className }: AlertProps) => {
     'alert-error': color === 'error',
   });
 
-  return (
+  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
-    <div ref={ref} className={cn(alertBaseClassName, className)}>
-      {children}
-    </div>
-  );
 };
 
 export default Alert;

src/components/Badge.tsx

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

src/components/Breadcrumb.tsx

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

src/components/Button.tsx

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

src/components/Card.tsx

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

src/components/Drawer.tsx

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

src/components/Dropdown.tsx

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

src/components/FloatingActionsButton.tsx

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