From 9f934ce5c7c7156bc0e4197d1697f0f4023ce759 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Mon, 8 Sep 2025 23:12:11 +0700
Subject: [PATCH 01/42] fix local storage

---
 src/contexts/authContext.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/contexts/authContext.tsx b/src/contexts/authContext.tsx
index 6f70ea5..b53c56a 100644
--- a/src/contexts/authContext.tsx
+++ b/src/contexts/authContext.tsx
@@ -25,7 +25,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     const savedToken = localStorage.getItem('authToken')
     const savedUser = localStorage.getItem('user')
     if (savedToken) setToken(savedToken)
-    if (savedUser) setCurrentUser(JSON.parse(savedUser))
+    if (savedUser) {
+      try {
+        setCurrentUser(JSON.parse(savedUser))
+      } catch (error) {
+        console.error('Failed to parse saved user data:', error)
+        // Clear invalid data
+        localStorage.removeItem('user')
+      }
+    }
     setIsInitialized(true)
   }, [])
 

From 789dd823b628893a5423eceb3af0d679947a015b Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Mon, 8 Sep 2025 23:19:41 +0700
Subject: [PATCH 02/42] add indonesian lang

---
 .../layout/shared/LanguageDropdown.tsx        |   8 +-
 src/configs/i18n.ts                           |   3 +-
 src/data/dictionaries/ar.json                 | 116 ------------------
 src/data/dictionaries/fr.json                 | 116 ------------------
 src/data/dictionaries/id.json                 | 116 ++++++++++++++++++
 src/utils/getDictionary.ts                    |   3 +-
 6 files changed, 121 insertions(+), 241 deletions(-)
 delete mode 100644 src/data/dictionaries/ar.json
 delete mode 100644 src/data/dictionaries/fr.json
 create mode 100644 src/data/dictionaries/id.json

diff --git a/src/components/layout/shared/LanguageDropdown.tsx b/src/components/layout/shared/LanguageDropdown.tsx
index ac7f343..9a01c13 100644
--- a/src/components/layout/shared/LanguageDropdown.tsx
+++ b/src/components/layout/shared/LanguageDropdown.tsx
@@ -43,12 +43,8 @@ const languageData: LanguageDataType[] = [
     langName: 'English'
   },
   {
-    langCode: 'fr',
-    langName: 'French'
-  },
-  {
-    langCode: 'ar',
-    langName: 'Arabic'
+    langCode: 'id',
+    langName: 'Indonesian'
   }
 ]
 
diff --git a/src/configs/i18n.ts b/src/configs/i18n.ts
index 6dde940..7607f8a 100644
--- a/src/configs/i18n.ts
+++ b/src/configs/i18n.ts
@@ -1,9 +1,10 @@
 export const i18n = {
   defaultLocale: 'en',
-  locales: ['en', 'fr', 'ar'],
+  locales: ['en', 'id'],
   langDirection: {
     en: 'ltr',
     fr: 'ltr',
+    id: 'ltr',
     ar: 'rtl'
   }
 } as const
diff --git a/src/data/dictionaries/ar.json b/src/data/dictionaries/ar.json
deleted file mode 100644
index 7e0b702..0000000
--- a/src/data/dictionaries/ar.json
+++ /dev/null
@@ -1,116 +0,0 @@
-{
-  "navigation": {
-    "dashboards": "لوحات القيادة",
-    "analytics": "تحليلات",
-    "inventory": "تجزئة الكترونية",
-    "stock": "المخزون",
-    "academy": "أكاديمية",
-    "logistics": "اللوجستية",
-    "frontPages": "الصفحات الأولى",
-    "landing": "الهبوط",
-    "pricing": "التسعير",
-    "payment": "قسط",
-    "checkout": "الدفع",
-    "helpCenter": "مركز المساعدة",
-    "appsPages": "التطبيقات والصفحات",
-    "apps": "تطبيقات",
-    "dashboard": "لوحة القيادة",
-    "products": "منتجات",
-    "list": "قائمة",
-    "add": "يضيف",
-    "restock": "استرجاع",
-    "category": "فئة",
-    "overview": "نظرة عامة",
-    "profitloss": "الربح والخسارة",
-    "finance": "مالية",
-    "paymentMethods": "طرق الدفع",
-    "organization": "المنظمة",
-    "outlet": "مخزن",
-    "units": "وحدات",
-    "reports": "تقارير",
-    "ingredients": "مكونات",
-    "orders": "أوامر",
-    "details": "تفاصيل",
-    "customers": "العملاء",
-    "manageReviews": "إدارة المراجعات",
-    "referrals": "الإحالات",
-    "settings": "إعدادات",
-    "myCourses": "دوراتي",
-    "courseDetails": "تفاصيل الدورة",
-    "fleet": "أسطول",
-    "email": "البريد الإلكتروني",
-    "chat": "محادثة",
-    "calendar": "تقويم",
-    "kanban": "كانبان",
-    "invoice": "فاتورة",
-    "preview": "معاينة",
-    "edit": "يحرر",
-    "user": "المستعمل",
-    "view": "رأي",
-    "rolesPermissions": "الأدوار والأذونات",
-    "roles": "الأدوار",
-    "permissions": "أذونات",
-    "pages": "الصفحات",
-    "userProfile": "ملف تعريفي للمستخدم",
-    "accountSettings": "إعدادت الحساب",
-    "faq": "التعليمات",
-    "miscellaneous": "متفرقات",
-    "comingSoon": "قريبا",
-    "underMaintenance": "تحت الصيانة",
-    "pageNotFound404": "الصفحة غير موجودة - 404",
-    "notAuthorized401": "غير مصرح به - 401",
-    "authPages": "صفحات المصادقة",
-    "login": "تسجيل الدخول",
-    "loginV1": "تسجيل الدخول v1",
-    "loginV2": "تسجيل الدخول الإصدار 2",
-    "register": "يسجل",
-    "registerV1": "تسجيل الإصدار 1",
-    "registerV2": "تسجيل الإصدار 2",
-    "registerMultiSteps": "تسجيل متعدد الخطوات",
-    "verifyEmail": "التحقق من البريد الإلكتروني",
-    "verifyEmailV1": "التحقق من البريد الإلكتروني الإصدار 1",
-    "verifyEmailV2": "التحقق من البريد الإلكتروني الإصدار 2",
-    "forgotPassword": "هل نسيت كلمة السر",
-    "forgotPasswordV1": "نسيت كلمة المرور v1",
-    "forgotPasswordV2": "نسيت كلمة المرور v2",
-    "resetPassword": "إعادة تعيين كلمة المرور",
-    "resetPasswordV1": "إعادة تعيين كلمة المرور v1",
-    "resetPasswordV2": "إعادة تعيين كلمة المرور الإصدار 2",
-    "twoSteps": "خطوتين",
-    "twoStepsV1": "خطوتين v1",
-    "twoStepsV2": "خطوتان - الإصدار 2",
-    "wizardExamples": "أمثلة على المعالج",
-    "propertyListing": "قائمة الممتلكات",
-    "createDeal": "إنشاء صفقة",
-    "dialogExamples": "أمثلة الحوار",
-    "widgetExamples": "أمثلة القطعة",
-    "basic": "أساسي",
-    "advanced": "متقدم",
-    "statistics": "إحصائيات",
-    "actions": "أجراءات",
-    "formsAndTables": "النماذج والجداول",
-    "formLayouts": "تخطيطات النموذج",
-    "formValidation": "التحقق من صحة النموذج",
-    "formWizard": "معالج النماذج",
-    "reactTable": "جدول رد الفعل",
-    "formELements": "عناصر النماذج",
-    "muiTables": "جداول MUI",
-    "chartsMisc": "الرسوم البيانية ومتفرقات",
-    "charts": "الرسوم البيانية",
-    "recharts": "يعيد رسم الخرائط",
-    "apex": "ذروة",
-    "foundation": "مؤسسة",
-    "components": "عناصر",
-    "menuExamples": "أمثلة القائمة",
-    "raiseSupport": "رفع الدعم",
-    "documentation": "توثيق",
-    "others": "آحرون",
-    "itemWithBadge": "العنصر مع شارة",
-    "externalLink": "رابط خارجي",
-    "menuLevels": "مستويات القائمة",
-    "menuLevel2": "مستوى القائمة 2",
-    "menuLevel3": "مستوى القائمة 3",
-    "disabledMenu": "قائمة المعوقين",
-    "dailyReport": "تقرير يومي"
-  }
-}
diff --git a/src/data/dictionaries/fr.json b/src/data/dictionaries/fr.json
deleted file mode 100644
index a0ab0a6..0000000
--- a/src/data/dictionaries/fr.json
+++ /dev/null
@@ -1,116 +0,0 @@
-{
-  "navigation": {
-    "dashboards": "Tableaux de bord",
-    "analytics": "Analytique",
-    "inventory": "Inventaire",
-    "stock": "Stock",
-    "academy": "Académie",
-    "logistics": "Logistique",
-    "frontPages": "Premières pages",
-    "landing": "Atterrissage",
-    "pricing": "Tarifs",
-    "payment": "Paiement",
-    "checkout": "Vérifier",
-    "helpCenter": "Centre d'aide",
-    "appsPages": "Applications et pages",
-    "apps": "Apps",
-    "dashboard": "Tableau de bord",
-    "products": "Produits",
-    "list": "Liste",
-    "add": "Ajouter",
-    "restock": "Rapprocher",
-    "category": "Catégorie",
-    "overview": "Aperçu",
-    "profitloss": "Profit et perte",
-    "finance": "Finance",
-    "paymentMethods": "Méthodes de paiement",
-    "organization": "Organisation",
-    "outlet": "Point de vente",
-    "units": "Unites",
-    "reports": "Rapports",
-    "ingredients": "Ingrédients",
-    "orders": "Ordres",
-    "details": "Détails",
-    "customers": "Clientes",
-    "manageReviews": "Gérer les avis",
-    "referrals": "Références",
-    "settings": "Paramètres",
-    "myCourses": "Mes cours",
-    "courseDetails": "Détails du cours",
-    "fleet": "Flotte",
-    "email": "E-mail",
-    "chat": "chatte",
-    "calendar": "Calendrier",
-    "kanban": "Kanban",
-    "invoice": "Facture d'achat",
-    "preview": "Aperçu",
-    "edit": "Éditer",
-    "user": "Utilisateur",
-    "view": "Voir",
-    "rolesPermissions": "Rôles et autorisations",
-    "roles": "Les rôles",
-    "permissions": "Autorisations",
-    "pages": "Pages",
-    "userProfile": "Profil de l'utilisateur",
-    "accountSettings": "Paramètres du compte",
-    "faq": "FAQ",
-    "miscellaneous": "Divers",
-    "comingSoon": "À venir",
-    "underMaintenance": "En maintenance",
-    "pageNotFound404": "Page non trouvée - 404",
-    "notAuthorized401": "Non autorisé - 401",
-    "authPages": "Pages d'authentification",
-    "login": "Connexion",
-    "loginV1": "Connexion v1",
-    "loginV2": "Connexion v2",
-    "register": "S'inscrire",
-    "registerV1": "Enregistrer v1",
-    "registerV2": "Enregistrer v2",
-    "registerMultiSteps": "Enregistrer plusieurs étapes",
-    "verifyEmail": "Vérifier les courriels",
-    "verifyEmailV1": "Vérifier l'e-mail v1",
-    "verifyEmailV2": "Vérifier l'e-mail v2",
-    "forgotPassword": "Mot de passe oublié",
-    "forgotPasswordV1": "Mot de passe oublié v1",
-    "forgotPasswordV2": "Mot de passe oublié v2",
-    "resetPassword": "Réinitialiser le mot de passe",
-    "resetPasswordV1": "Réinitialiser le mot de passe v1",
-    "resetPasswordV2": "Réinitialiser le mot de passe v2",
-    "twoSteps": "Deux étapes",
-    "twoStepsV1": "Deux étapes v1",
-    "twoStepsV2": "Deux étapes v2",
-    "wizardExamples": "Exemples d'assistants",
-    "propertyListing": "Liste des biens",
-    "createDeal": "Créer un accord",
-    "dialogExamples": "Exemples de dialogue",
-    "widgetExamples": "Exemples de widgets",
-    "basic": "Basique",
-    "advanced": "Avancée",
-    "statistics": "Statistiques",
-    "actions": "Actions",
-    "formsAndTables": "Formulaires et tableaux",
-    "formLayouts": "Dispositions de formulaire",
-    "formValidation": "Validation du formulaire",
-    "formWizard": "Assistant de formulaire",
-    "reactTable": "Tableau de réaction",
-    "formELements": "Éléments de formulaire",
-    "muiTables": "Tableaux MUI",
-    "chartsMisc": "Graphiques & Divers",
-    "charts": "Graphiques",
-    "recharts": "Regraphiques",
-    "apex": "Sommet",
-    "foundation": "fondation",
-    "components": "Composants",
-    "menuExamples": "Exemples de menus",
-    "raiseSupport": "Augmenter le soutien",
-    "documentation": "Documentation",
-    "others": "Les autres",
-    "itemWithBadge": "Article avec badge",
-    "externalLink": "Lien Externe",
-    "menuLevels": "Niveaux de menus",
-    "menuLevel2": "Niveau menu 2",
-    "menuLevel3": "Niveau menu 3",
-    "disabledMenu": "Menu désactivé",
-    "dailyReport": "Rapport quotidien"
-  }
-}
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
new file mode 100644
index 0000000..e2fb3ff
--- /dev/null
+++ b/src/data/dictionaries/id.json
@@ -0,0 +1,116 @@
+{
+    "navigation": {
+        "dashboards": "Dasbor",
+        "analytics": "Analitik",
+        "inventory": "Inventaris",
+        "stock": "Stok",
+        "academy": "Akademi",
+        "logistics": "Logistik",
+        "frontPages": "Halaman Depan",
+        "landing": "Beranda",
+        "pricing": "Harga",
+        "payment": "Pembayaran",
+        "checkout": "Checkout",
+        "helpCenter": "Pusat Bantuan",
+        "appsPages": "Aplikasi & Halaman",
+        "apps": "Aplikasi",
+        "dashboard": "Dasbor",
+        "products": "Produk",
+        "list": "Daftar",
+        "add": "Tambah",
+        "restock": "Isi Ulang Stok",
+        "category": "Kategori",
+        "overview": "Ringkasan",
+        "profitloss": "Laba Rugi",
+        "units": "Unit",
+        "reports": "Laporan",
+        "finance": "Keuangan",
+        "paymentMethods": "Metode Pembayaran",
+        "organization": "Organisasi",
+        "outlet": "Outlet",
+        "ingredients": "Bahan",
+        "orders": "Pesanan",
+        "details": "Detail",
+        "customers": "Pelanggan",
+        "manageReviews": "Kelola Ulasan",
+        "referrals": "Rujukan",
+        "settings": "Pengaturan",
+        "myCourses": "Kursus Saya",
+        "courseDetails": "Detail Kursus",
+        "fleet": "Armada",
+        "email": "Email",
+        "chat": "Chat",
+        "calendar": "Kalender",
+        "kanban": "Kanban",
+        "invoice": "Faktur",
+        "preview": "Pratinjau",
+        "edit": "Edit",
+        "user": "Pengguna",
+        "view": "Lihat",
+        "rolesPermissions": "Peran & Izin",
+        "roles": "Peran",
+        "permissions": "Izin",
+        "pages": "Halaman",
+        "userProfile": "Profil Pengguna",
+        "accountSettings": "Pengaturan Akun",
+        "faq": "FAQ",
+        "miscellaneous": "Lain-lain",
+        "comingSoon": "Segera Hadir",
+        "underMaintenance": "Dalam Pemeliharaan",
+        "pageNotFound404": "Halaman Tidak Ditemukan - 404",
+        "notAuthorized401": "Tidak Diizinkan - 401",
+        "authPages": "Halaman Autentikasi",
+        "login": "Masuk",
+        "loginV1": "Masuk v1",
+        "loginV2": "Masuk v2",
+        "register": "Daftar",
+        "registerV1": "Daftar v1",
+        "registerV2": "Daftar v2",
+        "registerMultiSteps": "Daftar Multi-Langkah",
+        "verifyEmail": "Verifikasi Email",
+        "verifyEmailV1": "Verifikasi Email v1",
+        "verifyEmailV2": "Verifikasi Email v2",
+        "forgotPassword": "Lupa Kata Sandi",
+        "forgotPasswordV1": "Lupa Kata Sandi v1",
+        "forgotPasswordV2": "Lupa Kata Sandi v2",
+        "resetPassword": "Reset Kata Sandi",
+        "resetPasswordV1": "Reset Kata Sandi v1",
+        "resetPasswordV2": "Reset Kata Sandi v2",
+        "twoSteps": "Dua Langkah",
+        "twoStepsV1": "Dua Langkah v1",
+        "twoStepsV2": "Dua Langkah v2",
+        "wizardExamples": "Contoh Wizard",
+        "propertyListing": "Daftar Properti",
+        "createDeal": "Buat Penawaran",
+        "dialogExamples": "Contoh Dialog",
+        "widgetExamples": "Contoh Widget",
+        "basic": "Dasar",
+        "advanced": "Lanjutan",
+        "statistics": "Statistik",
+        "actions": "Aksi",
+        "formsAndTables": "Form & Tabel",
+        "formLayouts": "Layout Form",
+        "formValidation": "Validasi Form",
+        "formWizard": "Wizard Form",
+        "reactTable": "Tabel React",
+        "formELements": "Elemen Form",
+        "muiTables": "Tabel MUI",
+        "chartsMisc": "Grafik & Lain-lain",
+        "charts": "Grafik",
+        "recharts": "Recharts",
+        "apex": "Apex",
+        "foundation": "Fondasi",
+        "components": "Komponen",
+        "menuExamples": "Contoh Menu",
+        "raiseSupport": "Buat Tiket Dukungan",
+        "documentation": "Dokumentasi",
+        "others": "Lainnya",
+        "itemWithBadge": "Item dengan Badge",
+        "externalLink": "Link Eksternal",
+        "menuLevels": "Level Menu",
+        "menuLevel2": "Level Menu 2",
+        "menuLevel3": "Level Menu 3",
+        "disabledMenu": "Menu Nonaktif",
+        "dailyReport": "Laporan Harian"
+    }
+}
diff --git a/src/utils/getDictionary.ts b/src/utils/getDictionary.ts
index caa8acd..6111d81 100644
--- a/src/utils/getDictionary.ts
+++ b/src/utils/getDictionary.ts
@@ -3,8 +3,7 @@ import type { Locale } from '@configs/i18n'
 
 const dictionaries = {
   en: () => import('@/data/dictionaries/en.json').then(module => module.default),
-  fr: () => import('@/data/dictionaries/fr.json').then(module => module.default),
-  ar: () => import('@/data/dictionaries/ar.json').then(module => module.default)
+  id: () => import('@/data/dictionaries/id.json').then(module => module.default)
 }
 
 export const getDictionary = async (locale: Locale) => dictionaries[locale]()

From 105d75c820f2137bb44c7e2a8d1dfc16c1e38055 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 01:17:01 +0700
Subject: [PATCH 03/42] feat: vendor create and vendor list

---
 .../(private)/apps/vendor/list/page.tsx       |   8 +
 .../layout/vertical/VerticalMenu.tsx          |   8 +-
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/vendor.ts                      | 204 ++++++
 src/types/apps/vendorTypes.ts                 |  10 +
 .../apps/vendor/list/AddVendorDrawer.tsx      | 595 ++++++++++++++++++
 src/views/apps/vendor/list/TableFilters.tsx   | 109 ++++
 .../apps/vendor/list/VendorListCards.tsx      |  80 +++
 .../apps/vendor/list/VendorListTable.tsx      | 365 +++++++++++
 src/views/apps/vendor/list/index.tsx          |  24 +
 11 files changed, 1404 insertions(+), 5 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
 create mode 100644 src/data/dummy/vendor.ts
 create mode 100644 src/types/apps/vendorTypes.ts
 create mode 100644 src/views/apps/vendor/list/AddVendorDrawer.tsx
 create mode 100644 src/views/apps/vendor/list/TableFilters.tsx
 create mode 100644 src/views/apps/vendor/list/VendorListCards.tsx
 create mode 100644 src/views/apps/vendor/list/VendorListTable.tsx
 create mode 100644 src/views/apps/vendor/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
new file mode 100644
index 0000000..d9efb5c
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
@@ -0,0 +1,8 @@
+import { vendorDummyData } from '@/data/dummy/vendor'
+import VendorList from '@/views/apps/vendor/list'
+
+const VendorListTablePage = async () => {
+  return <VendorList vendorData={vendorDummyData} />
+}
+
+export default VendorListTablePage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index e235783..648248d 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -120,9 +120,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             </SubMenu>
             <SubMenu label={dictionary['navigation'].stock}>
               <MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
-              <MenuItem href={`/${locale}/apps/inventory/stock/restock`}>
-                {dictionary['navigation'].restock}
-              </MenuItem>
+              <MenuItem href={`/${locale}/apps/inventory/stock/restock`}>{dictionary['navigation'].restock}</MenuItem>
             </SubMenu>
             {/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
           </SubMenu>
@@ -140,6 +138,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
+          <SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-user' />}>
+            <MenuItem href={`/${locale}/apps/vendor/list`}>{dictionary['navigation'].list}</MenuItem>
+            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
+          </SubMenu>
         </MenuSection>
       </Menu>
     </ScrollWrapper>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 2b821c4..9904156 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -111,6 +111,7 @@
     "menuLevel2": "Menu Level 2",
     "menuLevel3": "Menu Level 3",
     "disabledMenu": "Disabled Menu",
-    "dailyReport": "Daily Report"
+    "dailyReport": "Daily Report",
+    "vendor": "Vendor"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index e2fb3ff..af683c1 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -111,6 +111,7 @@
         "menuLevel2": "Level Menu 2",
         "menuLevel3": "Level Menu 3",
         "disabledMenu": "Menu Nonaktif",
-        "dailyReport": "Laporan Harian"
+        "dailyReport": "Laporan Harian",
+        "vendor": "Vendor"
     }
 }
diff --git a/src/data/dummy/vendor.ts b/src/data/dummy/vendor.ts
new file mode 100644
index 0000000..d95ddcd
--- /dev/null
+++ b/src/data/dummy/vendor.ts
@@ -0,0 +1,204 @@
+import { VendorType } from '@/types/apps/vendorTypes'
+
+export const vendorDummyData: VendorType[] = [
+  {
+    id: 1,
+    photo: '',
+    name: 'Budi Santoso',
+    company: 'PT Maju Bersama Sejahtera',
+    email: 'budi.santoso@majubersama.co.id',
+    telephone: '+62 21 5551234',
+    youPayable: 25500000,
+    theyPayable: 12300000
+  },
+  {
+    id: 2,
+    photo: '',
+    name: 'Siti Nurhaliza',
+    company: 'CV Berkah Mandiri',
+    email: 'siti.nurhaliza@berkahmandiri.com',
+    telephone: '+62 22 8887654',
+    youPayable: 18750000,
+    theyPayable: 8950000
+  },
+  {
+    id: 3,
+    photo: '',
+    name: 'Ahmad Wijaya',
+    company: 'PT Teknologi Nusantara',
+    email: 'ahmad.wijaya@teknusantara.co.id',
+    telephone: '+62 24 3332211',
+    youPayable: 42100000,
+    theyPayable: 15600000
+  },
+  {
+    id: 4,
+    photo: '',
+    name: 'Dewi Sartika',
+    company: 'UD Sumber Rejeki',
+    email: 'dewi.sartika@sumberrejeki.net',
+    telephone: '+62 31 4445566',
+    youPayable: 9800000,
+    theyPayable: 22100000
+  },
+  {
+    id: 5,
+    photo: '',
+    name: 'Rudi Hermawan',
+    company: 'PT Indah Karya Persada',
+    email: 'rudi.hermawan@indahkarya.co.id',
+    telephone: '+62 274 7778899',
+    youPayable: 33250000,
+    theyPayable: 5400000
+  },
+  {
+    id: 6,
+    photo: '',
+    name: 'Maya Sari',
+    company: 'CV Harapan Jaya',
+    email: 'maya.sari@harapanjaya.com',
+    telephone: '+62 261 1112233',
+    youPayable: 16900000,
+    theyPayable: 28750000
+  },
+  {
+    id: 7,
+    photo: '',
+    name: 'Andi Prasetyo',
+    company: 'PT Cipta Mandiri Utama',
+    email: 'andi.prasetyo@ciptamandiri.co.id',
+    telephone: '+62 411 5556677',
+    youPayable: 21400000,
+    theyPayable: 11850000
+  },
+  {
+    id: 8,
+    photo: '',
+    name: 'Fitri Ramadhani',
+    company: 'UD Barokah Sukses',
+    email: 'fitri.ramadhani@barokahsukses.net',
+    telephone: '+62 751 9998877',
+    youPayable: 12650000,
+    theyPayable: 19300000
+  },
+  {
+    id: 9,
+    photo: '',
+    name: 'Agus Setiawan',
+    company: 'PT Nusantara Prima',
+    email: 'agus.setiawan@nusantaraprima.co.id',
+    telephone: '+62 541 3334455',
+    youPayable: 38800000,
+    theyPayable: 7200000
+  },
+  {
+    id: 10,
+    photo: '',
+    name: 'Rina Sulastri',
+    company: 'CV Mitra Sejati',
+    email: 'rina.sulastri@mitrasejati.com',
+    telephone: '+62 778 6667788',
+    youPayable: 14300000,
+    theyPayable: 24950000
+  },
+  {
+    id: 11,
+    photo: '',
+    name: 'Bambang Kurniawan',
+    company: 'PT Harmoni Bersama',
+    email: 'bambang.kurniawan@harmonibersama.co.id',
+    telephone: '+62 21 7779900',
+    youPayable: 29150000,
+    theyPayable: 13750000
+  },
+  {
+    id: 12,
+    photo: '',
+    name: 'Indah Permatasari',
+    company: 'UD Cahaya Abadi',
+    email: 'indah.permatasari@cahayaabadi.net',
+    telephone: '+62 361 2223344',
+    youPayable: 8900000,
+    theyPayable: 31200000
+  },
+  {
+    id: 13,
+    photo: '',
+    name: 'Dodi Supriadi',
+    company: 'PT Karya Gemilang',
+    email: 'dodi.supriadi@karyagemilang.co.id',
+    telephone: '+62 721 8889911',
+    youPayable: 36700000,
+    theyPayable: 9100000
+  },
+  {
+    id: 14,
+    photo: '',
+    name: 'Lestari Wulandari',
+    company: 'CV Anugrah Sentosa',
+    email: 'lestari.wulandari@anugrahsentosa.com',
+    telephone: '+62 741 4445566',
+    youPayable: 19850000,
+    theyPayable: 16400000
+  },
+  {
+    id: 15,
+    photo: '',
+    name: 'Hendra Gunawan',
+    company: 'PT Surya Mandala',
+    email: 'hendra.gunawan@suryamandala.co.id',
+    telephone: '+62 511 7778800',
+    youPayable: 27300000,
+    theyPayable: 21650000
+  },
+  {
+    id: 16,
+    photo: '',
+    name: 'Nurul Hidayah',
+    company: 'UD Rezeki Barokah',
+    email: 'nurul.hidayah@rezekibarokah.net',
+    telephone: '+62 431 1112200',
+    youPayable: 15200000,
+    theyPayable: 26800000
+  },
+  {
+    id: 17,
+    photo: '',
+    name: 'Teguh Prasetyo',
+    company: 'PT Dinamika Persada',
+    email: 'teguh.prasetyo@dinamikapersada.co.id',
+    telephone: '+62 62 5556600',
+    youPayable: 32900000,
+    theyPayable: 12150000
+  },
+  {
+    id: 18,
+    photo: '',
+    name: 'Sri Mulyani',
+    company: 'CV Berkah Mulia',
+    email: 'sri.mulyani@berkahmulia.com',
+    telephone: '+62 771 3337799',
+    youPayable: 11700000,
+    theyPayable: 29400000
+  },
+  {
+    id: 19,
+    photo: '',
+    name: 'Joko Widodo',
+    company: 'PT Makmur Sejahtera',
+    email: 'joko.widodo@makmursejahtera.co.id',
+    telephone: '+62 341 8882211',
+    youPayable: 24800000,
+    theyPayable: 18350000
+  },
+  {
+    id: 20,
+    photo: '',
+    name: 'Ratna Sari',
+    company: 'UD Sari Indah',
+    email: 'ratna.sari@sariindah.net',
+    telephone: '+62 717 9990011',
+    youPayable: 17950000,
+    theyPayable: 23600000
+  }
+]
diff --git a/src/types/apps/vendorTypes.ts b/src/types/apps/vendorTypes.ts
new file mode 100644
index 0000000..33de981
--- /dev/null
+++ b/src/types/apps/vendorTypes.ts
@@ -0,0 +1,10 @@
+export type VendorType = {
+  id: number
+  photo: string
+  name: string
+  company: string
+  email: string
+  telephone: string
+  youPayable: number
+  theyPayable: number
+}
diff --git a/src/views/apps/vendor/list/AddVendorDrawer.tsx b/src/views/apps/vendor/list/AddVendorDrawer.tsx
new file mode 100644
index 0000000..5980159
--- /dev/null
+++ b/src/views/apps/vendor/list/AddVendorDrawer.tsx
@@ -0,0 +1,595 @@
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid2'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Types Imports
+import type { VendorType } from '@/types/apps/vendorTypes'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  vendorData?: VendorType[]
+  setData: (data: VendorType[]) => void
+}
+
+type FormValidateType = {
+  name: string
+  company: string
+  email: string
+  telephone: string
+}
+
+// Vars
+const initialData = {
+  name: '',
+  company: '',
+  email: '',
+  telephone: ''
+}
+
+const AddVendorDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, vendorData, setData } = props
+
+  // States
+  const [showMore, setShowMore] = useState(false)
+  const [alamatPengiriman, setAlamatPengiriman] = useState([''])
+  const [rekeningBank, setRekeningBank] = useState([
+    {
+      bank: '',
+      cabang: '',
+      namaPemilik: '',
+      nomorRekening: ''
+    }
+  ])
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  // Functions untuk alamat
+  const handleTambahAlamat = () => {
+    setAlamatPengiriman([...alamatPengiriman, ''])
+  }
+
+  const handleHapusAlamat = (index: number) => {
+    if (alamatPengiriman.length > 1) {
+      const newAlamat = alamatPengiriman.filter((_, i) => i !== index)
+      setAlamatPengiriman(newAlamat)
+    }
+  }
+
+  const handleChangeAlamat = (index: number, value: string) => {
+    const newAlamat = [...alamatPengiriman]
+    newAlamat[index] = value
+    setAlamatPengiriman(newAlamat)
+  }
+
+  // Functions untuk rekening bank
+  const handleTambahRekening = () => {
+    setRekeningBank([
+      ...rekeningBank,
+      {
+        bank: '',
+        cabang: '',
+        namaPemilik: '',
+        nomorRekening: ''
+      }
+    ])
+  }
+
+  const handleHapusRekening = (index: number) => {
+    if (rekeningBank.length > 1) {
+      const newRekening = rekeningBank.filter((_, i) => i !== index)
+      setRekeningBank(newRekening)
+    }
+  }
+
+  const handleChangeRekening = (index: number, field: string, value: string) => {
+    const newRekening = [...rekeningBank]
+    newRekening[index] = { ...newRekening[index], [field]: value }
+    setRekeningBank(newRekening)
+  }
+
+  const onSubmit = (data: FormValidateType) => {
+    const newVendor: VendorType = {
+      id: (vendorData?.length && vendorData?.length + 1) || 1,
+      photo: '',
+      name: data.name,
+      company: data.company,
+      email: data.email,
+      telephone: data.telephone,
+      youPayable: 0,
+      theyPayable: 0
+    }
+
+    setData([...(vendorData ?? []), newVendor])
+    handleClose()
+    resetForm(initialData)
+    setAlamatPengiriman([''])
+    setRekeningBank([
+      {
+        bank: '',
+        cabang: '',
+        namaPemilik: '',
+        nomorRekening: ''
+      }
+    ])
+    setShowMore(false)
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+    setAlamatPengiriman([''])
+    setRekeningBank([
+      {
+        bank: '',
+        cabang: '',
+        namaPemilik: '',
+        nomorRekening: ''
+      }
+    ])
+    setShowMore(false)
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 300, sm: 400 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>Tambah Vendor Baru</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='vendor-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Tampilkan Foto */}
+            <div className='flex items-center gap-3'>
+              <i className='tabler-plus text-blue-500' />
+              <Typography variant='body1' color='primary' className='cursor-pointer'>
+                Tampilkan Foto
+              </Typography>
+            </div>
+
+            {/* Nama */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Nama <span className='text-red-500'>*</span>
+              </Typography>
+              <Grid container spacing={2}>
+                <Grid size={4}>
+                  <CustomTextField select fullWidth defaultValue='Tuan'>
+                    <MenuItem value='Tuan'>Tuan</MenuItem>
+                    <MenuItem value='Nyonya'>Nyonya</MenuItem>
+                    <MenuItem value='Nona'>Nona</MenuItem>
+                    <MenuItem value='Bapak'>Bapak</MenuItem>
+                    <MenuItem value='Ibu'>Ibu</MenuItem>
+                  </CustomTextField>
+                </Grid>
+                <Grid size={8}>
+                  <Controller
+                    name='name'
+                    control={control}
+                    rules={{ required: true }}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        placeholder='Nama'
+                        {...(errors.name && { error: true, helperText: 'Field ini wajib diisi.' })}
+                      />
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </div>
+
+            {/* Perusahaan dan Telepon */}
+            <Grid container spacing={6}>
+              <Grid size={6}>
+                <Controller
+                  name='company'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      fullWidth
+                      label='Perusahaan'
+                      placeholder='Perusahaan'
+                      {...(errors.company && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    />
+                  )}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Controller
+                  name='telephone'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      fullWidth
+                      label='Telepon'
+                      placeholder='Telepon'
+                      {...(errors.telephone && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    />
+                  )}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Email */}
+            <Controller
+              name='email'
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <CustomTextField
+                  {...field}
+                  fullWidth
+                  type='email'
+                  label='Email'
+                  placeholder='Email'
+                  {...(errors.email && { error: true, helperText: 'Field ini wajib diisi.' })}
+                />
+              )}
+            />
+
+            {/* Tampilkan selengkapnya */}
+            {!showMore && (
+              <div className='flex items-center gap-3' onClick={() => setShowMore(true)}>
+                <i className='tabler-plus text-blue-500' />
+                <Typography variant='body1' color='primary' className='cursor-pointer'>
+                  Tampilkan selengkapnya
+                </Typography>
+              </div>
+            )}
+
+            {/* Konten tambahan yang muncul saat showMore true */}
+            {showMore && (
+              <>
+                {/* Alamat Penagihan */}
+                <div>
+                  <Typography variant='body2' className='mb-2'>
+                    Alamat Penagihan
+                  </Typography>
+                  <CustomTextField fullWidth placeholder='Alamat Penagihan' multiline rows={3} />
+                </div>
+
+                {/* Negara */}
+                <div>
+                  <Typography variant='body2' className='mb-2'>
+                    Negara
+                  </Typography>
+                  <CustomTextField select fullWidth defaultValue='Indonesia'>
+                    <MenuItem value='Indonesia'>Indonesia</MenuItem>
+                  </CustomTextField>
+                </div>
+
+                {/* Provinsi dan Kota */}
+                <Grid container spacing={6}>
+                  <Grid size={6}>
+                    <Typography variant='body2' className='mb-2'>
+                      Provinsi
+                    </Typography>
+                    <CustomTextField select fullWidth placeholder='Provinsi'>
+                      <MenuItem value=''>Pilih Provinsi</MenuItem>
+                      <MenuItem value='DKI Jakarta'>DKI Jakarta</MenuItem>
+                      <MenuItem value='Jawa Barat'>Jawa Barat</MenuItem>
+                      <MenuItem value='Jawa Tengah'>Jawa Tengah</MenuItem>
+                      <MenuItem value='Jawa Timur'>Jawa Timur</MenuItem>
+                    </CustomTextField>
+                  </Grid>
+                  <Grid size={6}>
+                    <Typography variant='body2' className='mb-2'>
+                      Kota
+                    </Typography>
+                    <CustomTextField select fullWidth placeholder='Kota'>
+                      <MenuItem value=''>Pilih Kota</MenuItem>
+                      <MenuItem value='Jakarta'>Jakarta</MenuItem>
+                      <MenuItem value='Bandung'>Bandung</MenuItem>
+                      <MenuItem value='Surabaya'>Surabaya</MenuItem>
+                    </CustomTextField>
+                  </Grid>
+                </Grid>
+
+                {/* Kecamatan dan Kelurahan */}
+                <Grid container spacing={6}>
+                  <Grid size={6}>
+                    <Typography variant='body2' className='mb-2'>
+                      Kecamatan
+                    </Typography>
+                    <CustomTextField select fullWidth placeholder='Kecamatan'>
+                      <MenuItem value=''>Pilih Kecamatan</MenuItem>
+                    </CustomTextField>
+                  </Grid>
+                  <Grid size={6}>
+                    <Typography variant='body2' className='mb-2'>
+                      Kelurahan
+                    </Typography>
+                    <CustomTextField select fullWidth placeholder='Kelurahan'>
+                      <MenuItem value=''>Pilih Kelurahan</MenuItem>
+                    </CustomTextField>
+                  </Grid>
+                </Grid>
+
+                {/* Tipe Kartu Identitas dan ID */}
+                <Grid container spacing={6}>
+                  <Grid size={6}>
+                    <Typography variant='body2' className='mb-2'>
+                      Tipe Kartu Identitas
+                    </Typography>
+                    <CustomTextField select fullWidth placeholder='Silahkan pilih tipe kartu identitas'>
+                      <MenuItem value=''>Pilih Tipe Kartu Identitas</MenuItem>
+                      <MenuItem value='KTP'>KTP</MenuItem>
+                      <MenuItem value='SIM'>SIM</MenuItem>
+                      <MenuItem value='Paspor'>Paspor</MenuItem>
+                    </CustomTextField>
+                  </Grid>
+                  <Grid size={6}>
+                    <Typography variant='body2' className='mb-2'>
+                      ID Kartu Identitas
+                    </Typography>
+                    <CustomTextField fullWidth placeholder='ID Kartu Identitas' />
+                  </Grid>
+                </Grid>
+
+                {/* NPWP */}
+                <div>
+                  <Typography variant='body2' className='mb-2'>
+                    NPWP
+                  </Typography>
+                  <CustomTextField fullWidth placeholder='NPWP' />
+                </div>
+
+                {/* Alamat Pengiriman */}
+                <div>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Alamat Pengiriman
+                  </Typography>
+                  {alamatPengiriman.map((alamat, index) => (
+                    <div key={index} className='flex items-center gap-3 mb-3'>
+                      <CustomTextField
+                        fullWidth
+                        placeholder='Alamat'
+                        multiline
+                        rows={2}
+                        value={alamat}
+                        onChange={e => handleChangeAlamat(index, e.target.value)}
+                        sx={{
+                          '& .MuiOutlinedInput-root': {
+                            borderColor: index === 1 ? 'primary.main' : 'default'
+                          }
+                        }}
+                      />
+                      {alamatPengiriman.length > 1 && (
+                        <IconButton
+                          size='small'
+                          onClick={() => handleHapusAlamat(index)}
+                          sx={{
+                            color: 'error.main',
+                            border: 1,
+                            borderColor: 'error.main',
+                            '&:hover': {
+                              backgroundColor: 'error.light',
+                              borderColor: 'error.main'
+                            }
+                          }}
+                        >
+                          <i className='tabler-trash' />
+                        </IconButton>
+                      )}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Tambah Alamat Pengiriman */}
+                <div className='flex items-center gap-3' onClick={handleTambahAlamat}>
+                  <i className='tabler-plus text-blue-500' />
+                  <Typography variant='body1' color='primary' className='cursor-pointer'>
+                    Tambah Alamat Pengiriman
+                  </Typography>
+                </div>
+
+                {/* Rekening Bank */}
+                <div>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Rekening Bank
+                  </Typography>
+                  {rekeningBank.map((rekening, index) => (
+                    <div key={index} className='mb-4'>
+                      <div className='flex items-start gap-3'>
+                        <div className='flex-1'>
+                          {/* Baris pertama: Bank & Cabang */}
+                          <Grid container spacing={3} className='mb-3'>
+                            <Grid size={6}>
+                              <CustomTextField
+                                select
+                                fullWidth
+                                placeholder='Bank'
+                                value={rekening.bank}
+                                onChange={e => handleChangeRekening(index, 'bank', e.target.value)}
+                              >
+                                <MenuItem value=''>Pilih Bank</MenuItem>
+                                <MenuItem value='BCA'>BCA</MenuItem>
+                                <MenuItem value='Mandiri'>Mandiri</MenuItem>
+                                <MenuItem value='BNI'>BNI</MenuItem>
+                                <MenuItem value='BRI'>BRI</MenuItem>
+                              </CustomTextField>
+                            </Grid>
+                            <Grid size={6}>
+                              <CustomTextField
+                                fullWidth
+                                placeholder='Cabang'
+                                value={rekening.cabang}
+                                onChange={e => handleChangeRekening(index, 'cabang', e.target.value)}
+                              />
+                            </Grid>
+                          </Grid>
+
+                          {/* Baris kedua: Nama Pemilik & Nomor Rekening */}
+                          <Grid container spacing={3}>
+                            <Grid size={6}>
+                              <CustomTextField
+                                fullWidth
+                                placeholder='Nama Pemilik'
+                                value={rekening.namaPemilik}
+                                onChange={e => handleChangeRekening(index, 'namaPemilik', e.target.value)}
+                              />
+                            </Grid>
+                            <Grid size={6}>
+                              <CustomTextField
+                                fullWidth
+                                placeholder='Nomor Rekening'
+                                value={rekening.nomorRekening}
+                                onChange={e => handleChangeRekening(index, 'nomorRekening', e.target.value)}
+                              />
+                            </Grid>
+                          </Grid>
+                        </div>
+
+                        {/* Tombol hapus di samping, sejajar dengan tengah kedua baris */}
+                        {rekeningBank.length > 1 && (
+                          <div className='flex items-center' style={{ height: '120px' }}>
+                            <IconButton
+                              size='small'
+                              onClick={() => handleHapusRekening(index)}
+                              sx={{
+                                color: 'error.main',
+                                border: 1,
+                                borderColor: 'error.main',
+                                '&:hover': {
+                                  backgroundColor: 'error.light',
+                                  borderColor: 'error.main'
+                                }
+                              }}
+                            >
+                              <i className='tabler-trash' />
+                            </IconButton>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+
+                  <div className='flex items-center gap-3 mt-4' onClick={handleTambahRekening}>
+                    <i className='tabler-plus text-blue-500' />
+                    <Typography variant='body1' color='primary' className='cursor-pointer'>
+                      Tambah Rekening Bank
+                    </Typography>
+                  </div>
+
+                  <Grid container spacing={6} className='mt-4'>
+                    <Grid size={6}>
+                      <Typography variant='body2' className='mb-2'>
+                        Nomor
+                      </Typography>
+                      <CustomTextField fullWidth placeholder='Nomor' />
+                    </Grid>
+                    <Grid size={6}>
+                      <Typography variant='body2' className='mb-2'>
+                        Tanggal Lahir
+                      </Typography>
+                      <CustomTextField fullWidth type='date' placeholder='Tanggal Lahir' />
+                    </Grid>
+                  </Grid>
+
+                  <div className='mt-4'>
+                    <Typography variant='body2' className='mb-2'>
+                      Deskripsi
+                    </Typography>
+                    <CustomTextField fullWidth placeholder='Deskripsi' multiline rows={3} />
+                  </div>
+
+                  {/* Button Sembunyikan di dalam konten */}
+                  <div className='flex items-center gap-3 mt-6 mb-6' onClick={() => setShowMore(false)}>
+                    <i className='tabler-minus text-blue-500' />
+                    <Typography variant='body1' color='primary' className='cursor-pointer'>
+                      Sembunyikan
+                    </Typography>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='vendor-form'>
+            Simpan
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default AddVendorDrawer
diff --git a/src/views/apps/vendor/list/TableFilters.tsx b/src/views/apps/vendor/list/TableFilters.tsx
new file mode 100644
index 0000000..c5e4da6
--- /dev/null
+++ b/src/views/apps/vendor/list/TableFilters.tsx
@@ -0,0 +1,109 @@
+// React Imports
+import { useState, useEffect } from 'react'
+
+// MUI Imports
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid2'
+import MenuItem from '@mui/material/MenuItem'
+
+// Type Imports
+import type { VendorType } from '@/types/apps/vendorTypes'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+const TableFilters = ({ setData, tableData }: { setData: (data: VendorType[]) => void; tableData?: VendorType[] }) => {
+  // States
+  const [company, setCompany] = useState('')
+  const [payableRange, setPayableRange] = useState('')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  useEffect(() => {
+    const filteredData = tableData?.filter(vendor => {
+      // Filter by company type
+      if (company && !vendor.company.toLowerCase().includes(company.toLowerCase())) return false
+
+      // Filter by payable range (You Payable)
+      if (payableRange) {
+        const payable = vendor.youPayable
+        switch (payableRange) {
+          case 'low':
+            if (payable >= 20000000) return false
+            break
+          case 'medium':
+            if (payable < 20000000 || payable >= 35000000) return false
+            break
+          case 'high':
+            if (payable < 35000000) return false
+            break
+        }
+      }
+
+      // Filter by search term (name, company, email)
+      if (searchTerm) {
+        const search = searchTerm.toLowerCase()
+        const matchesName = vendor.name.toLowerCase().includes(search)
+        const matchesCompany = vendor.company.toLowerCase().includes(search)
+        const matchesEmail = vendor.email.toLowerCase().includes(search)
+
+        if (!matchesName && !matchesCompany && !matchesEmail) return false
+      }
+
+      return true
+    })
+
+    setData(filteredData || [])
+  }, [company, payableRange, searchTerm, tableData, setData])
+
+  return (
+    <CardContent>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12, sm: 4 }}>
+          <CustomTextField
+            select
+            fullWidth
+            id='select-company'
+            value={company}
+            onChange={e => setCompany(e.target.value)}
+            slotProps={{
+              select: { displayEmpty: true }
+            }}
+          >
+            <MenuItem value=''>Pilih Jenis Perusahaan</MenuItem>
+            <MenuItem value='PT'>PT (Perseroan Terbatas)</MenuItem>
+            <MenuItem value='CV'>CV (Commanditaire Vennootschap)</MenuItem>
+            <MenuItem value='UD'>UD (Usaha Dagang)</MenuItem>
+          </CustomTextField>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 4 }}>
+          <CustomTextField
+            select
+            fullWidth
+            id='select-payable-range'
+            value={payableRange}
+            onChange={e => setPayableRange(e.target.value)}
+            slotProps={{
+              select: { displayEmpty: true }
+            }}
+          >
+            <MenuItem value=''>Pilih Rentang Hutang</MenuItem>
+            <MenuItem value='low'>Rendah (&lt; 20M)</MenuItem>
+            <MenuItem value='medium'>Sedang (20M - 35M)</MenuItem>
+            <MenuItem value='high'>Tinggi (&gt; 35M)</MenuItem>
+          </CustomTextField>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 4 }}>
+          <CustomTextField
+            fullWidth
+            id='search-vendor'
+            placeholder='Cari berdasarkan nama, perusahaan, atau email'
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+          />
+        </Grid>
+      </Grid>
+    </CardContent>
+  )
+}
+
+export default TableFilters
diff --git a/src/views/apps/vendor/list/VendorListCards.tsx b/src/views/apps/vendor/list/VendorListCards.tsx
new file mode 100644
index 0000000..d88ffe8
--- /dev/null
+++ b/src/views/apps/vendor/list/VendorListCards.tsx
@@ -0,0 +1,80 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'Hutang Anda',
+    stats: 'Rp 542.340.000',
+    avatarIcon: 'tabler-credit-card',
+    avatarColor: 'error',
+    trend: 'positive',
+    trendNumber: '12%',
+    subtitle: 'Total yang harus dibayar'
+  },
+  {
+    title: 'Piutang Anda',
+    stats: 'Rp 387.250.000',
+    avatarIcon: 'tabler-wallet',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '8%',
+    subtitle: 'Total yang harus dibayar vendor'
+  },
+  {
+    title: 'Pembayaran Diterima',
+    stats: 'Rp 156.800.000',
+    avatarIcon: 'tabler-arrow-down-circle',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '23%',
+    subtitle: 'Bulan ini'
+  },
+  {
+    title: 'Pembayaran Dikirim',
+    stats: 'Rp 89.450.000',
+    avatarIcon: 'tabler-arrow-up-circle',
+    avatarColor: 'warning',
+    trend: 'negative',
+    trendNumber: '5%',
+    subtitle: 'Bulan ini'
+  },
+  {
+    title: 'Hutang Jatuh Tempo',
+    stats: 'Rp 67.890.000',
+    avatarIcon: 'tabler-clock-exclamation',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '15%',
+    subtitle: 'Pembayaran terlambat'
+  },
+  {
+    title: 'Piutang Tertunda',
+    stats: 'Rp 134.560.000',
+    avatarIcon: 'tabler-clock-dollar',
+    avatarColor: 'info',
+    trend: 'positive',
+    trendNumber: '28%',
+    subtitle: 'Menunggu dari vendor'
+  }
+]
+
+const VendorListCards = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 4 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default VendorListCards
diff --git a/src/views/apps/vendor/list/VendorListTable.tsx b/src/views/apps/vendor/list/VendorListTable.tsx
new file mode 100644
index 0000000..284b160
--- /dev/null
+++ b/src/views/apps/vendor/list/VendorListTable.tsx
@@ -0,0 +1,365 @@
+'use client'
+
+// React Imports
+import { useEffect, useState, useMemo } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Checkbox from '@mui/material/Checkbox'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+import TablePagination from '@mui/material/TablePagination'
+import type { TextFieldProps } from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFacetedMinMaxValues,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/react-table'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+import type { VendorType } from '@/types/apps/vendorTypes'
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import TableFilters from './TableFilters'
+import AddVendorDrawer from './AddVendorDrawer'
+import OptionMenu from '@core/components/option-menu'
+import TablePaginationComponent from '@components/TablePaginationComponent'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Util Imports
+import { getInitials } from '@/utils/getInitials'
+import { getLocalizedUrl } from '@/utils/i18n'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { formatCurrency } from '@/utils/transform'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type VendorTypeWithAction = VendorType & {
+  action?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<VendorTypeWithAction>()
+
+const VendorListTable = ({ tableData }: { tableData?: VendorType[] }) => {
+  // States
+  const [addVendorOpen, setAddVendorOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [data, setData] = useState(...[tableData])
+  const [filteredData, setFilteredData] = useState(data)
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  const columns = useMemo<ColumnDef<VendorTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('name', {
+        header: 'Vendor',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-4'>
+            {getAvatar({ photo: row.original.photo, name: row.original.name })}
+            <div className='flex flex-col'>
+              <Link href={getLocalizedUrl(`/apps/vendor/view/${row.original.id}`, locale as Locale)}>
+                <Typography color='primary' className='font-medium cursor-pointer hover:underline'>
+                  {row.original.name}
+                </Typography>
+              </Link>
+              <Typography variant='body2'>{row.original.email}</Typography>
+            </div>
+          </div>
+        )
+      }),
+      columnHelper.accessor('company', {
+        header: 'Perusahaan',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-2'>
+            <Icon className='tabler-building' sx={{ color: 'var(--mui-palette-primary-main)' }} />
+            <Typography color='text.primary'>{row.original.company}</Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('telephone', {
+        header: 'Telepon',
+        cell: ({ row }) => <Typography color='text.primary'>{row.original.telephone}</Typography>
+      }),
+      columnHelper.accessor('youPayable', {
+        header: () => <div className='text-right'>Anda Hutang</div>,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            <Typography color='text.primary' className='font-medium'>
+              {formatCurrency(row.original.youPayable)}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('theyPayable', {
+        header: () => <div className='text-right'>Mereka Hutang</div>,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            <Typography color='text.primary' className='font-medium'>
+              {formatCurrency(row.original.theyPayable)}
+            </Typography>
+          </div>
+        )
+      })
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, filteredData]
+  )
+
+  const table = useReactTable({
+    data: filteredData as VendorType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      globalFilter
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10
+      }
+    },
+    enableRowSelection: true,
+    globalFilterFn: fuzzyFilter,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues()
+  })
+
+  const getAvatar = (params: Pick<VendorType, 'photo' | 'name'>) => {
+    const { photo, name } = params
+
+    if (photo) {
+      return <CustomAvatar src={photo} size={34} />
+    } else {
+      return <CustomAvatar size={34}>{getInitials(name as string)}</CustomAvatar>
+    }
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader title='Filter' className='pbe-4' />
+        <TableFilters setData={setFilteredData} tableData={data} />
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <CustomTextField
+            select
+            value={table.getState().pagination.pageSize}
+            onChange={e => table.setPageSize(Number(e.target.value))}
+            className='max-sm:is-full sm:is-[70px]'
+          >
+            <MenuItem value='10'>10</MenuItem>
+            <MenuItem value='25'>25</MenuItem>
+            <MenuItem value='50'>50</MenuItem>
+          </CustomTextField>
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <DebouncedInput
+              value={globalFilter ?? ''}
+              onChange={value => setGlobalFilter(String(value))}
+              placeholder='Cari Vendor'
+              className='max-sm:is-full'
+            />
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              startIcon={<i className='tabler-plus' />}
+              onClick={() => setAddVendorOpen(!addVendorOpen)}
+              className='max-sm:is-full'
+            >
+              Tambah Vendor Baru
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {table.getFilteredRowModel().rows.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table
+                  .getRowModel()
+                  .rows.slice(0, table.getState().pagination.pageSize)
+                  .map(row => {
+                    return (
+                      <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                        {row.getVisibleCells().map(cell => (
+                          <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            )}
+          </table>
+        </div>
+        <TablePaginationComponent
+          pageIndex={table.getState().pagination.pageIndex}
+          pageSize={table.getState().pagination.pageSize}
+          totalCount={table.getFilteredRowModel().rows.length}
+          onPageChange={(_, page) => {
+            table.setPageIndex(page)
+          }}
+        />
+      </Card>
+      <AddVendorDrawer
+        open={addVendorOpen}
+        handleClose={() => setAddVendorOpen(!addVendorOpen)}
+        vendorData={data}
+        setData={setData}
+      />
+    </>
+  )
+}
+
+export default VendorListTable
diff --git a/src/views/apps/vendor/list/index.tsx b/src/views/apps/vendor/list/index.tsx
new file mode 100644
index 0000000..482bbf7
--- /dev/null
+++ b/src/views/apps/vendor/list/index.tsx
@@ -0,0 +1,24 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { VendorType } from '@/types/apps/vendorTypes'
+
+// Component Imports
+import VendorListTable from './VendorListTable'
+import VendorListCards from './VendorListCards'
+
+const VendorList = ({ vendorData }: { vendorData?: VendorType[] }) => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <VendorListCards />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <VendorListTable tableData={vendorData} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default VendorList

From 59f2d458548e8768443aeb73aefd16461db895a3 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 01:25:50 +0700
Subject: [PATCH 04/42] update add vendor

---
 .../apps/vendor/list/AddVendorDrawer.tsx      | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)

diff --git a/src/views/apps/vendor/list/AddVendorDrawer.tsx b/src/views/apps/vendor/list/AddVendorDrawer.tsx
index 5980159..42a1c3d 100644
--- a/src/views/apps/vendor/list/AddVendorDrawer.tsx
+++ b/src/views/apps/vendor/list/AddVendorDrawer.tsx
@@ -57,6 +57,7 @@ const AddVendorDrawer = (props: Props) => {
       nomorRekening: ''
     }
   ])
+  const [showPemetaanAkun, setShowPemetaanAkun] = useState(false)
 
   // Hooks
   const {
@@ -137,6 +138,7 @@ const AddVendorDrawer = (props: Props) => {
       }
     ])
     setShowMore(false)
+    setShowPemetaanAkun(false)
   }
 
   const handleReset = () => {
@@ -152,6 +154,7 @@ const AddVendorDrawer = (props: Props) => {
       }
     ])
     setShowMore(false)
+    setShowPemetaanAkun(false)
   }
 
   return (
@@ -531,6 +534,102 @@ const AddVendorDrawer = (props: Props) => {
                     </Typography>
                   </div>
 
+                  <div className='flex items-center gap-3 mt-2' onClick={() => setShowPemetaanAkun(!showPemetaanAkun)}>
+                    <i className={showPemetaanAkun ? 'tabler-minus text-blue-500' : 'tabler-plus text-blue-500'} />
+                    <Typography variant='body1' color='primary' className='cursor-pointer'>
+                      {showPemetaanAkun ? 'Sembunyikan pemetaan akun' : 'Tampilkan pemetaan akun'}
+                    </Typography>
+                  </div>
+
+                  {/* Konten Pemetaan Akun */}
+                  {showPemetaanAkun && (
+                    <div className='mt-6 p-4 border border-gray-200 rounded-lg'>
+                      {/* Akun Hutang */}
+                      <Grid container spacing={6} className='mb-4'>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Akun Hutang
+                          </Typography>
+                          <CustomTextField select fullWidth defaultValue='2-20100 Hutang Usaha'>
+                            <MenuItem value='2-20100 Hutang Usaha'>2-20100 Hutang Usaha</MenuItem>
+                            <MenuItem value='2-20200 Hutang Bank'>2-20200 Hutang Bank</MenuItem>
+                            <MenuItem value='2-20300 Hutang Lainnya'>2-20300 Hutang Lainnya</MenuItem>
+                          </CustomTextField>
+                        </Grid>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Maksimal Hutang
+                            <i className='tabler-help-circle text-gray-400 ml-1' />
+                          </Typography>
+                          <CustomTextField fullWidth type='number' defaultValue='0' placeholder='0' />
+                        </Grid>
+                      </Grid>
+
+                      {/* Akun Piutang */}
+                      <Grid container spacing={6} className='mb-4'>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Akun Piutang
+                          </Typography>
+                          <CustomTextField select fullWidth defaultValue='1-10100 Piutang Usaha'>
+                            <MenuItem value='1-10100 Piutang Usaha'>1-10100 Piutang Usaha</MenuItem>
+                            <MenuItem value='1-10200 Piutang Karyawan'>1-10200 Piutang Karyawan</MenuItem>
+                            <MenuItem value='1-10300 Piutang Lainnya'>1-10300 Piutang Lainnya</MenuItem>
+                          </CustomTextField>
+                        </Grid>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Maksimal Piutang
+                            <i className='tabler-help-circle text-gray-400 ml-1' />
+                          </Typography>
+                          <CustomTextField fullWidth type='number' defaultValue='0' placeholder='0' />
+                        </Grid>
+                      </Grid>
+
+                      {/* Kena Pajak */}
+                      <div className='mb-4'>
+                        <Typography variant='body2' className='mb-3 font-medium'>
+                          Kena pajak ?
+                        </Typography>
+                        <div className='flex items-center'>
+                          <input
+                            type='checkbox'
+                            className='toggle-switch'
+                            style={{
+                              appearance: 'none',
+                              width: '60px',
+                              height: '30px',
+                              backgroundColor: '#3b82f6',
+                              borderRadius: '15px',
+                              position: 'relative',
+                              cursor: 'pointer',
+                              outline: 'none'
+                            }}
+                          />
+                          <style>
+                            {`
+                              .toggle-switch::before {
+                                content: '';
+                                position: absolute;
+                                top: 3px;
+                                left: 3px;
+                                width: 24px;
+                                height: 24px;
+                                background-color: white;
+                                border-radius: 50%;
+                                transition: transform 0.3s ease;
+                                transform: translateX(0);
+                              }
+                              .toggle-switch:checked::before {
+                                transform: translateX(30px);
+                              }
+                            `}
+                          </style>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
                   <Grid container spacing={6} className='mt-4'>
                     <Grid size={6}>
                       <Typography variant='body2' className='mb-2'>

From dfa6b4be750735941b158a757002361ae6e3baf8 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 14:28:35 +0700
Subject: [PATCH 05/42] Vendor Detail

---
 .../(private)/apps/vendor/detail/page.tsx     |   7 +
 src/data/dummy/vendor.ts                      | 282 +++++++++++++-
 src/types/apps/vendorTypes.ts                 |  13 +
 src/views/apps/vendor/detail/index.tsx        |  20 +
 .../vendor-content/VendorMoneyInOutChart.tsx  | 157 ++++++++
 .../vendor-content/VendorSalesChart.tsx       | 144 +++++++
 .../detail/vendor-content/VendorStatistic.tsx |  63 ++++
 .../vendor/detail/vendor-content/index.tsx    |  21 ++
 .../vendor/detail/vendor-content/styles.css   |   7 +
 .../VendorDebsPayedTable.tsx                  | 334 ++++++++++++++++
 .../vendor-debs-payed-table/index.tsx         |  21 ++
 .../VendorReceivablesPaymentTable.tsx         | 327 ++++++++++++++++
 .../index.tsx                                 |  18 +
 .../VendorTransactionTable.tsx                | 355 ++++++++++++++++++
 .../vendor-transaction-table/index.tsx        |  18 +
 .../detail/vendor-overview/VendorDetails.tsx  | 134 +++++++
 .../vendor/detail/vendor-overview/index.tsx   |  17 +
 .../apps/vendor/list/VendorListTable.tsx      |   2 +-
 18 files changed, 1938 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx
 create mode 100644 src/views/apps/vendor/detail/index.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/VendorMoneyInOutChart.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/VendorSalesChart.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/VendorStatistic.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/index.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/styles.css
 create mode 100644 src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/VendorDebsPayedTable.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/index.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/VendorReceivablesPaymentTable.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/index.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/VendorTransactionTable.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/index.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-overview/VendorDetails.tsx
 create mode 100644 src/views/apps/vendor/detail/vendor-overview/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx
new file mode 100644
index 0000000..5069723
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/vendor/detail/page.tsx
@@ -0,0 +1,7 @@
+import VendorView from '@/views/apps/vendor/detail'
+
+const VendorViewPage = async () => {
+  return <VendorView />
+}
+
+export default VendorViewPage
diff --git a/src/data/dummy/vendor.ts b/src/data/dummy/vendor.ts
index d95ddcd..a984a99 100644
--- a/src/data/dummy/vendor.ts
+++ b/src/data/dummy/vendor.ts
@@ -1,4 +1,4 @@
-import { VendorType } from '@/types/apps/vendorTypes'
+import { VendorDebsPayedType, VendorTransactionType, VendorType } from '@/types/apps/vendorTypes'
 
 export const vendorDummyData: VendorType[] = [
   {
@@ -202,3 +202,283 @@ export const vendorDummyData: VendorType[] = [
     theyPayable: 23600000
   }
 ]
+
+// Dummy data untuk VendorDebsPayedType
+export const vendorDebsPayedData: VendorDebsPayedType[] = [
+  {
+    date: '2024-08-15',
+    transaction: 'Hutang ke PT Supplier Bahan Kimia',
+    reference: 'DEBT-001-2024',
+    total: 4500000
+  },
+  {
+    date: '2024-08-22',
+    transaction: 'Invoice Belum Dibayar #INV-2024-789',
+    reference: 'DEBT-002-2024',
+    total: 2750000
+  },
+  {
+    date: '2024-08-30',
+    transaction: 'Tagihan CV Mitra Sejahtera',
+    reference: 'DEBT-003-2024',
+    total: 1850000
+  },
+  {
+    date: '2024-09-05',
+    transaction: 'Hutang Pembelian Peralatan Kantor',
+    reference: 'DEBT-004-2024',
+    total: 3200000
+  },
+  {
+    date: '2024-09-08',
+    transaction: 'Tagihan Listrik & Utilities Bulan Lalu',
+    reference: 'DEBT-005-2024',
+    total: 950000
+  },
+  {
+    date: '2024-09-10',
+    transaction: 'Hutang ke PT Konstruksi Prima',
+    reference: 'DEBT-006-2024',
+    total: 12500000
+  },
+  {
+    date: '2024-09-12',
+    transaction: 'Invoice Jasa Konsultasi IT',
+    reference: 'DEBT-007-2024',
+    total: 6800000
+  },
+  {
+    date: '2024-09-15',
+    transaction: 'Tagihan Bahan Baku Produksi',
+    reference: 'DEBT-008-2024',
+    total: 8900000
+  },
+  {
+    date: '2024-09-18',
+    transaction: 'Hutang ke Supplier Packaging',
+    reference: 'DEBT-009-2024',
+    total: 2100000
+  },
+  {
+    date: '2024-09-20',
+    transaction: 'Invoice Maintenance Equipment',
+    reference: 'DEBT-010-2024',
+    total: 4300000
+  },
+  {
+    date: '2024-09-22',
+    transaction: 'Tagihan Jasa Logistik & Pengiriman',
+    reference: 'DEBT-011-2024',
+    total: 1650000
+  },
+  {
+    date: '2024-09-25',
+    transaction: 'Hutang Pembelian Software License',
+    reference: 'DEBT-012-2024',
+    total: 5400000
+  },
+  {
+    date: '2024-09-28',
+    transaction: 'Invoice Jasa Cleaning Service',
+    reference: 'DEBT-013-2024',
+    total: 750000
+  },
+  {
+    date: '2024-09-30',
+    transaction: 'Tagihan Sewa Gedung Bulan September',
+    reference: 'DEBT-014-2024',
+    total: 15000000
+  },
+  {
+    date: '2024-10-01',
+    transaction: 'Hutang ke CV Digital Marketing',
+    reference: 'DEBT-015-2024',
+    total: 3800000
+  }
+]
+
+export const vendorReceivablesData: VendorDebsPayedType[] = [
+  {
+    date: '2024-08-20',
+    transaction: 'Piutang dari PT Mitra Sejahtera Abadi',
+    reference: 'RCV-001-2024',
+    total: 5500000
+  },
+  {
+    date: '2024-08-25',
+    transaction: 'Invoice Jual Produk #INV-2024-456',
+    reference: 'RCV-002-2024',
+    total: 3250000
+  },
+  {
+    date: '2024-09-02',
+    transaction: 'Tagihan ke CV Berkah Mandiri',
+    reference: 'RCV-003-2024',
+    total: 2800000
+  },
+  {
+    date: '2024-09-05',
+    transaction: 'Piutang Penjualan Barang Jadi',
+    reference: 'RCV-004-2024',
+    total: 4200000
+  },
+  {
+    date: '2024-09-08',
+    transaction: 'Invoice Jasa Konsultasi',
+    reference: 'RCV-005-2024',
+    total: 1750000
+  },
+  {
+    date: '2024-09-10',
+    transaction: 'Tagihan ke PT Digital Solutions',
+    reference: 'RCV-006-2024',
+    total: 8900000
+  },
+  {
+    date: '2024-09-12',
+    transaction: 'Piutang dari Toko Elektronik Prima',
+    reference: 'RCV-007-2024',
+    total: 2450000
+  },
+  {
+    date: '2024-09-15',
+    transaction: 'Invoice Penjualan Software License',
+    reference: 'RCV-008-2024',
+    total: 12500000
+  },
+  {
+    date: '2024-09-18',
+    transaction: 'Tagihan Jasa Maintenance Equipment',
+    reference: 'RCV-009-2024',
+    total: 3600000
+  },
+  {
+    date: '2024-09-20',
+    transaction: 'Piutang dari CV Kreatif Media',
+    reference: 'RCV-010-2024',
+    total: 1950000
+  },
+  {
+    date: '2024-09-22',
+    transaction: 'Invoice Jual Material Konstruksi',
+    reference: 'RCV-011-2024',
+    total: 7200000
+  },
+  {
+    date: '2024-09-25',
+    transaction: 'Tagihan Jasa Pelatihan IT',
+    reference: 'RCV-012-2024',
+    total: 4800000
+  },
+  {
+    date: '2024-09-28',
+    transaction: 'Piutang dari PT Logistik Nusantara',
+    reference: 'RCV-013-2024',
+    total: 5300000
+  },
+  {
+    date: '2024-09-30',
+    transaction: 'Invoice Penjualan Peralatan Kantor',
+    reference: 'RCV-014-2024',
+    total: 2100000
+  },
+  {
+    date: '2024-10-02',
+    transaction: 'Tagihan ke Supplier Packaging',
+    reference: 'RCV-015-2024',
+    total: 3850000
+  }
+]
+
+export const vendorTransactionData: VendorTransactionType[] = [
+  {
+    date: '2024-08-15',
+    transaction: 'Pembelian Bahan Baku Produksi',
+    none: 'PO-001-2024',
+    total: 4500000
+  },
+  {
+    date: '2024-08-18',
+    transaction: 'Pembayaran Invoice Supplier',
+    none: 'PAY-001-2024',
+    total: 2750000
+  },
+  {
+    date: '2024-08-22',
+    transaction: 'Penjualan Produk ke Klien',
+    none: 'INV-001-2024',
+    total: 6200000
+  },
+  {
+    date: '2024-08-25',
+    transaction: 'Pembelian Peralatan Kantor',
+    none: 'PO-002-2024',
+    total: 1850000
+  },
+  {
+    date: '2024-08-28',
+    transaction: 'Pembayaran Jasa Konsultasi',
+    none: 'PAY-002-2024',
+    total: 3200000
+  },
+  {
+    date: '2024-09-02',
+    transaction: 'Penjualan Software License',
+    none: 'INV-002-2024',
+    total: 8900000
+  },
+  {
+    date: '2024-09-05',
+    transaction: 'Pembelian Material Konstruksi',
+    none: 'PO-003-2024',
+    total: 12500000
+  },
+  {
+    date: '2024-09-08',
+    transaction: 'Pembayaran Maintenance Equipment',
+    none: 'PAY-003-2024',
+    total: 2450000
+  },
+  {
+    date: '2024-09-12',
+    transaction: 'Penjualan Jasa Pelatihan',
+    none: 'INV-003-2024',
+    total: 4800000
+  },
+  {
+    date: '2024-09-15',
+    transaction: 'Pembelian Bahan Kimia',
+    none: 'PO-004-2024',
+    total: 3600000
+  },
+  {
+    date: '2024-09-18',
+    transaction: 'Pembayaran Sewa Gedung',
+    none: 'PAY-004-2024',
+    total: 15000000
+  },
+  {
+    date: '2024-09-22',
+    transaction: 'Penjualan Peralatan Elektronik',
+    none: 'INV-004-2024',
+    total: 7200000
+  },
+  {
+    date: '2024-09-25',
+    transaction: 'Pembelian Packaging Materials',
+    none: 'PO-005-2024',
+    total: 1950000
+  },
+  {
+    date: '2024-09-28',
+    transaction: 'Pembayaran Jasa Logistik',
+    none: 'PAY-005-2024',
+    total: 2100000
+  },
+  {
+    date: '2024-10-01',
+    transaction: 'Penjualan Produk Digital',
+    none: 'INV-005-2024',
+    total: 5300000
+  }
+]
diff --git a/src/types/apps/vendorTypes.ts b/src/types/apps/vendorTypes.ts
index 33de981..bc3b109 100644
--- a/src/types/apps/vendorTypes.ts
+++ b/src/types/apps/vendorTypes.ts
@@ -8,3 +8,16 @@ export type VendorType = {
   youPayable: number
   theyPayable: number
 }
+
+export type VendorDebsPayedType = {
+  date: string
+  transaction: string
+  reference: string
+  total: number
+}
+export type VendorTransactionType = {
+  date: string
+  transaction: string
+  none: string
+  total: number
+}
diff --git a/src/views/apps/vendor/detail/index.tsx b/src/views/apps/vendor/detail/index.tsx
new file mode 100644
index 0000000..3869930
--- /dev/null
+++ b/src/views/apps/vendor/detail/index.tsx
@@ -0,0 +1,20 @@
+import VendorOverview from '@/views/apps/vendor/detail/vendor-overview'
+import Grid from '@mui/material/Grid2'
+import VendorContent from './vendor-content'
+
+const VendorView = async () => {
+  // Vars
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+        <VendorOverview />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+        <VendorContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default VendorView
diff --git a/src/views/apps/vendor/detail/vendor-content/VendorMoneyInOutChart.tsx b/src/views/apps/vendor/detail/vendor-content/VendorMoneyInOutChart.tsx
new file mode 100644
index 0000000..c521fd5
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/VendorMoneyInOutChart.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const colors = {
+  uangMasuk: '#28C76F',
+  uangKeluar: '#EA5455'
+}
+
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Uang Masuk',
+    type: 'column',
+    data: [850, 920, 780, 1150, 980, 1250, 1080, 950, 1300, 1100, 890, 1400]
+  },
+  {
+    name: 'Uang Keluar',
+    type: 'column',
+    data: [650, 720, 580, 850, 780, 950, 880, 750, 1000, 900, 690, 1100]
+  }
+]
+
+const VendorMoneyInOutChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      stacked: false,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID') + '.000'
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '60%',
+        borderRadius: 4
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 5,
+      max: 1500,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(val: number) {
+          return 'Rp ' + val + 'rb'
+        }
+      }
+    },
+    legend: {
+      markers: {
+        width: 8,
+        height: 8,
+        offsetX: -3,
+        radius: 12
+      },
+      height: 33,
+      offsetY: 10,
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      },
+      fontSize: '13px',
+      fontFamily: 'Public Sans',
+      fontWeight: 400,
+      labels: {
+        colors: bodyColor,
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6
+    },
+    colors: [colors.uangMasuk, colors.uangKeluar],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader title='Keluar Masuk Uang' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent>
+        <AppReactApexCharts
+          id='keluar-masuk-uang'
+          type='bar'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default VendorMoneyInOutChart
diff --git a/src/views/apps/vendor/detail/vendor-content/VendorSalesChart.tsx b/src/views/apps/vendor/detail/vendor-content/VendorSalesChart.tsx
new file mode 100644
index 0000000..6d8f3aa
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/VendorSalesChart.tsx
@@ -0,0 +1,144 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const colors = {
+  penjualan: '#7367F0'
+}
+
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Penjualan',
+    type: 'column',
+    data: [1250, 1420, 980, 1650, 1380, 1750, 1580, 1350, 1900, 1600, 1290, 2100]
+  }
+]
+
+const VendorSalesChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      stacked: false,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID') + '.000'
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '50%',
+        borderRadius: 4
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 5,
+      max: 2200,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(val: number) {
+          return 'Rp ' + val + 'rb'
+        }
+      }
+    },
+    legend: {
+      markers: {
+        width: 8,
+        height: 8,
+        offsetX: -3,
+        radius: 12
+      },
+      height: 33,
+      offsetY: 10,
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      },
+      fontSize: '13px',
+      fontFamily: 'Public Sans',
+      fontWeight: 400,
+      labels: {
+        colors: bodyColor,
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6
+    },
+    colors: [colors.penjualan],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader title='Penjualan' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent>
+        <AppReactApexCharts id='penjualan' type='bar' height={360} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default VendorSalesChart
diff --git a/src/views/apps/vendor/detail/vendor-content/VendorStatistic.tsx b/src/views/apps/vendor/detail/vendor-content/VendorStatistic.tsx
new file mode 100644
index 0000000..790430f
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/VendorStatistic.tsx
@@ -0,0 +1,63 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsHorizontalWithAvatarProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatsHorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'
+
+const data: CardStatsHorizontalWithAvatarProps[] = [
+  {
+    stats: 'Rp 542.340.000',
+    title: 'Hutang Anda',
+    avatarIcon: 'tabler-credit-card',
+    avatarColor: 'error'
+  },
+  {
+    stats: 'Rp 387.250.000',
+    title: 'Piutang Anda',
+    avatarIcon: 'tabler-wallet',
+    avatarColor: 'success'
+  },
+  {
+    stats: 'Rp 156.800.000',
+    title: 'Pembayaran Diterima',
+    avatarIcon: 'tabler-arrow-down-circle',
+    avatarColor: 'success'
+  },
+  {
+    stats: 'Rp 89.450.000',
+    title: 'Pembayaran Dikirim',
+    avatarIcon: 'tabler-arrow-up-circle',
+    avatarColor: 'warning'
+  },
+  {
+    stats: 'Rp 67.890.000',
+    title: 'Hutang Jatuh Tempo',
+    avatarIcon: 'tabler-clock-exclamation',
+    avatarColor: 'error'
+  },
+  {
+    stats: 'Rp 134.560.000',
+    title: 'Piutang Tertunda',
+    avatarIcon: 'tabler-clock-dollar',
+    avatarColor: 'info'
+  }
+]
+
+const VendorStatistic = () => {
+  return (
+    data && (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
+            <CardStatsHorizontalWithAvatar {...item} avatarSkin='light' />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  )
+}
+
+export default VendorStatistic
diff --git a/src/views/apps/vendor/detail/vendor-content/index.tsx b/src/views/apps/vendor/detail/vendor-content/index.tsx
new file mode 100644
index 0000000..c57eeb7
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/index.tsx
@@ -0,0 +1,21 @@
+import VendorDebsPayed from './vendor-debs-payed-table'
+import VendorReceivablesPayment from './vendor-receivables-payment-table'
+import VendorTransaction from './vendor-transaction-table'
+import VendorMoneyInOutChart from './VendorMoneyInOutChart'
+import VendorSalesChart from './VendorSalesChart'
+import VendorStatistic from './VendorStatistic'
+
+const VendorContent = () => {
+  return (
+    <>
+      <VendorStatistic />
+      <VendorMoneyInOutChart />
+      <VendorSalesChart />
+      <VendorReceivablesPayment />
+      <VendorDebsPayed />
+      <VendorTransaction />
+    </>
+  )
+}
+
+export default VendorContent
diff --git a/src/views/apps/vendor/detail/vendor-content/styles.css b/src/views/apps/vendor/detail/vendor-content/styles.css
new file mode 100644
index 0000000..6d24cd4
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/styles.css
@@ -0,0 +1,7 @@
+#keluar-masuk-uang .apexcharts-legend .apexcharts-legend-series {
+  border: 1px solid var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  block-size: 83%;
+  padding-block: 4px;
+  padding-inline: 16px;
+}
diff --git a/src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/VendorDebsPayedTable.tsx b/src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/VendorDebsPayedTable.tsx
new file mode 100644
index 0000000..2bb0986
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/VendorDebsPayedTable.tsx
@@ -0,0 +1,334 @@
+'use client'
+
+// React Imports
+import { useEffect, useState, useMemo } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Checkbox from '@mui/material/Checkbox'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+import TablePagination from '@mui/material/TablePagination'
+import type { TextFieldProps } from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFacetedMinMaxValues,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/react-table'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+import TablePaginationComponent from '@components/TablePaginationComponent'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Util Imports
+import { getLocalizedUrl } from '@/utils/i18n'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { formatCurrency } from '@/utils/transform'
+
+// Type Definition
+export type VendorDebsPayedType = {
+  date: string
+  transaction: string
+  reference: string
+  total: number
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type VendorDebsPayedTypeWithAction = VendorDebsPayedType & {
+  action?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<VendorDebsPayedTypeWithAction>()
+
+const VendorDebsPayedTable = ({ tableData }: { tableData?: VendorDebsPayedType[] }) => {
+  // States
+  const [rowSelection, setRowSelection] = useState({})
+  const [data, setData] = useState(...[tableData])
+  const [filteredData, setFilteredData] = useState(data)
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  const columns = useMemo<ColumnDef<VendorDebsPayedTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography color='text.primary'>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('transaction', {
+        header: 'Keterangan Transaksi',
+        cell: ({ row }) => (
+          <div className='flex flex-col max-w-xs'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.transaction}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Chip label={row.original.reference} color='primary' variant='outlined' size='small' />
+      }),
+      columnHelper.accessor('total', {
+        header: () => <div className='text-right'>Jumlah Hutang</div>,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            <Typography color='error' className='font-medium'>
+              {formatCurrency(row.original.total)}
+            </Typography>
+          </div>
+        )
+      })
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, filteredData]
+  )
+
+  const table = useReactTable({
+    data: filteredData as VendorDebsPayedType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      globalFilter
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10
+      }
+    },
+    enableRowSelection: true,
+    globalFilterFn: fuzzyFilter,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues()
+  })
+
+  // Calculate total debt
+  const totalDebt = useMemo(() => {
+    return filteredData?.reduce((sum, item) => sum + item.total, 0) || 0
+  }, [filteredData])
+
+  return (
+    <>
+      <Card>
+        <CardHeader title='Hutang yang Perlu Anda Bayar' className='pbe-4' />
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <CustomTextField
+            select
+            value={table.getState().pagination.pageSize}
+            onChange={e => table.setPageSize(Number(e.target.value))}
+            className='max-sm:is-full sm:is-[70px]'
+          >
+            <MenuItem value='10'>10</MenuItem>
+            <MenuItem value='25'>25</MenuItem>
+            <MenuItem value='50'>50</MenuItem>
+          </CustomTextField>
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <DebouncedInput
+              value={globalFilter ?? ''}
+              onChange={value => setGlobalFilter(String(value))}
+              placeholder='Cari Hutang'
+              className='max-sm:is-full'
+            />
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {table.getFilteredRowModel().rows.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    <div className='flex flex-col items-center gap-2 py-8'>
+                      <Icon className='tabler-database-off text-4xl text-gray-400' />
+                      <Typography variant='h6' color='text.secondary'>
+                        Tidak ada hutang ditemukan
+                      </Typography>
+                      <Typography variant='body2' color='text.disabled'>
+                        Cobalah mengubah filter pencarian
+                      </Typography>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table
+                  .getRowModel()
+                  .rows.slice(0, table.getState().pagination.pageSize)
+                  .map(row => {
+                    return (
+                      <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                        {row.getVisibleCells().map(cell => (
+                          <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            )}
+          </table>
+        </div>
+        <TablePaginationComponent
+          pageIndex={table.getState().pagination.pageIndex}
+          pageSize={table.getState().pagination.pageSize}
+          totalCount={table.getFilteredRowModel().rows.length}
+          onPageChange={(_, page) => {
+            table.setPageIndex(page)
+          }}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default VendorDebsPayedTable
diff --git a/src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/index.tsx b/src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/index.tsx
new file mode 100644
index 0000000..35c3ce0
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/vendor-debs-payed-table/index.tsx
@@ -0,0 +1,21 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { VendorType } from '@/types/apps/vendorTypes'
+
+// Component Imports
+import VendorDebsPayedTable from './VendorDebsPayedTable'
+import { vendorDebsPayedData } from '@/data/dummy/vendor'
+
+const VendorDebsPayed = () => {
+  return (
+    <Grid container spacing={6} className='mt-5'>
+      <Grid size={{ xs: 12 }}>
+        <VendorDebsPayedTable tableData={vendorDebsPayedData} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default VendorDebsPayed
diff --git a/src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/VendorReceivablesPaymentTable.tsx b/src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/VendorReceivablesPaymentTable.tsx
new file mode 100644
index 0000000..5ddc36a
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/VendorReceivablesPaymentTable.tsx
@@ -0,0 +1,327 @@
+'use client'
+
+// React Imports
+import { useEffect, useState, useMemo } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Checkbox from '@mui/material/Checkbox'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+import TablePagination from '@mui/material/TablePagination'
+import type { TextFieldProps } from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFacetedMinMaxValues,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/react-table'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+import TablePaginationComponent from '@components/TablePaginationComponent'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Util Imports
+import { getLocalizedUrl } from '@/utils/i18n'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { formatCurrency } from '@/utils/transform'
+import { VendorDebsPayedType } from '../vendor-debs-payed-table/VendorDebsPayedTable'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type VendorDebsPayedTypeWithAction = VendorDebsPayedType & {
+  action?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<VendorDebsPayedTypeWithAction>()
+
+const VendorReceivablesPaymentTable = ({ tableData }: { tableData?: VendorDebsPayedType[] }) => {
+  // States
+  const [rowSelection, setRowSelection] = useState({})
+  const [data, setData] = useState(...[tableData])
+  const [filteredData, setFilteredData] = useState(data)
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  const columns = useMemo<ColumnDef<VendorDebsPayedTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography color='text.primary'>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('transaction', {
+        header: 'Keterangan Transaksi',
+        cell: ({ row }) => (
+          <div className='flex flex-col max-w-xs'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.transaction}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Chip label={row.original.reference} color='primary' variant='outlined' size='small' />
+      }),
+      columnHelper.accessor('total', {
+        header: () => <div className='text-right'>Jumlah Hutang</div>,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            <Typography color='error' className='font-medium'>
+              {formatCurrency(row.original.total)}
+            </Typography>
+          </div>
+        )
+      })
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, filteredData]
+  )
+
+  const table = useReactTable({
+    data: filteredData as VendorDebsPayedType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      globalFilter
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10
+      }
+    },
+    enableRowSelection: true,
+    globalFilterFn: fuzzyFilter,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues()
+  })
+
+  // Calculate total debt
+  const totalDebt = useMemo(() => {
+    return filteredData?.reduce((sum, item) => sum + item.total, 0) || 0
+  }, [filteredData])
+
+  return (
+    <>
+      <Card>
+        <CardHeader title='Piutang menunggu pembayaran' className='pbe-4' />
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <CustomTextField
+            select
+            value={table.getState().pagination.pageSize}
+            onChange={e => table.setPageSize(Number(e.target.value))}
+            className='max-sm:is-full sm:is-[70px]'
+          >
+            <MenuItem value='10'>10</MenuItem>
+            <MenuItem value='25'>25</MenuItem>
+            <MenuItem value='50'>50</MenuItem>
+          </CustomTextField>
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <DebouncedInput
+              value={globalFilter ?? ''}
+              onChange={value => setGlobalFilter(String(value))}
+              placeholder='Cari'
+              className='max-sm:is-full'
+            />
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {table.getFilteredRowModel().rows.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    <div className='flex flex-col items-center gap-2 py-8'>
+                      <Icon className='tabler-database-off text-4xl text-gray-400' />
+                      <Typography variant='h6' color='text.secondary'>
+                        Tidak ada hutang ditemukan
+                      </Typography>
+                      <Typography variant='body2' color='text.disabled'>
+                        Cobalah mengubah filter pencarian
+                      </Typography>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table
+                  .getRowModel()
+                  .rows.slice(0, table.getState().pagination.pageSize)
+                  .map(row => {
+                    return (
+                      <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                        {row.getVisibleCells().map(cell => (
+                          <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            )}
+          </table>
+        </div>
+        <TablePaginationComponent
+          pageIndex={table.getState().pagination.pageIndex}
+          pageSize={table.getState().pagination.pageSize}
+          totalCount={table.getFilteredRowModel().rows.length}
+          onPageChange={(_, page) => {
+            table.setPageIndex(page)
+          }}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default VendorReceivablesPaymentTable
diff --git a/src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/index.tsx b/src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/index.tsx
new file mode 100644
index 0000000..fbf21df
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/vendor-receivables-payment-table/index.tsx
@@ -0,0 +1,18 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import VendorReceivablesPaymentTable from './VendorReceivablesPaymentTable'
+import { vendorReceivablesData } from '@/data/dummy/vendor'
+
+const VendorReceivablesPayment = () => {
+  return (
+    <Grid container spacing={6} className='mt-5'>
+      <Grid size={{ xs: 12 }}>
+        <VendorReceivablesPaymentTable tableData={vendorReceivablesData} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default VendorReceivablesPayment
diff --git a/src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/VendorTransactionTable.tsx b/src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/VendorTransactionTable.tsx
new file mode 100644
index 0000000..e9895d1
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/VendorTransactionTable.tsx
@@ -0,0 +1,355 @@
+'use client'
+
+// React Imports
+import { useEffect, useState, useMemo } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Checkbox from '@mui/material/Checkbox'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+import TablePagination from '@mui/material/TablePagination'
+import type { TextFieldProps } from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFacetedMinMaxValues,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/react-table'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+import TablePaginationComponent from '@components/TablePaginationComponent'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Util Imports
+import { getLocalizedUrl } from '@/utils/i18n'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { formatCurrency } from '@/utils/transform'
+
+// Type Definition
+export type VendorTransactionType = {
+  date: string
+  transaction: string
+  none: string
+  total: number
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type VendorTransactionTypeWithAction = VendorTransactionType & {
+  action?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Format date helper
+const formatDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleDateString('id-ID', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<VendorTransactionTypeWithAction>()
+
+const VendorTransactionTable = ({ tableData }: { tableData?: VendorTransactionType[] }) => {
+  // States
+  const [rowSelection, setRowSelection] = useState({})
+  const [data, setData] = useState(...[tableData])
+  const [filteredData, setFilteredData] = useState(data)
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  const columns = useMemo<ColumnDef<VendorTransactionTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography color='text.primary'>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('transaction', {
+        header: 'Keterangan Transaksi',
+        cell: ({ row }) => (
+          <div className='flex flex-col max-w-xs'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.transaction}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('none', {
+        header: 'Referensi',
+        cell: ({ row }) => <Chip label={row.original.none} color='primary' variant='outlined' size='small' />
+      }),
+      columnHelper.accessor('total', {
+        header: () => <div className='text-right'>Jumlah</div>,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            <Typography color='text.primary' className='font-medium'>
+              {formatCurrency(row.original.total)}
+            </Typography>
+          </div>
+        )
+      })
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, filteredData]
+  )
+
+  const table = useReactTable({
+    data: filteredData as VendorTransactionType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      globalFilter
+    },
+    initialState: {
+      pagination: {
+        pageSize: 10
+      }
+    },
+    enableRowSelection: true,
+    globalFilterFn: fuzzyFilter,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues()
+  })
+
+  // Calculate total amount
+  const totalAmount = useMemo(() => {
+    return filteredData?.reduce((sum, item) => sum + item.total, 0) || 0
+  }, [filteredData])
+
+  return (
+    <>
+      <Card>
+        <CardHeader
+          title='Riwayat Transaksi Vendor'
+          className='pbe-4'
+          action={
+            <Chip
+              label={`Total: ${formatCurrency(totalAmount)}`}
+              color='primary'
+              variant='filled'
+              size='medium'
+              className='font-semibold'
+            />
+          }
+        />
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <CustomTextField
+            select
+            value={table.getState().pagination.pageSize}
+            onChange={e => table.setPageSize(Number(e.target.value))}
+            className='max-sm:is-full sm:is-[70px]'
+          >
+            <MenuItem value='10'>10</MenuItem>
+            <MenuItem value='25'>25</MenuItem>
+            <MenuItem value='50'>50</MenuItem>
+          </CustomTextField>
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <DebouncedInput
+              value={globalFilter ?? ''}
+              onChange={value => setGlobalFilter(String(value))}
+              placeholder='Cari Transaksi'
+              className='max-sm:is-full'
+            />
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {table.getFilteredRowModel().rows.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    <div className='flex flex-col items-center gap-2 py-8'>
+                      <Icon className='tabler-database-off text-4xl text-gray-400' />
+                      <Typography variant='h6' color='text.secondary'>
+                        Tidak ada transaksi ditemukan
+                      </Typography>
+                      <Typography variant='body2' color='text.disabled'>
+                        Cobalah mengubah filter pencarian
+                      </Typography>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table
+                  .getRowModel()
+                  .rows.slice(0, table.getState().pagination.pageSize)
+                  .map(row => {
+                    return (
+                      <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                        {row.getVisibleCells().map(cell => (
+                          <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            )}
+          </table>
+        </div>
+        <TablePaginationComponent
+          pageIndex={table.getState().pagination.pageIndex}
+          pageSize={table.getState().pagination.pageSize}
+          totalCount={table.getFilteredRowModel().rows.length}
+          onPageChange={(_, page) => {
+            table.setPageIndex(page)
+          }}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default VendorTransactionTable
diff --git a/src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/index.tsx b/src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/index.tsx
new file mode 100644
index 0000000..e492e2a
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-content/vendor-transaction-table/index.tsx
@@ -0,0 +1,18 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import { vendorTransactionData } from '@/data/dummy/vendor'
+import VendorTransactionTable from './VendorTransactionTable'
+
+const VendorTransaction = () => {
+  return (
+    <Grid container spacing={6} className='mt-5'>
+      <Grid size={{ xs: 12 }}>
+        <VendorTransactionTable tableData={vendorTransactionData} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default VendorTransaction
diff --git a/src/views/apps/vendor/detail/vendor-overview/VendorDetails.tsx b/src/views/apps/vendor/detail/vendor-overview/VendorDetails.tsx
new file mode 100644
index 0000000..f0f4615
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-overview/VendorDetails.tsx
@@ -0,0 +1,134 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+import Button from '@mui/material/Button'
+import type { ButtonProps } from '@mui/material/Button'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+
+// Component Imports
+import EditUserInfo from '@components/dialogs/edit-user-info'
+import ConfirmationDialog from '@components/dialogs/confirmation-dialog'
+import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Vars
+const userData = {
+  firstName: 'Wadi Adika Adrian',
+  lastName: 'Firgantoro',
+  userName: '@wadiAdika',
+  perusahaan: 'Yayasan Pertiwi Tb',
+  email: 'labuh87@napitupu',
+  status: 'active',
+  role: 'Vendor',
+  telepon: '622301190560',
+  alamatPenagihan: 'Gg. Sentot Alibasa 381, Cimahi 66726 Sulbar',
+  akunHutang: '2-20100 Hutang U',
+  akunPiutang: '',
+  kenaPajak: 'Kena Pajak'
+}
+
+const VendorDetails = () => {
+  // Vars
+  const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
+    children,
+    color,
+    variant
+  })
+
+  return (
+    <>
+      <Card>
+        <CardContent className='flex flex-col pbs-12 gap-6'>
+          <div className='flex flex-col gap-6'>
+            <div className='flex items-center justify-center flex-col gap-4'>
+              <div className='flex flex-col items-center gap-4'>
+                <CustomAvatar alt='user-profile' src='/images/avatars/1.png' variant='rounded' size={120} />
+                <Typography variant='h5'>{`${userData.firstName} ${userData.lastName}`}</Typography>
+              </div>
+              <Chip label='Vendor' color='primary' size='small' variant='tonal' />
+            </div>
+          </div>
+
+          {/* Detail Kontak Section */}
+          <div>
+            <Typography variant='h5'>Detail Kontak</Typography>
+            <Divider className='mlb-4' />
+            <div className='flex flex-col gap-2'>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Nama:
+                </Typography>
+                <Typography>{`${userData.firstName} ${userData.lastName}`}</Typography>
+              </div>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Perusahaan:
+                </Typography>
+                <Typography>{userData.perusahaan}</Typography>
+              </div>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Email:
+                </Typography>
+                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
+                  {userData.email}
+                </Typography>
+              </div>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Telepon:
+                </Typography>
+                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
+                  {userData.telepon}
+                </Typography>
+              </div>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Alamat Penagihan:
+                </Typography>
+                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
+                  {userData.alamatPenagihan}
+                </Typography>
+              </div>
+            </div>
+          </div>
+
+          {/* Pemetaan Akun Section */}
+          <div>
+            <Typography variant='h5'>Pemetaan Akun</Typography>
+            <Divider className='mlb-4' />
+            <div className='flex flex-col gap-2'>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Akun Hutang:
+                </Typography>
+                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
+                  {userData.akunHutang}
+                </Typography>
+              </div>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Akun Piutang:
+                </Typography>
+                <Typography color='text.secondary'>{userData.akunPiutang || '-'}</Typography>
+              </div>
+              <div className='flex items-center flex-wrap gap-x-1.5'>
+                <Typography className='font-medium' color='text.primary'>
+                  Kena Pajak:
+                </Typography>
+                <Typography color='text.primary'>{userData.kenaPajak}</Typography>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}
+
+export default VendorDetails
diff --git a/src/views/apps/vendor/detail/vendor-overview/index.tsx b/src/views/apps/vendor/detail/vendor-overview/index.tsx
new file mode 100644
index 0000000..f59240e
--- /dev/null
+++ b/src/views/apps/vendor/detail/vendor-overview/index.tsx
@@ -0,0 +1,17 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import VendorDetails from './VendorDetails'
+
+const VendorOverview = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <VendorDetails />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default VendorOverview
diff --git a/src/views/apps/vendor/list/VendorListTable.tsx b/src/views/apps/vendor/list/VendorListTable.tsx
index 284b160..754d059 100644
--- a/src/views/apps/vendor/list/VendorListTable.tsx
+++ b/src/views/apps/vendor/list/VendorListTable.tsx
@@ -161,7 +161,7 @@ const VendorListTable = ({ tableData }: { tableData?: VendorType[] }) => {
           <div className='flex items-center gap-4'>
             {getAvatar({ photo: row.original.photo, name: row.original.name })}
             <div className='flex flex-col'>
-              <Link href={getLocalizedUrl(`/apps/vendor/view/${row.original.id}`, locale as Locale)}>
+              <Link href={getLocalizedUrl(`/apps/vendor/detail`, locale as Locale)}>
                 <Typography color='primary' className='font-medium cursor-pointer hover:underline'>
                   {row.original.name}
                 </Typography>

From 5dc62b83907dcc715fb46ba581ac7135891218ce Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 15:42:05 +0700
Subject: [PATCH 06/42] Sales Overview Page

---
 .../(private)/apps/sales/overview/page.tsx    |  86 +++++++
 .../layout/vertical/VerticalMenu.tsx          |   4 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 .../overview-left/SalesCustomerSalesChart.tsx | 187 +++++++++++++++
 .../SalesPaymentRatioGaugeChart.tsx           | 104 +++++++++
 .../overview-left/SalesProductChart.tsx       | 218 ++++++++++++++++++
 .../sales/overview/overview-left/index.tsx    |  15 ++
 .../overview-right/SalesBillPaymentChart.tsx  | 157 +++++++++++++
 .../overview-right/SalesOverviewCards.tsx     |  62 +++++
 .../SalesPaymentReceivedChart.tsx             | 152 ++++++++++++
 .../overview-right/SalesPerPersonChart.tsx    | 174 ++++++++++++++
 .../sales/overview/overview-right/index.tsx   |  17 ++
 .../sales/overview/overview-right/styles.css  |  15 ++
 14 files changed, 1195 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx
 create mode 100644 src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx
 create mode 100644 src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx
 create mode 100644 src/views/apps/sales/overview/overview-left/SalesProductChart.tsx
 create mode 100644 src/views/apps/sales/overview/overview-left/index.tsx
 create mode 100644 src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx
 create mode 100644 src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx
 create mode 100644 src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx
 create mode 100644 src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx
 create mode 100644 src/views/apps/sales/overview/overview-right/index.tsx
 create mode 100644 src/views/apps/sales/overview/overview-right/styles.css

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx
new file mode 100644
index 0000000..dcdbea9
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+
+import { TextField, Typography, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
+import SalesOverviewRight from '@/views/apps/sales/overview/overview-right'
+import SalesOverviewLeft from '@/views/apps/sales/overview/overview-left'
+
+const SalesOverviewPage = () => {
+  const theme = useTheme()
+
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const [filter, setFilter] = useState({
+    date_from: formatDateDDMMYYYY(monthAgo),
+    date_to: formatDateDDMMYYYY(today)
+  })
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <div className='flex gap-4 items-center justify-between'>
+            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+              Orders Analysis Dashboard
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={formatForInputDate(today || new Date())}
+                onChange={e => {
+                  setFilter({
+                    ...filter,
+                    date_from: formatDateDDMMYYYY(new Date(e.target.value))
+                  })
+                }}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+              <Typography>-</Typography>
+              <TextField
+                type='date'
+                value={today}
+                onChange={e => {}}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+      <Grid container spacing={6} className='mt-5'>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <SalesOverviewRight />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <SalesOverviewLeft />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default SalesOverviewPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 648248d..59a197e 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -91,6 +91,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
+          <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-user' />}>
+            <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
+            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
+          </SubMenu>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 9904156..30b4549 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -112,6 +112,7 @@
     "menuLevel3": "Menu Level 3",
     "disabledMenu": "Disabled Menu",
     "dailyReport": "Daily Report",
-    "vendor": "Vendor"
+    "vendor": "Vendor",
+    "sales": "Sales"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index af683c1..6dd0497 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -112,6 +112,7 @@
         "menuLevel3": "Level Menu 3",
         "disabledMenu": "Menu Nonaktif",
         "dailyReport": "Laporan Harian",
-        "vendor": "Vendor"
+        "vendor": "Vendor",
+        "sales": "Penjualan"
     }
 }
diff --git a/src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx b/src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx
new file mode 100644
index 0000000..0b51a29
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-left/SalesCustomerSalesChart.tsx
@@ -0,0 +1,187 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import TableFooter from '@mui/material/TableFooter'
+import Typography from '@mui/material/Typography'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Data
+const customerData = [
+  { pelanggan: 'Mumpuni Imam Rajata...', perusahaan: 'Fa Hassanah', nilai: 14117300 },
+  { pelanggan: 'Balangga Saefullah M...', perusahaan: 'CV Siregar Prasetya Tbk', nilai: 12520640 },
+  { pelanggan: 'Jais Mursita Adrians...', perusahaan: 'UD Sinaga Waluyo', nilai: 12174120 },
+  { pelanggan: 'Paramita Wijayanti M...', perusahaan: 'PD Waluyo Yuniar', nilai: 11001060 },
+  { pelanggan: 'Putri Puji Pertiwi S...', perusahaan: 'CV Wahyudin Tbk', nilai: 9175560 },
+  { pelanggan: 'Lainnya', perusahaan: '', nilai: 63285770 }
+]
+
+const totalNilai = customerData.reduce((sum, item) => sum + item.nilai, 0)
+
+// Chart series and colors
+const series = customerData.map(item => item.nilai)
+const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF', '#B39DDB', '#E91E63']
+
+const SalesCustomerSalesChart = () => {
+  const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'donut'
+    },
+    labels: customerData.map(item => item.pelanggan),
+    colors: colors,
+    legend: {
+      position: 'bottom',
+      horizontalAlign: 'center',
+      fontSize: '14px',
+      markers: {
+        width: 12,
+        height: 12,
+        radius: 2
+      },
+      itemMargin: {
+        horizontal: 15,
+        vertical: 5
+      }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '70%'
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID')
+        }
+      }
+    },
+    stroke: {
+      width: 2,
+      colors: ['#fff']
+    }
+  }
+
+  const formatCurrency = (amount: number): string => {
+    return amount.toLocaleString('id-ID')
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Penjualan Per Pelanggan Tahun Ini'
+        action={
+          <div className='flex items-center gap-2'>
+            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
+            <OptionMenu options={['View More', 'Delete']} />
+          </div>
+        }
+      />
+      <CardContent>
+        {/* Content based on active view */}
+        {activeView === 'chart' ? (
+          // Donut Chart View (Slide 1)
+          <div className='flex flex-col items-center'>
+            <AppReactApexCharts
+              id='customer-sales-donut'
+              type='donut'
+              height={350}
+              width='100%'
+              series={series}
+              options={options}
+            />
+          </div>
+        ) : (
+          // Table View (Slide 2)
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ fontWeight: 600 }}>Pelanggan</TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 600 }}>
+                    Nilai
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {customerData.map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>
+                      <div>
+                        <Typography variant='body2' sx={{ fontWeight: 500 }}>
+                          {row.pelanggan}
+                        </Typography>
+                        {row.perusahaan && (
+                          <Typography variant='caption' color='text.secondary'>
+                            {row.perusahaan}
+                          </Typography>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+              <TableFooter>
+                <TableRow sx={{ backgroundColor: '#f5f5f5' }}>
+                  <TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
+                    {formatCurrency(totalNilai)}
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </TableContainer>
+        )}
+
+        {/* Two dot indicators at bottom */}
+        <div className='flex justify-center items-center gap-2 mt-6'>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'chart' ? 'bg-blue-500' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('chart')}
+          ></div>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'table' ? 'bg-blue-500' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('table')}
+          ></div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesCustomerSalesChart
diff --git a/src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx b/src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx
new file mode 100644
index 0000000..23a5540
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-left/SalesPaymentRatioGaugeChart.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [52.2]
+
+const SalesPaymentRatioGaugeChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      type: 'radialBar',
+      sparkline: {
+        enabled: true
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        startAngle: -90,
+        endAngle: 90,
+        track: {
+          background: '#e7e7e7',
+          strokeWidth: '97%',
+          margin: 5,
+          dropShadow: {
+            enabled: false
+          }
+        },
+        hollow: {
+          margin: 15,
+          size: '70%'
+        },
+        dataLabels: {
+          name: {
+            show: false
+          },
+          value: {
+            offsetY: -10,
+            fontSize: '32px',
+            fontWeight: 'bold',
+            color: '#1f2937',
+            formatter: function (val) {
+              return val + '%'
+            }
+          }
+        }
+      }
+    },
+    grid: {
+      padding: {
+        top: -10
+      }
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'light',
+        shadeIntensity: 0.4,
+        inverseColors: false,
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 50, 53, 91]
+      }
+    },
+    colors: ['#3b82f6'],
+    stroke: {
+      dashArray: 4
+    },
+    labels: ['Rasio Lunas']
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Rasio Lunas' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent className='flex flex-col items-center pb-6'>
+        <AppReactApexCharts
+          id='rasio-lunas-gauge'
+          type='radialBar'
+          height={280}
+          width='100%'
+          series={series}
+          options={options}
+        />
+        <div className='text-sm text-gray-500 text-center mt-4 max-w-xs'>Tagihan lunas vs total Tagihan tahun ini</div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesPaymentRatioGaugeChart
diff --git a/src/views/apps/sales/overview/overview-left/SalesProductChart.tsx b/src/views/apps/sales/overview/overview-left/SalesProductChart.tsx
new file mode 100644
index 0000000..237be40
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-left/SalesProductChart.tsx
@@ -0,0 +1,218 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import TableFooter from '@mui/material/TableFooter'
+import Typography from '@mui/material/Typography'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Data
+const productData = [
+  { kategori: 'Dress', jumlah: 174, nilai: 70629279 },
+  { kategori: 'Tshirt', jumlah: 163, nilai: 31667892 },
+  { kategori: 'Shoes', jumlah: 27, nilai: 13473000 },
+  { kategori: 'Misc', jumlah: 128, nilai: 123937 }
+]
+
+const totalJumlah = productData.reduce((sum, item) => sum + item.jumlah, 0)
+const totalNilai = productData.reduce((sum, item) => sum + item.nilai, 0)
+
+// Chart series and colors
+const series = productData.map(item => item.nilai)
+const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF']
+
+const SalesProductSalesChart = () => {
+  const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'donut'
+    },
+    labels: productData.map(item => item.kategori),
+    colors: colors,
+    legend: {
+      position: 'bottom',
+      horizontalAlign: 'center',
+      fontSize: '14px',
+      markers: {
+        width: 12,
+        height: 12,
+        radius: 2
+      },
+      itemMargin: {
+        horizontal: 15,
+        vertical: 5
+      }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '70%'
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID')
+        }
+      }
+    },
+    stroke: {
+      width: 2,
+      colors: ['#fff']
+    }
+  }
+
+  const formatCurrency = (amount: number): string => {
+    return amount.toLocaleString('id-ID')
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Penjualan Per Produk Tahun Ini'
+        action={
+          <div className='flex items-center gap-2'>
+            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
+            <OptionMenu options={['View More', 'Delete']} />
+          </div>
+        }
+      />
+      <CardContent>
+        {/* Toggle Buttons */}
+        <div className='flex justify-center mb-6'>
+          <ButtonGroup size='small'>
+            <Button
+              variant={activeView === 'chart' ? 'contained' : 'outlined'}
+              onClick={() => setActiveView('chart')}
+              sx={{
+                minWidth: '120px',
+                backgroundColor: activeView === 'chart' ? '#36175e' : 'transparent',
+                color: activeView === 'chart' ? 'white' : '#36175e',
+                borderColor: '#36175e',
+                '&:hover': {
+                  backgroundColor: activeView === 'chart' ? '#36175e' : 'rgba(25, 118, 210, 0.04)'
+                }
+              }}
+            >
+              Jenis Produk
+            </Button>
+            <Button
+              variant={activeView === 'table' ? 'contained' : 'outlined'}
+              onClick={() => setActiveView('table')}
+              sx={{
+                minWidth: '120px',
+                backgroundColor: activeView === 'table' ? '#36175e' : 'transparent',
+                color: activeView === 'table' ? 'white' : '#36175e',
+                borderColor: '#36175e',
+                '&:hover': {
+                  backgroundColor: activeView === 'table' ? '#36175e' : 'rgba(25, 118, 210, 0.04)'
+                }
+              }}
+            >
+              Kategori
+            </Button>
+          </ButtonGroup>
+        </div>
+
+        {/* Content based on active view */}
+        {activeView === 'chart' ? (
+          // Donut Chart View (Slide 1)
+          <div className='flex flex-col items-center'>
+            <AppReactApexCharts
+              id='product-sales-donut'
+              type='donut'
+              height={350}
+              width='100%'
+              series={series}
+              options={options}
+            />
+          </div>
+        ) : (
+          // Table View (Slide 2)
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ fontWeight: 600 }}>Kategori</TableCell>
+                  <TableCell align='center' sx={{ fontWeight: 600 }}>
+                    Jml
+                  </TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 600 }}>
+                    Nilai
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {productData.map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{row.kategori}</TableCell>
+                    <TableCell align='center'>{row.jumlah}</TableCell>
+                    <TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+              <TableFooter>
+                <TableRow sx={{ backgroundColor: '#f5f5f5' }}>
+                  <TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
+                  <TableCell align='center' sx={{ fontWeight: 700, fontSize: '14px' }}>
+                    {totalJumlah}
+                  </TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
+                    {formatCurrency(totalNilai)}
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </TableContainer>
+        )}
+
+        {/* Two dot indicators at bottom */}
+        <div className='flex justify-center items-center gap-2 mt-6'>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'chart' ? 'bg-primary' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('chart')}
+          ></div>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'table' ? 'bg-primary' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('table')}
+          ></div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesProductSalesChart
diff --git a/src/views/apps/sales/overview/overview-left/index.tsx b/src/views/apps/sales/overview/overview-left/index.tsx
new file mode 100644
index 0000000..f87a461
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-left/index.tsx
@@ -0,0 +1,15 @@
+import SalesCustomerSalesChart from './SalesCustomerSalesChart'
+import SalesPaymentRatioGaugeChart from './SalesPaymentRatioGaugeChart'
+import SalesProductSalesChart from './SalesProductChart'
+
+const SalesOverviewLeft = () => {
+  return (
+    <>
+      <SalesPaymentRatioGaugeChart />
+      <SalesProductSalesChart />
+      <SalesCustomerSalesChart />
+    </>
+  )
+}
+
+export default SalesOverviewLeft
diff --git a/src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx b/src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx
new file mode 100644
index 0000000..ccd9389
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-right/SalesBillPaymentChart.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const colors = {
+  tagihan: '#28C76F',
+  pembayaran: '#EA5455'
+}
+
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Tagihan',
+    type: 'column',
+    data: [1250, 1180, 1350, 1450, 1200, 1520, 1380, 1150, 1650, 1400, 1290, 1700]
+  },
+  {
+    name: 'Pembayaran',
+    type: 'column',
+    data: [950, 880, 1050, 1150, 900, 1220, 1080, 850, 1350, 1100, 990, 1400]
+  }
+]
+
+const SalesBillPaymentChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      stacked: false,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID') + '.000'
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '60%',
+        borderRadius: 4
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 5,
+      max: 1800,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(val: number) {
+          return 'Rp ' + val + 'rb'
+        }
+      }
+    },
+    legend: {
+      markers: {
+        width: 8,
+        height: 8,
+        offsetX: -3,
+        radius: 12
+      },
+      height: 33,
+      offsetY: 10,
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      },
+      fontSize: '13px',
+      fontFamily: 'Public Sans',
+      fontWeight: 400,
+      labels: {
+        colors: bodyColor,
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6
+    },
+    colors: [colors.tagihan, colors.pembayaran],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader title='Tagihan & Pembayaran' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent>
+        <AppReactApexCharts
+          id='tagihan-pembayaran'
+          type='bar'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesBillPaymentChart
diff --git a/src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx b/src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx
new file mode 100644
index 0000000..0107660
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-right/SalesOverviewCards.tsx
@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'PENJUALAN',
+    stats: '122.274.450',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '162,3%',
+    subtitle: '46 Tagihan Tahun Ini'
+  },
+  {
+    title: 'PEMBAYARAN DITERIMA',
+    stats: '66.742.440',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '175,6%',
+    subtitle: '27 Tagihan Tahun Ini'
+  },
+  {
+    title: 'MENUNGGU PEMBAYARAN',
+    stats: '55.532.009',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '149,6%',
+    subtitle: '22 Tagihan'
+  },
+  {
+    title: 'JATUH TEMPO',
+    stats: '48.246.990',
+    avatarIcon: 'tabler-clock-exclamation',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '89,9%',
+    subtitle: '16 Tagihan'
+  }
+]
+
+const SalesOverviewCards = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default SalesOverviewCards
diff --git a/src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx b/src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx
new file mode 100644
index 0000000..81977b5
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-right/SalesPaymentReceivedChart.tsx
@@ -0,0 +1,152 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Pembayaran Diterima',
+    data: [0, 0, 0, 0, 0, 67000000]
+  }
+]
+
+const SalesPaymentReceivedChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    stroke: {
+      width: 3,
+      curve: 'smooth'
+    },
+    markers: {
+      size: 6,
+      colors: ['#00CFE8'],
+      strokeColors: '#fff',
+      strokeWidth: 2,
+      hover: {
+        size: 8
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID')
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['2020', '2021', '2022', '2023', '2024', '2025'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 7,
+      max: 70000000,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(val: number) {
+          if (val === 0) return '0'
+          return (val / 1000000).toFixed(0) + '.000.000'
+        }
+      }
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6,
+      xaxis: {
+        lines: {
+          show: true
+        }
+      },
+      yaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    colors: ['#00CFE8'],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Pembayaran Diterima'
+        action={
+          <div className='flex items-center gap-2'>
+            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
+            <OptionMenu options={['View More', 'Delete']} />
+          </div>
+        }
+      />
+      <CardContent>
+        <AppReactApexCharts
+          id='pembayaran-diterima'
+          type='line'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesPaymentReceivedChart
diff --git a/src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx b/src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx
new file mode 100644
index 0000000..7f55c1d
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-right/SalesPerPersonChart.tsx
@@ -0,0 +1,174 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const colors = ['#EA5455', '#FFB830', '#28C76F', '#00CFE8', '#795548', '#E91E63']
+
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: '2020',
+    data: [1850]
+  },
+  {
+    name: '2021',
+    data: [2150]
+  },
+  {
+    name: '2022',
+    data: [2450]
+  },
+  {
+    name: '2023',
+    data: [2750]
+  },
+  {
+    name: '2024',
+    data: [3050]
+  },
+  {
+    name: '2025',
+    data: [3350]
+  }
+]
+
+const SalesPerPersonChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID') + '.000'
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '60%',
+        borderRadius: 6,
+        dataLabels: {
+          position: 'top'
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['Jason Marc'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      }
+    },
+    legend: {
+      markers: {
+        width: 8,
+        height: 8,
+        offsetX: -3,
+        radius: 12
+      },
+      height: 40,
+      offsetY: 10,
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      },
+      fontSize: '13px',
+      fontFamily: 'Public Sans',
+      fontWeight: 400,
+      labels: {
+        colors: bodyColor,
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6,
+      xaxis: {
+        lines: {
+          show: true
+        }
+      },
+      yaxis: {
+        lines: {
+          show: false
+        }
+      }
+    },
+    colors: colors,
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader title='Penjualan per Sales Person' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent>
+        <AppReactApexCharts
+          id='penjualan-per-sales-person'
+          type='bar'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SalesPerPersonChart
diff --git a/src/views/apps/sales/overview/overview-right/index.tsx b/src/views/apps/sales/overview/overview-right/index.tsx
new file mode 100644
index 0000000..0418ba1
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-right/index.tsx
@@ -0,0 +1,17 @@
+import SalesBillPaymentChart from './SalesBillPaymentChart'
+import SalesOverviewCards from './SalesOverviewCards'
+import SalesPaymentReceivedChart from './SalesPaymentReceivedChart'
+import SalesPerPersonChart from './SalesPerPersonChart'
+
+const SalesOverviewRight = () => {
+  return (
+    <>
+      <SalesOverviewCards />
+      <SalesBillPaymentChart />
+      <SalesPaymentReceivedChart />
+      <SalesPerPersonChart />
+    </>
+  )
+}
+
+export default SalesOverviewRight
diff --git a/src/views/apps/sales/overview/overview-right/styles.css b/src/views/apps/sales/overview/overview-right/styles.css
new file mode 100644
index 0000000..ec19295
--- /dev/null
+++ b/src/views/apps/sales/overview/overview-right/styles.css
@@ -0,0 +1,15 @@
+#tagihan-pembayaran .apexcharts-legend .apexcharts-legend-series {
+  border: 1px solid var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  block-size: 83%;
+  padding-block: 4px;
+  padding-inline: 16px;
+}
+
+#penjualan-per-sales-person .apexcharts-legend .apexcharts-legend-series {
+  border: 1px solid var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  block-size: 83%;
+  padding-block: 4px;
+  padding-inline: 16px;
+}

From 849013a08ac70ede22cd0243eb3ba07c612e2245 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 16:17:25 +0700
Subject: [PATCH 07/42] Purchase Overview Page

---
 .../(private)/apps/purchase/overview/page.tsx |  86 +++++++
 .../(private)/apps/sales/overview/page.tsx    |   2 +-
 .../layout/vertical/VerticalMenu.tsx          |   3 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 .../PurchasePaymentRatioGaugeChart.tsx        | 106 +++++++++
 .../overview-left/PurchaseProductChart.tsx    | 218 ++++++++++++++++++
 .../PurchaseVendorSalesChart.tsx              | 187 +++++++++++++++
 .../purchase/overview/overview-left/index.tsx |  15 ++
 .../PurchaseBillPaymentChart.tsx              | 160 +++++++++++++
 .../overview-right/PurchaseOverviewCards.tsx  |  62 +++++
 .../PurchasePaymentReceivedChart.tsx          | 152 ++++++++++++
 .../overview/overview-right/index.tsx         |  15 ++
 .../overview/overview-right/styles.css        |  15 ++
 14 files changed, 1024 insertions(+), 3 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-left/PurchaseProductChart.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-left/index.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-right/index.tsx
 create mode 100644 src/views/apps/purchase/overview/overview-right/styles.css

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx
new file mode 100644
index 0000000..88d3888
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/overview/page.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+
+import { TextField, Typography, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
+import PurchaseOverviewLeft from '@/views/apps/purchase/overview/overview-left'
+import PurchaseOverviewRight from '@/views/apps/purchase/overview/overview-right'
+
+const PurchaseOverviewPage = () => {
+  const theme = useTheme()
+
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const [filter, setFilter] = useState({
+    date_from: formatDateDDMMYYYY(monthAgo),
+    date_to: formatDateDDMMYYYY(today)
+  })
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <div className='flex gap-4 items-center justify-between'>
+            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+              Overview Pembelian
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={formatForInputDate(today || new Date())}
+                onChange={e => {
+                  setFilter({
+                    ...filter,
+                    date_from: formatDateDDMMYYYY(new Date(e.target.value))
+                  })
+                }}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+              <Typography>-</Typography>
+              <TextField
+                type='date'
+                value={today}
+                onChange={e => {}}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+      <Grid container spacing={6} className='mt-5'>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <PurchaseOverviewRight />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <PurchaseOverviewLeft />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default PurchaseOverviewPage
diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx
index dcdbea9..c8aa27e 100644
--- a/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/overview/page.tsx
@@ -26,7 +26,7 @@ const SalesOverviewPage = () => {
         <Grid size={{ xs: 12 }}>
           <div className='flex gap-4 items-center justify-between'>
             <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
-              Orders Analysis Dashboard
+              Overview Penjualan
             </Typography>
             <div className='flex items-center gap-4'>
               <TextField
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 59a197e..eee95af 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -95,6 +95,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
+          <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
+            <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
+          </SubMenu>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 30b4549..c20fde3 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -113,6 +113,7 @@
     "disabledMenu": "Disabled Menu",
     "dailyReport": "Daily Report",
     "vendor": "Vendor",
-    "sales": "Sales"
+    "sales": "Sales",
+    "purchase_text": "Purchase"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 6dd0497..7c4c7fe 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -113,6 +113,7 @@
         "disabledMenu": "Menu Nonaktif",
         "dailyReport": "Laporan Harian",
         "vendor": "Vendor",
-        "sales": "Penjualan"
+        "sales": "Penjualan",
+        "purchase_text": "Pembelian"
     }
 }
diff --git a/src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx b/src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx
new file mode 100644
index 0000000..ce31584
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-left/PurchasePaymentRatioGaugeChart.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [52.2]
+
+const PurchasePaymentRatioGaugeChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      type: 'radialBar',
+      sparkline: {
+        enabled: true
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        startAngle: -90,
+        endAngle: 90,
+        track: {
+          background: '#e7e7e7',
+          strokeWidth: '97%',
+          margin: 5,
+          dropShadow: {
+            enabled: false
+          }
+        },
+        hollow: {
+          margin: 15,
+          size: '70%'
+        },
+        dataLabels: {
+          name: {
+            show: false
+          },
+          value: {
+            offsetY: -10,
+            fontSize: '32px',
+            fontWeight: 'bold',
+            color: '#1f2937',
+            formatter: function (val) {
+              return val + '%'
+            }
+          }
+        }
+      }
+    },
+    grid: {
+      padding: {
+        top: -10
+      }
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'light',
+        shadeIntensity: 0.4,
+        inverseColors: false,
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 50, 53, 91]
+      }
+    },
+    colors: ['#3b82f6'],
+    stroke: {
+      dashArray: 4
+    },
+    labels: ['Rasio Lunas']
+  }
+
+  return (
+    <Card>
+      <CardHeader title='Rasio Lunas' action={<OptionMenu options={['View More', 'Delete']} />} />
+      <CardContent className='flex flex-col items-center pb-6'>
+        <AppReactApexCharts
+          id='rasio-lunas-gauge'
+          type='radialBar'
+          height={280}
+          width='100%'
+          series={series}
+          options={options}
+        />
+        <div className='text-sm text-gray-500 text-center mt-4 max-w-xs'>
+          Tagihan Pembelian lunas vs total Tagihan Pembelian bulan ini
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchasePaymentRatioGaugeChart
diff --git a/src/views/apps/purchase/overview/overview-left/PurchaseProductChart.tsx b/src/views/apps/purchase/overview/overview-left/PurchaseProductChart.tsx
new file mode 100644
index 0000000..589da6f
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-left/PurchaseProductChart.tsx
@@ -0,0 +1,218 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import TableFooter from '@mui/material/TableFooter'
+import Typography from '@mui/material/Typography'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Data
+const productData = [
+  { kategori: 'Dress', jumlah: 174, nilai: 70629279 },
+  { kategori: 'Tshirt', jumlah: 163, nilai: 31667892 },
+  { kategori: 'Shoes', jumlah: 27, nilai: 13473000 },
+  { kategori: 'Misc', jumlah: 128, nilai: 123937 }
+]
+
+const totalJumlah = productData.reduce((sum, item) => sum + item.jumlah, 0)
+const totalNilai = productData.reduce((sum, item) => sum + item.nilai, 0)
+
+// Chart series and colors
+const series = productData.map(item => item.nilai)
+const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF']
+
+const PurchaseProductSalesChart = () => {
+  const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'donut'
+    },
+    labels: productData.map(item => item.kategori),
+    colors: colors,
+    legend: {
+      position: 'bottom',
+      horizontalAlign: 'center',
+      fontSize: '14px',
+      markers: {
+        width: 12,
+        height: 12,
+        radius: 2
+      },
+      itemMargin: {
+        horizontal: 15,
+        vertical: 5
+      }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '70%'
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID')
+        }
+      }
+    },
+    stroke: {
+      width: 2,
+      colors: ['#fff']
+    }
+  }
+
+  const formatCurrency = (amount: number): string => {
+    return amount.toLocaleString('id-ID')
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Total Pembelian Bulan Ini'
+        action={
+          <div className='flex items-center gap-2'>
+            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
+            <OptionMenu options={['View More', 'Delete']} />
+          </div>
+        }
+      />
+      <CardContent>
+        {/* Toggle Buttons */}
+        <div className='flex justify-center mb-6'>
+          <ButtonGroup size='small'>
+            <Button
+              variant={activeView === 'chart' ? 'contained' : 'outlined'}
+              onClick={() => setActiveView('chart')}
+              sx={{
+                minWidth: '120px',
+                backgroundColor: activeView === 'chart' ? '#36175e' : 'transparent',
+                color: activeView === 'chart' ? 'white' : '#36175e',
+                borderColor: '#36175e',
+                '&:hover': {
+                  backgroundColor: activeView === 'chart' ? '#36175e' : 'rgba(25, 118, 210, 0.04)'
+                }
+              }}
+            >
+              Jenis Produk
+            </Button>
+            <Button
+              variant={activeView === 'table' ? 'contained' : 'outlined'}
+              onClick={() => setActiveView('table')}
+              sx={{
+                minWidth: '120px',
+                backgroundColor: activeView === 'table' ? '#36175e' : 'transparent',
+                color: activeView === 'table' ? 'white' : '#36175e',
+                borderColor: '#36175e',
+                '&:hover': {
+                  backgroundColor: activeView === 'table' ? '#36175e' : 'rgba(25, 118, 210, 0.04)'
+                }
+              }}
+            >
+              Kategori
+            </Button>
+          </ButtonGroup>
+        </div>
+
+        {/* Content based on active view */}
+        {activeView === 'chart' ? (
+          // Donut Chart View (Slide 1)
+          <div className='flex flex-col items-center'>
+            <AppReactApexCharts
+              id='product-sales-donut'
+              type='donut'
+              height={350}
+              width='100%'
+              series={series}
+              options={options}
+            />
+          </div>
+        ) : (
+          // Table View (Slide 2)
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ fontWeight: 600 }}>Kategori</TableCell>
+                  <TableCell align='center' sx={{ fontWeight: 600 }}>
+                    Jml
+                  </TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 600 }}>
+                    Nilai
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {productData.map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{row.kategori}</TableCell>
+                    <TableCell align='center'>{row.jumlah}</TableCell>
+                    <TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+              <TableFooter>
+                <TableRow sx={{ backgroundColor: '#f5f5f5' }}>
+                  <TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
+                  <TableCell align='center' sx={{ fontWeight: 700, fontSize: '14px' }}>
+                    {totalJumlah}
+                  </TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
+                    {formatCurrency(totalNilai)}
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </TableContainer>
+        )}
+
+        {/* Two dot indicators at bottom */}
+        <div className='flex justify-center items-center gap-2 mt-6'>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'chart' ? 'bg-primary' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('chart')}
+          ></div>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'table' ? 'bg-primary' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('table')}
+          ></div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseProductSalesChart
diff --git a/src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.tsx b/src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.tsx
new file mode 100644
index 0000000..f915817
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-left/PurchaseVendorSalesChart.tsx
@@ -0,0 +1,187 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import TableFooter from '@mui/material/TableFooter'
+import Typography from '@mui/material/Typography'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Data
+const customerData = [
+  { pelanggan: 'Mumpuni Imam Rajata...', perusahaan: 'Fa Hassanah', nilai: 14117300 },
+  { pelanggan: 'Balangga Saefullah M...', perusahaan: 'CV Siregar Prasetya Tbk', nilai: 12520640 },
+  { pelanggan: 'Jais Mursita Adrians...', perusahaan: 'UD Sinaga Waluyo', nilai: 12174120 },
+  { pelanggan: 'Paramita Wijayanti M...', perusahaan: 'PD Waluyo Yuniar', nilai: 11001060 },
+  { pelanggan: 'Putri Puji Pertiwi S...', perusahaan: 'CV Wahyudin Tbk', nilai: 9175560 },
+  { pelanggan: 'Lainnya', perusahaan: '', nilai: 63285770 }
+]
+
+const totalNilai = customerData.reduce((sum, item) => sum + item.nilai, 0)
+
+// Chart series and colors
+const series = customerData.map(item => item.nilai)
+const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF', '#B39DDB', '#E91E63']
+
+const PurchaseVendorSalesChart = () => {
+  const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'donut'
+    },
+    labels: customerData.map(item => item.pelanggan),
+    colors: colors,
+    legend: {
+      position: 'bottom',
+      horizontalAlign: 'center',
+      fontSize: '14px',
+      markers: {
+        width: 12,
+        height: 12,
+        radius: 2
+      },
+      itemMargin: {
+        horizontal: 15,
+        vertical: 5
+      }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '70%'
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID')
+        }
+      }
+    },
+    stroke: {
+      width: 2,
+      colors: ['#fff']
+    }
+  }
+
+  const formatCurrency = (amount: number): string => {
+    return amount.toLocaleString('id-ID')
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Pembelian Per Vendor Bulan Ini'
+        action={
+          <div className='flex items-center gap-2'>
+            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
+            <OptionMenu options={['View More', 'Delete']} />
+          </div>
+        }
+      />
+      <CardContent>
+        {/* Content based on active view */}
+        {activeView === 'chart' ? (
+          // Donut Chart View (Slide 1)
+          <div className='flex flex-col items-center'>
+            <AppReactApexCharts
+              id='customer-sales-donut'
+              type='donut'
+              height={350}
+              width='100%'
+              series={series}
+              options={options}
+            />
+          </div>
+        ) : (
+          // Table View (Slide 2)
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ fontWeight: 600 }}>Vendor</TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 600 }}>
+                    Nilai
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {customerData.map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>
+                      <div>
+                        <Typography variant='body2' sx={{ fontWeight: 500 }}>
+                          {row.pelanggan}
+                        </Typography>
+                        {row.perusahaan && (
+                          <Typography variant='caption' color='text.secondary'>
+                            {row.perusahaan}
+                          </Typography>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+              <TableFooter>
+                <TableRow sx={{ backgroundColor: '#f5f5f5' }}>
+                  <TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
+                  <TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
+                    {formatCurrency(totalNilai)}
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </TableContainer>
+        )}
+
+        {/* Two dot indicators at bottom */}
+        <div className='flex justify-center items-center gap-2 mt-6'>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'chart' ? 'bg-blue-500' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('chart')}
+          ></div>
+          <div
+            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+              activeView === 'table' ? 'bg-blue-500' : 'bg-gray-300'
+            }`}
+            onClick={() => setActiveView('table')}
+          ></div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseVendorSalesChart
diff --git a/src/views/apps/purchase/overview/overview-left/index.tsx b/src/views/apps/purchase/overview/overview-left/index.tsx
new file mode 100644
index 0000000..d2bb388
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-left/index.tsx
@@ -0,0 +1,15 @@
+import PurchasePaymentRatioGaugeChart from './PurchasePaymentRatioGaugeChart'
+import PurchaseProductSalesChart from './PurchaseProductChart'
+import PurchaseVendorSalesChart from './PurchaseVendorSalesChart'
+
+const PurchaseOverviewLeft = () => {
+  return (
+    <>
+      <PurchasePaymentRatioGaugeChart />
+      <PurchaseProductSalesChart />
+      <PurchaseVendorSalesChart />
+    </>
+  )
+}
+
+export default PurchaseOverviewLeft
diff --git a/src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx b/src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx
new file mode 100644
index 0000000..6c0b8ac
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-right/PurchaseBillPaymentChart.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const colors = {
+  tagihanPembelian: '#28C76F',
+  pembayaranPembelian: '#EA5455'
+}
+
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Tagihan Pembelian',
+    type: 'column',
+    data: [1250, 1180, 1350, 1450, 1200, 1520, 1380, 1150, 1650, 1400, 1290, 1700]
+  },
+  {
+    name: 'Pembayaran Pembelian',
+    type: 'column',
+    data: [950, 880, 1050, 1150, 900, 1220, 1080, 850, 1350, 1100, 990, 1400]
+  }
+]
+
+const PurchaseBillPaymentChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      stacked: false,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID') + '.000'
+        }
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '60%',
+        borderRadius: 4
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 5,
+      max: 1800,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(val: number) {
+          return 'Rp ' + val + 'rb'
+        }
+      }
+    },
+    legend: {
+      markers: {
+        width: 8,
+        height: 8,
+        offsetX: -3,
+        radius: 12
+      },
+      height: 33,
+      offsetY: 10,
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      },
+      fontSize: '13px',
+      fontFamily: 'Public Sans',
+      fontWeight: 400,
+      labels: {
+        colors: bodyColor,
+        useSeriesColors: false
+      }
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6
+    },
+    colors: [colors.tagihanPembelian, colors.pembayaranPembelian],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Tagihan Pembelian & Pembayaran Pembelian'
+        action={<OptionMenu options={['View More', 'Delete']} />}
+      />
+      <CardContent>
+        <AppReactApexCharts
+          id='tagihan-pembayaran-pembelian'
+          type='bar'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseBillPaymentChart
diff --git a/src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.tsx b/src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.tsx
new file mode 100644
index 0000000..f671737
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-right/PurchaseOverviewCards.tsx
@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'PEMBELIAN',
+    stats: '12.932.460',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '114,7%',
+    subtitle: '15 Tagihan Pembelian Bulan Ini'
+  },
+  {
+    title: 'PEMBAYARAN PEMBELIAN DIKIRIM',
+    stats: '2.573.790',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '34,0%',
+    subtitle: '5 Tagihan Pembelian Bulan Ini'
+  },
+  {
+    title: 'MENUNGGU PEMBAYARAN PEMBELIAN',
+    stats: '10.358.670',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '380,6%',
+    subtitle: '10 Tagihan Pembelian'
+  },
+  {
+    title: 'JATUH TEMPO TAGIHAN PEMBELIAN',
+    stats: '6.033.000',
+    avatarIcon: 'tabler-clock-exclamation',
+    avatarColor: 'error',
+    trend: 'neutral',
+    trendNumber: '100%',
+    subtitle: '6 Tagihan Pembelian'
+  }
+]
+
+const PurchaseOverviewCards = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default PurchaseOverviewCards
diff --git a/src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.tsx b/src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.tsx
new file mode 100644
index 0000000..493ddb7
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-right/PurchasePaymentReceivedChart.tsx
@@ -0,0 +1,152 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Styles Imports
+import './styles.css'
+
+// Vars
+const labelColor = 'var(--mui-palette-text-disabled)'
+const bodyColor = 'var(--mui-palette-text-secondary)'
+const borderColor = 'var(--mui-palette-divider)'
+
+const series = [
+  {
+    name: 'Pembayaran Diterima',
+    data: [0, 0, 0, 0, 0, 67000000]
+  }
+]
+
+const PurchasePaymentReceivedChart = () => {
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    stroke: {
+      width: 3,
+      curve: 'smooth'
+    },
+    markers: {
+      size: 6,
+      colors: ['#00CFE8'],
+      strokeColors: '#fff',
+      strokeWidth: 2,
+      hover: {
+        size: 8
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val) {
+          return 'Rp ' + val.toLocaleString('id-ID')
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    xaxis: {
+      categories: ['2020', '2021', '2022', '2023', '2024', '2025'],
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      tickAmount: 7,
+      max: 70000000,
+      min: 0,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+          fontWeight: 400
+        },
+        formatter(val: number) {
+          if (val === 0) return '0'
+          return (val / 1000000).toFixed(0) + '.000.000'
+        }
+      }
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      borderColor,
+      strokeDashArray: 6,
+      xaxis: {
+        lines: {
+          show: true
+        }
+      },
+      yaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    colors: ['#00CFE8'],
+    fill: {
+      opacity: 1
+    }
+  }
+
+  return (
+    <Card className='mt-5'>
+      <CardHeader
+        title='Pembayaran'
+        action={
+          <div className='flex items-center gap-2'>
+            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
+            <OptionMenu options={['View More', 'Delete']} />
+          </div>
+        }
+      />
+      <CardContent>
+        <AppReactApexCharts
+          id='pembayaran-diterima'
+          type='line'
+          height={360}
+          width='100%'
+          series={series}
+          options={options}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchasePaymentReceivedChart
diff --git a/src/views/apps/purchase/overview/overview-right/index.tsx b/src/views/apps/purchase/overview/overview-right/index.tsx
new file mode 100644
index 0000000..64d7b49
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-right/index.tsx
@@ -0,0 +1,15 @@
+import PurchaseBillPaymentChart from './PurchaseBillPaymentChart'
+import PurchaseOverviewCards from './PurchaseOverviewCards'
+import PurchasePaymentReceivedChart from './PurchasePaymentReceivedChart'
+
+const PurchaseOverviewRight = () => {
+  return (
+    <>
+      <PurchaseOverviewCards />
+      <PurchaseBillPaymentChart />
+      <PurchasePaymentReceivedChart />
+    </>
+  )
+}
+
+export default PurchaseOverviewRight
diff --git a/src/views/apps/purchase/overview/overview-right/styles.css b/src/views/apps/purchase/overview/overview-right/styles.css
new file mode 100644
index 0000000..a93db94
--- /dev/null
+++ b/src/views/apps/purchase/overview/overview-right/styles.css
@@ -0,0 +1,15 @@
+#tagihan-pembayaran-pembelian .apexcharts-legend .apexcharts-legend-series {
+  border: 1px solid var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  block-size: 83%;
+  padding-block: 4px;
+  padding-inline: 16px;
+}
+
+#pembayaran-diterima .apexcharts-legend .apexcharts-legend-series {
+  border: 1px solid var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  block-size: 83%;
+  padding-block: 4px;
+  padding-inline: 16px;
+}

From dfa82180174336bb1aebbade641ed6c382d0590e Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 17:42:49 +0700
Subject: [PATCH 08/42] feat: purchase order page

---
 .../apps/purchase/purchase-orders/page.tsx    |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   3 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/purchase-order.ts              | 224 +++++++++
 src/types/apps/purchaseOrderTypes.ts          |  11 +
 .../list/PurchaseOrderListTable.tsx           | 452 ++++++++++++++++++
 .../purchase/purchase-orders/list/index.tsx   |  19 +
 8 files changed, 720 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/page.tsx
 create mode 100644 src/data/dummy/purchase-order.ts
 create mode 100644 src/types/apps/purchaseOrderTypes.ts
 create mode 100644 src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx
 create mode 100644 src/views/apps/purchase/purchase-orders/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/page.tsx
new file mode 100644
index 0000000..2e2bcba
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/page.tsx
@@ -0,0 +1,7 @@
+import PurchaseOrderList from '@/views/apps/purchase/purchase-orders/list'
+
+const PurchaseOrdersPage = () => {
+  return <PurchaseOrderList />
+}
+
+export default PurchaseOrdersPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index eee95af..e1fe92b 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -97,6 +97,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           </SubMenu>
           <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
             <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
+              {dictionary['navigation'].purchase_orders}
+            </MenuItem>
           </SubMenu>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index c20fde3..f153a38 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -114,6 +114,7 @@
     "dailyReport": "Daily Report",
     "vendor": "Vendor",
     "sales": "Sales",
-    "purchase_text": "Purchase"
+    "purchase_text": "Purchase",
+    "purchase_orders": "Purchase Orders"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 7c4c7fe..9ad2d0c 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -114,6 +114,7 @@
         "dailyReport": "Laporan Harian",
         "vendor": "Vendor",
         "sales": "Penjualan",
-        "purchase_text": "Pembelian"
+        "purchase_text": "Pembelian",
+        "purchase_orders": "Pesanan Pembelian"
     }
 }
diff --git a/src/data/dummy/purchase-order.ts b/src/data/dummy/purchase-order.ts
new file mode 100644
index 0000000..6ac722a
--- /dev/null
+++ b/src/data/dummy/purchase-order.ts
@@ -0,0 +1,224 @@
+import { PurchaseOrderType } from '@/types/apps/purchaseOrderTypes'
+
+export const purchaseOrdersData: PurchaseOrderType[] = [
+  {
+    id: 1,
+    number: 'PO/00040',
+    vendorName: 'Kairav Wijaya Nababan',
+    vendorCompany: 'Yayasan Haryanto Tbk',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2037170
+  },
+  {
+    id: 2,
+    number: 'PO/00041',
+    vendorName: 'Sari Melani Hutapea',
+    vendorCompany: 'PT Santoso Jaya',
+    reference: 'REF-2025-001',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Draft',
+    total: 1875500
+  },
+  {
+    id: 3,
+    number: 'PO/00042',
+    vendorName: 'Budi Prasetyo Manullang',
+    vendorCompany: 'CV Wijaya Makmur',
+    reference: 'REF-2025-002',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3250750
+  },
+  {
+    id: 4,
+    number: 'PO/00043',
+    vendorName: 'Maya Sari Lumban Gaol',
+    vendorCompany: 'PT Indah Permata',
+    reference: '',
+    date: '02/09/2025',
+    dueDate: '16/09/2025',
+    status: 'Selesai',
+    total: 980250
+  },
+  {
+    id: 5,
+    number: 'PO/00044',
+    vendorName: 'Rahman Hakim Siahaan',
+    vendorCompany: 'Toko Bahagia Sejahtera',
+    reference: 'REF-2025-003',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Draft',
+    total: 4125890
+  },
+  {
+    id: 6,
+    number: 'PO/00045',
+    vendorName: 'Dewi Anggraini Panjaitan',
+    vendorCompany: 'PT Maju Bersama',
+    reference: 'REF-2025-004',
+    date: '01/09/2025',
+    dueDate: '15/09/2025',
+    status: 'Selesai',
+    total: 2678300
+  },
+  {
+    id: 7,
+    number: 'PO/00046',
+    vendorName: 'Agung Wijaya Simbolon',
+    vendorCompany: 'CV Karya Mandiri',
+    reference: '',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 1456780
+  },
+  {
+    id: 8,
+    number: 'PO/00047',
+    vendorName: 'Fitri Handayani Sitorus',
+    vendorCompany: 'PT Global Nusantara',
+    reference: 'REF-2025-005',
+    date: '04/09/2025',
+    dueDate: '18/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5892450
+  },
+  {
+    id: 9,
+    number: 'PO/00048',
+    vendorName: 'Andi Setiawan Tampubolon',
+    vendorCompany: 'Yayasan Pembangunan Tbk',
+    reference: 'REF-2025-006',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 3567120
+  },
+  {
+    id: 10,
+    number: 'PO/00049',
+    vendorName: 'Rina Maharani Hutasoit',
+    vendorCompany: 'PT Sejahtera Abadi',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2234680
+  },
+  {
+    id: 11,
+    number: 'PO/00050',
+    vendorName: 'Joko Santoso Nainggolan',
+    vendorCompany: 'CV Berkah Jaya',
+    reference: 'REF-2025-007',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Selesai',
+    total: 1789560
+  },
+  {
+    id: 12,
+    number: 'PO/00051',
+    vendorName: 'Linda Safitri Simanjuntak',
+    vendorCompany: 'PT Harapan Bangsa',
+    reference: 'REF-2025-008',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 4321870
+  },
+  {
+    id: 13,
+    number: 'PO/00052',
+    vendorName: 'Irfan Maulana Pasaribu',
+    vendorCompany: 'CV Sumber Rejeki',
+    reference: 'REF-2025-009',
+    date: '10/09/2025',
+    dueDate: '24/09/2025',
+    status: 'Draft',
+    total: 2567890
+  },
+  {
+    id: 14,
+    number: 'PO/00053',
+    vendorName: 'Siska Permata Sinaga',
+    vendorCompany: 'PT Mitra Sukses',
+    reference: '',
+    date: '11/09/2025',
+    dueDate: '25/09/2025',
+    status: 'Disetujui',
+    total: 3456780
+  },
+  {
+    id: 15,
+    number: 'PO/00054',
+    vendorName: 'Rizky Aditya Siregar',
+    vendorCompany: 'Toko Aman Sentosa',
+    reference: 'REF-2025-010',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Selesai',
+    total: 1234567
+  },
+  {
+    id: 16,
+    number: 'PO/00055',
+    vendorName: 'Nina Sari Hutabarat',
+    vendorCompany: 'PT Cahaya Terang',
+    reference: 'REF-2025-011',
+    date: '12/09/2025',
+    dueDate: '26/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5678900
+  },
+  {
+    id: 17,
+    number: 'PO/00056',
+    vendorName: 'Doni Prasetya Situmorang',
+    vendorCompany: 'CV Barokah Makmur',
+    reference: '',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 987654
+  },
+  {
+    id: 18,
+    number: 'PO/00057',
+    vendorName: 'Anita Dewi Marpaung',
+    vendorCompany: 'Yayasan Karya Bhakti',
+    reference: 'REF-2025-012',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 4567123
+  },
+  {
+    id: 19,
+    number: 'PO/00058',
+    vendorName: 'Tommy Wijaya Samosir',
+    vendorCompany: 'PT Bintang Timur',
+    reference: 'REF-2025-013',
+    date: '13/09/2025',
+    dueDate: '27/09/2025',
+    status: 'Selesai',
+    total: 2345678
+  },
+  {
+    id: 20,
+    number: 'PO/00059',
+    vendorName: 'Lestari Indah Pakpahan',
+    vendorCompany: 'CV Harmoni Jaya',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3789012
+  }
+]
diff --git a/src/types/apps/purchaseOrderTypes.ts b/src/types/apps/purchaseOrderTypes.ts
new file mode 100644
index 0000000..c38cae7
--- /dev/null
+++ b/src/types/apps/purchaseOrderTypes.ts
@@ -0,0 +1,11 @@
+export type PurchaseOrderType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}
diff --git a/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx b/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx
new file mode 100644
index 0000000..f05c540
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx
@@ -0,0 +1,452 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { PurchaseOrderType } from '@/types/apps/purchaseOrderTypes'
+import { purchaseOrdersData } from '@/data/dummy/purchase-order'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type PurchaseOrderTypeWithAction = PurchaseOrderType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Draft':
+      return 'secondary'
+    case 'Disetujui':
+      return 'primary'
+    case 'Dikirim Sebagian':
+      return 'warning'
+    case 'Selesai':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<PurchaseOrderTypeWithAction>()
+
+const PurchaseOrderListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addPOOpen, setAddPOOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [poId, setPOId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<PurchaseOrderType[]>(purchaseOrdersData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = purchaseOrdersData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        po =>
+          po.number.toLowerCase().includes(search.toLowerCase()) ||
+          po.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          po.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          po.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(po => po.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handlePOClick = (poId: string) => {
+    console.log('Navigasi ke detail PO:', poId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<PurchaseOrderTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor PO',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handlePOClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Vendor',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('dueDate', {
+        header: 'Tanggal Jatuh Tempo',
+        cell: ({ row }) => <Typography>{row.original.dueDate}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as PurchaseOrderType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Draft', 'Disetujui', 'Dikirim Sebagian', 'Selesai', 'Lainnya'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Purchase Order'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              startIcon={<i className='tabler-plus' />}
+              onClick={() => setAddPOOpen(!addPOOpen)}
+              className='max-sm:is-full'
+            >
+              Tambah PO Baru
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default PurchaseOrderListTable
diff --git a/src/views/apps/purchase/purchase-orders/list/index.tsx b/src/views/apps/purchase/purchase-orders/list/index.tsx
new file mode 100644
index 0000000..29fa55b
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import PurchaseOrderListTable from './PurchaseOrderListTable'
+
+const PurchaseOrderList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseOrderListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseOrderList

From 4c4579f00967d568b5f05d11cae4118898e170e2 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 22:47:05 +0700
Subject: [PATCH 09/42] feat: Purchase Order Add

---
 .../purchase/purchase-orders/add/page.tsx     |  19 +
 src/components/ImageUpload.tsx                | 291 +++++++++
 src/types/apps/purchaseOrderTypes.ts          |  55 ++
 .../add/PurchaseOrderAddForm.tsx              | 121 ++++
 .../add/PurchaseOrderAddHeader.tsx            |  19 +
 .../add/PurchaseOrderBasicInfo.tsx            | 197 ++++++
 .../add/PurchaseOrderIngredientsTable.tsx     | 249 ++++++++
 .../add/PurchaseOrderSummary.tsx              | 578 ++++++++++++++++++
 .../list/PurchaseOrderListTable.tsx           |   8 +-
 9 files changed, 1534 insertions(+), 3 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx
 create mode 100644 src/components/ImageUpload.tsx
 create mode 100644 src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx
 create mode 100644 src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader.tsx
 create mode 100644 src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx
 create mode 100644 src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx
 create mode 100644 src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx
new file mode 100644
index 0000000..71c0036
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx
@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid2'
+
+import PurchaseOrderAddHeader from '@/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader'
+import PurchaseOrderAddForm from '@/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm'
+
+const PurchaseOrderAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseOrderAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseOrderAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseOrderAddPage
diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
new file mode 100644
index 0000000..464785d
--- /dev/null
+++ b/src/components/ImageUpload.tsx
@@ -0,0 +1,291 @@
+'use client'
+
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import type { BoxProps } from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import { useDropzone } from 'react-dropzone'
+
+// Component Imports
+import Link from '@components/Link'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+import AppReactDropzone from '@/libs/styles/AppReactDropzone'
+
+type FileProp = {
+  name: string
+  type: string
+  size: number
+}
+
+interface ImageUploadProps {
+  // Required props
+  onUpload: (file: File) => Promise<string> | string // Returns image URL
+
+  // Optional customization props
+  title?: string | null // Made nullable
+  currentImageUrl?: string
+  onImageRemove?: () => void
+  onImageChange?: (url: string) => void
+
+  // Upload state
+  isUploading?: boolean
+
+  // UI customization
+  maxFileSize?: number // in bytes
+  acceptedFileTypes?: string[]
+  showUrlOption?: boolean
+  uploadButtonText?: string
+  browseButtonText?: string
+  dragDropText?: string
+  replaceText?: string
+
+  // Style customization
+  className?: string
+  disabled?: boolean
+}
+
+// Styled Dropzone Component
+const Dropzone = styled(AppReactDropzone)<BoxProps>(({ theme }) => ({
+  '& .dropzone': {
+    minHeight: 'unset',
+    padding: theme.spacing(12),
+    [theme.breakpoints.down('sm')]: {
+      paddingInline: theme.spacing(5)
+    },
+    '&+.MuiList-root .MuiListItem-root .file-name': {
+      fontWeight: theme.typography.body1.fontWeight
+    }
+  }
+}))
+
+const ImageUpload: React.FC<ImageUploadProps> = ({
+  onUpload,
+  title = null, // Default to null
+  currentImageUrl = '',
+  onImageRemove,
+  onImageChange,
+  isUploading = false,
+  maxFileSize = 5 * 1024 * 1024, // 5MB default
+  acceptedFileTypes = ['image/*'],
+  showUrlOption = true,
+  uploadButtonText = 'Upload',
+  browseButtonText = 'Browse Image',
+  dragDropText = 'Drag and Drop Your Image Here.',
+  replaceText = 'Drop New Image to Replace',
+  className = '',
+  disabled = false
+}) => {
+  // States
+  const [files, setFiles] = useState<File[]>([])
+  const [error, setError] = useState<string>('')
+
+  const handleUpload = async () => {
+    if (!files.length) return
+
+    try {
+      setError('')
+      const imageUrl = await onUpload(files[0])
+
+      if (typeof imageUrl === 'string') {
+        onImageChange?.(imageUrl)
+        setFiles([]) // Clear files after successful upload
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed')
+    }
+  }
+
+  // Hooks
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles: File[]) => {
+      setError('')
+
+      if (acceptedFiles.length === 0) return
+
+      const file = acceptedFiles[0]
+
+      // Validate file size
+      if (file.size > maxFileSize) {
+        setError(`File size should be less than ${formatFileSize(maxFileSize)}`)
+        return
+      }
+
+      // Replace files instead of adding to them
+      setFiles([file])
+    },
+    accept: acceptedFileTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),
+    disabled: disabled || isUploading
+  })
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const renderFilePreview = (file: FileProp) => {
+    if (file.type.startsWith('image')) {
+      return <img width={38} height={38} alt={file.name} src={URL.createObjectURL(file as any)} />
+    } else {
+      return <i className='tabler-file-description' />
+    }
+  }
+
+  const handleRemoveFile = (file: FileProp) => {
+    const filtered = files.filter((i: FileProp) => i.name !== file.name)
+    setFiles(filtered)
+    setError('')
+  }
+
+  const handleRemoveCurrentImage = () => {
+    onImageRemove?.()
+  }
+
+  const handleRemoveAllFiles = () => {
+    setFiles([])
+    setError('')
+  }
+
+  const fileList = files.map((file: FileProp) => (
+    <ListItem key={file.name} className='pis-4 plb-3'>
+      <div className='file-details'>
+        <div className='file-preview'>{renderFilePreview(file)}</div>
+        <div>
+          <Typography className='file-name font-medium' color='text.primary'>
+            {file.name}
+          </Typography>
+          <Typography className='file-size' variant='body2'>
+            {formatFileSize(file.size)}
+          </Typography>
+        </div>
+      </div>
+      <IconButton onClick={() => handleRemoveFile(file)} disabled={isUploading}>
+        <i className='tabler-x text-xl' />
+      </IconButton>
+    </ListItem>
+  ))
+
+  return (
+    <Dropzone className={className}>
+      {/* Conditional title and URL option header */}
+      {title && (
+        <div className='flex justify-between items-center mb-4'>
+          <Typography variant='h6' component='h2'>
+            {title}
+          </Typography>
+          {showUrlOption && (
+            <Typography component={Link} color='primary.main' className='font-medium'>
+              Add media from URL
+            </Typography>
+          )}
+        </div>
+      )}
+
+      <div {...getRootProps({ className: 'dropzone' })}>
+        <input {...getInputProps()} />
+        <div className='flex items-center flex-col gap-2 text-center'>
+          <CustomAvatar variant='rounded' skin='light' color='secondary'>
+            <i className='tabler-upload' />
+          </CustomAvatar>
+          <Typography variant='h4'>{currentImageUrl && !files.length ? replaceText : dragDropText}</Typography>
+          <Typography color='text.disabled'>or</Typography>
+          <Button variant='tonal' size='small' disabled={disabled || isUploading}>
+            {browseButtonText}
+          </Button>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <Typography color='error' variant='body2' className='mt-2 text-center'>
+          {error}
+        </Typography>
+      )}
+
+      {/* Show current image if it exists */}
+      {currentImageUrl && !files.length && (
+        <div className='current-image mb-4'>
+          <Typography variant='subtitle2' className='mb-2'>
+            Current Image:
+          </Typography>
+          <div className='flex items-center justify-between p-3 border border-gray-200 rounded'>
+            <div className='flex items-center gap-3'>
+              <img width={60} height={60} alt='Current image' src={currentImageUrl} className='rounded object-cover' />
+              <div>
+                <Typography className='font-medium' color='text.primary'>
+                  Current image
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  Uploaded image
+                </Typography>
+              </div>
+            </div>
+            {onImageRemove && (
+              <IconButton onClick={handleRemoveCurrentImage} color='error' disabled={isUploading}>
+                <i className='tabler-x text-xl' />
+              </IconButton>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* File list and upload buttons */}
+      {files.length > 0 && (
+        <>
+          <List>{fileList}</List>
+          <div className='buttons'>
+            <Button color='error' variant='tonal' onClick={handleRemoveAllFiles} disabled={isUploading}>
+              Remove All
+            </Button>
+            <Button variant='contained' onClick={handleUpload} disabled={isUploading}>
+              {isUploading ? 'Uploading...' : uploadButtonText}
+            </Button>
+          </div>
+        </>
+      )}
+    </Dropzone>
+  )
+}
+
+export default ImageUpload
+
+// ===== USAGE EXAMPLES =====
+
+// 1. Without title
+// <ImageUpload
+//   onUpload={handleUpload}
+//   currentImageUrl={imageUrl}
+//   onImageChange={setImageUrl}
+//   onImageRemove={() => setImageUrl('')}
+// />
+
+// 2. With title
+// <ImageUpload
+//   title="Product Image"
+//   onUpload={handleUpload}
+//   currentImageUrl={imageUrl}
+//   onImageChange={setImageUrl}
+//   onImageRemove={() => setImageUrl('')}
+// />
+
+// 3. Explicitly set title to null
+// <ImageUpload
+//   title={null}
+//   onUpload={handleUpload}
+//   currentImageUrl={imageUrl}
+//   onImageChange={setImageUrl}
+//   onImageRemove={() => setImageUrl('')}
+// />
diff --git a/src/types/apps/purchaseOrderTypes.ts b/src/types/apps/purchaseOrderTypes.ts
index c38cae7..987560f 100644
--- a/src/types/apps/purchaseOrderTypes.ts
+++ b/src/types/apps/purchaseOrderTypes.ts
@@ -9,3 +9,58 @@ export type PurchaseOrderType = {
   status: string
   total: number
 }
+
+export interface IngredientItem {
+  id: number
+  ingredient: { label: string; value: string } | null
+  deskripsi: string
+  kuantitas: number
+  satuan: { label: string; value: string } | null
+  discount: string
+  harga: number
+  pajak: { label: string; value: string } | null
+  waste: { label: string; value: string } | null
+  total: number
+}
+
+export interface PurchaseOrderFormData {
+  vendor: { label: string; value: string } | null
+  nomor: string
+  tglTransaksi: string
+  tglJatuhTempo: string
+  referensi: string
+  termin: { label: string; value: string } | null
+  hargaTermasukPajak: boolean
+  showShippingInfo: boolean
+  tanggalPengiriman: string
+  ekspedisi: { label: string; value: string } | null
+  noResi: string
+  showPesan: boolean
+  showAttachment: boolean
+  showTambahDiskon: boolean
+  showBiayaPengiriman: boolean
+  showBiayaTransaksi: boolean
+  showUangMuka: boolean
+  pesan: string
+  ingredientItems: IngredientItem[]
+  transactionCosts?: TransactionCost[]
+  subtotal?: number
+  discountType?: 'percentage' | 'fixed'
+  downPaymentType?: 'percentage' | 'fixed'
+  discountValue?: string
+  shippingCost?: string
+  transactionCost?: string
+  downPayment?: string
+}
+
+export interface TransactionCost {
+  id: string
+  type: string
+  name: string
+  amount: string
+}
+
+export interface DropdownOption {
+  label: string
+  value: string
+}
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx
new file mode 100644
index 0000000..77814ef
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardContent } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
+import PurchaseOrderBasicInfo from './PurchaseOrderBasicInfo'
+import PurchaseOrderIngredientsTable from './PurchaseOrderIngredientsTable'
+import PurchaseOrderSummary from './PurchaseOrderSummary'
+
+const PurchaseOrderAddForm: React.FC = () => {
+  const [formData, setFormData] = useState<PurchaseOrderFormData>({
+    vendor: null,
+    nomor: 'PO/00043',
+    tglTransaksi: '2025-09-09',
+    tglJatuhTempo: '2025-09-10',
+    referensi: '',
+    termin: null,
+    hargaTermasukPajak: true,
+    // Shipping info
+    showShippingInfo: false,
+    tanggalPengiriman: '',
+    ekspedisi: null,
+    noResi: '',
+    // Bottom section toggles
+    showPesan: false,
+    showAttachment: false,
+    showTambahDiskon: false,
+    showBiayaPengiriman: false,
+    showBiayaTransaksi: false,
+    showUangMuka: false,
+    pesan: '',
+    // Ingredient items (updated from productItems)
+    ingredientItems: [
+      {
+        id: 1,
+        ingredient: null,
+        deskripsi: '',
+        kuantitas: 1,
+        satuan: null,
+        discount: '0',
+        harga: 0,
+        pajak: null,
+        waste: null,
+        total: 0
+      }
+    ]
+  })
+
+  const handleInputChange = (field: keyof PurchaseOrderFormData, value: any): void => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  const handleIngredientChange = (index: number, field: keyof IngredientItem, value: any): void => {
+    setFormData(prev => {
+      const newItems = [...prev.ingredientItems]
+      newItems[index] = { ...newItems[index], [field]: value }
+
+      // Auto-calculate total if price or quantity changes
+      if (field === 'harga' || field === 'kuantitas') {
+        const item = newItems[index]
+        item.total = item.harga * item.kuantitas
+      }
+
+      return { ...prev, ingredientItems: newItems }
+    })
+  }
+
+  const addIngredientItem = (): void => {
+    const newItem: IngredientItem = {
+      id: Date.now(),
+      ingredient: null,
+      deskripsi: '',
+      kuantitas: 1,
+      satuan: null,
+      discount: '0%',
+      harga: 0,
+      pajak: null,
+      waste: null,
+      total: 0
+    }
+    setFormData(prev => ({
+      ...prev,
+      ingredientItems: [...prev.ingredientItems, newItem]
+    }))
+  }
+
+  const removeIngredientItem = (index: number): void => {
+    setFormData(prev => ({
+      ...prev,
+      ingredientItems: prev.ingredientItems.filter((_, i) => i !== index)
+    }))
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Grid container spacing={3}>
+          {/* Basic Info Section */}
+          <PurchaseOrderBasicInfo formData={formData} handleInputChange={handleInputChange} />
+
+          {/* Ingredients Table Section */}
+          <PurchaseOrderIngredientsTable
+            formData={formData}
+            handleIngredientChange={handleIngredientChange}
+            addIngredientItem={addIngredientItem}
+            removeIngredientItem={removeIngredientItem}
+          />
+
+          {/* Summary Section */}
+          <PurchaseOrderSummary formData={formData} handleInputChange={handleInputChange} />
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseOrderAddForm
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader.tsx b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader.tsx
new file mode 100644
index 0000000..f06706a
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const PurchaseOrderAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Pesanan Pembelian
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseOrderAddHeader
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx
new file mode 100644
index 0000000..6d8adcf
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+import React from 'react'
+import { Button, Switch, FormControlLabel } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import CustomTextField from '@/@core/components/mui/TextField'
+import { DropdownOption, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
+
+interface PurchaseOrderBasicInfoProps {
+  formData: PurchaseOrderFormData
+  handleInputChange: (field: keyof PurchaseOrderFormData, value: any) => void
+}
+
+const PurchaseOrderBasicInfo: React.FC<PurchaseOrderBasicInfoProps> = ({ formData, handleInputChange }) => {
+  // Sample data for dropdowns
+  const vendorOptions: DropdownOption[] = [
+    { label: 'Vendor A', value: 'vendor_a' },
+    { label: 'Vendor B', value: 'vendor_b' },
+    { label: 'Vendor C', value: 'vendor_c' }
+  ]
+
+  const terminOptions: DropdownOption[] = [
+    { label: 'Net 30', value: 'net_30' },
+    { label: 'Net 15', value: 'net_15' },
+    { label: 'Net 60', value: 'net_60' },
+    { label: 'Cash on Delivery', value: 'cod' }
+  ]
+
+  const ekspedisiOptions: DropdownOption[] = [
+    { label: 'JNE', value: 'jne' },
+    { label: 'J&T Express', value: 'jnt' },
+    { label: 'SiCepat', value: 'sicepat' },
+    { label: 'Pos Indonesia', value: 'pos' },
+    { label: 'TIKI', value: 'tiki' }
+  ]
+
+  return (
+    <>
+      {/* Row 1 - Vendor dan Nomor */}
+      <Grid size={{ xs: 12, sm: 6, md: 6 }}>
+        <CustomAutocomplete
+          fullWidth
+          options={vendorOptions}
+          value={formData.vendor}
+          onChange={(event, newValue) => handleInputChange('vendor', newValue)}
+          renderInput={params => <CustomTextField {...params} label='Vendor' placeholder='Pilih kontak' fullWidth />}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 6 }}>
+        <CustomTextField
+          fullWidth
+          label='Nomor'
+          value={formData.nomor}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('nomor', e.target.value)}
+          InputProps={{
+            readOnly: true
+          }}
+        />
+      </Grid>
+
+      {/* Row 2 - Tgl. Transaksi, Tgl. Jatuh Tempo, Termin */}
+      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+        <CustomTextField
+          fullWidth
+          label='Tgl. Transaksi'
+          type='date'
+          value={formData.tglTransaksi}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('tglTransaksi', e.target.value)}
+          InputLabelProps={{
+            shrink: true
+          }}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+        <CustomTextField
+          fullWidth
+          label='Tgl. Jatuh Tempo'
+          type='date'
+          value={formData.tglJatuhTempo}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('tglJatuhTempo', e.target.value)}
+          InputLabelProps={{
+            shrink: true
+          }}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+        <CustomAutocomplete
+          fullWidth
+          options={terminOptions}
+          value={formData.termin}
+          onChange={(event, newValue) => handleInputChange('termin', newValue)}
+          renderInput={params => <CustomTextField {...params} label='Termin' placeholder='Net 30' fullWidth />}
+        />
+      </Grid>
+
+      {/* Row 3 - Tampilkan Informasi Pengiriman */}
+      <Grid size={12}>
+        <Button
+          variant='text'
+          color='primary'
+          onClick={() => handleInputChange('showShippingInfo', !formData.showShippingInfo)}
+          sx={{
+            textTransform: 'none',
+            fontSize: '14px',
+            fontWeight: 500,
+            padding: '8px 0',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1
+          }}
+        >
+          {formData.showShippingInfo ? '−' : '+'} {formData.showShippingInfo ? 'Sembunyikan' : 'Tampilkan'} Informasi
+          Pengiriman
+        </Button>
+      </Grid>
+
+      {/* Shipping Information - Conditional */}
+      {formData.showShippingInfo && (
+        <>
+          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              label='Tanggal Pengiriman'
+              type='date'
+              placeholder='Pilih tanggal'
+              value={formData.tanggalPengiriman}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleInputChange('tanggalPengiriman', e.target.value)
+              }
+              InputLabelProps={{
+                shrink: true
+              }}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+            <CustomAutocomplete
+              fullWidth
+              options={ekspedisiOptions}
+              value={formData.ekspedisi}
+              onChange={(event, newValue) => handleInputChange('ekspedisi', newValue)}
+              renderInput={params => (
+                <CustomTextField {...params} label='Ekspedisi' placeholder='Pilih ekspedisi' fullWidth />
+              )}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              label='No. Resi'
+              placeholder='No. Resi'
+              value={formData.noResi}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('noResi', e.target.value)}
+            />
+          </Grid>
+        </>
+      )}
+
+      {/* Row 4 - Referensi, SKU, Switch Pajak */}
+      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+        <CustomTextField
+          fullWidth
+          label='Referensi'
+          placeholder='Referensi'
+          value={formData.referensi}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('referensi', e.target.value)}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+        <CustomTextField fullWidth label='SKU' placeholder='Scan Barcode/SKU' variant='outlined' />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 4, md: 4 }} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={formData.hargaTermasukPajak}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleInputChange('hargaTermasukPajak', e.target.checked)
+              }
+              color='primary'
+            />
+          }
+          label='Harga termasuk pajak'
+          sx={{
+            marginLeft: 0,
+            '& .MuiFormControlLabel-label': {
+              fontSize: '14px',
+              color: 'text.secondary'
+            }
+          }}
+        />
+      </Grid>
+    </>
+  )
+}
+
+export default PurchaseOrderBasicInfo
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx
new file mode 100644
index 0000000..8cb8836
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx
@@ -0,0 +1,249 @@
+'use client'
+
+import React from 'react'
+import { Button, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import CustomTextField from '@/@core/components/mui/TextField'
+import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
+
+interface PurchaseOrderIngredientsTableProps {
+  formData: PurchaseOrderFormData
+  handleIngredientChange: (index: number, field: keyof IngredientItem, value: any) => void
+  addIngredientItem: () => void
+  removeIngredientItem: (index: number) => void
+}
+
+const PurchaseOrderIngredientsTable: React.FC<PurchaseOrderIngredientsTableProps> = ({
+  formData,
+  handleIngredientChange,
+  addIngredientItem,
+  removeIngredientItem
+}) => {
+  const ingredientOptions = [
+    { label: 'Tepung Terigu Premium', value: 'tepung_terigu_premium' },
+    { label: 'Gula Pasir Halus', value: 'gula_pasir_halus' },
+    { label: 'Mentega Unsalted', value: 'mentega_unsalted' },
+    { label: 'Telur Ayam Grade A', value: 'telur_ayam_grade_a' },
+    { label: 'Vanilla Extract', value: 'vanilla_extract' },
+    { label: 'Coklat Chips', value: 'coklat_chips' }
+  ]
+
+  const satuanOptions = [
+    { label: 'KG', value: 'kg' },
+    { label: 'GRAM', value: 'gram' },
+    { label: 'LITER', value: 'liter' },
+    { label: 'ML', value: 'ml' },
+    { label: 'PCS', value: 'pcs' },
+    { label: 'PACK', value: 'pack' }
+  ]
+
+  const pajakOptions = [
+    { label: 'PPN 11%', value: 'ppn_11' },
+    { label: 'PPN 0%', value: 'ppn_0' },
+    { label: 'Bebas Pajak', value: 'tax_free' }
+  ]
+
+  const wasteOptions = [
+    { label: '2%', value: '2' },
+    { label: '5%', value: '5' },
+    { label: '10%', value: '10' },
+    { label: '15%', value: '15' },
+    { label: 'Custom', value: 'custom' }
+  ]
+
+  return (
+    <Grid size={12} sx={{ mt: 4 }}>
+      <Typography variant='h6' sx={{ mb: 2, fontWeight: 600 }}>
+        Bahan Baku / Ingredients
+      </Typography>
+
+      {/* Table Header */}
+      <Grid container spacing={1} sx={{ mb: 2, px: 1 }}>
+        <Grid size={1.8}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Bahan Baku
+          </Typography>
+        </Grid>
+        <Grid size={1.8}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Deskripsi
+          </Typography>
+        </Grid>
+        <Grid size={1}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Kuantitas
+          </Typography>
+        </Grid>
+        <Grid size={1.2}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Satuan
+          </Typography>
+        </Grid>
+        <Grid size={1}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Discount
+          </Typography>
+        </Grid>
+        <Grid size={1.2}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Harga
+          </Typography>
+        </Grid>
+        <Grid size={1.2}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Pajak
+          </Typography>
+        </Grid>
+        <Grid size={1.2}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Waste
+          </Typography>
+        </Grid>
+        <Grid size={1}>
+          <Typography variant='subtitle2' fontWeight={600}>
+            Total
+          </Typography>
+        </Grid>
+        <Grid size={0.6}></Grid>
+      </Grid>
+
+      {/* Ingredient Items */}
+      {formData.ingredientItems.map((item: IngredientItem, index: number) => (
+        <Grid container spacing={1} key={item.id} sx={{ mb: 2, alignItems: 'center' }}>
+          <Grid size={1.8}>
+            <CustomAutocomplete
+              fullWidth
+              size='small'
+              options={ingredientOptions}
+              value={item.ingredient}
+              onChange={(event, newValue) => handleIngredientChange(index, 'ingredient', newValue)}
+              renderInput={params => (
+                <CustomTextField {...params} placeholder='Pilih Bahan Baku' size='small' fullWidth />
+              )}
+            />
+          </Grid>
+          <Grid size={1.8}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              value={item.deskripsi}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleIngredientChange(index, 'deskripsi', e.target.value)
+              }
+              placeholder='Deskripsi'
+            />
+          </Grid>
+          <Grid size={1}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              type='number'
+              value={item.kuantitas}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleIngredientChange(index, 'kuantitas', parseInt(e.target.value) || 1)
+              }
+              inputProps={{ min: 1 }}
+            />
+          </Grid>
+          <Grid size={1.2}>
+            <CustomAutocomplete
+              fullWidth
+              size='small'
+              options={satuanOptions}
+              value={item.satuan}
+              onChange={(event, newValue) => handleIngredientChange(index, 'satuan', newValue)}
+              renderInput={params => <CustomTextField {...params} placeholder='Pilih...' size='small' fullWidth />}
+            />
+          </Grid>
+          <Grid size={1}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              value={item.discount}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleIngredientChange(index, 'discount', e.target.value)
+              }
+              placeholder='0%'
+            />
+          </Grid>
+          <Grid size={1.2}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              type='number'
+              value={item.harga === 0 ? '' : item.harga?.toString() || ''} // Ubah ini: 0 jadi empty string
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const value = e.target.value
+
+                if (value === '') {
+                  // Jika kosong, set ke null atau undefined, bukan 0
+                  handleIngredientChange(index, 'harga', null) // atau undefined
+                  return
+                }
+
+                const numericValue = parseFloat(value)
+                handleIngredientChange(index, 'harga', isNaN(numericValue) ? 0 : numericValue)
+              }}
+              inputProps={{ min: 0, step: 'any' }}
+              placeholder='0'
+            />
+          </Grid>
+          <Grid size={1.2}>
+            <CustomAutocomplete
+              fullWidth
+              size='small'
+              options={pajakOptions}
+              value={item.pajak}
+              onChange={(event, newValue) => handleIngredientChange(index, 'pajak', newValue)}
+              renderInput={params => <CustomTextField {...params} placeholder='...' size='small' fullWidth />}
+            />
+          </Grid>
+          <Grid size={1.2}>
+            <CustomAutocomplete
+              fullWidth
+              size='small'
+              options={wasteOptions}
+              value={item.waste}
+              onChange={(event, newValue) => handleIngredientChange(index, 'waste', newValue)}
+              renderInput={params => <CustomTextField {...params} placeholder='...' size='small' fullWidth />}
+            />
+          </Grid>
+          <Grid size={1}>
+            <CustomTextField fullWidth size='small' value={item.total} InputProps={{ readOnly: true }} />
+          </Grid>
+          <Grid size={0.6}>
+            <Button
+              variant='outlined'
+              color='error'
+              size='small'
+              onClick={() => removeIngredientItem(index)}
+              sx={{ minWidth: 'auto', p: 1 }}
+            >
+              <i className='tabler-trash' />
+            </Button>
+          </Grid>
+        </Grid>
+      ))}
+
+      {/* Add New Item Button */}
+      <Grid container spacing={1}>
+        <Grid size={12}>
+          <Button
+            variant='outlined'
+            onClick={addIngredientItem}
+            sx={{
+              textTransform: 'none',
+              color: 'primary.main',
+              borderColor: 'primary.main'
+            }}
+          >
+            + Tambah bahan baku
+          </Button>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseOrderIngredientsTable
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx
new file mode 100644
index 0000000..2c2a51d
--- /dev/null
+++ b/src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx
@@ -0,0 +1,578 @@
+'use client'
+
+import React from 'react'
+import { Button, Typography, Box, ToggleButton, ToggleButtonGroup, InputAdornment, IconButton } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomTextField from '@/@core/components/mui/TextField'
+import { PurchaseOrderFormData, TransactionCost } from '@/types/apps/purchaseOrderTypes'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import ImageUpload from '@/components/ImageUpload'
+
+interface PurchaseOrderSummaryProps {
+  formData: PurchaseOrderFormData
+  handleInputChange: (field: keyof PurchaseOrderFormData, value: any) => void
+}
+
+const PurchaseOrderSummary: React.FC<PurchaseOrderSummaryProps> = ({ formData, handleInputChange }) => {
+  // Initialize transaction costs if not exist
+  const transactionCosts = formData.transactionCosts || []
+
+  // Options for transaction cost types
+  const transactionCostOptions = [
+    { label: 'Biaya Admin', value: 'admin' },
+    { label: 'Pajak', value: 'pajak' },
+    { label: 'Materai', value: 'materai' },
+    { label: 'Lainnya', value: 'lainnya' }
+  ]
+
+  // Add new transaction cost
+  const addTransactionCost = () => {
+    const newCost: TransactionCost = {
+      id: Date.now().toString(),
+      type: '',
+      name: '',
+      amount: ''
+    }
+    handleInputChange('transactionCosts', [...transactionCosts, newCost])
+  }
+
+  // Remove transaction cost
+  const removeTransactionCost = (id: string) => {
+    const filtered = transactionCosts.filter((cost: TransactionCost) => cost.id !== id)
+    handleInputChange('transactionCosts', filtered)
+  }
+
+  // Update transaction cost
+  const updateTransactionCost = (id: string, field: keyof TransactionCost, value: string) => {
+    const updated = transactionCosts.map((cost: TransactionCost) =>
+      cost.id === id ? { ...cost, [field]: value } : cost
+    )
+    handleInputChange('transactionCosts', updated)
+  }
+
+  // Calculate discount amount based on percentage or fixed amount
+  const calculateDiscount = () => {
+    if (!formData.discountValue) return 0
+
+    const subtotal = formData.subtotal || 0
+    if (formData.discountType === 'percentage') {
+      return (subtotal * parseFloat(formData.discountValue)) / 100
+    }
+    return parseFloat(formData.discountValue)
+  }
+
+  const discountAmount = calculateDiscount()
+  const shippingCost = parseFloat(formData.shippingCost || '0')
+
+  // Calculate total transaction costs
+  const totalTransactionCost = transactionCosts.reduce((sum: number, cost: TransactionCost) => {
+    return sum + parseFloat(cost.amount || '0')
+  }, 0)
+
+  const downPayment = parseFloat(formData.downPayment || '0')
+
+  // Calculate total (subtotal - discount + shipping + transaction costs)
+  const total = (formData.subtotal || 0) - discountAmount + shippingCost + totalTransactionCost
+
+  // Calculate remaining balance (total - down payment)
+  const remainingBalance = total - downPayment
+
+  const handleUpload = async (file: File): Promise<string> => {
+    // Simulate upload
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(URL.createObjectURL(file))
+      }, 1000)
+    })
+  }
+
+  return (
+    <Grid size={12} sx={{ mt: 4 }}>
+      <Grid container spacing={3}>
+        {/* Left Side - Pesan and Attachment */}
+        <Grid size={{ xs: 12, md: 7 }}>
+          {/* Pesan Section */}
+          <Box sx={{ mb: 3 }}>
+            <Button
+              variant='text'
+              color='inherit'
+              onClick={() => handleInputChange('showPesan', !formData.showPesan)}
+              sx={{
+                textTransform: 'none',
+                fontSize: '14px',
+                fontWeight: 500,
+                padding: '12px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                color: 'text.primary',
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Box component='span' sx={{ mr: 1 }}>
+                {formData.showPesan ? (
+                  <i className='tabler-chevron-down w-4 h-4' />
+                ) : (
+                  <i className='tabler-chevron-right w-4 h-4' />
+                )}
+              </Box>
+              Pesan
+            </Button>
+            {formData.showPesan && (
+              <Box sx={{ mt: 2 }}>
+                <CustomTextField
+                  fullWidth
+                  multiline
+                  rows={3}
+                  placeholder='Tambahkan pesan...'
+                  value={formData.pesan || ''}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('pesan', e.target.value)}
+                />
+              </Box>
+            )}
+          </Box>
+
+          {/* Attachment Section */}
+          <Box>
+            <Button
+              variant='text'
+              color='inherit'
+              onClick={() => handleInputChange('showAttachment', !formData.showAttachment)}
+              sx={{
+                textTransform: 'none',
+                fontSize: '14px',
+                fontWeight: 500,
+                padding: '12px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                color: 'text.primary',
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Box component='span' sx={{ mr: 1 }}>
+                {formData.showAttachment ? (
+                  <i className='tabler-chevron-down w-4 h-4' />
+                ) : (
+                  <i className='tabler-chevron-right w-4 h-4' />
+                )}
+              </Box>
+              Attachment
+            </Button>
+            {formData.showAttachment && (
+              <ImageUpload
+                onUpload={handleUpload}
+                maxFileSize={1 * 1024 * 1024} // 1MB
+                showUrlOption={false}
+                dragDropText='Drop your image here'
+                browseButtonText='Choose Image'
+              />
+            )}
+          </Box>
+        </Grid>
+
+        {/* Right Side - Totals */}
+        <Grid size={{ xs: 12, md: 5 }}>
+          <Box sx={{ backgroundColor: '#ffffff', p: 3, borderRadius: '8px' }}>
+            {/* Sub Total */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Typography variant='body1' color='text.secondary' sx={{ fontSize: '16px' }}>
+                Sub Total
+              </Typography>
+              <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
+                {new Intl.NumberFormat('id-ID', {
+                  style: 'currency',
+                  currency: 'IDR',
+                  minimumFractionDigits: 0
+                }).format(formData.subtotal || 0)}
+              </Typography>
+            </Box>
+
+            {/* Additional Options */}
+            <Box>
+              {/* Tambah Diskon */}
+              <Box
+                sx={{
+                  py: 2,
+                  borderBottom: '1px solid #e0e0e0',
+                  '&:hover': {
+                    backgroundColor: '#f8f8f8'
+                  }
+                }}
+              >
+                <Button
+                  variant='text'
+                  color='primary'
+                  size='small'
+                  sx={{ textTransform: 'none', fontSize: '14px', p: 0, textAlign: 'left' }}
+                  onClick={() => handleInputChange('showTambahDiskon', !formData.showTambahDiskon)}
+                >
+                  {formData.showTambahDiskon ? '- Sembunyikan Diskon' : '+ Tambahan Diskon'}
+                </Button>
+
+                {/* Show input form when showTambahDiskon is true */}
+                {formData.showTambahDiskon && (
+                  <Box sx={{ mt: 2 }}>
+                    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 1 }}>
+                      <CustomTextField
+                        size='small'
+                        placeholder='0'
+                        value={formData.discountValue || ''}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('discountValue', e.target.value)
+                        }
+                        sx={{ flex: 1 }}
+                        InputProps={{
+                          endAdornment:
+                            formData.discountType === 'percentage' ? (
+                              <InputAdornment position='end'>%</InputAdornment>
+                            ) : undefined
+                        }}
+                      />
+                      <ToggleButtonGroup
+                        value={formData.discountType || 'percentage'}
+                        exclusive
+                        onChange={(_, newValue) => {
+                          if (newValue) handleInputChange('discountType', newValue)
+                        }}
+                        size='small'
+                      >
+                        <ToggleButton value='percentage' sx={{ px: 2 }}>
+                          %
+                        </ToggleButton>
+                        <ToggleButton value='fixed' sx={{ px: 2 }}>
+                          Rp
+                        </ToggleButton>
+                      </ToggleButtonGroup>
+                    </Box>
+                  </Box>
+                )}
+              </Box>
+
+              {/* Biaya Pengiriman */}
+              <Box
+                sx={{
+                  py: 2,
+                  borderBottom: '1px solid #e0e0e0',
+                  '&:hover': {
+                    backgroundColor: '#f8f8f8'
+                  }
+                }}
+              >
+                <Button
+                  variant='text'
+                  color='primary'
+                  size='small'
+                  sx={{ textTransform: 'none', fontSize: '14px', p: 0, textAlign: 'left' }}
+                  onClick={() => handleInputChange('showBiayaPengiriman', !formData.showBiayaPengiriman)}
+                >
+                  {formData.showBiayaPengiriman ? '- Sembunyikan Biaya Pengiriman' : '+ Biaya pengiriman'}
+                </Button>
+
+                {/* Show input form when showBiayaPengiriman is true */}
+                {formData.showBiayaPengiriman && (
+                  <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Typography variant='body2' sx={{ minWidth: '140px' }}>
+                      Biaya pengiriman
+                    </Typography>
+                    <CustomTextField
+                      size='small'
+                      placeholder='0'
+                      value={formData.shippingCost || ''}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('shippingCost', e.target.value)
+                      }
+                      sx={{ flex: 1 }}
+                      InputProps={{
+                        startAdornment: <InputAdornment position='start'>Rp</InputAdornment>
+                      }}
+                    />
+                  </Box>
+                )}
+              </Box>
+
+              {/* Biaya Transaksi - Multiple */}
+              <Box
+                sx={{
+                  py: 2,
+                  borderBottom: '1px solid #e0e0e0',
+                  '&:hover': {
+                    backgroundColor: '#f8f8f8'
+                  }
+                }}
+              >
+                <Button
+                  variant='text'
+                  color='primary'
+                  size='small'
+                  sx={{ textTransform: 'none', fontSize: '14px', p: 0, textAlign: 'left' }}
+                  onClick={() => {
+                    if (!formData.showBiayaTransaksi) {
+                      handleInputChange('showBiayaTransaksi', true)
+                      if (transactionCosts.length === 0) {
+                        addTransactionCost()
+                      }
+                    } else {
+                      handleInputChange('showBiayaTransaksi', false)
+                    }
+                  }}
+                >
+                  {formData.showBiayaTransaksi ? '- Sembunyikan Biaya Transaksi' : '+ Biaya Transaksi'}
+                </Button>
+
+                {/* Show multiple transaction cost inputs */}
+                {formData.showBiayaTransaksi && (
+                  <Box sx={{ mt: 2 }}>
+                    {transactionCosts.map((cost: TransactionCost, index: number) => (
+                      <Box key={cost.id} sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 2 }}>
+                        {/* Remove button */}
+                        <IconButton
+                          size='small'
+                          onClick={() => removeTransactionCost(cost.id)}
+                          sx={{
+                            color: 'error.main',
+                            border: '1px solid',
+                            borderColor: 'error.main',
+                            borderRadius: '50%',
+                            width: 28,
+                            height: 28,
+                            '&:hover': {
+                              backgroundColor: 'error.lighter'
+                            }
+                          }}
+                        >
+                          <i className='tabler-trash' />
+                        </IconButton>
+
+                        {/* Type AutoComplete */}
+                        <CustomAutocomplete
+                          size='small'
+                          options={transactionCostOptions}
+                          getOptionLabel={option => (typeof option === 'string' ? option : option.label)}
+                          value={transactionCostOptions.find(option => option.value === cost.type) || null}
+                          onChange={(_, newValue) => {
+                            updateTransactionCost(cost.id, 'type', newValue ? newValue.value : '')
+                          }}
+                          renderInput={params => (
+                            <CustomTextField {...params} size='small' placeholder='Pilih biaya transaksi...' />
+                          )}
+                          sx={{ minWidth: 180 }}
+                          noOptionsText='Tidak ada pilihan'
+                        />
+
+                        {/* Name input */}
+                        <CustomTextField
+                          size='small'
+                          placeholder='Nama'
+                          value={cost.name}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            updateTransactionCost(cost.id, 'name', e.target.value)
+                          }
+                          sx={{ flex: 1 }}
+                        />
+
+                        {/* Amount input */}
+                        <CustomTextField
+                          size='small'
+                          placeholder='0'
+                          value={cost.amount}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            updateTransactionCost(cost.id, 'amount', e.target.value)
+                          }
+                          sx={{ width: 120 }}
+                          InputProps={{
+                            startAdornment: <InputAdornment position='start'>Rp</InputAdornment>
+                          }}
+                        />
+                      </Box>
+                    ))}
+
+                    {/* Add more button */}
+                    <Button
+                      variant='text'
+                      color='primary'
+                      size='small'
+                      onClick={addTransactionCost}
+                      sx={{
+                        textTransform: 'none',
+                        fontSize: '13px',
+                        mt: 1
+                      }}
+                    >
+                      + Tambah biaya transaksi lain
+                    </Button>
+                  </Box>
+                )}
+              </Box>
+            </Box>
+
+            {/* Total */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px' }}>
+                Total
+              </Typography>
+              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px', textAlign: 'right' }}>
+                {new Intl.NumberFormat('id-ID', {
+                  style: 'currency',
+                  currency: 'IDR',
+                  minimumFractionDigits: 0
+                }).format(total)}
+              </Typography>
+            </Box>
+
+            {/* Uang Muka */}
+            <Box
+              sx={{
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  {/* Dropdown */}
+                  <CustomAutocomplete
+                    size='small'
+                    options={[{ label: '1-10003 Gi...', value: '1-10003' }]}
+                    getOptionLabel={option => (typeof option === 'string' ? option : option.label)}
+                    value={{ label: '1-10003 Gi...', value: '1-10003' }}
+                    onChange={(_, newValue) => {
+                      // Handle change if needed
+                    }}
+                    renderInput={params => <CustomTextField {...params} size='small' />}
+                    sx={{ minWidth: 120 }}
+                  />
+
+                  {/* Amount input */}
+                  <CustomTextField
+                    size='small'
+                    placeholder='0'
+                    value={formData.downPayment || '0'}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleInputChange('downPayment', e.target.value)
+                    }
+                    sx={{ width: '80px' }}
+                    inputProps={{
+                      style: { textAlign: 'center' }
+                    }}
+                  />
+
+                  {/* Percentage/Fixed toggle */}
+                  <ToggleButtonGroup
+                    value={formData.downPaymentType || 'fixed'}
+                    exclusive
+                    onChange={(_, newValue) => {
+                      if (newValue) handleInputChange('downPaymentType', newValue)
+                    }}
+                    size='small'
+                  >
+                    <ToggleButton value='percentage' sx={{ px: 1.5 }}>
+                      %
+                    </ToggleButton>
+                    <ToggleButton value='fixed' sx={{ px: 1.5 }}>
+                      Rp
+                    </ToggleButton>
+                  </ToggleButtonGroup>
+                </Box>
+
+                {/* Right side text */}
+                <Typography
+                  variant='body1'
+                  sx={{
+                    fontSize: '16px',
+                    fontWeight: 400
+                  }}
+                >
+                  Uang muka {downPayment > 0 ? downPayment.toLocaleString('id-ID') : '0'}
+                </Typography>
+              </Box>
+            </Box>
+
+            {/* Sisa Tagihan */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                backgroundColor: '#f5f5f5',
+                borderRadius: '4px',
+                mb: 3,
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Typography variant='body1' color='text.primary' sx={{ fontSize: '16px', fontWeight: 600 }}>
+                Sisa Tagihan
+              </Typography>
+              <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
+                {new Intl.NumberFormat('id-ID', {
+                  style: 'currency',
+                  currency: 'IDR',
+                  minimumFractionDigits: 0
+                }).format(remainingBalance)}
+              </Typography>
+            </Box>
+
+            {/* Save Button */}
+            <Button
+              variant='contained'
+              color='primary'
+              fullWidth
+              sx={{
+                textTransform: 'none',
+                fontWeight: 600,
+                py: 1.5,
+                boxShadow: 'none',
+                '&:hover': {
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+                }
+              }}
+            >
+              Simpan
+            </Button>
+          </Box>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseOrderSummary
diff --git a/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx b/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx
index f05c540..33cbab8 100644
--- a/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx
+++ b/src/views/apps/purchase/purchase-orders/list/PurchaseOrderListTable.tsx
@@ -41,6 +41,7 @@ import TablePaginationComponent from '@/components/TablePaginationComponent'
 import Loading from '@/components/layout/shared/Loading'
 import { PurchaseOrderType } from '@/types/apps/purchaseOrderTypes'
 import { purchaseOrdersData } from '@/data/dummy/purchase-order'
+import { getLocalizedUrl } from '@/utils/i18n'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -367,11 +368,12 @@ const PurchaseOrderListTable = () => {
             </Button>
             <Button
               variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
               startIcon={<i className='tabler-plus' />}
-              onClick={() => setAddPOOpen(!addPOOpen)}
-              className='max-sm:is-full'
+              href={getLocalizedUrl('/apps/purchase/purchase-orders/add', locale as Locale)}
             >
-              Tambah PO Baru
+              Tambah
             </Button>
           </div>
         </div>

From 49ed3386beabefefd37c9bbd3f0c143cc9ed7639 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 23:05:23 +0700
Subject: [PATCH 10/42] feat: purchase form

---
 .../apps/purchase/purchase-orders/add/page.tsx   |  4 ++--
 .../PurchaseAddForm.tsx}                         | 16 ++++++++--------
 .../PurchaseBasicInfo.tsx}                       |  6 +++---
 .../PurchaseIngredientsTable.tsx}                |  6 +++---
 .../PurchaseSummary.tsx}                         |  6 +++---
 5 files changed, 19 insertions(+), 19 deletions(-)
 rename src/views/apps/purchase/{purchase-orders/add/PurchaseOrderAddForm.tsx => purchase-form/PurchaseAddForm.tsx} (84%)
 rename src/views/apps/purchase/{purchase-orders/add/PurchaseOrderBasicInfo.tsx => purchase-form/PurchaseBasicInfo.tsx} (97%)
 rename src/views/apps/purchase/{purchase-orders/add/PurchaseOrderIngredientsTable.tsx => purchase-form/PurchaseIngredientsTable.tsx} (97%)
 rename src/views/apps/purchase/{purchase-orders/add/PurchaseOrderSummary.tsx => purchase-form/PurchaseSummary.tsx} (99%)

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx
index 71c0036..52cb4b2 100644
--- a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/add/page.tsx
@@ -1,7 +1,7 @@
 import Grid from '@mui/material/Grid2'
 
 import PurchaseOrderAddHeader from '@/views/apps/purchase/purchase-orders/add/PurchaseOrderAddHeader'
-import PurchaseOrderAddForm from '@/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm'
+import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
 
 const PurchaseOrderAddPage = () => {
   return (
@@ -10,7 +10,7 @@ const PurchaseOrderAddPage = () => {
         <PurchaseOrderAddHeader />
       </Grid>
       <Grid size={{ xs: 12 }}>
-        <PurchaseOrderAddForm />
+        <PurchaseAddForm />
       </Grid>
     </Grid>
   )
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx b/src/views/apps/purchase/purchase-form/PurchaseAddForm.tsx
similarity index 84%
rename from src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx
rename to src/views/apps/purchase/purchase-form/PurchaseAddForm.tsx
index 77814ef..7a158d9 100644
--- a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderAddForm.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseAddForm.tsx
@@ -4,11 +4,11 @@ import React, { useState } from 'react'
 import { Card, CardContent } from '@mui/material'
 import Grid from '@mui/material/Grid2'
 import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
-import PurchaseOrderBasicInfo from './PurchaseOrderBasicInfo'
-import PurchaseOrderIngredientsTable from './PurchaseOrderIngredientsTable'
-import PurchaseOrderSummary from './PurchaseOrderSummary'
+import PurchaseBasicInfo from './PurchaseBasicInfo'
+import PurchaseIngredientsTable from './PurchaseIngredientsTable'
+import PurchaseSummary from './PurchaseSummary'
 
-const PurchaseOrderAddForm: React.FC = () => {
+const PurchaseAddForm: React.FC = () => {
   const [formData, setFormData] = useState<PurchaseOrderFormData>({
     vendor: null,
     nomor: 'PO/00043',
@@ -100,10 +100,10 @@ const PurchaseOrderAddForm: React.FC = () => {
       <CardContent>
         <Grid container spacing={3}>
           {/* Basic Info Section */}
-          <PurchaseOrderBasicInfo formData={formData} handleInputChange={handleInputChange} />
+          <PurchaseBasicInfo formData={formData} handleInputChange={handleInputChange} />
 
           {/* Ingredients Table Section */}
-          <PurchaseOrderIngredientsTable
+          <PurchaseIngredientsTable
             formData={formData}
             handleIngredientChange={handleIngredientChange}
             addIngredientItem={addIngredientItem}
@@ -111,11 +111,11 @@ const PurchaseOrderAddForm: React.FC = () => {
           />
 
           {/* Summary Section */}
-          <PurchaseOrderSummary formData={formData} handleInputChange={handleInputChange} />
+          <PurchaseSummary formData={formData} handleInputChange={handleInputChange} />
         </Grid>
       </CardContent>
     </Card>
   )
 }
 
-export default PurchaseOrderAddForm
+export default PurchaseAddForm
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx b/src/views/apps/purchase/purchase-form/PurchaseBasicInfo.tsx
similarity index 97%
rename from src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx
rename to src/views/apps/purchase/purchase-form/PurchaseBasicInfo.tsx
index 6d8adcf..6cce349 100644
--- a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderBasicInfo.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseBasicInfo.tsx
@@ -7,12 +7,12 @@ import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import CustomTextField from '@/@core/components/mui/TextField'
 import { DropdownOption, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
 
-interface PurchaseOrderBasicInfoProps {
+interface PurchaseBasicInfoProps {
   formData: PurchaseOrderFormData
   handleInputChange: (field: keyof PurchaseOrderFormData, value: any) => void
 }
 
-const PurchaseOrderBasicInfo: React.FC<PurchaseOrderBasicInfoProps> = ({ formData, handleInputChange }) => {
+const PurchaseBasicInfo: React.FC<PurchaseBasicInfoProps> = ({ formData, handleInputChange }) => {
   // Sample data for dropdowns
   const vendorOptions: DropdownOption[] = [
     { label: 'Vendor A', value: 'vendor_a' },
@@ -194,4 +194,4 @@ const PurchaseOrderBasicInfo: React.FC<PurchaseOrderBasicInfoProps> = ({ formDat
   )
 }
 
-export default PurchaseOrderBasicInfo
+export default PurchaseBasicInfo
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx b/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
similarity index 97%
rename from src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx
rename to src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
index 8cb8836..d319568 100644
--- a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderIngredientsTable.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
@@ -7,14 +7,14 @@ import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import CustomTextField from '@/@core/components/mui/TextField'
 import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
 
-interface PurchaseOrderIngredientsTableProps {
+interface PurchaseIngredientsTableProps {
   formData: PurchaseOrderFormData
   handleIngredientChange: (index: number, field: keyof IngredientItem, value: any) => void
   addIngredientItem: () => void
   removeIngredientItem: (index: number) => void
 }
 
-const PurchaseOrderIngredientsTable: React.FC<PurchaseOrderIngredientsTableProps> = ({
+const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
   formData,
   handleIngredientChange,
   addIngredientItem,
@@ -246,4 +246,4 @@ const PurchaseOrderIngredientsTable: React.FC<PurchaseOrderIngredientsTableProps
   )
 }
 
-export default PurchaseOrderIngredientsTable
+export default PurchaseIngredientsTable
diff --git a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx b/src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
similarity index 99%
rename from src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx
rename to src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
index 2c2a51d..298686a 100644
--- a/src/views/apps/purchase/purchase-orders/add/PurchaseOrderSummary.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
@@ -8,12 +8,12 @@ import { PurchaseOrderFormData, TransactionCost } from '@/types/apps/purchaseOrd
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import ImageUpload from '@/components/ImageUpload'
 
-interface PurchaseOrderSummaryProps {
+interface PurchaseSummaryProps {
   formData: PurchaseOrderFormData
   handleInputChange: (field: keyof PurchaseOrderFormData, value: any) => void
 }
 
-const PurchaseOrderSummary: React.FC<PurchaseOrderSummaryProps> = ({ formData, handleInputChange }) => {
+const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({ formData, handleInputChange }) => {
   // Initialize transaction costs if not exist
   const transactionCosts = formData.transactionCosts || []
 
@@ -575,4 +575,4 @@ const PurchaseOrderSummary: React.FC<PurchaseOrderSummaryProps> = ({ formData, h
   )
 }
 
-export default PurchaseOrderSummary
+export default PurchaseSummary

From b20e672ea15919bd9f55f9709ce3f2439e8b7a19 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 23:23:59 +0700
Subject: [PATCH 11/42] purchase bills table page

---
 .../apps/purchase/purchase-bills/page.tsx     |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   3 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/purchase-bill.ts               | 244 ++++++++++
 src/types/apps/purchaseBillType.ts            |  12 +
 .../list/PurchaseBillListTable.tsx            | 460 ++++++++++++++++++
 .../purchase/purchase-bills/list/index.tsx    |  19 +
 8 files changed, 749 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/page.tsx
 create mode 100644 src/data/dummy/purchase-bill.ts
 create mode 100644 src/types/apps/purchaseBillType.ts
 create mode 100644 src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
 create mode 100644 src/views/apps/purchase/purchase-bills/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/page.tsx
new file mode 100644
index 0000000..c90cb99
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/page.tsx
@@ -0,0 +1,7 @@
+import PurchaseBillList from '@/views/apps/purchase/purchase-bills/list'
+
+const PurchaseBillsPage = () => {
+  return <PurchaseBillList />
+}
+
+export default PurchaseBillsPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index e1fe92b..c2b2ee5 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -97,6 +97,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           </SubMenu>
           <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
             <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
+              {dictionary['navigation'].purchase_bills}
+            </MenuItem>
             <MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
               {dictionary['navigation'].purchase_orders}
             </MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index f153a38..adaf149 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -115,6 +115,7 @@
     "vendor": "Vendor",
     "sales": "Sales",
     "purchase_text": "Purchase",
-    "purchase_orders": "Purchase Orders"
+    "purchase_orders": "Purchase Orders",
+    "purchase_bills": "Purchase Bills"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 9ad2d0c..510a0d0 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -115,6 +115,7 @@
         "vendor": "Vendor",
         "sales": "Penjualan",
         "purchase_text": "Pembelian",
-        "purchase_orders": "Pesanan Pembelian"
+        "purchase_orders": "Pesanan Pembelian",
+        "purchase_bills": "Tagihan Pembelian"
     }
 }
diff --git a/src/data/dummy/purchase-bill.ts b/src/data/dummy/purchase-bill.ts
new file mode 100644
index 0000000..a9ec2e3
--- /dev/null
+++ b/src/data/dummy/purchase-bill.ts
@@ -0,0 +1,244 @@
+import { PurchaseBillType } from '@/types/apps/purchaseBillType'
+
+export const purchaseBillsData: PurchaseBillType[] = [
+  {
+    id: 1,
+    number: 'PB-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-15',
+    status: 'Belum Dibayar',
+    remainingBill: 5000000,
+    total: 5000000
+  },
+  {
+    id: 2,
+    number: 'PB-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-002',
+    date: '2025-08-28',
+    dueDate: '2025-09-12',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2000000,
+    total: 8000000
+  },
+  {
+    id: 3,
+    number: 'PB-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-003',
+    date: '2025-09-05',
+    dueDate: '2025-09-20',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 3500000
+  },
+  {
+    id: 4,
+    number: 'PB-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-004',
+    date: '2025-08-30',
+    dueDate: '2025-09-14',
+    status: 'Belum Dibayar',
+    remainingBill: 12000000,
+    total: 12000000
+  },
+  {
+    id: 5,
+    number: 'PB-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-005',
+    date: '2025-09-03',
+    dueDate: '2025-09-18',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1500000,
+    total: 6000000
+  },
+  {
+    id: 6,
+    number: 'PB-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-21',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 9000000
+  },
+  {
+    id: 7,
+    number: 'PB-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-007',
+    date: '2025-09-02',
+    dueDate: '2025-09-17',
+    status: 'Belum Dibayar',
+    remainingBill: 7200000,
+    total: 7200000
+  },
+  {
+    id: 8,
+    number: 'PB-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-008',
+    date: '2025-08-27',
+    dueDate: '2025-09-11',
+    status: 'Dibayar Sebagian',
+    remainingBill: 3000000,
+    total: 10000000
+  },
+  {
+    id: 9,
+    number: 'PB-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-009',
+    date: '2025-09-04',
+    dueDate: '2025-09-19',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 4500000
+  },
+  {
+    id: 10,
+    number: 'PB-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-010',
+    date: '2025-09-07',
+    dueDate: '2025-09-22',
+    status: 'Belum Dibayar',
+    remainingBill: 2500000,
+    total: 2500000
+  },
+  {
+    id: 11,
+    number: 'PB-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-011',
+    date: '2025-09-01',
+    dueDate: '2025-09-16',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1000000,
+    total: 7000000
+  },
+  {
+    id: 12,
+    number: 'PB-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-012',
+    date: '2025-09-08',
+    dueDate: '2025-09-23',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 5600000
+  },
+  {
+    id: 13,
+    number: 'PB-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-013',
+    date: '2025-08-29',
+    dueDate: '2025-09-13',
+    status: 'Belum Dibayar',
+    remainingBill: 8000000,
+    total: 8000000
+  },
+  {
+    id: 14,
+    number: 'PB-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-014',
+    date: '2025-09-05',
+    dueDate: '2025-09-20',
+    status: 'Dibayar Sebagian',
+    remainingBill: 4000000,
+    total: 10000000
+  },
+  {
+    id: 15,
+    number: 'PB-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-015',
+    date: '2025-09-03',
+    dueDate: '2025-09-18',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 3000000
+  },
+  {
+    id: 16,
+    number: 'PB-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-016',
+    date: '2025-08-31',
+    dueDate: '2025-09-15',
+    status: 'Belum Dibayar',
+    remainingBill: 6700000,
+    total: 6700000
+  },
+  {
+    id: 17,
+    number: 'PB-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-017',
+    date: '2025-09-02',
+    dueDate: '2025-09-17',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2000000,
+    total: 9000000
+  },
+  {
+    id: 18,
+    number: 'PB-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-018',
+    date: '2025-09-06',
+    dueDate: '2025-09-21',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 7200000
+  },
+  {
+    id: 19,
+    number: 'PB-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-019',
+    date: '2025-09-04',
+    dueDate: '2025-09-19',
+    status: 'Belum Dibayar',
+    remainingBill: 11000000,
+    total: 11000000
+  },
+  {
+    id: 20,
+    number: 'PB-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-020',
+    date: '2025-09-07',
+    dueDate: '2025-09-22',
+    status: 'Dibayar Sebagian',
+    remainingBill: 500000,
+    total: 4500000
+  }
+]
diff --git a/src/types/apps/purchaseBillType.ts b/src/types/apps/purchaseBillType.ts
new file mode 100644
index 0000000..886a294
--- /dev/null
+++ b/src/types/apps/purchaseBillType.ts
@@ -0,0 +1,12 @@
+export type PurchaseBillType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  remainingBill: number
+  total: number
+}
diff --git a/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx b/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
new file mode 100644
index 0000000..488c854
--- /dev/null
+++ b/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
@@ -0,0 +1,460 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { PurchaseBillType } from '@/types/apps/purchaseBillType'
+import { purchaseBillsData } from '@/data/dummy/purchase-bill'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type PurchaseBillTypeWithAction = PurchaseBillType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Purchase Bills
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Belum Dibayar':
+      return 'error'
+    case 'Dibayar Sebagian':
+      return 'warning'
+    case 'Lunas':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<PurchaseBillTypeWithAction>()
+
+const PurchaseBillListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addBillOpen, setAddBillOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [billId, setBillId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<PurchaseBillType[]>(purchaseBillsData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = purchaseBillsData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        bill =>
+          bill.number.toLowerCase().includes(search.toLowerCase()) ||
+          bill.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          bill.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          bill.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(bill => bill.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleBillClick = (billId: string) => {
+    console.log('Navigasi ke detail Bill:', billId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<PurchaseBillTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Bill',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleBillClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Vendor',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('dueDate', {
+        header: 'Tanggal Jatuh Tempo',
+        cell: ({ row }) => <Typography>{row.original.dueDate}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('remainingBill', {
+        header: 'Sisa Tagihan',
+        cell: ({ row }) => (
+          <Typography className='font-medium' color={row.original.remainingBill > 0 ? 'error.main' : 'success.main'}>
+            {formatCurrency(row.original.remainingBill)}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as PurchaseBillType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas', 'Lainnya'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Purchase Bill'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/purchase/bills/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default PurchaseBillListTable
diff --git a/src/views/apps/purchase/purchase-bills/list/index.tsx b/src/views/apps/purchase/purchase-bills/list/index.tsx
new file mode 100644
index 0000000..5dd9c75
--- /dev/null
+++ b/src/views/apps/purchase/purchase-bills/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import PurchaseBillListTable from './PurchaseBillListTable'
+
+const PurchaseBillList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseBillListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseBillList

From d0d5d066a187254fae02c380443c19d658d87a33 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 23:28:17 +0700
Subject: [PATCH 12/42] purchase bill add page

---
 .../apps/purchase/purchase-bills/add/page.tsx | 19 +++++++++++++++++++
 .../add/PurchaseBillAddHeader.tsx             | 19 +++++++++++++++++++
 .../list/PurchaseBillListTable.tsx            |  2 +-
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/add/page.tsx
 create mode 100644 src/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/add/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/add/page.tsx
new file mode 100644
index 0000000..f718bb7
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/add/page.tsx
@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid2'
+
+import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
+import PurchaseBillAddHeader from '@/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader'
+
+const PurchaseBillAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseBillAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseBillAddPage
diff --git a/src/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader.tsx b/src/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader.tsx
new file mode 100644
index 0000000..9e94a63
--- /dev/null
+++ b/src/views/apps/purchase/purchase-bills/add/PurchaseBillAddHeader.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const PurchaseBillAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Tagihan Pembelian
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseBillAddHeader
diff --git a/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx b/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
index 488c854..09f9d44 100644
--- a/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
+++ b/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
@@ -377,7 +377,7 @@ const PurchaseBillListTable = () => {
               component={Link}
               className='max-sm:is-full is-auto'
               startIcon={<i className='tabler-plus' />}
-              href={getLocalizedUrl('/apps/purchase/bills/add', locale as Locale)}
+              href={getLocalizedUrl('/apps/purchase/purchase-bills/add', locale as Locale)}
             >
               Tambah
             </Button>

From 9b787e65d49b2fdae9aba44bb5369052fd0f44f9 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 23:41:04 +0700
Subject: [PATCH 13/42] purchase delivery table page

---
 .../purchase/purchase-deliveries/page.tsx     |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   3 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/purchase-delivery.ts           | 184 ++++++++
 src/types/apps/purchaseDeliveryTypes.ts       |   9 +
 .../list/PurchaseDeliveryListTable.tsx        | 424 ++++++++++++++++++
 .../purchase-deliveries/list/index.tsx        |  19 +
 8 files changed, 650 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-deliveries/page.tsx
 create mode 100644 src/data/dummy/purchase-delivery.ts
 create mode 100644 src/types/apps/purchaseDeliveryTypes.ts
 create mode 100644 src/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable.tsx
 create mode 100644 src/views/apps/purchase/purchase-deliveries/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-deliveries/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-deliveries/page.tsx
new file mode 100644
index 0000000..33d18f1
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-deliveries/page.tsx
@@ -0,0 +1,7 @@
+import PurchaseDeliveryListTable from '@/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable'
+
+const PurchaseDeliveryPage = () => {
+  return <PurchaseDeliveryListTable />
+}
+
+export default PurchaseDeliveryPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index c2b2ee5..006555c 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -100,6 +100,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
               {dictionary['navigation'].purchase_bills}
             </MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-deliveries`}>
+              {dictionary['navigation'].purchase_delivery}
+            </MenuItem>
             <MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
               {dictionary['navigation'].purchase_orders}
             </MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index adaf149..06b04d4 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -116,6 +116,7 @@
     "sales": "Sales",
     "purchase_text": "Purchase",
     "purchase_orders": "Purchase Orders",
-    "purchase_bills": "Purchase Bills"
+    "purchase_bills": "Purchase Bills",
+    "purchase_delivery": "Purchase Delivery"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 510a0d0..3529862 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -116,6 +116,7 @@
         "sales": "Penjualan",
         "purchase_text": "Pembelian",
         "purchase_orders": "Pesanan Pembelian",
-        "purchase_bills": "Tagihan Pembelian"
+        "purchase_bills": "Tagihan Pembelian",
+        "purchase_delivery": "Pengiriman Pembelian"
     }
 }
diff --git a/src/data/dummy/purchase-delivery.ts b/src/data/dummy/purchase-delivery.ts
new file mode 100644
index 0000000..d6a5645
--- /dev/null
+++ b/src/data/dummy/purchase-delivery.ts
@@ -0,0 +1,184 @@
+import { PurchaseDeliveryType } from '@/types/apps/purchaseDeliveryTypes'
+
+export const purchaseDeliveryData: PurchaseDeliveryType[] = [
+  {
+    id: 1,
+    number: 'PD-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-PD-001',
+    date: '2025-09-01',
+    status: 'Open'
+  },
+  {
+    id: 2,
+    number: 'PD-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-PD-002',
+    date: '2025-09-02',
+    status: 'Selesai'
+  },
+  {
+    id: 3,
+    number: 'PD-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-PD-003',
+    date: '2025-09-03',
+    status: 'Open'
+  },
+  {
+    id: 4,
+    number: 'PD-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-PD-004',
+    date: '2025-09-04',
+    status: 'Selesai'
+  },
+  {
+    id: 5,
+    number: 'PD-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-PD-005',
+    date: '2025-09-05',
+    status: 'Open'
+  },
+  {
+    id: 6,
+    number: 'PD-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-PD-006',
+    date: '2025-09-06',
+    status: 'Selesai'
+  },
+  {
+    id: 7,
+    number: 'PD-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-PD-007',
+    date: '2025-09-07',
+    status: 'Open'
+  },
+  {
+    id: 8,
+    number: 'PD-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-PD-008',
+    date: '2025-09-08',
+    status: 'Selesai'
+  },
+  {
+    id: 9,
+    number: 'PD-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-PD-009',
+    date: '2025-09-09',
+    status: 'Open'
+  },
+  {
+    id: 10,
+    number: 'PD-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-PD-010',
+    date: '2025-09-10',
+    status: 'Selesai'
+  },
+  {
+    id: 11,
+    number: 'PD-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-PD-011',
+    date: '2025-09-11',
+    status: 'Open'
+  },
+  {
+    id: 12,
+    number: 'PD-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-PD-012',
+    date: '2025-09-12',
+    status: 'Selesai'
+  },
+  {
+    id: 13,
+    number: 'PD-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-PD-013',
+    date: '2025-09-13',
+    status: 'Open'
+  },
+  {
+    id: 14,
+    number: 'PD-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-PD-014',
+    date: '2025-09-14',
+    status: 'Selesai'
+  },
+  {
+    id: 15,
+    number: 'PD-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-PD-015',
+    date: '2025-09-15',
+    status: 'Open'
+  },
+  {
+    id: 16,
+    number: 'PD-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-PD-016',
+    date: '2025-09-16',
+    status: 'Selesai'
+  },
+  {
+    id: 17,
+    number: 'PD-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-PD-017',
+    date: '2025-09-17',
+    status: 'Open'
+  },
+  {
+    id: 18,
+    number: 'PD-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-PD-018',
+    date: '2025-09-18',
+    status: 'Selesai'
+  },
+  {
+    id: 19,
+    number: 'PD-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-PD-019',
+    date: '2025-09-19',
+    status: 'Open'
+  },
+  {
+    id: 20,
+    number: 'PD-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-PD-020',
+    date: '2025-09-20',
+    status: 'Selesai'
+  }
+]
diff --git a/src/types/apps/purchaseDeliveryTypes.ts b/src/types/apps/purchaseDeliveryTypes.ts
new file mode 100644
index 0000000..b5a859c
--- /dev/null
+++ b/src/types/apps/purchaseDeliveryTypes.ts
@@ -0,0 +1,9 @@
+export type PurchaseDeliveryType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  status: string
+}
diff --git a/src/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable.tsx b/src/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable.tsx
new file mode 100644
index 0000000..4c0c4b5
--- /dev/null
+++ b/src/views/apps/purchase/purchase-deliveries/list/PurchaseDeliveryListTable.tsx
@@ -0,0 +1,424 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { PurchaseDeliveryType } from '@/types/apps/purchaseDeliveryTypes'
+import { purchaseDeliveryData } from '@/data/dummy/purchase-delivery'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type PurchaseDeliveryTypeWithAction = PurchaseDeliveryType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Purchase Delivery
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Open':
+      return 'warning'
+    case 'Selesai':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<PurchaseDeliveryTypeWithAction>()
+
+const PurchaseDeliveryListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addDeliveryOpen, setAddDeliveryOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [deliveryId, setDeliveryId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<PurchaseDeliveryType[]>(purchaseDeliveryData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = purchaseDeliveryData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        delivery =>
+          delivery.number.toLowerCase().includes(search.toLowerCase()) ||
+          delivery.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          delivery.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          delivery.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(delivery => delivery.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleDeliveryClick = (deliveryId: string) => {
+    console.log('Navigasi ke detail Delivery:', deliveryId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<PurchaseDeliveryTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Delivery',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleDeliveryClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Vendor',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as PurchaseDeliveryType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Open', 'Selesai'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Purchase Delivery'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default PurchaseDeliveryListTable
diff --git a/src/views/apps/purchase/purchase-deliveries/list/index.tsx b/src/views/apps/purchase/purchase-deliveries/list/index.tsx
new file mode 100644
index 0000000..33dbb8e
--- /dev/null
+++ b/src/views/apps/purchase/purchase-deliveries/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import PurchaseDeliveryListTable from './PurchaseDeliveryListTable'
+
+const PurchaseDeliveryList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDeliveryListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseDeliveryList

From f585f23c54e0d7cf066f5a548a7d0bc4ca2f9eb8 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 23:55:38 +0700
Subject: [PATCH 14/42] purchase quote list and add

---
 .../purchase/purchase-quotes/add/page.tsx     |  19 +
 .../apps/purchase/purchase-quotes/page.tsx    |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   3 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/purchase-quote.ts              | 224 +++++++++
 src/types/apps/purchaseQuoteTypes.ts          |  11 +
 .../add/PurchaseQuoteAddHeader.tsx            |  19 +
 .../list/PurchaseQuoteListTable.tsx           | 452 ++++++++++++++++++
 .../purchase/purchase-quote/list/index.tsx    |  19 +
 10 files changed, 758 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/add/page.tsx
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/page.tsx
 create mode 100644 src/data/dummy/purchase-quote.ts
 create mode 100644 src/types/apps/purchaseQuoteTypes.ts
 create mode 100644 src/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader.tsx
 create mode 100644 src/views/apps/purchase/purchase-quote/list/PurchaseQuoteListTable.tsx
 create mode 100644 src/views/apps/purchase/purchase-quote/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/add/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/add/page.tsx
new file mode 100644
index 0000000..a38dead
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/add/page.tsx
@@ -0,0 +1,19 @@
+import Grid from '@mui/material/Grid2'
+
+import PurchaseAddForm from '@/views/apps/purchase/purchase-form/PurchaseAddForm'
+import PurchaseQuoteAddHeader from '@/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader'
+
+const PurchaseQuoteAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseQuoteAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseQuoteAddPage
diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/page.tsx
new file mode 100644
index 0000000..f77e3f6
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-quotes/page.tsx
@@ -0,0 +1,7 @@
+import PurchaseQuoteList from '@/views/apps/purchase/purchase-quote/list'
+
+const PurchaseQuotePage = () => {
+  return <PurchaseQuoteList />
+}
+
+export default PurchaseQuotePage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 006555c..0de51bc 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -106,6 +106,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
               {dictionary['navigation'].purchase_orders}
             </MenuItem>
+            <MenuItem href={`/${locale}/apps/purchase/purchase-quotes`}>
+              {dictionary['navigation'].purchase_quotes}
+            </MenuItem>
           </SubMenu>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 06b04d4..63e0ece 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -117,6 +117,7 @@
     "purchase_text": "Purchase",
     "purchase_orders": "Purchase Orders",
     "purchase_bills": "Purchase Bills",
-    "purchase_delivery": "Purchase Delivery"
+    "purchase_delivery": "Purchase Delivery",
+    "purchase_quotes": "Purchase Quotes"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 3529862..ecdc0a1 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -117,6 +117,7 @@
         "purchase_text": "Pembelian",
         "purchase_orders": "Pesanan Pembelian",
         "purchase_bills": "Tagihan Pembelian",
-        "purchase_delivery": "Pengiriman Pembelian"
+        "purchase_delivery": "Pengiriman Pembelian",
+        "purchase_quotes": "Penawaran Pembelian"
     }
 }
diff --git a/src/data/dummy/purchase-quote.ts b/src/data/dummy/purchase-quote.ts
new file mode 100644
index 0000000..d7ae7cd
--- /dev/null
+++ b/src/data/dummy/purchase-quote.ts
@@ -0,0 +1,224 @@
+import { PurchaseQuoteType } from '@/types/apps/purchaseQuoteTypes'
+
+export const purchaseQuoteData: PurchaseQuoteType[] = [
+  {
+    id: 1,
+    number: 'PQ-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-PQ-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-10',
+    status: 'Open',
+    total: 4500000
+  },
+  {
+    id: 2,
+    number: 'PQ-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-PQ-002',
+    date: '2025-09-02',
+    dueDate: '2025-09-12',
+    status: 'Selesai',
+    total: 7200000
+  },
+  {
+    id: 3,
+    number: 'PQ-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-PQ-003',
+    date: '2025-09-03',
+    dueDate: '2025-09-13',
+    status: 'Dipesan Sebagai',
+    total: 3100000
+  },
+  {
+    id: 4,
+    number: 'PQ-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-PQ-004',
+    date: '2025-09-04',
+    dueDate: '2025-09-15',
+    status: 'Open',
+    total: 5800000
+  },
+  {
+    id: 5,
+    number: 'PQ-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-PQ-005',
+    date: '2025-09-05',
+    dueDate: '2025-09-16',
+    status: 'Selesai',
+    total: 8000000
+  },
+  {
+    id: 6,
+    number: 'PQ-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-PQ-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-17',
+    status: 'Dipesan Sebagai',
+    total: 2600000
+  },
+  {
+    id: 7,
+    number: 'PQ-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-PQ-007',
+    date: '2025-09-07',
+    dueDate: '2025-09-18',
+    status: 'Open',
+    total: 9300000
+  },
+  {
+    id: 8,
+    number: 'PQ-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-PQ-008',
+    date: '2025-09-08',
+    dueDate: '2025-09-19',
+    status: 'Selesai',
+    total: 4100000
+  },
+  {
+    id: 9,
+    number: 'PQ-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-PQ-009',
+    date: '2025-09-09',
+    dueDate: '2025-09-20',
+    status: 'Dipesan Sebagai',
+    total: 6900000
+  },
+  {
+    id: 10,
+    number: 'PQ-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-PQ-010',
+    date: '2025-09-10',
+    dueDate: '2025-09-21',
+    status: 'Open',
+    total: 5500000
+  },
+  {
+    id: 11,
+    number: 'PQ-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-PQ-011',
+    date: '2025-09-11',
+    dueDate: '2025-09-22',
+    status: 'Selesai',
+    total: 12000000
+  },
+  {
+    id: 12,
+    number: 'PQ-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-PQ-012',
+    date: '2025-09-12',
+    dueDate: '2025-09-23',
+    status: 'Dipesan Sebagai',
+    total: 3300000
+  },
+  {
+    id: 13,
+    number: 'PQ-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-PQ-013',
+    date: '2025-09-13',
+    dueDate: '2025-09-24',
+    status: 'Open',
+    total: 7500000
+  },
+  {
+    id: 14,
+    number: 'PQ-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-PQ-014',
+    date: '2025-09-14',
+    dueDate: '2025-09-25',
+    status: 'Selesai',
+    total: 8600000
+  },
+  {
+    id: 15,
+    number: 'PQ-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-PQ-015',
+    date: '2025-09-15',
+    dueDate: '2025-09-26',
+    status: 'Dipesan Sebagai',
+    total: 2950000
+  },
+  {
+    id: 16,
+    number: 'PQ-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-PQ-016',
+    date: '2025-09-16',
+    dueDate: '2025-09-27',
+    status: 'Open',
+    total: 6800000
+  },
+  {
+    id: 17,
+    number: 'PQ-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-PQ-017',
+    date: '2025-09-17',
+    dueDate: '2025-09-28',
+    status: 'Selesai',
+    total: 4700000
+  },
+  {
+    id: 18,
+    number: 'PQ-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-PQ-018',
+    date: '2025-09-18',
+    dueDate: '2025-09-29',
+    status: 'Dipesan Sebagai',
+    total: 5300000
+  },
+  {
+    id: 19,
+    number: 'PQ-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-PQ-019',
+    date: '2025-09-19',
+    dueDate: '2025-09-30',
+    status: 'Open',
+    total: 9500000
+  },
+  {
+    id: 20,
+    number: 'PQ-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-PQ-020',
+    date: '2025-09-20',
+    dueDate: '2025-10-01',
+    status: 'Selesai',
+    total: 4200000
+  }
+]
diff --git a/src/types/apps/purchaseQuoteTypes.ts b/src/types/apps/purchaseQuoteTypes.ts
new file mode 100644
index 0000000..72fb878
--- /dev/null
+++ b/src/types/apps/purchaseQuoteTypes.ts
@@ -0,0 +1,11 @@
+export type PurchaseQuoteType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}
diff --git a/src/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader.tsx b/src/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader.tsx
new file mode 100644
index 0000000..239107e
--- /dev/null
+++ b/src/views/apps/purchase/purchase-quote/add/PurchaseQuoteAddHeader.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const PurchaseQuoteAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Penawaran Pembelian
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseQuoteAddHeader
diff --git a/src/views/apps/purchase/purchase-quote/list/PurchaseQuoteListTable.tsx b/src/views/apps/purchase/purchase-quote/list/PurchaseQuoteListTable.tsx
new file mode 100644
index 0000000..6217168
--- /dev/null
+++ b/src/views/apps/purchase/purchase-quote/list/PurchaseQuoteListTable.tsx
@@ -0,0 +1,452 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { PurchaseQuoteType } from '@/types/apps/purchaseQuoteTypes'
+import { purchaseQuoteData } from '@/data/dummy/purchase-quote'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type PurchaseQuoteTypeWithAction = PurchaseQuoteType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Purchase Quote
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Open':
+      return 'primary'
+    case 'Dipesan Sebagian':
+      return 'warning'
+    case 'Selesai':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<PurchaseQuoteTypeWithAction>()
+
+const PurchaseQuoteListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addQuoteOpen, setAddQuoteOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [quoteId, setQuoteId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<PurchaseQuoteType[]>(purchaseQuoteData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = purchaseQuoteData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        quote =>
+          quote.number.toLowerCase().includes(search.toLowerCase()) ||
+          quote.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          quote.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          quote.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(quote => quote.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleQuoteClick = (quoteId: string) => {
+    console.log('Navigasi ke detail Quote:', quoteId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<PurchaseQuoteTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Quote',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleQuoteClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Vendor',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('dueDate', {
+        header: 'Tanggal Jatuh Tempo',
+        cell: ({ row }) => <Typography>{row.original.dueDate}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as PurchaseQuoteType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Open', 'Selesai', 'Dipesan Sebagian'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Purchase Quote'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/purchase/purchase-quotes/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default PurchaseQuoteListTable
diff --git a/src/views/apps/purchase/purchase-quote/list/index.tsx b/src/views/apps/purchase/purchase-quote/list/index.tsx
new file mode 100644
index 0000000..b5c041a
--- /dev/null
+++ b/src/views/apps/purchase/purchase-quote/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import PurchaseQuoteListTable from './PurchaseQuoteListTable'
+
+const PurchaseQuoteList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseQuoteListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseQuoteList

From cc3a0c07a93f53b6e98a7cbec87128280279c47b Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 00:19:11 +0700
Subject: [PATCH 15/42] Sales Invoice Page

---
 .../(private)/apps/sales/sales-bills/page.tsx |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   1 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/sales.ts                       | 244 +++++++++
 src/types/apps/salesTypes.ts                  |  12 +
 .../sales-bill/list/SalesBillListTable.tsx    | 464 ++++++++++++++++++
 .../apps/sales/sales-bill/list/index.tsx      |  19 +
 8 files changed, 751 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/sales/sales-bills/page.tsx
 create mode 100644 src/data/dummy/sales.ts
 create mode 100644 src/types/apps/salesTypes.ts
 create mode 100644 src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
 create mode 100644 src/views/apps/sales/sales-bill/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-bills/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-bills/page.tsx
new file mode 100644
index 0000000..314d4d3
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-bills/page.tsx
@@ -0,0 +1,7 @@
+import SalesBillList from '@/views/apps/sales/sales-bill/list'
+
+const SalesBillPage = () => {
+  return <SalesBillList />
+}
+
+export default SalesBillPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 0de51bc..7e30be1 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -93,6 +93,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
         <MenuSection label={dictionary['navigation'].appsPages}>
           <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-user' />}>
             <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
           <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 63e0ece..86399b1 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -118,6 +118,7 @@
     "purchase_orders": "Purchase Orders",
     "purchase_bills": "Purchase Bills",
     "purchase_delivery": "Purchase Delivery",
-    "purchase_quotes": "Purchase Quotes"
+    "purchase_quotes": "Purchase Quotes",
+    "invoices": "Invoices"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index ecdc0a1..9126d73 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -118,6 +118,7 @@
         "purchase_orders": "Pesanan Pembelian",
         "purchase_bills": "Tagihan Pembelian",
         "purchase_delivery": "Pengiriman Pembelian",
-        "purchase_quotes": "Penawaran Pembelian"
+        "purchase_quotes": "Penawaran Pembelian",
+        "invoices": "Tagihan"
     }
 }
diff --git a/src/data/dummy/sales.ts b/src/data/dummy/sales.ts
new file mode 100644
index 0000000..72f4452
--- /dev/null
+++ b/src/data/dummy/sales.ts
@@ -0,0 +1,244 @@
+import { SalesBillType } from '@/types/apps/salesTypes'
+
+export const salesBillData: SalesBillType[] = [
+  {
+    id: 1,
+    number: 'INV/001',
+    customerName: 'Andi Wijaya',
+    customerCompany: 'PT Nusantara Abadi',
+    reference: 'REF-SB-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-15',
+    status: 'Belum Dibayar',
+    remainingBill: 5000000,
+    total: 5000000
+  },
+  {
+    id: 2,
+    number: 'INV/002',
+    customerName: 'Siti Rahma',
+    customerCompany: 'CV Cahaya Abadi',
+    reference: 'REF-SB-002',
+    date: '2025-09-02',
+    dueDate: '2025-09-16',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2000000,
+    total: 8000000
+  },
+  {
+    id: 3,
+    number: 'INV/003',
+    customerName: 'Budi Santoso',
+    customerCompany: 'UD Sejahtera',
+    reference: 'REF-SB-003',
+    date: '2025-09-03',
+    dueDate: '2025-09-17',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 3500000
+  },
+  {
+    id: 4,
+    number: 'INV/004',
+    customerName: 'Rina Kartika',
+    customerCompany: 'PT Mitra Jaya',
+    reference: 'REF-SB-004',
+    date: '2025-09-04',
+    dueDate: '2025-09-18',
+    status: 'Void',
+    remainingBill: 0,
+    total: 4200000
+  },
+  {
+    id: 5,
+    number: 'INV/005',
+    customerName: 'Agus Salim',
+    customerCompany: 'CV Bumi Persada',
+    reference: 'REF-SB-005',
+    date: '2025-09-05',
+    dueDate: '2025-09-19',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 6100000
+  },
+  {
+    id: 6,
+    number: 'INV/006',
+    customerName: 'Maya Lestari',
+    customerCompany: 'PT Tunas Baru',
+    reference: 'REF-SB-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-20',
+    status: 'Belum Dibayar',
+    remainingBill: 9000000,
+    total: 9000000
+  },
+  {
+    id: 7,
+    number: 'INV/007',
+    customerName: 'Hendra Gunawan',
+    customerCompany: 'UD Prima Sentosa',
+    reference: 'REF-SB-007',
+    date: '2025-09-07',
+    dueDate: '2025-09-21',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1500000,
+    total: 7500000
+  },
+  {
+    id: 8,
+    number: 'INV/008',
+    customerName: 'Dewi Anggraini',
+    customerCompany: 'CV Inti Mandiri',
+    reference: 'REF-SB-008',
+    date: '2025-09-08',
+    dueDate: '2025-09-22',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 4500000
+  },
+  {
+    id: 9,
+    number: 'INV/009',
+    customerName: 'Yusuf Arifin',
+    customerCompany: 'PT Surya Kencana',
+    reference: 'REF-SB-009',
+    date: '2025-09-09',
+    dueDate: '2025-09-23',
+    status: 'Void',
+    remainingBill: 0,
+    total: 5000000
+  },
+  {
+    id: 10,
+    number: 'INV/010',
+    customerName: 'Nurhayati',
+    customerCompany: 'UD Cahaya Mulia',
+    reference: 'REF-SB-010',
+    date: '2025-09-10',
+    dueDate: '2025-09-24',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 3000000
+  },
+  {
+    id: 11,
+    number: 'INV/011',
+    customerName: 'Fajar Hidayat',
+    customerCompany: 'PT Bina Karya',
+    reference: 'REF-SB-011',
+    date: '2025-09-11',
+    dueDate: '2025-09-25',
+    status: 'Belum Dibayar',
+    remainingBill: 6000000,
+    total: 6000000
+  },
+  {
+    id: 12,
+    number: 'INV/012',
+    customerName: 'Ratna Sari',
+    customerCompany: 'CV Mega Utama',
+    reference: 'REF-SB-012',
+    date: '2025-09-12',
+    dueDate: '2025-09-26',
+    status: 'Dibayar Sebagian',
+    remainingBill: 2500000,
+    total: 10000000
+  },
+  {
+    id: 13,
+    number: 'INV/013',
+    customerName: 'Tono Prasetyo',
+    customerCompany: 'UD Karya Indah',
+    reference: 'REF-SB-013',
+    date: '2025-09-13',
+    dueDate: '2025-09-27',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 7000000
+  },
+  {
+    id: 14,
+    number: 'INV/014',
+    customerName: 'Lina Marlina',
+    customerCompany: 'PT Harmoni Sejati',
+    reference: 'REF-SB-014',
+    date: '2025-09-14',
+    dueDate: '2025-09-28',
+    status: 'Void',
+    remainingBill: 0,
+    total: 3200000
+  },
+  {
+    id: 15,
+    number: 'INV/015',
+    customerName: 'Arman Saputra',
+    customerCompany: 'CV Sentra Niaga',
+    reference: 'REF-SB-015',
+    date: '2025-09-15',
+    dueDate: '2025-09-29',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 5400000
+  },
+  {
+    id: 16,
+    number: 'INV/016',
+    customerName: 'Indah Permata',
+    customerCompany: 'PT Citra Abadi',
+    reference: 'REF-SB-016',
+    date: '2025-09-16',
+    dueDate: '2025-09-30',
+    status: 'Belum Dibayar',
+    remainingBill: 8000000,
+    total: 8000000
+  },
+  {
+    id: 17,
+    number: 'INV/017',
+    customerName: 'Adi Putra',
+    customerCompany: 'UD Makmur Bersama',
+    reference: 'REF-SB-017',
+    date: '2025-09-17',
+    dueDate: '2025-10-01',
+    status: 'Dibayar Sebagian',
+    remainingBill: 1200000,
+    total: 6200000
+  },
+  {
+    id: 18,
+    number: 'INV/018',
+    customerName: 'Sri Wahyuni',
+    customerCompany: 'CV Bintang Terang',
+    reference: 'REF-SB-018',
+    date: '2025-09-18',
+    dueDate: '2025-10-02',
+    status: 'Lunas',
+    remainingBill: 0,
+    total: 9200000
+  },
+  {
+    id: 19,
+    number: 'INV/019',
+    customerName: 'Eko Prabowo',
+    customerCompany: 'PT Mandiri Jaya',
+    reference: 'REF-SB-019',
+    date: '2025-09-19',
+    dueDate: '2025-10-03',
+    status: 'Void',
+    remainingBill: 0,
+    total: 2500000
+  },
+  {
+    id: 20,
+    number: 'INV/020',
+    customerName: 'Novi Astuti',
+    customerCompany: 'UD Sinar Harapan',
+    reference: 'REF-SB-020',
+    date: '2025-09-20',
+    dueDate: '2025-10-04',
+    status: 'Retur',
+    remainingBill: 0,
+    total: 4800000
+  }
+]
diff --git a/src/types/apps/salesTypes.ts b/src/types/apps/salesTypes.ts
new file mode 100644
index 0000000..0c57b4e
--- /dev/null
+++ b/src/types/apps/salesTypes.ts
@@ -0,0 +1,12 @@
+export type SalesBillType = {
+  id: number
+  number: string
+  customerName: string
+  customerCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  remainingBill: number
+  total: number
+}
diff --git a/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx b/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
new file mode 100644
index 0000000..6245605
--- /dev/null
+++ b/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
@@ -0,0 +1,464 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { SalesBillType } from '@/types/apps/salesTypes'
+import { salesBillData } from '@/data/dummy/sales'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type SalesBillTypeWithAction = SalesBillType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Sales Bill
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Belum Dibayar':
+      return 'error'
+    case 'Dibayar Sebagian':
+      return 'warning'
+    case 'Lunas':
+      return 'success'
+    case 'Void':
+      return 'default'
+    case 'Retur':
+      return 'info'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<SalesBillTypeWithAction>()
+
+const SalesBillListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addBillOpen, setAddBillOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [billId, setBillId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<SalesBillType[]>(salesBillData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = salesBillData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        bill =>
+          bill.number.toLowerCase().includes(search.toLowerCase()) ||
+          bill.customerName.toLowerCase().includes(search.toLowerCase()) ||
+          bill.customerCompany.toLowerCase().includes(search.toLowerCase()) ||
+          bill.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(bill => bill.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleBillClick = (billId: string) => {
+    console.log('Navigasi ke detail Sales Bill:', billId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<SalesBillTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Bill',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleBillClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('customerName', {
+        header: 'Customer',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.customerName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.customerCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('dueDate', {
+        header: 'Tanggal Jatuh Tempo',
+        cell: ({ row }) => <Typography>{row.original.dueDate}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('remainingBill', {
+        header: 'Sisa Tagihan',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.remainingBill > 0 ? 'text-red-600' : 'text-green-600'}`}>
+            {formatCurrency(row.original.remainingBill)}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as SalesBillType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas', 'Void', 'Retur'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Sales Bill'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/sales/sales-bills/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default SalesBillListTable
diff --git a/src/views/apps/sales/sales-bill/list/index.tsx b/src/views/apps/sales/sales-bill/list/index.tsx
new file mode 100644
index 0000000..777f7be
--- /dev/null
+++ b/src/views/apps/sales/sales-bill/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import SalesBillListTable from './SalesBillListTable'
+
+const SalesBillList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <SalesBillListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesBillList

From ce9f845fe44855c3560907a1cecaa62d12825592 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 00:28:23 +0700
Subject: [PATCH 16/42] Sales Delivery Page

---
 .../apps/sales/sales-deliveries/page.tsx      |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   1 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/sales.ts                       | 185 +++++++-
 src/types/apps/salesTypes.ts                  |  10 +
 .../list/SalesDeliveryListTable.tsx           | 424 ++++++++++++++++++
 .../sales/sales-deliveries/list/index.tsx     |  19 +
 8 files changed, 649 insertions(+), 3 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/sales/sales-deliveries/page.tsx
 create mode 100644 src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx
 create mode 100644 src/views/apps/sales/sales-deliveries/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-deliveries/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-deliveries/page.tsx
new file mode 100644
index 0000000..8036a1c
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-deliveries/page.tsx
@@ -0,0 +1,7 @@
+import SalesDeliveryListTable from '@/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable'
+
+const SalesDeliveryPage = () => {
+  return <SalesDeliveryListTable />
+}
+
+export default SalesDeliveryPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 7e30be1..0afa81b 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -94,6 +94,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-user' />}>
             <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
           <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 86399b1..7ddc720 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -119,6 +119,7 @@
     "purchase_bills": "Purchase Bills",
     "purchase_delivery": "Purchase Delivery",
     "purchase_quotes": "Purchase Quotes",
-    "invoices": "Invoices"
+    "invoices": "Invoices",
+    "deliveries": "Deliveries"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 9126d73..bc87362 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -119,6 +119,7 @@
         "purchase_bills": "Tagihan Pembelian",
         "purchase_delivery": "Pengiriman Pembelian",
         "purchase_quotes": "Penawaran Pembelian",
-        "invoices": "Tagihan"
+        "invoices": "Tagihan",
+        "deliveries": "Pengiriman"
     }
 }
diff --git a/src/data/dummy/sales.ts b/src/data/dummy/sales.ts
index 72f4452..d1dabdc 100644
--- a/src/data/dummy/sales.ts
+++ b/src/data/dummy/sales.ts
@@ -1,4 +1,4 @@
-import { SalesBillType } from '@/types/apps/salesTypes'
+import { SalesBillType, SalesDeliveryType } from '@/types/apps/salesTypes'
 
 export const salesBillData: SalesBillType[] = [
   {
@@ -242,3 +242,186 @@ export const salesBillData: SalesBillType[] = [
     total: 4800000
   }
 ]
+
+export const salesDeliveryData: SalesDeliveryType[] = [
+  {
+    id: 1,
+    number: 'INV-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-INV-001',
+    date: '2025-09-01',
+    status: 'Open'
+  },
+  {
+    id: 2,
+    number: 'INV-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-INV-002',
+    date: '2025-09-02',
+    status: 'Selesai'
+  },
+  {
+    id: 3,
+    number: 'INV-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-INV-003',
+    date: '2025-09-03',
+    status: 'Open'
+  },
+  {
+    id: 4,
+    number: 'INV-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-INV-004',
+    date: '2025-09-04',
+    status: 'Selesai'
+  },
+  {
+    id: 5,
+    number: 'INV-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-INV-005',
+    date: '2025-09-05',
+    status: 'Open'
+  },
+  {
+    id: 6,
+    number: 'INV-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-INV-006',
+    date: '2025-09-06',
+    status: 'Selesai'
+  },
+  {
+    id: 7,
+    number: 'INV-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-INV-007',
+    date: '2025-09-07',
+    status: 'Open'
+  },
+  {
+    id: 8,
+    number: 'INV-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-INV-008',
+    date: '2025-09-08',
+    status: 'Selesai'
+  },
+  {
+    id: 9,
+    number: 'INV-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-INV-009',
+    date: '2025-09-09',
+    status: 'Open'
+  },
+  {
+    id: 10,
+    number: 'INV-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-INV-010',
+    date: '2025-09-10',
+    status: 'Selesai'
+  },
+  {
+    id: 11,
+    number: 'INV-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-INV-011',
+    date: '2025-09-11',
+    status: 'Open'
+  },
+  {
+    id: 12,
+    number: 'INV-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-INV-012',
+    date: '2025-09-12',
+    status: 'Selesai'
+  },
+  {
+    id: 13,
+    number: 'INV-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-INV-013',
+    date: '2025-09-13',
+    status: 'Open'
+  },
+  {
+    id: 14,
+    number: 'INV-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-INV-014',
+    date: '2025-09-14',
+    status: 'Selesai'
+  },
+  {
+    id: 15,
+    number: 'INV-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-INV-015',
+    date: '2025-09-15',
+    status: 'Open'
+  },
+  {
+    id: 16,
+    number: 'INV-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-INV-016',
+    date: '2025-09-16',
+    status: 'Selesai'
+  },
+  {
+    id: 17,
+    number: 'INV-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-INV-017',
+    date: '2025-09-17',
+    status: 'Open'
+  },
+  {
+    id: 18,
+    number: 'INV-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-INV-018',
+    date: '2025-09-18',
+    status: 'Selesai'
+  },
+  {
+    id: 19,
+    number: 'INV-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-INV-019',
+    date: '2025-09-19',
+    status: 'Open'
+  },
+  {
+    id: 20,
+    number: 'INV-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-INV-020',
+    date: '2025-09-20',
+    status: 'Selesai'
+  }
+]
diff --git a/src/types/apps/salesTypes.ts b/src/types/apps/salesTypes.ts
index 0c57b4e..527cdd5 100644
--- a/src/types/apps/salesTypes.ts
+++ b/src/types/apps/salesTypes.ts
@@ -10,3 +10,13 @@ export type SalesBillType = {
   remainingBill: number
   total: number
 }
+
+export type SalesDeliveryType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  status: string
+}
diff --git a/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx b/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx
new file mode 100644
index 0000000..6a2faf4
--- /dev/null
+++ b/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx
@@ -0,0 +1,424 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { SalesDeliveryType } from '@/types/apps/salesTypes'
+import { salesDeliveryData } from '@/data/dummy/sales'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type SalesDeliveryTypeWithAction = SalesDeliveryType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Sales Delivery
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Open':
+      return 'warning'
+    case 'Selesai':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<SalesDeliveryTypeWithAction>()
+
+const SalesDeliveryListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addDeliveryOpen, setAddDeliveryOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [deliveryId, setDeliveryId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<SalesDeliveryType[]>(salesDeliveryData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = salesDeliveryData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        delivery =>
+          delivery.number.toLowerCase().includes(search.toLowerCase()) ||
+          delivery.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          delivery.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          delivery.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(delivery => delivery.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleDeliveryClick = (deliveryId: string) => {
+    console.log('Navigasi ke detail Delivery:', deliveryId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<SalesDeliveryTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Delivery',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleDeliveryClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Vendor',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as SalesDeliveryType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Open', 'Selesai'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Sales Delivery'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default SalesDeliveryListTable
diff --git a/src/views/apps/sales/sales-deliveries/list/index.tsx b/src/views/apps/sales/sales-deliveries/list/index.tsx
new file mode 100644
index 0000000..99a2c8a
--- /dev/null
+++ b/src/views/apps/sales/sales-deliveries/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import SalesDeliveryListTable from './SalesDeliveryListTable'
+
+const SalesDeliveryList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <SalesDeliveryListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesDeliveryList

From 8ec6ba62f3a57e00989bc5ede21eec9c492c0aa0 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 00:40:54 +0700
Subject: [PATCH 17/42] Sales Order List table

---
 .../apps/sales/sales-orders/page.tsx          |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   1 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/sales.ts                       | 225 ++++++++-
 src/types/apps/salesTypes.ts                  |  12 +
 .../list/SalesDeliveryListTable.tsx           |   2 +-
 .../sales-orders/list/SalesOrderListTable.tsx | 454 ++++++++++++++++++
 .../apps/sales/sales-orders/list/index.tsx    |  19 +
 9 files changed, 722 insertions(+), 4 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/sales/sales-orders/page.tsx
 create mode 100644 src/views/apps/sales/sales-orders/list/SalesOrderListTable.tsx
 create mode 100644 src/views/apps/sales/sales-orders/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-orders/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-orders/page.tsx
new file mode 100644
index 0000000..5c694ba
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-orders/page.tsx
@@ -0,0 +1,7 @@
+import SalesOrderList from '@/views/apps/sales/sales-orders/list'
+
+const SalesOrdersPage = () => {
+  return <SalesOrderList />
+}
+
+export default SalesOrdersPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 0afa81b..fcabc32 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -95,6 +95,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
+            <MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
           <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 7ddc720..77b0b1d 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -120,6 +120,7 @@
     "purchase_delivery": "Purchase Delivery",
     "purchase_quotes": "Purchase Quotes",
     "invoices": "Invoices",
-    "deliveries": "Deliveries"
+    "deliveries": "Deliveries",
+    "sales_orders": "Orders"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index bc87362..b174d83 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -120,6 +120,7 @@
         "purchase_delivery": "Pengiriman Pembelian",
         "purchase_quotes": "Penawaran Pembelian",
         "invoices": "Tagihan",
-        "deliveries": "Pengiriman"
+        "deliveries": "Pengiriman",
+        "sales_orders": "Pemesanan"
     }
 }
diff --git a/src/data/dummy/sales.ts b/src/data/dummy/sales.ts
index d1dabdc..f207300 100644
--- a/src/data/dummy/sales.ts
+++ b/src/data/dummy/sales.ts
@@ -1,4 +1,4 @@
-import { SalesBillType, SalesDeliveryType } from '@/types/apps/salesTypes'
+import { SalesBillType, SalesDeliveryType, SalesOrderType } from '@/types/apps/salesTypes'
 
 export const salesBillData: SalesBillType[] = [
   {
@@ -425,3 +425,226 @@ export const salesDeliveryData: SalesDeliveryType[] = [
     status: 'Selesai'
   }
 ]
+
+export const salesOrdersData: SalesOrderType[] = [
+  {
+    id: 1,
+    number: 'PO/00040',
+    vendorName: 'Kairav Wijaya Nababan',
+    vendorCompany: 'Yayasan Haryanto Tbk',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2037170
+  },
+  {
+    id: 2,
+    number: 'PO/00041',
+    vendorName: 'Sari Melani Hutapea',
+    vendorCompany: 'PT Santoso Jaya',
+    reference: 'REF-2025-001',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Draft',
+    total: 1875500
+  },
+  {
+    id: 3,
+    number: 'PO/00042',
+    vendorName: 'Budi Prasetyo Manullang',
+    vendorCompany: 'CV Wijaya Makmur',
+    reference: 'REF-2025-002',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3250750
+  },
+  {
+    id: 4,
+    number: 'PO/00043',
+    vendorName: 'Maya Sari Lumban Gaol',
+    vendorCompany: 'PT Indah Permata',
+    reference: '',
+    date: '02/09/2025',
+    dueDate: '16/09/2025',
+    status: 'Selesai',
+    total: 980250
+  },
+  {
+    id: 5,
+    number: 'PO/00044',
+    vendorName: 'Rahman Hakim Siahaan',
+    vendorCompany: 'Toko Bahagia Sejahtera',
+    reference: 'REF-2025-003',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Draft',
+    total: 4125890
+  },
+  {
+    id: 6,
+    number: 'PO/00045',
+    vendorName: 'Dewi Anggraini Panjaitan',
+    vendorCompany: 'PT Maju Bersama',
+    reference: 'REF-2025-004',
+    date: '01/09/2025',
+    dueDate: '15/09/2025',
+    status: 'Selesai',
+    total: 2678300
+  },
+  {
+    id: 7,
+    number: 'PO/00046',
+    vendorName: 'Agung Wijaya Simbolon',
+    vendorCompany: 'CV Karya Mandiri',
+    reference: '',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 1456780
+  },
+  {
+    id: 8,
+    number: 'PO/00047',
+    vendorName: 'Fitri Handayani Sitorus',
+    vendorCompany: 'PT Global Nusantara',
+    reference: 'REF-2025-005',
+    date: '04/09/2025',
+    dueDate: '18/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5892450
+  },
+  {
+    id: 9,
+    number: 'PO/00048',
+    vendorName: 'Andi Setiawan Tampubolon',
+    vendorCompany: 'Yayasan Pembangunan Tbk',
+    reference: 'REF-2025-006',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 3567120
+  },
+  {
+    id: 10,
+    number: 'PO/00049',
+    vendorName: 'Rina Maharani Hutasoit',
+    vendorCompany: 'PT Sejahtera Abadi',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Disetujui',
+    total: 2234680
+  },
+  {
+    id: 11,
+    number: 'PO/00050',
+    vendorName: 'Joko Santoso Nainggolan',
+    vendorCompany: 'CV Berkah Jaya',
+    reference: 'REF-2025-007',
+    date: '03/09/2025',
+    dueDate: '17/09/2025',
+    status: 'Selesai',
+    total: 1789560
+  },
+  {
+    id: 12,
+    number: 'PO/00051',
+    vendorName: 'Linda Safitri Simanjuntak',
+    vendorCompany: 'PT Harapan Bangsa',
+    reference: 'REF-2025-008',
+    date: '07/09/2025',
+    dueDate: '21/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 4321870
+  },
+  {
+    id: 13,
+    number: 'PO/00052',
+    vendorName: 'Irfan Maulana Pasaribu',
+    vendorCompany: 'CV Sumber Rejeki',
+    reference: 'REF-2025-009',
+    date: '10/09/2025',
+    dueDate: '24/09/2025',
+    status: 'Draft',
+    total: 2567890
+  },
+  {
+    id: 14,
+    number: 'PO/00053',
+    vendorName: 'Siska Permata Sinaga',
+    vendorCompany: 'PT Mitra Sukses',
+    reference: '',
+    date: '11/09/2025',
+    dueDate: '25/09/2025',
+    status: 'Disetujui',
+    total: 3456780
+  },
+  {
+    id: 15,
+    number: 'PO/00054',
+    vendorName: 'Rizky Aditya Siregar',
+    vendorCompany: 'Toko Aman Sentosa',
+    reference: 'REF-2025-010',
+    date: '08/09/2025',
+    dueDate: '22/09/2025',
+    status: 'Selesai',
+    total: 1234567
+  },
+  {
+    id: 16,
+    number: 'PO/00055',
+    vendorName: 'Nina Sari Hutabarat',
+    vendorCompany: 'PT Cahaya Terang',
+    reference: 'REF-2025-011',
+    date: '12/09/2025',
+    dueDate: '26/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 5678900
+  },
+  {
+    id: 17,
+    number: 'PO/00056',
+    vendorName: 'Doni Prasetya Situmorang',
+    vendorCompany: 'CV Barokah Makmur',
+    reference: '',
+    date: '09/09/2025',
+    dueDate: '23/09/2025',
+    status: 'Draft',
+    total: 987654
+  },
+  {
+    id: 18,
+    number: 'PO/00057',
+    vendorName: 'Anita Dewi Marpaung',
+    vendorCompany: 'Yayasan Karya Bhakti',
+    reference: 'REF-2025-012',
+    date: '06/09/2025',
+    dueDate: '20/09/2025',
+    status: 'Disetujui',
+    total: 4567123
+  },
+  {
+    id: 19,
+    number: 'PO/00058',
+    vendorName: 'Tommy Wijaya Samosir',
+    vendorCompany: 'PT Bintang Timur',
+    reference: 'REF-2025-013',
+    date: '13/09/2025',
+    dueDate: '27/09/2025',
+    status: 'Selesai',
+    total: 2345678
+  },
+  {
+    id: 20,
+    number: 'PO/00059',
+    vendorName: 'Lestari Indah Pakpahan',
+    vendorCompany: 'CV Harmoni Jaya',
+    reference: '',
+    date: '05/09/2025',
+    dueDate: '19/09/2025',
+    status: 'Dikirim Sebagian',
+    total: 3789012
+  }
+]
diff --git a/src/types/apps/salesTypes.ts b/src/types/apps/salesTypes.ts
index 527cdd5..4685da0 100644
--- a/src/types/apps/salesTypes.ts
+++ b/src/types/apps/salesTypes.ts
@@ -20,3 +20,15 @@ export type SalesDeliveryType = {
   date: string
   status: string
 }
+
+export type SalesOrderType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}
diff --git a/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx b/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx
index 6a2faf4..1a0018b 100644
--- a/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx
+++ b/src/views/apps/sales/sales-deliveries/list/SalesDeliveryListTable.tsx
@@ -231,7 +231,7 @@ const SalesDeliveryListTable = () => {
         )
       }),
       columnHelper.accessor('vendorName', {
-        header: 'Vendor',
+        header: 'Pelanggan',
         cell: ({ row }) => (
           <div className='flex flex-col'>
             <Typography color='text.primary' className='font-medium'>
diff --git a/src/views/apps/sales/sales-orders/list/SalesOrderListTable.tsx b/src/views/apps/sales/sales-orders/list/SalesOrderListTable.tsx
new file mode 100644
index 0000000..f5644b9
--- /dev/null
+++ b/src/views/apps/sales/sales-orders/list/SalesOrderListTable.tsx
@@ -0,0 +1,454 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { salesOrdersData } from '@/data/dummy/sales'
+import { SalesOrderType } from '@/types/apps/salesTypes'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type SalesOrderTypeWithAction = SalesOrderType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Draft':
+      return 'secondary'
+    case 'Disetujui':
+      return 'primary'
+    case 'Dikirim Sebagian':
+      return 'warning'
+    case 'Selesai':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<SalesOrderTypeWithAction>()
+
+const SalesOrderListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addPOOpen, setAddPOOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [poId, setPOId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<SalesOrderType[]>(salesOrdersData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = salesOrdersData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        po =>
+          po.number.toLowerCase().includes(search.toLowerCase()) ||
+          po.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          po.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          po.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(po => po.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handlePOClick = (poId: string) => {
+    console.log('Navigasi ke detail PO:', poId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<SalesOrderTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor PO',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handlePOClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Pelanggan',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('dueDate', {
+        header: 'Tanggal Jatuh Tempo',
+        cell: ({ row }) => <Typography>{row.original.dueDate}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as SalesOrderType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {['Semua', 'Open', 'Dikirim Sebagian', 'Selesai', 'Lainnya'].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Sales Order'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/Sales/Sales-orders/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default SalesOrderListTable
diff --git a/src/views/apps/sales/sales-orders/list/index.tsx b/src/views/apps/sales/sales-orders/list/index.tsx
new file mode 100644
index 0000000..b70a222
--- /dev/null
+++ b/src/views/apps/sales/sales-orders/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import SalesOrderListTable from './SalesOrderListTable'
+
+const SalesOrderList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <SalesOrderListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesOrderList

From 8461e1f4b766656740fdc74c2ae6f28ab27baffd Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 00:47:15 +0700
Subject: [PATCH 18/42] Sales Quote List Table

---
 .../apps/sales/sales-quotes/page.tsx          |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   2 +-
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/sales.ts                       | 225 ++++++++-
 src/types/apps/salesTypes.ts                  |  12 +
 .../sales-quote/list/SalesQuoteListTable.tsx  | 460 ++++++++++++++++++
 .../apps/sales/sales-quote/list/index.tsx     |  19 +
 8 files changed, 727 insertions(+), 4 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/sales/sales-quotes/page.tsx
 create mode 100644 src/views/apps/sales/sales-quote/list/SalesQuoteListTable.tsx
 create mode 100644 src/views/apps/sales/sales-quote/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-quotes/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-quotes/page.tsx
new file mode 100644
index 0000000..78e9f78
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/sales/sales-quotes/page.tsx
@@ -0,0 +1,7 @@
+import SalesQuoteList from '@/views/apps/sales/sales-quote/list'
+
+const SalesQuotePage = () => {
+  return <SalesQuoteList />
+}
+
+export default SalesQuotePage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index fcabc32..56c1e2d 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -96,7 +96,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
-            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
+            <MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
           </SubMenu>
           <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
             <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 77b0b1d..7c25d03 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -121,6 +121,7 @@
     "purchase_quotes": "Purchase Quotes",
     "invoices": "Invoices",
     "deliveries": "Deliveries",
-    "sales_orders": "Orders"
+    "sales_orders": "Orders",
+    "quotes": "Quotes"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index b174d83..486f051 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -121,6 +121,7 @@
         "purchase_quotes": "Penawaran Pembelian",
         "invoices": "Tagihan",
         "deliveries": "Pengiriman",
-        "sales_orders": "Pemesanan"
+        "sales_orders": "Pemesanan",
+        "quotes": "Penawaran"
     }
 }
diff --git a/src/data/dummy/sales.ts b/src/data/dummy/sales.ts
index f207300..dda7bee 100644
--- a/src/data/dummy/sales.ts
+++ b/src/data/dummy/sales.ts
@@ -1,4 +1,4 @@
-import { SalesBillType, SalesDeliveryType, SalesOrderType } from '@/types/apps/salesTypes'
+import { SalesBillType, SalesDeliveryType, SalesOrderType, SalesQuoteType } from '@/types/apps/salesTypes'
 
 export const salesBillData: SalesBillType[] = [
   {
@@ -648,3 +648,226 @@ export const salesOrdersData: SalesOrderType[] = [
     total: 3789012
   }
 ]
+
+export const salesQuoteData: SalesQuoteType[] = [
+  {
+    id: 1,
+    number: 'PQ-001',
+    vendorName: 'Andi Wijaya',
+    vendorCompany: 'PT Sumber Makmur',
+    reference: 'REF-PQ-001',
+    date: '2025-09-01',
+    dueDate: '2025-09-10',
+    status: 'Open',
+    total: 4500000
+  },
+  {
+    id: 2,
+    number: 'PQ-002',
+    vendorName: 'Siti Rahma',
+    vendorCompany: 'CV Cahaya Abadi',
+    reference: 'REF-PQ-002',
+    date: '2025-09-02',
+    dueDate: '2025-09-12',
+    status: 'Selesai',
+    total: 7200000
+  },
+  {
+    id: 3,
+    number: 'PQ-003',
+    vendorName: 'Budi Santoso',
+    vendorCompany: 'UD Sejahtera',
+    reference: 'REF-PQ-003',
+    date: '2025-09-03',
+    dueDate: '2025-09-13',
+    status: 'Dipesan Sebagai',
+    total: 3100000
+  },
+  {
+    id: 4,
+    number: 'PQ-004',
+    vendorName: 'Rina Kartika',
+    vendorCompany: 'PT Mitra Jaya',
+    reference: 'REF-PQ-004',
+    date: '2025-09-04',
+    dueDate: '2025-09-15',
+    status: 'Open',
+    total: 5800000
+  },
+  {
+    id: 5,
+    number: 'PQ-005',
+    vendorName: 'Agus Salim',
+    vendorCompany: 'CV Bumi Persada',
+    reference: 'REF-PQ-005',
+    date: '2025-09-05',
+    dueDate: '2025-09-16',
+    status: 'Selesai',
+    total: 8000000
+  },
+  {
+    id: 6,
+    number: 'PQ-006',
+    vendorName: 'Maya Lestari',
+    vendorCompany: 'PT Tunas Baru',
+    reference: 'REF-PQ-006',
+    date: '2025-09-06',
+    dueDate: '2025-09-17',
+    status: 'Dipesan Sebagai',
+    total: 2600000
+  },
+  {
+    id: 7,
+    number: 'PQ-007',
+    vendorName: 'Hendra Gunawan',
+    vendorCompany: 'UD Prima Sentosa',
+    reference: 'REF-PQ-007',
+    date: '2025-09-07',
+    dueDate: '2025-09-18',
+    status: 'Open',
+    total: 9300000
+  },
+  {
+    id: 8,
+    number: 'PQ-008',
+    vendorName: 'Dewi Anggraini',
+    vendorCompany: 'CV Inti Mandiri',
+    reference: 'REF-PQ-008',
+    date: '2025-09-08',
+    dueDate: '2025-09-19',
+    status: 'Selesai',
+    total: 4100000
+  },
+  {
+    id: 9,
+    number: 'PQ-009',
+    vendorName: 'Yusuf Arifin',
+    vendorCompany: 'PT Surya Kencana',
+    reference: 'REF-PQ-009',
+    date: '2025-09-09',
+    dueDate: '2025-09-20',
+    status: 'Dipesan Sebagai',
+    total: 6900000
+  },
+  {
+    id: 10,
+    number: 'PQ-010',
+    vendorName: 'Nurhayati',
+    vendorCompany: 'UD Cahaya Mulia',
+    reference: 'REF-PQ-010',
+    date: '2025-09-10',
+    dueDate: '2025-09-21',
+    status: 'Open',
+    total: 5500000
+  },
+  {
+    id: 11,
+    number: 'PQ-011',
+    vendorName: 'Fajar Hidayat',
+    vendorCompany: 'PT Bina Karya',
+    reference: 'REF-PQ-011',
+    date: '2025-09-11',
+    dueDate: '2025-09-22',
+    status: 'Selesai',
+    total: 12000000
+  },
+  {
+    id: 12,
+    number: 'PQ-012',
+    vendorName: 'Ratna Sari',
+    vendorCompany: 'CV Mega Utama',
+    reference: 'REF-PQ-012',
+    date: '2025-09-12',
+    dueDate: '2025-09-23',
+    status: 'Dipesan Sebagai',
+    total: 3300000
+  },
+  {
+    id: 13,
+    number: 'PQ-013',
+    vendorName: 'Tono Prasetyo',
+    vendorCompany: 'UD Karya Indah',
+    reference: 'REF-PQ-013',
+    date: '2025-09-13',
+    dueDate: '2025-09-24',
+    status: 'Open',
+    total: 7500000
+  },
+  {
+    id: 14,
+    number: 'PQ-014',
+    vendorName: 'Lina Marlina',
+    vendorCompany: 'PT Harmoni Sejati',
+    reference: 'REF-PQ-014',
+    date: '2025-09-14',
+    dueDate: '2025-09-25',
+    status: 'Selesai',
+    total: 8600000
+  },
+  {
+    id: 15,
+    number: 'PQ-015',
+    vendorName: 'Arman Saputra',
+    vendorCompany: 'CV Sentra Niaga',
+    reference: 'REF-PQ-015',
+    date: '2025-09-15',
+    dueDate: '2025-09-26',
+    status: 'Dipesan Sebagai',
+    total: 2950000
+  },
+  {
+    id: 16,
+    number: 'PQ-016',
+    vendorName: 'Indah Permata',
+    vendorCompany: 'PT Citra Abadi',
+    reference: 'REF-PQ-016',
+    date: '2025-09-16',
+    dueDate: '2025-09-27',
+    status: 'Open',
+    total: 6800000
+  },
+  {
+    id: 17,
+    number: 'PQ-017',
+    vendorName: 'Adi Putra',
+    vendorCompany: 'UD Makmur Bersama',
+    reference: 'REF-PQ-017',
+    date: '2025-09-17',
+    dueDate: '2025-09-28',
+    status: 'Selesai',
+    total: 4700000
+  },
+  {
+    id: 18,
+    number: 'PQ-018',
+    vendorName: 'Sri Wahyuni',
+    vendorCompany: 'CV Bintang Terang',
+    reference: 'REF-PQ-018',
+    date: '2025-09-18',
+    dueDate: '2025-09-29',
+    status: 'Dipesan Sebagai',
+    total: 5300000
+  },
+  {
+    id: 19,
+    number: 'PQ-019',
+    vendorName: 'Eko Prabowo',
+    vendorCompany: 'PT Mandiri Jaya',
+    reference: 'REF-PQ-019',
+    date: '2025-09-19',
+    dueDate: '2025-09-30',
+    status: 'Open',
+    total: 9500000
+  },
+  {
+    id: 20,
+    number: 'PQ-020',
+    vendorName: 'Novi Astuti',
+    vendorCompany: 'UD Sinar Harapan',
+    reference: 'REF-PQ-020',
+    date: '2025-09-20',
+    dueDate: '2025-10-01',
+    status: 'Selesai',
+    total: 4200000
+  }
+]
diff --git a/src/types/apps/salesTypes.ts b/src/types/apps/salesTypes.ts
index 4685da0..8d994fe 100644
--- a/src/types/apps/salesTypes.ts
+++ b/src/types/apps/salesTypes.ts
@@ -32,3 +32,15 @@ export type SalesOrderType = {
   status: string
   total: number
 }
+
+export type SalesQuoteType = {
+  id: number
+  number: string
+  vendorName: string
+  vendorCompany: string
+  reference: string
+  date: string
+  dueDate: string
+  status: string
+  total: number
+}
diff --git a/src/views/apps/sales/sales-quote/list/SalesQuoteListTable.tsx b/src/views/apps/sales/sales-quote/list/SalesQuoteListTable.tsx
new file mode 100644
index 0000000..c88c88c
--- /dev/null
+++ b/src/views/apps/sales/sales-quote/list/SalesQuoteListTable.tsx
@@ -0,0 +1,460 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { salesQuoteData } from '@/data/dummy/sales'
+import { SalesQuoteType } from '@/types/apps/salesTypes'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type SalesQuoteTypeWithAction = SalesQuoteType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Sales Quote
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Open':
+      return 'primary'
+    case 'Dipesan Sebagian':
+      return 'warning'
+    case 'Selesai':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<SalesQuoteTypeWithAction>()
+
+const SalesQuoteListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addQuoteOpen, setAddQuoteOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [quoteId, setQuoteId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<SalesQuoteType[]>(salesQuoteData)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = salesQuoteData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        quote =>
+          quote.number.toLowerCase().includes(search.toLowerCase()) ||
+          quote.vendorName.toLowerCase().includes(search.toLowerCase()) ||
+          quote.vendorCompany.toLowerCase().includes(search.toLowerCase()) ||
+          quote.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(quote => quote.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleQuoteClick = (quoteId: string) => {
+    console.log('Navigasi ke detail Quote:', quoteId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<SalesQuoteTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Quote',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleQuoteClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('vendorName', {
+        header: 'Pelanggan',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.vendorName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.vendorCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('dueDate', {
+        header: 'Tanggal Jatuh Tempo',
+        cell: ({ row }) => <Typography>{row.original.dueDate}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as SalesQuoteType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs */}
+        <div className='p-6 border-bs'>
+          <div className='flex flex-wrap gap-2'>
+            {[
+              'Semua',
+              'Draft',
+              'Terkirim',
+              'Ditolak Pelanggan',
+              'Disetujui Pelanggan',
+              'Selesai',
+              'Dipesan Sebagian'
+            ].map(status => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? 'contained' : 'outlined'}
+                color={statusFilter === status ? 'primary' : 'inherit'}
+                onClick={() => handleStatusFilter(status)}
+                size='small'
+                className='rounded-lg'
+                sx={{
+                  textTransform: 'none',
+                  fontWeight: statusFilter === status ? 600 : 400,
+                  borderRadius: '8px',
+                  ...(statusFilter !== status && {
+                    borderColor: '#e0e0e0',
+                    color: '#666'
+                  })
+                }}
+              >
+                {status}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Sales Quote'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/sales/sales-quotes/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default SalesQuoteListTable
diff --git a/src/views/apps/sales/sales-quote/list/index.tsx b/src/views/apps/sales/sales-quote/list/index.tsx
new file mode 100644
index 0000000..6e1629a
--- /dev/null
+++ b/src/views/apps/sales/sales-quote/list/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import SalesQuoteListTable from './SalesQuoteListTable'
+
+const SalesQuoteList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <SalesQuoteListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SalesQuoteList

From c32d08666eee8b23ae2d30b57db2da27366277c4 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 03:23:54 +0700
Subject: [PATCH 19/42] Purchase Detail

---
 .../purchase-bills/[id]/detail/page.tsx       |  18 +
 .../list/PurchaseBillListTable.tsx            |   7 +-
 .../purchase-detail/PurchaseDetailContent.tsx |  26 ++
 .../purchase-detail/PurchaseDetailHeader.tsx  |  19 +
 .../PurchaseDetailInformation.tsx             | 310 +++++++++++++
 .../purchase-detail/PurchaseDetailLog.tsx     |  59 +++
 .../PurchaseDetailSendPayment.tsx             | 417 ++++++++++++++++++
 .../PurchaseDetailTransaction.tsx             | 150 +++++++
 8 files changed, 1001 insertions(+), 5 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/[id]/detail/page.tsx
 create mode 100644 src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx
 create mode 100644 src/views/apps/purchase/purchase-detail/PurchaseDetailHeader.tsx
 create mode 100644 src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx
 create mode 100644 src/views/apps/purchase/purchase-detail/PurchaseDetailLog.tsx
 create mode 100644 src/views/apps/purchase/purchase-detail/PurchaseDetailSendPayment.tsx
 create mode 100644 src/views/apps/purchase/purchase-detail/PurchaseDetailTransaction.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/[id]/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/[id]/detail/page.tsx
new file mode 100644
index 0000000..2b95d65
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-bills/[id]/detail/page.tsx
@@ -0,0 +1,18 @@
+import PurchaseDetailContent from '@/views/apps/purchase/purchase-detail/PurchaseDetailContent'
+import PurchaseDetailHeader from '@/views/apps/purchase/purchase-detail/PurchaseDetailHeader'
+import Grid from '@mui/material/Grid2'
+
+const PurchaseBillDetailPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailHeader title='Detail Pesanan Pembelian' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseBillDetailPage
diff --git a/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx b/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
index 09f9d44..199bc47 100644
--- a/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
+++ b/src/views/apps/purchase/purchase-bills/list/PurchaseBillListTable.tsx
@@ -188,10 +188,6 @@ const PurchaseBillListTable = () => {
     setOpenConfirm(false)
   }
 
-  const handleBillClick = (billId: string) => {
-    console.log('Navigasi ke detail Bill:', billId)
-  }
-
   const handleStatusFilter = (status: string) => {
     setStatusFilter(status)
   }
@@ -227,7 +223,8 @@ const PurchaseBillListTable = () => {
             variant='text'
             color='primary'
             className='p-0 min-w-0 font-medium normal-case justify-start'
-            onClick={() => handleBillClick(row.original.id.toString())}
+            component={Link}
+            href={getLocalizedUrl(`/apps/purchase/purchase-bills/${row.original.number}/detail`, locale as Locale)}
             sx={{
               textTransform: 'none',
               fontWeight: 500,
diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx
new file mode 100644
index 0000000..391a0b3
--- /dev/null
+++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx
@@ -0,0 +1,26 @@
+import Grid from '@mui/material/Grid2'
+import PurchaseDetailInformation from './PurchaseDetailInformation'
+import PurchaseDetailSendPayment from './PurchaseDetailSendPayment'
+import PurchaseDetailLog from './PurchaseDetailLog'
+import PurchaseDetailTransaction from './PurchaseDetailTransaction'
+
+const PurchaseDetailContent = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailInformation />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailSendPayment />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailTransaction />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <PurchaseDetailLog />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PurchaseDetailContent
diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailHeader.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailHeader.tsx
new file mode 100644
index 0000000..26e56d9
--- /dev/null
+++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailHeader.tsx
@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material'
+
+interface Props {
+  title: string
+}
+
+const PurchaseDetailHeader = ({ title }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseDetailHeader
diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx
new file mode 100644
index 0000000..232b5c6
--- /dev/null
+++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx
@@ -0,0 +1,310 @@
+import React from 'react'
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Box,
+  Button,
+  IconButton
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+
+interface Product {
+  produk: string
+  deskripsi: string
+  kuantitas: number
+  satuan: string
+  discount: string
+  harga: number
+  pajak: string
+  jumlah: number
+}
+
+interface PurchaseData {
+  vendor: string
+  nomor: string
+  tglTransaksi: string
+  tglJatuhTempo: string
+  gudang: string
+  status: string
+}
+
+const PurchaseDetailInformation: React.FC = () => {
+  const purchaseData: PurchaseData = {
+    vendor: 'Bagas Rizki Sihotang S.Farm Widodo',
+    nomor: 'PI/00053',
+    tglTransaksi: '08/09/2025',
+    tglJatuhTempo: '06/10/2025',
+    gudang: 'Unassigned',
+    status: 'Belum Dibayar'
+  }
+
+  const products: Product[] = [
+    {
+      produk: 'CB1 - Chelsea Boots',
+      deskripsi: 'Ukuran XS',
+      kuantitas: 3,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 299000,
+      pajak: 'PPN',
+      jumlah: 897000
+    },
+    {
+      produk: 'CB1 - Chelsea Boots',
+      deskripsi: 'Ukuran M',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 299000,
+      pajak: 'PPN',
+      jumlah: 299000
+    },
+    {
+      produk: 'KH1 - Kneel High Boots',
+      deskripsi: 'Ukuran XL',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 299000,
+      pajak: 'PPN',
+      jumlah: 299000
+    }
+  ]
+
+  const totalKuantitas: number = products.reduce((sum, product) => sum + product.kuantitas, 0)
+  const subTotal: number = 1495000
+  const ppn: number = 98670
+  const total: number = 1593670
+  const sisaTagihan: number = 1593670
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <Card sx={{ width: '100%' }}>
+      <CardHeader
+        title={
+          <Box display='flex' justifyContent='space-between' alignItems='center'>
+            <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+              Belum Dibayar
+            </Typography>
+            <Box>
+              <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                Bagikan
+              </Button>
+              <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                Print
+              </Button>
+              <IconButton>
+                <i className='tabler-dots-vertical' />
+              </IconButton>
+            </Box>
+          </Box>
+        }
+      />
+
+      <CardContent>
+        {/* Purchase Information */}
+        <Grid container spacing={3} sx={{ mb: 4 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Vendor
+              </Typography>
+              <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
+                {purchaseData.vendor}
+              </Typography>
+            </Box>
+
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Tgl. Transaksi
+              </Typography>
+              <Typography variant='body1'>{purchaseData.tglTransaksi}</Typography>
+            </Box>
+
+            <Box>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Gudang
+              </Typography>
+              <Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
+                {purchaseData.gudang}
+              </Typography>
+            </Box>
+          </Grid>
+
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Nomor
+              </Typography>
+              <Typography variant='body1'>{purchaseData.nomor}</Typography>
+            </Box>
+
+            <Box>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Tgl. Jatuh Tempo
+              </Typography>
+              <Typography variant='body1'>{purchaseData.tglJatuhTempo}</Typography>
+            </Box>
+          </Grid>
+        </Grid>
+
+        {/* Products Table */}
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Produk</TableCell>
+                <TableCell>Deskripsi</TableCell>
+                <TableCell align='center'>Kuantitas</TableCell>
+                <TableCell align='center'>Satuan</TableCell>
+                <TableCell align='center'>Discount</TableCell>
+                <TableCell align='right'>Harga</TableCell>
+                <TableCell align='center'>Pajak</TableCell>
+                <TableCell align='right'>Jumlah</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {products.map((product, index) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
+                      {product.produk}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>{product.deskripsi}</TableCell>
+                  <TableCell align='center'>{product.kuantitas}</TableCell>
+                  <TableCell align='center'>{product.satuan}</TableCell>
+                  <TableCell align='center'>{product.discount}</TableCell>
+                  <TableCell align='right'>{formatCurrency(product.harga)}</TableCell>
+                  <TableCell align='center'>{product.pajak}</TableCell>
+                  <TableCell align='right'>{formatCurrency(product.jumlah)}</TableCell>
+                </TableRow>
+              ))}
+
+              {/* Total Kuantitas Row */}
+              <TableRow>
+                <TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
+                  Total Kuantitas
+                </TableCell>
+                <TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
+                  {totalKuantitas}
+                </TableCell>
+                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+        {/* Summary Section */}
+        <Box sx={{ mt: 3 }}>
+          <Grid container spacing={2}>
+            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    Sub Total
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(subTotal)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    PPN
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(ppn)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
+                    Total
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(total)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    Sisa Tagihan
+                  </Typography>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(sisaTagihan)}
+                  </Typography>
+                </Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseDetailInformation
diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailLog.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailLog.tsx
new file mode 100644
index 0000000..20711ac
--- /dev/null
+++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailLog.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
+
+interface LogEntry {
+  id: string
+  action: string
+  timestamp: string
+  user: string
+}
+
+const PurchaseDetailLog: React.FC = () => {
+  const logEntries: LogEntry[] = [
+    {
+      id: '1',
+      action: 'Terakhir diubah oleh',
+      timestamp: '08 Sep 2025 18:26',
+      user: 'pada'
+    }
+  ]
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+            Pantau log perubahan data
+          </Typography>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent sx={{ mt: 5 }}>
+        {logEntries.map(entry => (
+          <Box key={entry.id} sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
+              <Link
+                href='#'
+                underline='hover'
+                color='primary'
+                sx={{
+                  textDecoration: 'none',
+                  '&:hover': {
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {entry.action} {entry.user} {entry.timestamp}
+              </Link>
+            </Box>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseDetailLog
diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailSendPayment.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailSendPayment.tsx
new file mode 100644
index 0000000..6f64a4a
--- /dev/null
+++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailSendPayment.tsx
@@ -0,0 +1,417 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Box,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Tooltip,
+  IconButton,
+  CardHeader
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomTextField from '@/@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+
+interface PaymentFormData {
+  totalDibayar: string
+  tglTransaksi: string
+  referensi: string
+  nomor: string
+  dibayarDari: string
+}
+
+interface PemotonganItem {
+  id: string
+  dipotong: string
+  persentase: string
+  nominal: string
+  tipe: 'persen' | 'rupiah'
+}
+
+const PurchaseDetailSendPayment: React.FC = () => {
+  const [formData, setFormData] = useState<PaymentFormData>({
+    totalDibayar: '849.000',
+    tglTransaksi: '10/09/2025',
+    referensi: '',
+    nomor: 'PP/00025',
+    dibayarDari: '1-10001 Kas'
+  })
+
+  const [expanded, setExpanded] = useState<boolean>(false)
+  const [pemotonganItems, setPemotonganItems] = useState<PemotonganItem[]>([])
+
+  const dibayarDariOptions = [
+    { label: '1-10001 Kas', value: '1-10001 Kas' },
+    { label: '1-10002 Bank BCA', value: '1-10002 Bank BCA' },
+    { label: '1-10003 Bank Mandiri', value: '1-10003 Bank Mandiri' },
+    { label: '1-10004 Petty Cash', value: '1-10004 Petty Cash' }
+  ]
+
+  const pemotonganOptions = [
+    { label: 'PPN 11%', value: 'ppn' },
+    { label: 'PPh 21', value: 'pph21' },
+    { label: 'PPh 23', value: 'pph23' },
+    { label: 'Biaya Admin', value: 'admin' }
+  ]
+
+  const handleChange =
+    (field: keyof PaymentFormData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | any) => {
+      setFormData(prev => ({
+        ...prev,
+        [field]: event.target.value
+      }))
+    }
+
+  const handleDibayarDariChange = (value: { label: string; value: string } | null) => {
+    setFormData(prev => ({
+      ...prev,
+      dibayarDari: value?.value || ''
+    }))
+  }
+
+  const addPemotongan = () => {
+    const newItem: PemotonganItem = {
+      id: Date.now().toString(),
+      dipotong: '',
+      persentase: '0',
+      nominal: '',
+      tipe: 'persen'
+    }
+    setPemotonganItems(prev => [...prev, newItem])
+  }
+
+  const removePemotongan = (id: string) => {
+    setPemotonganItems(prev => prev.filter(item => item.id !== id))
+  }
+
+  const updatePemotongan = (id: string, field: keyof PemotonganItem, value: string) => {
+    setPemotonganItems(prev => prev.map(item => (item.id === id ? { ...item, [field]: value } : item)))
+  }
+
+  const handleAccordionChange = () => {
+    setExpanded(!expanded)
+  }
+
+  const calculatePemotongan = (item: PemotonganItem): number => {
+    const totalDibayar = parseInt(formData.totalDibayar.replace(/\D/g, '')) || 0
+    const nilai = parseFloat(item.persentase) || 0
+
+    if (item.tipe === 'persen') {
+      return (totalDibayar * nilai) / 100
+    } else {
+      return nilai
+    }
+  }
+
+  const formatCurrency = (amount: string | number): string => {
+    const numAmount = typeof amount === 'string' ? parseInt(amount.replace(/\D/g, '')) : amount
+    return new Intl.NumberFormat('id-ID').format(numAmount)
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Box display='flex' justifyContent='space-between' alignItems='center'>
+            <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+              Kirim Pembayaran
+            </Typography>
+          </Box>
+        }
+      />
+      <CardContent>
+        <Grid container spacing={3}>
+          {/* Left Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            {/* Total Dibayar */}
+            <Box sx={{ mb: 3 }}>
+              <CustomTextField
+                fullWidth
+                label={
+                  <span>
+                    <span style={{ color: 'red' }}>*</span> Total Dibayar
+                  </span>
+                }
+                value={formData.totalDibayar}
+                onChange={handleChange('totalDibayar')}
+                sx={{
+                  '& .MuiInputBase-root': {
+                    textAlign: 'right'
+                  }
+                }}
+              />
+            </Box>
+
+            {/* Tgl. Transaksi */}
+            <Box sx={{ mb: 3 }}>
+              <CustomTextField
+                fullWidth
+                label={
+                  <span>
+                    <span style={{ color: 'red' }}>*</span> Tgl. Transaksi
+                  </span>
+                }
+                type='date'
+                value={formData.tglTransaksi.split('/').reverse().join('-')}
+                onChange={handleChange('tglTransaksi')}
+                slotProps={{
+                  input: {
+                    endAdornment: <i className='tabler-calendar' style={{ color: '#666' }} />
+                  }
+                }}
+              />
+            </Box>
+
+            {/* Referensi */}
+            <Box sx={{ mb: 3 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                  Referensi
+                </Typography>
+                <Tooltip title='Informasi referensi pembayaran'>
+                  <IconButton size='small' sx={{ ml: 0.5 }}>
+                    <i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <CustomTextField
+                fullWidth
+                placeholder='Referensi'
+                value={formData.referensi}
+                onChange={handleChange('referensi')}
+              />
+            </Box>
+
+            {/* Attachment Accordion */}
+            <Accordion
+              expanded={expanded}
+              onChange={handleAccordionChange}
+              sx={{
+                boxShadow: 'none',
+                border: '1px solid #e0e0e0',
+                borderRadius: '8px',
+                '&:before': { display: 'none' }
+              }}
+            >
+              <AccordionSummary
+                expandIcon={
+                  <i
+                    className='tabler-chevron-right'
+                    style={{
+                      transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                      transition: 'transform 0.2s'
+                    }}
+                  />
+                }
+                sx={{
+                  backgroundColor: '#f8f9fa',
+                  borderRadius: '8px',
+                  minHeight: '48px',
+                  '& .MuiAccordionSummary-content': {
+                    margin: '12px 0'
+                  }
+                }}
+              >
+                <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                  Attachment
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails sx={{ p: 2 }}>
+                <Typography variant='body2' color='text.secondary'>
+                  Drag and drop files here or click to upload
+                </Typography>
+              </AccordionDetails>
+            </Accordion>
+          </Grid>
+
+          {/* Right Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            {/* Nomor */}
+            <Box sx={{ mb: 3 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                  Nomor
+                </Typography>
+                <Tooltip title='Nomor pembayaran otomatis'>
+                  <IconButton size='small' sx={{ ml: 0.5 }}>
+                    <i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <CustomTextField fullWidth value={formData.nomor} onChange={handleChange('nomor')} disabled />
+            </Box>
+
+            {/* Dibayar Dari */}
+            <Box sx={{ mb: 3 }}>
+              <Typography variant='body2' sx={{ color: 'text.secondary', mb: 1 }}>
+                <span style={{ color: 'red' }}>*</span> Dibayar Dari
+              </Typography>
+              <CustomAutocomplete
+                fullWidth
+                options={dibayarDariOptions}
+                getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
+                value={dibayarDariOptions.find(option => option.value === formData.dibayarDari) || null}
+                onChange={(_, value: { label: string; value: string } | null) => handleDibayarDariChange(value)}
+                renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih akun pembayaran' />}
+                noOptionsText='Tidak ada pilihan'
+              />
+            </Box>
+
+            {/* Empty space to match Referensi height */}
+            <Box sx={{ mb: 3, height: '74px' }}>{/* Empty space */}</Box>
+
+            {/* Pemotongan Button - aligned with Attachment */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'flex-start',
+                minHeight: '48px'
+              }}
+            >
+              <Button
+                startIcon={<i className='tabler-plus' />}
+                variant='text'
+                color='primary'
+                sx={{ textTransform: 'none' }}
+                onClick={addPemotongan}
+              >
+                Pemotongan
+              </Button>
+            </Box>
+          </Grid>
+        </Grid>
+
+        {/* Pemotongan Items */}
+        {pemotonganItems.length > 0 && (
+          <Box sx={{ mt: 3 }}>
+            {pemotonganItems.map((item, index) => (
+              <Box
+                key={item.id}
+                sx={{
+                  mb: 2,
+                  p: 2,
+                  border: '1px solid #e0e0e0',
+                  borderRadius: 1,
+                  position: 'relative'
+                }}
+              >
+                <Grid container spacing={2} alignItems='center'>
+                  <Grid size={{ xs: 12, md: 1 }}>
+                    <IconButton
+                      color='error'
+                      size='small'
+                      onClick={() => removePemotongan(item.id)}
+                      sx={{
+                        backgroundColor: '#fff',
+                        border: '1px solid #f44336',
+                        '&:hover': { backgroundColor: '#ffebee' }
+                      }}
+                    >
+                      <i className='tabler-minus' style={{ fontSize: '16px' }} />
+                    </IconButton>
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <CustomAutocomplete
+                      fullWidth
+                      options={pemotonganOptions}
+                      getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
+                      value={pemotonganOptions.find(option => option.value === item.dipotong) || null}
+                      onChange={(_, value: { label: string; value: string } | null) =>
+                        updatePemotongan(item.id, 'dipotong', value?.value || '')
+                      }
+                      renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih dipotong...' />}
+                      noOptionsText='Tidak ada pilihan'
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 2 }}>
+                    <CustomTextField
+                      fullWidth
+                      value={item.persentase}
+                      onChange={e => updatePemotongan(item.id, 'persentase', e.target.value)}
+                      placeholder='0'
+                      sx={{
+                        '& .MuiInputBase-root': {
+                          textAlign: 'center'
+                        }
+                      }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 1 }}>
+                    <Box sx={{ display: 'flex', gap: 0.5 }}>
+                      <Button
+                        variant={item.tipe === 'persen' ? 'contained' : 'outlined'}
+                        size='small'
+                        onClick={() => updatePemotongan(item.id, 'tipe', 'persen')}
+                        sx={{ minWidth: '40px', px: 1 }}
+                      >
+                        %
+                      </Button>
+                      <Button
+                        variant={item.tipe === 'rupiah' ? 'contained' : 'outlined'}
+                        size='small'
+                        onClick={() => updatePemotongan(item.id, 'tipe', 'rupiah')}
+                        sx={{ minWidth: '40px', px: 1 }}
+                      >
+                        Rp
+                      </Button>
+                    </Box>
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                      <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                        {formatCurrency(calculatePemotongan(item))}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                </Grid>
+              </Box>
+            ))}
+          </Box>
+        )}
+
+        {/* Bottom Section */}
+        <Box sx={{ mt: 4, pt: 3, borderTop: '1px solid #e0e0e0' }}>
+          <Grid container spacing={2} alignItems='center'>
+            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space */}</Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+                <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                  Total
+                </Typography>
+                <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                  {formatCurrency(formData.totalDibayar)}
+                </Typography>
+              </Box>
+
+              <Button
+                variant='contained'
+                startIcon={<i className='tabler-plus' />}
+                fullWidth
+                sx={{
+                  py: 1.5,
+                  textTransform: 'none',
+                  fontWeight: 'medium'
+                }}
+              >
+                Tambah Pembayaran
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseDetailSendPayment
diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailTransaction.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailTransaction.tsx
new file mode 100644
index 0000000..8be85b5
--- /dev/null
+++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailTransaction.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import React from 'react'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Link,
+  Box
+} from '@mui/material'
+
+interface TransactionData {
+  id: string
+  tanggal: string
+  transaksi: string
+  nomor: string
+  tag: string
+  referensi: string
+  jumlah: number
+}
+
+const PurchaseDetailTransaction: React.FC = () => {
+  const transactions: TransactionData[] = [
+    {
+      id: '1',
+      tanggal: '10/09/2025',
+      transaksi: 'Pembayaran Pembelian',
+      nomor: 'PP/00024',
+      tag: '',
+      referensi: '',
+      jumlah: 1593670
+    }
+  ]
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <Card sx={{ width: '100%' }}>
+      <CardHeader
+        title={
+          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+            Transaksi
+          </Typography>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                      Tanggal
+                    </Typography>
+                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
+                  </Box>
+                </TableCell>
+                <TableCell>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                      Transaksi
+                    </Typography>
+                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
+                  </Box>
+                </TableCell>
+                <TableCell>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                      Nomor
+                    </Typography>
+                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
+                  </Box>
+                </TableCell>
+                <TableCell>
+                  <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                    Tag
+                  </Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                    Referensi
+                  </Typography>
+                </TableCell>
+                <TableCell align='right'>
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
+                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                      Jumlah
+                    </Typography>
+                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
+                  </Box>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {transactions.map(transaction => (
+                <TableRow key={transaction.id}>
+                  <TableCell>
+                    <Typography variant='body2'>{transaction.tanggal}</Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Link
+                      href='#'
+                      underline='hover'
+                      color='primary'
+                      sx={{
+                        textDecoration: 'none',
+                        '&:hover': {
+                          textDecoration: 'underline'
+                        }
+                      }}
+                    >
+                      {transaction.transaksi}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <Typography variant='body2'>{transaction.nomor}</Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Typography variant='body2'>{transaction.tag || '-'}</Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Typography variant='body2'>{transaction.referensi || '-'}</Typography>
+                  </TableCell>
+                  <TableCell align='right'>
+                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                      {formatCurrency(transaction.jumlah)}
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PurchaseDetailTransaction

From 7077bf8d87bfdbbf0fd7aa20d90047edd5ede0d4 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 14:24:18 +0700
Subject: [PATCH 20/42] Expense List Table

---
 .../(private)/apps/expense/page.tsx           |   7 +
 src/components/RangeDatePicker.tsx            | 276 ++++++++++
 src/components/StatusFilterTab.tsx            | 249 +++++++++
 .../layout/vertical/VerticalMenu.tsx          |   9 +-
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/data/dummy/expense.ts                     | 224 ++++++++
 src/services/api.ts                           |   3 +-
 src/types/apps/expenseType.ts                 |  11 +
 .../apps/expense/list/ExpenseListCard.tsx     |  51 ++
 .../apps/expense/list/ExpenseListTable.tsx    | 519 ++++++++++++++++++
 src/views/apps/expense/list/index.tsx         |  23 +
 12 files changed, 1372 insertions(+), 6 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx
 create mode 100644 src/components/RangeDatePicker.tsx
 create mode 100644 src/components/StatusFilterTab.tsx
 create mode 100644 src/data/dummy/expense.ts
 create mode 100644 src/types/apps/expenseType.ts
 create mode 100644 src/views/apps/expense/list/ExpenseListCard.tsx
 create mode 100644 src/views/apps/expense/list/ExpenseListTable.tsx
 create mode 100644 src/views/apps/expense/list/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx
new file mode 100644
index 0000000..08dd739
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx
@@ -0,0 +1,7 @@
+import ExpenseList from '@/views/apps/expense/list'
+
+const ExpensePage = () => {
+  return <ExpenseList />
+}
+
+export default ExpensePage
diff --git a/src/components/RangeDatePicker.tsx b/src/components/RangeDatePicker.tsx
new file mode 100644
index 0000000..774a0de
--- /dev/null
+++ b/src/components/RangeDatePicker.tsx
@@ -0,0 +1,276 @@
+// React Imports
+import React from 'react'
+
+// MUI Imports
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+
+interface DateRangePickerProps {
+  /**
+   * Start date value (Date object or date string)
+   */
+  startDate: Date | string | null
+  /**
+   * End date value (Date object or date string)
+   */
+  endDate: Date | string | null
+  /**
+   * Callback when start date changes
+   */
+  onStartDateChange: (date: Date | null) => void
+  /**
+   * Callback when end date changes
+   */
+  onEndDateChange: (date: Date | null) => void
+  /**
+   * Label for start date field
+   */
+  startLabel?: string
+  /**
+   * Label for end date field
+   */
+  endLabel?: string
+  /**
+   * Placeholder for start date field
+   */
+  startPlaceholder?: string
+  /**
+   * Placeholder for end date field
+   */
+  endPlaceholder?: string
+  /**
+   * Size of the text fields
+   */
+  size?: 'small' | 'medium'
+  /**
+   * Whether the fields are disabled
+   */
+  disabled?: boolean
+  /**
+   * Whether the fields are required
+   */
+  required?: boolean
+  /**
+   * Custom className for the container
+   */
+  className?: string
+  /**
+   * Custom styles for the container
+   */
+  containerStyle?: React.CSSProperties
+  /**
+   * Separator between date fields
+   */
+  separator?: string
+  /**
+   * Custom props for start date TextField
+   */
+  startTextFieldProps?: Omit<TextFieldProps, 'type' | 'value' | 'onChange'>
+  /**
+   * Custom props for end date TextField
+   */
+  endTextFieldProps?: Omit<TextFieldProps, 'type' | 'value' | 'onChange'>
+  /**
+   * Error state for start date
+   */
+  startError?: boolean
+  /**
+   * Error state for end date
+   */
+  endError?: boolean
+  /**
+   * Helper text for start date
+   */
+  startHelperText?: string
+  /**
+   * Helper text for end date
+   */
+  endHelperText?: string
+}
+
+// Utility functions
+const formatDateForInput = (date: Date | string | null): string => {
+  if (!date) return ''
+
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+
+  if (isNaN(dateObj.getTime())) return ''
+
+  return dateObj.toISOString().split('T')[0]
+}
+
+const parseDateFromInput = (dateString: string): Date | null => {
+  if (!dateString) return null
+
+  const date = new Date(dateString)
+  return isNaN(date.getTime()) ? null : date
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  startLabel,
+  endLabel,
+  startPlaceholder,
+  endPlaceholder,
+  size = 'small',
+  disabled = false,
+  required = false,
+  className = '',
+  containerStyle = {},
+  separator = '-',
+  startTextFieldProps = {},
+  endTextFieldProps = {},
+  startError = false,
+  endError = false,
+  startHelperText,
+  endHelperText
+}) => {
+  const theme = useTheme()
+
+  const defaultTextFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      '&.Mui-focused fieldset': {
+        borderColor: 'primary.main'
+      },
+      '& fieldset': {
+        borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+      }
+    }
+  }
+
+  const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const date = parseDateFromInput(event.target.value)
+    onStartDateChange(date)
+  }
+
+  const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const date = parseDateFromInput(event.target.value)
+    onEndDateChange(date)
+  }
+
+  return (
+    <div className={`flex items-center gap-4 ${className}`} style={containerStyle}>
+      <TextField
+        type='date'
+        label={startLabel}
+        placeholder={startPlaceholder}
+        value={formatDateForInput(startDate)}
+        onChange={handleStartDateChange}
+        size={size}
+        disabled={disabled}
+        required={required}
+        error={startError}
+        helperText={startHelperText}
+        sx={{
+          ...defaultTextFieldSx,
+          ...startTextFieldProps.sx
+        }}
+        {...startTextFieldProps}
+      />
+
+      <Typography
+        color='text.secondary'
+        sx={{
+          userSelect: 'none',
+          fontSize: size === 'small' ? '14px' : '16px'
+        }}
+      >
+        {separator}
+      </Typography>
+
+      <TextField
+        type='date'
+        label={endLabel}
+        placeholder={endPlaceholder}
+        value={formatDateForInput(endDate)}
+        onChange={handleEndDateChange}
+        size={size}
+        disabled={disabled}
+        required={required}
+        error={endError}
+        helperText={endHelperText}
+        sx={{
+          ...defaultTextFieldSx,
+          ...endTextFieldProps.sx
+        }}
+        {...endTextFieldProps}
+      />
+    </div>
+  )
+}
+
+export default DateRangePicker
+
+// Export utility functions for external use
+export { formatDateForInput, parseDateFromInput }
+
+// Example usage:
+/*
+import DateRangePicker from '@/components/DateRangePicker'
+
+// In your component:
+const [startDate, setStartDate] = useState<Date | null>(new Date())
+const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+// Basic usage
+<DateRangePicker
+  startDate={startDate}
+  endDate={endDate}
+  onStartDateChange={setStartDate}
+  onEndDateChange={setEndDate}
+/>
+
+// With labels and validation
+<DateRangePicker
+  startDate={startDate}
+  endDate={endDate}
+  onStartDateChange={setStartDate}
+  onEndDateChange={setEndDate}
+  startLabel="Tanggal Mulai"
+  endLabel="Tanggal Selesai"
+  required
+  startError={startDate && endDate && startDate > endDate}
+  endError={startDate && endDate && startDate > endDate}
+  startHelperText={startDate && endDate && startDate > endDate ? "Tanggal mulai tidak boleh lebih besar dari tanggal selesai" : ""}
+/>
+
+// Custom styling
+<DateRangePicker
+  startDate={startDate}
+  endDate={endDate}
+  onStartDateChange={setStartDate}
+  onEndDateChange={setEndDate}
+  separator="sampai"
+  size="medium"
+  className="my-custom-class"
+  startTextFieldProps={{
+    variant: "filled",
+    sx: { minWidth: '150px' }
+  }}
+  endTextFieldProps={{
+    variant: "filled", 
+    sx: { minWidth: '150px' }
+  }}
+/>
+
+// Integration with your existing filter logic
+const handleDateRangeChange = (start: Date | null, end: Date | null) => {
+  setFilter({
+    ...filter,
+    date_from: start ? formatDateDDMMYYYY(start) : null,
+    date_to: end ? formatDateDDMMYYYY(end) : null
+  })
+}
+
+<DateRangePicker
+  startDate={filter.date_from ? new Date(filter.date_from) : null}
+  endDate={filter.date_to ? new Date(filter.date_to) : null}
+  onStartDateChange={(date) => handleDateRangeChange(date, filter.date_to ? new Date(filter.date_to) : null)}
+  onEndDateChange={(date) => handleDateRangeChange(filter.date_from ? new Date(filter.date_from) : null, date)}
+/>
+*/
diff --git a/src/components/StatusFilterTab.tsx b/src/components/StatusFilterTab.tsx
new file mode 100644
index 0000000..861d2ae
--- /dev/null
+++ b/src/components/StatusFilterTab.tsx
@@ -0,0 +1,249 @@
+// React Imports
+import React, { useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+
+const DropdownButton = styled(Button)(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: 400,
+  borderRadius: '8px',
+  borderColor: '#e0e0e0',
+  color: '#666',
+  '&:hover': {
+    borderColor: '#ccc',
+    backgroundColor: 'rgba(0, 0, 0, 0.04)'
+  }
+}))
+
+interface StatusFilterTabsProps {
+  /**
+   * Array of status options to display as filter tabs
+   */
+  statusOptions: string[]
+  /**
+   * Currently selected status filter
+   */
+  selectedStatus: string
+  /**
+   * Callback function when a status is selected
+   */
+  onStatusChange: (status: string) => void
+  /**
+   * Custom className for the container
+   */
+  className?: string
+  /**
+   * Custom styles for the container
+   */
+  containerStyle?: React.CSSProperties
+  /**
+   * Size of the buttons
+   */
+  buttonSize?: 'small' | 'medium' | 'large'
+  /**
+   * Maximum number of status options to show as buttons before switching to dropdown
+   */
+  maxButtonsBeforeDropdown?: number
+  /**
+   * Label for the dropdown when there are many options
+   */
+  dropdownLabel?: string
+}
+
+const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
+  statusOptions,
+  selectedStatus,
+  onStatusChange,
+  className = '',
+  containerStyle = {},
+  buttonSize = 'small',
+  maxButtonsBeforeDropdown = 5,
+  dropdownLabel = 'Lainnya'
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  const handleDropdownClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleDropdownClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleDropdownItemClick = (status: string) => {
+    onStatusChange(status)
+    handleDropdownClose()
+  }
+
+  // If status options are <= maxButtonsBeforeDropdown, show all as buttons
+  if (statusOptions.length <= maxButtonsBeforeDropdown) {
+    return (
+      <div className='flex flex-wrap gap-2'>
+        {statusOptions.map(status => (
+          <Button
+            key={status}
+            variant={selectedStatus === status ? 'contained' : 'outlined'}
+            color={selectedStatus === status ? 'primary' : 'inherit'}
+            onClick={() => onStatusChange(status)}
+            size={buttonSize}
+            className='rounded-lg'
+            sx={{
+              textTransform: 'none',
+              fontWeight: selectedStatus === status ? 600 : 400,
+              borderRadius: '8px',
+              ...(selectedStatus !== status && {
+                borderColor: '#e0e0e0',
+                color: '#666'
+              })
+            }}
+          >
+            {status}
+          </Button>
+        ))}
+      </div>
+    )
+  }
+
+  // If more than maxButtonsBeforeDropdown, show first few as buttons and rest in dropdown
+  const buttonStatuses = statusOptions.slice(0, maxButtonsBeforeDropdown - 1)
+  const dropdownStatuses = statusOptions.slice(maxButtonsBeforeDropdown - 1)
+  const isDropdownItemSelected = dropdownStatuses.includes(selectedStatus)
+
+  return (
+    <div className='flex flex-wrap gap-2'>
+      {/* Regular buttons for first few statuses */}
+      {buttonStatuses.map(status => (
+        <Button
+          key={status}
+          variant={selectedStatus === status ? 'contained' : 'outlined'}
+          color={selectedStatus === status ? 'primary' : 'inherit'}
+          onClick={() => onStatusChange(status)}
+          size={buttonSize}
+          className='rounded-lg'
+          sx={{
+            textTransform: 'none',
+            fontWeight: selectedStatus === status ? 600 : 400,
+            borderRadius: '8px',
+            ...(selectedStatus !== status && {
+              borderColor: '#e0e0e0',
+              color: '#666'
+            })
+          }}
+        >
+          {status}
+        </Button>
+      ))}
+
+      {/* Dropdown button for remaining statuses */}
+      <DropdownButton
+        variant='outlined'
+        onClick={handleDropdownClick}
+        size={buttonSize}
+        endIcon={<i className='tabler-chevron-down' />}
+        sx={{
+          ...(isDropdownItemSelected && {
+            backgroundColor: 'primary.main',
+            color: 'primary.contrastText',
+            borderColor: 'primary.main',
+            fontWeight: 600,
+            '&:hover': {
+              backgroundColor: 'primary.dark',
+              borderColor: 'primary.dark'
+            }
+          })
+        }}
+      >
+        {isDropdownItemSelected ? selectedStatus : dropdownLabel}
+      </DropdownButton>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleDropdownClose}
+        PaperProps={{
+          elevation: 3,
+          sx: {
+            mt: 1,
+            borderRadius: '8px',
+            minWidth: '160px'
+          }
+        }}
+        transformOrigin={{ horizontal: 'left', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+      >
+        {dropdownStatuses.map(status => (
+          <MenuItem
+            key={status}
+            onClick={() => handleDropdownItemClick(status)}
+            selected={selectedStatus === status}
+            sx={{
+              fontSize: '14px',
+              fontWeight: selectedStatus === status ? 600 : 400,
+              color: selectedStatus === status ? 'primary.main' : 'text.primary'
+            }}
+          >
+            {status}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}
+
+export default StatusFilterTabs
+
+// Example usage:
+/*
+import StatusFilterTabs from '@/components/StatusFilterTabs'
+
+// In your component:
+const [statusFilter, setStatusFilter] = useState('Semua')
+
+// For few statuses (will show all as buttons)
+const expenseStatusOptions = ['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas']
+
+// For many statuses (will show some buttons + dropdown)
+const manyStatusOptions = [
+  'Semua', 
+  'Belum Dibayar', 
+  'Dibayar Sebagian', 
+  'Lunas', 
+  'Void', 
+  'Retur',
+  'Jatuh Tempo',
+  'Transaksi Berulang',
+  'Ditangguhkan',
+  'Dibatalkan'
+]
+
+<StatusFilterTabs
+  statusOptions={expenseStatusOptions}
+  selectedStatus={statusFilter}
+  onStatusChange={setStatusFilter}
+/>
+
+// With many options (will automatically use dropdown)
+<StatusFilterTabs
+  statusOptions={manyStatusOptions}
+  selectedStatus={statusFilter}
+  onStatusChange={setStatusFilter}
+  maxButtonsBeforeDropdown={4} // Show 3 buttons + dropdown
+  dropdownLabel="Status Lain"
+/>
+
+// Custom configuration
+<StatusFilterTabs
+  statusOptions={manyStatusOptions}
+  selectedStatus={statusFilter}
+  onStatusChange={setStatusFilter}
+  maxButtonsBeforeDropdown={3}
+  dropdownLabel="Lainnya"
+  buttonSize="medium"
+  showBorder={false}
+/>
+*/
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 56c1e2d..007da5d 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -91,14 +91,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
-          <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-user' />}>
+          <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-receipt-2' />}>
             <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
             <MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
           </SubMenu>
-          <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-user' />}>
+          <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-shopping-cart' />}>
             <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
             <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
               {dictionary['navigation'].purchase_bills}
@@ -113,6 +113,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
               {dictionary['navigation'].purchase_quotes}
             </MenuItem>
           </SubMenu>
+          <SubMenu label={dictionary['navigation'].expenses} icon={<i className='tabler-cash' />}>
+            <MenuItem href={`/${locale}/apps/expense`}>{dictionary['navigation'].list}</MenuItem>
+          </SubMenu>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
@@ -160,7 +163,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             <MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
-          <SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-user' />}>
+          <SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-building' />}>
             <MenuItem href={`/${locale}/apps/vendor/list`}>{dictionary['navigation'].list}</MenuItem>
             {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
           </SubMenu>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index 7c25d03..c9ab714 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -122,6 +122,7 @@
     "invoices": "Invoices",
     "deliveries": "Deliveries",
     "sales_orders": "Orders",
-    "quotes": "Quotes"
+    "quotes": "Quotes",
+    "expenses": "Expenses"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 486f051..5c4742b 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -122,6 +122,7 @@
         "invoices": "Tagihan",
         "deliveries": "Pengiriman",
         "sales_orders": "Pemesanan",
-        "quotes": "Penawaran"
+        "quotes": "Penawaran",
+        "expenses": "Biaya"
     }
 }
diff --git a/src/data/dummy/expense.ts b/src/data/dummy/expense.ts
new file mode 100644
index 0000000..85c5ec1
--- /dev/null
+++ b/src/data/dummy/expense.ts
@@ -0,0 +1,224 @@
+import { ExpenseType } from '@/types/apps/expenseType'
+
+export const expenseData: ExpenseType[] = [
+  {
+    id: 1,
+    date: '2025-01-05',
+    number: 'EXP/2025/001',
+    reference: 'REF-EXP-001',
+    benefeciaryName: 'Budi Santoso',
+    benefeciaryCompany: 'PT Maju Jaya',
+    status: 'Belum Dibayar',
+    balanceDue: 5000000,
+    total: 5000000
+  },
+  {
+    id: 2,
+    date: '2025-01-06',
+    number: 'EXP/2025/002',
+    reference: 'REF-EXP-002',
+    benefeciaryName: 'Siti Aminah',
+    benefeciaryCompany: 'CV Sentosa Abadi',
+    status: 'Dibayar Sebagian',
+    balanceDue: 2500000,
+    total: 6000000
+  },
+  {
+    id: 3,
+    date: '2025-01-07',
+    number: 'EXP/2025/003',
+    reference: 'REF-EXP-003',
+    benefeciaryName: 'Agus Prasetyo',
+    benefeciaryCompany: 'UD Makmur',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 4200000
+  },
+  {
+    id: 4,
+    date: '2025-01-08',
+    number: 'EXP/2025/004',
+    reference: 'REF-EXP-004',
+    benefeciaryName: 'Rina Wulandari',
+    benefeciaryCompany: 'PT Sejahtera Bersama',
+    status: 'Belum Dibayar',
+    balanceDue: 3200000,
+    total: 3200000
+  },
+  {
+    id: 5,
+    date: '2025-01-09',
+    number: 'EXP/2025/005',
+    reference: 'REF-EXP-005',
+    benefeciaryName: 'Dedi Kurniawan',
+    benefeciaryCompany: 'CV Bintang Terang',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1500000,
+    total: 7000000
+  },
+  {
+    id: 6,
+    date: '2025-01-10',
+    number: 'EXP/2025/006',
+    reference: 'REF-EXP-006',
+    benefeciaryName: 'Sri Lestari',
+    benefeciaryCompany: 'PT Barokah Jaya',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 2800000
+  },
+  {
+    id: 7,
+    date: '2025-01-11',
+    number: 'EXP/2025/007',
+    reference: 'REF-EXP-007',
+    benefeciaryName: 'Joko Widodo',
+    benefeciaryCompany: 'UD Sumber Rejeki',
+    status: 'Belum Dibayar',
+    balanceDue: 8000000,
+    total: 8000000
+  },
+  {
+    id: 8,
+    date: '2025-01-12',
+    number: 'EXP/2025/008',
+    reference: 'REF-EXP-008',
+    benefeciaryName: 'Maya Kartika',
+    benefeciaryCompany: 'PT Bumi Lestari',
+    status: 'Dibayar Sebagian',
+    balanceDue: 2000000,
+    total: 9000000
+  },
+  {
+    id: 9,
+    date: '2025-01-13',
+    number: 'EXP/2025/009',
+    reference: 'REF-EXP-009',
+    benefeciaryName: 'Eko Yulianto',
+    benefeciaryCompany: 'CV Cahaya Baru',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 3500000
+  },
+  {
+    id: 10,
+    date: '2025-01-14',
+    number: 'EXP/2025/010',
+    reference: 'REF-EXP-010',
+    benefeciaryName: 'Nina Rahmawati',
+    benefeciaryCompany: 'PT Gemilang',
+    status: 'Belum Dibayar',
+    balanceDue: 4700000,
+    total: 4700000
+  },
+  {
+    id: 11,
+    date: '2025-01-15',
+    number: 'EXP/2025/011',
+    reference: 'REF-EXP-011',
+    benefeciaryName: 'Andi Saputra',
+    benefeciaryCompany: 'CV Harmoni',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1200000,
+    total: 6000000
+  },
+  {
+    id: 12,
+    date: '2025-01-16',
+    number: 'EXP/2025/012',
+    reference: 'REF-EXP-012',
+    benefeciaryName: 'Yuni Astuti',
+    benefeciaryCompany: 'PT Surya Abadi',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 5200000
+  },
+  {
+    id: 13,
+    date: '2025-01-17',
+    number: 'EXP/2025/013',
+    reference: 'REF-EXP-013',
+    benefeciaryName: 'Ridwan Hidayat',
+    benefeciaryCompany: 'UD Berkah',
+    status: 'Belum Dibayar',
+    balanceDue: 2900000,
+    total: 2900000
+  },
+  {
+    id: 14,
+    date: '2025-01-18',
+    number: 'EXP/2025/014',
+    reference: 'REF-EXP-014',
+    benefeciaryName: 'Ratna Sari',
+    benefeciaryCompany: 'PT Amanah Sentosa',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1000000,
+    total: 4000000
+  },
+  {
+    id: 15,
+    date: '2025-01-19',
+    number: 'EXP/2025/015',
+    reference: 'REF-EXP-015',
+    benefeciaryName: 'Hendra Gunawan',
+    benefeciaryCompany: 'CV Murni',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 2500000
+  },
+  {
+    id: 16,
+    date: '2025-01-20',
+    number: 'EXP/2025/016',
+    reference: 'REF-EXP-016',
+    benefeciaryName: 'Mega Putri',
+    benefeciaryCompany: 'PT Citra Mandiri',
+    status: 'Belum Dibayar',
+    balanceDue: 6100000,
+    total: 6100000
+  },
+  {
+    id: 17,
+    date: '2025-01-21',
+    number: 'EXP/2025/017',
+    reference: 'REF-EXP-017',
+    benefeciaryName: 'Bayu Saputra',
+    benefeciaryCompany: 'UD Lancar Jaya',
+    status: 'Dibayar Sebagian',
+    balanceDue: 1700000,
+    total: 5000000
+  },
+  {
+    id: 18,
+    date: '2025-01-22',
+    number: 'EXP/2025/018',
+    reference: 'REF-EXP-018',
+    benefeciaryName: 'Dian Anggraini',
+    benefeciaryCompany: 'CV Sumber Cahaya',
+    status: 'Lunas',
+    balanceDue: 0,
+    total: 3300000
+  },
+  {
+    id: 19,
+    date: '2025-01-23',
+    number: 'EXP/2025/019',
+    reference: 'REF-EXP-019',
+    benefeciaryName: 'Rizky Aditya',
+    benefeciaryCompany: 'PT Mandiri Abadi',
+    status: 'Belum Dibayar',
+    balanceDue: 7000000,
+    total: 7000000
+  },
+  {
+    id: 20,
+    date: '2025-01-24',
+    number: 'EXP/2025/020',
+    reference: 'REF-EXP-020',
+    benefeciaryName: 'Lina Marlina',
+    benefeciaryCompany: 'CV Anugerah',
+    status: 'Dibayar Sebagian',
+    balanceDue: 2000000,
+    total: 6500000
+  }
+]
diff --git a/src/services/api.ts b/src/services/api.ts
index 7dc7a13..beec3a6 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -33,6 +33,8 @@ api.interceptors.response.use(
     const currentPath = window.location.pathname
 
     if (status === 401 && !currentPath.endsWith('/login')) {
+      localStorage.removeItem('user')
+      localStorage.removeItem('authToken')
       window.location.href = '/login'
     }
 
@@ -47,4 +49,3 @@ api.interceptors.response.use(
     return Promise.reject(error)
   }
 )
-
diff --git a/src/types/apps/expenseType.ts b/src/types/apps/expenseType.ts
new file mode 100644
index 0000000..0c7ef2f
--- /dev/null
+++ b/src/types/apps/expenseType.ts
@@ -0,0 +1,11 @@
+export type ExpenseType = {
+  id: number
+  date: string
+  number: string
+  reference: string
+  benefeciaryName: string
+  benefeciaryCompany: string
+  status: string
+  balanceDue: number
+  total: number
+}
diff --git a/src/views/apps/expense/list/ExpenseListCard.tsx b/src/views/apps/expense/list/ExpenseListCard.tsx
new file mode 100644
index 0000000..e828dcc
--- /dev/null
+++ b/src/views/apps/expense/list/ExpenseListCard.tsx
@@ -0,0 +1,51 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Types Imports
+import type { CardStatsHorizontalWithAvatarProps } from '@/types/pages/widgetTypes'
+
+// Component Imports
+import CardStatsHorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'
+
+const data: CardStatsHorizontalWithAvatarProps[] = [
+  {
+    stats: '10.495.100',
+    title: 'Bulan Ini',
+    avatarIcon: 'tabler-calendar-month',
+    avatarColor: 'warning'
+  },
+  {
+    stats: '25.868.800',
+    title: '30 Hari Lalu',
+    avatarIcon: 'tabler-calendar-time',
+    avatarColor: 'error'
+  },
+  {
+    stats: '17.903.400',
+    title: 'Belum Dibayar',
+    avatarIcon: 'tabler-clock-exclamation',
+    avatarColor: 'warning'
+  },
+  {
+    stats: '13.467.200',
+    title: 'Jatuh Tempo',
+    avatarIcon: 'tabler-calendar-due',
+    avatarColor: 'success'
+  }
+]
+
+const ExpenseListCard = () => {
+  return (
+    data && (
+      <Grid container spacing={6}>
+        {data.map((item, index) => (
+          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={index}>
+            <CardStatsHorizontalWithAvatar {...item} avatarSkin='light' />
+          </Grid>
+        ))}
+      </Grid>
+    )
+  )
+}
+
+export default ExpenseListCard
diff --git a/src/views/apps/expense/list/ExpenseListTable.tsx b/src/views/apps/expense/list/ExpenseListTable.tsx
new file mode 100644
index 0000000..54a2495
--- /dev/null
+++ b/src/views/apps/expense/list/ExpenseListTable.tsx
@@ -0,0 +1,519 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { ExpenseType } from '@/types/apps/expenseType'
+import { expenseData } from '@/data/dummy/expense'
+import StatusFilterTabs from '@/components/StatusFilterTab'
+import DateRangePicker from '@/components/RangeDatePicker'
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type ExpenseTypeWithAction = ExpenseType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for Expense
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Belum Dibayar':
+      return 'error'
+    case 'Dibayar Sebagian':
+      return 'warning'
+    case 'Lunas':
+      return 'success'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<ExpenseTypeWithAction>()
+
+const ExpenseListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addExpenseOpen, setAddExpenseOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [expenseId, setExpenseId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<ExpenseType[]>(expenseData)
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = expenseData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        expense =>
+          expense.number.toLowerCase().includes(search.toLowerCase()) ||
+          expense.benefeciaryName.toLowerCase().includes(search.toLowerCase()) ||
+          expense.benefeciaryCompany.toLowerCase().includes(search.toLowerCase()) ||
+          expense.status.toLowerCase().includes(search.toLowerCase()) ||
+          expense.reference.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(expense => expense.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  // Calculate subtotal and total from filtered data
+  const subtotalBalanceDue = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.balanceDue, 0)
+  }, [filteredData])
+
+  const subtotalTotal = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.total, 0)
+  }, [filteredData])
+
+  // For demonstration, adding tax/additional fees to show difference between subtotal and total
+  const taxAmount = subtotalTotal * 0.1 // 10% tax example
+  const finalTotal = subtotalTotal + taxAmount
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleExpenseClick = (expenseId: string) => {
+    console.log('Navigasi ke detail Expense:', expenseId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<ExpenseTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('number', {
+        header: 'Nomor Expense',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            onClick={() => handleExpenseClick(row.original.id.toString())}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.number}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('benefeciaryName', {
+        header: 'Beneficiary',
+        cell: ({ row }) => (
+          <div className='flex flex-col'>
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.benefeciaryName}
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              {row.original.benefeciaryCompany}
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('balanceDue', {
+        header: 'Sisa Tagihan',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.balanceDue > 0 ? 'text-red-600' : 'text-green-600'}`}>
+            {formatCurrency(row.original.balanceDue)}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('total', {
+        header: 'Total',
+        cell: ({ row }) => <Typography className='font-medium'>{formatCurrency(row.original.total)}</Typography>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as ExpenseType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs and Range Date */}
+        <div className='p-6 border-bs'>
+          <div className='flex items-center justify-between'>
+            <StatusFilterTabs
+              statusOptions={[
+                'Semua',
+                'Belum Dibayar',
+                'Dibayar Sebagian',
+                'Lunas',
+                'Jatuh Tempo',
+                'Transaksi Berulang'
+              ]}
+              selectedStatus={statusFilter}
+              onStatusChange={handleStatusFilter}
+            />
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Expense'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/expenses/add', locale as Locale)}
+            >
+              Tambah
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+
+                {/* Subtotal Row */}
+                <tr className='border-t-2 bg-gray-50'>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      Subtotal
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibol'>
+                      {formatCurrency(subtotalBalanceDue)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      {formatCurrency(subtotalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
+
+                {/* Total Row */}
+                <tr className='border-t bg-gray-100'>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      Total
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(subtotalBalanceDue + taxAmount)}
+                    </Typography>
+                  </td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(finalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default ExpenseListTable
diff --git a/src/views/apps/expense/list/index.tsx b/src/views/apps/expense/list/index.tsx
new file mode 100644
index 0000000..6d14bf5
--- /dev/null
+++ b/src/views/apps/expense/list/index.tsx
@@ -0,0 +1,23 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import ExpenseListTable from './ExpenseListTable'
+import ExpenseListCard from './ExpenseListCard'
+
+// Type Imports
+
+// Component Imports
+
+const ExpenseList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseListCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseList

From 420df714525f9c19b6a0206002d6e9bf876e0b2a Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 14:31:16 +0700
Subject: [PATCH 21/42] Sales Bill List table Update

---
 .../apps/expense/list/ExpenseListTable.tsx    |   1 -
 .../sales-bill/list/SalesBillListTable.tsx    | 110 ++++++++++++++----
 2 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/src/views/apps/expense/list/ExpenseListTable.tsx b/src/views/apps/expense/list/ExpenseListTable.tsx
index 54a2495..dde2737 100644
--- a/src/views/apps/expense/list/ExpenseListTable.tsx
+++ b/src/views/apps/expense/list/ExpenseListTable.tsx
@@ -188,7 +188,6 @@ const ExpenseListTable = () => {
     return filteredData.reduce((sum, expense) => sum + expense.total, 0)
   }, [filteredData])
 
-  // For demonstration, adding tax/additional fees to show difference between subtotal and total
   const taxAmount = subtotalTotal * 0.1 // 10% tax example
   const finalTotal = subtotalTotal + taxAmount
 
diff --git a/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx b/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
index 6245605..3c98f01 100644
--- a/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
+++ b/src/views/apps/sales/sales-bill/list/SalesBillListTable.tsx
@@ -42,6 +42,8 @@ import Loading from '@/components/layout/shared/Loading'
 import { getLocalizedUrl } from '@/utils/i18n'
 import { SalesBillType } from '@/types/apps/salesTypes'
 import { salesBillData } from '@/data/dummy/sales'
+import DateRangePicker from '@/components/RangeDatePicker'
+import StatusFilterTabs from '@/components/StatusFilterTab'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -144,6 +146,8 @@ const SalesBillListTable = () => {
   const [search, setSearch] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>('Semua')
   const [filteredData, setFilteredData] = useState<SalesBillType[]>(salesBillData)
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
 
   // Hooks
   const { lang: locale } = useParams()
@@ -178,6 +182,17 @@ const SalesBillListTable = () => {
     return filteredData.slice(startIndex, startIndex + pageSize)
   }, [filteredData, currentPage, pageSize])
 
+  const subtotalremainingBill = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.remainingBill, 0)
+  }, [filteredData])
+
+  const subtotalTotal = useMemo(() => {
+    return filteredData.reduce((sum, expense) => sum + expense.total, 0)
+  }, [filteredData])
+
+  const taxAmount = subtotalTotal * 0.1 // 10% tax example
+  const finalTotal = subtotalTotal + taxAmount
+
   const handlePageChange = useCallback((event: unknown, newPage: number) => {
     setCurrentPage(newPage)
   }, [])
@@ -323,30 +338,29 @@ const SalesBillListTable = () => {
   return (
     <>
       <Card>
-        {/* Filter Status Tabs */}
+        {/* Filter Status Tabs and Range Date */}
         <div className='p-6 border-bs'>
-          <div className='flex flex-wrap gap-2'>
-            {['Semua', 'Belum Dibayar', 'Dibayar Sebagian', 'Lunas', 'Void', 'Retur'].map(status => (
-              <Button
-                key={status}
-                variant={statusFilter === status ? 'contained' : 'outlined'}
-                color={statusFilter === status ? 'primary' : 'inherit'}
-                onClick={() => handleStatusFilter(status)}
-                size='small'
-                className='rounded-lg'
-                sx={{
-                  textTransform: 'none',
-                  fontWeight: statusFilter === status ? 600 : 400,
-                  borderRadius: '8px',
-                  ...(statusFilter !== status && {
-                    borderColor: '#e0e0e0',
-                    color: '#666'
-                  })
-                }}
-              >
-                {status}
-              </Button>
-            ))}
+          <div className='flex items-center justify-between'>
+            <StatusFilterTabs
+              statusOptions={[
+                'Semua',
+                'Belum Dibayar',
+                'Dibayar Sebagian',
+                'Lunas',
+                'Void',
+                'Jatuh Tempo',
+                'Retur',
+                'Transaksi Berulang'
+              ]}
+              selectedStatus={statusFilter}
+              onStatusChange={handleStatusFilter}
+            />
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
           </div>
         </div>
 
@@ -435,6 +449,56 @@ const SalesBillListTable = () => {
                     </tr>
                   )
                 })}
+
+                {/* Subtotal Row */}
+                <tr className='border-t-2 bg-gray-50'>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      Subtotal
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibol'>
+                      {formatCurrency(subtotalremainingBill)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      {formatCurrency(subtotalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
+
+                {/* Total Row */}
+                <tr className='border-t bg-gray-100'>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      Total
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(subtotalremainingBill + taxAmount)}
+                    </Typography>
+                  </td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      {formatCurrency(finalTotal)}
+                    </Typography>
+                  </td>
+                </tr>
               </tbody>
             )}
           </table>

From afa4cfad0de8d1f64bfa20bd91eeedb35b8bdcd5 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 15:45:34 +0700
Subject: [PATCH 22/42] Expense Add

---
 .../(private)/apps/expense/add/page.tsx       |  18 +
 src/data/dummy/expense.ts                     |   2 +-
 src/types/apps/expenseType.ts                 |  11 -
 src/types/apps/expenseTypes.ts                |  68 ++++
 .../apps/expense/add/ExpenseAddAccount.tsx    | 137 +++++++
 .../apps/expense/add/ExpenseAddBasicInfo.tsx  | 166 +++++++++
 src/views/apps/expense/add/ExpenseAddForm.tsx | 149 ++++++++
 .../apps/expense/add/ExpenseAddHeader.tsx     |  19 +
 .../apps/expense/add/ExpenseAddSummary.tsx    | 198 ++++++++++
 .../apps/expense/list/ExpenseListTable.tsx    |   4 +-
 .../PurchaseIngredientsTable.tsx              | 340 ++++++++----------
 .../purchase-form/PurchaseSummary.tsx         | 117 +++---
 12 files changed, 980 insertions(+), 249 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/expense/add/page.tsx
 delete mode 100644 src/types/apps/expenseType.ts
 create mode 100644 src/types/apps/expenseTypes.ts
 create mode 100644 src/views/apps/expense/add/ExpenseAddAccount.tsx
 create mode 100644 src/views/apps/expense/add/ExpenseAddBasicInfo.tsx
 create mode 100644 src/views/apps/expense/add/ExpenseAddForm.tsx
 create mode 100644 src/views/apps/expense/add/ExpenseAddHeader.tsx
 create mode 100644 src/views/apps/expense/add/ExpenseAddSummary.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/expense/add/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/expense/add/page.tsx
new file mode 100644
index 0000000..65f30df
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/expense/add/page.tsx
@@ -0,0 +1,18 @@
+import ExpenseAddForm from '@/views/apps/expense/add/ExpenseAddForm'
+import ExpenseAddHeader from '@/views/apps/expense/add/ExpenseAddHeader'
+import Grid from '@mui/material/Grid2'
+
+const ExpenseAddPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseAddPage
diff --git a/src/data/dummy/expense.ts b/src/data/dummy/expense.ts
index 85c5ec1..7d87601 100644
--- a/src/data/dummy/expense.ts
+++ b/src/data/dummy/expense.ts
@@ -1,4 +1,4 @@
-import { ExpenseType } from '@/types/apps/expenseType'
+import { ExpenseType } from '@/types/apps/expenseTypes'
 
 export const expenseData: ExpenseType[] = [
   {
diff --git a/src/types/apps/expenseType.ts b/src/types/apps/expenseType.ts
deleted file mode 100644
index 0c7ef2f..0000000
--- a/src/types/apps/expenseType.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type ExpenseType = {
-  id: number
-  date: string
-  number: string
-  reference: string
-  benefeciaryName: string
-  benefeciaryCompany: string
-  status: string
-  balanceDue: number
-  total: number
-}
diff --git a/src/types/apps/expenseTypes.ts b/src/types/apps/expenseTypes.ts
new file mode 100644
index 0000000..811cf6e
--- /dev/null
+++ b/src/types/apps/expenseTypes.ts
@@ -0,0 +1,68 @@
+export type ExpenseType = {
+  id: number
+  date: string
+  number: string
+  reference: string
+  benefeciaryName: string
+  benefeciaryCompany: string
+  status: string
+  balanceDue: number
+  total: number
+}
+
+export interface ExpenseRecipient {
+  id: string
+  name: string
+}
+
+export interface ExpenseAccount {
+  id: string
+  name: string
+  code: string
+}
+
+export interface ExpenseTax {
+  id: string
+  name: string
+  rate: number
+}
+
+export interface ExpenseTag {
+  id: string
+  name: string
+  color: string
+}
+
+export interface ExpenseItem {
+  id: number
+  account: ExpenseAccount | null
+  description: string
+  tax: ExpenseTax | null
+  total: number
+}
+
+export interface ExpenseFormData {
+  // Header fields
+  paidFrom: string // "Dibayar Dari"
+  payLater: boolean // "Bayar Nanti" toggle
+  recipient: ExpenseRecipient | null // "Penerima"
+  transactionDate: string // "Tgl. Transaksi"
+
+  // Reference fields
+  number: string // "Nomor"
+  reference: string // "Referensi"
+  tag: ExpenseTag | null // "Tag"
+  includeTax: boolean // "Harga termasuk pajak"
+
+  // Expense items
+  expenseItems: ExpenseItem[]
+
+  // Totals
+  subtotal: number
+  total: number
+
+  // Optional sections
+  showMessage: boolean
+  showAttachment: boolean
+  message: string
+}
diff --git a/src/views/apps/expense/add/ExpenseAddAccount.tsx b/src/views/apps/expense/add/ExpenseAddAccount.tsx
new file mode 100644
index 0000000..19bef61
--- /dev/null
+++ b/src/views/apps/expense/add/ExpenseAddAccount.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import React from 'react'
+import {
+  Button,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  MenuItem
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { ExpenseFormData, ExpenseItem, ExpenseAccount, ExpenseTax } from '@/types/apps/expenseTypes'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAutocomplete from '@core/components/mui/Autocomplete'
+
+interface ExpenseAddAccountProps {
+  formData: ExpenseFormData
+  mockAccounts: ExpenseAccount[]
+  mockTaxes: ExpenseTax[]
+  onExpenseItemChange: (index: number, field: keyof ExpenseItem, value: any) => void
+  onAddExpenseItem: () => void
+  onRemoveExpenseItem: (index: number) => void
+}
+
+const ExpenseAddAccount: React.FC<ExpenseAddAccountProps> = ({
+  formData,
+  mockAccounts,
+  mockTaxes,
+  onExpenseItemChange,
+  onAddExpenseItem,
+  onRemoveExpenseItem
+}) => {
+  return (
+    <Grid size={{ xs: 12 }}>
+      <TableContainer component={Paper} variant='outlined'>
+        <Table>
+          <TableHead>
+            <TableRow sx={{ backgroundColor: 'grey.50' }}>
+              <TableCell sx={{ fontWeight: 'bold' }}>Akun Biaya</TableCell>
+              <TableCell sx={{ fontWeight: 'bold' }}>Deskripsi</TableCell>
+              <TableCell sx={{ fontWeight: 'bold' }}>Pajak</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'right' }}>Total</TableCell>
+              <TableCell sx={{ width: 50 }}></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {formData.expenseItems.map((item, index) => (
+              <TableRow key={item.id}>
+                <TableCell sx={{ width: '25%' }}>
+                  <CustomAutocomplete
+                    size='small'
+                    options={mockAccounts}
+                    getOptionLabel={option => `${option.code} ${option.name}`}
+                    value={item.account}
+                    onChange={(_, value) => onExpenseItemChange(index, 'account', value)}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
+                  />
+                </TableCell>
+                <TableCell sx={{ width: '30%' }}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={item.description}
+                    onChange={e => onExpenseItemChange(index, 'description', e.target.value)}
+                  />
+                </TableCell>
+                <TableCell sx={{ width: '20%' }}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    select
+                    value={item.tax?.id || ''}
+                    onChange={e => {
+                      const tax = mockTaxes.find(t => t.id === e.target.value)
+                      onExpenseItemChange(index, 'tax', tax || null)
+                    }}
+                    SelectProps={{
+                      displayEmpty: true
+                    }}
+                  >
+                    <MenuItem value=''>...</MenuItem>
+                    {mockTaxes.map(tax => (
+                      <MenuItem key={tax.id} value={tax.id}>
+                        {tax.name}
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                </TableCell>
+                <TableCell sx={{ width: '20%' }}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    type='number'
+                    value={item.total}
+                    onChange={e => onExpenseItemChange(index, 'total', parseFloat(e.target.value) || 0)}
+                    sx={{
+                      '& .MuiInputBase-input': {
+                        textAlign: 'right'
+                      }
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <IconButton
+                    size='small'
+                    color='error'
+                    onClick={() => onRemoveExpenseItem(index)}
+                    disabled={formData.expenseItems.length === 1}
+                  >
+                    <i className='tabler-trash' />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Button
+        startIcon={<i className='tabler-plus' />}
+        onClick={onAddExpenseItem}
+        variant='outlined'
+        size='small'
+        sx={{ mt: 1 }}
+      >
+        Tambah baris
+      </Button>
+    </Grid>
+  )
+}
+
+export default ExpenseAddAccount
diff --git a/src/views/apps/expense/add/ExpenseAddBasicInfo.tsx b/src/views/apps/expense/add/ExpenseAddBasicInfo.tsx
new file mode 100644
index 0000000..b268fed
--- /dev/null
+++ b/src/views/apps/expense/add/ExpenseAddBasicInfo.tsx
@@ -0,0 +1,166 @@
+'use client'
+
+import React from 'react'
+import { Switch, FormControlLabel, Box } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { ExpenseFormData, ExpenseAccount, ExpenseRecipient, ExpenseTag } from '@/types/apps/expenseTypes'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAutocomplete from '@core/components/mui/Autocomplete'
+
+interface ExpenseAddBasicInfoProps {
+  formData: ExpenseFormData
+  mockAccounts: ExpenseAccount[]
+  mockRecipients: ExpenseRecipient[]
+  mockTags: ExpenseTag[]
+  onInputChange: (field: keyof ExpenseFormData, value: any) => void
+}
+
+const ExpenseAddBasicInfo: React.FC<ExpenseAddBasicInfoProps> = ({
+  formData,
+  mockAccounts,
+  mockRecipients,
+  mockTags,
+  onInputChange
+}) => {
+  return (
+    <>
+      {/* Row 1: Dibayar Dari (6) + Bayar Nanti (6) */}
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CustomAutocomplete
+          size='small'
+          options={mockAccounts}
+          getOptionLabel={option => `${option.code} ${option.name}`}
+          value={mockAccounts.find(acc => `${acc.code} ${acc.name}` === formData.paidFrom) || null}
+          onChange={(_, value) => onInputChange('paidFrom', value ? `${value.code} ${value.name}` : '')}
+          renderInput={params => <CustomTextField {...params} label='Dibayar Dari' required />}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: { xs: 'flex-start', md: 'flex-end' },
+            alignItems: 'end',
+            height: '100%'
+          }}
+        >
+          <FormControlLabel
+            control={
+              <Switch
+                checked={formData.payLater}
+                onChange={e => onInputChange('payLater', e.target.checked)}
+                size='small'
+              />
+            }
+            label='Bayar Nanti'
+          />
+        </Box>
+      </Grid>
+
+      {/* Row 2: Penerima (6) */}
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CustomAutocomplete
+          size='small'
+          options={mockRecipients}
+          getOptionLabel={option => option.name}
+          value={formData.recipient}
+          onChange={(_, value) => onInputChange('recipient', value)}
+          renderInput={params => <CustomTextField {...params} label='Penerima' required placeholder='Pilih penerima' />}
+        />
+      </Grid>
+
+      {/* Row 3: Tgl. Transaksi (6) */}
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CustomTextField
+          fullWidth
+          size='small'
+          type='date'
+          label='Tgl. Transaksi'
+          required
+          value={formData.transactionDate.split('/').reverse().join('-')}
+          onChange={e => {
+            const date = new Date(e.target.value)
+            const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}`
+            onInputChange('transactionDate', formattedDate)
+          }}
+          slotProps={{
+            input: {
+              endAdornment: <i className='tabler-calendar' style={{ fontSize: 20 }} />
+            }
+          }}
+        />
+      </Grid>
+
+      {/* Row 4: Nomor, Referensi, Tag */}
+      <Grid size={{ xs: 12 }}>
+        <Grid container spacing={2}>
+          <Grid size={{ xs: 12, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  Nomor
+                  <i className='tabler-help' style={{ fontSize: 16 }} />
+                </Box>
+              }
+              value={formData.number}
+              onChange={e => onInputChange('number', e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  Referensi
+                  <i className='tabler-help' style={{ fontSize: 16 }} />
+                </Box>
+              }
+              placeholder='Referensi'
+              value={formData.reference}
+              onChange={e => onInputChange('reference', e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              size='small'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  Tag
+                  <i className='tabler-help' style={{ fontSize: 16 }} />
+                </Box>
+              }
+              placeholder='Pilih Tag'
+              value={formData.tag?.name || ''}
+              onChange={e => {
+                const tag = mockTags.find(t => t.name === e.target.value)
+                onInputChange('tag', tag || null)
+              }}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+
+      {/* Row 5: Harga termasuk pajak */}
+      <Grid size={{ xs: 12 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={formData.includeTax}
+                onChange={e => onInputChange('includeTax', e.target.checked)}
+                size='small'
+              />
+            }
+            label='Harga termasuk pajak'
+          />
+        </Box>
+      </Grid>
+    </>
+  )
+}
+
+export default ExpenseAddBasicInfo
diff --git a/src/views/apps/expense/add/ExpenseAddForm.tsx b/src/views/apps/expense/add/ExpenseAddForm.tsx
new file mode 100644
index 0000000..60425d0
--- /dev/null
+++ b/src/views/apps/expense/add/ExpenseAddForm.tsx
@@ -0,0 +1,149 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardContent } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import {
+  ExpenseFormData,
+  ExpenseItem,
+  ExpenseAccount,
+  ExpenseTax,
+  ExpenseTag,
+  ExpenseRecipient
+} from '@/types/apps/expenseTypes'
+import ExpenseAddBasicInfo from './ExpenseAddBasicInfo'
+import ExpenseAddAccount from './ExpenseAddAccount'
+import ExpenseAddSummary from './ExpenseAddSummary'
+
+// Mock data
+const mockAccounts: ExpenseAccount[] = [
+  { id: '1', name: 'Kas', code: '1-10001' },
+  { id: '2', name: 'Bank BCA', code: '1-10002' },
+  { id: '3', name: 'Bank Mandiri', code: '1-10003' }
+]
+
+const mockRecipients: ExpenseRecipient[] = [
+  { id: '1', name: 'PT ABC Company' },
+  { id: '2', name: 'CV XYZ Trading' },
+  { id: '3', name: 'John Doe' },
+  { id: '4', name: 'Jane Smith' }
+]
+
+const mockTaxes: ExpenseTax[] = [
+  { id: '1', name: 'PPN 11%', rate: 11 },
+  { id: '2', name: 'PPh 23', rate: 2 },
+  { id: '3', name: 'Bebas Pajak', rate: 0 }
+]
+
+const mockTags: ExpenseTag[] = [
+  { id: '1', name: 'Operasional', color: '#2196F3' },
+  { id: '2', name: 'Marketing', color: '#4CAF50' },
+  { id: '3', name: 'IT', color: '#FF9800' }
+]
+
+const ExpenseAddForm: React.FC = () => {
+  const [formData, setFormData] = useState<ExpenseFormData>({
+    paidFrom: '1-10001 Kas',
+    payLater: false,
+    recipient: null,
+    transactionDate: '13/09/2025',
+    number: 'EXP/00042',
+    reference: '',
+    tag: null,
+    includeTax: false,
+    expenseItems: [
+      {
+        id: 1,
+        account: null,
+        description: '',
+        tax: null,
+        total: 0
+      }
+    ],
+    subtotal: 0,
+    total: 0,
+    showMessage: false,
+    showAttachment: false,
+    message: ''
+  })
+
+  const handleInputChange = (field: keyof ExpenseFormData, value: any): void => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  const handleExpenseItemChange = (index: number, field: keyof ExpenseItem, value: any): void => {
+    setFormData(prev => {
+      const newItems = [...prev.expenseItems]
+      newItems[index] = { ...newItems[index], [field]: value }
+
+      const subtotal = newItems.reduce((sum, item) => sum + item.total, 0)
+      const total = subtotal
+
+      return {
+        ...prev,
+        expenseItems: newItems,
+        subtotal,
+        total
+      }
+    })
+  }
+
+  const addExpenseItem = (): void => {
+    const newItem: ExpenseItem = {
+      id: Date.now(),
+      account: null,
+      description: '',
+      tax: null,
+      total: 0
+    }
+    setFormData(prev => ({
+      ...prev,
+      expenseItems: [...prev.expenseItems, newItem]
+    }))
+  }
+
+  const removeExpenseItem = (index: number): void => {
+    if (formData.expenseItems.length > 1) {
+      setFormData(prev => ({
+        ...prev,
+        expenseItems: prev.expenseItems.filter((_, i) => i !== index)
+      }))
+    }
+  }
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <Card sx={{ maxWidth: 1200, margin: 'auto', mt: 2 }}>
+      <CardContent>
+        <Grid container spacing={3}>
+          <ExpenseAddBasicInfo
+            formData={formData}
+            mockAccounts={mockAccounts}
+            mockRecipients={mockRecipients}
+            mockTags={mockTags}
+            onInputChange={handleInputChange}
+          />
+
+          <ExpenseAddAccount
+            formData={formData}
+            mockAccounts={mockAccounts}
+            mockTaxes={mockTaxes}
+            onExpenseItemChange={handleExpenseItemChange}
+            onAddExpenseItem={addExpenseItem}
+            onRemoveExpenseItem={removeExpenseItem}
+          />
+
+          <ExpenseAddSummary formData={formData} onInputChange={handleInputChange} formatCurrency={formatCurrency} />
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseAddForm
diff --git a/src/views/apps/expense/add/ExpenseAddHeader.tsx b/src/views/apps/expense/add/ExpenseAddHeader.tsx
new file mode 100644
index 0000000..5cbd1ca
--- /dev/null
+++ b/src/views/apps/expense/add/ExpenseAddHeader.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const ExpenseAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Biaya
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default ExpenseAddHeader
diff --git a/src/views/apps/expense/add/ExpenseAddSummary.tsx b/src/views/apps/expense/add/ExpenseAddSummary.tsx
new file mode 100644
index 0000000..63f071e
--- /dev/null
+++ b/src/views/apps/expense/add/ExpenseAddSummary.tsx
@@ -0,0 +1,198 @@
+'use client'
+
+import React from 'react'
+import { Button, Accordion, AccordionSummary, AccordionDetails, Typography, Box } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import { ExpenseFormData } from '@/types/apps/expenseTypes'
+import CustomTextField from '@core/components/mui/TextField'
+import ImageUpload from '@/components/ImageUpload'
+
+interface ExpenseAddSummaryProps {
+  formData: ExpenseFormData
+  onInputChange: (field: keyof ExpenseFormData, value: any) => void
+  formatCurrency: (amount: number) => string
+}
+
+const ExpenseAddSummary: React.FC<ExpenseAddSummaryProps> = ({ formData, onInputChange, formatCurrency }) => {
+  const handleUpload = async (file: File): Promise<string> => {
+    // Simulate upload
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(URL.createObjectURL(file))
+      }, 1000)
+    })
+  }
+
+  return (
+    <Grid size={12} sx={{ mt: 4 }}>
+      <Grid container spacing={3}>
+        {/* Left Side - Pesan and Attachment */}
+        <Grid size={{ xs: 12, md: 7 }}>
+          {/* Pesan Section */}
+          <Box sx={{ mb: 3 }}>
+            <Button
+              variant='text'
+              color='inherit'
+              onClick={() => onInputChange('showMessage', !formData.showMessage)}
+              sx={{
+                textTransform: 'none',
+                fontSize: '14px',
+                fontWeight: 500,
+                padding: '12px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                color: 'text.primary',
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Box component='span' sx={{ mr: 1 }}>
+                {formData.showMessage ? (
+                  <i className='tabler-chevron-down w-4 h-4' />
+                ) : (
+                  <i className='tabler-chevron-right w-4 h-4' />
+                )}
+              </Box>
+              Pesan
+            </Button>
+            {formData.showMessage && (
+              <Box sx={{ mt: 2 }}>
+                <CustomTextField
+                  fullWidth
+                  multiline
+                  rows={3}
+                  placeholder='Tambahkan pesan...'
+                  value={formData.message || ''}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => onInputChange('message', e.target.value)}
+                />
+              </Box>
+            )}
+          </Box>
+
+          {/* Attachment Section */}
+          <Box>
+            <Button
+              variant='text'
+              color='inherit'
+              onClick={() => onInputChange('showAttachment', !formData.showAttachment)}
+              sx={{
+                textTransform: 'none',
+                fontSize: '14px',
+                fontWeight: 500,
+                padding: '12px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                color: 'text.primary',
+                '&:hover': {
+                  backgroundColor: '#eeeeee'
+                }
+              }}
+            >
+              <Box component='span' sx={{ mr: 1 }}>
+                {formData.showAttachment ? (
+                  <i className='tabler-chevron-down w-4 h-4' />
+                ) : (
+                  <i className='tabler-chevron-right w-4 h-4' />
+                )}
+              </Box>
+              Attachment
+            </Button>
+            {formData.showAttachment && (
+              <ImageUpload
+                onUpload={handleUpload}
+                maxFileSize={1 * 1024 * 1024} // 1MB
+                showUrlOption={false}
+                dragDropText='Drop your image here'
+                browseButtonText='Choose Image'
+              />
+            )}
+          </Box>
+        </Grid>
+
+        {/* Right Side - Totals */}
+        <Grid size={{ xs: 12, md: 5 }}>
+          <Box sx={{ backgroundColor: '#ffffff', p: 3, borderRadius: '8px' }}>
+            {/* Sub Total */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Typography variant='body1' color='text.secondary' sx={{ fontSize: '16px' }}>
+                Sub Total
+              </Typography>
+              <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
+                {new Intl.NumberFormat('id-ID', {
+                  style: 'currency',
+                  currency: 'IDR',
+                  minimumFractionDigits: 0
+                }).format(formData.subtotal || 0)}
+              </Typography>
+            </Box>
+
+            {/* Additional Options */}
+
+            {/* Total */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                py: 2,
+                borderBottom: '1px solid #e0e0e0',
+                '&:hover': {
+                  backgroundColor: '#f8f8f8'
+                }
+              }}
+            >
+              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px' }}>
+                Total
+              </Typography>
+              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px', textAlign: 'right' }}>
+                RP. 120.000
+              </Typography>
+            </Box>
+
+            {/* Save Button */}
+            <Button
+              variant='contained'
+              color='primary'
+              fullWidth
+              sx={{
+                textTransform: 'none',
+                fontWeight: 600,
+                py: 1.5,
+                boxShadow: 'none',
+                '&:hover': {
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+                }
+              }}
+            >
+              Simpan
+            </Button>
+          </Box>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseAddSummary
diff --git a/src/views/apps/expense/list/ExpenseListTable.tsx b/src/views/apps/expense/list/ExpenseListTable.tsx
index dde2737..83d527f 100644
--- a/src/views/apps/expense/list/ExpenseListTable.tsx
+++ b/src/views/apps/expense/list/ExpenseListTable.tsx
@@ -40,7 +40,7 @@ import { useDispatch } from 'react-redux'
 import TablePaginationComponent from '@/components/TablePaginationComponent'
 import Loading from '@/components/layout/shared/Loading'
 import { getLocalizedUrl } from '@/utils/i18n'
-import { ExpenseType } from '@/types/apps/expenseType'
+import { ExpenseType } from '@/types/apps/expenseTypes'
 import { expenseData } from '@/data/dummy/expense'
 import StatusFilterTabs from '@/components/StatusFilterTab'
 import DateRangePicker from '@/components/RangeDatePicker'
@@ -387,7 +387,7 @@ const ExpenseListTable = () => {
               component={Link}
               className='max-sm:is-full is-auto'
               startIcon={<i className='tabler-plus' />}
-              href={getLocalizedUrl('/apps/expenses/add', locale as Locale)}
+              href={getLocalizedUrl('/apps/expense/add', locale as Locale)}
             >
               Tambah
             </Button>
diff --git a/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx b/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
index d319568..8514a0a 100644
--- a/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
@@ -1,7 +1,18 @@
 'use client'
 
 import React from 'react'
-import { Button, Typography } from '@mui/material'
+import {
+  Button,
+  Typography,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper
+} from '@mui/material'
 import Grid from '@mui/material/Grid2'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import CustomTextField from '@/@core/components/mui/TextField'
@@ -53,195 +64,160 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
   ]
 
   return (
-    <Grid size={12} sx={{ mt: 4 }}>
+    <Grid size={{ xs: 12 }} sx={{ mt: 4 }}>
       <Typography variant='h6' sx={{ mb: 2, fontWeight: 600 }}>
         Bahan Baku / Ingredients
       </Typography>
 
-      {/* Table Header */}
-      <Grid container spacing={1} sx={{ mb: 2, px: 1 }}>
-        <Grid size={1.8}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Bahan Baku
-          </Typography>
-        </Grid>
-        <Grid size={1.8}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Deskripsi
-          </Typography>
-        </Grid>
-        <Grid size={1}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Kuantitas
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Satuan
-          </Typography>
-        </Grid>
-        <Grid size={1}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Discount
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Harga
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Pajak
-          </Typography>
-        </Grid>
-        <Grid size={1.2}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Waste
-          </Typography>
-        </Grid>
-        <Grid size={1}>
-          <Typography variant='subtitle2' fontWeight={600}>
-            Total
-          </Typography>
-        </Grid>
-        <Grid size={0.6}></Grid>
-      </Grid>
+      <TableContainer component={Paper} variant='outlined'>
+        <Table>
+          <TableHead>
+            <TableRow sx={{ backgroundColor: 'grey.50' }}>
+              <TableCell sx={{ fontWeight: 'bold', minWidth: 180 }}>Bahan Baku</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', minWidth: 150 }}>Deskripsi</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 100 }}>Kuantitas</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Satuan</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 100 }}>Discount</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Harga</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Pajak</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Waste</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', width: 100, textAlign: 'right' }}>Total</TableCell>
+              <TableCell sx={{ width: 50 }}></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {formData.ingredientItems.map((item: IngredientItem, index: number) => (
+              <TableRow key={item.id}>
+                <TableCell>
+                  <CustomAutocomplete
+                    size='small'
+                    options={ingredientOptions}
+                    value={item.ingredient}
+                    onChange={(event, newValue) => handleIngredientChange(index, 'ingredient', newValue)}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih Bahan Baku' />}
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={item.deskripsi}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleIngredientChange(index, 'deskripsi', e.target.value)
+                    }
+                    placeholder='Deskripsi'
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    type='number'
+                    value={item.kuantitas}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleIngredientChange(index, 'kuantitas', parseInt(e.target.value) || 1)
+                    }
+                    inputProps={{ min: 1 }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomAutocomplete
+                    size='small'
+                    options={satuanOptions}
+                    value={item.satuan}
+                    onChange={(event, newValue) => handleIngredientChange(index, 'satuan', newValue)}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih...' />}
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={item.discount}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleIngredientChange(index, 'discount', e.target.value)
+                    }
+                    placeholder='0%'
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    type='number'
+                    value={item.harga === 0 ? '' : item.harga?.toString() || ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      const value = e.target.value
 
-      {/* Ingredient Items */}
-      {formData.ingredientItems.map((item: IngredientItem, index: number) => (
-        <Grid container spacing={1} key={item.id} sx={{ mb: 2, alignItems: 'center' }}>
-          <Grid size={1.8}>
-            <CustomAutocomplete
-              fullWidth
-              size='small'
-              options={ingredientOptions}
-              value={item.ingredient}
-              onChange={(event, newValue) => handleIngredientChange(index, 'ingredient', newValue)}
-              renderInput={params => (
-                <CustomTextField {...params} placeholder='Pilih Bahan Baku' size='small' fullWidth />
-              )}
-            />
-          </Grid>
-          <Grid size={1.8}>
-            <CustomTextField
-              fullWidth
-              size='small'
-              value={item.deskripsi}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                handleIngredientChange(index, 'deskripsi', e.target.value)
-              }
-              placeholder='Deskripsi'
-            />
-          </Grid>
-          <Grid size={1}>
-            <CustomTextField
-              fullWidth
-              size='small'
-              type='number'
-              value={item.kuantitas}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                handleIngredientChange(index, 'kuantitas', parseInt(e.target.value) || 1)
-              }
-              inputProps={{ min: 1 }}
-            />
-          </Grid>
-          <Grid size={1.2}>
-            <CustomAutocomplete
-              fullWidth
-              size='small'
-              options={satuanOptions}
-              value={item.satuan}
-              onChange={(event, newValue) => handleIngredientChange(index, 'satuan', newValue)}
-              renderInput={params => <CustomTextField {...params} placeholder='Pilih...' size='small' fullWidth />}
-            />
-          </Grid>
-          <Grid size={1}>
-            <CustomTextField
-              fullWidth
-              size='small'
-              value={item.discount}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                handleIngredientChange(index, 'discount', e.target.value)
-              }
-              placeholder='0%'
-            />
-          </Grid>
-          <Grid size={1.2}>
-            <CustomTextField
-              fullWidth
-              size='small'
-              type='number'
-              value={item.harga === 0 ? '' : item.harga?.toString() || ''} // Ubah ini: 0 jadi empty string
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                const value = e.target.value
+                      if (value === '') {
+                        handleIngredientChange(index, 'harga', null)
+                        return
+                      }
 
-                if (value === '') {
-                  // Jika kosong, set ke null atau undefined, bukan 0
-                  handleIngredientChange(index, 'harga', null) // atau undefined
-                  return
-                }
-
-                const numericValue = parseFloat(value)
-                handleIngredientChange(index, 'harga', isNaN(numericValue) ? 0 : numericValue)
-              }}
-              inputProps={{ min: 0, step: 'any' }}
-              placeholder='0'
-            />
-          </Grid>
-          <Grid size={1.2}>
-            <CustomAutocomplete
-              fullWidth
-              size='small'
-              options={pajakOptions}
-              value={item.pajak}
-              onChange={(event, newValue) => handleIngredientChange(index, 'pajak', newValue)}
-              renderInput={params => <CustomTextField {...params} placeholder='...' size='small' fullWidth />}
-            />
-          </Grid>
-          <Grid size={1.2}>
-            <CustomAutocomplete
-              fullWidth
-              size='small'
-              options={wasteOptions}
-              value={item.waste}
-              onChange={(event, newValue) => handleIngredientChange(index, 'waste', newValue)}
-              renderInput={params => <CustomTextField {...params} placeholder='...' size='small' fullWidth />}
-            />
-          </Grid>
-          <Grid size={1}>
-            <CustomTextField fullWidth size='small' value={item.total} InputProps={{ readOnly: true }} />
-          </Grid>
-          <Grid size={0.6}>
-            <Button
-              variant='outlined'
-              color='error'
-              size='small'
-              onClick={() => removeIngredientItem(index)}
-              sx={{ minWidth: 'auto', p: 1 }}
-            >
-              <i className='tabler-trash' />
-            </Button>
-          </Grid>
-        </Grid>
-      ))}
+                      const numericValue = parseFloat(value)
+                      handleIngredientChange(index, 'harga', isNaN(numericValue) ? 0 : numericValue)
+                    }}
+                    inputProps={{ min: 0, step: 'any' }}
+                    placeholder='0'
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomAutocomplete
+                    size='small'
+                    options={pajakOptions}
+                    value={item.pajak}
+                    onChange={(event, newValue) => handleIngredientChange(index, 'pajak', newValue)}
+                    renderInput={params => <CustomTextField {...params} placeholder='...' />}
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomAutocomplete
+                    size='small'
+                    options={wasteOptions}
+                    value={item.waste}
+                    onChange={(event, newValue) => handleIngredientChange(index, 'waste', newValue)}
+                    renderInput={params => <CustomTextField {...params} placeholder='...' />}
+                  />
+                </TableCell>
+                <TableCell>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={item.total}
+                    InputProps={{ readOnly: true }}
+                    sx={{
+                      '& .MuiInputBase-input': {
+                        textAlign: 'right'
+                      }
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <IconButton
+                    size='small'
+                    color='error'
+                    onClick={() => removeIngredientItem(index)}
+                    disabled={formData.ingredientItems.length === 1}
+                  >
+                    <i className='tabler-trash' />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
 
       {/* Add New Item Button */}
-      <Grid container spacing={1}>
-        <Grid size={12}>
-          <Button
-            variant='outlined'
-            onClick={addIngredientItem}
-            sx={{
-              textTransform: 'none',
-              color: 'primary.main',
-              borderColor: 'primary.main'
-            }}
-          >
-            + Tambah bahan baku
-          </Button>
-        </Grid>
-      </Grid>
+      <Button
+        startIcon={<i className='tabler-plus' />}
+        onClick={addIngredientItem}
+        variant='outlined'
+        size='small'
+        sx={{ mt: 1 }}
+      >
+        Tambah bahan baku
+      </Button>
     </Grid>
   )
 }
diff --git a/src/views/apps/purchase/purchase-form/PurchaseSummary.tsx b/src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
index 298686a..3bc71cf 100644
--- a/src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseSummary.tsx
@@ -464,64 +464,75 @@ const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({ formData, handleInput
                 }
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  {/* Dropdown */}
-                  <CustomAutocomplete
-                    size='small'
-                    options={[{ label: '1-10003 Gi...', value: '1-10003' }]}
-                    getOptionLabel={option => (typeof option === 'string' ? option : option.label)}
-                    value={{ label: '1-10003 Gi...', value: '1-10003' }}
-                    onChange={(_, newValue) => {
-                      // Handle change if needed
-                    }}
-                    renderInput={params => <CustomTextField {...params} size='small' />}
-                    sx={{ minWidth: 120 }}
-                  />
+              <Button
+                variant='text'
+                color='primary'
+                size='small'
+                sx={{ textTransform: 'none', fontSize: '14px', p: 0, textAlign: 'left' }}
+                onClick={() => handleInputChange('showUangMuka', !formData.showUangMuka)}
+              >
+                {formData.showUangMuka ? '- Sembunyikan Uang Muka' : '+ Uang Muka'}
+              </Button>
+              {formData.showUangMuka && (
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {/* Dropdown */}
+                    <CustomAutocomplete
+                      size='small'
+                      options={[{ label: '1-10003 Gi...', value: '1-10003' }]}
+                      getOptionLabel={option => (typeof option === 'string' ? option : option.label)}
+                      value={{ label: '1-10003 Gi...', value: '1-10003' }}
+                      onChange={(_, newValue) => {
+                        // Handle change if needed
+                      }}
+                      renderInput={params => <CustomTextField {...params} size='small' />}
+                      sx={{ minWidth: 120 }}
+                    />
 
-                  {/* Amount input */}
-                  <CustomTextField
-                    size='small'
-                    placeholder='0'
-                    value={formData.downPayment || '0'}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleInputChange('downPayment', e.target.value)
-                    }
-                    sx={{ width: '80px' }}
-                    inputProps={{
-                      style: { textAlign: 'center' }
-                    }}
-                  />
+                    {/* Amount input */}
+                    <CustomTextField
+                      size='small'
+                      placeholder='0'
+                      value={formData.downPayment || '0'}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('downPayment', e.target.value)
+                      }
+                      sx={{ width: '80px' }}
+                      inputProps={{
+                        style: { textAlign: 'center' }
+                      }}
+                    />
 
-                  {/* Percentage/Fixed toggle */}
-                  <ToggleButtonGroup
-                    value={formData.downPaymentType || 'fixed'}
-                    exclusive
-                    onChange={(_, newValue) => {
-                      if (newValue) handleInputChange('downPaymentType', newValue)
+                    {/* Percentage/Fixed toggle */}
+                    <ToggleButtonGroup
+                      value={formData.downPaymentType || 'fixed'}
+                      exclusive
+                      onChange={(_, newValue) => {
+                        if (newValue) handleInputChange('downPaymentType', newValue)
+                      }}
+                      size='small'
+                    >
+                      <ToggleButton value='percentage' sx={{ px: 1.5 }}>
+                        %
+                      </ToggleButton>
+                      <ToggleButton value='fixed' sx={{ px: 1.5 }}>
+                        Rp
+                      </ToggleButton>
+                    </ToggleButtonGroup>
+                  </Box>
+
+                  {/* Right side text */}
+                  <Typography
+                    variant='body1'
+                    sx={{
+                      fontSize: '16px',
+                      fontWeight: 400
                     }}
-                    size='small'
                   >
-                    <ToggleButton value='percentage' sx={{ px: 1.5 }}>
-                      %
-                    </ToggleButton>
-                    <ToggleButton value='fixed' sx={{ px: 1.5 }}>
-                      Rp
-                    </ToggleButton>
-                  </ToggleButtonGroup>
+                    Uang muka {downPayment > 0 ? downPayment.toLocaleString('id-ID') : '0'}
+                  </Typography>
                 </Box>
-
-                {/* Right side text */}
-                <Typography
-                  variant='body1'
-                  sx={{
-                    fontSize: '16px',
-                    fontWeight: 400
-                  }}
-                >
-                  Uang muka {downPayment > 0 ? downPayment.toLocaleString('id-ID') : '0'}
-                </Typography>
-              </Box>
+              )}
             </Box>
 
             {/* Sisa Tagihan */}

From 00620026e40f4a3654b95b700c70625fdb8df50c Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 16:55:19 +0700
Subject: [PATCH 23/42] Detail expense

---
 .../apps/expense/[id]/detail/page.tsx         |  18 +
 .../expense/detail/ExpenseDetailContent.tsx   |  22 +
 .../expense/detail/ExpenseDetailHeader.tsx    |  15 +
 .../detail/ExpenseDetailInformation.tsx       | 265 +++++++++++
 .../apps/expense/detail/ExpenseDetailLog.tsx  |  59 +++
 .../detail/ExpenseDetailSendPayment.tsx       | 417 ++++++++++++++++++
 .../apps/expense/list/ExpenseListTable.tsx    |   3 +-
 7 files changed, 798 insertions(+), 1 deletion(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/expense/[id]/detail/page.tsx
 create mode 100644 src/views/apps/expense/detail/ExpenseDetailContent.tsx
 create mode 100644 src/views/apps/expense/detail/ExpenseDetailHeader.tsx
 create mode 100644 src/views/apps/expense/detail/ExpenseDetailInformation.tsx
 create mode 100644 src/views/apps/expense/detail/ExpenseDetailLog.tsx
 create mode 100644 src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/expense/[id]/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/expense/[id]/detail/page.tsx
new file mode 100644
index 0000000..68c6855
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/expense/[id]/detail/page.tsx
@@ -0,0 +1,18 @@
+import ExpenseDetailContent from '@/views/apps/expense/detail/ExpenseDetailContent'
+import ExpenseDetailHeader from '@/views/apps/expense/detail/ExpenseDetailHeader'
+import Grid from '@mui/material/Grid2'
+
+const ExpenseDetailPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseDetailPage
diff --git a/src/views/apps/expense/detail/ExpenseDetailContent.tsx b/src/views/apps/expense/detail/ExpenseDetailContent.tsx
new file mode 100644
index 0000000..accf703
--- /dev/null
+++ b/src/views/apps/expense/detail/ExpenseDetailContent.tsx
@@ -0,0 +1,22 @@
+import Grid from '@mui/material/Grid2'
+import ExpenseDetailInformation from './ExpenseDetailInformation'
+import ExpenseDetailSendPayment from './ExpenseDetailSendPayment'
+import ExpenseDetailLog from './ExpenseDetailLog'
+
+const ExpenseDetailContent = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailInformation />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailSendPayment />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ExpenseDetailLog />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ExpenseDetailContent
diff --git a/src/views/apps/expense/detail/ExpenseDetailHeader.tsx b/src/views/apps/expense/detail/ExpenseDetailHeader.tsx
new file mode 100644
index 0000000..f0b5681
--- /dev/null
+++ b/src/views/apps/expense/detail/ExpenseDetailHeader.tsx
@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+
+const ExpenseDetailHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Detail Biaya
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default ExpenseDetailHeader
diff --git a/src/views/apps/expense/detail/ExpenseDetailInformation.tsx b/src/views/apps/expense/detail/ExpenseDetailInformation.tsx
new file mode 100644
index 0000000..fe58ae7
--- /dev/null
+++ b/src/views/apps/expense/detail/ExpenseDetailInformation.tsx
@@ -0,0 +1,265 @@
+import React from 'react'
+import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+
+interface Product {
+  produk: string
+  deskripsi: string
+  kuantitas: number
+  satuan: string
+  discount: string
+  harga: number
+  pajak: string
+  jumlah: number
+}
+
+interface PurchaseData {
+  vendor: string
+  nomor: string
+  tglTransaksi: string
+  tglJatuhTempo: string
+  gudang: string
+  status: string
+}
+
+const ExpenseDetailInformation: React.FC = () => {
+  const purchaseData: PurchaseData = {
+    vendor: 'Bagas Rizki Sihotang S.Farm Widodo',
+    nomor: 'PI/00053',
+    tglTransaksi: '08/09/2025',
+    tglJatuhTempo: '06/10/2025',
+    gudang: 'Unassigned',
+    status: 'Belum Dibayar'
+  }
+
+  const products: Product[] = [
+    {
+      produk: 'Komisi penjualan tim IT',
+      deskripsi: '6-60002 - Komisi & Fee (PPN)',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 810000,
+      pajak: 'PPN',
+      jumlah: 810000
+    },
+    {
+      produk: 'Hotel Ibis 3 Malam, Surabaya',
+      deskripsi: '6-60004 - Perjalanan Dinas - Penjualan (PPN)',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 400000,
+      pajak: 'PPN',
+      jumlah: 400000
+    },
+    {
+      produk: 'Biaya telp fixed',
+      deskripsi: '6-60005 - Komunikasi - Penjualan',
+      kuantitas: 1,
+      satuan: 'Pcs',
+      discount: '0%',
+      harga: 950000,
+      pajak: 'PPN',
+      jumlah: 950000
+    }
+  ]
+
+  const subTotal: number = products.reduce((sum, product) => sum + product.jumlah, 0)
+  const ppn: number = Math.round(subTotal * 0.11)
+  const total: number = subTotal + ppn
+  const sisaTagihan: number = total
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <Card sx={{ width: '100%' }}>
+      <CardHeader
+        title={
+          <Box display='flex' justifyContent='space-between' alignItems='center'>
+            <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+              Belum Dibayar
+            </Typography>
+            <Box>
+              <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                Bagikan
+              </Button>
+              <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                Print
+              </Button>
+              <IconButton>
+                <i className='tabler-dots-vertical' />
+              </IconButton>
+            </Box>
+          </Box>
+        }
+      />
+
+      <CardContent>
+        {/* Purchase Information */}
+        <Grid container spacing={3} sx={{ mb: 4 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Penerima
+              </Typography>
+              <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
+                {purchaseData.vendor}
+              </Typography>
+            </Box>
+
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Tgl. Transaksi
+              </Typography>
+              <Typography variant='body1'>{purchaseData.tglTransaksi}</Typography>
+            </Box>
+          </Grid>
+
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Nomor
+              </Typography>
+              <Typography variant='body1'>{purchaseData.nomor}</Typography>
+            </Box>
+
+            <Box>
+              <Typography variant='subtitle2' color='text.secondary'>
+                Tgl. Jatuh Tempo
+              </Typography>
+              <Typography variant='body1'>{purchaseData.tglJatuhTempo}</Typography>
+            </Box>
+          </Grid>
+        </Grid>
+
+        {/* Products List */}
+        <Box sx={{ mb: 4 }}>
+          {products.map((product, index) => (
+            <Box
+              key={index}
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                py: 2,
+                borderBottom: index === products.length - 1 ? 'none' : '1px solid #f0f0f0'
+              }}
+            >
+              <Box sx={{ flex: 1 }}>
+                <Typography variant='body1' sx={{ fontWeight: 'medium', mb: 0.5 }}>
+                  {product.produk}
+                </Typography>
+                <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
+                  {product.deskripsi}
+                </Typography>
+              </Box>
+              <Box sx={{ textAlign: 'right', ml: 3 }}>
+                <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                  {formatCurrency(product.jumlah)}
+                </Typography>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+
+        {/* Summary Section */}
+        <Box sx={{ mt: 3 }}>
+          <Grid container spacing={2}>
+            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    Sub Total
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(subTotal)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    PPN
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(ppn)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    borderBottom: '1px solid #e0e0e0',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
+                    Total
+                  </Typography>
+                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(total)}
+                  </Typography>
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    py: 2,
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      transition: 'background-color 0.15s ease'
+                    }
+                  }}
+                >
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    Sisa Tagihan
+                  </Typography>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(sisaTagihan)}
+                  </Typography>
+                </Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseDetailInformation
diff --git a/src/views/apps/expense/detail/ExpenseDetailLog.tsx b/src/views/apps/expense/detail/ExpenseDetailLog.tsx
new file mode 100644
index 0000000..0ee010a
--- /dev/null
+++ b/src/views/apps/expense/detail/ExpenseDetailLog.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
+
+interface LogEntry {
+  id: string
+  action: string
+  timestamp: string
+  user: string
+}
+
+const ExpenseDetailLog: React.FC = () => {
+  const logEntries: LogEntry[] = [
+    {
+      id: '1',
+      action: 'Terakhir diubah oleh',
+      timestamp: '08 Sep 2025 18:26',
+      user: 'pada'
+    }
+  ]
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+            Pantau log perubahan data
+          </Typography>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent sx={{ mt: 5 }}>
+        {logEntries.map(entry => (
+          <Box key={entry.id} sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
+              <Link
+                href='#'
+                underline='hover'
+                color='primary'
+                sx={{
+                  textDecoration: 'none',
+                  '&:hover': {
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {entry.action} {entry.user} {entry.timestamp}
+              </Link>
+            </Box>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseDetailLog
diff --git a/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx b/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
new file mode 100644
index 0000000..8f2ac20
--- /dev/null
+++ b/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
@@ -0,0 +1,417 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Box,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Tooltip,
+  IconButton,
+  CardHeader
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomTextField from '@/@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+
+interface PaymentFormData {
+  totalDibayar: string
+  tglTransaksi: string
+  referensi: string
+  nomor: string
+  dibayarDari: string
+}
+
+interface PemotonganItem {
+  id: string
+  dipotong: string
+  persentase: string
+  nominal: string
+  tipe: 'persen' | 'rupiah'
+}
+
+const ExpenseDetailSendPayment: React.FC = () => {
+  const [formData, setFormData] = useState<PaymentFormData>({
+    totalDibayar: '849.000',
+    tglTransaksi: '10/09/2025',
+    referensi: '',
+    nomor: 'PP/00025',
+    dibayarDari: '1-10001 Kas'
+  })
+
+  const [expanded, setExpanded] = useState<boolean>(false)
+  const [pemotonganItems, setPemotonganItems] = useState<PemotonganItem[]>([])
+
+  const dibayarDariOptions = [
+    { label: '1-10001 Kas', value: '1-10001 Kas' },
+    { label: '1-10002 Bank BCA', value: '1-10002 Bank BCA' },
+    { label: '1-10003 Bank Mandiri', value: '1-10003 Bank Mandiri' },
+    { label: '1-10004 Petty Cash', value: '1-10004 Petty Cash' }
+  ]
+
+  const pemotonganOptions = [
+    { label: 'PPN 11%', value: 'ppn' },
+    { label: 'PPh 21', value: 'pph21' },
+    { label: 'PPh 23', value: 'pph23' },
+    { label: 'Biaya Admin', value: 'admin' }
+  ]
+
+  const handleChange =
+    (field: keyof PaymentFormData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | any) => {
+      setFormData(prev => ({
+        ...prev,
+        [field]: event.target.value
+      }))
+    }
+
+  const handleDibayarDariChange = (value: { label: string; value: string } | null) => {
+    setFormData(prev => ({
+      ...prev,
+      dibayarDari: value?.value || ''
+    }))
+  }
+
+  const addPemotongan = () => {
+    const newItem: PemotonganItem = {
+      id: Date.now().toString(),
+      dipotong: '',
+      persentase: '0',
+      nominal: '',
+      tipe: 'persen'
+    }
+    setPemotonganItems(prev => [...prev, newItem])
+  }
+
+  const removePemotongan = (id: string) => {
+    setPemotonganItems(prev => prev.filter(item => item.id !== id))
+  }
+
+  const updatePemotongan = (id: string, field: keyof PemotonganItem, value: string) => {
+    setPemotonganItems(prev => prev.map(item => (item.id === id ? { ...item, [field]: value } : item)))
+  }
+
+  const handleAccordionChange = () => {
+    setExpanded(!expanded)
+  }
+
+  const calculatePemotongan = (item: PemotonganItem): number => {
+    const totalDibayar = parseInt(formData.totalDibayar.replace(/\D/g, '')) || 0
+    const nilai = parseFloat(item.persentase) || 0
+
+    if (item.tipe === 'persen') {
+      return (totalDibayar * nilai) / 100
+    } else {
+      return nilai
+    }
+  }
+
+  const formatCurrency = (amount: string | number): string => {
+    const numAmount = typeof amount === 'string' ? parseInt(amount.replace(/\D/g, '')) : amount
+    return new Intl.NumberFormat('id-ID').format(numAmount)
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Box display='flex' justifyContent='space-between' alignItems='center'>
+            <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+              Kirim Pembayaran
+            </Typography>
+          </Box>
+        }
+      />
+      <CardContent>
+        <Grid container spacing={3}>
+          {/* Left Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            {/* Total Dibayar */}
+            <Box sx={{ mb: 3 }}>
+              <CustomTextField
+                fullWidth
+                label={
+                  <span>
+                    <span style={{ color: 'red' }}>*</span> Total Dibayar
+                  </span>
+                }
+                value={formData.totalDibayar}
+                onChange={handleChange('totalDibayar')}
+                sx={{
+                  '& .MuiInputBase-root': {
+                    textAlign: 'right'
+                  }
+                }}
+              />
+            </Box>
+
+            {/* Tgl. Transaksi */}
+            <Box sx={{ mb: 3 }}>
+              <CustomTextField
+                fullWidth
+                label={
+                  <span>
+                    <span style={{ color: 'red' }}>*</span> Tgl. Transaksi
+                  </span>
+                }
+                type='date'
+                value={formData.tglTransaksi.split('/').reverse().join('-')}
+                onChange={handleChange('tglTransaksi')}
+                slotProps={{
+                  input: {
+                    endAdornment: <i className='tabler-calendar' style={{ color: '#666' }} />
+                  }
+                }}
+              />
+            </Box>
+
+            {/* Referensi */}
+            <Box sx={{ mb: 3 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                  Referensi
+                </Typography>
+                <Tooltip title='Informasi referensi pembayaran'>
+                  <IconButton size='small' sx={{ ml: 0.5 }}>
+                    <i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <CustomTextField
+                fullWidth
+                placeholder='Referensi'
+                value={formData.referensi}
+                onChange={handleChange('referensi')}
+              />
+            </Box>
+
+            {/* Attachment Accordion */}
+            <Accordion
+              expanded={expanded}
+              onChange={handleAccordionChange}
+              sx={{
+                boxShadow: 'none',
+                border: '1px solid #e0e0e0',
+                borderRadius: '8px',
+                '&:before': { display: 'none' }
+              }}
+            >
+              <AccordionSummary
+                expandIcon={
+                  <i
+                    className='tabler-chevron-right'
+                    style={{
+                      transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                      transition: 'transform 0.2s'
+                    }}
+                  />
+                }
+                sx={{
+                  backgroundColor: '#f8f9fa',
+                  borderRadius: '8px',
+                  minHeight: '48px',
+                  '& .MuiAccordionSummary-content': {
+                    margin: '12px 0'
+                  }
+                }}
+              >
+                <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
+                  Attachment
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails sx={{ p: 2 }}>
+                <Typography variant='body2' color='text.secondary'>
+                  Drag and drop files here or click to upload
+                </Typography>
+              </AccordionDetails>
+            </Accordion>
+          </Grid>
+
+          {/* Right Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            {/* Nomor */}
+            <Box sx={{ mb: 3 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                  Nomor
+                </Typography>
+                <Tooltip title='Nomor pembayaran otomatis'>
+                  <IconButton size='small' sx={{ ml: 0.5 }}>
+                    <i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <CustomTextField fullWidth value={formData.nomor} onChange={handleChange('nomor')} disabled />
+            </Box>
+
+            {/* Dibayar Dari */}
+            <Box sx={{ mb: 3 }}>
+              <Typography variant='body2' sx={{ color: 'text.secondary', mb: 1 }}>
+                <span style={{ color: 'red' }}>*</span> Dibayar Dari
+              </Typography>
+              <CustomAutocomplete
+                fullWidth
+                options={dibayarDariOptions}
+                getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
+                value={dibayarDariOptions.find(option => option.value === formData.dibayarDari) || null}
+                onChange={(_, value: { label: string; value: string } | null) => handleDibayarDariChange(value)}
+                renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih akun pembayaran' />}
+                noOptionsText='Tidak ada pilihan'
+              />
+            </Box>
+
+            {/* Empty space to match Referensi height */}
+            <Box sx={{ mb: 3, height: '74px' }}>{/* Empty space */}</Box>
+
+            {/* Pemotongan Button - aligned with Attachment */}
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'flex-start',
+                minHeight: '48px'
+              }}
+            >
+              <Button
+                startIcon={<i className='tabler-plus' />}
+                variant='text'
+                color='primary'
+                sx={{ textTransform: 'none' }}
+                onClick={addPemotongan}
+              >
+                Pemotongan
+              </Button>
+            </Box>
+          </Grid>
+        </Grid>
+
+        {/* Pemotongan Items */}
+        {pemotonganItems.length > 0 && (
+          <Box sx={{ mt: 3 }}>
+            {pemotonganItems.map((item, index) => (
+              <Box
+                key={item.id}
+                sx={{
+                  mb: 2,
+                  p: 2,
+                  border: '1px solid #e0e0e0',
+                  borderRadius: 1,
+                  position: 'relative'
+                }}
+              >
+                <Grid container spacing={2} alignItems='center'>
+                  <Grid size={{ xs: 12, md: 1 }}>
+                    <IconButton
+                      color='error'
+                      size='small'
+                      onClick={() => removePemotongan(item.id)}
+                      sx={{
+                        backgroundColor: '#fff',
+                        border: '1px solid #f44336',
+                        '&:hover': { backgroundColor: '#ffebee' }
+                      }}
+                    >
+                      <i className='tabler-minus' style={{ fontSize: '16px' }} />
+                    </IconButton>
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <CustomAutocomplete
+                      fullWidth
+                      options={pemotonganOptions}
+                      getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
+                      value={pemotonganOptions.find(option => option.value === item.dipotong) || null}
+                      onChange={(_, value: { label: string; value: string } | null) =>
+                        updatePemotongan(item.id, 'dipotong', value?.value || '')
+                      }
+                      renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih dipotong...' />}
+                      noOptionsText='Tidak ada pilihan'
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 2 }}>
+                    <CustomTextField
+                      fullWidth
+                      value={item.persentase}
+                      onChange={e => updatePemotongan(item.id, 'persentase', e.target.value)}
+                      placeholder='0'
+                      sx={{
+                        '& .MuiInputBase-root': {
+                          textAlign: 'center'
+                        }
+                      }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 1 }}>
+                    <Box sx={{ display: 'flex', gap: 0.5 }}>
+                      <Button
+                        variant={item.tipe === 'persen' ? 'contained' : 'outlined'}
+                        size='small'
+                        onClick={() => updatePemotongan(item.id, 'tipe', 'persen')}
+                        sx={{ minWidth: '40px', px: 1 }}
+                      >
+                        %
+                      </Button>
+                      <Button
+                        variant={item.tipe === 'rupiah' ? 'contained' : 'outlined'}
+                        size='small'
+                        onClick={() => updatePemotongan(item.id, 'tipe', 'rupiah')}
+                        sx={{ minWidth: '40px', px: 1 }}
+                      >
+                        Rp
+                      </Button>
+                    </Box>
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                      <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                        {formatCurrency(calculatePemotongan(item))}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                </Grid>
+              </Box>
+            ))}
+          </Box>
+        )}
+
+        {/* Bottom Section */}
+        <Box sx={{ mt: 4, pt: 3, borderTop: '1px solid #e0e0e0' }}>
+          <Grid container spacing={2} alignItems='center'>
+            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space */}</Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+                <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                  Total
+                </Typography>
+                <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                  {formatCurrency(formData.totalDibayar)}
+                </Typography>
+              </Box>
+
+              <Button
+                variant='contained'
+                startIcon={<i className='tabler-plus' />}
+                fullWidth
+                sx={{
+                  py: 1.5,
+                  textTransform: 'none',
+                  fontWeight: 'medium'
+                }}
+              >
+                Tambah Pembayaran
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ExpenseDetailSendPayment
diff --git a/src/views/apps/expense/list/ExpenseListTable.tsx b/src/views/apps/expense/list/ExpenseListTable.tsx
index 83d527f..16a87e4 100644
--- a/src/views/apps/expense/list/ExpenseListTable.tsx
+++ b/src/views/apps/expense/list/ExpenseListTable.tsx
@@ -244,7 +244,8 @@ const ExpenseListTable = () => {
             variant='text'
             color='primary'
             className='p-0 min-w-0 font-medium normal-case justify-start'
-            onClick={() => handleExpenseClick(row.original.id.toString())}
+            component={Link}
+            href={getLocalizedUrl(`/apps/expense/${row.original.id}/detail`, locale as Locale)}
             sx={{
               textTransform: 'none',
               fontWeight: 500,

From 66589abdd4f1b72510e2530129eb7202a956e704 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 17:41:07 +0700
Subject: [PATCH 24/42] Cash Bank List

---
 .../(private)/apps/cash-bank/page.tsx         |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   8 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/views/apps/cash-bank/CashBankCard.tsx     | 263 ++++++++++++++
 src/views/apps/cash-bank/CashBankList.tsx     | 326 ++++++++++++++++++
 6 files changed, 608 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/cash-bank/page.tsx
 create mode 100644 src/views/apps/cash-bank/CashBankCard.tsx
 create mode 100644 src/views/apps/cash-bank/CashBankList.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/page.tsx
new file mode 100644
index 0000000..b63c066
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/page.tsx
@@ -0,0 +1,7 @@
+import CashBankList from '@/views/apps/cash-bank/CashBankList'
+
+const CashBankPage = () => {
+  return <CashBankList />
+}
+
+export default CashBankPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 007da5d..e963920 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -116,6 +116,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <SubMenu label={dictionary['navigation'].expenses} icon={<i className='tabler-cash' />}>
             <MenuItem href={`/${locale}/apps/expense`}>{dictionary['navigation'].list}</MenuItem>
           </SubMenu>
+          <MenuItem
+            href={`/${locale}/apps/cash-bank`}
+            icon={<i className='tabler-mail' />}
+            exactMatch={false}
+            activeUrl='/apps/cash-bank'
+          >
+            {dictionary['navigation'].cash_and_bank}
+          </MenuItem>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index c9ab714..df083d2 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -123,6 +123,7 @@
     "deliveries": "Deliveries",
     "sales_orders": "Orders",
     "quotes": "Quotes",
-    "expenses": "Expenses"
+    "expenses": "Expenses",
+    "cash_and_bank": "Cash & Bank"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 5c4742b..53ddf6d 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -123,6 +123,7 @@
         "deliveries": "Pengiriman",
         "sales_orders": "Pemesanan",
         "quotes": "Penawaran",
-        "expenses": "Biaya"
+        "expenses": "Biaya",
+        "cash_and_bank": "Kas & Bank"
     }
 }
diff --git a/src/views/apps/cash-bank/CashBankCard.tsx b/src/views/apps/cash-bank/CashBankCard.tsx
new file mode 100644
index 0000000..94f1b10
--- /dev/null
+++ b/src/views/apps/cash-bank/CashBankCard.tsx
@@ -0,0 +1,263 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+
+// Third-party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Types
+interface Balance {
+  amount: string | number
+  label: string
+}
+
+interface ChartData {
+  name: string
+  data: number[]
+}
+
+interface CashBankCardProps {
+  title: string
+  accountNumber: string
+  balances: Balance[]
+  chartData: ChartData[]
+  categories: string[]
+  buttonText?: string
+  buttonIcon?: string
+  onButtonClick?: () => void
+  chartColor?: string
+  height?: number
+  currency?: 'IDR' | 'USD' | 'EUR'
+  showButton?: boolean
+  maxValue?: number
+  enableHover?: boolean
+}
+
+const CashBankCard = ({
+  title,
+  accountNumber,
+  balances,
+  chartData,
+  categories,
+  onButtonClick,
+  chartColor = '#ff6b9d',
+  height = 300,
+  currency = 'IDR',
+  showButton = true,
+  maxValue,
+  enableHover = true
+}: CashBankCardProps) => {
+  // Vars
+  const divider = 'var(--mui-palette-divider)'
+  const disabledText = 'var(--mui-palette-text-disabled)'
+  const primaryText = 'var(--mui-palette-text-primary)'
+
+  // Auto calculate maxValue if not provided
+  const calculatedMaxValue = maxValue || Math.max(...chartData.flatMap(series => series.data)) * 1.2
+
+  // Currency formatter
+  const formatCurrency = (value: number) => {
+    const formatters = {
+      IDR: new Intl.NumberFormat('id-ID', {
+        style: 'currency',
+        currency: 'IDR',
+        minimumFractionDigits: 0
+      }),
+      USD: new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 0
+      }),
+      EUR: new Intl.NumberFormat('de-DE', {
+        style: 'currency',
+        currency: 'EUR',
+        minimumFractionDigits: 0
+      })
+    }
+    return formatters[currency].format(value)
+  }
+
+  // Format balance display
+  const formatBalance = (amount: string | number) => {
+    if (typeof amount === 'string') return amount
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  // Y-axis label formatter based on currency
+  const formatYAxisLabel = (val: number) => {
+    if (currency === 'IDR') {
+      return (val / 1000000).toFixed(0) + '.000.000'
+    }
+    return (val / 1000).toFixed(0) + 'K'
+  }
+
+  const options: ApexOptions = {
+    chart: {
+      height: height,
+      type: 'area',
+      parentHeightOffset: 0,
+      zoom: { enabled: false },
+      toolbar: { show: false }
+    },
+    colors: [chartColor],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'light',
+        type: 'vertical',
+        shadeIntensity: 0.4,
+        gradientToColors: [chartColor],
+        inverseColors: false,
+        opacityFrom: 0.8,
+        opacityTo: 0.1,
+        stops: [0, 100]
+      }
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 3
+    },
+    dataLabels: { enabled: false },
+    grid: {
+      show: true,
+      borderColor: divider,
+      strokeDashArray: 3,
+      padding: {
+        top: -10,
+        bottom: -10,
+        left: 20,
+        right: 20
+      },
+      xaxis: {
+        lines: { show: true }
+      },
+      yaxis: {
+        lines: { show: true }
+      }
+    },
+    tooltip: {
+      enabled: true,
+      y: {
+        formatter: function (val: number) {
+          return formatCurrency(val)
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: calculatedMaxValue,
+      tickAmount: 7,
+      labels: {
+        style: {
+          colors: disabledText,
+          fontSize: '12px',
+          fontWeight: '400'
+        },
+        formatter: function (val: number) {
+          return formatYAxisLabel(val)
+        }
+      }
+    },
+    xaxis: {
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      crosshairs: {
+        stroke: { color: divider }
+      },
+      labels: {
+        style: {
+          colors: disabledText,
+          fontSize: '12px',
+          fontWeight: '400'
+        }
+      },
+      categories: categories
+    },
+    legend: {
+      show: false
+    }
+  }
+
+  return (
+    <Card
+      sx={{
+        height: '100%',
+        transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+        '&:hover': enableHover
+          ? {
+              transform: 'translateY(-4px)',
+              boxShadow: '0 12px 35px rgba(0, 0, 0, 0.15)'
+            }
+          : {},
+        cursor: enableHover ? 'pointer' : 'default'
+      }}
+    >
+      <CardHeader
+        title={
+          <Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
+              <Box>
+                <Typography variant='h6' sx={{ fontWeight: 600, color: primaryText }}>
+                  {title}
+                </Typography>
+                <Typography variant='body2' sx={{ color: disabledText }}>
+                  {accountNumber}
+                </Typography>
+              </Box>
+              {showButton && (
+                <Button
+                  variant='contained'
+                  size='small'
+                  onClick={onButtonClick}
+                  className='bg-primary '
+                  sx={{
+                    textTransform: 'none',
+                    fontSize: '12px'
+                  }}
+                >
+                  <i className='tabler-wallet text-sm mr-2' /> Atur Akun
+                </Button>
+              )}
+            </Box>
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
+              {balances.map((balance, index) => (
+                <Box key={index}>
+                  <Typography variant='h4' sx={{ fontWeight: 700, color: primaryText }}>
+                    {formatBalance(balance.amount)}
+                  </Typography>
+                  <Typography variant='body2' sx={{ color: disabledText }}>
+                    {balance.label}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        }
+        sx={{
+          pb: 0,
+          '& .MuiCardHeader-content': {
+            width: '100%'
+          }
+        }}
+      />
+      <CardContent sx={{ pt: 0 }}>
+        <AppReactApexCharts type='area' width='100%' height={height} options={options} series={chartData} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CashBankCard
diff --git a/src/views/apps/cash-bank/CashBankList.tsx b/src/views/apps/cash-bank/CashBankList.tsx
new file mode 100644
index 0000000..740fe03
--- /dev/null
+++ b/src/views/apps/cash-bank/CashBankList.tsx
@@ -0,0 +1,326 @@
+'use client'
+
+import { useState, useMemo, useEffect } from 'react'
+import Grid from '@mui/material/Grid2'
+import TextField, { TextFieldProps } from '@mui/material/TextField'
+import InputAdornment from '@mui/material/InputAdornment'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import CashBankCard from './CashBankCard' // Adjust import path as needed
+import CustomTextField from '@/@core/components/mui/TextField'
+
+// Types
+interface BankAccount {
+  id: string
+  title: string
+  accountNumber: string
+  balances: Array<{
+    amount: string | number
+    label: string
+  }>
+  chartData: Array<{
+    name: string
+    data: number[]
+  }>
+  categories: string[]
+  chartColor?: string
+  currency: 'IDR' | 'USD' | 'EUR'
+  accountType: 'giro' | 'savings' | 'investment' | 'credit' | 'cash'
+  bank: string
+  status: 'active' | 'inactive' | 'blocked'
+}
+
+// Dummy Data
+const dummyAccounts: BankAccount[] = [
+  {
+    id: '1',
+    title: 'Giro',
+    accountNumber: '1-10003',
+    balances: [
+      { amount: '7.313.321', label: 'Saldo di bank' },
+      { amount: '30.631.261', label: 'Saldo di kledo' }
+    ],
+    chartData: [
+      {
+        name: 'Saldo',
+        data: [
+          20000000, 21000000, 20500000, 20800000, 21500000, 22000000, 25000000, 26000000, 28000000, 29000000, 30000000,
+          31000000
+        ]
+      }
+    ],
+    categories: ['Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des', 'Jan', 'Feb', 'Mar'],
+    chartColor: '#ff6b9d',
+    currency: 'IDR',
+    accountType: 'giro',
+    bank: 'Bank Mandiri',
+    status: 'active'
+  },
+  {
+    id: '2',
+    title: 'Tabungan Premium',
+    accountNumber: 'SAV-001234',
+    balances: [
+      { amount: 15420000, label: 'Saldo Tersedia' },
+      { amount: 18750000, label: 'Total Saldo' }
+    ],
+    chartData: [
+      {
+        name: 'Balance',
+        data: [
+          12000000, 13500000, 14200000, 15000000, 15800000, 16200000, 17000000, 17500000, 18000000, 18200000, 18500000,
+          18750000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    chartColor: '#4285f4',
+    currency: 'IDR',
+    accountType: 'savings',
+    bank: 'Bank BCA',
+    status: 'active'
+  },
+  {
+    id: '3',
+    title: 'Investment Portfolio',
+    accountNumber: 'INV-789012',
+    balances: [
+      { amount: 125000, label: 'Portfolio Value' },
+      { amount: 8750, label: 'Total Gains' }
+    ],
+    chartData: [
+      {
+        name: 'Portfolio Value',
+        data: [110000, 115000, 112000, 118000, 122000, 119000, 125000, 128000, 126000, 130000, 127000, 125000]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    currency: 'USD',
+    accountType: 'investment',
+    bank: 'Charles Schwab',
+    status: 'active'
+  },
+  {
+    id: '4',
+    title: 'Kartu Kredit Platinum',
+    accountNumber: 'CC-456789',
+    balances: [
+      { amount: 2500000, label: 'Saldo Saat Ini' },
+      { amount: 47500000, label: 'Limit Tersedia' }
+    ],
+    chartData: [
+      {
+        name: 'Spending',
+        data: [
+          1200000, 1800000, 2200000, 1900000, 2100000, 2400000, 2800000, 2600000, 2300000, 2500000, 2700000, 2500000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    currency: 'IDR',
+    accountType: 'credit',
+    bank: 'Bank BNI',
+    status: 'active'
+  },
+  {
+    id: '5',
+    title: 'Deposito Berjangka',
+    accountNumber: 'DEP-334455',
+    balances: [
+      { amount: 50000000, label: 'Pokok Deposito' },
+      { amount: 2500000, label: 'Bunga Terkumpul' }
+    ],
+    chartData: [
+      {
+        name: 'Deposito Growth',
+        data: [
+          50000000, 50200000, 50420000, 50650000, 50880000, 51120000, 51360000, 51610000, 51860000, 52120000, 52380000,
+          52500000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    currency: 'IDR',
+    accountType: 'savings',
+    bank: 'Bank BRI',
+    status: 'active'
+  },
+  {
+    id: '6',
+    title: 'Cash Management',
+    accountNumber: 'CSH-111222',
+    balances: [{ amount: 5000, label: 'Available Cash' }],
+    chartData: [
+      {
+        name: 'Cash Flow',
+        data: [4000, 4500, 4200, 4800, 5200, 4900, 5000, 5300, 5100, 5400, 5200, 5000]
+      }
+    ],
+    categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4'],
+    chartColor: '#00bcd4',
+    currency: 'USD',
+    accountType: 'cash',
+    bank: 'Wells Fargo',
+    status: 'active'
+  },
+  {
+    id: '7',
+    title: 'Rekening Bisnis',
+    accountNumber: 'BIZ-998877',
+    balances: [
+      { amount: 85000000, label: 'Saldo Operasional' },
+      { amount: 15000000, label: 'Dana Cadangan' }
+    ],
+    chartData: [
+      {
+        name: 'Business Account',
+        data: [
+          70000000, 75000000, 80000000, 82000000, 85000000, 88000000, 90000000, 87000000, 85000000, 89000000, 92000000,
+          100000000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    chartColor: '#ff9800',
+    currency: 'IDR',
+    accountType: 'giro',
+    bank: 'Bank Mandiri',
+    status: 'active'
+  },
+  {
+    id: '8',
+    title: 'Tabungan Pendidikan',
+    accountNumber: 'EDU-567890',
+    balances: [
+      { amount: 25000000, label: 'Dana Pendidikan' },
+      { amount: 3500000, label: 'Bunga Terkumpul' }
+    ],
+    chartData: [
+      {
+        name: 'Education Savings',
+        data: [
+          20000000, 21000000, 22000000, 23000000, 24000000, 24500000, 25000000, 25500000, 26000000, 27000000, 28000000,
+          28500000
+        ]
+      }
+    ],
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    chartColor: '#3f51b5',
+    currency: 'IDR',
+    accountType: 'savings',
+    bank: 'Bank BCA',
+    status: 'inactive'
+  }
+]
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+const CashBankList = () => {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Handle button clicks
+  const handleAccountAction = (accountId: string, action: string) => {
+    console.log(`Action: ${action} for account: ${accountId}`)
+    // Implement your action logic here
+  }
+
+  // Filter and search logic
+  const filteredAccounts = useMemo(() => {
+    return dummyAccounts.filter(account => {
+      const matchesSearch =
+        account.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        account.accountNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        account.bank.toLowerCase().includes(searchQuery.toLowerCase())
+      return matchesSearch
+    })
+  }, [searchQuery])
+
+  return (
+    <Box sx={{ p: 3 }}>
+      {/* Search and Filters */}
+      <Box sx={{ mb: 4 }}>
+        <Grid container spacing={2} sx={{ mb: 3 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <DebouncedInput
+              value={searchQuery}
+              onChange={value => setSearchQuery(value as string)}
+              placeholder='Cari '
+              className='max-sm:is-full'
+            />
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Account Cards */}
+      <Grid container spacing={3}>
+        {filteredAccounts.length > 0 ? (
+          filteredAccounts.map(account => (
+            <Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
+              <CashBankCard
+                title={account.title}
+                accountNumber={account.accountNumber}
+                balances={account.balances}
+                chartData={account.chartData}
+                categories={account.categories}
+                chartColor={account.chartColor}
+                currency={account.currency}
+                showButton={account.accountType !== 'cash'}
+                onButtonClick={() => handleAccountAction(account.id, account.accountType || 'default')}
+              />
+            </Grid>
+          ))
+        ) : (
+          <Grid size={{ xs: 12 }}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                py: 8,
+                backgroundColor: 'grey.50',
+                borderRadius: 2
+              }}
+            >
+              <Typography variant='h6' color='text.secondary' gutterBottom>
+                Tidak ada akun yang ditemukan
+              </Typography>
+              <Typography variant='body2' color='text.secondary'>
+                Coba ubah kata kunci pencarian atau filter yang digunakan
+              </Typography>
+            </Box>
+          </Grid>
+        )}
+      </Grid>
+    </Box>
+  )
+}
+
+export default CashBankList

From 2c754d96fdb2a770d85c1ad18f1c2d96eb48a1fc Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 17:51:24 +0700
Subject: [PATCH 25/42] refator menu

---
 .../layout/vertical/VerticalMenu.tsx          | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index e963920..66e8c22 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -113,12 +113,17 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
               {dictionary['navigation'].purchase_quotes}
             </MenuItem>
           </SubMenu>
-          <SubMenu label={dictionary['navigation'].expenses} icon={<i className='tabler-cash' />}>
-            <MenuItem href={`/${locale}/apps/expense`}>{dictionary['navigation'].list}</MenuItem>
-          </SubMenu>
+          <MenuItem
+            href={`/${locale}/apps/expense`}
+            icon={<i className='tabler-cash' />}
+            exactMatch={false}
+            activeUrl='/apps/expense'
+          >
+            {dictionary['navigation'].expenses}
+          </MenuItem>
           <MenuItem
             href={`/${locale}/apps/cash-bank`}
-            icon={<i className='tabler-mail' />}
+            icon={<i className='tabler-building-bank' />}
             exactMatch={false}
             activeUrl='/apps/cash-bank'
           >
@@ -167,14 +172,22 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
               <MenuItem href={`/${locale}/apps/finance/payment-methods/list`}>{dictionary['navigation'].list}</MenuItem>
             </SubMenu>
           </SubMenu>
-          <SubMenu label={dictionary['navigation'].user} icon={<i className='tabler-user' />}>
-            <MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
-            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
-          </SubMenu>
-          <SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-building' />}>
-            <MenuItem href={`/${locale}/apps/vendor/list`}>{dictionary['navigation'].list}</MenuItem>
-            {/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
-          </SubMenu>
+          <MenuItem
+            href={`/${locale}/apps/user/list`}
+            icon={<i className='tabler-user' />}
+            exactMatch={false}
+            activeUrl='/apps/user/list'
+          >
+            {dictionary['navigation'].user}
+          </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/vendor/list`}
+            icon={<i className='tabler-building' />}
+            exactMatch={false}
+            activeUrl='/apps/vendor/list'
+          >
+            {dictionary['navigation'].vendor}
+          </MenuItem>
         </MenuSection>
       </Menu>
     </ScrollWrapper>

From e267a50946211d11273e4248d40f8eb8bb94fa2a Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Wed, 10 Sep 2025 19:42:26 +0700
Subject: [PATCH 26/42] Cash Bank Detail Table

---
 .../apps/cash-bank/[id]/detail/page.tsx       |   7 +
 src/types/apps/cashBankTypes.ts               |  10 +
 src/views/apps/cash-bank/CashBankCard.tsx     |   8 +-
 src/views/apps/cash-bank/CashBankList.tsx     |  11 +-
 .../cash-bank/detail/CashBankDetailCard.tsx   |  62 ++
 .../cash-bank/detail/CashBankDetailHeader.tsx |  19 +
 .../cash-bank/detail/CashBankDetailTable.tsx  | 615 ++++++++++++++++++
 src/views/apps/cash-bank/detail/index.tsx     |  23 +
 8 files changed, 747 insertions(+), 8 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/page.tsx
 create mode 100644 src/types/apps/cashBankTypes.ts
 create mode 100644 src/views/apps/cash-bank/detail/CashBankDetailCard.tsx
 create mode 100644 src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx
 create mode 100644 src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
 create mode 100644 src/views/apps/cash-bank/detail/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/page.tsx
new file mode 100644
index 0000000..8f2955f
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/page.tsx
@@ -0,0 +1,7 @@
+import CashBankDetail from '@/views/apps/cash-bank/detail'
+
+const CashBankDetailPage = () => {
+  return <CashBankDetail />
+}
+
+export default CashBankDetailPage
diff --git a/src/types/apps/cashBankTypes.ts b/src/types/apps/cashBankTypes.ts
new file mode 100644
index 0000000..c790274
--- /dev/null
+++ b/src/types/apps/cashBankTypes.ts
@@ -0,0 +1,10 @@
+export type CashBankType = {
+  id: number
+  date: string
+  description: string
+  reference: string
+  accept: number
+  send: number
+  balance: number
+  status: string
+}
diff --git a/src/views/apps/cash-bank/CashBankCard.tsx b/src/views/apps/cash-bank/CashBankCard.tsx
index 94f1b10..e2116b9 100644
--- a/src/views/apps/cash-bank/CashBankCard.tsx
+++ b/src/views/apps/cash-bank/CashBankCard.tsx
@@ -13,6 +13,7 @@ import Button from '@mui/material/Button'
 
 // Third-party Imports
 import type { ApexOptions } from 'apexcharts'
+import Link from 'next/link'
 
 // Styled Component Imports
 const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
@@ -36,7 +37,7 @@ interface CashBankCardProps {
   categories: string[]
   buttonText?: string
   buttonIcon?: string
-  onButtonClick?: () => void
+  href?: string
   chartColor?: string
   height?: number
   currency?: 'IDR' | 'USD' | 'EUR'
@@ -51,7 +52,7 @@ const CashBankCard = ({
   balances,
   chartData,
   categories,
-  onButtonClick,
+  href,
   chartColor = '#ff6b9d',
   height = 300,
   currency = 'IDR',
@@ -220,7 +221,8 @@ const CashBankCard = ({
                 <Button
                   variant='contained'
                   size='small'
-                  onClick={onButtonClick}
+                  component={Link}
+                  href={href}
                   className='bg-primary '
                   sx={{
                     textTransform: 'none',
diff --git a/src/views/apps/cash-bank/CashBankList.tsx b/src/views/apps/cash-bank/CashBankList.tsx
index 740fe03..85c5517 100644
--- a/src/views/apps/cash-bank/CashBankList.tsx
+++ b/src/views/apps/cash-bank/CashBankList.tsx
@@ -13,6 +13,9 @@ import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
 import CashBankCard from './CashBankCard' // Adjust import path as needed
 import CustomTextField from '@/@core/components/mui/TextField'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 // Types
 interface BankAccount {
@@ -247,12 +250,10 @@ const DebouncedInput = ({
 }
 const CashBankList = () => {
   const [searchQuery, setSearchQuery] = useState('')
+  const { lang: locale } = useParams()
 
   // Handle button clicks
-  const handleAccountAction = (accountId: string, action: string) => {
-    console.log(`Action: ${action} for account: ${accountId}`)
-    // Implement your action logic here
-  }
+  const handleAccountAction = () => {}
 
   // Filter and search logic
   const filteredAccounts = useMemo(() => {
@@ -295,7 +296,7 @@ const CashBankList = () => {
                 chartColor={account.chartColor}
                 currency={account.currency}
                 showButton={account.accountType !== 'cash'}
-                onButtonClick={() => handleAccountAction(account.id, account.accountType || 'default')}
+                href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
               />
             </Grid>
           ))
diff --git a/src/views/apps/cash-bank/detail/CashBankDetailCard.tsx b/src/views/apps/cash-bank/detail/CashBankDetailCard.tsx
new file mode 100644
index 0000000..83efd63
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/CashBankDetailCard.tsx
@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'SALDO',
+    stats: '30.631.261',
+    avatarIcon: 'tabler-wallet',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '22.3%',
+    subtitle: 'Hari ini vs 30 hari lalu'
+  },
+  {
+    title: 'MASUK',
+    stats: '3.486.871',
+    avatarIcon: 'tabler-arrow-down-circle',
+    avatarColor: 'success',
+    trend: 'negative',
+    trendNumber: '44.1%',
+    subtitle: 'Bulan ini vs tanggal sama bulan lalu'
+  },
+  {
+    title: 'KELUAR',
+    stats: '3.163.000',
+    avatarIcon: 'tabler-arrow-up-circle',
+    avatarColor: 'info',
+    trend: 'positive',
+    trendNumber: '137.8%',
+    subtitle: 'Bulan ini vs tanggal sama bulan lalu'
+  },
+  {
+    title: 'NET',
+    stats: '323.871',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '93.4%',
+    subtitle: 'Bulan ini vs tanggal sama bulan lalu'
+  }
+]
+
+const CashBankDetailCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default CashBankDetailCard
diff --git a/src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx b/src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx
new file mode 100644
index 0000000..ffd2b47
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/CashBankDetailHeader.tsx
@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material'
+
+interface Props {
+  title: string
+}
+
+const CashBankDetailHeader = ({ title }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default CashBankDetailHeader
diff --git a/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx b/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
new file mode 100644
index 0000000..e2bb454
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
@@ -0,0 +1,615 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import StatusFilterTabs from '@/components/StatusFilterTab'
+import DateRangePicker from '@/components/RangeDatePicker'
+
+// Updated CashBankType
+export type CashBankType = {
+  id: number
+  date: string
+  description: string
+  reference: string
+  accept: number
+  send: number
+  balance: number
+  status: string
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type CashBankTypeWithAction = CashBankType & {
+  actions?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Status color mapping for CashBank
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Transaksi di Apskel':
+      return 'info'
+    case 'Transaksi di Bank':
+      return 'primary'
+    case 'Rekonsiliasi':
+      return 'success'
+    case 'Transaksi Berulang':
+      return 'secondary'
+    case 'Void':
+      return 'error'
+    case 'Menunggu Persetujuan':
+      return 'warning'
+    case 'Di tolak':
+      return 'error'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Sample CashBank data
+const cashBankData: CashBankType[] = [
+  {
+    id: 1,
+    date: '2024-01-15',
+    description: 'Transfer ke supplier ABC',
+    reference: 'TRF-001',
+    accept: 0,
+    send: 5000000,
+    balance: 45000000,
+    status: 'Transaksi di Bank'
+  },
+  {
+    id: 2,
+    date: '2024-01-16',
+    description: 'Pembayaran dari customer XYZ',
+    reference: 'PAY-002',
+    accept: 10000000,
+    send: 0,
+    balance: 55000000,
+    status: 'Rekonsiliasi'
+  },
+  {
+    id: 3,
+    date: '2024-01-17',
+    description: 'Pembayaran gaji karyawan',
+    reference: 'SALARY-001',
+    accept: 0,
+    send: 25000000,
+    balance: 30000000,
+    status: 'Menunggu Persetujuan'
+  },
+  {
+    id: 4,
+    date: '2024-01-18',
+    description: 'Transfer antar rekening',
+    reference: 'TRF-002',
+    accept: 0,
+    send: 2000000,
+    balance: 28000000,
+    status: 'Transaksi di Apskel'
+  },
+  {
+    id: 5,
+    date: '2024-01-19',
+    description: 'Pembayaran otomatis tagihan listrik',
+    reference: 'AUTO-001',
+    accept: 0,
+    send: 1500000,
+    balance: 26500000,
+    status: 'Transaksi Berulang'
+  },
+  {
+    id: 6,
+    date: '2024-01-20',
+    description: 'Transfer yang dibatalkan',
+    reference: 'TRF-003',
+    accept: 0,
+    send: 3000000,
+    balance: 26500000,
+    status: 'Void'
+  },
+  {
+    id: 7,
+    date: '2024-01-21',
+    description: 'Pembayaran yang ditolak sistem',
+    reference: 'PAY-003',
+    accept: 0,
+    send: 5000000,
+    balance: 26500000,
+    status: 'Di tolak'
+  }
+]
+
+// Column Definitions
+const columnHelper = createColumnHelper<CashBankTypeWithAction>()
+
+const CashBankDetailTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addTransactionOpen, setAddTransactionOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [transactionId, setTransactionId] = useState('')
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<CashBankType[]>(cashBankData)
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Filter data based on search and status
+  useEffect(() => {
+    let filtered = cashBankData
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        transaction =>
+          transaction.description.toLowerCase().includes(search.toLowerCase()) ||
+          transaction.reference.toLowerCase().includes(search.toLowerCase()) ||
+          transaction.status.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by status
+    if (statusFilter !== 'Semua') {
+      filtered = filtered.filter(transaction => transaction.status === statusFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, statusFilter])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  // Calculate totals from filtered data
+  const subtotalAccept = useMemo(() => {
+    return filteredData.reduce((sum, transaction) => sum + transaction.accept, 0)
+  }, [filteredData])
+
+  const subtotalSend = useMemo(() => {
+    return filteredData.reduce((sum, transaction) => sum + transaction.send, 0)
+  }, [filteredData])
+
+  const netBalance = subtotalAccept - subtotalSend
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleTransactionClick = (transactionId: string) => {
+    console.log('Navigasi ke detail Transaksi:', transactionId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<CashBankTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('date', {
+        header: 'Tanggal',
+        cell: ({ row }) => <Typography>{row.original.date}</Typography>
+      }),
+      columnHelper.accessor('description', {
+        header: 'Keterangan',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/cashbank/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.description}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-3'>
+            <Chip
+              variant='tonal'
+              label={row.original.status}
+              size='small'
+              color={getStatusColor(row.original.status) as any}
+              className='capitalize'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('accept', {
+        header: 'Penerimaan',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.accept > 0 ? 'text-green-600' : 'text-gray-500'}`}>
+            {row.original.accept > 0 ? formatCurrency(row.original.accept) : '-'}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('send', {
+        header: 'Pengeluaran',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.send > 0 ? 'text-red-600' : 'text-gray-500'}`}>
+            {row.original.send > 0 ? formatCurrency(row.original.send) : '-'}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('balance', {
+        header: 'Saldo',
+        cell: ({ row }) => (
+          <Typography className={`font-medium ${row.original.balance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+            {formatCurrency(row.original.balance)}
+          </Typography>
+        )
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: paginatedData as CashBankType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Filter Status Tabs and Range Date */}
+        <div className='p-6 border-bs'>
+          <div className='flex items-center justify-between'>
+            <StatusFilterTabs
+              statusOptions={[
+                'Semua',
+                'Transaksi di Apskel',
+                'Transaksi di Bank',
+                'Rekonsiliasi',
+                'Transaksi Berulang',
+                'Void',
+                'Menunggu Persetujuan',
+                'Di tolak'
+              ]}
+              selectedStatus={statusFilter}
+              onStatusChange={handleStatusFilter}
+            />
+            <DateRangePicker
+              startDate={startDate}
+              endDate={endDate}
+              onStartDateChange={setStartDate}
+              onEndDateChange={setEndDate}
+            />
+          </div>
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Transaksi Cash/Bank'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/cashbank/add', locale as Locale)}
+            >
+              Tambah Transaksi
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+
+                {/* Subtotal Row */}
+                <tr className='border-t-2 bg-gray-50'>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold'>
+                      Subtotal
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold text-green-600'>
+                      {formatCurrency(subtotalAccept)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography variant='h6' className='font-semibold text-red-600'>
+                      {formatCurrency(subtotalSend)}
+                    </Typography>
+                  </td>
+                  <td className='font-semibold text-lg py-4'>
+                    <Typography
+                      variant='h6'
+                      className={`font-semibold ${netBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                    >
+                      {formatCurrency(netBalance)}
+                    </Typography>
+                  </td>
+                </tr>
+
+                {/* Total Row */}
+                <tr className='border-t bg-gray-100'>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      Total
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-bold text-xl py-4'>
+                    <Typography
+                      variant='h6'
+                      className={`font-bold ${netBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}
+                    >
+                      {formatCurrency(netBalance)}
+                    </Typography>
+                  </td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default CashBankDetailTable
diff --git a/src/views/apps/cash-bank/detail/index.tsx b/src/views/apps/cash-bank/detail/index.tsx
new file mode 100644
index 0000000..c213c42
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/index.tsx
@@ -0,0 +1,23 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import CashBankDetailHeader from './CashBankDetailHeader'
+import CashBankDetailTable from './CashBankDetailTable'
+import CashBankDetailCard from './CashBankDetailCard'
+
+const CashBankDetail = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailHeader title='Giro 1-10003' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CashBankDetail

From 630d9c0e65ce6077c49f550cc4b7ec0f65dacf3f Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 00:16:00 +0700
Subject: [PATCH 27/42] Account Page

---
 .../(private)/apps/account/page.tsx           |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   8 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/types/apps/accountTypes.ts                |   7 +
 src/views/apps/account/AccountFormDrawer.tsx  | 308 ++++++++++
 src/views/apps/account/AccountListTable.tsx   | 576 ++++++++++++++++++
 src/views/apps/account/index.tsx              |  19 +
 8 files changed, 929 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/account/page.tsx
 create mode 100644 src/types/apps/accountTypes.ts
 create mode 100644 src/views/apps/account/AccountFormDrawer.tsx
 create mode 100644 src/views/apps/account/AccountListTable.tsx
 create mode 100644 src/views/apps/account/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/account/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/account/page.tsx
new file mode 100644
index 0000000..1d47a3e
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/account/page.tsx
@@ -0,0 +1,7 @@
+import AccountList from '@/views/apps/account'
+
+const AccountPage = () => {
+  return <AccountList />
+}
+
+export default AccountPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 66e8c22..880cd61 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -129,6 +129,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           >
             {dictionary['navigation'].cash_and_bank}
           </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/account`}
+            icon={<i className='tabler-align-box-left-stretch' />}
+            exactMatch={false}
+            activeUrl='/apps/account'
+          >
+            {dictionary['navigation'].account}
+          </MenuItem>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index df083d2..f5948c4 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -124,6 +124,7 @@
     "sales_orders": "Orders",
     "quotes": "Quotes",
     "expenses": "Expenses",
-    "cash_and_bank": "Cash & Bank"
+    "cash_and_bank": "Cash & Bank",
+    "account": "Account"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index 53ddf6d..d080b8c 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -124,6 +124,7 @@
         "sales_orders": "Pemesanan",
         "quotes": "Penawaran",
         "expenses": "Biaya",
-        "cash_and_bank": "Kas & Bank"
+        "cash_and_bank": "Kas & Bank",
+        "account": "Akun"
     }
 }
diff --git a/src/types/apps/accountTypes.ts b/src/types/apps/accountTypes.ts
new file mode 100644
index 0000000..b4b151e
--- /dev/null
+++ b/src/types/apps/accountTypes.ts
@@ -0,0 +1,7 @@
+export type AccountType = {
+  id: number
+  code: string
+  name: string
+  category: string
+  balance: string
+}
diff --git a/src/views/apps/account/AccountFormDrawer.tsx b/src/views/apps/account/AccountFormDrawer.tsx
new file mode 100644
index 0000000..b6f7512
--- /dev/null
+++ b/src/views/apps/account/AccountFormDrawer.tsx
@@ -0,0 +1,308 @@
+// React Imports
+import { useState, useEffect } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+
+// Account Type
+export type AccountType = {
+  id: number
+  code: string
+  name: string
+  category: string
+  balance: string
+}
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  accountData?: AccountType[]
+  setData: (data: AccountType[]) => void
+  editingAccount?: AccountType | null
+}
+
+type FormValidateType = {
+  name: string
+  code: string
+  category: string
+  parentAccount?: string
+}
+
+// Categories available for accounts
+const accountCategories = [
+  'Kas & Bank',
+  'Piutang',
+  'Persediaan',
+  'Aset Tetap',
+  'Hutang',
+  'Ekuitas',
+  'Pendapatan',
+  'Beban'
+]
+
+// Parent accounts (dummy data for dropdown)
+const parentAccounts = [
+  { id: 1, code: '1-10001', name: 'Kas' },
+  { id: 2, code: '1-10002', name: 'Bank BCA' },
+  { id: 3, code: '1-10003', name: 'Bank Mandiri' },
+  { id: 4, code: '1-10101', name: 'Piutang Usaha' },
+  { id: 5, code: '1-10201', name: 'Persediaan Barang' },
+  { id: 6, code: '2-20001', name: 'Hutang Usaha' },
+  { id: 7, code: '3-30001', name: 'Modal Pemilik' },
+  { id: 8, code: '4-40001', name: 'Penjualan' },
+  { id: 9, code: '5-50001', name: 'Beban Gaji' }
+]
+
+// Vars
+const initialData = {
+  name: '',
+  code: '',
+  category: '',
+  parentAccount: ''
+}
+
+const AccountFormDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, accountData, setData, editingAccount } = props
+
+  // Determine if we're editing
+  const isEdit = !!editingAccount
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  // Reset form when editingAccount changes or drawer opens
+  useEffect(() => {
+    if (open) {
+      if (editingAccount) {
+        // Populate form with existing data
+        resetForm({
+          name: editingAccount.name,
+          code: editingAccount.code,
+          category: editingAccount.category,
+          parentAccount: ''
+        })
+      } else {
+        // Reset to initial data for new account
+        resetForm(initialData)
+      }
+    }
+  }, [editingAccount, open, resetForm])
+
+  const onSubmit = (data: FormValidateType) => {
+    if (isEdit && editingAccount) {
+      // Update existing account
+      const updatedAccounts =
+        accountData?.map(account =>
+          account.id === editingAccount.id
+            ? {
+                ...account,
+                code: data.code,
+                name: data.name,
+                category: data.category
+              }
+            : account
+        ) || []
+
+      setData(updatedAccounts)
+    } else {
+      // Create new account
+      const newAccount: AccountType = {
+        id: accountData?.length ? Math.max(...accountData.map(a => a.id)) + 1 : 1,
+        code: data.code,
+        name: data.name,
+        category: data.category,
+        balance: '0'
+      }
+
+      setData([...(accountData ?? []), newAccount])
+    }
+
+    handleClose()
+    resetForm(initialData)
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 300, sm: 400 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>{isEdit ? 'Edit Akun' : 'Tambah Akun Baru'}</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='account-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Nama */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Nama <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='name'
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder='Nama'
+                    {...(errors.name && { error: true, helperText: 'Field ini wajib diisi.' })}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Kode */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Kode <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='code'
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder='Kode'
+                    {...(errors.code && { error: true, helperText: 'Field ini wajib diisi.' })}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Kategori */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Kategori <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='category'
+                control={control}
+                rules={{ required: true }}
+                render={({ field: { onChange, value, ...field } }) => (
+                  <CustomAutocomplete
+                    {...field}
+                    options={accountCategories}
+                    value={value || null}
+                    onChange={(_, newValue) => onChange(newValue || '')}
+                    renderInput={params => (
+                      <CustomTextField
+                        {...params}
+                        placeholder='Pilih kategori'
+                        {...(errors.category && { error: true, helperText: 'Field ini wajib diisi.' })}
+                      />
+                    )}
+                    isOptionEqualToValue={(option, value) => option === value}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Sub Akun dari */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Sub Akun dari
+              </Typography>
+              <Controller
+                name='parentAccount'
+                control={control}
+                render={({ field: { onChange, value, ...field } }) => (
+                  <CustomAutocomplete
+                    {...field}
+                    options={parentAccounts}
+                    value={parentAccounts.find(account => `${account.code} ${account.name}` === value) || null}
+                    onChange={(_, newValue) => onChange(newValue ? `${newValue.code} ${newValue.name}` : '')}
+                    getOptionLabel={option => `${option.code} ${option.name}`}
+                    renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
+                    isOptionEqualToValue={(option, value) =>
+                      `${option.code} ${option.name}` === `${value.code} ${value.name}`
+                    }
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='account-form'>
+            {isEdit ? 'Update' : 'Simpan'}
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default AccountFormDrawer
diff --git a/src/views/apps/account/AccountListTable.tsx b/src/views/apps/account/AccountListTable.tsx
new file mode 100644
index 0000000..5746c94
--- /dev/null
+++ b/src/views/apps/account/AccountListTable.tsx
@@ -0,0 +1,576 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import AccountFormDrawer from './AccountFormDrawer'
+
+// Account Type
+export type AccountType = {
+  id: number
+  code: string
+  name: string
+  category: string
+  balance: string
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type AccountTypeWithAction = AccountType & {
+  actions?: string
+}
+
+// Dummy Account Data
+const accountsData: AccountType[] = [
+  {
+    id: 1,
+    code: '1-10001',
+    name: 'Kas',
+    category: 'Kas & Bank',
+    balance: '20000000'
+  },
+  {
+    id: 2,
+    code: '1-10002',
+    name: 'Bank BCA',
+    category: 'Kas & Bank',
+    balance: '150000000'
+  },
+  {
+    id: 3,
+    code: '1-10003',
+    name: 'Bank Mandiri',
+    category: 'Kas & Bank',
+    balance: '75000000'
+  },
+  {
+    id: 4,
+    code: '1-10101',
+    name: 'Piutang Usaha',
+    category: 'Piutang',
+    balance: '50000000'
+  },
+  {
+    id: 5,
+    code: '1-10102',
+    name: 'Piutang Karyawan',
+    category: 'Piutang',
+    balance: '5000000'
+  },
+  {
+    id: 6,
+    code: '1-10201',
+    name: 'Persediaan Barang',
+    category: 'Persediaan',
+    balance: '100000000'
+  },
+  {
+    id: 7,
+    code: '1-10301',
+    name: 'Peralatan Kantor',
+    category: 'Aset Tetap',
+    balance: '25000000'
+  },
+  {
+    id: 8,
+    code: '1-10302',
+    name: 'Kendaraan',
+    category: 'Aset Tetap',
+    balance: '200000000'
+  },
+  {
+    id: 9,
+    code: '2-20001',
+    name: 'Hutang Usaha',
+    category: 'Hutang',
+    balance: '-30000000'
+  },
+  {
+    id: 10,
+    code: '2-20002',
+    name: 'Hutang Gaji',
+    category: 'Hutang',
+    balance: '-15000000'
+  },
+  {
+    id: 11,
+    code: '3-30001',
+    name: 'Modal Pemilik',
+    category: 'Ekuitas',
+    balance: '500000000'
+  },
+  {
+    id: 12,
+    code: '4-40001',
+    name: 'Penjualan',
+    category: 'Pendapatan',
+    balance: '250000000'
+  },
+  {
+    id: 13,
+    code: '5-50001',
+    name: 'Beban Gaji',
+    category: 'Beban',
+    balance: '-80000000'
+  },
+  {
+    id: 14,
+    code: '5-50002',
+    name: 'Beban Listrik',
+    category: 'Beban',
+    balance: '-5000000'
+  },
+  {
+    id: 15,
+    code: '5-50003',
+    name: 'Beban Telepon',
+    category: 'Beban',
+    balance: '-2000000'
+  }
+]
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Category color mapping for Accounts
+const getCategoryColor = (category: string) => {
+  switch (category) {
+    case 'Kas & Bank':
+      return 'success'
+    case 'Piutang':
+      return 'info'
+    case 'Persediaan':
+      return 'warning'
+    case 'Aset Tetap':
+      return 'primary'
+    case 'Hutang':
+      return 'error'
+    case 'Ekuitas':
+      return 'secondary'
+    case 'Pendapatan':
+      return 'success'
+    case 'Beban':
+      return 'error'
+    default:
+      return 'default'
+  }
+}
+
+// Format currency
+const formatCurrency = (amount: string) => {
+  const numAmount = parseInt(amount)
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(Math.abs(numAmount))
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<AccountTypeWithAction>()
+
+const AccountListTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addAccountOpen, setAddAccountOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [accountId, setAccountId] = useState('')
+  const [search, setSearch] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState<string>('Semua')
+  const [filteredData, setFilteredData] = useState<AccountType[]>(accountsData)
+  const [data, setData] = useState<AccountType[]>(accountsData)
+  const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Get unique categories for filter
+  const categories = useMemo(() => {
+    const uniqueCategories = [...new Set(data.map(account => account.category))]
+    return ['Semua', ...uniqueCategories]
+  }, [data])
+
+  // Filter data based on search and category
+  useEffect(() => {
+    let filtered = data
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        account =>
+          account.code.toLowerCase().includes(search.toLowerCase()) ||
+          account.name.toLowerCase().includes(search.toLowerCase()) ||
+          account.category.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    // Filter by category
+    if (categoryFilter !== 'Semua') {
+      filtered = filtered.filter(account => account.category === categoryFilter)
+    }
+
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search, categoryFilter, data])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  // Handle row click for edit
+  const handleRowClick = (account: AccountType, event: React.MouseEvent) => {
+    // Don't trigger row click if clicking on checkbox or link
+    const target = event.target as HTMLElement
+    if (target.closest('input[type="checkbox"]') || target.closest('a') || target.closest('button')) {
+      return
+    }
+
+    setEditingAccount(account)
+    setAddAccountOpen(true)
+  }
+
+  // Handle closing drawer and reset editing state
+  const handleCloseDrawer = () => {
+    setAddAccountOpen(false)
+    setEditingAccount(null)
+  }
+
+  const columns = useMemo<ColumnDef<AccountTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('code', {
+        header: 'Kode Akun',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/accounting/accounts/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.code}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('name', {
+        header: 'Nama Akun',
+        cell: ({ row }) => (
+          <Typography color='text.primary' className='font-medium'>
+            {row.original.name}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('category', {
+        header: 'Kategori',
+        cell: ({ row }) => (
+          <Chip
+            variant='tonal'
+            label={row.original.category}
+            size='small'
+            color={getCategoryColor(row.original.category) as any}
+            className='capitalize'
+          />
+        )
+      }),
+      columnHelper.accessor('balance', {
+        header: 'Saldo',
+        cell: ({ row }) => {
+          const balance = parseInt(row.original.balance)
+          return (
+            <Typography className='font-medium text-right text-primary'>
+              {balance < 0 ? '-' : ''}
+              {formatCurrency(row.original.balance)}
+            </Typography>
+          )
+        }
+      })
+    ],
+    [locale]
+  )
+
+  const table = useReactTable({
+    data: paginatedData as AccountType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Akun'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              onClick={() => {
+                setEditingAccount(null)
+                setAddAccountOpen(true)
+              }}
+            >
+              Tambah Akun
+            </Button>
+          </div>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr
+                      key={row.id}
+                      className={classnames({
+                        selected: row.getIsSelected(),
+                        'cursor-pointer hover:bg-gray-50': true
+                      })}
+                      onClick={e => handleRowClick(row.original, e)}
+                    >
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+      <AccountFormDrawer
+        open={addAccountOpen}
+        handleClose={handleCloseDrawer}
+        accountData={data}
+        setData={setData}
+        editingAccount={editingAccount}
+      />
+    </>
+  )
+}
+
+export default AccountListTable
diff --git a/src/views/apps/account/index.tsx b/src/views/apps/account/index.tsx
new file mode 100644
index 0000000..783a875
--- /dev/null
+++ b/src/views/apps/account/index.tsx
@@ -0,0 +1,19 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+
+// Component Imports
+import AccountListTable from './AccountListTable'
+
+const AccountList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <AccountListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default AccountList

From 63eea38d48fc8fb8651c344cd31e5aac8a34e2c1 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 00:44:07 +0700
Subject: [PATCH 28/42] update

---
 src/views/apps/account/AccountListTable.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/apps/account/AccountListTable.tsx b/src/views/apps/account/AccountListTable.tsx
index 5746c94..24b14a6 100644
--- a/src/views/apps/account/AccountListTable.tsx
+++ b/src/views/apps/account/AccountListTable.tsx
@@ -372,8 +372,6 @@ const AccountListTable = () => {
             variant='text'
             color='primary'
             className='p-0 min-w-0 font-medium normal-case justify-start'
-            component={Link}
-            href={getLocalizedUrl(`/apps/accounting/accounts/${row.original.id}/detail`, locale as Locale)}
             sx={{
               textTransform: 'none',
               fontWeight: 500,

From 42b95bb2129794aa2758879f67ca18ab5091ed75 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 13:37:52 +0700
Subject: [PATCH 29/42] Fixed Asset Table

---
 .../(private)/apps/fixed-assets/page.tsx      |   7 +
 .../layout/vertical/VerticalMenu.tsx          |   8 +
 src/data/dictionaries/en.json                 |   3 +-
 src/data/dictionaries/id.json                 |   3 +-
 src/types/apps/fixedAssetTypes.ts             |   8 +
 .../apps/fixed-assets/FixedAssetCard.tsx      |  63 +++
 .../apps/fixed-assets/FixedAssetTable.tsx     | 512 ++++++++++++++++++
 src/views/apps/fixed-assets/index.tsx         |  18 +
 8 files changed, 620 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/page.tsx
 create mode 100644 src/types/apps/fixedAssetTypes.ts
 create mode 100644 src/views/apps/fixed-assets/FixedAssetCard.tsx
 create mode 100644 src/views/apps/fixed-assets/FixedAssetTable.tsx
 create mode 100644 src/views/apps/fixed-assets/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/page.tsx
new file mode 100644
index 0000000..fe82eda
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/page.tsx
@@ -0,0 +1,7 @@
+import FixedAssetList from '@/views/apps/fixed-assets'
+
+const FixedAssetPage = () => {
+  return <FixedAssetList />
+}
+
+export default FixedAssetPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 880cd61..3c71659 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -137,6 +137,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           >
             {dictionary['navigation'].account}
           </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/fixed-assets`}
+            icon={<i className='tabler-apps' />}
+            exactMatch={false}
+            activeUrl='/apps/fixed-assets'
+          >
+            {dictionary['navigation'].fixed_assets}
+          </MenuItem>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
index f5948c4..2194f85 100644
--- a/src/data/dictionaries/en.json
+++ b/src/data/dictionaries/en.json
@@ -125,6 +125,7 @@
     "quotes": "Quotes",
     "expenses": "Expenses",
     "cash_and_bank": "Cash & Bank",
-    "account": "Account"
+    "account": "Account",
+    "fixed_assets": "Fixed Assets"
   }
 }
diff --git a/src/data/dictionaries/id.json b/src/data/dictionaries/id.json
index d080b8c..054b387 100644
--- a/src/data/dictionaries/id.json
+++ b/src/data/dictionaries/id.json
@@ -125,6 +125,7 @@
         "quotes": "Penawaran",
         "expenses": "Biaya",
         "cash_and_bank": "Kas & Bank",
-        "account": "Akun"
+        "account": "Akun",
+        "fixed_assets": "Aset Tetap"
     }
 }
diff --git a/src/types/apps/fixedAssetTypes.ts b/src/types/apps/fixedAssetTypes.ts
new file mode 100644
index 0000000..8416aff
--- /dev/null
+++ b/src/types/apps/fixedAssetTypes.ts
@@ -0,0 +1,8 @@
+export type FixedAssetType = {
+  id: number
+  assetName: string
+  puchaseBill: string // Code Purchase
+  reference: string
+  date: string
+  price: number
+}
diff --git a/src/views/apps/fixed-assets/FixedAssetCard.tsx b/src/views/apps/fixed-assets/FixedAssetCard.tsx
new file mode 100644
index 0000000..1a15e48
--- /dev/null
+++ b/src/views/apps/fixed-assets/FixedAssetCard.tsx
@@ -0,0 +1,63 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  // Fixed Assets Data (from the image)
+  {
+    title: 'Nilai Aset',
+    stats: 'Rp 17.900.000',
+    avatarIcon: 'tabler-building-store',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '100%',
+    subtitle: 'Hari ini vs 365 hari lalu'
+  },
+  {
+    title: 'Depresiasi Aset',
+    stats: 'Rp 0',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'secondary',
+    trend: 'neutral',
+    trendNumber: '0%',
+    subtitle: 'Tahun ini vs tanggal sama tahun lalu'
+  },
+  {
+    title: 'Laba/Rugi Pelepasan Aset',
+    stats: 'Rp 0',
+    avatarIcon: 'tabler-exchange',
+    avatarColor: 'secondary',
+    trend: 'neutral',
+    trendNumber: '0%',
+    subtitle: 'Tahun ini vs tanggal sama tahun lalu'
+  },
+  {
+    title: 'Aset Baru',
+    stats: 'Rp 17.900.000',
+    avatarIcon: 'tabler-plus-circle',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '100%',
+    subtitle: 'Tahun ini vs tanggal sama tahun lalu'
+  }
+]
+
+const FixedAssetCards = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default FixedAssetCards
diff --git a/src/views/apps/fixed-assets/FixedAssetTable.tsx b/src/views/apps/fixed-assets/FixedAssetTable.tsx
new file mode 100644
index 0000000..f8226ba
--- /dev/null
+++ b/src/views/apps/fixed-assets/FixedAssetTable.tsx
@@ -0,0 +1,512 @@
+'use client'
+
+// React Imports
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Checkbox from '@mui/material/Checkbox'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import classnames from 'classnames'
+
+// Type Imports
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import OptionMenu from '@core/components/option-menu'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import { Box, CircularProgress, TablePagination } from '@mui/material'
+import { useDispatch } from 'react-redux'
+import TablePaginationComponent from '@/components/TablePaginationComponent'
+import Loading from '@/components/layout/shared/Loading'
+import { getLocalizedUrl } from '@/utils/i18n'
+import StatusFilterTabs from '@/components/StatusFilterTab'
+
+// Fixed Asset Type
+export type FixedAssetType = {
+  id: number
+  assetName: string
+  puchaseBill: string // Code Purchase
+  reference: string
+  date: string
+  price: number
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type FixedAssetTypeWithAction = FixedAssetType & {
+  actions?: string
+}
+
+// Dummy data for fixed assets
+const fixedAssetData: FixedAssetType[] = [
+  {
+    id: 1,
+    assetName: 'Laptop Dell XPS 13',
+    puchaseBill: 'PB-2024-001',
+    reference: 'REF-001',
+    date: '2024-01-15',
+    price: 15000000
+  },
+  {
+    id: 2,
+    assetName: 'Office Furniture Set',
+    puchaseBill: 'PB-2024-002',
+    reference: 'REF-002',
+    date: '2024-02-10',
+    price: 8500000
+  },
+  {
+    id: 3,
+    assetName: 'Printer Canon ImageClass',
+    puchaseBill: 'PB-2024-003',
+    reference: 'REF-003',
+    date: '2024-02-20',
+    price: 3200000
+  },
+  {
+    id: 4,
+    assetName: 'Air Conditioning Unit',
+    puchaseBill: 'PB-2024-004',
+    reference: 'REF-004',
+    date: '2024-03-05',
+    price: 12000000
+  },
+  {
+    id: 5,
+    assetName: 'Conference Room TV',
+    puchaseBill: 'PB-2024-005',
+    reference: 'REF-005',
+    date: '2024-03-15',
+    price: 7500000
+  },
+  {
+    id: 6,
+    assetName: 'MacBook Pro 16"',
+    puchaseBill: 'PB-2024-006',
+    reference: 'REF-006',
+    date: '2024-04-01',
+    price: 28000000
+  },
+  {
+    id: 7,
+    assetName: 'Standing Desk Electric',
+    puchaseBill: 'PB-2024-007',
+    reference: 'REF-007',
+    date: '2024-04-15',
+    price: 4500000
+  },
+  {
+    id: 8,
+    assetName: 'Server HP ProLiant',
+    puchaseBill: 'PB-2024-008',
+    reference: 'REF-008',
+    date: '2024-05-01',
+    price: 45000000
+  }
+]
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount)
+}
+
+// Format date
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('id-ID', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<FixedAssetTypeWithAction>()
+
+const FixedAssetTable = () => {
+  const dispatch = useDispatch()
+
+  // States
+  const [addAssetOpen, setAddAssetOpen] = useState(false)
+  const [rowSelection, setRowSelection] = useState({})
+  const [currentPage, setCurrentPage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [assetId, setAssetId] = useState('')
+  const [search, setSearch] = useState('')
+  const [filteredData, setFilteredData] = useState<FixedAssetType[]>([])
+  const [statusFilter, setStatusFilter] = useState<string>('Draft')
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  // Initialize data on component mount
+  useEffect(() => {
+    console.log('Initial fixedAssetData:', fixedAssetData)
+    setFilteredData(fixedAssetData)
+  }, [])
+
+  // Filter data based on search
+  useEffect(() => {
+    let filtered = [...fixedAssetData]
+
+    // Filter by search
+    if (search) {
+      filtered = filtered.filter(
+        asset =>
+          asset.assetName.toLowerCase().includes(search.toLowerCase()) ||
+          asset.puchaseBill.toLowerCase().includes(search.toLowerCase()) ||
+          asset.reference.toLowerCase().includes(search.toLowerCase())
+      )
+    }
+
+    console.log('Filtered data:', filtered) // Debug log
+    setFilteredData(filtered)
+    setCurrentPage(0)
+  }, [search])
+
+  const totalCount = filteredData.length
+  const paginatedData = useMemo(() => {
+    const startIndex = currentPage * pageSize
+    return filteredData.slice(startIndex, startIndex + pageSize)
+  }, [filteredData, currentPage, pageSize])
+
+  // Calculate total value from filtered data
+  const totalValue = useMemo(() => {
+    return filteredData.reduce((sum, asset) => sum + asset.price, 0)
+  }, [filteredData])
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(0)
+  }, [])
+
+  const handleDelete = () => {
+    setOpenConfirm(false)
+  }
+
+  const handleAssetClick = (assetId: string) => {
+    console.log('Navigasi ke detail Asset:', assetId)
+  }
+
+  const handleStatusFilter = (status: string) => {
+    setStatusFilter(status)
+  }
+
+  const columns = useMemo<ColumnDef<FixedAssetTypeWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('puchaseBill', {
+        header: 'Kode Pembelian',
+        cell: ({ row }) => (
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/fixed-asset/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.puchaseBill}
+          </Button>
+        )
+      }),
+      columnHelper.accessor('assetName', {
+        header: 'Nama Aset',
+        cell: ({ row }) => (
+          <Typography color='text.primary' className='font-medium'>
+            {row.original.assetName}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('reference', {
+        header: 'Referensi',
+        cell: ({ row }) => <Typography color='text.secondary'>{row.original.reference || '-'}</Typography>
+      }),
+      columnHelper.accessor('date', {
+        header: 'Tanggal Pembelian',
+        cell: ({ row }) => <Typography>{formatDate(row.original.date)}</Typography>
+      }),
+      columnHelper.accessor('price', {
+        header: 'Harga',
+        cell: ({ row }) => (
+          <Typography className='font-medium text-primary'>{formatCurrency(row.original.price)}</Typography>
+        )
+      })
+    ],
+    [locale]
+  )
+
+  const table = useReactTable({
+    data: paginatedData as FixedAssetType[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <>
+      <Card>
+        {/* Header */}
+        <div className='p-6 border-bs'>
+          <StatusFilterTabs
+            statusOptions={['Draft', 'Terdaftar', 'Terjual/Dilepaskan']}
+            selectedStatus={statusFilter}
+            onStatusChange={handleStatusFilter}
+          />
+        </div>
+
+        <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+          <DebouncedInput
+            value={search}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Aset Tetap'
+            className='max-sm:is-full'
+          />
+          <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+            <CustomTextField
+              select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className='max-sm:is-full sm:is-[70px]'
+            >
+              <MenuItem value={10}>10</MenuItem>
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+            </CustomTextField>
+            <Button
+              color='secondary'
+              variant='tonal'
+              startIcon={<i className='tabler-upload' />}
+              className='max-sm:is-full'
+            >
+              Ekspor
+            </Button>
+            <Button
+              variant='contained'
+              component={Link}
+              className='max-sm:is-full is-auto'
+              startIcon={<i className='tabler-plus' />}
+              href={getLocalizedUrl('/apps/fixed-asset/add', locale as Locale)}
+            >
+              Tambah Aset
+            </Button>
+          </div>
+        </div>
+
+        <div className='overflow-x-auto'>
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {filteredData.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table.getRowModel().rows.map(row => {
+                  return (
+                    <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                      {row.getVisibleCells().map(cell => (
+                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+
+                {/* Total Row */}
+                <tr className='border-t-2 bg-gray-50'>
+                  <td className='font-bold text-lg py-4'>
+                    <Typography variant='h6' className='font-bold'>
+                      Total Nilai Aset
+                    </Typography>
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td className='font-bold text-lg py-4'>
+                    <Typography variant='h6' className='font-bold text-primary'>
+                      {formatCurrency(totalValue)}
+                    </Typography>
+                  </td>
+                  <td></td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+
+        <TablePagination
+          component={() => (
+            <TablePaginationComponent
+              pageIndex={currentPage}
+              pageSize={pageSize}
+              totalCount={totalCount}
+              onPageChange={handlePageChange}
+            />
+          )}
+          count={totalCount}
+          rowsPerPage={pageSize}
+          page={currentPage}
+          onPageChange={handlePageChange}
+          onRowsPerPageChange={handlePageSizeChange}
+          rowsPerPageOptions={[10, 25, 50]}
+        />
+      </Card>
+    </>
+  )
+}
+
+export default FixedAssetTable
diff --git a/src/views/apps/fixed-assets/index.tsx b/src/views/apps/fixed-assets/index.tsx
new file mode 100644
index 0000000..2de61a9
--- /dev/null
+++ b/src/views/apps/fixed-assets/index.tsx
@@ -0,0 +1,18 @@
+import Grid from '@mui/material/Grid2'
+import FixedAssetCards from './FixedAssetCard'
+import FixedAssetTable from './FixedAssetTable'
+
+const FixedAssetList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <FixedAssetCards />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FixedAssetTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FixedAssetList

From 9c1b1fc1db296bbe239b939ccda49bf990178199 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 14:47:57 +0700
Subject: [PATCH 30/42] Fixed Asset Add

---
 .../(private)/apps/fixed-assets/add/page.tsx  |  18 +
 .../apps/fixed-assets/FixedAssetTable.tsx     |   2 +-
 .../fixed-assets/add/FixedAssetAddForm.tsx    | 561 ++++++++++++++++++
 .../fixed-assets/add/FixedAssetAddHeader.tsx  |  19 +
 4 files changed, 599 insertions(+), 1 deletion(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/add/page.tsx
 create mode 100644 src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx
 create mode 100644 src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/add/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/add/page.tsx
new file mode 100644
index 0000000..adbad6a
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/fixed-assets/add/page.tsx
@@ -0,0 +1,18 @@
+import FixedAssetAddForm from '@/views/apps/fixed-assets/add/FixedAssetAddForm'
+import FixedAssetAddHeader from '@/views/apps/fixed-assets/add/FixedAssetAddHeader'
+import Grid from '@mui/material/Grid2'
+
+const FixedAssetPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <FixedAssetAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FixedAssetAddForm />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FixedAssetPage
diff --git a/src/views/apps/fixed-assets/FixedAssetTable.tsx b/src/views/apps/fixed-assets/FixedAssetTable.tsx
index f8226ba..3f5bb1b 100644
--- a/src/views/apps/fixed-assets/FixedAssetTable.tsx
+++ b/src/views/apps/fixed-assets/FixedAssetTable.tsx
@@ -409,7 +409,7 @@ const FixedAssetTable = () => {
               component={Link}
               className='max-sm:is-full is-auto'
               startIcon={<i className='tabler-plus' />}
-              href={getLocalizedUrl('/apps/fixed-asset/add', locale as Locale)}
+              href={getLocalizedUrl('/apps/fixed-assets/add', locale as Locale)}
             >
               Tambah Aset
             </Button>
diff --git a/src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx b/src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx
new file mode 100644
index 0000000..e83c855
--- /dev/null
+++ b/src/views/apps/fixed-assets/add/FixedAssetAddForm.tsx
@@ -0,0 +1,561 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardContent, Typography, Button, Switch, FormControlLabel, Box, Radio } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CustomTextField from '@/@core/components/mui/TextField'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+
+interface FormData {
+  namaAset: string
+  nomor: string
+  tanggalPembelian: string
+  hargaBeli: string
+  akunAsetTetap: any
+  dikreditkanDariAkun: any
+  deskripsi: string
+  referensi: string
+  tanpaPenyusutan: boolean
+  akunAkumulasiPenyusutan: any
+  akunPenyusutan: any
+  nilaiPenyusuanPerTahun: string
+  masaManfaatTahun: string
+  masaManfaatBulan: string
+  depreciationType: 'percentage' | 'useful-life'
+  showAdditionalOptions: boolean
+  metodePenyusutan: any
+  tanggalMulaiPenyusutan: string
+  akumulasiPenyusutan: string
+  batasBiaya: string
+  nilaiResidu: string
+  showImageUpload: boolean
+  uploadedImage: string | null
+}
+
+// Simple ImageUpload component
+const ImageUpload = ({ onUpload, maxFileSize, showUrlOption, dragDropText, browseButtonText }: any) => {
+  const [dragOver, setDragOver] = useState(false)
+
+  const handleFileSelect = (file: File) => {
+    if (file.size > maxFileSize) {
+      alert(`File size exceeds ${maxFileSize / (1024 * 1024)}MB limit`)
+      return
+    }
+
+    const url = URL.createObjectURL(file)
+    onUpload(file, url)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+    const files = Array.from(e.dataTransfer.files)
+    if (files[0]) {
+      handleFileSelect(files[0])
+    }
+  }
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    if (files[0]) {
+      handleFileSelect(files[0])
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        border: dragOver ? '2px dashed #1976d2' : '2px dashed #ccc',
+        borderRadius: 2,
+        p: 3,
+        textAlign: 'center',
+        backgroundColor: dragOver ? '#f5f5f5' : 'transparent',
+        transition: 'all 0.3s ease'
+      }}
+      onDrop={handleDrop}
+      onDragOver={e => {
+        e.preventDefault()
+        setDragOver(true)
+      }}
+      onDragLeave={() => setDragOver(false)}
+    >
+      <Typography variant='body1' sx={{ mb: 2 }}>
+        {dragDropText}
+      </Typography>
+      <input
+        type='file'
+        accept='image/*'
+        style={{ display: 'none' }}
+        id='image-upload-input'
+        onChange={handleFileInput}
+      />
+      <label htmlFor='image-upload-input'>
+        <Button variant='outlined' component='span'>
+          {browseButtonText}
+        </Button>
+      </label>
+    </Box>
+  )
+}
+
+const FixedAssetAddForm = () => {
+  const [formData, setFormData] = useState<FormData>({
+    namaAset: '',
+    nomor: 'FA/00003',
+    tanggalPembelian: '11/09/2025',
+    hargaBeli: '0',
+    akunAsetTetap: null,
+    dikreditkanDariAkun: null,
+    deskripsi: '',
+    referensi: '',
+    tanpaPenyusutan: true,
+    akunAkumulasiPenyusutan: null,
+    akunPenyusutan: null,
+    nilaiPenyusuanPerTahun: '',
+    masaManfaatTahun: '',
+    masaManfaatBulan: '',
+    depreciationType: 'percentage',
+    showAdditionalOptions: false,
+    metodePenyusutan: null,
+    tanggalMulaiPenyusutan: '11/09/2025',
+    akumulasiPenyusutan: '0',
+    batasBiaya: '0',
+    nilaiResidu: '0',
+    showImageUpload: false,
+    uploadedImage: null
+  })
+
+  const handleInputChange = (field: keyof FormData, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  // Sample options - replace with your actual data
+  const akunAsetTetapOptions = [{ label: '1-10705 Aset Tetap - Perlengkapan Kantor', value: '1-10705' }]
+
+  const dikreditkanDariAkunOptions = [{ label: 'Silakan pilih dikreditkan dari akun', value: '' }]
+
+  const akunAkumulasiPenyusutanOptions = [{ label: 'Silakan pilih akun akumulasi penyusutan', value: '' }]
+
+  const akunPenyusutanOptions = [{ label: 'Silakan pilih akbun penyusutan', value: '' }]
+
+  const metodePenyusutanOptions = [
+    { label: 'Straight Line', value: 'straight-line' },
+    { label: 'Declining Balance', value: 'declining-balance' },
+    { label: 'Sum of Years Digits', value: 'sum-of-years' }
+  ]
+
+  const handleUpload = (file: File, url: string) => {
+    handleInputChange('uploadedImage', url)
+    console.log('Image uploaded:', { file, url })
+  }
+
+  const handleSubmit = () => {
+    console.log('Form Data:', formData)
+    // Handle form submission here
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant='h6' gutterBottom>
+          Detil
+        </Typography>
+
+        <Box sx={{ mb: 2 }}>
+          <Button
+            variant='text'
+            color='primary'
+            sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
+            onClick={() => handleInputChange('showImageUpload', !formData.showImageUpload)}
+          >
+            {formData.showImageUpload ? '- Sembunyikan gambar aset tetap' : '+ Tampilkan gambar aset tetap'}
+          </Button>
+        </Box>
+
+        {/* Image Upload Section */}
+        {formData.showImageUpload && (
+          <Box sx={{ mb: 3 }}>
+            <ImageUpload
+              onUpload={handleUpload}
+              maxFileSize={1 * 1024 * 1024} // 1MB
+              showUrlOption={false}
+              dragDropText='Drop your image here'
+              browseButtonText='Choose Image'
+            />
+            {formData.uploadedImage && (
+              <Box sx={{ mt: 2, textAlign: 'center' }}>
+                <img
+                  src={formData.uploadedImage}
+                  alt='Uploaded asset'
+                  style={{ maxWidth: '200px', maxHeight: '200px', borderRadius: '8px' }}
+                />
+              </Box>
+            )}
+          </Box>
+        )}
+
+        <Grid container spacing={3}>
+          {/* Left Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            <CustomTextField
+              fullWidth
+              label='Nama Aset'
+              placeholder='Nama Aset'
+              value={formData.namaAset}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('namaAset', e.target.value)}
+              required
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Tanggal Pembelian'
+              type='date'
+              value={formData.tanggalPembelian}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleInputChange('tanggalPembelian', e.target.value)
+              }
+              InputLabelProps={{
+                shrink: true
+              }}
+              required
+              sx={{ mb: 3 }}
+            />
+
+            <CustomAutocomplete
+              fullWidth
+              options={akunAsetTetapOptions}
+              value={formData.akunAsetTetap}
+              onChange={(event, newValue) => handleInputChange('akunAsetTetap', newValue)}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  label='Akun Aset Tetap'
+                  placeholder='1-10705 Aset Tetap - Perlengkapan Kantor'
+                  fullWidth
+                  required
+                />
+              )}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Deskripsi'
+              placeholder='Deskripsi'
+              multiline
+              rows={4}
+              value={formData.deskripsi}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('deskripsi', e.target.value)}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Referensi'
+              placeholder='Referensi'
+              value={formData.referensi}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('referensi', e.target.value)}
+            />
+          </Grid>
+
+          {/* Right Column */}
+          <Grid size={{ xs: 12, md: 6 }}>
+            <CustomTextField
+              fullWidth
+              label='Nomor'
+              value={formData.nomor}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('nomor', e.target.value)}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomTextField
+              fullWidth
+              label='Harga Beli'
+              type='number'
+              value={formData.hargaBeli}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('hargaBeli', e.target.value)}
+              sx={{ mb: 3 }}
+            />
+
+            <CustomAutocomplete
+              fullWidth
+              options={dikreditkanDariAkunOptions}
+              value={formData.dikreditkanDariAkun}
+              onChange={(event, newValue) => handleInputChange('dikreditkanDariAkun', newValue)}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  label='Dikreditkan Dari Akun'
+                  placeholder='Silakan pilih dikreditkan dari akun'
+                  fullWidth
+                  required
+                />
+              )}
+              sx={{ mb: 3 }}
+            />
+          </Grid>
+        </Grid>
+
+        {/* Penyusutan Section */}
+        <Box sx={{ mt: 4 }}>
+          <Typography variant='h6' gutterBottom>
+            Penyusutan
+          </Typography>
+
+          <FormControlLabel
+            control={
+              <Switch
+                checked={formData.tanpaPenyusutan}
+                onChange={e => handleInputChange('tanpaPenyusutan', e.target.checked)}
+                color='primary'
+              />
+            }
+            label='Tanpa penyusutan'
+          />
+
+          {/* Show depreciation fields when switch is OFF (false) */}
+          {!formData.tanpaPenyusutan && (
+            <Grid container spacing={3} sx={{ mt: 2 }}>
+              <Grid size={{ xs: 12, md: 6 }}>
+                <CustomAutocomplete
+                  fullWidth
+                  options={akunAkumulasiPenyusutanOptions}
+                  value={formData.akunAkumulasiPenyusutan}
+                  onChange={(event, newValue) => handleInputChange('akunAkumulasiPenyusutan', newValue)}
+                  renderInput={params => (
+                    <CustomTextField
+                      {...params}
+                      label='Akun Akumulasi Penyusutan'
+                      placeholder='Silakan pilih akun akumulasi penyusutan'
+                      fullWidth
+                      required
+                    />
+                  )}
+                  sx={{ mb: 3 }}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <CustomAutocomplete
+                  fullWidth
+                  options={akunPenyusutanOptions}
+                  value={formData.akunPenyusutan}
+                  onChange={(event, newValue) => handleInputChange('akunPenyusutan', newValue)}
+                  renderInput={params => (
+                    <CustomTextField
+                      {...params}
+                      label='Akun penyusutan'
+                      placeholder='Silakan pilih akbun penyusutan'
+                      fullWidth
+                      required
+                    />
+                  )}
+                  sx={{ mb: 3 }}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <Box sx={{ mb: 3 }}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                    Nilai penyusutan per tahun *
+                  </Typography>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Radio
+                      checked={formData.depreciationType === 'percentage'}
+                      onChange={() => handleInputChange('depreciationType', 'percentage')}
+                      value='percentage'
+                      name='depreciation-method'
+                      color='primary'
+                      size='small'
+                    />
+                    <Box>
+                      <CustomTextField
+                        value={formData.nilaiPenyusuanPerTahun}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('nilaiPenyusuanPerTahun', e.target.value)
+                        }
+                        disabled={formData.depreciationType !== 'percentage'}
+                        sx={{
+                          flex: 1,
+                          '& .MuiOutlinedInput-root': {
+                            border: 'none',
+                            '& fieldset': {
+                              border: 'none'
+                            }
+                          }
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                </Box>
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <Box sx={{ mb: 3 }}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                    Masa Manfaat *
+                  </Typography>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Radio
+                      checked={formData.depreciationType === 'useful-life'}
+                      onChange={() => handleInputChange('depreciationType', 'useful-life')}
+                      value='useful-life'
+                      name='depreciation-method'
+                      color='primary'
+                      size='small'
+                    />
+                    <Box>
+                      <CustomTextField
+                        placeholder='Tahun'
+                        value={formData.masaManfaatTahun}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('masaManfaatTahun', e.target.value)
+                        }
+                        disabled={formData.depreciationType !== 'useful-life'}
+                        sx={{
+                          flex: 1,
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: 0,
+                            borderRight: '1px solid #e0e0e0',
+                            '& fieldset': {
+                              border: 'none'
+                            }
+                          }
+                        }}
+                      />
+                      <CustomTextField
+                        placeholder='Bulan'
+                        value={formData.masaManfaatBulan}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('masaManfaatBulan', e.target.value)
+                        }
+                        disabled={formData.depreciationType !== 'useful-life'}
+                        sx={{
+                          flex: 1,
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: 0,
+                            '& fieldset': {
+                              border: 'none'
+                            }
+                          }
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                </Box>
+              </Grid>
+
+              <Grid size={12}>
+                <Button
+                  variant='text'
+                  color='primary'
+                  sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
+                  onClick={() => handleInputChange('showAdditionalOptions', !formData.showAdditionalOptions)}
+                >
+                  {formData.showAdditionalOptions ? '- Sembunyikan opsi lainnya' : '+ Tampilkan opsi lainnya'}
+                </Button>
+              </Grid>
+
+              {/* Additional Options */}
+              {formData.showAdditionalOptions && (
+                <>
+                  <Grid size={{ xs: 12, md: 6 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500, color: 'error.main' }}>
+                      Metode Penyusutan *
+                    </Typography>
+                    <CustomAutocomplete
+                      fullWidth
+                      options={metodePenyusutanOptions}
+                      value={formData.metodePenyusutan}
+                      onChange={(event, newValue) => handleInputChange('metodePenyusutan', newValue)}
+                      renderInput={params => (
+                        <CustomTextField {...params} placeholder='Straight Line' fullWidth required />
+                      )}
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 6 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Tanggal Mulai Penyusutan
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='date'
+                      value={formData.tanggalMulaiPenyusutan}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('tanggalMulaiPenyusutan', e.target.value)
+                      }
+                      InputLabelProps={{
+                        shrink: true
+                      }}
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Akumulasi Penyusutan
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='number'
+                      value={formData.akumulasiPenyusutan}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('akumulasiPenyusutan', e.target.value)
+                      }
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Batas Biaya
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='number'
+                      value={formData.batasBiaya}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('batasBiaya', e.target.value)
+                      }
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+
+                  <Grid size={{ xs: 12, md: 4 }}>
+                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
+                      Nilai Residu
+                    </Typography>
+                    <CustomTextField
+                      fullWidth
+                      type='number'
+                      value={formData.nilaiResidu}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleInputChange('nilaiResidu', e.target.value)
+                      }
+                      sx={{ mb: 3 }}
+                    />
+                  </Grid>
+                </>
+              )}
+            </Grid>
+          )}
+        </Box>
+
+        {/* Submit Button */}
+        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button variant='contained' color='primary' onClick={handleSubmit} sx={{ minWidth: 120 }}>
+            Simpan
+          </Button>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FixedAssetAddForm
diff --git a/src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx b/src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx
new file mode 100644
index 0000000..c38957c
--- /dev/null
+++ b/src/views/apps/fixed-assets/add/FixedAssetAddHeader.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const FixedAssetAddHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Tambah Asset Tetap
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default FixedAssetAddHeader

From c9e260860c0742751a799e8344430914a619ceee Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 15:32:26 +0700
Subject: [PATCH 31/42] Report Page

---
 .../(private)/apps/report/page.tsx            |  7 ++
 .../layout/vertical/VerticalMenu.tsx          |  8 ++
 src/views/apps/report/ReportCard.tsx          | 87 +++++++++++++++++++
 src/views/apps/report/ReportFinancialList.tsx | 38 ++++++++
 src/views/apps/report/ReportHeader.tsx        | 19 ++++
 src/views/apps/report/index.tsx               | 18 ++++
 6 files changed, 177 insertions(+)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/report/page.tsx
 create mode 100644 src/views/apps/report/ReportCard.tsx
 create mode 100644 src/views/apps/report/ReportFinancialList.tsx
 create mode 100644 src/views/apps/report/ReportHeader.tsx
 create mode 100644 src/views/apps/report/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/page.tsx
new file mode 100644
index 0000000..c6c2230
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/page.tsx
@@ -0,0 +1,7 @@
+import ReportList from '@/views/apps/report'
+
+const ReportPage = () => {
+  return <ReportList />
+}
+
+export default ReportPage
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 3c71659..00e3a3d 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -145,6 +145,14 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           >
             {dictionary['navigation'].fixed_assets}
           </MenuItem>
+          <MenuItem
+            href={`/${locale}/apps/report`}
+            icon={<i className='tabler-file-analytics' />}
+            exactMatch={false}
+            activeUrl='/apps/report'
+          >
+            {dictionary['navigation'].reports}
+          </MenuItem>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/views/apps/report/ReportCard.tsx b/src/views/apps/report/ReportCard.tsx
new file mode 100644
index 0000000..77e5e68
--- /dev/null
+++ b/src/views/apps/report/ReportCard.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { Card, CardContent, Typography } from '@mui/material'
+import Link from 'next/link'
+import CustomAvatar, { CustomAvatarProps } from '@/@core/components/mui/Avatar'
+import { ThemeColor } from '@/@core/types'
+
+interface ReportCardProps {
+  title: string
+  avatarIcon: string
+  href?: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+  avatarColor?: ThemeColor
+  avatarVariant?: CustomAvatarProps['variant']
+  avatarSkin?: CustomAvatarProps['skin']
+  avatarSize?: number
+}
+
+const ReportCard = (props: ReportCardProps) => {
+  const { title, avatarIcon, href, target = '_self', avatarColor, avatarVariant, avatarSkin, avatarSize } = props
+
+  const CardComponent = (
+    <Card
+      className='transition-all duration-300 hover:shadow-lg hover:-translate-y-1 cursor-pointer'
+      sx={{
+        '&:hover': {
+          '& .MuiCardContent-root': {
+            transform: 'scale(1.02)'
+          },
+          '& .report-avatar': {
+            transform: 'scale(1.1)'
+          },
+          '& .report-title': {
+            color: 'primary.main'
+          }
+        }
+      }}
+    >
+      <CardContent className='flex items-center gap-2 transition-transform duration-200'>
+        <CustomAvatar
+          variant={avatarVariant}
+          skin={avatarSkin}
+          color={avatarColor}
+          size={avatarSize}
+          className='report-avatar transition-transform duration-200'
+        >
+          <i className={avatarIcon} />
+        </CustomAvatar>
+        <div className='flex flex-col items-start gap-1'>
+          <Typography variant='h5' className='report-title transition-colors duration-200'>
+            {title}
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  )
+
+  // If href is provided, wrap with Link
+  if (href) {
+    // Check if it's an external link
+    const isExternal = href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:')
+
+    if (isExternal) {
+      return (
+        <a
+          href={href}
+          target={target}
+          rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+          className='no-underline'
+        >
+          {CardComponent}
+        </a>
+      )
+    }
+
+    // Internal link using Next.js Link
+    return (
+      <Link href={href} className='no-underline'>
+        {CardComponent}
+      </Link>
+    )
+  }
+
+  // No link, return card as is
+  return CardComponent
+}
+
+export default ReportCard
diff --git a/src/views/apps/report/ReportFinancialList.tsx b/src/views/apps/report/ReportFinancialList.tsx
new file mode 100644
index 0000000..1dd7385
--- /dev/null
+++ b/src/views/apps/report/ReportFinancialList.tsx
@@ -0,0 +1,38 @@
+import { Container, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import ReportCard from './ReportCard'
+
+const ReportFinancialList: React.FC = () => {
+  const financialReports = [
+    {
+      title: 'Arus Kas',
+      iconClass: 'tabler-cash'
+    },
+    {
+      title: 'Laba Rugi',
+      iconClass: 'tabler-cash'
+    },
+    {
+      title: 'Neraca',
+      iconClass: 'tabler-cash'
+    }
+  ]
+
+  return (
+    <div>
+      <Typography variant='h5' className='mbe-1'>
+        Finansial
+      </Typography>
+
+      <Grid container spacing={3}>
+        {financialReports.map((report, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
+            <ReportCard title={report.title} avatarIcon={report.iconClass} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  )
+}
+
+export default ReportFinancialList
diff --git a/src/views/apps/report/ReportHeader.tsx b/src/views/apps/report/ReportHeader.tsx
new file mode 100644
index 0000000..005428e
--- /dev/null
+++ b/src/views/apps/report/ReportHeader.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const ReportHeader = () => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          Laporan
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default ReportHeader
diff --git a/src/views/apps/report/index.tsx b/src/views/apps/report/index.tsx
new file mode 100644
index 0000000..d99eebc
--- /dev/null
+++ b/src/views/apps/report/index.tsx
@@ -0,0 +1,18 @@
+import Grid from '@mui/material/Grid2'
+import ReportHeader from './ReportHeader'
+import ReportFinancialList from './ReportFinancialList'
+
+const ReportList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportHeader />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportFinancialList />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ReportList

From 29defb68c83578657fd80a4ed35d18ae92ceb329 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 16:02:31 +0700
Subject: [PATCH 32/42] Ingredient Detail Unit

---
 .../products/ingredients/[id]/detail/page.tsx |  7 ++++
 .../ingredient/ProductIngredientTable.tsx     | 36 +++++++++++++-----
 .../detail/IngredientDetailInfo.tsx           | 30 +++++++++++++++
 .../detail/IngredientDetailUnit.tsx           | 38 +++++++++++++++++++
 .../products/ingredient/detail/index.tsx      | 18 +++++++++
 5 files changed, 120 insertions(+), 9 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/inventory/products/ingredients/[id]/detail/page.tsx
 create mode 100644 src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailInfo.tsx
 create mode 100644 src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
 create mode 100644 src/views/apps/ecommerce/products/ingredient/detail/index.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/inventory/products/ingredients/[id]/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/inventory/products/ingredients/[id]/detail/page.tsx
new file mode 100644
index 0000000..6ede982
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/inventory/products/ingredients/[id]/detail/page.tsx
@@ -0,0 +1,7 @@
+import IngredientDetail from '@/views/apps/ecommerce/products/ingredient/detail'
+
+const IngredientDetailPage = () => {
+  return <IngredientDetail />
+}
+
+export default IngredientDetailPage
diff --git a/src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx b/src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx
index 5f9c063..052c9e5 100644
--- a/src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx
+++ b/src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx
@@ -38,6 +38,10 @@ import AddProductIngredientDrawer from './AddProductIngredientDrawer'
 import { useIngredientsMutation } from '../../../../../services/mutations/ingredients'
 import { useDispatch } from 'react-redux'
 import { setIngredient } from '../../../../../redux-store/slices/ingredient'
+import Link from 'next/link'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -110,6 +114,8 @@ const ProductIngredientTable = () => {
   const [openConfirm, setOpenConfirm] = useState(false)
   const [search, setSearch] = useState('')
 
+  const { lang: locale } = useParams()
+
   // Fetch products with pagination and search
   const { data, isLoading, error, isFetching } = useIngredients({
     page: currentPage,
@@ -166,14 +172,23 @@ const ProductIngredientTable = () => {
       columnHelper.accessor('name', {
         header: 'Name',
         cell: ({ row }) => (
-          <div className='flex items-center gap-3'>
-            {/* <img src={row.original.image} width={38} height={38} className='rounded bg-actionHover' /> */}
-            <div className='flex flex-col items-start'>
-              <Typography className='font-medium' color='text.primary'>
-                {row.original.name || '-'}
-              </Typography>
-            </div>
-          </div>
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/inventory/products/ingredients/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.name}
+          </Button>
         )
       }),
       columnHelper.accessor('cost', {
@@ -396,7 +411,10 @@ const ProductIngredientTable = () => {
         />
       </Card>
 
-      <AddProductIngredientDrawer open={addIngredientOpen} handleClose={() => setAddIngredientOpen(!addIngredientOpen)} />
+      <AddProductIngredientDrawer
+        open={addIngredientOpen}
+        handleClose={() => setAddIngredientOpen(!addIngredientOpen)}
+      />
 
       <ConfirmDeleteDialog
         open={openConfirm}
diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailInfo.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailInfo.tsx
new file mode 100644
index 0000000..1774198
--- /dev/null
+++ b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailInfo.tsx
@@ -0,0 +1,30 @@
+import { formatCurrency } from '@/utils/transform'
+import { Card, CardHeader, Chip, Typography } from '@mui/material'
+
+const IngredientDetailInfo = () => {
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <div className='flex items-center gap-3'>
+            <Typography variant='h4' component='h1' className='font-bold'>
+              Tepung Terigu
+            </Typography>
+            <Chip label={'Active'} color={'success'} size='small' />
+          </div>
+        }
+        subheader={
+          <div className='flex flex-col gap-1 mt-2'>
+            <div className='flex gap-4'>
+              <Typography variant='body2'>
+                <span className='font-semibold'>Cost:</span> {formatCurrency(5000)}
+              </Typography>
+            </div>
+          </div>
+        }
+      />
+    </Card>
+  )
+}
+
+export default IngredientDetailInfo
diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
new file mode 100644
index 0000000..823b0d2
--- /dev/null
+++ b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Button, Box, Stack } from '@mui/material'
+
+const IngredientDetailUnit = () => {
+  return (
+    <Card sx={{ maxWidth: 400 }}>
+      <CardHeader title='Satuan' />
+      <CardContent>
+        <Stack spacing={2} sx={{ mb: 3 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant='body1' color='text.secondary'>
+              Satuan Dasar
+            </Typography>
+            <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+              : Pcs
+            </Typography>
+          </Box>
+        </Stack>
+
+        <Button
+          variant='contained'
+          fullWidth
+          startIcon={<span style={{ fontSize: '18px' }}>+</span>}
+          sx={{
+            py: 1.5,
+            borderRadius: 2,
+            textTransform: 'none',
+            fontSize: '16px'
+          }}
+        >
+          Ubah konversi satuan
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default IngredientDetailUnit
diff --git a/src/views/apps/ecommerce/products/ingredient/detail/index.tsx b/src/views/apps/ecommerce/products/ingredient/detail/index.tsx
new file mode 100644
index 0000000..88c1d81
--- /dev/null
+++ b/src/views/apps/ecommerce/products/ingredient/detail/index.tsx
@@ -0,0 +1,18 @@
+import Grid from '@mui/material/Grid2'
+import IngredientDetailInfo from './IngredientDetailInfo'
+import IngredientDetailUnit from './IngredientDetailUnit'
+
+const IngredientDetail = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+        <IngredientDetailInfo />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+        <IngredientDetailUnit />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default IngredientDetail

From 5a77d3c2ea2c0c4c034b1f64beb14fc5faf10edd Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 16:22:05 +0700
Subject: [PATCH 33/42] Ingredient Detail

---
 .../detail/IngedientUnitConversionDrawer.tsx  | 370 ++++++++++++++++++
 .../detail/IngredientDetailUnit.tsx           |  91 +++--
 2 files changed, 431 insertions(+), 30 deletions(-)
 create mode 100644 src/views/apps/ecommerce/products/ingredient/detail/IngedientUnitConversionDrawer.tsx

diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngedientUnitConversionDrawer.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngedientUnitConversionDrawer.tsx
new file mode 100644
index 0000000..2d23725
--- /dev/null
+++ b/src/views/apps/ecommerce/products/ingredient/detail/IngedientUnitConversionDrawer.tsx
@@ -0,0 +1,370 @@
+'use client'
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid2'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  setData?: (data: any) => void
+}
+
+type UnitConversionType = {
+  satuan: string
+  quantity: number
+  unit: string
+  hargaBeli: number
+  hargaJual: number
+  isDefault: boolean
+}
+
+type FormValidateType = {
+  conversions: UnitConversionType[]
+}
+
+// Vars
+const initialConversion: UnitConversionType = {
+  satuan: 'Box',
+  quantity: 12,
+  unit: 'Pcs',
+  hargaBeli: 3588000,
+  hargaJual: 5988000,
+  isDefault: false
+}
+
+const IngedientUnitConversionDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, setData } = props
+
+  // States
+  const [conversions, setConversions] = useState<UnitConversionType[]>([initialConversion])
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: {
+      conversions: [initialConversion]
+    }
+  })
+
+  // Functions untuk konversi unit
+  const handleTambahBaris = () => {
+    const newConversion: UnitConversionType = {
+      satuan: '',
+      quantity: 0,
+      unit: '',
+      hargaBeli: 0,
+      hargaJual: 0,
+      isDefault: false
+    }
+    setConversions([...conversions, newConversion])
+  }
+
+  const handleHapusBaris = (index: number) => {
+    if (conversions.length > 1) {
+      const newConversions = conversions.filter((_, i) => i !== index)
+      setConversions(newConversions)
+    }
+  }
+
+  const handleChangeConversion = (index: number, field: keyof UnitConversionType, value: any) => {
+    const newConversions = [...conversions]
+    newConversions[index] = { ...newConversions[index], [field]: value }
+    setConversions(newConversions)
+  }
+
+  const handleToggleDefault = (index: number) => {
+    const newConversions = conversions.map((conversion, i) => ({
+      ...conversion,
+      isDefault: i === index
+    }))
+    setConversions(newConversions)
+  }
+
+  const onSubmit = (data: FormValidateType) => {
+    console.log('Unit conversions:', conversions)
+    if (setData) {
+      setData(conversions)
+    }
+    handleClose()
+  }
+
+  const handleReset = () => {
+    handleClose()
+    setConversions([initialConversion])
+    resetForm({ conversions: [initialConversion] })
+  }
+
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('id-ID').format(value)
+  }
+
+  const parseNumber = (value: string) => {
+    return parseInt(value.replace(/\./g, '')) || 0
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 350, sm: 800 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>Konversi Unit Bahan</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='unit-conversion-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Header Kolom */}
+            <Grid container spacing={2} alignItems='center' className='bg-gray-50 p-3 rounded-lg'>
+              <Grid size={2}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Satuan
+                </Typography>
+              </Grid>
+              <Grid size={1} className='text-center'>
+                <Typography variant='body2' fontWeight='medium'>
+                  =
+                </Typography>
+              </Grid>
+              <Grid size={1.5}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Jumlah
+                </Typography>
+              </Grid>
+              <Grid size={1.5}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Unit
+                </Typography>
+              </Grid>
+              <Grid size={2}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Harga Beli
+                </Typography>
+              </Grid>
+              <Grid size={2}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Harga Jual
+                </Typography>
+              </Grid>
+              <Grid size={1}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Default
+                </Typography>
+              </Grid>
+              <Grid size={1}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Action
+                </Typography>
+              </Grid>
+            </Grid>
+
+            {/* Baris Konversi */}
+            {conversions.map((conversion, index) => (
+              <Grid container spacing={2} alignItems='center' key={index} className='py-2'>
+                <Grid size={0.5}>
+                  <Typography variant='body2' color='text.secondary'>
+                    {index + 1}
+                  </Typography>
+                </Grid>
+
+                {/* Satuan */}
+                <Grid size={1.5}>
+                  <CustomTextField
+                    select
+                    fullWidth
+                    size='small'
+                    value={conversion.satuan}
+                    onChange={e => handleChangeConversion(index, 'satuan', e.target.value)}
+                  >
+                    <MenuItem value='Box'>Box</MenuItem>
+                    <MenuItem value='Kg'>Kg</MenuItem>
+                    <MenuItem value='Liter'>Liter</MenuItem>
+                    <MenuItem value='Pack'>Pack</MenuItem>
+                    <MenuItem value='Pcs'>Pcs</MenuItem>
+                  </CustomTextField>
+                </Grid>
+
+                {/* Tanda sama dengan */}
+                <Grid size={1} className='text-center'>
+                  <Typography variant='h6'>=</Typography>
+                </Grid>
+
+                {/* Quantity */}
+                <Grid size={1.5}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    type='number'
+                    value={conversion.quantity}
+                    onChange={e => handleChangeConversion(index, 'quantity', parseInt(e.target.value) || 0)}
+                  />
+                </Grid>
+
+                {/* Unit */}
+                <Grid size={1.5}>
+                  <CustomTextField
+                    select
+                    fullWidth
+                    size='small'
+                    value={conversion.unit}
+                    onChange={e => handleChangeConversion(index, 'unit', e.target.value)}
+                  >
+                    <MenuItem value='Pcs'>Pcs</MenuItem>
+                    <MenuItem value='Kg'>Kg</MenuItem>
+                    <MenuItem value='Gram'>Gram</MenuItem>
+                    <MenuItem value='Liter'>Liter</MenuItem>
+                    <MenuItem value='ML'>ML</MenuItem>
+                  </CustomTextField>
+                </Grid>
+
+                {/* Harga Beli */}
+                <Grid size={2}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={formatNumber(conversion.hargaBeli)}
+                    onChange={e => handleChangeConversion(index, 'hargaBeli', parseNumber(e.target.value))}
+                  />
+                </Grid>
+
+                {/* Harga Jual */}
+                <Grid size={2}>
+                  <CustomTextField
+                    fullWidth
+                    size='small'
+                    value={formatNumber(conversion.hargaJual)}
+                    onChange={e => handleChangeConversion(index, 'hargaJual', parseNumber(e.target.value))}
+                  />
+                </Grid>
+
+                {/* Default Star */}
+                <Grid size={1} className='text-center'>
+                  <IconButton
+                    size='small'
+                    onClick={() => handleToggleDefault(index)}
+                    sx={{
+                      color: conversion.isDefault ? 'warning.main' : 'grey.400'
+                    }}
+                  >
+                    <i className={conversion.isDefault ? 'tabler-star-filled' : 'tabler-star'} />
+                  </IconButton>
+                </Grid>
+
+                {/* Delete Button */}
+                <Grid size={1} className='text-center'>
+                  {conversions.length > 1 && (
+                    <IconButton
+                      size='small'
+                      onClick={() => handleHapusBaris(index)}
+                      sx={{
+                        color: 'error.main',
+                        border: 1,
+                        borderColor: 'error.main',
+                        '&:hover': {
+                          backgroundColor: 'error.light',
+                          borderColor: 'error.main'
+                        }
+                      }}
+                    >
+                      <i className='tabler-trash' />
+                    </IconButton>
+                  )}
+                </Grid>
+              </Grid>
+            ))}
+
+            {/* Tambah Baris Button */}
+            <div className='flex items-center justify-start'>
+              <Button
+                variant='outlined'
+                startIcon={<i className='tabler-plus' />}
+                onClick={handleTambahBaris}
+                sx={{
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
+                  '&:hover': {
+                    backgroundColor: 'primary.light',
+                    borderColor: 'primary.main'
+                  }
+                }}
+              >
+                Tambah baris
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='unit-conversion-form'>
+            Simpan
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default IngedientUnitConversionDrawer
diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
index 823b0d2..05f4784 100644
--- a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
+++ b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
@@ -1,37 +1,68 @@
-import React from 'react'
+'use client'
+import React, { useState } from 'react'
 import { Card, CardContent, CardHeader, Typography, Button, Box, Stack } from '@mui/material'
+import IngedientUnitConversionDrawer from './IngedientUnitConversionDrawer' // Sesuaikan dengan path file Anda
 
 const IngredientDetailUnit = () => {
-  return (
-    <Card sx={{ maxWidth: 400 }}>
-      <CardHeader title='Satuan' />
-      <CardContent>
-        <Stack spacing={2} sx={{ mb: 3 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography variant='body1' color='text.secondary'>
-              Satuan Dasar
-            </Typography>
-            <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
-              : Pcs
-            </Typography>
-          </Box>
-        </Stack>
+  // State untuk mengontrol drawer
+  const [openConversionDrawer, setOpenConversionDrawer] = useState(false)
 
-        <Button
-          variant='contained'
-          fullWidth
-          startIcon={<span style={{ fontSize: '18px' }}>+</span>}
-          sx={{
-            py: 1.5,
-            borderRadius: 2,
-            textTransform: 'none',
-            fontSize: '16px'
-          }}
-        >
-          Ubah konversi satuan
-        </Button>
-      </CardContent>
-    </Card>
+  // Function untuk membuka drawer
+  const handleOpenConversionDrawer = () => {
+    setOpenConversionDrawer(true)
+  }
+
+  // Function untuk menutup drawer
+  const handleCloseConversionDrawer = () => {
+    setOpenConversionDrawer(false)
+  }
+
+  // Function untuk handle data dari drawer (opsional)
+  const handleSetConversionData = (data: any) => {
+    console.log('Conversion data received:', data)
+    // Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
+  }
+
+  return (
+    <>
+      <Card sx={{ maxWidth: 400 }}>
+        <CardHeader title='Satuan' />
+        <CardContent>
+          <Stack spacing={2} sx={{ mb: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography variant='body1' color='text.secondary'>
+                Satuan Dasar
+              </Typography>
+              <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                : Pcs
+              </Typography>
+            </Box>
+          </Stack>
+
+          <Button
+            variant='contained'
+            fullWidth
+            startIcon={<span style={{ fontSize: '18px' }}>+</span>}
+            onClick={handleOpenConversionDrawer}
+            sx={{
+              py: 1.5,
+              borderRadius: 2,
+              textTransform: 'none',
+              fontSize: '16px'
+            }}
+          >
+            Ubah konversi satuan
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Ingredient Unit Conversion Drawer */}
+      <IngedientUnitConversionDrawer
+        open={openConversionDrawer}
+        handleClose={handleCloseConversionDrawer}
+        setData={handleSetConversionData}
+      />
+    </>
   )
 }
 

From b3a41fe0e08a69522135ae0763f227e3102694c8 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 16:55:18 +0700
Subject: [PATCH 34/42] Ingredient Detail Stock Adjustment Drawer

---
 .../IngredientDetailStockAdjustmentDrawer.tsx | 454 ++++++++++++++++++
 .../products/ingredient/detail/index.tsx      |  64 ++-
 2 files changed, 511 insertions(+), 7 deletions(-)
 create mode 100644 src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx

diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx
new file mode 100644
index 0000000..216e1e9
--- /dev/null
+++ b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx
@@ -0,0 +1,454 @@
+'use client'
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+import Box from '@mui/material/Box'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import FormControl from '@mui/material/FormControl'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  setData?: (data: any) => void
+}
+
+type StockAdjustmentType = {
+  tipeStok: 'perhitungan' | 'stokMasukKeluar'
+  gudang: string
+  tanggal: string
+  akun: string
+  nomor: string
+  referensi: string
+  tag: string
+  qtyTercatat: number
+  satuan: string
+  qtyAktual: number
+  selisih: number
+  hargaRataRata: number
+}
+
+type FormValidateType = StockAdjustmentType
+
+// Vars
+const initialData: StockAdjustmentType = {
+  tipeStok: 'perhitungan',
+  gudang: '',
+  tanggal: '11/09/2025',
+  akun: '8-80100 Penyesuaian Persediaan',
+  nomor: 'SA/00007',
+  referensi: '',
+  tag: '',
+  qtyTercatat: 0,
+  satuan: 'Pcs',
+  qtyAktual: 0,
+  selisih: 0,
+  hargaRataRata: 0
+}
+
+const IngredientDetailStockAdjustmentDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, setData } = props
+
+  // States
+  const [formData, setFormData] = useState<StockAdjustmentType>(initialData)
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  // Watch values untuk kalkulasi otomatis
+  const qtyTercatat = watch('qtyTercatat')
+  const qtyAktual = watch('qtyAktual')
+
+  // Kalkulasi selisih otomatis
+  useEffect(() => {
+    const selisih = qtyAktual - qtyTercatat
+    setValue('selisih', selisih)
+  }, [qtyTercatat, qtyAktual, setValue])
+
+  const onSubmit = (data: FormValidateType) => {
+    console.log('Stock adjustment data:', data)
+    if (setData) {
+      setData(data)
+    }
+    handleClose()
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+    setFormData(initialData)
+  }
+
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('id-ID').format(value)
+  }
+
+  const parseNumber = (value: string) => {
+    return parseInt(value.replace(/\./g, '')) || 0
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 400, sm: 600 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>Penyesuaian Stok</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='stock-adjustment-form' onSubmit={handleSubmit(data => onSubmit(data))}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Tipe Penyesuaian Stok */}
+            <div>
+              <Typography variant='body2' className='mb-3' sx={{ color: 'error.main' }}>
+                * Tipe penyesuaian stok
+              </Typography>
+              <Controller
+                name='tipeStok'
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <FormControl component='fieldset'>
+                    <RadioGroup {...field} row sx={{ gap: 4 }}>
+                      <FormControlLabel
+                        value='perhitungan'
+                        control={<Radio />}
+                        label={
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Typography>Perhitungan Stok</Typography>
+                            <IconButton size='small' sx={{ color: 'text.secondary' }}>
+                              <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                            </IconButton>
+                          </Box>
+                        }
+                      />
+                      <FormControlLabel
+                        value='stokMasukKeluar'
+                        control={<Radio />}
+                        label={
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Typography>Stok Masuk / Keluar</Typography>
+                            <IconButton size='small' sx={{ color: 'text.secondary' }}>
+                              <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                            </IconButton>
+                          </Box>
+                        }
+                      />
+                    </RadioGroup>
+                  </FormControl>
+                )}
+              />
+            </div>
+
+            {/* Gudang dan Tanggal */}
+            <Grid container spacing={4}>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
+                  * Gudang
+                </Typography>
+                <Controller
+                  name='gudang'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      select
+                      fullWidth
+                      placeholder='Pilih gudang'
+                      {...(errors.gudang && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    >
+                      <MenuItem value=''>Pilih gudang</MenuItem>
+                      <MenuItem value='Gudang Utama'>Gudang Utama</MenuItem>
+                      <MenuItem value='Gudang Cabang'>Gudang Cabang</MenuItem>
+                      <MenuItem value='Gudang Produksi'>Gudang Produksi</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
+                  * Tanggal
+                </Typography>
+                <Controller
+                  name='tanggal'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      fullWidth
+                      type='date'
+                      {...(errors.tanggal && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    />
+                  )}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Akun dan Nomor */}
+            <Grid container spacing={4}>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
+                  * Akun
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='akun'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      select
+                      fullWidth
+                      {...(errors.akun && { error: true, helperText: 'Field ini wajib diisi.' })}
+                    >
+                      <MenuItem value='8-80100 Penyesuaian Persediaan'>8-80100 Penyesuaian Persediaan</MenuItem>
+                      <MenuItem value='8-80200 Penyesuaian Stok Rusak'>8-80200 Penyesuaian Stok Rusak</MenuItem>
+                      <MenuItem value='8-80300 Penyesuaian Stok Hilang'>8-80300 Penyesuaian Stok Hilang</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2'>
+                  Nomor
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='nomor'
+                  control={control}
+                  render={({ field }) => <CustomTextField {...field} fullWidth placeholder='SA/00007' />}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Referensi dan Tag */}
+            <Grid container spacing={4}>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2'>
+                  Referensi
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='referensi'
+                  control={control}
+                  render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Referensi' />}
+                />
+              </Grid>
+              <Grid size={6}>
+                <Typography variant='body2' className='mb-2'>
+                  Tag
+                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
+                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
+                  </IconButton>
+                </Typography>
+                <Controller
+                  name='tag'
+                  control={control}
+                  render={({ field }) => (
+                    <CustomTextField {...field} select fullWidth placeholder='Pilih Tag'>
+                      <MenuItem value=''>Pilih Tag</MenuItem>
+                      <MenuItem value='Urgent'>Urgent</MenuItem>
+                      <MenuItem value='Regular'>Regular</MenuItem>
+                      <MenuItem value='Maintenance'>Maintenance</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+            </Grid>
+
+            {/* Stock Details Section */}
+            <Box sx={{ mt: 4 }}>
+              <Grid container spacing={2} alignItems='end'>
+                {/* Qty Tercatat */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Qty Tercatat
+                  </Typography>
+                  <Controller
+                    name='qtyTercatat'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        type='number'
+                        onChange={e => field.onChange(parseInt(e.target.value) || 0)}
+                      />
+                    )}
+                  />
+                </Grid>
+
+                {/* Satuan */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Satuan
+                  </Typography>
+                  <Controller
+                    name='satuan'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField {...field} select fullWidth>
+                        <MenuItem value='Pcs'>Pcs</MenuItem>
+                        <MenuItem value='Kg'>Kg</MenuItem>
+                        <MenuItem value='Liter'>Liter</MenuItem>
+                        <MenuItem value='Box'>Box</MenuItem>
+                      </CustomTextField>
+                    )}
+                  />
+                </Grid>
+
+                {/* Qty Aktual */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Qty Aktual
+                  </Typography>
+                  <Controller
+                    name='qtyAktual'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        type='number'
+                        onChange={e => field.onChange(parseInt(e.target.value) || 0)}
+                      />
+                    )}
+                  />
+                </Grid>
+
+                {/* Selisih */}
+                <Grid size={2}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Selisih
+                  </Typography>
+                  <Controller
+                    name='selisih'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        type='number'
+                        disabled
+                        sx={{
+                          '& .MuiInputBase-input.Mui-disabled': {
+                            WebkitTextFillColor: 'text.primary',
+                            backgroundColor: 'grey.100'
+                          }
+                        }}
+                      />
+                    )}
+                  />
+                </Grid>
+
+                {/* Harga Rata-rata */}
+                <Grid size={4}>
+                  <Typography variant='body2' className='mb-2 font-medium'>
+                    Harga Rata-rata
+                  </Typography>
+                  <Controller
+                    name='hargaRataRata'
+                    control={control}
+                    render={({ field }) => (
+                      <CustomTextField
+                        {...field}
+                        fullWidth
+                        value={formatNumber(field.value)}
+                        onChange={e => field.onChange(parseNumber(e.target.value))}
+                      />
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Box>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='stock-adjustment-form'>
+            Simpan
+          </Button>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
+            Batal
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default IngredientDetailStockAdjustmentDrawer
diff --git a/src/views/apps/ecommerce/products/ingredient/detail/index.tsx b/src/views/apps/ecommerce/products/ingredient/detail/index.tsx
index 88c1d81..d3b4ccf 100644
--- a/src/views/apps/ecommerce/products/ingredient/detail/index.tsx
+++ b/src/views/apps/ecommerce/products/ingredient/detail/index.tsx
@@ -1,17 +1,67 @@
+'use client'
+
+import { useState } from 'react'
 import Grid from '@mui/material/Grid2'
 import IngredientDetailInfo from './IngredientDetailInfo'
 import IngredientDetailUnit from './IngredientDetailUnit'
+import IngredientDetailStockAdjustmentDrawer from './IngredientDetailStockAdjustmentDrawer' // Sesuaikan dengan path file Anda
+import { Button } from '@mui/material'
 
 const IngredientDetail = () => {
+  // State untuk mengontrol stock adjustment drawer
+  const [openStockAdjustmentDrawer, setOpenStockAdjustmentDrawer] = useState(false)
+
+  // Function untuk membuka stock adjustment drawer
+  const handleOpenStockAdjustmentDrawer = () => {
+    setOpenStockAdjustmentDrawer(true)
+  }
+
+  // Function untuk menutup stock adjustment drawer
+  const handleCloseStockAdjustmentDrawer = () => {
+    setOpenStockAdjustmentDrawer(false)
+  }
+
+  // Function untuk handle data dari stock adjustment drawer
+  const handleSetStockAdjustmentData = (data: any) => {
+    console.log('Stock adjustment data received:', data)
+    // Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
+    // Misalnya: update stock data, refresh ingredient data, dll.
+  }
+
   return (
-    <Grid container spacing={6}>
-      <Grid size={{ xs: 12, lg: 8, md: 7 }}>
-        <IngredientDetailInfo />
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+          <IngredientDetailInfo />
+        </Grid>
+        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+          <Button
+            variant='contained'
+            fullWidth
+            startIcon={<span style={{ fontSize: '18px' }}>+</span>}
+            onClick={handleOpenStockAdjustmentDrawer}
+            className='mb-4'
+            sx={{
+              py: 1.5,
+              borderRadius: 2,
+              textTransform: 'none',
+              fontSize: '16px',
+              mb: 3 // Menambahkan margin bottom untuk spacing
+            }}
+          >
+            Penyesuaian Stok
+          </Button>
+          <IngredientDetailUnit />
+        </Grid>
       </Grid>
-      <Grid size={{ xs: 12, lg: 4, md: 5 }}>
-        <IngredientDetailUnit />
-      </Grid>
-    </Grid>
+
+      {/* Stock Adjustment Drawer */}
+      <IngredientDetailStockAdjustmentDrawer
+        open={openStockAdjustmentDrawer}
+        handleClose={handleCloseStockAdjustmentDrawer}
+        setData={handleSetStockAdjustmentData}
+      />
+    </>
   )
 }
 

From a1d23cad9ef4b7b0ba2b5caa389ade6b3f102522 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 17:57:00 +0700
Subject: [PATCH 35/42] Report Cash Flow

---
 .../(private)/apps/report/cash-flow/page.tsx  |  22 ++++
 src/components/report/ReportItem.tsx          | 101 ++++++++++++++++
 src/components/report/ReportTitle.tsx         |  27 +++++
 src/views/apps/report/ReportFinancialList.tsx |  18 ++-
 .../apps/report/cash-flow/ReportCashCard.tsx  |  62 ++++++++++
 .../cash-flow/ReportCashFlowContent.tsx       | 113 ++++++++++++++++++
 6 files changed, 339 insertions(+), 4 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx
 create mode 100644 src/components/report/ReportItem.tsx
 create mode 100644 src/components/report/ReportTitle.tsx
 create mode 100644 src/views/apps/report/cash-flow/ReportCashCard.tsx
 create mode 100644 src/views/apps/report/cash-flow/ReportCashFlowContent.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx
new file mode 100644
index 0000000..41d04bf
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx
@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportCashCard from '@/views/apps/report/cash-flow/ReportCashCard'
+import ReportCashFlowContent from '@/views/apps/report/cash-flow/ReportCashFlowContent'
+import Grid from '@mui/material/Grid2'
+
+const CashFlowPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Arus Kas' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportCashCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportCashFlowContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CashFlowPage
diff --git a/src/components/report/ReportItem.tsx b/src/components/report/ReportItem.tsx
new file mode 100644
index 0000000..bfa61ec
--- /dev/null
+++ b/src/components/report/ReportItem.tsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { Box, Typography, Paper } from '@mui/material'
+
+// Types
+type ReportItemHeaderProps = {
+  title: string
+  date: string
+}
+
+type ReportItemSubheaderProps = {
+  title: string
+}
+
+type ReportItemProps = {
+  accountCode: string
+  accountName: string
+  amount: number
+  onClick?: () => void
+  isSubtitle?: boolean
+}
+
+type ReportItemFooterProps = {
+  title: string
+  amount: number
+  children?: React.ReactNode
+}
+
+// Helper function to format currency
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('id-ID', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(amount)
+}
+
+// ReportItemHeader Component
+export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date }) => {
+  return (
+    <Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
+      <Typography variant='h6' className='text-primary font-semibold'>
+        {title}
+      </Typography>
+      <Typography variant='body1' className='text-primary font-medium'>
+        {date}
+      </Typography>
+    </Box>
+  )
+}
+
+// ReportItemSubheader Component
+export const ReportItemSubheader: React.FC<ReportItemSubheaderProps> = ({ title }) => {
+  return (
+    <Box className='px-6 py-3 bg-white border-b border-gray-300 hover:bg-gray-50 transition-colors'>
+      <Typography variant='subtitle1' className='font-semibold text-gray-900'>
+        {title}
+      </Typography>
+    </Box>
+  )
+}
+
+// ReportItem Component
+export const ReportItem: React.FC<ReportItemProps> = ({
+  accountCode,
+  accountName,
+  amount,
+  onClick,
+  isSubtitle = true
+}) => {
+  return (
+    <Box
+      onClick={onClick}
+      className={`px-6 py-3 flex justify-between items-center bg-white border-b border-gray-300 transition-all duration-200 ease-in-out ${
+        onClick ? 'cursor-pointer hover:bg-gray-50' : 'cursor-default'
+      }`}
+    >
+      <Typography variant='body1' className={`text-gray-900 font-normal ${isSubtitle ? 'ml-4' : ''}`}>
+        {accountCode} {accountName}
+      </Typography>
+      <Typography variant='body1' className='text-primary font-medium text-right'>
+        {formatCurrency(amount)}
+      </Typography>
+    </Box>
+  )
+}
+
+// ReportItemFooter Component
+export const ReportItemFooter: React.FC<ReportItemFooterProps> = ({ title, amount, children }) => {
+  return (
+    <Box className='px-6 py-4 border-b border-gray-300 hover:bg-gray-50 transition-colors'>
+      <Box className='flex justify-between items-center'>
+        <Typography variant='subtitle1' className='font-bold text-gray-900'>
+          {title}
+        </Typography>
+        <Typography variant='subtitle1' className='text-primary font-bold text-right'>
+          {formatCurrency(amount)}
+        </Typography>
+      </Box>
+      {children && <Box className='mt-2'>{children}</Box>}
+    </Box>
+  )
+}
diff --git a/src/components/report/ReportTitle.tsx b/src/components/report/ReportTitle.tsx
new file mode 100644
index 0000000..534f107
--- /dev/null
+++ b/src/components/report/ReportTitle.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+interface Props {
+  title: string
+}
+
+const ReportTitle = ({ title }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+interface Props {
+  title: string
+}
+
+export default ReportTitle
diff --git a/src/views/apps/report/ReportFinancialList.tsx b/src/views/apps/report/ReportFinancialList.tsx
index 1dd7385..0851ed9 100644
--- a/src/views/apps/report/ReportFinancialList.tsx
+++ b/src/views/apps/report/ReportFinancialList.tsx
@@ -1,20 +1,30 @@
+'use client'
+
 import { Container, Typography } from '@mui/material'
 import Grid from '@mui/material/Grid2'
 import ReportCard from './ReportCard'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 const ReportFinancialList: React.FC = () => {
+  const { lang: locale } = useParams()
+
   const financialReports = [
     {
       title: 'Arus Kas',
-      iconClass: 'tabler-cash'
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
     },
     {
       title: 'Laba Rugi',
-      iconClass: 'tabler-cash'
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
     },
     {
       title: 'Neraca',
-      iconClass: 'tabler-cash'
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/nerace`, locale as Locale)
     }
   ]
 
@@ -27,7 +37,7 @@ const ReportFinancialList: React.FC = () => {
       <Grid container spacing={3}>
         {financialReports.map((report, index) => (
           <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
-            <ReportCard title={report.title} avatarIcon={report.iconClass} />
+            <ReportCard title={report.title} avatarIcon={report.iconClass} href={report.link} />
           </Grid>
         ))}
       </Grid>
diff --git a/src/views/apps/report/cash-flow/ReportCashCard.tsx b/src/views/apps/report/cash-flow/ReportCashCard.tsx
new file mode 100644
index 0000000..b44195f
--- /dev/null
+++ b/src/views/apps/report/cash-flow/ReportCashCard.tsx
@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'Quick Ratio',
+    stats: '2,4',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Target 0,2',
+    subtitle: 'Hari Ini'
+  },
+  {
+    title: 'Current Ratio',
+    stats: '1,09',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '7,6%',
+    subtitle: 'vs bulan sebelumnya'
+  },
+  {
+    title: 'Debt Equity Ratio',
+    stats: '0',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '0%',
+    subtitle: 'vs bulan sebelumnya'
+  },
+  {
+    title: 'Equity Ratio',
+    stats: '0,65',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '4,4%',
+    subtitle: 'vs bulan sebelumnya'
+  }
+]
+
+const ReportCashCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default ReportCashCard
diff --git a/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx b/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx
new file mode 100644
index 0000000..5606849
--- /dev/null
+++ b/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { Button, Card, CardContent, Paper } from '@mui/material'
+import { useState } from 'react'
+
+const ReportCashFlowContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            className='max-sm:is-full'
+          >
+            Ekspor
+          </Button>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader title='Aset' date='11/09/2025' />
+        <ReportItemSubheader title='Kas & Bank' />
+        <ReportItem accountCode='1-10001' accountName='Kas' amount={39705850} onClick={() => {}} />
+        <ReportItem accountCode='1-10002' accountName='Rekening Bank' amount={33335787} onClick={() => {}} />
+        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
+        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
+        <ReportItemFooter title='Total Kas & Bank' amount={103672897} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Aset Lancar' />
+        <ReportItem accountCode='1-10100' accountName='Piutang Usaha' amount={49601559} onClick={() => {}} />
+        <ReportItem accountCode='1-10102' accountName='Cadangan Kerugian Piutang' amount={5930450} onClick={() => {}} />
+        <ReportItem accountCode='1-10200' accountName='Persediaan Barang' amount={14536046} onClick={() => {}} />
+        <ReportItem accountCode='1-10402' accountName='Biaya Dibayar Di Muka' amount={-77477} onClick={() => {}} />
+        <ReportItem accountCode='1-10500' accountName='PPN Masukan' amount={4559934} onClick={() => {}} />
+        <ReportItem
+          accountCode='1-10501'
+          accountName='Pajak Dibayar Di Muka - PPh 22'
+          amount={-21622}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Total Aset Lancar' amount={74528890} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Aset Tetap' />
+        <ReportItem accountCode='1-10700' accountName='Aset Tetap - Tanah' amount={17900000} onClick={() => {}} />
+        <ReportItem accountCode='1-10701' accountName='Aset Tetap - Bangunan' amount={-21622} onClick={() => {}} />
+        <ReportItemFooter title='Total Aset Tetap' amount={17878378} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Depresiasi & Amortisasi' />
+        <ReportItem
+          accountCode='1-10753'
+          accountName='Akumulasi penyusutan - Kendaraan'
+          amount={-45946}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='1-10757' accountName='Akumulasi Amortisasi' amount={19820} onClick={() => {}} />
+        <ReportItemFooter title='Total Depresiasi & Amortisasi' amount={-26126} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Lainnya' />
+        <ReportItemFooter title='Total Lainnya' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemFooter title='Total Aset' amount={196054040} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Liabilities and Modal' date='11/09/2025' />
+        <ReportItemSubheader title='Liabilitas Jangka Pendek' />
+        <ReportItem accountCode='2-20100' accountName='Hutang Usaha' amount={43333108} onClick={() => {}} />
+        <ReportItem accountCode='2-20101' accountName='Hutang Belum Ditagih' amount={10367721} onClick={() => {}} />
+        <ReportItem accountCode='2-20500' accountName='PPN Keluaran' amount={14933183} onClick={() => {}} />
+        <ReportItemFooter title='Total Liabilitas Jangka Pendek' amount={68634012} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Liabilitas Jangka Panjang' />
+        <ReportItemFooter title='Total Liabilitas Jangka Panjang' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Perubahan Modal' />
+        <ReportItem accountCode='3-30000' accountName='Modal Saham' amount={83665766} onClick={() => {}} />
+        <ReportItem
+          accountCode='3-30300'
+          accountName='Pendapatan Komprehensif Lainnya'
+          amount={-78378}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='' accountName='Pendapatan sampai periode terakhir' amount={0} onClick={() => {}} />
+        <ReportItem accountCode='' accountName='Pendapatan periode ini' amount={43832641} onClick={() => {}} />
+        <ReportItemFooter title='Total Perubahan Modal' amount={127420028} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemFooter title='Total Liabilitas and Modal' amount={196054040} />
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportCashFlowContent

From f2eb142dec69d9e65f6d5534f18bb887e2a580e1 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 18:20:40 +0700
Subject: [PATCH 36/42] Report Profit Loss

---
 .../apps/report/profit-loss/page.tsx          |  22 ++++
 .../HorizontalWithSubtitle.tsx                |   2 +-
 src/components/report/ReportItem.tsx          |   7 +-
 .../profit-loss/ReportProfitLossCard.tsx      |  98 +++++++++++++++
 .../profit-loss/ReportProfitLossContent.tsx   | 117 ++++++++++++++++++
 5 files changed, 242 insertions(+), 4 deletions(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx
 create mode 100644 src/views/apps/report/profit-loss/ReportProfitLossCard.tsx
 create mode 100644 src/views/apps/report/profit-loss/ReportProfitLossContent.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx
new file mode 100644
index 0000000..93c519a
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/profit-loss/page.tsx
@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportProfitLossCard from '@/views/apps/report/profit-loss/ReportProfitLossCard'
+import ReportProfitLossContent from '@/views/apps/report/profit-loss/ReportProfitLossContent'
+import Grid from '@mui/material/Grid2'
+
+const ProfiltLossPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Laba Rugi' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportProfitLossContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ProfiltLossPage
diff --git a/src/components/card-statistics/HorizontalWithSubtitle.tsx b/src/components/card-statistics/HorizontalWithSubtitle.tsx
index af663b5..2797957 100644
--- a/src/components/card-statistics/HorizontalWithSubtitle.tsx
+++ b/src/components/card-statistics/HorizontalWithSubtitle.tsx
@@ -32,7 +32,7 @@ const HorizontalWithSubtitle = (props: UserDataType) => {
         <div className='flex flex-col gap-1 flex-grow'>
           <Typography color='text.primary'>{title}</Typography>
           <div className='flex items-center gap-2 flex-wrap'>
-            <Typography variant='h4'>{stats}</Typography>
+            <Typography variant='h5'>{stats}</Typography>
             <Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
               {`(${trend === 'negative' ? '-' : '+'}${trendNumber})`}
             </Typography>
diff --git a/src/components/report/ReportItem.tsx b/src/components/report/ReportItem.tsx
index bfa61ec..42c570f 100644
--- a/src/components/report/ReportItem.tsx
+++ b/src/components/report/ReportItem.tsx
@@ -4,7 +4,8 @@ import { Box, Typography, Paper } from '@mui/material'
 // Types
 type ReportItemHeaderProps = {
   title: string
-  date: string
+  date?: string
+  amount?: number
 }
 
 type ReportItemSubheaderProps = {
@@ -34,14 +35,14 @@ const formatCurrency = (amount: number) => {
 }
 
 // ReportItemHeader Component
-export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date }) => {
+export const ReportItemHeader: React.FC<ReportItemHeaderProps> = ({ title, date, amount }) => {
   return (
     <Box className='bg-slate-200 px-6 py-4 flex justify-between items-center'>
       <Typography variant='h6' className='text-primary font-semibold'>
         {title}
       </Typography>
       <Typography variant='body1' className='text-primary font-medium'>
-        {date}
+        {amount ? formatCurrency(amount) : date}
       </Typography>
     </Box>
   )
diff --git a/src/views/apps/report/profit-loss/ReportProfitLossCard.tsx b/src/views/apps/report/profit-loss/ReportProfitLossCard.tsx
new file mode 100644
index 0000000..a114637
--- /dev/null
+++ b/src/views/apps/report/profit-loss/ReportProfitLossCard.tsx
@@ -0,0 +1,98 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'Pendapatan',
+    stats: '29.004.775',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '48,8%',
+    subtitle: 'vs Bulan Lalu'
+  },
+  {
+    title: 'Margin Laba Bersih',
+    stats: '38%',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Bulan Ini',
+    subtitle: 'Bulan Ini'
+  },
+  {
+    title: 'Laba Kotor',
+    stats: '21.076.389',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '43,5%',
+    subtitle: 'vs bulan lalu'
+  },
+  {
+    title: 'Laba Bersih',
+    stats: '11.111.074',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '36,8%',
+    subtitle: 'vs bulan lalu'
+  },
+  {
+    title: 'Margin Laba Kotor',
+    stats: '73%',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Bulan Ini',
+    subtitle: 'Bulan Ini'
+  },
+  {
+    title: 'Biaya Operasional',
+    stats: '9.965.315',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '49,4%',
+    subtitle: 'vs Bulan Lalu'
+  },
+  {
+    title: 'Rasio Biaya Operasional',
+    stats: '61,7%',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Bulan Ini',
+    subtitle: 'Bulan Ini'
+  },
+  {
+    title: 'EBITDA',
+    stats: '11.032.696',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '37,3%',
+    subtitle: 'vs bulan lalu'
+  }
+]
+
+const ReportProfitLossCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default ReportProfitLossCard
diff --git a/src/views/apps/report/profit-loss/ReportProfitLossContent.tsx b/src/views/apps/report/profit-loss/ReportProfitLossContent.tsx
new file mode 100644
index 0000000..8bb09ee
--- /dev/null
+++ b/src/views/apps/report/profit-loss/ReportProfitLossContent.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { Button, Card, CardContent, Paper } from '@mui/material'
+import { useState } from 'react'
+
+const ReportProfitLossContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            className='max-sm:is-full'
+          >
+            Ekspor
+          </Button>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader title='Pendapatan' date='10/09/2025' />
+        <ReportItemSubheader title='Penjualan' />
+        <ReportItem accountCode='4-40000' accountName='Pendapatan' amount={116791108} onClick={() => {}} />
+        <ReportItemSubheader title='Penghasilan lain' />
+        <ReportItem
+          accountCode='7-70001'
+          accountName='Pendapatan Bunga - Deposito'
+          amount={-86486}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='7-70099' accountName='Pendapatan Lain - lain' amount={54054} onClick={() => {}} />
+        <ReportItem
+          accountCode='7-70100'
+          accountName='Pendapatan lainnya (Service Charge)'
+          amount={-15315}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Total Pendapatan' amount={116743360} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Beban Pokok Penjualan' date='10/09/2025' />
+        <ReportItem accountCode='5-50000' accountName='Beban Pokok Pendapatan' amount={35018079} onClick={() => {}} />
+        <ReportItem accountCode='5-50300' accountName='Pengiriman & Pengangkutan' amount={-15315} onClick={() => {}} />
+        <ReportItemFooter title='Total Beban Pokok Penjualan' amount={35002764} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Laba Kotor' amount={81740597} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Biaya Operasional' date='10/09/2025' />
+        <ReportItemSubheader title='Biaya Operasional' />
+        <ReportItem accountCode='6-60218' accountName='Air' amount={15315} onClick={() => {}} />
+        <ReportItem
+          accountCode='6-60301'
+          accountName='Alat Tulis Kantor & Printing'
+          amount={-19820}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='6-60302' accountName='Bea Materai' amount={-40541} onClick={() => {}} />
+        <ReportItem
+          accountCode='6-60003'
+          accountName='Bensin, Tol dan Parkir - Penjualan'
+          amount={6264865}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='6-60401' accountName='Biaya Sewa - Kendaraan' amount={62162} onClick={() => {}} />
+        <ReportItem accountCode='6-60403' accountName='Biaya Sewa - Lain - lain' amount={63964} onClick={() => {}} />
+        <ReportItem accountCode='6-60402' accountName='Biaya Sewa - Operasional' amount={-2703} onClick={() => {}} />
+        <ReportItem accountCode='6-60101' accountName='Gaji' amount={6306} onClick={() => {}} />
+        <ReportItem accountCode='6-60001' accountName='Iklan & Promosi' amount={7851892} onClick={() => {}} />
+        <ReportItem accountCode='6-60002' accountName='Komisi & Fee' amount={6277748} onClick={() => {}} />
+        <ReportItem accountCode='6-60005' accountName='Komunikasi - Penjualan' amount={12058018} onClick={() => {}} />
+        <ReportItem accountCode='6-60206' accountName='Komunikasi - Umum' amount={85586} onClick={() => {}} />
+        <ReportItem accountCode='6-60500' accountName='Penyusutan - Bangunan' amount={73874} onClick={() => {}} />
+        <ReportItem accountCode='6-60502' accountName='Penyusutan - Kendaraan' amount={-78378} onClick={() => {}} />
+        <ReportItem
+          accountCode='6-60004'
+          accountName='Perjalanan Dinas - Penjualan'
+          amount={6745045}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='6-60204' accountName='Perjalanan Dinas - Umum' amount={-48649} onClick={() => {}} />
+        <ReportItem accountCode='6-60304' accountName='Supplies dan Material' amount={58559} onClick={() => {}} />
+        <ReportItem accountCode='6-60106' accountName='THR & Bonus' amount={-59459} onClick={() => {}} />
+
+        <ReportItemSubheader title='Biaya Lain-Lain' />
+        <ReportItem
+          accountCode='8-80002'
+          accountName='(Laba)/Rugi Pelepasan Aset Tetap'
+          amount={2703}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='8-80999' accountName='Beban Lain - lain' amount={81982} onClick={() => {}} />
+        <ReportItem accountCode='8-80100' accountName='Penyesuaian Persediaan' amount={-1477900} onClick={() => {}} />
+        <ReportItem accountCode='8-80001' accountName='Provisi' amount={-12613} onClick={() => {}} />
+        <ReportItemFooter title='Total Biaya Operasional' amount={37907956} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Laba Bersih' amount={43832641} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportProfitLossContent

From e13fbab56416f1b7aa91602e40710a0ab64a4bea Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 18:29:17 +0700
Subject: [PATCH 37/42] Report Neraca

---
 .../(private)/apps/report/neraca/page.tsx     |  22 ++++
 src/views/apps/report/ReportFinancialList.tsx |   2 +-
 .../apps/report/neraca/ReportNeracaCard.tsx   |  62 ++++++++++
 .../report/neraca/ReportNeracaContent.tsx     | 113 ++++++++++++++++++
 4 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/report/neraca/page.tsx
 create mode 100644 src/views/apps/report/neraca/ReportNeracaCard.tsx
 create mode 100644 src/views/apps/report/neraca/ReportNeracaContent.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/neraca/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/neraca/page.tsx
new file mode 100644
index 0000000..fa21421
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/neraca/page.tsx
@@ -0,0 +1,22 @@
+import ReportTitle from '@/components/report/ReportTitle'
+import ReportNeracaCard from '@/views/apps/report/neraca/ReportNeracaCard'
+import ReportNeracaContent from '@/views/apps/report/neraca/ReportNeracaContent'
+import Grid from '@mui/material/Grid2'
+
+const NeracaPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ReportTitle title='Neraca' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportNeracaCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportNeracaContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default NeracaPage
diff --git a/src/views/apps/report/ReportFinancialList.tsx b/src/views/apps/report/ReportFinancialList.tsx
index 0851ed9..74db207 100644
--- a/src/views/apps/report/ReportFinancialList.tsx
+++ b/src/views/apps/report/ReportFinancialList.tsx
@@ -24,7 +24,7 @@ const ReportFinancialList: React.FC = () => {
     {
       title: 'Neraca',
       iconClass: 'tabler-cash',
-      link: getLocalizedUrl(`/apps/report/nerace`, locale as Locale)
+      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
     }
   ]
 
diff --git a/src/views/apps/report/neraca/ReportNeracaCard.tsx b/src/views/apps/report/neraca/ReportNeracaCard.tsx
new file mode 100644
index 0000000..3a343ab
--- /dev/null
+++ b/src/views/apps/report/neraca/ReportNeracaCard.tsx
@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'Quick Ratio',
+    stats: '2,4',
+    avatarIcon: 'tabler-gauge',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: 'Target 0,2',
+    subtitle: 'Hari Ini'
+  },
+  {
+    title: 'Current Ratio',
+    stats: '1,09',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '7,6%',
+    subtitle: 'vs bulan sebelumnya'
+  },
+  {
+    title: 'Debt Equity Ratio',
+    stats: '0',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '0%',
+    subtitle: 'vs bulan sebelumnya'
+  },
+  {
+    title: 'Equity Ratio',
+    stats: '0,65',
+    avatarIcon: 'tabler-trending-down',
+    avatarColor: 'error',
+    trend: 'negative',
+    trendNumber: '4,4%',
+    subtitle: 'vs bulan sebelumnya'
+  }
+]
+
+const ReportNeracaCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default ReportNeracaCard
diff --git a/src/views/apps/report/neraca/ReportNeracaContent.tsx b/src/views/apps/report/neraca/ReportNeracaContent.tsx
new file mode 100644
index 0000000..63b02a9
--- /dev/null
+++ b/src/views/apps/report/neraca/ReportNeracaContent.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import DateRangePicker from '@/components/RangeDatePicker'
+import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
+import { Button, Card, CardContent, Paper } from '@mui/material'
+import { useState } from 'react'
+
+const ReportNeracaContent = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date())
+  const [endDate, setEndDate] = useState<Date | null>(new Date())
+
+  return (
+    <Card>
+      <div className='p-6 border-be'>
+        <div className='flex items-center justify-end gap-2'>
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            className='max-sm:is-full'
+          >
+            Ekspor
+          </Button>
+          <DateRangePicker
+            startDate={startDate}
+            endDate={endDate}
+            onStartDateChange={setStartDate}
+            onEndDateChange={setEndDate}
+          />
+        </div>
+      </div>
+      <CardContent>
+        <ReportItemHeader title='Aset' date='11/09/2025' />
+        <ReportItemSubheader title='Kas & Bank' />
+        <ReportItem accountCode='1-10001' accountName='Kas' amount={39705850} onClick={() => {}} />
+        <ReportItem accountCode='1-10002' accountName='Rekening Bank' amount={33335787} onClick={() => {}} />
+        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
+        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
+        <ReportItemFooter title='Total Kas & Bank' amount={103672897} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Aset Lancar' />
+        <ReportItem accountCode='1-10100' accountName='Piutang Usaha' amount={49601559} onClick={() => {}} />
+        <ReportItem accountCode='1-10102' accountName='Cadangan Kerugian Piutang' amount={5930450} onClick={() => {}} />
+        <ReportItem accountCode='1-10200' accountName='Persediaan Barang' amount={14536046} onClick={() => {}} />
+        <ReportItem accountCode='1-10402' accountName='Biaya Dibayar Di Muka' amount={-77477} onClick={() => {}} />
+        <ReportItem accountCode='1-10500' accountName='PPN Masukan' amount={4559934} onClick={() => {}} />
+        <ReportItem
+          accountCode='1-10501'
+          accountName='Pajak Dibayar Di Muka - PPh 22'
+          amount={-21622}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Total Aset Lancar' amount={74528890} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Aset Tetap' />
+        <ReportItem accountCode='1-10700' accountName='Aset Tetap - Tanah' amount={17900000} onClick={() => {}} />
+        <ReportItem accountCode='1-10701' accountName='Aset Tetap - Bangunan' amount={-21622} onClick={() => {}} />
+        <ReportItemFooter title='Total Aset Tetap' amount={17878378} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Depresiasi & Amortisasi' />
+        <ReportItem
+          accountCode='1-10753'
+          accountName='Akumulasi penyusutan - Kendaraan'
+          amount={-45946}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='1-10757' accountName='Akumulasi Amortisasi' amount={19820} onClick={() => {}} />
+        <ReportItemFooter title='Total Depresiasi & Amortisasi' amount={-26126} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Lainnya' />
+        <ReportItemFooter title='Total Lainnya' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemFooter title='Total Aset' amount={196054040} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Liabilities and Modal' date='11/09/2025' />
+        <ReportItemSubheader title='Liabilitas Jangka Pendek' />
+        <ReportItem accountCode='2-20100' accountName='Hutang Usaha' amount={43333108} onClick={() => {}} />
+        <ReportItem accountCode='2-20101' accountName='Hutang Belum Ditagih' amount={10367721} onClick={() => {}} />
+        <ReportItem accountCode='2-20500' accountName='PPN Keluaran' amount={14933183} onClick={() => {}} />
+        <ReportItemFooter title='Total Liabilitas Jangka Pendek' amount={68634012} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Liabilitas Jangka Panjang' />
+        <ReportItemFooter title='Total Liabilitas Jangka Panjang' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemSubheader title='Perubahan Modal' />
+        <ReportItem accountCode='3-30000' accountName='Modal Saham' amount={83665766} onClick={() => {}} />
+        <ReportItem
+          accountCode='3-30300'
+          accountName='Pendapatan Komprehensif Lainnya'
+          amount={-78378}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='' accountName='Pendapatan sampai periode terakhir' amount={0} onClick={() => {}} />
+        <ReportItem accountCode='' accountName='Pendapatan periode ini' amount={43832641} onClick={() => {}} />
+        <ReportItemFooter title='Total Perubahan Modal' amount={127420028} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemFooter title='Total Liabilitas and Modal' amount={196054040} />
+        <ReportItemSubheader title='' />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportNeracaContent

From 34442740e22afa875e9df0e2cc5ce21b02221313 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 18:38:27 +0700
Subject: [PATCH 38/42] Report Cash FLow

---
 .../(private)/apps/report/cash-flow/page.tsx  |   4 +-
 .../apps/report/cash-flow/ReportCashCard.tsx  |  62 --------
 .../report/cash-flow/ReportCashFlowCard.tsx   |  62 ++++++++
 .../cash-flow/ReportCashFlowContent.tsx       | 147 ++++++++++--------
 4 files changed, 148 insertions(+), 127 deletions(-)
 delete mode 100644 src/views/apps/report/cash-flow/ReportCashCard.tsx
 create mode 100644 src/views/apps/report/cash-flow/ReportCashFlowCard.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx
index 41d04bf..a544810 100644
--- a/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/apps/report/cash-flow/page.tsx
@@ -1,5 +1,5 @@
 import ReportTitle from '@/components/report/ReportTitle'
-import ReportCashCard from '@/views/apps/report/cash-flow/ReportCashCard'
+import ReportCashFlowCard from '@/views/apps/report/cash-flow/ReportCashFlowCard'
 import ReportCashFlowContent from '@/views/apps/report/cash-flow/ReportCashFlowContent'
 import Grid from '@mui/material/Grid2'
 
@@ -10,7 +10,7 @@ const CashFlowPage = () => {
         <ReportTitle title='Arus Kas' />
       </Grid>
       <Grid size={{ xs: 12 }}>
-        <ReportCashCard />
+        <ReportCashFlowCard />
       </Grid>
       <Grid size={{ xs: 12 }}>
         <ReportCashFlowContent />
diff --git a/src/views/apps/report/cash-flow/ReportCashCard.tsx b/src/views/apps/report/cash-flow/ReportCashCard.tsx
deleted file mode 100644
index b44195f..0000000
--- a/src/views/apps/report/cash-flow/ReportCashCard.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid2'
-
-// Type Imports
-import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
-
-// Component Imports
-import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
-
-// Vars
-const data: UserDataType[] = [
-  {
-    title: 'Quick Ratio',
-    stats: '2,4',
-    avatarIcon: 'tabler-gauge',
-    avatarColor: 'success',
-    trend: 'positive',
-    trendNumber: 'Target 0,2',
-    subtitle: 'Hari Ini'
-  },
-  {
-    title: 'Current Ratio',
-    stats: '1,09',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '7,6%',
-    subtitle: 'vs bulan sebelumnya'
-  },
-  {
-    title: 'Debt Equity Ratio',
-    stats: '0',
-    avatarIcon: 'tabler-trending-up',
-    avatarColor: 'success',
-    trend: 'positive',
-    trendNumber: '0%',
-    subtitle: 'vs bulan sebelumnya'
-  },
-  {
-    title: 'Equity Ratio',
-    stats: '0,65',
-    avatarIcon: 'tabler-trending-down',
-    avatarColor: 'error',
-    trend: 'negative',
-    trendNumber: '4,4%',
-    subtitle: 'vs bulan sebelumnya'
-  }
-]
-
-const ReportCashCard = () => {
-  return (
-    <Grid container spacing={6}>
-      {data.map((item, i) => (
-        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
-          <HorizontalWithSubtitle {...item} />
-        </Grid>
-      ))}
-    </Grid>
-  )
-}
-
-export default ReportCashCard
diff --git a/src/views/apps/report/cash-flow/ReportCashFlowCard.tsx b/src/views/apps/report/cash-flow/ReportCashFlowCard.tsx
new file mode 100644
index 0000000..8c5e707
--- /dev/null
+++ b/src/views/apps/report/cash-flow/ReportCashFlowCard.tsx
@@ -0,0 +1,62 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Component Imports
+import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
+
+// Vars
+const data: UserDataType[] = [
+  {
+    title: 'PERUBAHAN KAS',
+    stats: '14.784.651',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '50,2%',
+    subtitle: 'Bulan Ini vs bulan sebelumnya'
+  },
+  {
+    title: 'SALDO PENUTUPAN',
+    stats: '73.041.637',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '100%',
+    subtitle: 'Bulan Ini vs 1 bulan lalu'
+  },
+  {
+    title: 'KAS KELUAR',
+    stats: '11.484.350',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '93,3%',
+    subtitle: 'Bulan Ini vs bulan sebelumnya'
+  },
+  {
+    title: 'KAS MASUK',
+    stats: '26.269.001',
+    avatarIcon: 'tabler-trending-up',
+    avatarColor: 'success',
+    trend: 'positive',
+    trendNumber: '92,5%',
+    subtitle: 'Bulan Ini vs bulan sebelumnya'
+  }
+]
+
+const ReportCashFlowCard = () => {
+  return (
+    <Grid container spacing={6}>
+      {data.map((item, i) => (
+        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
+          <HorizontalWithSubtitle {...item} />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export default ReportCashFlowCard
diff --git a/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx b/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx
index 5606849..4d96599 100644
--- a/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx
+++ b/src/views/apps/report/cash-flow/ReportCashFlowContent.tsx
@@ -30,80 +30,101 @@ const ReportCashFlowContent = () => {
         </div>
       </div>
       <CardContent>
-        <ReportItemHeader title='Aset' date='11/09/2025' />
-        <ReportItemSubheader title='Kas & Bank' />
-        <ReportItem accountCode='1-10001' accountName='Kas' amount={39705850} onClick={() => {}} />
-        <ReportItem accountCode='1-10002' accountName='Rekening Bank' amount={33335787} onClick={() => {}} />
-        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
-        <ReportItem accountCode='1-10003' accountName='Giro' amount={30631261} onClick={() => {}} />
-        <ReportItemFooter title='Total Kas & Bank' amount={103672897} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemSubheader title='Aset Lancar' />
-        <ReportItem accountCode='1-10100' accountName='Piutang Usaha' amount={49601559} onClick={() => {}} />
-        <ReportItem accountCode='1-10102' accountName='Cadangan Kerugian Piutang' amount={5930450} onClick={() => {}} />
-        <ReportItem accountCode='1-10200' accountName='Persediaan Barang' amount={14536046} onClick={() => {}} />
-        <ReportItem accountCode='1-10402' accountName='Biaya Dibayar Di Muka' amount={-77477} onClick={() => {}} />
-        <ReportItem accountCode='1-10500' accountName='PPN Masukan' amount={4559934} onClick={() => {}} />
+        <ReportItemHeader title='Aktivitas Operasional' date='' />
         <ReportItem
-          accountCode='1-10501'
-          accountName='Pajak Dibayar Di Muka - PPh 22'
-          amount={-21622}
+          accountCode=''
+          accountName='Penerimaan dari pelanggan'
+          isSubtitle={false}
+          amount={25437111}
           onClick={() => {}}
         />
-        <ReportItemFooter title='Total Aset Lancar' amount={74528890} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemSubheader title='Aset Tetap' />
-        <ReportItem accountCode='1-10700' accountName='Aset Tetap - Tanah' amount={17900000} onClick={() => {}} />
-        <ReportItem accountCode='1-10701' accountName='Aset Tetap - Bangunan' amount={-21622} onClick={() => {}} />
-        <ReportItemFooter title='Total Aset Tetap' amount={17878378} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemSubheader title='Depresiasi & Amortisasi' />
         <ReportItem
-          accountCode='1-10753'
-          accountName='Akumulasi penyusutan - Kendaraan'
-          amount={-45946}
+          accountCode=''
+          accountName='Aset lancar lainnya'
+          isSubtitle={false}
+          amount={-433288}
           onClick={() => {}}
         />
-        <ReportItem accountCode='1-10757' accountName='Akumulasi Amortisasi' amount={19820} onClick={() => {}} />
-        <ReportItemFooter title='Total Depresiasi & Amortisasi' amount={-26126} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemSubheader title='Lainnya' />
-        <ReportItemFooter title='Total Lainnya' amount={0} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemFooter title='Total Aset' amount={196054040} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemHeader title='Liabilities and Modal' date='11/09/2025' />
-        <ReportItemSubheader title='Liabilitas Jangka Pendek' />
-        <ReportItem accountCode='2-20100' accountName='Hutang Usaha' amount={43333108} onClick={() => {}} />
-        <ReportItem accountCode='2-20101' accountName='Hutang Belum Ditagih' amount={10367721} onClick={() => {}} />
-        <ReportItem accountCode='2-20500' accountName='PPN Keluaran' amount={14933183} onClick={() => {}} />
-        <ReportItemFooter title='Total Liabilitas Jangka Pendek' amount={68634012} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemSubheader title='Liabilitas Jangka Panjang' />
-        <ReportItemFooter title='Total Liabilitas Jangka Panjang' amount={0} />
-        <ReportItemSubheader title='' />
-
-        <ReportItemSubheader title='Perubahan Modal' />
-        <ReportItem accountCode='3-30000' accountName='Modal Saham' amount={83665766} onClick={() => {}} />
         <ReportItem
-          accountCode='3-30300'
-          accountName='Pendapatan Komprehensif Lainnya'
-          amount={-78378}
+          accountCode=''
+          accountName='Pembayaran ke pemasok'
+          isSubtitle={false}
+          amount={-4167460}
           onClick={() => {}}
         />
-        <ReportItem accountCode='' accountName='Pendapatan sampai periode terakhir' amount={0} onClick={() => {}} />
-        <ReportItem accountCode='' accountName='Pendapatan periode ini' amount={43832641} onClick={() => {}} />
-        <ReportItemFooter title='Total Perubahan Modal' amount={127420028} />
+        <ReportItem
+          accountCode=''
+          accountName='Kartu kredit dan liabilitas jangka pendek lainnya'
+          amount={119550}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Pendapatan lain-lain'
+          isSubtitle={false}
+          amount={54054}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Pembayaran biaya operasional'
+          isSubtitle={false}
+          amount={-6225315}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Arus kas bersih dari aktivitas operasional' amount={14784651} />
         <ReportItemSubheader title='' />
 
-        <ReportItemFooter title='Total Liabilitas and Modal' amount={196054040} />
+        <ReportItemHeader title='Aktivitas Investasi' date='' />
+        <ReportItem
+          accountCode=''
+          accountName='Perolehan/pembelian aset'
+          amount={0}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Aktivitas investasi lainnya'
+          amount={0}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Arus kas bersih dari aktivitas investasi' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Aktivitas Pendanaan' date='' />
+        <ReportItem
+          accountCode=''
+          accountName='Liabilitas Jangka Panjang'
+          amount={0}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItem accountCode='' accountName='Modal pemilik' amount={0} isSubtitle={false} onClick={() => {}} />
+        <ReportItemFooter title='Arus kas bersih dari aktivitas pendanaan' amount={0} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Arus kas bersih' amount={14784651} />
+        <ReportItemSubheader title='' />
+
+        <ReportItemHeader title='Kas dan Setara Kas' date='' />
+        <ReportItem
+          accountCode=''
+          accountName='Kas dan setara kas diawal periode'
+          isSubtitle={false}
+          amount={0}
+          onClick={() => {}}
+        />
+        <ReportItem
+          accountCode=''
+          accountName='Kas dan setara kas diakhir periode'
+          amount={73041637}
+          isSubtitle={false}
+          onClick={() => {}}
+        />
+        <ReportItemFooter title='Perubahan kas untuk periode' amount={73041637} />
         <ReportItemSubheader title='' />
       </CardContent>
     </Card>

From 1a9015563fcb03582aef0ee0dda8675cfab7a228 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 20:43:15 +0700
Subject: [PATCH 39/42] Report

---
 src/views/apps/report/ReportCard.tsx          |  2 +-
 src/views/apps/report/ReportFinancialList.tsx |  7 ++-
 src/views/apps/report/ReportPurchaseList.tsx  | 58 +++++++++++++++++
 src/views/apps/report/ReportSalesList.tsx     | 63 +++++++++++++++++++
 src/views/apps/report/index.tsx               |  8 +++
 5 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 src/views/apps/report/ReportPurchaseList.tsx
 create mode 100644 src/views/apps/report/ReportSalesList.tsx

diff --git a/src/views/apps/report/ReportCard.tsx b/src/views/apps/report/ReportCard.tsx
index 77e5e68..093ebb6 100644
--- a/src/views/apps/report/ReportCard.tsx
+++ b/src/views/apps/report/ReportCard.tsx
@@ -46,7 +46,7 @@ const ReportCard = (props: ReportCardProps) => {
           <i className={avatarIcon} />
         </CustomAvatar>
         <div className='flex flex-col items-start gap-1'>
-          <Typography variant='h5' className='report-title transition-colors duration-200'>
+          <Typography variant='h6' className='report-title transition-colors duration-200'>
             {title}
           </Typography>
         </div>
diff --git a/src/views/apps/report/ReportFinancialList.tsx b/src/views/apps/report/ReportFinancialList.tsx
index 74db207..9c78c5b 100644
--- a/src/views/apps/report/ReportFinancialList.tsx
+++ b/src/views/apps/report/ReportFinancialList.tsx
@@ -25,12 +25,17 @@ const ReportFinancialList: React.FC = () => {
       title: 'Neraca',
       iconClass: 'tabler-cash',
       link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
+    },
+    {
+      title: 'Ringkasan Eksekutif',
+      iconClass: 'tabler-cash',
+      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
     }
   ]
 
   return (
     <div>
-      <Typography variant='h5' className='mbe-1'>
+      <Typography variant='h5' className='mbe-2'>
         Finansial
       </Typography>
 
diff --git a/src/views/apps/report/ReportPurchaseList.tsx b/src/views/apps/report/ReportPurchaseList.tsx
new file mode 100644
index 0000000..a28d799
--- /dev/null
+++ b/src/views/apps/report/ReportPurchaseList.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { Container, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import ReportCard from './ReportCard'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
+
+const ReportPurchaseList: React.FC = () => {
+  const { lang: locale } = useParams()
+
+  const purchaseReports = [
+    {
+      title: 'Detail Pembelian',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Tagihan Vendor',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Pembelian per Produk',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Pembelian per Vendor',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    },
+    {
+      title: 'Pembelian Produk per Vendor',
+      iconClass: 'tabler-shopping-cart',
+      link: ''
+    }
+  ]
+
+  return (
+    <div>
+      <Typography variant='h5' className='mbe-2'>
+        Pembelian
+      </Typography>
+
+      <Grid container spacing={3}>
+        {purchaseReports.map((report, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
+            <ReportCard title={report.title} avatarIcon={report.iconClass} href={report.link} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  )
+}
+
+export default ReportPurchaseList
diff --git a/src/views/apps/report/ReportSalesList.tsx b/src/views/apps/report/ReportSalesList.tsx
new file mode 100644
index 0000000..cdd78cb
--- /dev/null
+++ b/src/views/apps/report/ReportSalesList.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { Container, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import ReportCard from './ReportCard'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
+
+const ReportSalesList: React.FC = () => {
+  const { lang: locale } = useParams()
+
+  const salesReports = [
+    {
+      title: 'Detail Penjualan',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Tagihan Pelanggan',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Penjualan per Produk',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Penjualan per Kategori Produk',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Penjualan Produk per Pelanggan',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    },
+    {
+      title: 'Pemesanan per Produk',
+      iconClass: 'tabler-receipt-2',
+      link: ''
+    }
+  ]
+
+  return (
+    <div>
+      <Typography variant='h5' className='mbe-2'>
+        Penjualan
+      </Typography>
+
+      <Grid container spacing={3}>
+        {salesReports.map((report, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
+            <ReportCard title={report.title} avatarIcon={report.iconClass} href={report.link} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  )
+}
+
+export default ReportSalesList
diff --git a/src/views/apps/report/index.tsx b/src/views/apps/report/index.tsx
index d99eebc..87c14ae 100644
--- a/src/views/apps/report/index.tsx
+++ b/src/views/apps/report/index.tsx
@@ -1,6 +1,8 @@
 import Grid from '@mui/material/Grid2'
 import ReportHeader from './ReportHeader'
 import ReportFinancialList from './ReportFinancialList'
+import ReportSalesList from './ReportSalesList'
+import ReportPurchaseList from './ReportPurchaseList'
 
 const ReportList = () => {
   return (
@@ -11,6 +13,12 @@ const ReportList = () => {
       <Grid size={{ xs: 12 }}>
         <ReportFinancialList />
       </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportSalesList />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReportPurchaseList />
+      </Grid>
     </Grid>
   )
 }

From 5723d490902ed19d873f1cd67ba911e81c03f9f4 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 21:47:52 +0700
Subject: [PATCH 40/42] Reconciliation and Cash Bank Detail Transaction

---
 .../transaction/[transaction_id]/page.tsx     |  18 +
 .../cash-bank/detail/CashBankDetailTable.tsx  |   2 +-
 .../CashBankDetailTransactionContent.tsx      |  27 ++
 .../CashBankDetailTransactionHeader.tsx       |  23 ++
 .../CashBankDetailTransactionInformation.tsx  | 177 +++++++++
 .../CashBankDetailTransactionLog.tsx          |  59 +++
 .../CashBankDetailTransactionReconsiled.tsx   | 342 ++++++++++++++++++
 7 files changed, 647 insertions(+), 1 deletion(-)
 create mode 100644 src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx
 create mode 100644 src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx
 create mode 100644 src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx
 create mode 100644 src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx
 create mode 100644 src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx
 create mode 100644 src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx

diff --git a/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx
new file mode 100644
index 0000000..b5b7a0d
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/cash-bank/[id]/detail/transaction/[transaction_id]/page.tsx
@@ -0,0 +1,18 @@
+import CashBankDetailTransactionContent from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent'
+import CashBankDetailTransactionHeader from '@/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader'
+import Grid from '@mui/material/Grid2'
+
+const TransactionPage = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailTransactionHeader title='Giro 1-10003' transaction='Terima Pembayaran Tagihan' />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CashBankDetailTransactionContent />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default TransactionPage
diff --git a/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx b/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
index e2bb454..d8b114a 100644
--- a/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
+++ b/src/views/apps/cash-bank/detail/CashBankDetailTable.tsx
@@ -338,7 +338,7 @@ const CashBankDetailTable = () => {
             color='primary'
             className='p-0 min-w-0 font-medium normal-case justify-start'
             component={Link}
-            href={getLocalizedUrl(`/apps/cashbank/${row.original.id}/detail`, locale as Locale)}
+            href={getLocalizedUrl(`/apps/cash-bank/1-10003/detail/transaction/${row.original.id}`, locale as Locale)}
             sx={{
               textTransform: 'none',
               fontWeight: 500,
diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx
new file mode 100644
index 0000000..c96cf25
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionContent.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import Grid from '@mui/material/Grid2'
+import CashBankDetailTransactionInformation from './CashBankDetailTransactionInformation'
+import CashBankDetailTransactionLog from './CashBankDetailTransactionLog'
+import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'
+import { useState } from 'react'
+
+const CashBankDetailTransactionContent = () => {
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={{ xs: 12 }}>
+          <CashBankDetailTransactionInformation />
+        </Grid>
+        {/* <Grid size={{ xs: 12 }}>
+        <ExpenseDetailSendPayment />
+        </Grid> */}
+        <Grid size={{ xs: 12 }}>
+          <CashBankDetailTransactionLog />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default CashBankDetailTransactionContent
diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx
new file mode 100644
index 0000000..217d716
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionHeader.tsx
@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+
+interface Props {
+  title: string
+  transaction: string
+}
+
+const CashBankDetailTransactionHeader = ({ title, transaction }: Props) => {
+  return (
+    <div className='flex flex-wrap sm:items-center justify-between max-sm:flex-col gap-6'>
+      <div>
+        <Typography variant='h4' className='mbe-1'>
+          {title}
+        </Typography>
+        <Typography variant='h6' className='mbe-1'>
+          Transaksi: {transaction}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default CashBankDetailTransactionHeader
diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx
new file mode 100644
index 0000000..3d8e1a2
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionInformation.tsx
@@ -0,0 +1,177 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
+import Grid from '@mui/material/Grid2'
+import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'
+
+interface PaymentData {
+  dari: string
+  nomor: string
+  tglTransaksi: string
+  referensi: string
+  status: string
+}
+
+interface TransactionItem {
+  deskripsi: string
+  total: number
+}
+
+const CashBankDetailTransactionInformation: React.FC = () => {
+  const [open, setOpen] = useState(false)
+
+  const paymentData: PaymentData = {
+    dari: 'POS Customer',
+    nomor: 'IP/00030',
+    tglTransaksi: '10/09/2025',
+    referensi: 'Pembayaran INV/01/59A/4CY/00003',
+    status: 'Unreconciled'
+  }
+
+  const transactionItems: TransactionItem[] = [
+    {
+      deskripsi: 'Terima pembayaran tagihan INV/01/59A/4CY/00003',
+      total: 220890
+    }
+  ]
+
+  const totalAmount: number = transactionItems.reduce((sum, item) => sum + item.total, 0)
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat('id-ID').format(amount)
+  }
+
+  return (
+    <>
+      <Card sx={{ width: '100%' }}>
+        <CardHeader
+          title={
+            <Box display='flex' justifyContent='space-between' alignItems='center'>
+              <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
+                Unreconciled
+              </Typography>
+              <Box>
+                <Button variant='outlined' size='small' sx={{ mr: 1 }} onClick={() => setOpen(true)}>
+                  Rekonsiliasi
+                </Button>
+                <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                  Bagikan
+                </Button>
+                <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
+                  Print
+                </Button>
+              </Box>
+            </Box>
+          }
+        />
+
+        <CardContent>
+          {/* Payment Information */}
+          <Grid container spacing={3} sx={{ mb: 4 }}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Dari
+                </Typography>
+                <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
+                  {paymentData.dari}
+                </Typography>
+              </Box>
+
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Tanggal Transaksi
+                </Typography>
+                <Typography variant='body1'>{paymentData.tglTransaksi}</Typography>
+              </Box>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ mb: 2 }}>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Nomor
+                </Typography>
+                <Typography variant='body1'>{paymentData.nomor}</Typography>
+              </Box>
+
+              <Box>
+                <Typography variant='subtitle2' color='text.secondary'>
+                  Referensi
+                </Typography>
+                <Typography variant='body1'>{paymentData.referensi}</Typography>
+              </Box>
+            </Grid>
+          </Grid>
+
+          {/* Transaction Items Header */}
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              py: 2,
+              borderBottom: '2px solid #e0e0e0',
+              mb: 2
+            }}
+          >
+            <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+              Deskripsi
+            </Typography>
+            <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+              Total
+            </Typography>
+          </Box>
+
+          {/* Transaction Items */}
+          <Box sx={{ mb: 4 }}>
+            {transactionItems.map((item, index) => (
+              <Box
+                key={index}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  py: 2,
+                  borderBottom: index === transactionItems.length - 1 ? 'none' : '1px solid #f0f0f0'
+                }}
+              >
+                <Box sx={{ flex: 1 }}>
+                  <Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
+                    {item.deskripsi}
+                  </Typography>
+                </Box>
+                <Box sx={{ textAlign: 'right', ml: 3 }}>
+                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                    {formatCurrency(item.total)}
+                  </Typography>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+
+          {/* Total Section */}
+          <Box sx={{ mt: 4, pt: 3, borderTop: '2px solid #e0e0e0' }}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center'
+              }}
+            >
+              <Typography variant='h5' sx={{ fontWeight: 'bold', mr: 4 }}>
+                Total
+              </Typography>
+              <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
+                {formatCurrency(totalAmount)}
+              </Typography>
+            </Box>
+          </Box>
+        </CardContent>
+      </Card>
+      <CashBankDetailTransactionReconciliationDrawer open={open} handleClose={() => setOpen(!open)} />
+    </>
+  )
+}
+
+export default CashBankDetailTransactionInformation
diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx
new file mode 100644
index 0000000..cd19d0d
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionLog.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'
+
+interface LogEntry {
+  id: string
+  action: string
+  timestamp: string
+  user: string
+}
+
+const CashBankDetailTransactionLog: React.FC = () => {
+  const logEntries: LogEntry[] = [
+    {
+      id: '1',
+      action: 'Terakhir diubah oleh',
+      timestamp: '08 Sep 2025 18:26',
+      user: 'pada'
+    }
+  ]
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+            Pantau log perubahan data
+          </Typography>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent sx={{ mt: 5 }}>
+        {logEntries.map(entry => (
+          <Box key={entry.id} sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
+              <Link
+                href='#'
+                underline='hover'
+                color='primary'
+                sx={{
+                  textDecoration: 'none',
+                  '&:hover': {
+                    textDecoration: 'underline'
+                  }
+                }}
+              >
+                {entry.action} {entry.user} {entry.timestamp}
+              </Link>
+            </Box>
+          </Box>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CashBankDetailTransactionLog
diff --git a/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx
new file mode 100644
index 0000000..681069b
--- /dev/null
+++ b/src/views/apps/cash-bank/detail/transaction/CashBankDetailTransactionReconsiled.tsx
@@ -0,0 +1,342 @@
+import React, { useState } from 'react'
+import {
+  Drawer,
+  Typography,
+  Box,
+  IconButton,
+  Button,
+  TextField,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Checkbox,
+  Paper,
+  MenuItem,
+  Select,
+  FormControl
+} from '@mui/material'
+import Grid from '@mui/material/Grid2'
+
+interface Props {
+  open: boolean
+  handleClose: () => void
+}
+
+const CashBankDetailTransactionReconciliationDrawer: React.FC<Props> = ({ open, handleClose }) => {
+  const [tanggalDari, setTanggalDari] = useState('10/09/2025')
+  const [tanggalSampai, setTanggalSampai] = useState('10/09/2025')
+  const [totalDari, setTotalDari] = useState('220.890')
+  const [totalSampai, setTotalSampai] = useState('220.890')
+  const [cari, setCari] = useState('')
+
+  const transactionData = {
+    detil: '10/09/2025',
+    kirim: 'Terima pembayaran tagihan: POS Customer INV/01/59A/4CY/00003',
+    terima: '220.890'
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleClose}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: '90%', sm: '80%', md: '80%', lg: '80%' },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center justify-between'>
+          <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
+            Rekonsiliasi
+          </Typography>
+          <IconButton size='small' onClick={handleClose}>
+            <i className='tabler-x text-2xl' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto', p: 3 }}>
+        <Grid container spacing={2}>
+          <Grid size={6}>
+            {/* Mutasi Bank Section */}
+            <Box sx={{ mb: 4 }}>
+              <Typography variant='h6' sx={{ fontWeight: 'bold', mb: 1 }}>
+                Mutasi Bank
+              </Typography>
+              <Typography variant='body2' color='text.secondary' sx={{ mb: 3 }}>
+                Cari mutasi bank yang sesuai dengan transaksi di Kledo
+              </Typography>
+
+              {/* Filter Section */}
+              <Grid container spacing={3} sx={{ mb: 3 }}>
+                {/* Tanggal */}
+                <Grid size={12}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
+                    Tanggal
+                  </Typography>
+                  <div className='flex items-center gap-3'>
+                    <TextField
+                      size='small'
+                      value={tanggalDari}
+                      onChange={e => setTanggalDari(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                    <Typography variant='body2'>s/d</Typography>
+                    <TextField
+                      size='small'
+                      value={tanggalSampai}
+                      onChange={e => setTanggalSampai(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                  </div>
+                </Grid>
+
+                {/* Total */}
+                <Grid size={12}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
+                    Total
+                  </Typography>
+                  <div className='flex items-center gap-3'>
+                    <TextField
+                      size='small'
+                      value={totalDari}
+                      onChange={e => setTotalDari(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                    <Typography variant='body2'>s/d</Typography>
+                    <TextField
+                      size='small'
+                      value={totalSampai}
+                      onChange={e => setTotalSampai(e.target.value)}
+                      sx={{ width: '150px' }}
+                    />
+                  </div>
+                </Grid>
+
+                {/* Cari */}
+                <Grid size={12}>
+                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
+                    Cari
+                  </Typography>
+                  <div className='flex items-center gap-3'>
+                    <TextField
+                      size='small'
+                      placeholder='Cari'
+                      value={cari}
+                      onChange={e => setCari(e.target.value)}
+                      sx={{ width: '300px' }}
+                    />
+                    <Button variant='contained' size='small'>
+                      Go
+                    </Button>
+                  </div>
+                </Grid>
+              </Grid>
+
+              {/* Table */}
+              <TableContainer component={Paper} sx={{ mb: 3 }}>
+                <Table size='small'>
+                  <TableHead>
+                    <TableRow sx={{ backgroundColor: 'grey.50' }}>
+                      <TableCell padding='checkbox'>
+                        <Checkbox />
+                      </TableCell>
+                      <TableCell>Detil</TableCell>
+                      <TableCell>Kirim</TableCell>
+                      <TableCell>Terima</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
+                        <div className='flex flex-col items-center gap-2'>
+                          <i className='tabler-folder-open text-gray-400 text-4xl' />
+                          <Typography variant='body2' color='text.secondary'>
+                            Tidak ada data
+                          </Typography>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+
+              {/* Information Text */}
+              <Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
+                Transaksi yang sudah dipilih, tambah transaksi baru sesuai kebutuhan.
+              </Typography>
+
+              {/* Table */}
+              <TableContainer component={Paper} sx={{ mb: 3 }}>
+                <Table size='small'>
+                  <TableHead>
+                    <TableRow sx={{ backgroundColor: 'grey.50' }}>
+                      <TableCell padding='checkbox'>
+                        <Checkbox />
+                      </TableCell>
+                      <TableCell>Detil</TableCell>
+                      <TableCell>Kirim</TableCell>
+                      <TableCell>Terima</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
+                        <div className='flex flex-col items-center gap-2'>
+                          <i className='tabler-folder-open text-gray-400 text-4xl' />
+                          <Typography variant='body2' color='text.secondary'>
+                            Tidak ada data
+                          </Typography>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Box>
+
+            {/* Summary Section */}
+            <Box sx={{ mb: 4 }}>
+              <Typography variant='body2' sx={{ mb: 3, fontWeight: 'medium' }}>
+                Total transaksi di Kledo harus sama dengan total mutasi
+              </Typography>
+
+              <Grid container spacing={3} sx={{ mb: 3 }}>
+                <Grid size={6}>
+                  <Typography variant='body2' color='text.secondary'>
+                    Total transaksi di Kledo
+                  </Typography>
+                </Grid>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ textAlign: 'right' }}>
+                    220.890
+                  </Typography>
+                </Grid>
+              </Grid>
+
+              <Grid container spacing={3} sx={{ mb: 3 }}>
+                <Grid size={6}>
+                  <Typography variant='body2' color='text.secondary'>
+                    Total mutasi
+                  </Typography>
+                </Grid>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ textAlign: 'right' }}>
+                    0
+                  </Typography>
+                </Grid>
+              </Grid>
+
+              <Grid container spacing={3}>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold' }}>
+                    Selisih
+                  </Typography>
+                </Grid>
+                <Grid size={6}>
+                  <Typography variant='body2' sx={{ textAlign: 'right', fontWeight: 'bold' }}>
+                    220.890
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Box>
+          </Grid>
+          <Grid size={6}>
+            {/* Transaction Summary */}
+            <Box
+              sx={{
+                backgroundColor: 'grey.50',
+                p: 3,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.200'
+              }}
+            >
+              <Grid container spacing={3}>
+                <Grid size={4}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
+                    Detil
+                  </Typography>
+                  <Typography variant='body2'>{transactionData.detil}</Typography>
+                </Grid>
+                <Grid size={4}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
+                    Kirim
+                  </Typography>
+                  <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
+                    {transactionData.kirim}
+                  </Typography>
+                </Grid>
+                <Grid size={4}>
+                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
+                    Terima
+                  </Typography>
+                  <Typography variant='body2' color='primary' sx={{ fontWeight: 'bold' }}>
+                    {transactionData.terima}
+                  </Typography>
+                </Grid>
+              </Grid>
+
+              <Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'grey.300' }}>
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold', mr: 2 }}>
+                    Total
+                  </Typography>
+                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
+                    220.890
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Footer Buttons */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center justify-end gap-3'>
+          <Button variant='outlined' color='error' onClick={handleClose}>
+            Batal
+          </Button>
+          <Button variant='outlined' disabled>
+            Rekonsiliasi
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default CashBankDetailTransactionReconciliationDrawer

From 5def10dc64c746c2751f7cdb2fbb913d9018228d Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 23:01:01 +0700
Subject: [PATCH 41/42] Account

---
 src/views/apps/account/AccountListTable.tsx |   2 +-
 src/views/apps/cash-bank/CashBankList.tsx   | 124 ++++++++++++--------
 2 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/src/views/apps/account/AccountListTable.tsx b/src/views/apps/account/AccountListTable.tsx
index 24b14a6..0df4835 100644
--- a/src/views/apps/account/AccountListTable.tsx
+++ b/src/views/apps/account/AccountListTable.tsx
@@ -65,7 +65,7 @@ type AccountTypeWithAction = AccountType & {
 }
 
 // Dummy Account Data
-const accountsData: AccountType[] = [
+export const accountsData: AccountType[] = [
   {
     id: 1,
     code: '1-10001',
diff --git a/src/views/apps/cash-bank/CashBankList.tsx b/src/views/apps/cash-bank/CashBankList.tsx
index 85c5517..92aa8f5 100644
--- a/src/views/apps/cash-bank/CashBankList.tsx
+++ b/src/views/apps/cash-bank/CashBankList.tsx
@@ -16,6 +16,9 @@ import CustomTextField from '@/@core/components/mui/TextField'
 import { getLocalizedUrl } from '@/utils/i18n'
 import { Locale } from '@/configs/i18n'
 import { useParams } from 'next/navigation'
+import AccountFormDrawer, { AccountType } from '../account/AccountFormDrawer'
+import { accountsData } from '../account/AccountListTable'
+import { Button } from '@mui/material'
 
 // Types
 interface BankAccount {
@@ -250,10 +253,15 @@ const DebouncedInput = ({
 }
 const CashBankList = () => {
   const [searchQuery, setSearchQuery] = useState('')
+  const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
+  const [addAccountOpen, setAddAccountOpen] = useState(false)
+  const [data, setData] = useState<AccountType[]>(accountsData)
   const { lang: locale } = useParams()
 
-  // Handle button clicks
-  const handleAccountAction = () => {}
+  const handleCloseDrawer = () => {
+    setAddAccountOpen(false)
+    setEditingAccount(null)
+  }
 
   // Filter and search logic
   const filteredAccounts = useMemo(() => {
@@ -267,60 +275,80 @@ const CashBankList = () => {
   }, [searchQuery])
 
   return (
-    <Box sx={{ p: 3 }}>
-      {/* Search and Filters */}
-      <Box sx={{ mb: 4 }}>
-        <Grid container spacing={2} sx={{ mb: 3 }}>
-          <Grid size={{ xs: 12, md: 6 }}>
+    <>
+      <Box sx={{ p: 3 }}>
+        {/* Search and Filters */}
+        <Box sx={{ mb: 4 }}>
+          <div className='flex justify-between items-center'>
             <DebouncedInput
               value={searchQuery}
               onChange={value => setSearchQuery(value as string)}
               placeholder='Cari '
               className='max-sm:is-full'
             />
-          </Grid>
+            <Box>
+              <Button
+                variant='contained'
+                className='max-sm:is-full is-auto'
+                startIcon={<i className='tabler-plus' />}
+                onClick={() => {
+                  setEditingAccount(null)
+                  setAddAccountOpen(true)
+                }}
+              >
+                Tambah Akun
+              </Button>
+            </Box>
+          </div>
+        </Box>
+
+        {/* Account Cards */}
+        <Grid container spacing={3}>
+          {filteredAccounts.length > 0 ? (
+            filteredAccounts.map(account => (
+              <Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
+                <CashBankCard
+                  title={account.title}
+                  accountNumber={account.accountNumber}
+                  balances={account.balances}
+                  chartData={account.chartData}
+                  categories={account.categories}
+                  chartColor={account.chartColor}
+                  currency={account.currency}
+                  showButton={account.accountType !== 'cash'}
+                  href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
+                />
+              </Grid>
+            ))
+          ) : (
+            <Grid size={{ xs: 12 }}>
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  py: 8,
+                  backgroundColor: 'grey.50',
+                  borderRadius: 2
+                }}
+              >
+                <Typography variant='h6' color='text.secondary' gutterBottom>
+                  Tidak ada akun yang ditemukan
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  Coba ubah kata kunci pencarian atau filter yang digunakan
+                </Typography>
+              </Box>
+            </Grid>
+          )}
         </Grid>
       </Box>
-
-      {/* Account Cards */}
-      <Grid container spacing={3}>
-        {filteredAccounts.length > 0 ? (
-          filteredAccounts.map(account => (
-            <Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
-              <CashBankCard
-                title={account.title}
-                accountNumber={account.accountNumber}
-                balances={account.balances}
-                chartData={account.chartData}
-                categories={account.categories}
-                chartColor={account.chartColor}
-                currency={account.currency}
-                showButton={account.accountType !== 'cash'}
-                href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
-              />
-            </Grid>
-          ))
-        ) : (
-          <Grid size={{ xs: 12 }}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                py: 8,
-                backgroundColor: 'grey.50',
-                borderRadius: 2
-              }}
-            >
-              <Typography variant='h6' color='text.secondary' gutterBottom>
-                Tidak ada akun yang ditemukan
-              </Typography>
-              <Typography variant='body2' color='text.secondary'>
-                Coba ubah kata kunci pencarian atau filter yang digunakan
-              </Typography>
-            </Box>
-          </Grid>
-        )}
-      </Grid>
-    </Box>
+      <AccountFormDrawer
+        open={addAccountOpen}
+        handleClose={handleCloseDrawer}
+        accountData={data}
+        setData={setData}
+        editingAccount={editingAccount}
+      />
+    </>
   )
 }
 

From a019a4bdbc9dfa2f7e5859bdb47284bf2ed233b1 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Thu, 11 Sep 2025 23:06:20 +0700
Subject: [PATCH 42/42] Update Expanse Detail Send Payment

---
 .../detail/ExpenseDetailSendPayment.tsx       | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx b/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
index 8f2ac20..9b73635 100644
--- a/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
+++ b/src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx
@@ -17,6 +17,7 @@ import {
 import Grid from '@mui/material/Grid2'
 import CustomTextField from '@/@core/components/mui/TextField'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import ImageUpload from '@/components/ImageUpload'
 
 interface PaymentFormData {
   totalDibayar: string
@@ -114,6 +115,15 @@ const ExpenseDetailSendPayment: React.FC = () => {
     return new Intl.NumberFormat('id-ID').format(numAmount)
   }
 
+  const handleUpload = async (file: File): Promise<string> => {
+    // Simulate upload
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(URL.createObjectURL(file))
+      }, 1000)
+    })
+  }
+
   return (
     <Card>
       <CardHeader
@@ -223,9 +233,13 @@ const ExpenseDetailSendPayment: React.FC = () => {
                 </Typography>
               </AccordionSummary>
               <AccordionDetails sx={{ p: 2 }}>
-                <Typography variant='body2' color='text.secondary'>
-                  Drag and drop files here or click to upload
-                </Typography>
+                <ImageUpload
+                  onUpload={handleUpload}
+                  maxFileSize={1 * 1024 * 1024} // 1MB
+                  showUrlOption={false}
+                  dragDropText='Drop your image here'
+                  browseButtonText='Choose Image'
+                />
               </AccordionDetails>
             </Accordion>
           </Grid>