Merge branch 'feat/FE/US-33/TASK-40-slicing-ui-for-master-data-customers-and-suppliers-forms' into 'feat/FE/US-33/TASK-40-slicing-ui-for-master-data-forms'

[FEAT/FE/US#33/TASK#40] Slicing UI for Costumer and Suppliers Forms in Master Data

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

.gitignore

@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# prettier
+.prettierrc
+
+# idea
+.idea

.prettierrc.json

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

README.md

@@ -1,93 +1,36 @@
-# LTI - Client
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
+## Getting Started
 
+First, run the development server:
 
-## Getting started
-
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
-
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin https://gitlab.com/mbugroup/lti-client.git
-git branch -M main
-git push -uf origin main
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-## Integrate with your tools
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-- [ ] [Set up project integrations](https://gitlab.com/mbugroup/lti-client/-/settings/integrations)
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-## Collaborate with your team
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Set auto-merge](https://docs.gitlab.com/user/project/merge_requests/auto_merge/)
+## Learn More
 
-## Test and Deploy
+To learn more about Next.js, take a look at the following resources:
 
-Use the built-in continuous integration in GitLab.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-***
+## Deploy on Vercel
 
-# Editing this README
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
-
-## Suggestions for a good README
-
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

eslint.config.mjs

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

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "lti-web-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "eslint && next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tanstack/match-sorter-utils": "^8.19.4",
+    "@tanstack/react-table": "^8.21.3",
+    "axios": "^1.12.2",
+    "clsx": "^2.1.1",
+    "formik": "^2.4.6",
+    "moment": "^2.30.1",
+    "next": "15.5.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hot-toast": "^2.6.0",
+    "react-select": "^5.10.2",
+    "swr": "^2.3.6",
+    "tailwind-merge": "^3.3.1",
+    "use-debounce": "^10.0.6",
+    "yup": "^1.7.0",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@iconify/react": "^6.0.2",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "daisyui": "^5.1.12",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

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

src/app/dashboard/page.tsx

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

src/app/globals.css

@@ -0,0 +1,14 @@
+@import 'tailwindcss';
+@plugin "daisyui";
+
+:root {
+  --color-primary: #1f74bf;
+}
+
+@theme {
+  --font-inter: var(--font-inter);
+}
+
+html {
+  scrollbar-gutter: initial;
+}

src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata, Viewport } from 'next';
+import { Inter } from 'next/font/google';
+import '@/app/globals.css';
+
+import { Toaster } from 'react-hot-toast';
+import MainDrawer from '@/components/MainDrawer';
+import RequireAuth from '@/components/helper/RequireAuth';
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+});
+
+export const viewport: Viewport = {
+  themeColor: '#1f74bf',
+  colorScheme: 'light',
+  initialScale: 1,
+};
+
+export const metadata: Metadata = {
+  title: 'LTI',
+  description: 'PT. Lumbung Telur Indonesia',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang='en'>
+      <body className={`${inter.variable} antialiased font-inter`}>
+        <RequireAuth>
+          <MainDrawer>{children}</MainDrawer>
+        </RequireAuth>
+
+        <Toaster />
+      </body>
+    </html>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/page.tsx

@@ -0,0 +1,11 @@
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect('/dashboard');
+
+  return (
+    <main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
+      <h1>LTI ERP</h1>
+    </main>
+  );
+}

src/components/Alert.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface AlertProps {
+  variant?: 'outline' | 'dash' | 'soft';
+  color?: 'info' | 'success' | 'warning' | 'error';
+  children?: ReactNode;
+  className?: string;
+}
+
+const Alert = ({ children, variant, color, className }: AlertProps) => {
+  const alertBaseClassName = cn('alert', {
+    'alert-soft': variant === 'soft',
+    'alert-outline': variant === 'outline',
+    'alert-dash': variant === 'dash',
+
+    'alert-info': color === 'info',
+    'alert-success': color === 'success',
+    'alert-warning': color === 'warning',
+    'alert-error': color === 'error',
+  });
+
+  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
+};
+
+export default Alert;

src/components/Button.tsx

@@ -0,0 +1,86 @@
+import react from 'react';
+
+import Link from 'next/link';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface ButtonProps extends react.ComponentProps<'button'> {
+  variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
+  color?: Color;
+  href?: string;
+  isLoading?: boolean;
+}
+
+const Button = ({
+  children,
+  type,
+  href,
+  variant,
+  color = 'primary',
+  isLoading,
+  className,
+  disabled,
+  onClick,
+  ...props
+}: ButtonProps) => {
+  const btnBaseClassName = cn(
+    'btn',
+    {
+      'btn-soft': variant === 'soft',
+      'btn-outline': variant === 'outline',
+      'btn-dash': variant === 'dash',
+      'btn-ghost': variant === 'ghost',
+      'btn-link': variant === 'link',
+      'btn-active': variant === 'active',
+
+      'btn-primary': color === 'primary',
+      'btn-secondary': color === 'secondary',
+      'btn-accent': color === 'accent',
+      'btn-neutral': color === 'neutral',
+      'btn-info': color === 'info',
+      'btn-success': color === 'success',
+      'btn-warning': color === 'warning',
+      'btn-error': color === 'error',
+    },
+    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+  );
+
+  return (
+    <>
+      {!href && (
+        <button
+          {...props}
+          type={type}
+          onClick={onClick}
+          disabled={disabled}
+          className={cn(
+            btnBaseClassName,
+            'disabled:pointer-events-auto! disabled:cursor-not-allowed!',
+            className
+          )}
+        >
+          {!isLoading && children}
+          {isLoading && <span className='loading loading-dots loading-md' />}
+        </button>
+      )}
+
+      {href && (
+        <Link
+          href={disabled ? '#' : href}
+          aria-disabled={disabled}
+          className={cn(
+            btnBaseClassName,
+            { 'pointer-events-auto cursor-not-allowed': disabled },
+            className
+          )}
+        >
+          {!isLoading && children}
+          {isLoading && <span className='loading loading-dots loading-md' />}
+        </Link>
+      )}
+    </>
+  );
+};
+
+export default Button;

src/components/Collapse.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+export type CollapseVariant = 'default' | 'arrow' | 'plus';
+
+export type CollapseProps = {
+  /** Unique name used when `asRadio` is true (Accordion single-open). */
+  name?: string;
+  /** If provided, component is controlled. */
+  open?: boolean;
+  /** Initial open state for uncontrolled usage. */
+  defaultOpen?: boolean;
+  /** Callback when open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Title row content. Accepts string or custom node. */
+  title?: React.ReactNode;
+  /** Optional secondary text displayed under/next to title. */
+  subtitle?: React.ReactNode;
+  /** Content of the panel. */
+  children?: React.ReactNode;
+  /** Visual variant: default / arrow / plus */
+  variant?: CollapseVariant;
+  /** Add a bordered look */
+  bordered?: boolean;
+  /** Disable interactions */
+  disabled?: boolean;
+  /** Allow only one open at a time by switching to radio input */
+  asRadio?: boolean;
+  /** Extra classnames */
+  className?: string;
+  titleClassName?: string;
+  contentClassName?: string;
+};
+
+export const Collapse = ({
+  name,
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  subtitle,
+  children,
+  variant = 'default',
+  bordered,
+  disabled,
+  asRadio = false,
+  className,
+  titleClassName,
+  contentClassName,
+}: CollapseProps) => {
+  const inputId = useId();
+  const isControlled = typeof open === 'boolean';
+  const [internalOpen, setInternalOpen] = useState(!!defaultOpen);
+  const isOpen = isControlled ? !!open : internalOpen;
+
+  // Manage change from checkbox/radio
+  const handleChange = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  const inputType = asRadio ? 'radio' : 'checkbox';
+
+  const rootClass = cn(
+    'collapse',
+    variant === 'arrow' && 'collapse-arrow',
+    variant === 'plus' && 'collapse-plus',
+    bordered && 'border base-content/20 border-opacity-20 rounded-box',
+    disabled && 'opacity-60 pointer-events-none',
+    !open && 'w-fit',
+    className
+  );
+
+  const titleNode = useMemo(() => {
+    if (subtitle) {
+      return (
+        <div className='flex flex-col gap-0.5'>
+          <span>{title}</span>
+          <span className='text-sm opacity-70'>{subtitle}</span>
+        </div>
+      );
+    }
+    return title;
+  }, [title, subtitle]);
+
+  return (
+    <div className={rootClass} data-open={isOpen}>
+      <input
+        id={inputId}
+        type={inputType}
+        name={asRadio ? name : undefined}
+        className='peer p-0 hidden'
+        checked={isOpen}
+        onChange={(e) => handleChange(e.currentTarget.checked)}
+        aria-controls={`${inputId}-content`}
+        disabled={disabled}
+      />
+
+      <div
+        role='button'
+        tabIndex={0}
+        className={cn(
+          'collapse-title w-fit p-0',
+          'focus:outline-none focus-visible:ring focus-visible:ring-primary/40',
+          titleClassName
+        )}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleChange(!isOpen);
+          }
+        }}
+        onClick={() => handleChange(!isOpen)}
+      >
+        {titleNode}
+      </div>
+
+      <div
+        id={`${inputId}-content`}
+        className={cn('collapse-content p-0!', contentClassName)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Collapse;

src/components/Drawer.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface DrawerProps {
+  children?: ReactNode;
+  sidebarContent?: ReactNode;
+  open: boolean;
+  setOpen: (newOpenState: boolean) => void;
+  openOnLarge?: boolean;
+}
+
+const Drawer = ({
+  children,
+  sidebarContent,
+  open,
+  setOpen,
+  openOnLarge,
+}: DrawerProps) => {
+  const toggleDrawer = () => {
+    setOpen(!open);
+  };
+
+  const closeDrawer = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div
+      className={cn('drawer', {
+        'lg:drawer-open': openOnLarge,
+      })}
+    >
+      <input
+        type='checkbox'
+        checked={open}
+        onChange={toggleDrawer}
+        className='drawer-toggle'
+      />
+
+      <div className='drawer-content'>{children}</div>
+
+      <div className='drawer-side border-r border-solid border-gray-200 z-20'>
+        <label
+          aria-label='close sidebar'
+          className='drawer-overlay'
+          onClick={closeDrawer}
+        />
+
+        <div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
+          {sidebarContent}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Drawer;

src/components/MainDrawer.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { usePathname } from 'next/navigation';
+
+import Image from 'next/image';
+import { Icon } from '@iconify/react';
+import Drawer from '@/components/Drawer';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import Navbar from '@/components/Navbar';
+import Collapse from '@/components/Collapse';
+
+import { useUiStore } from '@/stores/ui/ui.store';
+import { MAIN_DRAWER_LINKS } from '@/config/constant';
+import { cn } from '@/lib/helper';
+
+type CollapseMenuProps = {
+  title: string;
+  link: string;
+  icon: string;
+  submenu?: CollapseMenuProps[];
+  depth?: number;
+};
+
+const isPathActive = (pathname: string, link?: string) => {
+  if (!link) return false;
+
+  const splittedPathname = pathname.split('/');
+  const splittedLink = link.split('/');
+
+  const isActiveLinkValid = splittedLink.every((linkChunk, idx) => {
+    return linkChunk === splittedPathname[idx];
+  });
+
+  return pathname.startsWith(link) && isActiveLinkValid;
+};
+
+const CollapseMenu = ({
+  title,
+  link,
+  icon,
+  submenu,
+  depth = 0,
+}: CollapseMenuProps) => {
+  const pathname = usePathname();
+  const isActive = isPathActive(pathname, link);
+  const [open, setOpen] = useState(isActive);
+
+  const menuCollapseTitle = (
+    <div
+      className={cn(
+        'w-full px-3 py-2 rounded-md text-base font-semibold transition-colors flex flex-row justify-between items-center gap-2 hover:bg-primary/10 opacity-40',
+        {
+          'bg-primary/10 opacity-100': open || isActive,
+        }
+      )}
+    >
+      <div className='flex flex-row items-center gap-2'>
+        <Icon icon={icon} width={20} height={20} />
+        <span>{title}</span>
+      </div>
+
+      <Icon
+        icon='cuida:caret-up-outline'
+        width={20}
+        height={20}
+        className={cn('transition-transform', {
+          'rotate-90': !open,
+          'rotate-180': open,
+        })}
+      />
+    </div>
+  );
+
+  return (
+    <Collapse
+      open={open}
+      title={menuCollapseTitle}
+      onOpenChange={setOpen}
+      className='w-full'
+      titleClassName='w-full p-0!'
+    >
+      <Menu>
+        <div
+          className='w-full py-0.5 flex flex-col gap-0.5'
+          style={{
+            paddingLeft: `${0.5 * (depth + 1)}rem`,
+          }}
+        >
+          {submenu?.map((item, idx) => {
+            const hasSubmenu = item.submenu && item.submenu.length > 0;
+
+            if (!hasSubmenu) {
+              return (
+                <MenuItem
+                  key={idx}
+                  title={item.title}
+                  href={item.link}
+                  icon={item.icon}
+                  active={isPathActive(pathname, item.link)}
+                />
+              );
+            }
+
+            return (
+              <CollapseMenu
+                key={idx}
+                title={item.title}
+                link={item.link}
+                icon={item.icon}
+                submenu={item.submenu}
+                depth={depth + 1}
+              />
+            );
+          })}
+        </div>
+      </Menu>
+    </Collapse>
+  );
+};
+
+const MainDrawerMenu = () => {
+  const pathname = usePathname();
+
+  return (
+    <Menu>
+      {MAIN_DRAWER_LINKS.map((item, idx) => {
+        const hasSubmenu = item.submenu && item.submenu.length > 0;
+
+        if (!hasSubmenu) {
+          return (
+            <MenuItem
+              key={idx}
+              title={item.title}
+              href={item.link}
+              icon={item.icon}
+              active={pathname.startsWith(item.link)}
+            />
+          );
+        }
+
+        return (
+          <CollapseMenu
+            key={idx}
+            title={item.title}
+            link={item.link}
+            icon={item.icon}
+            submenu={item.submenu}
+          />
+        );
+      })}
+    </Menu>
+  );
+};
+
+const MainDrawerContent = () => {
+  return (
+    <div className='w-full p-4 flex flex-col gap-4'>
+      <div className='flex items-center gap-4'>
+        <Image
+          src='/assets/img/lti-logo.png'
+          alt='MBU Logo'
+          width={256}
+          height={256}
+          className='w-full max-w-16 h-auto'
+        />
+
+        <h1 className='text-xl font-bold'>LTI ERP</h1>
+      </div>
+
+      <MainDrawerMenu />
+    </div>
+  );
+};
+const MainDrawer = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
+  const pathname = usePathname();
+
+  const getPageTitle = useCallback(() => {
+    let title = '';
+
+    const activeMenu = MAIN_DRAWER_LINKS.find((item) =>
+      isPathActive(pathname, item.link)
+    );
+
+    const traverseMenuTitle = (menu: typeof activeMenu) => {
+      if (!menu) return;
+
+      const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
+
+      if (!title) {
+        title += menu?.title;
+      } else {
+        title += ' - ' + menu?.title;
+      }
+
+      if (!hasSubmenu || !menu.submenu) return;
+
+      const activeSubmenu = menu.submenu?.find((item) =>
+        isPathActive(pathname, item.link)
+      );
+
+      traverseMenuTitle(activeSubmenu);
+    };
+
+    traverseMenuTitle(activeMenu);
+
+    return title;
+  }, [pathname]);
+
+  const pageTitle = getPageTitle();
+
+  const toggleSidebar = () => {
+    setMainDrawerOpen(!mainDrawerOpen);
+  };
+
+  return (
+    <Drawer
+      open={mainDrawerOpen}
+      setOpen={setMainDrawerOpen}
+      openOnLarge
+      sidebarContent={<MainDrawerContent />}
+    >
+      <main className='w-full h-full flex flex-col'>
+        <Navbar title={pageTitle as string} toggleSidebar={toggleSidebar} />
+
+        {children}
+      </main>
+    </Drawer>
+  );
+};
+
+export default MainDrawer;

src/components/Modal.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+export const useModal = () => {
+  const ref = useRef<HTMLDialogElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const openModal = useCallback(() => {
+    setOpen(true);
+
+    ref.current?.showModal();
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setOpen(false);
+    ref.current?.close();
+  }, []);
+
+  const toggle = useCallback(() => {
+    if (open) {
+      closeModal();
+    } else {
+      openModal();
+    }
+  }, [open, closeModal, openModal]);
+
+  if (ref.current) {
+    ref.current.addEventListener('close', () => {
+      closeModal();
+    });
+  }
+
+  return { ref, open, setOpen, openModal, closeModal, toggle } as const;
+};
+
+interface ModalProps {
+  ref: RefObject<HTMLDialogElement | null>;
+  children?: ReactNode;
+  closeOnBackdrop?: boolean;
+  className?: {
+    modal?: string;
+    modalBox?: string;
+  };
+}
+
+const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+  return (
+    <dialog ref={ref} className={cn('modal', className?.modal)}>
+      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
+
+      {closeOnBackdrop && (
+        <form method='dialog' className='modal-backdrop'>
+          <button>close</button>
+        </form>
+      )}
+    </dialog>
+  );
+};
+
+export default Modal;

src/components/Navbar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Icon } from '@iconify/react';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import Button from '@/components/Button';
+
+interface NavbarProps {
+  title: string;
+  toggleSidebar?: () => void;
+}
+
+const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
+  return (
+    <div className='navbar px-4 bg-base-100 shadow-sm'>
+      <div className='flex-1'>
+        <div className='flex flex-row items-center gap-4'>
+          {toggleSidebar && (
+            <Button onClick={toggleSidebar} className='block lg:hidden'>
+              <Icon
+                icon='material-symbols:menu-rounded'
+                width={24}
+                height={24}
+              />
+            </Button>
+          )}
+
+          <span className='font-bold text-xl text-primary'>{title}</span>
+        </div>
+      </div>
+
+      <div className='flex gap-2'>
+        <div className='dropdown dropdown-end'>
+          <div
+            tabIndex={0}
+            role='button'
+            className='btn btn-ghost btn-circle avatar'
+          >
+            <div className='w-10 rounded-full border grid place-items-center'>
+              <Icon icon='uil:user' width={40} height={40} />
+            </div>
+          </div>
+
+          <Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
+            <MenuItem title='Settings' href='#' />
+            <MenuItem title='Logout' href='#' />
+          </Menu>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

src/components/Pagination.tsx

@@ -0,0 +1,335 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Icon } from '@iconify/react';
+
+import { cn } from '@/lib/helper';
+
+const range = (start: number, end: number) =>
+  Array.from({ length: end - start + 1 }, (_, i) => i + start);
+
+const PaginationButton = ({
+  content = '',
+  disabled = false,
+  onClick = () => {},
+}: {
+  content?: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+}) => (
+  <button
+    className={cn(
+      'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square',
+      'disabled:text-gray-700 disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-gray-50 disabled:active:translate-y-0'
+    )}
+    disabled={disabled}
+    onClick={onClick}
+  >
+    {content}
+  </button>
+);
+
+const EtcPaginationButton = ({
+  startPage = 0,
+  endPage = 0,
+  onPageItemClick,
+}: {
+  startPage: number;
+  endPage: number;
+  onPageItemClick: (a: number) => void;
+}) => {
+  const pages = range(startPage, endPage);
+
+  return (
+    <>
+      {startPage > 0 && endPage >= startPage && (
+        <div className='dropdown dropdown-top dropdown-center'>
+          <button
+            tabIndex={0}
+            role='button'
+            className={cn(
+              'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
+            )}
+          >
+            ...
+          </button>
+
+          <div className='dropdown-content'>
+            <ul
+              tabIndex={0}
+              className='menu bg-base-100 rounded-lg z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
+            >
+              {pages.map((pageNumber) => (
+                <li key={pageNumber}>
+                  <PaginationButton
+                    content={pageNumber}
+                    onClick={() => onPageItemClick(pageNumber)}
+                  />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {(startPage === 0 || endPage < startPage) && (
+        <button
+          disabled
+          className={cn(
+            'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
+          )}
+        >
+          ...
+        </button>
+      )}
+    </>
+  );
+};
+
+const Pagination = ({
+  currentPage = 1,
+  totalItems = 0,
+  itemsPerPage = 10,
+  onPageChange,
+  onPrevPage = () => {},
+  onNextPage = () => {},
+}: {
+  currentPage: number;
+  totalItems: number;
+  itemsPerPage: number;
+  onPageChange: (pageNumber: number) => void;
+  onPrevPage: () => void;
+  onNextPage: () => void;
+}) => {
+  const totalPages =
+    Math.ceil(totalItems / itemsPerPage) === 0
+      ? 1
+      : Math.ceil(totalItems / itemsPerPage);
+
+  const pageChangeHandler = (pageNumber: number) => onPageChange(pageNumber);
+
+  return (
+    <div>
+      <div className='join w-full justify-between items-center gap-3'>
+        <button
+          disabled={currentPage === 1}
+          onClick={onPrevPage}
+          className={cn(
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          <Icon
+            icon='uil:arrow-left'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />{' '}
+          Previous
+        </button>
+
+        {totalPages <= 7 && (
+          <div className='join-item join gap-0.5'>
+            {range(1, totalPages).map((pageNumber) => (
+              <PaginationButton
+                key={pageNumber}
+                content={pageNumber}
+                disabled={currentPage === pageNumber}
+                onClick={() => pageChangeHandler(pageNumber)}
+              />
+            ))}
+          </div>
+        )}
+
+        {totalPages > 7 && (
+          <div className='join-item join gap-0.5'>
+            <PaginationButton
+              content={1}
+              disabled={currentPage === 1}
+              onClick={() => pageChangeHandler(1)}
+            />
+
+            {totalPages >= 2 &&
+              (currentPage <= 3 || currentPage >= totalPages - 2) && (
+                <PaginationButton
+                  content={2}
+                  disabled={currentPage === 2}
+                  onClick={() => pageChangeHandler(2)}
+                />
+              )}
+
+            {totalPages >= 2 &&
+              currentPage > 3 &&
+              currentPage < totalPages - 2 && (
+                <EtcPaginationButton
+                  startPage={2}
+                  endPage={currentPage - 2}
+                  onPageItemClick={pageChangeHandler}
+                />
+              )}
+
+            {totalPages >= 3 &&
+              (currentPage <= 4 || currentPage >= totalPages - 2) &&
+              currentPage !== totalPages - 2 && (
+                <PaginationButton
+                  content={3}
+                  disabled={currentPage === 3}
+                  onClick={() => pageChangeHandler(3)}
+                />
+              )}
+
+            {totalPages >= 7 &&
+              (currentPage <= 2 || currentPage >= totalPages - 2) && (
+                <EtcPaginationButton
+                  startPage={
+                    currentPage <= 2
+                      ? currentPage + 2
+                      : currentPage === totalPages - 2
+                      ? 3
+                      : currentPage >= totalPages - 1
+                      ? 4
+                      : 1
+                  }
+                  endPage={
+                    currentPage <= 2 || currentPage >= totalPages - 1
+                      ? totalPages - 3
+                      : currentPage === totalPages - 2
+                      ? totalPages - 4
+                      : 2
+                  }
+                  onPageItemClick={pageChangeHandler}
+                />
+              )}
+
+            {totalPages >= 3 &&
+              currentPage > 4 &&
+              currentPage < totalPages - 1 && (
+                <PaginationButton
+                  content={currentPage - 1}
+                  onClick={() => pageChangeHandler(currentPage - 1)}
+                />
+              )}
+
+            {totalPages >= 7 &&
+              currentPage > 3 &&
+              currentPage < totalPages - 2 && (
+                <PaginationButton content={currentPage} disabled />
+              )}
+
+            {totalPages >= 5 &&
+              currentPage > 2 &&
+              currentPage < totalPages - 2 && (
+                <PaginationButton
+                  content={currentPage + 1}
+                  onClick={() => pageChangeHandler(currentPage + 1)}
+                />
+              )}
+
+            {totalPages >= 5 &&
+              (currentPage <= 2 || currentPage >= totalPages - 2) && (
+                <PaginationButton
+                  content={totalPages - 2}
+                  disabled={currentPage === totalPages - 2}
+                  onClick={() => pageChangeHandler(totalPages - 2)}
+                />
+              )}
+
+            {totalPages >= 6 &&
+              currentPage > 2 &&
+              currentPage < totalPages - 3 && (
+                <EtcPaginationButton
+                  startPage={
+                    currentPage <= 3
+                      ? currentPage + 2
+                      : currentPage >= 4
+                      ? currentPage + 2
+                      : 1
+                  }
+                  endPage={
+                    currentPage <= 3
+                      ? totalPages - 2
+                      : currentPage >= 4
+                      ? totalPages - 1
+                      : 0
+                  }
+                  onPageItemClick={pageChangeHandler}
+                />
+              )}
+
+            {totalPages >= 6 &&
+              (currentPage <= 3 || currentPage >= totalPages - 3) && (
+                <PaginationButton
+                  content={totalPages - 1}
+                  disabled={currentPage === totalPages - 1}
+                  onClick={() => pageChangeHandler(totalPages - 1)}
+                />
+              )}
+
+            {totalPages >= 7 && (
+              <PaginationButton
+                content={totalPages}
+                disabled={currentPage === totalPages}
+                onClick={() => pageChangeHandler(totalPages)}
+              />
+            )}
+          </div>
+        )}
+
+        <button
+          disabled={currentPage === totalPages}
+          onClick={onNextPage}
+          className={cn(
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          Next{' '}
+          <Icon
+            icon='uil:arrow-right'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />
+        </button>
+      </div>
+
+      <div className='flex gap-2 mt-2 sm:hidden'>
+        <button
+          disabled={currentPage === 1}
+          onClick={onPrevPage}
+          className={cn(
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          <Icon
+            icon='uil:arrow-left'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />{' '}
+          Previous
+        </button>
+
+        <button
+          disabled={currentPage === totalPages}
+          onClick={onNextPage}
+          className={cn(
+            'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
+            'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
+          )}
+        >
+          Next{' '}
+          <Icon
+            icon='uil:arrow-right'
+            width={20}
+            height={20}
+            className='text-gray-400 group-disabled:text-gray-300'
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

src/components/Table.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  TableOptions,
+  useReactTable,
+  ColumnDef,
+  FilterFn,
+  SortingState,
+  OnChangeFn,
+} from '@tanstack/react-table';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { Icon } from '@iconify/react';
+
+import Pagination from '@/components/Pagination';
+import { cn } from '@/lib/helper';
+
+interface TableClassNames {
+  containerClassName?: string;
+  tableWrapperClassName?: string;
+  tableClassName?: string;
+  tableHeaderClassName?: string;
+  headerRowClassName?: string;
+  headerColumnClassName?: string;
+  tableBodyClassName?: string;
+  bodyRowClassName?: string;
+  bodyColumnClassName?: string;
+  paginationClassName?: string;
+}
+
+export interface TableProps<TData extends object> {
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  pageSize?: number;
+  totalItems?: number;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  isLoading?: boolean;
+  fuzzySearchValue?: string | null;
+  onFuzzySearchValueChange?: (value: string) => void;
+  className?: TableClassNames;
+  emptyContent?: ReactNode;
+  sorting?: SortingState;
+  setSorting?: OnChangeFn<SortingState>;
+  manualSorting?: boolean;
+}
+
+const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
+
+const emptyContentDefaultValue = (
+  <div className='w-full p-5 text-center'>
+    <span className='text-lg opacity-50'>
+      Tidak ada data yang dapat ditampilkan...
+    </span>
+  </div>
+);
+
+const Table = <TData extends object>({
+  data = [],
+  columns = [],
+  pageSize = 10,
+  totalItems,
+  page,
+  onPageChange,
+  isLoading = false,
+  fuzzySearchValue,
+  onFuzzySearchValueChange,
+  className = {
+    containerClassName: '',
+    tableWrapperClassName: '',
+    tableClassName: '',
+    tableHeaderClassName: '',
+    headerRowClassName: '',
+    headerColumnClassName: '',
+    tableBodyClassName: '',
+    bodyRowClassName: '',
+    bodyColumnClassName: '',
+    paginationClassName: '',
+  },
+  emptyContent = emptyContentDefaultValue,
+  sorting,
+  setSorting,
+  manualSorting = false,
+}: TableProps<TData>) => {
+  const isServerSideTable =
+    totalItems !== undefined &&
+    page !== undefined &&
+    onPageChange !== undefined;
+
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: pageSize,
+  });
+
+  const fuzzyFilter: FilterFn<TData> = useCallback(
+    (row, columnId, value, addMeta) => {
+      const itemRank = rankItem(row.getValue(columnId), value);
+      addMeta({ itemRank });
+      return itemRank.passed;
+    },
+    []
+  );
+
+  const tableOptions: TableOptions<TData> = {
+    columns,
+    data: isLoading ? (DUMMY_SKELETON_DATA as TData[]) : data, // Type assertion
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    manualSorting,
+    state: {
+      pagination,
+      globalFilter: fuzzySearchValue,
+    },
+    filterFns: {
+      fuzzy: fuzzyFilter,
+    },
+    globalFilterFn: fuzzyFilter,
+  };
+
+  if (fuzzySearchValue !== null) {
+    tableOptions.onGlobalFilterChange = onFuzzySearchValueChange;
+    tableOptions.getFilteredRowModel = getFilteredRowModel();
+  }
+
+  if (sorting && setSorting) {
+    tableOptions.onSortingChange = setSorting;
+    tableOptions.state = {
+      ...tableOptions.state,
+      sorting,
+    };
+  }
+
+  const table = useReactTable(tableOptions);
+  const { setPageSize } = table;
+
+  const prevPageClickHandler = () => {
+    table.previousPage();
+
+    if (isServerSideTable) {
+      onPageChange(page - 1);
+    }
+  };
+
+  const nextPageClickHandler = () => {
+    table.nextPage();
+
+    if (isServerSideTable) {
+      onPageChange(page + 1);
+    }
+  };
+
+  const pageChangeHandler = (pageNumber: number) => {
+    const currentPage = pageNumber - 1;
+
+    table.setPageIndex(pageNumber ? currentPage : 0);
+
+    if (isServerSideTable) {
+      onPageChange(pageNumber);
+    }
+  };
+
+  useEffect(() => {
+    setPageSize(pageSize);
+  }, [pageSize, setPageSize]);
+
+  return (
+    <div className={className.containerClassName}>
+      <div className={className.tableWrapperClassName}>
+        <table className={className.tableClassName}>
+          <thead className={className.tableHeaderClassName}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id} className={className.headerRowClassName}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    onClick={header.column.getToggleSortingHandler()}
+                    className={cn(
+                      header.column.getCanSort()
+                        ? 'cursor-pointer select-none'
+                        : '',
+                      className.headerColumnClassName
+                    )}
+                  >
+                    <div className='flex items-center gap-1'>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+
+                      {header.column.getCanSort() && (
+                        <div className='flex items-center'>
+                          <Icon
+                            icon='lucide:arrow-up'
+                            width={12}
+                            height={12}
+                            className={cn(
+                              'transition-all ease-in-out duration-200',
+                              header.column.getIsSorted() === 'asc'
+                                ? 'text-black'
+                                : 'text-black/30'
+                            )}
+                          />
+                          <Icon
+                            icon='lucide:arrow-down'
+                            width={12}
+                            height={12}
+                            className={cn(
+                              'transition-all ease-in-out duration-200',
+                              header.column.getIsSorted() === 'desc'
+                                ? 'text-black'
+                                : 'text-black/30'
+                            )}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+
+          <tbody className={className.tableBodyClassName}>
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className={className.bodyRowClassName}>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className={className.bodyColumnClassName}>
+                    {!isLoading &&
+                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+                    {isLoading && <div className='skeleton w-full h-4' />}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+        !isLoading &&
+        emptyContent}
+
+      {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
+        <div className={cn('mt-5', className.paginationClassName)}>
+          <Pagination
+            totalItems={isServerSideTable ? totalItems : table.getRowCount()}
+            itemsPerPage={table.getState().pagination.pageSize}
+            currentPage={
+              isServerSideTable
+                ? page
+                : table.getState().pagination.pageIndex + 1
+            }
+            onPrevPage={prevPageClickHandler}
+            onNextPage={nextPageClickHandler}
+            onPageChange={pageChangeHandler}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Table;

src/components/helper/RequireAuth.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { ReactNode, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import useSWRImmutable from 'swr/immutable';
+
+import { useAuth } from '@/services/hooks/useAuth';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { GetMeResponse } from '@/types/api/api-general';
+
+// TODO: delete this later, DONT HARDCODE USER DATA
+const DUMMY_USER = {
+  id: 1,
+  email: 'admin@mbugroup.id',
+  npk: '0001',
+  name: 'Super Admin',
+  image: null,
+  created_at: '2025-09-30T03:24:20.899229Z',
+  updated_at: '2025-09-30T03:24:20.899229Z',
+  roles: [
+    {
+      id: 1,
+      key: 'mbu.super_admin',
+      name: 'MBU Administrator',
+      client: {
+        id: 1,
+        name: 'PT Mitra Berlian Unggas',
+        alias: 'MBU',
+      },
+      permissions: [
+        {
+          id: 1,
+          name: 'mbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 2,
+          name: 'mbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+        {
+          id: 3,
+          name: 'mbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 1,
+            name: 'PT Mitra Berlian Unggas',
+            alias: 'MBU',
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      key: 'lti.super_admin',
+      name: 'LTI Administrator',
+      client: {
+        id: 2,
+        name: 'PT Lumbung Telur Indonesia',
+        alias: 'LTI',
+      },
+      permissions: [
+        {
+          id: 4,
+          name: 'lti:purchase:read',
+          action: 'read',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 5,
+          name: 'lti:purchase:create',
+          action: 'create',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+        {
+          id: 6,
+          name: 'lti:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 2,
+            name: 'PT Lumbung Telur Indonesia',
+            alias: 'LTI',
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      key: 'manbu.super_admin',
+      name: 'MANBU Administrator',
+      client: {
+        id: 3,
+        name: 'PT Mandiri Berlian Unggas',
+        alias: 'MANBU',
+      },
+      permissions: [
+        {
+          id: 7,
+          name: 'manbu:purchase:read',
+          action: 'read',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 8,
+          name: 'manbu:purchase:create',
+          action: 'create',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+        {
+          id: 9,
+          name: 'manbu:purchase:approve',
+          action: 'approve',
+          client: {
+            id: 3,
+            name: 'PT Mandiri Berlian Unggas',
+            alias: 'MANBU',
+          },
+        },
+      ],
+    },
+  ],
+};
+
+interface RequireAuthProps {
+  children?: ReactNode;
+}
+
+const RequireAuth = ({ children }: RequireAuthProps) => {
+  const router = useRouter();
+  const { setUser, setIsLoadingUser } = useAuth();
+
+  const { data: userResponse, isLoading: isLoadingUserResponse } =
+    useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
+      '/auth/get-me',
+      httpClientFetcher,
+      {
+        shouldRetryOnError: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        refreshInterval: 0,
+      }
+    );
+
+  useEffect(() => {
+    setIsLoadingUser(isLoadingUserResponse);
+  }, [isLoadingUserResponse, setIsLoadingUser]);
+
+  useEffect(() => {
+    if (isResponseSuccess(userResponse)) {
+      setUser(userResponse.data);
+    } else {
+      // router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
+      // TODO: remove this later, DONT HARDCODE USER DATA
+      setUser(DUMMY_USER);
+    }
+  }, [userResponse, setIsLoadingUser, setUser]);
+
+  // TODO: uncomment this later
+  // if (isLoadingUserResponse && !userResponse) {
+  //   return (
+  //     <div className='w-full flex flex-row justify-center items-center p-4'>
+  //       <span className='loading loading-spinner loading-xl' />
+  //     </div>
+  //   );
+  // }
+
+  return <>{children}</>;
+};
+
+export default RequireAuth;

src/components/helper/SuspenseHelper.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Suspense } from 'react';
+
+const SuspenseHelper = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+};
+
+export default SuspenseHelper;

src/components/input/DebouncedTextInput.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+import { useDebounce } from 'use-debounce';
+
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface DebouncedTextInputProps extends TextInputProps {
+  delay?: number;
+}
+
+const DebouncedTextInput = (props: DebouncedTextInputProps) => {
+  const { delay, onChange } = props;
+
+  const [internalChangeEvent, setInternalChangeEvent] =
+    useState<ChangeEvent<HTMLInputElement>>();
+  const [internalValue, setInternalValue] = useState(props.value);
+
+  const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
+  const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
+
+  const internalChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInternalValue(e.target.value);
+    setInternalChangeEvent(e);
+  };
+
+  useEffect(() => {
+    if (debouncedChangeEvent) {
+      onChange?.(debouncedChangeEvent);
+    }
+  }, [debouncedValue]);
+
+  return (
+    <TextInput
+      {...props}
+      value={internalValue}
+      onChange={internalChangeHandler}
+    />
+  );
+};
+
+export default DebouncedTextInput;

src/components/input/FileInput.tsx

@@ -0,0 +1,88 @@
+import { Ref } from 'react';
+
+import { cn } from '@/lib/helper';
+import { TextInputProps } from '@/components/input/TextInput';
+
+interface FileInputProps
+  extends Omit<
+    TextInputProps,
+    | 'type'
+    | 'value'
+    | 'isValid'
+    | 'startAdornment'
+    | 'endAdornment'
+    | 'isLoading'
+  > {
+  ref?: Ref<HTMLInputElement>;
+  accept?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+const FileInput = ({
+  ref,
+  label,
+  bottomLabel,
+  name,
+  placeholder,
+  accept = '*',
+  className,
+  isError,
+  errorMessage,
+  disabled = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+}: FileInputProps) => {
+  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}
+        </label>
+      )}
+
+      <input
+        ref={ref}
+        type='file'
+        accept={accept}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        className={cn(
+          'grow file-input w-full h-12 rounded-lg!',
+          className?.input
+        )}
+        readOnly={readOnly}
+      />
+
+      {bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default FileInput;

src/components/input/PasswordInput.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+import Button from '@/components/Button';
+
+type PasswordInputProps = Omit<
+  TextInputProps,
+  'type' | 'startAdornment' | 'endAdornment'
+>;
+
+const PasswordInput = (props: PasswordInputProps) => {
+  const [type, setType] = useState('password');
+
+  const showPasswordHandler = () => {
+    setType((prevType) => {
+      if (prevType === 'password') return 'text';
+
+      return 'password';
+    });
+  };
+
+  return (
+    <TextInput
+      {...props}
+      type={type}
+      endAdornment={
+        <Button
+          tabIndex={-1}
+          type='button'
+          variant='ghost'
+          onClick={showPasswordHandler}
+          className='btn btn-ghost w-fit h-fit p-2 rounded-full'
+          disabled={props.disabled}
+        >
+          <Icon
+            icon={type === 'password' ? 'mdi:eye' : 'mdi:eye-off'}
+            width={16}
+            height={16}
+          />
+        </Button>
+      }
+    />
+  );
+};
+
+export default PasswordInput;

src/components/input/SelectInput.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import Select, { OptionProps, GroupBase, InputActionMeta } from 'react-select';
+import makeAnimated from 'react-select/animated';
+import { useDebounce } from 'use-debounce';
+
+import { cn } from '@/lib/helper';
+
+export interface OptionType {
+  value: string | number;
+  label: string;
+  className?: string; // for multi select
+  labelClassName?: string; // for multi select
+}
+
+export type OptionComponent<T = OptionType> = ComponentType<
+  OptionProps<T, boolean, GroupBase<T>>
+>;
+
+interface SelectInputProps<T = OptionType> {
+  label?: ReactNode;
+  bottomLabel?: ReactNode;
+  value?: T | T[];
+  onChange?: (val: T | T[] | null) => void;
+  options: T[];
+  optionComponent?: OptionComponent<T>;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  isClearable?: boolean;
+  isRtl?: boolean;
+  isSearchable?: boolean;
+  isMulti?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    select?: string;
+  };
+  isError?: boolean;
+  errorMessage?: string;
+  isAnimated?: boolean;
+  openMenu?: boolean;
+  delay?: number;
+  onInputChange?: (search: string) => 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 [debouncedInputValue] = useDebounce(internalInputValue, delay ?? 300);
+
+  const components = useMemo(() => {
+    const base = isAnimated ? animatedComponents : {};
+
+    return {
+      ...base,
+      IndicatorSeparator: () => null,
+    };
+  }, [isAnimated]);
+
+  const internalInputChangeHandler = (value: string, meta: InputActionMeta) => {
+    if (meta.action === 'input-change') setInternalInputValue(value);
+    if (meta.action === 'menu-close') setInternalInputValue('');
+  };
+
+  useEffect(() => {
+    onInputChange?.(debouncedInputValue);
+  }, [debouncedInputValue]);
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <span
+          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>
+            </>
+          )}
+        </span>
+      )}
+
+      <Select
+        instanceId='select'
+        value={value}
+        onChange={(val) => onChange?.(val as T)}
+        options={options}
+        menuIsOpen={openMenu}
+        inputValue={internalInputValue}
+        onInputChange={internalInputChangeHandler}
+        isMulti={isMulti}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isClearable={isClearable}
+        isRtl={isRtl}
+        isSearchable={isSearchable}
+        placeholder={placeholder}
+        className={cn('w-full', className)}
+        classNames={{
+          control: ({ isFocused, isDisabled }) =>
+            cn(
+              'w-full min-h-12! rounded-lg! 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-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-gray-300': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+              }
+            ),
+          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          placeholder: () =>
+            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+          singleValue: () =>
+            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', {
+              '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!'
+            ),
+          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,
+              'bg-indigo-600 text-white': isFocused,
+              'text-gray-700': !isDisabled && !isFocused,
+              'active:bg-indigo-50': !isDisabled,
+              'bg-blue-500!': 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();
+
+            return cn(
+              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1 rounded-md!',
+              selectedValues[index]?.className
+            );
+          },
+          multiValueLabel: ({ getValue, index }) => {
+            const selectedValues = getValue();
+
+            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 }),
+        }}
+      />
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+    </div>
+  );
+};
+
+export default SelectInput;

src/components/input/TagInput.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface TagInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  onChange?: (value: string) => void;
+}
+
+const TagInput: React.FC<TagInputProps> = ({
+  label,
+  bottomLabel,
+  name,
+  value = '',
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onChange,
+}) => {
+  const [tags, setTags] = useState<string[]>(value ? value.split(',') : []);
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    if (value !== undefined && value !== tags.join(',')) {
+      setTags(value ? value.split(',') : []);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      const newTag = inputValue.trim();
+      if (newTag && !tags.includes(newTag)) {
+        const updatedTags = [...tags, newTag];
+        setTags(updatedTags);
+        onChange?.(updatedTags.join(','));
+      }
+      setInputValue('');
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const updatedTags = tags.filter((t) => t !== tagToRemove);
+    setTags(updatedTags);
+    onChange?.(updatedTags.join(','));
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {/* Label */}
+      {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>
+      )}
+
+      {/* Input wrapper */}
+      <div
+        className={cn(
+          'flex flex-wrap items-start gap-2 border border-gray-400 rounded-md p-2 focus-within:ring-2 focus-within:ring-blue-500 min-h-[42px] transition-all',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+            'opacity-70 cursor-not-allowed': disabled,
+          },
+          className?.inputWrapper
+        )}
+        onClick={() => {
+          // Fokuskan input saat area diklik
+          const inputEl = document.getElementById(name);
+          inputEl?.focus();
+        }}
+      >
+        {tags.map((tag) => (
+          <div
+            key={tag}
+            className={cn(
+              'badge badge-primary gap-1 px-3 py-3 text-white flex items-center'
+            )}
+          >
+            <span>{tag}</span>
+            {!readOnly && (
+              <button
+                type='button'
+                onClick={() => handleRemoveTag(tag)}
+                className='ml-1 text-white hover:text-red-200 focus:outline-none'
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        ))}
+
+        {!readOnly && (
+          <input
+            type='text'
+            id={name}
+            name={name}
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={cn(
+              'flex-1 min-w-[120px] border-none outline-none p-1 size-min',
+              className?.input
+            )}
+          />
+        )}
+      </div>
+
+      {/* Bottom label or error message */}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TagInput;

src/components/input/TextArea.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextAreaProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string | number;
+  placeholder?: 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<HTMLTextAreaElement>;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  cols?: number;
+}
+
+const TextArea = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+  cols = 3
+}: TextAreaProps) => {
+  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>
+      )}
+        {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>
+        )}
+
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TextArea;

src/components/input/TextInput.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  HTMLInputTypeAttribute,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextInputProps {
+  type?: HTMLInputTypeAttribute;
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string | number;
+  placeholder?: 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 TextInput = ({
+  type = 'text',
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+}: TextInputProps) => {
+  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-lg! outline-none! transition-all duration-200',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
+        )}
+      >
+        {startAdornment && startAdornment}
+
+        <input
+          type={type}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          className={cn('grow', 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 TextInput;

src/components/menu/Menu.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface MenuProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+const Menu = ({ children, className }: MenuProps) => {
+  return (
+    <ul className={cn('menu w-full p-0 gap-0.5', className)}>{children}</ul>
+  );
+};
+
+export default Menu;

src/components/menu/MenuItem.tsx

@@ -0,0 +1,64 @@
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+
+import { cn } from '@/lib/helper';
+
+interface MenuItemProps {
+  title: string;
+  href?: string;
+  icon?: string;
+  active?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+const MenuItem = ({
+  title,
+  href,
+  icon,
+  active = false,
+  className,
+  onClick,
+}: MenuItemProps) => {
+  const menuItemBaseClassName = cn(
+    'group px-3 py-2 text-base text-black font-semibold flex flex-row items-center rounded-md',
+    { 'bg-gray-100 border-l-2 border-l-primary': active },
+    className
+  );
+
+  const menuItemContent = (
+    <>
+      {icon && (
+        <Icon
+          icon={icon}
+          width={20}
+          height={20}
+          className={cn('group-active:text-[inherit]', {
+            'text-gray-400': !active,
+            'text-black': active,
+          })}
+        />
+      )}
+
+      <span
+        className={cn({ 'opacity-40': !active }, 'group-active:opacity-100')}
+      >
+        {title}
+      </span>
+    </>
+  );
+
+  return (
+    <li onClick={onClick}>
+      {href && (
+        <Link href={href} className={menuItemBaseClassName}>
+          {menuItemContent}
+        </Link>
+      )}
+
+      {!href && <a className={menuItemBaseClassName}>{menuItemContent}</a>}
+    </li>
+  );
+};
+
+export default MenuItem;

src/components/modal/ConfirmationModal.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { RefObject } from 'react';
+
+import { Icon } from '@iconify/react';
+import Modal from '@/components/Modal';
+import Button from '@/components/Button';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface ConfirmationModalProps {
+  ref: RefObject<HTMLDialogElement | null>;
+  type?: 'info' | 'success' | 'error';
+  text?: string;
+  closeOnBackdrop?: boolean;
+  primaryButton?: {
+    text?: string;
+    color?: Color;
+    isLoading?: boolean;
+    onClick?: () => void;
+  };
+  secondaryButton?: {
+    text?: string;
+    color?: Color;
+    isLoading?: boolean;
+    onClick?: () => void;
+  };
+  className?: {
+    modal?: string;
+    modalBox?: string;
+  };
+}
+
+const ConfirmationModal = ({
+  ref,
+  type = 'info',
+  text,
+  closeOnBackdrop,
+  primaryButton,
+  secondaryButton,
+  className,
+}: ConfirmationModalProps) => {
+  const closeModalHandler = () => {
+    ref.current?.close();
+  };
+
+  return (
+    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
+      <div className='w-full flex flex-col gap-4'>
+        <div
+          className={cn(
+            'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
+            {
+              'bg-error': type === 'error',
+              'bg-info': type === 'info',
+              'bg-success': type === 'success',
+            }
+          )}
+        >
+          {type === 'info' && (
+            <Icon
+              icon='material-symbols:info-outline-rounded'
+              width={64}
+              height={64}
+              className='text-info-content'
+            />
+          )}
+
+          {type === 'success' && (
+            <Icon
+              icon='qlementine-icons:success-12'
+              width={64}
+              height={64}
+              className='text-success-content'
+            />
+          )}
+
+          {type === 'error' && (
+            <Icon
+              icon='solar:danger-triangle-linear'
+              width={64}
+              height={64}
+              className='text-error-content'
+            />
+          )}
+        </div>
+
+        <p className='text-center font-medium'>
+          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+        </p>
+
+        <div className='w-full flex flex-row gap-2'>
+          {secondaryButton && secondaryButton.text && (
+            <Button
+              variant='ghost'
+              color={secondaryButton?.color ?? 'none'}
+              isLoading={secondaryButton?.isLoading}
+              disabled={secondaryButton?.isLoading}
+              onClick={closeModalHandler}
+              className='grow'
+            >
+              {secondaryButton?.text ?? 'Tidak'}
+            </Button>
+          )}
+
+          {primaryButton && primaryButton.text && (
+            <Button
+              color={primaryButton?.color ?? 'info'}
+              onClick={primaryButton?.onClick}
+              isLoading={primaryButton?.isLoading}
+              disabled={primaryButton?.isLoading}
+              className='grow'
+            >
+              {primaryButton?.text ?? 'Ya'}
+            </Button>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;

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

@@ -0,0 +1,276 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+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 { Area } from '@/types/api/master-data/area';
+import { AreaApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Area, unknown>;
+  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'
+      )}
+    >
+      <Button
+        href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const AreasTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+  });
+
+  const {
+    data: areas,
+    isLoading,
+    mutate: refreshAreas,
+  } = useSWR(
+    `${AreaApi.basePath}${getTableFilterQueryString()}`,
+    AreaApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
+
+  const [selectedArea, setSelectedArea] = useState<Area | undefined>(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const areasColumns: ColumnDef<Area>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      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 = () => {
+          setSelectedArea(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await AreaApi.delete(selectedArea?.id as number);
+    refreshAreas();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Area!');
+    setIsDeleteLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  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='flex flex-row'>
+              <Button href='/master-data/area/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Area
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Area'
+              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<Area>
+          data={isResponseSuccess(areas) ? areas?.data : []}
+          columns={areasColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(areas) ? areas?.meta?.page : 0}
+          totalItems={isResponseSuccess(areas) ? areas?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(areas) && areas?.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 Area ini (${selectedArea?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default AreasTable;

src/components/pages/master-data/area/form/AreaForm.schema.ts

@@ -0,0 +1,9 @@
+import * as Yup from 'yup';
+
+export const AreaFormSchema = Yup.object({
+  name: Yup.string().required('Nama wajib diisi!'),
+});
+
+export const UpdateAreaFormSchema = AreaFormSchema;
+
+export type AreaFormValues = Yup.InferType<typeof AreaFormSchema>;

src/components/pages/master-data/area/form/AreaForm.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  AreaFormSchema,
+  AreaFormValues,
+  UpdateAreaFormSchema,
+} from '@/components/pages/master-data/area/form/AreaForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import {
+  Area,
+  CreateAreaPayload,
+  UpdateAreaPayload,
+} from '@/types/api/master-data/area';
+import { AreaApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+
+interface AreaFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Area;
+}
+
+const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [areaFormErrorMessage, setAreaFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createAreaHandler = useCallback(
+    async (payload: CreateAreaPayload) => {
+      const createAreaRes = await AreaApi.create(payload);
+
+      if (isResponseError(createAreaRes)) {
+        setAreaFormErrorMessage(createAreaRes.message);
+        return;
+      }
+
+      toast.success(createAreaRes?.message as string);
+      router.push('/master-data/area');
+    },
+    [router]
+  );
+
+  const updateAreaHandler = useCallback(
+    async (areaId: number, payload: UpdateAreaPayload) => {
+      const updateAreaRes = await AreaApi.update(areaId, payload);
+
+      if (updateAreaRes?.status === 'error') {
+        setAreaFormErrorMessage(updateAreaRes.message);
+        return;
+      }
+
+      toast.success(updateAreaRes?.message as string);
+      router.refresh();
+      router.push('/master-data/area');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<AreaFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<AreaFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: type === 'edit' ? UpdateAreaFormSchema : AreaFormSchema,
+    onSubmit: async (values) => {
+      setAreaFormErrorMessage('');
+
+      const areaPayload: CreateAreaPayload = {
+        name: values.name,
+      };
+
+      switch (type) {
+        case 'add':
+          await createAreaHandler(areaPayload);
+          break;
+
+        case 'edit':
+          await updateAreaHandler(initialValues?.id as number, areaPayload);
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const deleteAreaClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await AreaApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Area!');
+    setIsDeleteLoading(false);
+    router.push('/master-data/area');
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/area'
+            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 Area'}
+            {type === 'edit' && 'Edit Area'}
+            {type === 'detail' && 'Detail Area'}
+          </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'>
+            <TextInput
+              required
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama area'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={type === 'detail'}
+            />
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteAreaClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    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'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {areaFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{areaFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Area ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default AreaForm;

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

@@ -0,0 +1,289 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+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 { Bank } from '@/types/api/master-data/bank';
+import { BankApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Bank, unknown>;
+  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'
+      )}
+    >
+      <Button
+        href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const BanksTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+  });
+
+  const {
+    data: banks,
+    isLoading,
+    mutate: refreshBanks,
+  } = useSWR(
+    `${BankApi.basePath}${getTableFilterQueryString()}`,
+    BankApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
+
+  const [selectedBank, setSelectedBank] = useState<Bank | undefined>(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const banksColumns: ColumnDef<Bank>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'alias',
+      header: 'Alias',
+    },
+    {
+      accessorKey: 'account_number',
+      header: 'No. Rekening',
+    },
+    {
+      accessorKey: 'owner',
+      header: 'Pemilik',
+      cell: (props) => (props.getValue() ? props.getValue() : '-'),
+    },
+    {
+      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 = () => {
+          setSelectedBank(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await BankApi.delete(selectedBank?.id as number);
+    refreshBanks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Bank!');
+    setIsDeleteLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting]);
+
+  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='flex flex-row'>
+              <Button href='/master-data/bank/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Bank
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Bank'
+              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<Bank>
+          data={isResponseSuccess(banks) ? banks?.data : []}
+          columns={banksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(banks) ? banks?.meta?.page : 0}
+          totalItems={isResponseSuccess(banks) ? banks?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(banks) && banks?.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 Bank ini (${selectedBank?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default BanksTable;

src/components/pages/master-data/bank/form/BankForm.schema.ts

@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+
+export const BankFormSchema = Yup.object({
+  name: Yup.string().required('Nama wajib diisi!'),
+  alias: Yup.string()
+    .max(5, 'Maksimal 5 karakter!')
+    .required('Alias wajib diisi!'),
+  account_number: Yup.string().required('Rekening wajib diisi!'),
+  owner: Yup.string(),
+});
+
+export const UpdateBankFormSchema = BankFormSchema;
+
+export type BankFormValues = Yup.InferType<typeof BankFormSchema>;

src/components/pages/master-data/bank/form/BankForm.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  BankFormSchema,
+  BankFormValues,
+  UpdateBankFormSchema,
+} from '@/components/pages/master-data/bank/form/BankForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import {
+  CreateBankPayload,
+  Bank,
+  UpdateBankPayload,
+} from '@/types/api/master-data/bank';
+import { BankApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+
+interface BankFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Bank;
+}
+
+const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [bankFormErrorMessage, setBankFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createBankHandler = useCallback(
+    async (payload: CreateBankPayload) => {
+      const createBankRes = await BankApi.create(payload);
+
+      if (isResponseError(createBankRes)) {
+        setBankFormErrorMessage(createBankRes.message);
+        return;
+      }
+
+      toast.success(createBankRes?.message as string);
+      router.push('/master-data/bank');
+    },
+    [router]
+  );
+
+  const updateBankHandler = useCallback(
+    async (bankId: number, payload: UpdateBankPayload) => {
+      const updateBankRes = await BankApi.update(bankId, payload);
+
+      if (updateBankRes?.status === 'error') {
+        setBankFormErrorMessage(updateBankRes.message);
+        return;
+      }
+
+      toast.success(updateBankRes?.message as string);
+      router.refresh();
+      router.push('/master-data/bank');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<BankFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      alias: initialValues?.alias ?? '',
+      account_number: initialValues?.account_number ?? '',
+      owner: initialValues?.owner,
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<BankFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: type === 'edit' ? UpdateBankFormSchema : BankFormSchema,
+    onSubmit: async (values) => {
+      setBankFormErrorMessage('');
+
+      const bankPayload: CreateBankPayload = {
+        name: values.name,
+        alias: values.alias,
+        account_number: values.account_number.toString(),
+        owner: values.owner ? values.owner : '',
+      };
+
+      switch (type) {
+        case 'add':
+          await createBankHandler(bankPayload);
+          break;
+
+        case 'edit':
+          await updateBankHandler(initialValues?.id as number, bankPayload);
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const deleteBankClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await BankApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Bank!');
+    setIsDeleteLoading(false);
+    router.push('/master-data/bank');
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/bank'
+            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 Bank'}
+            {type === 'edit' && 'Edit Bank'}
+            {type === 'detail' && 'Detail Bank'}
+          </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'>
+            <TextInput
+              required
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama Bank'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={type === 'detail'}
+            />
+
+            <TextInput
+              required
+              label='Alias'
+              name='alias'
+              placeholder='Masukkan alias'
+              value={formik.values.alias}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.alias && Boolean(formik.errors.alias)}
+              errorMessage={formik.errors.alias}
+              readOnly={type === 'detail'}
+            />
+
+            <TextInput
+              required
+              type='number'
+              label='No. Rekening'
+              name='account_number'
+              placeholder='Masukkan no. rekening'
+              value={formik.values.account_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.account_number &&
+                Boolean(formik.errors.account_number)
+              }
+              errorMessage={formik.errors.account_number}
+              readOnly={type === 'detail'}
+            />
+
+            <TextInput
+              label='Pemilik'
+              name='owner'
+              placeholder='Masukkan nama pemilik'
+              value={formik.values.owner}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.owner && Boolean(formik.errors.owner)}
+              errorMessage={formik.errors.owner}
+              readOnly={type === 'detail'}
+            />
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteBankClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                    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'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {bankFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{bankFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Bank ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default BankForm;

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

@@ -0,0 +1,288 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+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 { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Customer, unknown>;
+  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'
+      )}
+    >
+      <Button
+        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+      <Button
+        className='justify-start text-sm'
+        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const CustomersTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '', picSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      picSort: 'sort_pic',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: customers,
+    isLoading,
+    mutate: refreshCustomers,
+  } = useSWR(
+    `${CustomerApi.basePath}${getTableFilterQueryString()}`,
+    CustomerApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedCustomer, setSelectedCustomer] = useState<
+    Customer | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const customersColumns: ColumnDef<Customer>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'PIC',
+      cell: (props) => props.row.original.pic.name,
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: (props) => props.row.original.type,
+    },
+    {
+      accessorKey: 'phone',
+      header: 'Phone',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      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 = () => {
+          setSelectedCustomer(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(selectedCustomer?.id as number);
+    refreshCustomers();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Customer!');
+    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='flex flex-row'>
+              <Button href='/master-data/customer/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Customer
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Kandang'
+              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<Customer>
+          data={isResponseSuccess(customers) ? customers?.data : []}
+          columns={customersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(customers) ? customers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(customers) ? customers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(customers) && customers?.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 Customer ini (${selectedCustomer?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomersTable;