From 406befc21b7d3cbca4d09d7de994dceef01a7069 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 13:43:46 +0700
Subject: [PATCH 01/53] refactor(FE): Refine input component styles and error
 UI

---
 src/components/input/FileInput.tsx | 18 +++++++++++-------
 src/components/input/TextInput.tsx |  8 ++++----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 5f3a8610..f285f687 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -41,7 +41,7 @@ const FileInput = ({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-2 text-start',
+        'w-full flex flex-col gap-0 text-start rounded-lg',
         className?.wrapper
       )}
     >
@@ -49,7 +49,7 @@ const FileInput = ({
         <label
           htmlFor={name}
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             {
               'text-error': isError,
             },
@@ -77,15 +77,19 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn('grow file-input w-full h-12 rounded', className?.input)}
+        className={cn(
+          'grow file-input w-full h-fit px-3 py-1.5 text-sm font-normal leading-6 rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+          className?.input
+        )}
         readOnly={readOnly}
       />
 
-      {bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      {!isError && bottomLabel && (
+        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
       )}
-
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 2365d73d..89d4f059 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -102,7 +102,7 @@ const TextInput = ({
           {inputPrefix && (
             <div
               className={cn(
-                'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
+                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
                   'bg-gray-100 border-base-content/10': !disabled,
                   'bg-gray-50 border-base-content/10': disabled,
@@ -165,10 +165,10 @@ const TextInput = ({
           {inputSuffix && (
             <div
               className={cn(
-                'inline-flex items-center px-3 py-2.5 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
+                'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },

From 9f93200bd568eb87f811ba7a9cc5ca49a2078d57 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 14:14:44 +0700
Subject: [PATCH 02/53] refactor(FE): Move form error alerts to bottom of forms

---
 .../inventory/movement/form/MovementForm.tsx  | 40 ++++++++++---------
 .../form/ProductCategoryForm.tsx              | 28 +++++++------
 .../master-data/product/form/ProductForm.tsx  | 29 ++++++++------
 .../recording/form/RecordingForm.tsx          | 34 ++++++++--------
 .../uniformity/form/UniformityForm.tsx        | 40 ++++++++++---------
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 40 ++++++++++---------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 40 ++++++++++---------
 .../form/request/PurchaseRequestForm.tsx      | 40 ++++++++++---------
 8 files changed, 154 insertions(+), 137 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index ff3edbfc..ef4bc3bb 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1263,25 +1263,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {movementFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{movementFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           {/* Top card - Movement details */}
           <Card
             title='Detail Movement'
@@ -2007,6 +1988,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
             )}
           </Card>
 
+          <div className='w-full'>
+            {movementFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{movementFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
index 1e61879c..b75795b1 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
@@ -159,19 +159,6 @@ const ProductCategoryForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
           <div className='flex flex-col gap-4'>
             <TextInput
               required
@@ -240,6 +227,21 @@ const ProductCategoryForm = ({
               </div>
             )}
 
+            <div className='w-full mb-4'>
+              {formErrorMessage && (
+                <div role='alert' className='alert alert-error'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{formErrorMessage}</span>
+                </div>
+              )}
+
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 45ba192d..65329464 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/src/components/pages/master-data/product/form/ProductForm.tsx
@@ -273,19 +273,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {productFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{productFormErrorMessage}</span>
-            </div>
-          )}
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
           <div className='grid grid-cols-1 gap-4'>
             <TextInput
               required
@@ -627,6 +614,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 )}
               </div>
             )}
+
+            <div className='mb-4 w-full'>
+              {productFormErrorMessage && (
+                <div role='alert' className='alert alert-error'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{productFormErrorMessage}</span>
+                </div>
+              )}
+
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 83076391..13ce9cc9 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1734,22 +1734,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           onSubmit={handleFormSubmit}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {recordingFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{recordingFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
-          )}
-
           {/* Basic Info Card */}
           {(type === 'add' || type === 'edit') && (
             <Card
@@ -3010,6 +2994,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             </Card>
           )}
 
+          <div className='w-full'>
+            {recordingFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{recordingFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
             {/* Left side - Detail & Edit actions */}
diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index e6b0657d..8d62f09e 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -511,25 +511,6 @@ const UniformityForm = ({
           <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
 
           <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
-            {uniformityFormErrorMessage && (
-              <div className='alert alert-error' role='alert'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{uniformityFormErrorMessage}</span>
-              </div>
-            )}
-
-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <AlertErrorList
-                formErrorList={formErrorList}
-                onClose={() => setFormErrorList([])}
-              />
-            )}
-
             <DateInput
               required
               label='Tanggal'
@@ -753,6 +734,27 @@ const UniformityForm = ({
               )}
             </div>
 
+            <div className='w-full'>
+              {uniformityFormErrorMessage && (
+                <div className='alert alert-error' role='alert'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{uniformityFormErrorMessage}</span>
+                </div>
+              )}
+
+              {/* Error List Alert */}
+              {formErrorList.length > 0 && (
+                <AlertErrorList
+                  formErrorList={formErrorList}
+                  onClose={() => setFormErrorList([])}
+                />
+              )}
+            </div>
+
             {!isNextStep && (
               <RequirePermission permissions='lti.production.uniformity.create'>
                 <Button
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index de27a169..c7b196a2 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -370,25 +370,6 @@ const PurchaseOrderAcceptApprovalForm = ({
             ? 'Konfirmasi Penerimaan Produk'
             : 'Edit Penerimaan Produk'}
         </h2>
-        {purchaseOrderFormErrorMessage && (
-          <div role='alert' className='alert alert-error'>
-            <Icon
-              icon='material-symbols:error-outline'
-              width={24}
-              height={24}
-            />
-            <span>{purchaseOrderFormErrorMessage}</span>
-          </div>
-        )}
-
-        {/* Error List Alert */}
-        {formErrorList.length > 0 && (
-          <AlertErrorList
-            formErrorList={formErrorList}
-            onClose={() => setFormErrorList([])}
-          />
-        )}
-
         <div className='overflow-x-auto'>
           <table className='table'>
             <thead>
@@ -709,6 +690,27 @@ const PurchaseOrderAcceptApprovalForm = ({
           />
         </div>
 
+        <div className='w-full mt-4'>
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+        </div>
+
         {/* Action buttons */}
         <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
           <div className='flex flex-row justify-end gap-2 w-full'>
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index a232347d..000c212b 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -688,25 +688,6 @@ const PurchaseOrderStaffApprovalForm = ({
               ? 'Konfirmasi Item Pembelian'
               : 'Edit Item Pembelian'}
           </h2>
-          {purchaseOrderFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseOrderFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           <div className='overflow-x-auto'>
             {groupedPurchaseItems.length > 0 ? (
               <div>
@@ -1186,6 +1167,27 @@ const PurchaseOrderStaffApprovalForm = ({
             />
           </div>
 
+          <div className='w-full mt-4'>
+            {purchaseOrderFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseOrderFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
             <div className='flex flex-row justify-end gap-2 w-full'>
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 83d9e2d7..90f79e6d 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -494,25 +494,6 @@ const PurchaseRequestForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {purchaseRequestFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseRequestFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           {/* Basic Info Card */}
           <Card
             title='Informasi Purchase Request'
@@ -912,6 +893,27 @@ const PurchaseRequestForm = ({
             )}
           </Card>
 
+          <div className='w-full mb-4'>
+            {purchaseRequestFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseRequestFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (

From 554037bfe54ee1edb431e136aefac2df44483d61 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 14:20:41 +0700
Subject: [PATCH 03/53] refactor(FE): Move expense form error alerts below
 fields

---
 .../pages/expense/form/ExpenseRequestForm.tsx | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/expense/form/ExpenseRequestForm.tsx b/src/components/pages/expense/form/ExpenseRequestForm.tsx
index ed30de3d..733204d9 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.tsx
+++ b/src/components/pages/expense/form/ExpenseRequestForm.tsx
@@ -372,23 +372,6 @@ const ExpenseRequestForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {expenseFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{expenseFormErrorMessage}</span>
-            </div>
-          )}
-
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
           <div className='grid grid-cols-12 gap-4'>
             <SelectInput
               label='Kategori'
@@ -557,6 +540,24 @@ const ExpenseRequestForm = ({
             />
           </div>
 
+          {expenseFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{expenseFormErrorMessage}</span>
+            </div>
+          )}
+
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>

From d8361be28fcb6bff6237311f2060e85bbef2da16 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 14:45:48 +0700
Subject: [PATCH 04/53] refactor(FE): Replace UniformityTable with Uniformity
 page

---
 .../pages/production/uniformity/UniformityPageWrapper.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityPageWrapper.tsx b/src/components/pages/production/uniformity/UniformityPageWrapper.tsx
index ac14ebb5..07f313b6 100644
--- a/src/components/pages/production/uniformity/UniformityPageWrapper.tsx
+++ b/src/components/pages/production/uniformity/UniformityPageWrapper.tsx
@@ -3,7 +3,7 @@
 import { usePathname, useRouter } from 'next/navigation';
 import Drawer from '@/components/Drawer';
 import React, { ReactNode } from 'react';
-import UniformityTable from '@/components/pages/production/uniformity/UniformityTable';
+import Uniformity from '@/app/production/uniformity/page';
 import { useUiStore } from '@/stores/ui/ui.store';
 
 export default function UniformityPageWrapper({
@@ -40,8 +40,8 @@ export default function UniformityPageWrapper({
 
   return (
     <>
-      <div className='w-full p-4'>
-        <UniformityTable />
+      <div className='w-full'>
+        <Uniformity />
       </div>
 
       <Drawer

From 607bf281211d92bed7f3e8ae8c96e5ce709d6410 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 15:10:36 +0700
Subject: [PATCH 05/53] refactor(FE): Refactor Uniformity header and add filter
 badge

---
 .../production/uniformity/UniformityChart.tsx |   2 +-
 .../production/uniformity/UniformityTable.tsx | 177 +++++++++++++-----
 2 files changed, 135 insertions(+), 44 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 6ddf50d3..db37c8f1 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -101,7 +101,7 @@ const UniformityChart = ({
   const shouldShowEmptyState = !isFiltered;
 
   return (
-    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
+    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-3'>
       <Card
         title='Performance Overview ⓘ'
         variant='bordered'
diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 29d1155a..d1ad7343 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -900,58 +900,149 @@ const UniformityTable = () => {
     []
   );
 
+  // ===== CALCULATE FILTER COUNT =====
+  const filterCount = useMemo(() => {
+    let count = 0;
+
+    if (filterStartDate && filterEndDate) {
+      count += 1;
+    }
+
+    if (filterLocation) {
+      count += 1;
+    }
+
+    if (filterProjectFlock) {
+      count += 1;
+    }
+
+    if (filterKandang) {
+      count += 1;
+    }
+
+    return count;
+  }, [
+    filterStartDate,
+    filterEndDate,
+    filterLocation,
+    filterProjectFlock,
+    filterKandang,
+  ]);
+
+  const isFilterActive = filterCount > 0;
+
   return (
     <>
-      <section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
-        <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
-          <RequirePermission permissions='lti.production.uniformity.create'>
-            <Button color='primary' href='/production/uniformity/add'>
-              <Icon icon='ic:round-plus' width={18} height={18} />
-              Add Uniformity
-            </Button>
-          </RequirePermission>
-        </div>
-
-        <div className='sm:flex gap-2'>
-          <Button variant='outline' onClick={filterModal.openModal}>
-            <Icon icon='heroicons:funnel' width={18} height={18} />
-            Filter
-          </Button>
-
-          <Dropdown
-            trigger={
-              <Button variant='outline' isLoading={isAnyExportLoading}>
-                <Icon
-                  icon='heroicons:cloud-arrow-down'
-                  width={18}
-                  height={18}
-                />
-                Export
+      <div className='@container w-full'>
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
+            <RequirePermission permissions='lti.production.uniformity.create'>
+              <Button
+                href='/production/uniformity/add'
+                color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
+                <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Uniformity
               </Button>
-            }
-            align='end'
-          >
-            <Menu>
-              <MenuItem title='Excel' onClick={handleExportExcel} />
-              <MenuItem title='PDF' onClick={handleExportPDF} />
-            </Menu>
-          </Dropdown>
+            </RequirePermission>
+          </div>
+
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <Button
+              variant='outline'
+              color='none'
+              onClick={filterModal.openModal}
+              className={cn(
+                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                {
+                  'border-primary-gradient text-primary': isFilterActive,
+                }
+              )}
+            >
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              Filter
+              {isFilterActive && (
+                <Badge
+                  className={{
+                    badge:
+                      'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
+                  }}
+                >
+                  {filterCount}
+                </Badge>
+              )}
+            </Button>
+
+            <Dropdown
+              align='end'
+              direction='bottom'
+              className={{
+                content:
+                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+              }}
+              trigger={
+                <Button
+                  variant='outline'
+                  color='none'
+                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                >
+                  <div className='flex flex-row items-center gap-1.5'>
+                    <Icon
+                      icon='heroicons:cloud-arrow-down'
+                      width={20}
+                      height={20}
+                    />
+
+                    <span>Export</span>
+
+                    <div className='w-px self-stretch bg-base-content/10' />
+
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
+                  </div>
+                </Button>
+              }
+            >
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportExcel}
+                isLoading={isExcelExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+              >
+                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                Export to Excel
+              </Button>
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportPDF}
+                isLoading={isPdfExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap hover:bg-base-content/5'
+              >
+                <Icon icon='heroicons:document-text' width={20} height={20} />
+                Export to PDF
+              </Button>
+            </Dropdown>
+          </div>
         </div>
-      </section>
 
-      <div className='my-4 divider'></div>
-
-      <section>
-        <UniformityChartWrapper
-          uniformitySwrKey={uniformitySwrKey}
-          isFiltered={isSubmitted}
-        />
-      </section>
+        <section className='p-3'>
+          <UniformityChartWrapper
+            uniformitySwrKey={uniformitySwrKey}
+            isFiltered={isSubmitted}
+          />
+        </section>
+      </div>
 
       <Card
         variant='bordered'
         className={{
-          wrapper: 'my-4 w-full relative',
+          wrapper: 'w-full',
         }}
       >
         <Table<Uniformity>

From 3c96855b86ac6fc9903d0ff82af790f58aa30c97 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 15:59:18 +0700
Subject: [PATCH 06/53] refactor(FE): Replace Card with section in
 UniformityTable

---
 .../pages/production/uniformity/UniformityTable.tsx      | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index d1ad7343..8b549458 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1039,12 +1039,7 @@ const UniformityTable = () => {
         </section>
       </div>
 
-      <Card
-        variant='bordered'
-        className={{
-          wrapper: 'w-full',
-        }}
-      >
+      <section className='p-3 pt-0'>
         <Table<Uniformity>
           data={isResponseSuccess(uniformities) ? uniformities?.data : []}
           columns={uniformityColumns}
@@ -1457,7 +1452,7 @@ const UniformityTable = () => {
           selectedRowIds={selectedRowIds}
           onClose={handleCloseFab}
         />
-      </Card>
+      </section>
     </>
   );
 };

From 1a800a1157a100eec925a1cb8cbebfa7cd3b24ce Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 16:14:26 +0700
Subject: [PATCH 07/53] refactor(FE): Refine drawer header and uniformity form
 styles

---
 src/components/helper/drawer/DrawerHeader.tsx | 12 +++++++++---
 .../uniformity/form/UniformityForm.tsx        | 19 ++++++++++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/helper/drawer/DrawerHeader.tsx b/src/components/helper/drawer/DrawerHeader.tsx
index f9d70a04..8bb635ae 100644
--- a/src/components/helper/drawer/DrawerHeader.tsx
+++ b/src/components/helper/drawer/DrawerHeader.tsx
@@ -58,6 +58,7 @@ const DrawerHeader = ({
     if (leftIconOnClick) {
       return (
         <button
+          type='button'
           onClick={leftIconOnClick}
           className='hover:text-gray-400 bg-transparent border-none p-0'
         >
@@ -72,12 +73,12 @@ const DrawerHeader = ({
   return (
     <div
       className={cn(
-        'flex flex-row justify-between items-center px-4 pt-4',
+        'flex flex-row justify-between items-center px-4 pt-4 pb-4 border-b border-base-content/10',
         className
       )}
     >
       {/* Left Side */}
-      <div className='flex flex-row h-full gap-2 items-center'>
+      <div className='flex flex-row h-full gap-3 items-center'>
         {renderLeftIcon()}
 
         {showDivider && subtitle && (
@@ -85,7 +86,12 @@ const DrawerHeader = ({
         )}
 
         {subtitle && (
-          <div className={cn('text-sm text-neutral', subtitleClassName)}>
+          <div
+            className={cn(
+              'text-sm font-medium text-base-content/50',
+              subtitleClassName
+            )}
+          >
             {subtitle}
           </div>
         )}
diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 8d62f09e..275dbaf1 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -493,24 +493,25 @@ const UniformityForm = ({
     <>
       <section className='w-full'>
         <DrawerHeader
-          leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'}
-          leftIconSize={24}
+          leftIcon={formType == 'add' ? 'heroicons:x-mark' : 'mdi:arrow-left'}
+          leftIconSize={20}
           leftIconHref={
             formType == 'add'
               ? '/production/uniformity'
               : `/production/uniformity/detail`
           }
-          leftIconClassName='hover:text-gray-400'
+          leftIconClassName='hover:text-base-content'
           subtitle={formType == 'add' ? 'Add Uniformity' : 'Update Uniformity'}
-          subtitleClassName='text-sm text-neutral'
+          subtitleClassName='text-sm font-medium text-base-content/50'
           showDivider
         />
 
-        <div className='divider mt-3'></div>
-        <section className='w-full px-6 mb-6'>
-          <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
+        <section className='w-full p-4'>
+          <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+            Informasi Umum
+          </h2>
 
-          <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-1'>
             <DateInput
               required
               label='Tanggal'
@@ -760,7 +761,7 @@ const UniformityForm = ({
                 <Button
                   type='submit'
                   color='primary'
-                  className='w-full'
+                  className='w-full mt-6'
                   disabled={formik.isSubmitting}
                 >
                   {formik.isSubmitting ? (

From 34f93f8dcccba81677783debee4d15a723bac18c Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 28 Jan 2026 17:54:55 +0700
Subject: [PATCH 08/53] fix(FE): refactor UI Dashboard pixel perfect figma

---
 src/components/Card.tsx                       |   7 +-
 src/components/Navbar.tsx                     |   6 +-
 src/components/helper/ButtonFilter.tsx        |  12 +-
 .../pages/dashboard/DashboardProduction.tsx   | 298 +++++++++++++-----
 .../dashboard/chart/DashboardLineChart.tsx    | 138 +++++---
 .../pages/dashboard/chart/DashboardStats.tsx  |  57 ++--
 .../DashboardExportCharts.tsx}                |  14 +-
 .../dashboard/export/DashboardExportStats.tsx | 201 ++++++++++++
 .../pages/dashboard/export/DashboardPDF.ts    |  58 ++--
 .../skeleton/DashboardLineChartSkeleton.tsx   | 138 ++++----
 src/stores/ui/slices/navbar.slice.ts          |  22 ++
 src/stores/ui/ui.store.ts                     |   2 +
 src/types/stores.d.ts                         |  12 +-
 13 files changed, 716 insertions(+), 249 deletions(-)
 rename src/components/pages/dashboard/{chart/DashboardAllCharts.tsx => export/DashboardExportCharts.tsx} (97%)
 create mode 100644 src/components/pages/dashboard/export/DashboardExportStats.tsx
 create mode 100644 src/stores/ui/slices/navbar.slice.ts

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e04fa4c7..c78766e1 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -22,6 +22,7 @@ export interface CardProps
   onCollapsedChange?: (collapsed: boolean) => void;
   className?: {
     wrapper?: string;
+    wrapperContent?: string;
     image?: string;
     body?: string;
     title?: string;
@@ -144,6 +145,10 @@ const Card = ({
     return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
+  const getWrapperContentClasses = () => {
+    return cn('space-y-4', className?.wrapperContent);
+  };
+
   const renderCardContent = () => {
     const hasContent = children || actions || footer;
 
@@ -177,7 +182,7 @@ const Card = ({
     );
 
     const cardContent = (
-      <div className='space-y-4'>
+      <div className={getWrapperContentClasses()}>
         {children}
         {actions && <div className={getActionsClasses()}>{actions}</div>}
         {footer && <div className={getFooterClasses()}>{footer}</div>}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 4998ca66..ce17f6b8 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -12,6 +12,7 @@ import PopoverContent from '@/components/popover/PopoverContent';
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
 import { isResponseError } from '@/lib/api-helper';
+import { useUiStore } from '@/stores/ui/ui.store';
 
 interface NavbarProps {
   toggleSidebar?: () => void;
@@ -21,6 +22,7 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
   const { setUser } = useAuth();
   const router = useRouter();
   const pathname = usePathname();
+  const navbarActions = useUiStore((state) => state.navbarActions);
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
@@ -53,7 +55,9 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
         </div>
       </div>
 
-      <div className='flex gap-2'>
+      <div className='flex gap-2 items-center'>
+        {/* Page-specific actions */}
+        {navbarActions && <div className='mr-2'>{navbarActions}</div>}
         <PopoverButton
           tabIndex={0}
           variant='ghost'
diff --git a/src/components/helper/ButtonFilter.tsx b/src/components/helper/ButtonFilter.tsx
index 90343fed..aca86a88 100644
--- a/src/components/helper/ButtonFilter.tsx
+++ b/src/components/helper/ButtonFilter.tsx
@@ -9,15 +9,21 @@ export type ButtonFilterProps = ButtonProps & {
   onClick: () => void;
 };
 
+// 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
+
 const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
   return (
     <Button
       {...props}
       onClick={onClick}
+      variant='outline'
+      color='none'
       className={cn(
+        'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+        'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
         getFilledFormikValuesCount(values) > 0
-          ? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
-          : '',
+          ? 'border-primary-gradient !rounded-[8px]'
+          : '!rounded-[8px]',
         props.className
       )}
     >
@@ -31,7 +37,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       />
       Filter
       {getFilledFormikValuesCount(values) > 0 && (
-        <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
+        <span className='w-[20px] h-[20px] text-white bg-[#FF3535] rounded-[8px] border-[1px] border-base-300 flex items-center justify-center text-xs'>
           {getFilledFormikValuesCount(values)}
         </span>
       )}
diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index c2b62473..3631d4ca 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -21,9 +21,9 @@ import {
 } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
 import DashboardLineChart from '@/components/pages/dashboard/chart/DashboardLineChart';
 import DashboardLineChartSkeleton from '@/components/pages/dashboard/skeleton/DashboardLineChartSkeleton';
-import DashboardAllCharts, {
-  DashboardAllChartsRef,
-} from '@/components/pages/dashboard/chart/DashboardAllCharts';
+import DashboardExportCharts, {
+  DashboardExportChartsRef,
+} from '@/components/pages/dashboard/export/DashboardExportCharts';
 import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
 import {
   DashboardFilter,
@@ -40,6 +40,11 @@ import MenuItem from '@/components/menu/MenuItem';
 import { useDashboardStore } from '@/stores/dashboard';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+import { useUiStore } from '@/stores/ui/ui.store';
+import { cn } from '@/lib/helper';
+import DashboardExportStats, {
+  DashboardExportStatsRef,
+} from '@/components/pages/dashboard/export/DashboardExportStats';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -59,6 +64,10 @@ const DashboardProduction = () => {
   const { filterValues, setFilterValues, resetFilterValues } =
     useDashboardStore();
 
+  // ===== UI STORE (for navbar actions) =====
+  const setNavbarActions = useUiStore((state) => state.setNavbarActions);
+  const clearNavbarActions = useUiStore((state) => state.clearNavbarActions);
+
   const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
     (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
   );
@@ -67,9 +76,8 @@ const DashboardProduction = () => {
     normalizeToArray(filterValues.location)
   );
   const [exporting, setExporting] = useState(false);
-  const statsRef = useRef<HTMLDivElement>(null);
-  const chartRef = useRef<HTMLDivElement>(null);
-  const allChartsRef = useRef<DashboardAllChartsRef>(null);
+  const allChartsRef = useRef<DashboardExportChartsRef>(null);
+  const allStatsRef = useRef<DashboardExportStatsRef>(null);
 
   // ===== FETCH DATA =====
   const {
@@ -194,12 +202,67 @@ const DashboardProduction = () => {
   const handleExportPDF = async () => {
     await generateDashboardPDF({
       filterValues: formik.values,
-      statsRef,
+      allStatsRef,
       allChartsRef,
       setExporting,
     });
   };
 
+  // ===== Register Navbar Actions =====
+  const openFilterModalRef = useRef(filterModal.openModal);
+  openFilterModalRef.current = filterModal.openModal;
+
+  useEffect(() => {
+    setNavbarActions(
+      <div className='hidden sm:flex flex-row justify-end gap-[12px] '>
+        <ButtonFilter
+          values={{
+            ...formik.values,
+            analysisMode: undefined,
+          }}
+          variant='outline'
+          onClick={() => openFilterModalRef.current()}
+        />
+        <Dropdown
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              className={cn(
+                'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+              )}
+            >
+              <Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
+              Export
+              <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
+                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              </div>
+            </Button>
+          }
+          className={{
+            content: 'w-full',
+          }}
+        >
+          <Menu className={exporting ? 'hidden' : ''}>
+            <MenuItem
+              className='text-sm padding-[12px]'
+              title='PDF'
+              onClick={handleExportPDF}
+            />
+          </Menu>
+        </Dropdown>
+      </div>
+    );
+  }, [formik.values, exporting, setNavbarActions]);
+
+  // Cleanup only on unmount
+  useEffect(() => {
+    return () => {
+      clearNavbarActions();
+    };
+  }, [clearNavbarActions]);
+
   if (isLoadingDashboardProductionData) {
     return (
       <div className='w-full min-h-screen flex items-center justify-center'>
@@ -210,48 +273,59 @@ const DashboardProduction = () => {
 
   return (
     <>
-      <section className='w-full p-4 space-y-6'>
-        <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
-          <div></div>
-
-          <div className='flex flex-row justify-end gap-2'>
-            <ButtonFilter
-              values={{
-                ...formik.values,
-                analysisMode: undefined,
-              }}
-              variant='outline'
-              className='min-w-28 rounded-lg'
-              onClick={() => filterModal.openModal()}
-            />
-            <Dropdown
-              trigger={
-                <Button variant='outline' className='min-w-28 rounded-lg z-50'>
-                  <Icon icon='heroicons:arrow-down-tray' />
-                  Export
-                  <Icon icon='heroicons:chevron-down' />
-                </Button>
-              }
-              className={{
-                content: 'w-full',
-              }}
-            >
-              <Menu className={exporting ? 'hidden' : ''}>
-                <MenuItem title='PDF' onClick={handleExportPDF} />
-              </Menu>
-            </Dropdown>
-          </div>
+      <section className='w-full p-[12px] space-y-[12px]'>
+        <div className='flex sm:hidden flex-row justify-end gap-[12px] '>
+          <ButtonFilter
+            values={{
+              ...formik.values,
+              analysisMode: undefined,
+            }}
+            variant='outline'
+            onClick={() => openFilterModalRef.current()}
+          />
+          <Dropdown
+            trigger={
+              <Button
+                variant='outline'
+                color='none'
+                className={cn(
+                  'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+                  'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+                )}
+              >
+                <Icon
+                  width={20}
+                  height={20}
+                  icon='heroicons:cloud-arrow-down'
+                />
+                Export
+                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
+                  <Icon width={14} height={14} icon='heroicons:chevron-down' />
+                </div>
+              </Button>
+            }
+            className={{
+              content: 'w-full',
+            }}
+          >
+            <Menu className={exporting ? 'hidden' : ''}>
+              <MenuItem
+                className='text-sm padding-[12px]'
+                title='PDF'
+                onClick={handleExportPDF}
+              />
+            </Menu>
+          </Dropdown>
         </div>
-
         {/* Dashboard Stats */}
-        <div ref={statsRef}>
+        <div>
           <DashboardStats
             data={dashboardProductionData?.statistics_data ?? []}
           />
         </div>
 
         {/* Use DashboardLineChart component or skeleton */}
-        <div ref={chartRef}>
+        <div>
           {isLoadingDashboardProductionData ? (
             <DashboardLineChartSkeleton />
           ) : dashboardProductionData &&
@@ -287,28 +361,46 @@ const DashboardProduction = () => {
 
         {/* Hidden container for all charts (used for PDF export in OVERVIEW mode) */}
         {dashboardProductionData && (
-          <div
-            style={{
-              position: 'absolute',
-              left: '-9999px',
-              top: 0,
-              width: '1200px', // Fixed width for consistent PDF rendering
-            }}
-          >
-            <DashboardAllCharts
-              ref={allChartsRef}
-              data={dashboardProductionData}
-              analysisMode={
-                isResponseSuccess(dashboardProductionResponse)
-                  ? dashboardProductionResponse.meta
-                    ? (
-                        dashboardProductionResponse.meta as unknown as DashboardMeta
-                      ).filters?.analysis_mode
+          <>
+            {/* Export Stats Charts */}
+            <div
+              style={{
+                position: 'absolute',
+                left: '-9999px',
+                top: 0,
+                width: '1200px', // Fixed width for consistent PDF rendering
+              }}
+            >
+              <DashboardExportStats
+                ref={allStatsRef}
+                data={dashboardProductionData?.statistics_data ?? []}
+              />
+            </div>
+
+            {/* Export ALL Charts */}
+            <div
+              style={{
+                position: 'absolute',
+                left: '-9999px',
+                top: 0,
+                width: '1200px', // Fixed width for consistent PDF rendering
+              }}
+            >
+              <DashboardExportCharts
+                ref={allChartsRef}
+                data={dashboardProductionData}
+                analysisMode={
+                  isResponseSuccess(dashboardProductionResponse)
+                    ? dashboardProductionResponse.meta
+                      ? (
+                          dashboardProductionResponse.meta as unknown as DashboardMeta
+                        ).filters?.analysis_mode
+                      : analysisMode
                     : analysisMode
-                  : analysisMode
-              }
-            />
-          </div>
+                }
+              />
+            </div>
+          </>
         )}
       </section>
 
@@ -319,30 +411,32 @@ const DashboardProduction = () => {
           modalBox: 'p-0 rounded-xl',
         }}
       >
-        <div className='space-y-6'>
+        <div className='space-y-[16px]'>
           {/* Modal Header */}
-          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300'>
-            <div className='flex items-center gap-2 ms-4'>
+          <div className='flex items-center justify-between gap-[8px] py-[16px] border-b border-[#E5E7EB]'>
+            <div className='flex items-center gap-[8px] ms-[16px] text-[#0069E0]'>
               <Icon icon='heroicons:funnel' width={20} height={20} />
               <h3 className='font-semibold'>Filter Data</h3>
             </div>
             <Button
               variant='link'
               onClick={() => filterModal.closeModal()}
-              className='text-gray-500 hover:text-gray-700 me-4 '
+              className='text-gray-500 hover:text-gray-700 me-[16px]'
             >
               <Icon icon='heroicons:x-mark' width={20} height={20} />
             </Button>
           </div>
 
           <form
-            className='space-y-4'
+            className='space-y-[8px]'
             onSubmit={handleFormSubmit}
             onReset={handleResetFilter}
           >
             {/* Rentang Waktu */}
-            <div className='px-4'>
-              <label className='flex items-center gap-2 mb-3'>Tanggal</label>
+            <div className='px-[16px]'>
+              <label className='flex text-xs items-center gap-2 mb-[8px] font-semibold'>
+                Tanggal
+              </label>
               <div className='flex items-start gap-2'>
                 <DateInput
                   name='startDate'
@@ -351,14 +445,17 @@ const DashboardProduction = () => {
                   errorMessage={formik.errors.startDate}
                   onChange={formik.handleChange}
                   className={{
-                    inputWrapper: 'rounded-lg',
+                    inputWrapper:
+                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
                   }}
                   isError={
                     Boolean(formik.errors.startDate) &&
                     Boolean(formik.touched.startDate)
                   }
                 />
-                <div className='hidden md:block mt-3 text-center'>—</div>
+                <div className='hidden md:block mt-3 text-center text-[#18181B]/10 '>
+                  —
+                </div>
                 <DateInput
                   name='endDate'
                   placeholder='Tanggal Akhir'
@@ -366,7 +463,8 @@ const DashboardProduction = () => {
                   errorMessage={formik.errors.endDate}
                   onChange={formik.handleChange}
                   className={{
-                    inputWrapper: 'rounded-lg',
+                    inputWrapper:
+                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
                   }}
                   isError={
                     Boolean(formik.errors.endDate) &&
@@ -377,8 +475,10 @@ const DashboardProduction = () => {
             </div>
 
             {/* Analysis Mode */}
-            <div className='px-4'>
-              <label className='block mb-3'>Analysis Mode</label>
+            <div className='px-[16px]'>
+              <label className='block mb-[8px] text-xs font-semibold'>
+                Analysis Mode
+              </label>
               <RadioGroup
                 name='analysisMode'
                 value={formik.values.analysisMode}
@@ -394,7 +494,8 @@ const DashboardProduction = () => {
                 }}
                 color='primary'
                 className={{
-                  wrapper: 'w-full my-6 font-semibold text-neutral-500',
+                  wrapper:
+                    'w-full flex flex-row items-center min-h-[45px] font-medium text-[#18181B]/50',
                 }}
               >
                 <RadioGroupItem
@@ -411,7 +512,7 @@ const DashboardProduction = () => {
             </div>
 
             {formik.values.analysisMode === 'COMPARISON' && (
-              <div className='px-4'>
+              <div className='px-[16px]'>
                 <SelectInputRadio
                   label='Compared By'
                   value={comparisonTypeOptions.find(
@@ -430,12 +531,16 @@ const DashboardProduction = () => {
                     Boolean(formik.errors.comparisonType) &&
                     Boolean(formik.touched.comparisonType)
                   }
+                  className={{
+                    label: 'mb-[8px] text-xs font-semibold',
+                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                  }}
                 />
               </div>
             )}
 
             {/* Location */}
-            <div className='px-4'>
+            <div className='px-[16px]'>
               {comparisonTypeOptions.find(
                 (option) => option.value === formik.values.comparisonType
               )?.value === 'FARM' ? (
@@ -465,6 +570,10 @@ const DashboardProduction = () => {
                     Boolean(formik.errors.location) &&
                     Boolean(formik.touched.location)
                   }
+                  className={{
+                    label: 'mb-[8px] text-xs font-semibold',
+                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                  }}
                 />
               ) : (
                 <SelectInputRadio
@@ -493,6 +602,10 @@ const DashboardProduction = () => {
                     Boolean(formik.errors.location) &&
                     Boolean(formik.touched.location)
                   }
+                  className={{
+                    label: 'mb-[8px] text-xs font-semibold',
+                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                  }}
                 />
               )}
             </div>
@@ -505,7 +618,7 @@ const DashboardProduction = () => {
                 formik.values.comparisonType === 'KANDANG'
               )
             ) && (
-              <div className='px-4'>
+              <div className='px-[16px]'>
                 {comparisonTypeOptions.find(
                   (option) => option.value === formik.values.comparisonType
                 )?.value === 'FLOCK' ? (
@@ -530,6 +643,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.flock) &&
                       Boolean(formik.touched.flock)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 ) : (
                   <SelectInputRadio
@@ -553,6 +670,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.flock) &&
                       Boolean(formik.touched.flock)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 )}
               </div>
@@ -563,7 +684,7 @@ const DashboardProduction = () => {
               formik.values.analysisMode === 'COMPARISON' &&
               !(formik.values.comparisonType === 'KANDANG')
             ) && (
-              <div className='px-4'>
+              <div className='px-[16px]'>
                 {comparisonTypeOptions.find(
                   (option) => option.value === formik.values.comparisonType
                 )?.value === 'KANDANG' ? (
@@ -588,6 +709,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.kandang) &&
                       Boolean(formik.touched.kandang)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 ) : (
                   <SelectInputRadio
@@ -611,6 +736,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.kandang) &&
                       Boolean(formik.touched.kandang)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 )}
               </div>
@@ -621,16 +750,19 @@ const DashboardProduction = () => {
             </div>
 
             {/* Action Buttons */}
-            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
+            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
               <Button
                 type='reset'
                 variant='soft'
-                className='ms-4 min-w-36 rounded-lg'
+                className='ms-4 px-[16px] rounded-[8px] bg-[#F9FAFB] border-[#F9FAFB] text-[#4A5565] hover:bg-[#4A5565]/10'
               >
                 Reset Filter
               </Button>
-              <Button type='submit' className='me-4 min-w-36 rounded-lg'>
-                Terapkan Filter
+              <Button
+                type='submit'
+                className='me-4 min-w-[160px] px-[16px] rounded-[8px]'
+              >
+                Apply Filter
               </Button>
             </div>
           </form>
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index f2449795..6a419cb4 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -151,7 +151,7 @@ const DashboardLineChart = ({
       }}
       variant='bordered'
     >
-      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6'>
+      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-[12px]'>
         <div className='text-lg font-semibold'>
           Performance{' '}
           <Icon
@@ -169,22 +169,24 @@ const DashboardLineChart = ({
               <Button
                 variant='outline'
                 color='none'
-                className='text-neutral-500 hover:text-neutral-700 rounded-lg px-4 py-2 border-neutral-300'
+                className='py-[10px] pl-[12px] pr-[4px] text-[#18181B]/50 rounded-[8px] text-[14px] border-[#18181B]/10 shadow-button-soft'
                 onClick={() => setOpen(!open)}
               >
                 {chartTypeLabels[chartData]}{' '}
-                <div className='divider divider-horizontal p-0 m-0 before:bg-neutral-300 after:bg-neutral-300'></div>
-                <Icon icon='heroicons:chevron-down' width={20} height={20} />
+                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-[#18181B]/10'>
+                  <Icon icon='heroicons:chevron-down' width={14} height={14} />
+                </div>
               </Button>
             }
             className={{
-              content: 'w-52 mt-3',
+              content: '',
             }}
             controlled={open}
           >
             <Menu>
               <MenuItem
                 title='Body weight'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('body_weight');
                   setOpen(!open);
@@ -192,6 +194,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Performance'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('performance');
                   setOpen(!open);
@@ -199,6 +202,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='FCR'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('fcr');
                   setOpen(!open);
@@ -206,6 +210,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Quality Control'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('quality_control');
                   setOpen(!open);
@@ -213,6 +218,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Deplesi'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('deplesi');
                   setOpen(!open);
@@ -248,8 +254,8 @@ const DashboardLineChart = ({
               .includes('std');
 
             return (
-              <button
-                key={series.id}
+              <Button
+                key={`${series.id}-${index}`}
                 onClick={() => {
                   const newVisible = new Set(visibleSeries);
                   if (isVisible) {
@@ -259,14 +265,16 @@ const DashboardLineChart = ({
                   }
                   setVisibleSeries(newVisible);
                 }}
-                className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors ${
+                variant='outline'
+                color='none'
+                className={`flex items-center gap-[8px] px-[12px] py-[10px] rounded-[8px] border transition-colors ${
                   isVisible
-                    ? 'border-neutral-400 bg-neutral-50'
-                    : 'border-neutral-300 hover:bg-neutral-50'
+                    ? 'border-[#18181B]/10 hover:bg-[#18181B]/4'
+                    : 'border-[#18181B]/10 bg-[#18181B]/4'
                 }`}
               >
                 <div
-                  className={`w-6 h-0.5 ${
+                  className={`w-[20px] h-[2px] ${
                     isStandard ? 'border-t-2 border-dashed' : ''
                   } ${!isVisible ? 'opacity-30' : ''}`}
                   style={{
@@ -279,17 +287,17 @@ const DashboardLineChart = ({
                   }}
                 ></div>
                 <span
-                  className={`text-sm ${isVisible ? 'text-neutral-900 font-medium' : 'text-neutral-700'}`}
+                  className={`font-semibold text-[14px] ${isVisible ? 'text-[#18181B]/50' : 'text-[#18181B]/50'}`}
                 >
                   {series.label}
                 </span>
                 <Icon
-                  icon='heroicons:information-circle'
+                  icon='heroicons:eye'
                   width={16}
                   height={16}
-                  className='text-neutral-400'
+                  className='text-[#18181B]/40'
                 />
-              </button>
+              </Button>
             );
           });
         })()}
@@ -335,20 +343,54 @@ const DashboardLineChart = ({
             <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
             <XAxis
               dataKey='week'
-              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tick={{
+                fontSize: 12,
+                fill: '#18181B',
+                opacity: 0.5,
+                fontWeight: 600,
+              }}
               tickLine={false}
-              axisLine={{ stroke: '#e5e7eb' }}
+              axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
               label={{
                 value: 'Weeks',
                 position: 'insideBottom',
                 offset: -5,
-                style: { fontSize: 12, fill: '#9ca3af' },
+                style: {
+                  fontSize: 12,
+                  fill: '#18181B',
+                  opacity: 0.2,
+                  fontWeight: 600,
+                },
               }}
             />
             <YAxis
-              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tick={{
+                fontSize: 12,
+                fill: '#18181B',
+                opacity: 0.5,
+                fontWeight: 600,
+              }}
+              label={
+                chartData === 'body_weight' || chartData === 'performance'
+                  ? {
+                      value:
+                        chartData === 'body_weight'
+                          ? 'Body Weight'
+                          : 'Percentage',
+                      position: 'insideLeft',
+                      angle: -90,
+                      offset: 25,
+                      style: {
+                        fontSize: 12,
+                        fill: '#18181B',
+                        opacity: 0.2,
+                        fontWeight: 600,
+                      },
+                    }
+                  : undefined
+              }
               tickLine={false}
-              axisLine={{ stroke: '#e5e7eb' }}
+              axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
               domain={(() => {
                 // Calculate dynamic domain based on visible data
                 let seriesData: DashboardChartsSeries[] = [];
@@ -399,14 +441,12 @@ const DashboardLineChart = ({
               })()}
               ticks={(() => {
                 // Calculate dynamic ticks based on domain
-                let seriesData: DashboardChartsSeries[] = [];
                 let dataset: DashboardChartsDataset[] = [];
 
                 if (
                   analysisMode === 'OVERVIEW' &&
                   isOverviewCharts(data.charts)
                 ) {
-                  seriesData = data.charts[chartData]?.series || [];
                   dataset = data.charts[chartData]?.dataset || [];
                 } else if (
                   analysisMode === 'COMPARISON' &&
@@ -416,7 +456,6 @@ const DashboardLineChart = ({
                     data.charts.farm ||
                     data.charts.flock ||
                     data.charts.kandang;
-                  seriesData = comparisonChart?.series || [];
                   dataset = comparisonChart?.dataset || [];
                 }
 
@@ -436,6 +475,20 @@ const DashboardLineChart = ({
 
                 const minValue = Math.min(...allValues);
                 const maxValue = Math.max(...allValues);
+
+                // Handle edge case where min equals max
+                if (minValue === maxValue) {
+                  const value = Math.round(minValue);
+                  const padding = Math.max(10, Math.abs(value) * 0.2);
+                  return [
+                    Math.floor(value - padding),
+                    Math.floor(value - padding / 2),
+                    value,
+                    Math.ceil(value + padding / 2),
+                    Math.ceil(value + padding),
+                  ];
+                }
+
                 const padding = (maxValue - minValue) * 0.1;
                 const domainMin = Math.floor(Math.max(0, minValue - padding));
                 const domainMax = Math.ceil(maxValue + padding);
@@ -444,13 +497,16 @@ const DashboardLineChart = ({
                 const range = domainMax - domainMin;
                 const step = range / 4;
 
-                return [
+                // Use Set to ensure unique values
+                const tickSet = new Set([
                   domainMin,
                   Math.round(domainMin + step),
                   Math.round(domainMin + step * 2),
                   Math.round(domainMin + step * 3),
                   domainMax,
-                ];
+                ]);
+
+                return Array.from(tickSet).sort((a, b) => a - b);
               })()}
             />
             <Tooltip
@@ -458,7 +514,7 @@ const DashboardLineChart = ({
                 backgroundColor: '#1f2937',
                 border: 'none',
                 borderRadius: '8px',
-                padding: '8px 12px',
+                padding: '12px 12px',
                 color: 'white',
               }}
               labelStyle={{ color: 'white', marginBottom: '4px' }}
@@ -466,8 +522,8 @@ const DashboardLineChart = ({
               labelFormatter={(value) => `Week ${value}`}
               content={(props) => {
                 return (
-                  <div className='flex flex-col gap-2 rounded-lg bg-neutral-950 p-4  text-white'>
-                    <p className='text-neutral-300 text-xs font-semibold text-start'>
+                  <div className='flex flex-col gap-[6px] rounded-lg bg-neutral-950 p-4  text-white'>
+                    <p className='text-neutral-300 text-[12px] font-semibold text-start'>
                       {analysisMode === 'OVERVIEW'
                         ? selectedKandang
                           ? selectedKandang.label || 'Overview Performance'
@@ -506,12 +562,12 @@ const DashboardLineChart = ({
 
                         return (
                           <li
-                            key={item.name}
-                            className='flex w-full justify-between items-center flex-row gap-6 p-0'
+                            key={`${item.name}-${index}`}
+                            className='flex w-full justify-between items-center flex-row gap-y-[6px] gap-x-[12px] p-0'
                           >
                             <span className='flex flex-row gap-1 items-center'>
                               <div
-                                className='h-4 w-4 m-0 rounded-md'
+                                className='h-[20px] w-[20px] m-0 rounded-[4px]'
                                 style={{
                                   backgroundColor: color,
                                 }}
@@ -526,7 +582,7 @@ const DashboardLineChart = ({
                         );
                       })}
                     </ul>
-                    <p className='text-neutral-300 text-xs text-start'>
+                    <p className='text-neutral-300 text-[12px] text-start'>
                       Week {props.label}
                     </p>
                   </div>
@@ -598,7 +654,7 @@ const DashboardLineChart = ({
 
                   return (
                     <Line
-                      key={series.id}
+                      key={`${series.id}--${index}`}
                       type='monotone'
                       dataKey={dataKey}
                       name={series.label}
@@ -649,13 +705,15 @@ const DashboardLineChart = ({
             return (
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
-                <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
-                  <Icon
-                    icon='heroicons:chart-bar'
-                    className='text-white'
-                    width={24}
-                    height={24}
-                  />
+                <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
+                  <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                    <Icon
+                      icon='heroicons:chart-bar'
+                      className='text-white'
+                      width={20}
+                      height={20}
+                    />
+                  </div>
                 </div>
 
                 {/* Empty state text */}
diff --git a/src/components/pages/dashboard/chart/DashboardStats.tsx b/src/components/pages/dashboard/chart/DashboardStats.tsx
index dcb0707f..13167ba3 100644
--- a/src/components/pages/dashboard/chart/DashboardStats.tsx
+++ b/src/components/pages/dashboard/chart/DashboardStats.tsx
@@ -48,7 +48,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
       icon: isPositive
         ? 'heroicons:arrow-trending-up'
         : 'heroicons:arrow-trending-down',
-      color: isPositive ? 'text-success' : 'text-error',
+      color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
       value: Math.abs(percent),
     };
   };
@@ -60,14 +60,16 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
         {prefix}
         {formatNumber(value)}
         {suffix && (
-          <span className='text-sm font-normal text-neutral-500'>{suffix}</span>
+          <span className='text-[14px] font-normal text-[#18181B]/50'>
+            {suffix}
+          </span>
         )}
       </>
     );
   };
 
   return (
-    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
+    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-[12px]'>
       {CARD_CONFIG.map((config) => {
         // Find matching data from API
         const cardData = data.find((item) => item.label === config.key);
@@ -78,35 +80,42 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
             <Card
               key={config.key}
               className={{
-                wrapper: 'w-full rounded-lg',
+                wrapper:
+                  'w-full rounded-[12px] border-[1px] border-[#18181B]/10',
                 body: 'p-0',
+                wrapperContent:
+                  'h-full flex flex-col items-between justify-between',
+                footer: '!mt-0',
               }}
               variant='bordered'
               footer={
-                <div className='flex flex-row justify-between px-4 pb-4'>
-                  <div className='text-neutral-400 font-semibold text-sm'>
+                <div className='flex flex-row justify-between px-[16px] pb-[16px] max-h-[48px]'>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
                     From last month
                   </div>
-                  <div className='text-neutral-400 font-semibold text-sm'>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
                     Filter Required
                   </div>
                 </div>
               }
             >
-              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
-                <Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
+              <div className='flex flex-row items-center gap-4 px-4 py-4'>
+                <Alert
+                  variant='soft'
+                  className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                >
                   <Icon
                     icon={config.icon}
-                    width={32}
-                    height={32}
-                    className='text-neutral-400'
+                    width={24}
+                    height={24}
+                    className='text-[#18181B]/50'
                   />
                 </Alert>
                 <div>
-                  <h3 className='text-neutral-400 font-semibold text-sm'>
+                  <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
                     {config.key}
                   </h3>
-                  <p className='text-2xl font-semibold text-neutral-400'>
+                  <p className='text-[20px] font-semibold text-[#18181B]/50'>
                     ********
                   </p>
                 </div>
@@ -121,17 +130,21 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
           <Card
             key={config.key}
             className={{
-              wrapper: 'w-full rounded-lg',
+              wrapper:
+                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
               body: 'p-0',
+              wrapperContent:
+                'h-full flex flex-col items-between justify-between',
+              footer: '!mt-0',
             }}
             variant='bordered'
             footer={
-              <div className='flex flex-row justify-between px-4 pb-4'>
-                <div className='text-neutral-500 font-semibold text-sm'>
+              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
+                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
                   From last month
                 </div>
                 <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
                 >
                   <Icon icon={trend.icon} width={16} height={16} />
                   {trend.value}%
@@ -143,15 +156,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
               <Alert
                 variant='soft'
                 color={config.alertColor}
-                className='rounded-lg p-3'
+                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
               >
-                <Icon icon={config.icon} width={32} height={32} />
+                <Icon icon={config.icon} width={24} height={24} />
               </Alert>
               <div>
-                <h3 className='text-neutral-500 font-semibold text-sm'>
+                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
                   {cardData.label}
                 </h3>
-                <p className='text-2xl font-semibold'>
+                <p className='text-[20px] font-semibold'>
                   {formatValue(cardData.value, config.prefix, config.suffix)}
                 </p>
               </div>
diff --git a/src/components/pages/dashboard/chart/DashboardAllCharts.tsx b/src/components/pages/dashboard/export/DashboardExportCharts.tsx
similarity index 97%
rename from src/components/pages/dashboard/chart/DashboardAllCharts.tsx
rename to src/components/pages/dashboard/export/DashboardExportCharts.tsx
index fe0db0a7..c89014d8 100644
--- a/src/components/pages/dashboard/chart/DashboardAllCharts.tsx
+++ b/src/components/pages/dashboard/export/DashboardExportCharts.tsx
@@ -17,12 +17,12 @@ import {
   YAxis,
 } from 'recharts';
 
-type DashboardAllChartsProps = {
+type DashboardExportChartsProps = {
   data: Dashboard;
   analysisMode: string;
 };
 
-export type DashboardAllChartsRef = {
+export type DashboardExportChartsRef = {
   getChartRefs: () => {
     key: string;
     ref: HTMLDivElement | null;
@@ -99,9 +99,9 @@ const chartTypeLabels: Record<keyof DashboardOverviewCharts, string> = {
   deplesi: 'Deplesi',
 };
 
-const DashboardAllCharts = forwardRef<
-  DashboardAllChartsRef,
-  DashboardAllChartsProps
+const DashboardExportCharts = forwardRef<
+  DashboardExportChartsRef,
+  DashboardExportChartsProps
 >(({ data, analysisMode }, ref) => {
   // Create refs for charts - use string keys for flexibility
   const chartRefs = useRef<{
@@ -338,6 +338,6 @@ const DashboardAllCharts = forwardRef<
   );
 });
 
-DashboardAllCharts.displayName = 'DashboardAllCharts';
+DashboardExportCharts.displayName = 'DashboardExportCharts';
 
-export default DashboardAllCharts;
+export default DashboardExportCharts;
diff --git a/src/components/pages/dashboard/export/DashboardExportStats.tsx b/src/components/pages/dashboard/export/DashboardExportStats.tsx
new file mode 100644
index 00000000..9d783313
--- /dev/null
+++ b/src/components/pages/dashboard/export/DashboardExportStats.tsx
@@ -0,0 +1,201 @@
+import Alert from '@/components/Alert';
+import Card from '@/components/Card';
+import { formatNumber } from '@/lib/helper';
+import {
+  DashboardOverviewCharts,
+  DashboardStatisticsData,
+} from '@/types/api/dashboard/dashboard';
+import { Icon } from '@iconify/react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+interface DashboardStatsProps {
+  data: DashboardStatisticsData[];
+}
+export type DashboardExportStatsRef = {
+  getStatsRefs: () => {
+    key: string;
+    ref: HTMLDivElement | null;
+    label: string;
+  }[];
+  getContainerRef: () => HTMLDivElement | null;
+};
+
+// Konfigurasi untuk setiap kartu
+const CARD_CONFIG = [
+  {
+    key: 'HPP Global',
+    icon: 'heroicons:banknotes',
+    alertColor: 'warning' as const,
+    suffix: ' /Kg',
+    prefix: 'RP ',
+  },
+  {
+    key: 'Avg. Selling Price',
+    icon: 'heroicons:document-currency-dollar',
+    alertColor: 'success' as const,
+    suffix: ' /Kg',
+    prefix: '',
+  },
+  {
+    key: 'FCR',
+    icon: 'heroicons:clipboard-document-list',
+    alertColor: 'info' as const,
+    suffix: '',
+    prefix: '',
+  },
+  {
+    key: 'Mortality',
+    icon: 'heroicons:exclamation-triangle',
+    alertColor: 'error' as const,
+    suffix: ' %',
+    prefix: '',
+  },
+];
+
+const DashboardExportStats = forwardRef<
+  DashboardExportStatsRef,
+  DashboardStatsProps
+>(({ data }, ref) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Helper to get trend icon and color
+  const getTrendDisplay = (percent: number) => {
+    const isPositive = percent >= 0;
+    return {
+      icon: isPositive
+        ? 'heroicons:arrow-trending-up'
+        : 'heroicons:arrow-trending-down',
+      color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
+      value: Math.abs(percent),
+    };
+  };
+
+  // Helper to format value
+  const formatValue = (value: number, prefix: string, suffix: string) => {
+    return (
+      <>
+        {prefix}
+        {formatNumber(value)}
+        {suffix && (
+          <span className='text-[14px] font-normal text-[#18181B]/50'>
+            {suffix}
+          </span>
+        )}
+      </>
+    );
+  };
+
+  // Expose container ref through imperative handle
+  useImperativeHandle(ref, () => ({
+    getStatsRefs: () => [],
+    getContainerRef: () => containerRef.current,
+  }));
+
+  return (
+    <div ref={containerRef} className='grid grid-cols-4 gap-[12px]'>
+      {CARD_CONFIG.map((config) => {
+        // Find matching data from API
+        const cardData = data.find((item) => item.label === config.key);
+
+        if (!cardData) {
+          // Show placeholder card for missing data (FCR & Mortality)
+          return (
+            <Card
+              key={config.key}
+              className={{
+                wrapper: 'w-full rounded-lg',
+                body: 'p-0',
+                wrapperContent:
+                  'h-full flex flex-col items-between justify-between',
+                footer: '!mt-0',
+              }}
+              variant='bordered'
+              footer={
+                <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                    From last month
+                  </div>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                    Filter Required
+                  </div>
+                </div>
+              }
+            >
+              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+                <Alert
+                  variant='soft'
+                  className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                >
+                  <Icon
+                    icon={config.icon}
+                    width={24}
+                    height={24}
+                    className='text-[#18181B]/50'
+                  />
+                </Alert>
+                <div>
+                  <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                    {config.key}
+                  </h3>
+                  <p className='text-[20px] font-semibold text-[#18181B]/50'>
+                    ********
+                  </p>
+                </div>
+              </div>
+            </Card>
+          );
+        }
+
+        const trend = getTrendDisplay(cardData.percent_last_month);
+
+        return (
+          <Card
+            key={config.key}
+            className={{
+              wrapper:
+                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
+              body: 'p-0',
+              wrapperContent:
+                'h-full flex flex-col items-between justify-between',
+              footer: '!mt-0',
+            }}
+            variant='bordered'
+            footer={
+              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
+                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                  From last month
+                </div>
+                <div
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
+                >
+                  <Icon icon={trend.icon} width={16} height={16} />
+                  {trend.value}%
+                </div>
+              </div>
+            }
+          >
+            <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+              <Alert
+                variant='soft'
+                color={config.alertColor}
+                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+              >
+                <Icon icon={config.icon} width={24} height={24} />
+              </Alert>
+              <div>
+                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                  {cardData.label}
+                </h3>
+                <p className='text-[20px] font-semibold'>
+                  {formatValue(cardData.value, config.prefix, config.suffix)}
+                </p>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+});
+
+DashboardExportStats.displayName = 'DashboardExportStats';
+
+export default DashboardExportStats;
diff --git a/src/components/pages/dashboard/export/DashboardPDF.ts b/src/components/pages/dashboard/export/DashboardPDF.ts
index 17c5bde4..8b4c7e6a 100644
--- a/src/components/pages/dashboard/export/DashboardPDF.ts
+++ b/src/components/pages/dashboard/export/DashboardPDF.ts
@@ -3,18 +3,19 @@ import { toPng } from 'html-to-image';
 import toast from 'react-hot-toast';
 import { formatDate } from '@/lib/helper';
 import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
-import { DashboardAllChartsRef } from '@/components/pages/dashboard/chart/DashboardAllCharts';
+import { DashboardExportChartsRef } from '@/components/pages/dashboard/export/DashboardExportCharts';
+import { DashboardExportStatsRef } from '@/components/pages/dashboard/export/DashboardExportStats';
 
 interface DashboardPDFExportParams {
   filterValues: DashboardFilterType;
-  statsRef: React.RefObject<HTMLDivElement | null>;
-  allChartsRef: React.RefObject<DashboardAllChartsRef | null>;
+  allStatsRef: React.RefObject<DashboardExportStatsRef | null>;
+  allChartsRef: React.RefObject<DashboardExportChartsRef | null>;
   setExporting: (value: boolean) => void;
 }
 
 export const generateDashboardPDF = async ({
   filterValues,
-  statsRef,
+  allStatsRef,
   allChartsRef,
   setExporting,
 }: DashboardPDFExportParams): Promise<void> => {
@@ -168,31 +169,34 @@ export const generateDashboardPDF = async ({
     yPosition += 10;
 
     // Capture and add stats if available
-    if (statsRef.current) {
-      const statsImage = await toPng(statsRef.current, {
-        quality: 1,
-        pixelRatio: 2,
-      });
-      const statsImgProps = pdf.getImageProperties(statsImage);
-      const statsWidth = pageWidth - 2 * margin;
-      const statsHeight =
-        (statsImgProps.height * statsWidth) / statsImgProps.width;
+    if (allStatsRef.current) {
+      const statsContainer = allStatsRef.current.getContainerRef();
+      if (statsContainer) {
+        const statsImage = await toPng(statsContainer, {
+          quality: 1,
+          pixelRatio: 2,
+        });
+        const statsImgProps = pdf.getImageProperties(statsImage);
+        const statsWidth = pageWidth - 2 * margin;
+        const statsHeight =
+          (statsImgProps.height * statsWidth) / statsImgProps.width;
 
-      // Check if we need a new page
-      if (yPosition + statsHeight > pageHeight - margin) {
-        pdf.addPage();
-        yPosition = margin;
+        // Check if we need a new page
+        if (yPosition + statsHeight > pageHeight - margin) {
+          pdf.addPage();
+          yPosition = margin;
+        }
+
+        pdf.addImage(
+          statsImage,
+          'PNG',
+          margin,
+          yPosition,
+          statsWidth,
+          statsHeight
+        );
+        yPosition += statsHeight + 10;
       }
-
-      pdf.addImage(
-        statsImage,
-        'PNG',
-        margin,
-        yPosition,
-        statsWidth,
-        statsHeight
-      );
-      yPosition += statsHeight + 10;
     }
 
     if (allChartsRef.current) {
diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
index b479eced..d2999544 100644
--- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
@@ -3,94 +3,104 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard';
 
 const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
   return (
-    <div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
+    <div className='w-full bg-white rounded-[12px] border border-[#18181B]/10 p-[16px] relative'>
       {/* Header with title skeleton */}
-      <div className='text-lg font-semibold'>
+      <div className='text-[16px] font-semibold'>
         Performance{' '}
         <Icon
           icon='heroicons:information-circle'
           width={20}
           height={20}
-          className='inline text-neutral-500'
+          className='inline text-[#18181B]/50'
         />
       </div>
 
       {/* Chart area with axes skeleton */}
-      <div className='relative mt-6'>
-        {/* Main chart container */}
-        <div className='flex gap-4'>
-          {/* Y-axis skeleton (left side) */}
-          <div className='flex flex-col justify-between py-4 space-y-4'>
-            {[1, 2, 3, 4, 5, 6].map((item) => (
-              <div
-                key={item}
-                className='h-4 w-12 bg-gray-100 rounded animate-pulse'
-              ></div>
-            ))}
-          </div>
-
-          {/* Chart content area */}
-          <div className='flex-1 relative'>
-            {/* Empty state centered in chart area */}
-            <div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
-              {!meta?.filters && (
-                <>
-                  {/* Filter icon */}
-                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
-                    <Icon
-                      icon='heroicons:funnel'
-                      className='text-white'
-                      width={24}
-                      height={24}
-                    />
+      <div className='relative mt-6 '>
+        {/* Chart content area */}
+        <div className='flex-1 relative'>
+          {/* Empty state centered in chart area */}
+          <div className='absolute inset-0 flex flex-col items-center justify-center pb-10'>
+            {!meta?.filters && (
+              <>
+                {/* Filter icon */}
+                <div className='mb-[9px]'>
+                  <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                    <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                      <Icon
+                        icon='heroicons:funnel'
+                        className='text-white'
+                        width={20}
+                        height={20}
+                      />
+                    </div>
                   </div>
+                </div>
 
-                  {/* Empty state text */}
-                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
-                    No Filters Selected
-                  </h3>
-                  <p className='text-gray-500 text-sm text-center max-w-xs'>
-                    Please choose filters to narrow down your results and make
-                    your search easier.
-                  </p>
-                </>
-              )}
-              {meta?.filters && (
-                <>
-                  {/* Filter icon */}
-                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                {/* Empty state text */}
+                <h3 className='text-[#18181B]/50 font-semibold text-[14px] mb-[4px]'>
+                  No Filters Selected
+                </h3>
+                <p className='text-[#18181B]/50 text-[12px] text-center max-w-xs'>
+                  Please choose filters to narrow down your results and make
+                  your search easier.
+                </p>
+              </>
+            )}
+            {meta?.filters && (
+              <>
+                {/* Filter icon */}
+                <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
+                  <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
-                      width={24}
-                      height={24}
+                      width={20}
+                      height={20}
                     />
                   </div>
+                </div>
 
-                  {/* Empty state text */}
-                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
-                    Data Not Yet Available
-                  </h3>
-                  <p className='text-gray-500 text-sm text-center max-w-xs'>
-                    Please change your filters to get the data.
-                  </p>
-                </>
-              )}
+                {/* Empty state text */}
+                <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                  Data Not Yet Available
+                </h3>
+                <p className='text-gray-500 text-sm text-center max-w-xs'>
+                  Please change your filters to get the data.
+                </p>
+              </>
+            )}
+          </div>
+
+          <div className='flex flex-row w-full items-center gap-[16px]'>
+            <div className='flex-1 h-full min-w-[16px]'>
+              <div className='h-[114px] w-[16x] bg-[#18181B]/4 rounded-[4px]'></div>
             </div>
-
-            {/* Placeholder for chart height */}
-            <div className='h-64'></div>
-
-            {/* X-axis skeleton (bottom) */}
-            <div className='flex justify-between pt-4 border-t border-gray-100'>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
+            <div className='w-full grid grid-cols-1 gap-y-[53px] mb-[8px]'>
+              {[1, 2, 3, 4].map((item) => (
                 <div
                   key={item}
-                  className='h-4 w-8 bg-gray-100 rounded animate-pulse'
-                ></div>
+                  className='flex items-center w-full h-[16px] gap-[16px]'
+                >
+                  <div className='h-[16px] w-[24px] bg-[#18181B]/4 rounded-[4px]'></div>
+                  <div className='h-[1px] w-full bg-[#18181B]/4 rounded-[4px]'></div>
+                </div>
               ))}
             </div>
           </div>
+
+          {/* X-axis skeleton (bottom) */}
+          <div className='grid grid-cols-10 gap-[60px] mt-[16px] ps-[52px] sm:ps-[104px] overflow-x-hidden'>
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
+              <div
+                key={item}
+                className='h-[16px] w-[37px] bg-[#18181B]/4 rounded-[4px]'
+              ></div>
+            ))}
+          </div>
+          <div className='flex justify-center pt-[16px] ps-[52px] sm:ps-[104px]'>
+            <div className='h-[16px] w-[114px] bg-[#18181B]/4 rounded-[4px]'></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/stores/ui/slices/navbar.slice.ts b/src/stores/ui/slices/navbar.slice.ts
new file mode 100644
index 00000000..2db6f547
--- /dev/null
+++ b/src/stores/ui/slices/navbar.slice.ts
@@ -0,0 +1,22 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { StateCreator } from 'zustand';
+import { UIStore } from '@/types/stores';
+
+type NavbarActionsSlice = {
+  navbarActions: ReactNode | null;
+  setNavbarActions: (actions: ReactNode) => void;
+  clearNavbarActions: () => void;
+};
+
+export const createNavbarActionsSlice: StateCreator<
+  UIStore,
+  [],
+  [],
+  NavbarActionsSlice
+> = (set) => ({
+  navbarActions: null,
+  setNavbarActions: (actions) => set({ navbarActions: actions }),
+  clearNavbarActions: () => set({ navbarActions: null }),
+});
diff --git a/src/stores/ui/ui.store.ts b/src/stores/ui/ui.store.ts
index 05adbb9b..46c70283 100644
--- a/src/stores/ui/ui.store.ts
+++ b/src/stores/ui/ui.store.ts
@@ -7,6 +7,7 @@ import { UIStore } from '@/types/stores';
 import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
 import { createDrawerUISlice } from '@/stores/ui/slices/drawer.slice';
 import { createTableUISlice } from '@/stores/ui/slices/table.slice';
+import { createNavbarActionsSlice } from '@/stores/ui/slices/navbar.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
@@ -15,6 +16,7 @@ export const useUiStore = create<UIStore>()(
         ...createMainUiSlice(...args),
         ...createDrawerUISlice(...args),
         ...createTableUISlice(...args),
+        ...createNavbarActionsSlice(...args),
       }),
       {
         name: 'ui-cache',
diff --git a/src/types/stores.d.ts b/src/types/stores.d.ts
index 5b0be6f3..47d2c1fd 100644
--- a/src/types/stores.d.ts
+++ b/src/types/stores.d.ts
@@ -32,7 +32,17 @@ type TableUISlice = {
   resetSearchValue: () => void;
 };
 
-export type UIStore = MainUiSlice & DrawerUISlice & TableUISlice;
+// Navbar Actions Slice
+type NavbarActionsSlice = {
+  navbarActions: ReactNode | null;
+  setNavbarActions: (actions: ReactNode) => void;
+  clearNavbarActions: () => void;
+};
+
+export type UIStore = MainUiSlice &
+  DrawerUISlice &
+  TableUISlice &
+  NavbarActionsSlice;
 
 type ProductionStandardFormSlice = {
   formData: {

From 46cfc2539eb8930ac11da3432c86aede8de6d847 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 28 Jan 2026 17:55:57 +0700
Subject: [PATCH 09/53] fix(FE): remove unused import

---
 src/components/pages/dashboard/DashboardProduction.tsx       | 5 +----
 .../pages/dashboard/export/DashboardExportStats.tsx          | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 3631d4ca..c3cfaf52 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -4,10 +4,7 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import Modal, { useModal } from '@/components/Modal';
 import DateInput from '@/components/input/DateInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import { OptionType, useSelect } from '@/components/input/SelectInput';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
diff --git a/src/components/pages/dashboard/export/DashboardExportStats.tsx b/src/components/pages/dashboard/export/DashboardExportStats.tsx
index 9d783313..3f452d9c 100644
--- a/src/components/pages/dashboard/export/DashboardExportStats.tsx
+++ b/src/components/pages/dashboard/export/DashboardExportStats.tsx
@@ -1,10 +1,7 @@
 import Alert from '@/components/Alert';
 import Card from '@/components/Card';
 import { formatNumber } from '@/lib/helper';
-import {
-  DashboardOverviewCharts,
-  DashboardStatisticsData,
-} from '@/types/api/dashboard/dashboard';
+import { DashboardStatisticsData } from '@/types/api/dashboard/dashboard';
 import { Icon } from '@iconify/react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 interface DashboardStatsProps {

From 0bdf27de2caa980aca9640864fcfdd999d56c2c9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 09:47:30 +0700
Subject: [PATCH 10/53] refactor(FE): Make delivery fields optional in movement
 types

---
 src/types/api/inventory/movement.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index 10a62e5b..e84dead9 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -68,11 +68,11 @@ export type CreateMovementPayloadData = {
     product_qty: number;
   }[];
   deliveries: {
-    delivery_cost: number;
-    delivery_cost_per_item: number;
+    delivery_cost?: number;
+    delivery_cost_per_item?: number;
     document_index?: number;
-    driver_name: string;
-    vehicle_plate: string;
+    driver_name?: string;
+    vehicle_plate?: string;
     supplier_id?: number | null;
     products: {
       product_id: number;

From 737d8e943c5f4c74cbd0eba687f5ad0feca8dec2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 09:48:43 +0700
Subject: [PATCH 11/53] refactor(FE): Make delivery fields nullable and
 optional

---
 .../movement/form/MovementForm.schema.ts      | 58 +++++------
 .../inventory/movement/form/MovementForm.tsx  | 98 +++++++++----------
 2 files changed, 72 insertions(+), 84 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 18161974..c448754a 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -27,12 +27,12 @@ type MovementFormSchemaType = {
     product_qty: number | string;
   }[];
   deliveries: {
-    delivery_cost?: number | string;
-    delivery_cost_per_item?: number | string;
+    delivery_cost?: number | string | null;
+    delivery_cost_per_item?: number | string | null;
     document?: File | MovementDocument | null;
     document_path?: string | null;
-    driver_name: string;
-    vehicle_plate: string;
+    driver_name?: string | null;
+    vehicle_plate?: string | null;
     supplier?: {
       value: number;
       label: string;
@@ -59,12 +59,12 @@ export type ProductSchema = {
 };
 
 export type DeliverySchema = {
-  delivery_cost?: number | string;
-  delivery_cost_per_item?: number | string;
+  delivery_cost?: number | string | null;
+  delivery_cost_per_item?: number | string | null;
   document?: File | MovementDocument | null;
   document_path?: string | null;
-  driver_name: string;
-  vehicle_plate: string;
+  driver_name?: string | null;
+  vehicle_plate?: string | null;
   supplier?: {
     value: number;
     label: string;
@@ -120,32 +120,26 @@ const DeliveryDocumentSchema = Yup.mixed<File | MovementDocument>()
 
 const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
   delivery_cost: Yup.number()
-    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
+    .transform((value) =>
+      isNaN(value) || value === '' || value === null ? undefined : value
+    )
+    .optional()
+    .nullable()
     .min(1, 'Biaya minimal 1!')
-    .typeError('Biaya harus berupa angka!')
-    .test('one-of-cost-fields', 'Wajib diisi salah satu!', function (value) {
-      const { delivery_cost_per_item } = this.parent;
-      return (
-        (value !== undefined && value > 0) ||
-        (delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
-      );
-    }),
+    .typeError('Biaya harus berupa angka!'),
   delivery_cost_per_item: Yup.number()
-    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
+    .transform((value) =>
+      isNaN(value) || value === '' || value === null ? undefined : value
+    )
+    .optional()
+    .nullable()
     .min(1, 'Biaya per item minimal 1!')
-    .typeError('Biaya per item harus berupa angka!')
-    .test('one-of-cost-fields', 'Wajib diisi salah satu!', function (value) {
-      const { delivery_cost } = this.parent;
-      return (
-        (value !== undefined && value > 0) ||
-        (delivery_cost !== undefined && delivery_cost > 0)
-      );
-    }),
+    .typeError('Biaya per item harus berupa angka!'),
   document_path: Yup.string().nullable().optional(),
   document_index: Yup.number().optional(),
   document: DeliveryDocumentSchema,
-  driver_name: Yup.string().required('Nama sopir wajib diisi!'),
-  vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
+  driver_name: Yup.string().optional().nullable(),
+  vehicle_plate: Yup.string().optional().nullable(),
   supplier: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
@@ -279,12 +273,12 @@ export const getMovementFormInitialValues = (
         }) ?? [],
     })) ?? [
       {
-        delivery_cost: undefined,
-        delivery_cost_per_item: undefined,
+        delivery_cost: null,
+        delivery_cost_per_item: null,
         document: null,
         document_path: null,
-        driver_name: '',
-        vehicle_plate: '',
+        driver_name: null,
+        vehicle_plate: null,
         supplier: null,
         supplier_id: 0,
         products: [
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index ef4bc3bb..a5a6cbf9 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -228,19 +228,49 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           }
         }
 
-        return {
-          delivery_cost: parseInt((d.delivery_cost || '').toString()) || 0,
-          delivery_cost_per_item:
-            parseInt((d.delivery_cost_per_item || '').toString()) || 0,
-          document_index: documentIndex,
-          driver_name: d.driver_name,
-          vehicle_plate: d.vehicle_plate,
-          supplier_id: d.supplier_id,
+        const deliveryObj: {
+          products: Array<{ product_id: number; product_qty: number }>;
+          delivery_cost?: number;
+          delivery_cost_per_item?: number;
+          document_index?: number;
+          driver_name?: string;
+          vehicle_plate?: string;
+          supplier_id?: number;
+        } = {
           products: d.products.map((p) => ({
             product_id: p.product_id,
             product_qty: parseInt(p.product_qty.toString()) || 0,
           })),
         };
+
+        const deliveryCost = parseInt((d.delivery_cost || '').toString()) || 0;
+        if (deliveryCost > 0) {
+          deliveryObj.delivery_cost = deliveryCost;
+        }
+
+        const deliveryCostPerItem =
+          parseInt((d.delivery_cost_per_item || '').toString()) || 0;
+        if (deliveryCostPerItem > 0) {
+          deliveryObj.delivery_cost_per_item = deliveryCostPerItem;
+        }
+
+        if (documentIndex >= 0) {
+          deliveryObj.document_index = documentIndex;
+        }
+
+        if (d.driver_name) {
+          deliveryObj.driver_name = d.driver_name;
+        }
+
+        if (d.vehicle_plate) {
+          deliveryObj.vehicle_plate = d.vehicle_plate;
+        }
+
+        if (d.supplier_id) {
+          deliveryObj.supplier_id = d.supplier_id;
+        }
+
+        return deliveryObj;
       });
 
       const payload: CreateMovementPayload = {
@@ -1647,43 +1677,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </span>
                     </th>
                     <th>Supplier</th>
-                    <th>
-                      Plat Nomor
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-9999'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
+                    <th>Plat Nomor</th>
                     <th>Dokumen</th>
-                    <th>
-                      Biaya Pengiriman (Rp.)
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-9999'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>
-                      Biaya Per Item (Rp.)
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-9999'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>
-                      Nama Sopir
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-9999'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
+                    <th>Biaya Pengiriman (Rp.)</th>
+                    <th>Biaya Per Item (Rp.)</th>
+                    <th>Nama Sopir</th>
                     {type !== 'detail' && <th>Aksi</th>}
                   </tr>
                 </thead>
@@ -1780,10 +1778,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </td>
                       <td>
                         <TextInput
-                          required
                           name={`deliveries.${idx}.vehicle_plate`}
                           placeholder='Masukkan plat nomor...'
-                          value={delivery.vehicle_plate}
+                          value={delivery.vehicle_plate ?? ''}
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
                           {...isRepeaterInputError(
@@ -1871,10 +1868,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </td>
                       <td>
                         <NumberInput
-                          required
                           name={`deliveries.${idx}.delivery_cost`}
                           placeholder='Masukkan biaya pengiriman...'
-                          value={delivery.delivery_cost || ''}
+                          value={delivery.delivery_cost ?? ''}
                           onChange={handleDeliveryCostChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           decimalScale={0}
@@ -1895,10 +1891,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </td>
                       <td>
                         <NumberInput
-                          required
                           name={`deliveries.${idx}.delivery_cost_per_item`}
                           placeholder='Masukkan biaya per item...'
-                          value={delivery.delivery_cost_per_item || ''}
+                          value={delivery.delivery_cost_per_item ?? ''}
                           onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           decimalScale={0}
@@ -1919,10 +1914,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </td>
                       <td>
                         <TextInput
-                          required
                           name={`deliveries.${idx}.driver_name`}
                           placeholder='Masukkan nama sopir...'
-                          value={delivery.driver_name}
+                          value={delivery.driver_name ?? ''}
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
                           {...isRepeaterInputError(

From dce913815e485e83121d126b0c65329023294e76 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 29 Jan 2026 10:23:58 +0700
Subject: [PATCH 12/53] chore: adjust styling in Dashboard related components

---
 .../pages/dashboard/DashboardProduction.tsx     | 13 +++++--------
 .../pages/dashboard/chart/DashboardStats.tsx    | 17 ++++++++---------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index c3cfaf52..7339e831 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -441,10 +441,6 @@ const DashboardProduction = () => {
                   value={formik.values.startDate}
                   errorMessage={formik.errors.startDate}
                   onChange={formik.handleChange}
-                  className={{
-                    inputWrapper:
-                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
-                  }}
                   isError={
                     Boolean(formik.errors.startDate) &&
                     Boolean(formik.touched.startDate)
@@ -568,7 +564,6 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.location)
                   }
                   className={{
-                    label: 'mb-[8px] text-xs font-semibold',
                     select: 'rounded-[8px] text-sm border-[#18181B]/10',
                   }}
                 />
@@ -742,9 +737,11 @@ const DashboardProduction = () => {
               </div>
             )}
 
-            <div className='w-full p-4'>
-              <AlertErrorList formErrorList={formErrorList} onClose={close} />
-            </div>
+            {formErrorList.length > 0 && (
+              <div className='w-full p-4'>
+                <AlertErrorList formErrorList={formErrorList} onClose={close} />
+              </div>
+            )}
 
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
diff --git a/src/components/pages/dashboard/chart/DashboardStats.tsx b/src/components/pages/dashboard/chart/DashboardStats.tsx
index 13167ba3..f17e18b0 100644
--- a/src/components/pages/dashboard/chart/DashboardStats.tsx
+++ b/src/components/pages/dashboard/chart/DashboardStats.tsx
@@ -130,8 +130,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
           <Card
             key={config.key}
             className={{
-              wrapper:
-                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
+              wrapper: 'w-full rounded-xl border border-base-content/10',
               body: 'p-0',
               wrapperContent:
                 'h-full flex flex-col items-between justify-between',
@@ -139,12 +138,12 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
             }}
             variant='bordered'
             footer={
-              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
-                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+              <div className='flex flex-row justify-between px-4 pb-4'>
+                <div className='text-base-content/50 font-semibold text-xs'>
                   From last month
                 </div>
                 <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
                 >
                   <Icon icon={trend.icon} width={16} height={16} />
                   {trend.value}%
@@ -156,15 +155,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
               <Alert
                 variant='soft'
                 color={config.alertColor}
-                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                className={`rounded-lg p-3 bg-[${config.alertColor}]/12 flex items-center justify-center`}
               >
                 <Icon icon={config.icon} width={24} height={24} />
               </Alert>
-              <div>
-                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+              <div className='space-y-1'>
+                <h3 className='text-base-content/50 font-semibold text-sm'>
                   {cardData.label}
                 </h3>
-                <p className='text-[20px] font-semibold'>
+                <p className='text-xl font-semibold'>
                   {formatValue(cardData.value, config.prefix, config.suffix)}
                 </p>
               </div>

From 97bf785fe9e2c2a54f409d515c393f1769c6a176 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 10:27:47 +0700
Subject: [PATCH 13/53] refactor(FE): Support inputPrefix/inputSuffix on
 SelectInput

---
 src/components/input/SelectInput.tsx          | 363 +++++++++++++-----
 .../inventory/movement/form/MovementForm.tsx  |  27 +-
 2 files changed, 265 insertions(+), 125 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 419ed314..2a3ff98c 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -54,6 +54,9 @@ interface SelectInputBaseProps<T = OptionType> {
     wrapper?: string;
     label?: string;
     select?: string;
+    inputPrefix?: string;
+    inputSuffix?: string;
+    inputPrefixSuffixWrapper?: string;
   };
   isError?: boolean;
   errorMessage?: string;
@@ -62,6 +65,8 @@ interface SelectInputBaseProps<T = OptionType> {
   delay?: number;
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
   menuPortalTarget?: HTMLElement | null;
   closeMenuOnSelect?: boolean;
   hideSelectedOptions?: boolean;
@@ -153,6 +158,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     createables = false,
     onInputChange,
     startAdornment,
+    inputPrefix,
+    inputSuffix,
     menuPortalTarget,
     closeMenuOnSelect,
     hideSelectedOptions,
@@ -227,111 +234,261 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         </span>
       )}
 
-      <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId='select'
-        value={value ?? (isMulti ? [] : null)}
-        onChange={onChange ? handleChange : undefined}
-        options={options}
-        menuIsOpen={openMenu}
-        inputValue={internalInputValue}
-        onInputChange={internalInputChangeHandler}
-        onMenuClose={() => setInternalInputValue('')}
-        isMulti={isMulti}
-        isDisabled={isDisabled || readOnly}
-        isLoading={isLoading}
-        isClearable={isClearable}
-        isRtl={isRtl}
-        isSearchable={isSearchable}
-        placeholder={placeholder}
-        closeMenuOnSelect={closeMenuOnSelect}
-        hideSelectedOptions={hideSelectedOptions}
-        className={cn('w-full', className?.select)}
-        classNames={{
-          ...(!startAdornment && {
-            control: ({ isFocused, isDisabled }) =>
-              cn('w-full rounded-lg! border bg-white transition-shadow', {
-                'cursor-pointer!': !readOnly && !isDisabled,
-                'border-red-500! ring-2 ring-red-200': isError,
-                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                'border-base-content/10!': !isError && !isFocused,
-                'bg-gray-100 text-gray-400 cursor-not-allowed':
-                  isDisabled && !readOnly,
-                'bg-transparent! cursor-not-allowed!': readOnly,
+      {inputPrefix || inputSuffix ? (
+        <div
+          className={cn(
+            'relative flex text-sm',
+            className?.inputPrefixSuffixWrapper
+          )}
+        >
+          {inputPrefix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
+                {
+                  'bg-gray-100 border-base-content/10': !isDisabled,
+                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'border-error': isError,
+                },
+                className?.inputPrefix
+              )}
+            >
+              {inputPrefix}
+            </div>
+          )}
+
+          <SelectComponent<T, boolean, GroupBase<T>>
+            instanceId='select'
+            value={value ?? (isMulti ? [] : null)}
+            onChange={onChange ? handleChange : undefined}
+            options={options}
+            menuIsOpen={openMenu}
+            inputValue={internalInputValue}
+            onInputChange={internalInputChangeHandler}
+            onMenuClose={() => setInternalInputValue('')}
+            isMulti={isMulti}
+            isDisabled={isDisabled || readOnly}
+            isLoading={isLoading}
+            isClearable={isClearable}
+            isRtl={isRtl}
+            isSearchable={isSearchable}
+            placeholder={placeholder}
+            closeMenuOnSelect={closeMenuOnSelect}
+            hideSelectedOptions={hideSelectedOptions}
+            className={cn('w-full flex-1', className?.select)}
+            classNames={{
+              ...(!startAdornment && {
+                control: ({ isFocused, isDisabled }) =>
+                  cn('w-full rounded-lg! border bg-white transition-shadow', {
+                    'cursor-pointer!': !readOnly && !isDisabled,
+                    'border-red-500! ring-2 ring-red-200': isError,
+                    'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                    'border-base-content/10!': !isError && !isFocused,
+                    'bg-gray-100 text-gray-400 cursor-not-allowed':
+                      isDisabled && !readOnly,
+                    'bg-transparent! cursor-not-allowed!': readOnly,
+                    'rounded-l-none!': inputPrefix,
+                    'rounded-r-none!': inputSuffix,
+                  }),
+                valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
               }),
-            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
-          }),
-          placeholder: () =>
-            cn({
-              'text-gray-400 text-sm leading-tight': !isError,
-              'text-red-300!': isError,
+              placeholder: () =>
+                cn({
+                  'text-gray-400 text-sm leading-tight': !isError,
+                  'text-red-300!': isError,
+                }),
+              singleValue: () =>
+                cn({
+                  'm-0! text-gray-900 text-sm leading-tight': !isError,
+                  'text-error!': isError,
+                  'text-gray-900!': readOnly,
+                }),
+              input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+              indicatorsContainer: () =>
+                cn('flex items-center gap-1 pr-3 py-2'),
+              dropdownIndicator: ({ isFocused }) =>
+                cn('p-0! rounded hover:bg-gray-100', {
+                  'text-gray-900': isFocused,
+                  'text-gray-500': !isFocused,
+                  'text-error!': isError,
+                }),
+              clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
+              menu: () =>
+                cn(
+                  'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
+                ),
+              menuList: () => cn('p-0! max-h-60 overflow-auto'),
+              option: ({ isFocused, isSelected }) =>
+                cn('px-3 py-2 rounded-md cursor-pointer!', {
+                  'bg-indigo-600 text-white': isFocused,
+                  'bg-blue-500!': isSelected,
+                  'text-gray-700': !isFocused && !isSelected,
+                }),
+              multiValue: ({ getValue, index }) => {
+                const selectedValues = getValue() as T[];
+                return cn(
+                  'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
+                  selectedValues[index]?.className
+                );
+              },
+              multiValueRemove: () => cn('p-0! w-3 h-3'),
+              multiValueLabel: ({ getValue, index }) => {
+                const selectedValues = getValue() as T[];
+                return cn(
+                  'p-0! text-base-content! text-xs!',
+                  selectedValues[index]?.labelClassName
+                );
+              },
+            }}
+            components={{
+              ...components,
+              ...(optionComponent ? { Option: optionComponent } : {}),
+              MenuList: CustomMenuList,
+            }}
+            {...(startAdornment && {
+              shouldShowAdornment,
+              startAdornment,
+            })}
+            menuPortalTarget={
+              typeof document !== 'undefined'
+                ? (menuPortalTarget ?? document.body)
+                : undefined
+            }
+            styles={{
+              menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+              multiValue(base) {
+                return {
+                  ...base,
+                  borderRadius: '8px',
+                };
+              },
+            }}
+            onMenuScrollToBottom={onMenuScrollToBottom}
+          />
+
+          {inputSuffix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
+                {
+                  'bg-gray-100 border-base-content/10': !isDisabled,
+                  'bg-gray-50 border-base-content/10': isDisabled,
+                  'border-error': isError,
+                },
+                className?.inputSuffix
+              )}
+            >
+              {inputSuffix}
+            </div>
+          )}
+        </div>
+      ) : (
+        <SelectComponent<T, boolean, GroupBase<T>>
+          instanceId='select'
+          value={value ?? (isMulti ? [] : null)}
+          onChange={onChange ? handleChange : undefined}
+          options={options}
+          menuIsOpen={openMenu}
+          inputValue={internalInputValue}
+          onInputChange={internalInputChangeHandler}
+          onMenuClose={() => setInternalInputValue('')}
+          isMulti={isMulti}
+          isDisabled={isDisabled || readOnly}
+          isLoading={isLoading}
+          isClearable={isClearable}
+          isRtl={isRtl}
+          isSearchable={isSearchable}
+          placeholder={placeholder}
+          closeMenuOnSelect={closeMenuOnSelect}
+          hideSelectedOptions={hideSelectedOptions}
+          className={cn('w-full', className?.select)}
+          classNames={{
+            ...(!startAdornment && {
+              control: ({ isFocused, isDisabled }) =>
+                cn('w-full rounded-lg! border bg-white transition-shadow', {
+                  'cursor-pointer!': !readOnly && !isDisabled,
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-base-content/10!': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
+                }),
+              valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
             }),
-          singleValue: () =>
-            cn({
-              'm-0! text-gray-900 text-sm leading-tight': !isError,
-              'text-error!': isError,
-              'text-gray-900!': readOnly,
-            }),
-          input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
-          indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
-          dropdownIndicator: ({ isFocused }) =>
-            cn('p-0! rounded hover:bg-gray-100', {
-              'text-gray-900': isFocused,
-              'text-gray-500': !isFocused,
-              'text-error!': isError,
-            }),
-          clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
-          menu: () =>
-            cn(
-              'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
-            ),
-          menuList: () => cn('p-0! max-h-60 overflow-auto'),
-          option: ({ isFocused, isSelected }) =>
-            cn('px-3 py-2 rounded-md cursor-pointer!', {
-              'bg-indigo-600 text-white': isFocused,
-              'bg-blue-500!': isSelected,
-              'text-gray-700': !isFocused && !isSelected,
-            }),
-          multiValue: ({ getValue, index }) => {
-            const selectedValues = getValue() as T[];
-            return cn(
-              'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
-              selectedValues[index]?.className
-            );
-          },
-          multiValueRemove: () => cn('p-0! w-3 h-3'),
-          multiValueLabel: ({ getValue, index }) => {
-            const selectedValues = getValue() as T[];
-            return cn(
-              'p-0! text-base-content! text-xs!',
-              selectedValues[index]?.labelClassName
-            );
-          },
-        }}
-        components={{
-          ...components,
-          ...(optionComponent ? { Option: optionComponent } : {}),
-          MenuList: CustomMenuList,
-        }}
-        {...(startAdornment && {
-          shouldShowAdornment,
-          startAdornment,
-        })}
-        menuPortalTarget={
-          typeof document !== 'undefined'
-            ? (menuPortalTarget ?? document.body)
-            : undefined
-        }
-        styles={{
-          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-          multiValue(base) {
-            return {
-              ...base,
-              borderRadius: '8px',
-            };
-          },
-        }}
-        onMenuScrollToBottom={onMenuScrollToBottom}
-      />
+            placeholder: () =>
+              cn({
+                'text-gray-400 text-sm leading-tight': !isError,
+                'text-red-300!': isError,
+              }),
+            singleValue: () =>
+              cn({
+                'm-0! text-gray-900 text-sm leading-tight': !isError,
+                'text-error!': isError,
+                'text-gray-900!': readOnly,
+              }),
+            input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+            indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
+            dropdownIndicator: ({ isFocused }) =>
+              cn('p-0! rounded hover:bg-gray-100', {
+                'text-gray-900': isFocused,
+                'text-gray-500': !isFocused,
+                'text-error!': isError,
+              }),
+            clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
+            menu: () =>
+              cn(
+                'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
+              ),
+            menuList: () => cn('p-0! max-h-60 overflow-auto'),
+            option: ({ isFocused, isSelected }) =>
+              cn('px-3 py-2 rounded-md cursor-pointer!', {
+                'bg-indigo-600 text-white': isFocused,
+                'bg-blue-500!': isSelected,
+                'text-gray-700': !isFocused && !isSelected,
+              }),
+            multiValue: ({ getValue, index }) => {
+              const selectedValues = getValue() as T[];
+              return cn(
+                'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
+                selectedValues[index]?.className
+              );
+            },
+            multiValueRemove: () => cn('p-0! w-3 h-3'),
+            multiValueLabel: ({ getValue, index }) => {
+              const selectedValues = getValue() as T[];
+              return cn(
+                'p-0! text-base-content! text-xs!',
+                selectedValues[index]?.labelClassName
+              );
+            },
+          }}
+          components={{
+            ...components,
+            ...(optionComponent ? { Option: optionComponent } : {}),
+            MenuList: CustomMenuList,
+          }}
+          {...(startAdornment && {
+            shouldShowAdornment,
+            startAdornment,
+          })}
+          menuPortalTarget={
+            typeof document !== 'undefined'
+              ? (menuPortalTarget ?? document.body)
+              : undefined
+          }
+          styles={{
+            menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+            multiValue(base) {
+              return {
+                ...base,
+                borderRadius: '8px',
+              };
+            },
+          }}
+          onMenuScrollToBottom={onMenuScrollToBottom}
+        />
+      )}
 
       {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index a5a6cbf9..05d5b052 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -874,32 +874,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     (warehouseId: number) => {
       const stockInfo = warehouseStockMap.get(warehouseId);
       if (!stockInfo) {
-        return (
-          <Badge
-            variant='ghost'
-            color='neutral'
-            size='sm'
-            className={{ badge: 'whitespace-nowrap font-semibold' }}
-          >
-            Kosong
-          </Badge>
-        );
+        return <span className='text-xs'>Kosong</span>;
       }
 
       const { productCount } = stockInfo;
-      let color: 'neutral' | 'success' | 'warning' = 'neutral';
-      if (productCount === 0) color = 'warning';
-      else if (productCount > 0) color = 'success';
 
       return (
-        <Badge
-          variant='soft'
-          color={color}
-          size='sm'
-          className={{ badge: 'whitespace-nowrap font-semibold' }}
-        >
+        <span className='text-xs whitespace-nowrap'>
           Tersedia {productCount} produk
-        </Badge>
+        </span>
       );
     },
     [warehouseStockMap]
@@ -1360,7 +1343,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 errorMessage={formik.errors.source_warehouse_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
-                startAdornment={
+                inputPrefix={
                   formik.values.source_warehouse_id
                     ? getWarehouseStockAdornment(
                         formik.values.source_warehouse_id
@@ -1418,7 +1401,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 errorMessage={formik.errors.destination_warehouse_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
-                startAdornment={
+                inputPrefix={
                   formik.values.destination_warehouse_id
                     ? getWarehouseStockAdornment(
                         formik.values.destination_warehouse_id

From 711536975cb64a9b7b91dcdb802d578125480103 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 10:58:49 +0700
Subject: [PATCH 14/53] refactor(FE): Apply innerProps and className to
 CustomControl

---
 src/components/input/SelectInput.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 2a3ff98c..fc7926cc 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -89,7 +89,7 @@ const CustomControl = <
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
-  const { children } = props;
+  const { children, innerProps, className } = props;
 
   const customProps = props.selectProps as unknown as {
     shouldShowAdornment?: boolean;
@@ -101,7 +101,10 @@ const CustomControl = <
 
   return (
     <ReactSelectComponents.Control {...props}>
-      <div className='flex-1 p-3! py-1.5 gap-1 flex items-center'>
+      <div
+        className={`${className} flex-1 pl-3 gap-1 flex items-center transition-all duration-200`}
+        {...innerProps}
+      >
         {shouldShowAdornment && startAdornment}
         {children}
       </div>

From 079d69dffb5bcf46d0befed50976c6a9779249ac Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:05:06 +0700
Subject: [PATCH 15/53] refactor(FE): Simplify SelectInput control styling

---
 src/components/input/SelectInput.tsx | 54 ++++++++++++++--------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index fc7926cc..a79054dd 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -89,7 +89,7 @@ const CustomControl = <
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps, className } = props;
+  const { children, innerProps } = props;
 
   const customProps = props.selectProps as unknown as {
     shouldShowAdornment?: boolean;
@@ -101,10 +101,7 @@ const CustomControl = <
 
   return (
     <ReactSelectComponents.Control {...props}>
-      <div
-        className={`${className} flex-1 pl-3 gap-1 flex items-center transition-all duration-200`}
-        {...innerProps}
-      >
+      <div className='flex-1 pl-3 gap-1 flex items-center' {...innerProps}>
         {shouldShowAdornment && startAdornment}
         {children}
       </div>
@@ -280,21 +277,20 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             hideSelectedOptions={hideSelectedOptions}
             className={cn('w-full flex-1', className?.select)}
             classNames={{
-              ...(!startAdornment && {
-                control: ({ isFocused, isDisabled }) =>
-                  cn('w-full rounded-lg! border bg-white transition-shadow', {
-                    'cursor-pointer!': !readOnly && !isDisabled,
-                    'border-red-500! ring-2 ring-red-200': isError,
-                    'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                    'border-base-content/10!': !isError && !isFocused,
-                    'bg-gray-100 text-gray-400 cursor-not-allowed':
-                      isDisabled && !readOnly,
-                    'bg-transparent! cursor-not-allowed!': readOnly,
-                    'rounded-l-none!': inputPrefix,
-                    'rounded-r-none!': inputSuffix,
-                  }),
-                valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
-              }),
+              control: ({ isFocused, isDisabled }) =>
+                cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
+                  'cursor-pointer!': !readOnly && !isDisabled,
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment,
+                  'border-base-content/10!': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
+                  'rounded-l-none!': inputPrefix && !startAdornment,
+                  'rounded-r-none!': inputSuffix && !startAdornment,
+                }),
+              valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
               placeholder: () =>
                 cn({
                   'text-gray-400 text-sm leading-tight': !isError,
@@ -406,19 +402,23 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           hideSelectedOptions={hideSelectedOptions}
           className={cn('w-full', className?.select)}
           classNames={{
-            ...(!startAdornment && {
-              control: ({ isFocused, isDisabled }) =>
-                cn('w-full rounded-lg! border bg-white transition-shadow', {
+            control: ({ isFocused, isDisabled }) =>
+              cn(
+                'w-full border bg-white transition-shadow',
+                // Gunakan rounded-lg untuk semua kasus
+                'rounded-lg!',
+                {
                   'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment,
                   'border-base-content/10!': !isError && !isFocused,
                   'bg-gray-100 text-gray-400 cursor-not-allowed':
                     isDisabled && !readOnly,
                   'bg-transparent! cursor-not-allowed!': readOnly,
-                }),
-              valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
-            }),
+                }
+              ),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
             placeholder: () =>
               cn({
                 'text-gray-400 text-sm leading-tight': !isError,

From 75dfd96934b2bf7b4ef9e21d515fcc5a722298ca Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:09:30 +0700
Subject: [PATCH 16/53] refactor(FE): Replace Badge with simple span and rename
 adornment prop

---
 .../recording/form/RecordingForm.tsx          | 41 +++----------------
 1 file changed, 6 insertions(+), 35 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 13ce9cc9..f3d6d2f9 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1125,16 +1125,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
 
     return (
-      <Badge
-        variant='soft'
-        color={color}
-        size='sm'
-        className={{
-          badge: 'whitespace-nowrap font-semibold text-xs px-2',
-        }}
-      >
+      <span className={'whitespace-nowrap text-xs'}>
         Periode {projectFlockKandangLookup.project_flock?.period}
-      </Badge>
+      </span>
     );
   }, [recordedProjectFlockKandangIds, projectFlockKandangLookup]);
 
@@ -1150,33 +1143,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       const hasOvkFlag = productWarehouse.product.flags?.includes('OVK');
 
       if (hasPakanFlag) {
-        return (
-          <Badge
-            variant='soft'
-            color='info'
-            size='sm'
-            className={{
-              badge: 'whitespace-nowrap font-semibold text-xs px-2',
-            }}
-          >
-            PAKAN
-          </Badge>
-        );
+        return <span className={'whitespace-nowrap text-xs'}>PAKAN</span>;
       }
 
       if (hasOvkFlag) {
-        return (
-          <Badge
-            variant='soft'
-            color='secondary'
-            size='sm'
-            className={{
-              badge: 'whitespace-nowrap font-semibold text-xs px-2',
-            }}
-          >
-            OVK
-          </Badge>
-        );
+        return <span className={'whitespace-nowrap text-xs'}>OVK</span>;
       }
 
       return null;
@@ -1826,7 +1797,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       Boolean(formik.errors.kandang_id)
                     }
                     errorMessage={formik.errors.kandang_id as string}
-                    startAdornment={
+                    inputPrefix={
                       projectFlockKandangLookup || projectFlockKandangDetail
                         ? getProjectFlockBadgeAdornment()
                         : undefined
@@ -2458,7 +2429,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             !formik.values.project_flock_kandang_id
                           }
                           isClearable={type !== 'detail'}
-                          startAdornment={
+                          inputPrefix={
                             stock.product_warehouse_id
                               ? getProductFlagBadgeAdornment(
                                   stock.product_warehouse_id

From f28aeda74c8787c78c5a0347e3a205a8ad978120 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:29:19 +0700
Subject: [PATCH 17/53] refactor(FE): Move Error List Alert below form fields

---
 .../production/uniformity/UniformityTable.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 8b549458..86826b15 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1274,13 +1274,6 @@ const UniformityTable = () => {
               </Button>
             </div>
 
-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <div className='w-full px-4'>
-                <AlertErrorList formErrorList={formErrorList} onClose={close} />
-              </div>
-            )}
-
             <div className='space-y-4 px-4'>
               <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
                 <div>
@@ -1387,6 +1380,18 @@ const UniformityTable = () => {
               </div>
             </div>
 
+            <div className='w-full'>
+              {/* Error List Alert */}
+              {formErrorList.length > 0 && (
+                <div className='w-full px-4'>
+                  <AlertErrorList
+                    formErrorList={formErrorList}
+                    onClose={close}
+                  />
+                </div>
+              )}
+            </div>
+
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
               <Button

From e3d929435af193a1144359326ad2f91d7192b3bf Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:53:06 +0700
Subject: [PATCH 18/53] refactor(FE): Refine empty-state styling in uniformity
 skeletons

---
 .../skeleton/UniformityBarChartSkeleton.tsx      | 16 ++++++++++------
 .../skeleton/UniformityGaugeChartSkeleton.tsx    | 11 ++++++-----
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index 123a456a..91c7c72d 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -66,16 +66,20 @@ const ChartArea = () => {
 const EmptyState = () => {
   return (
     <>
-      <div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-2'>
-        <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center my-2'>
-          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
-            <Icon icon={'heroicons:funnel'} className='text-4xl text-whitd' />
+      <div className='absolute inset-0 flex flex-col items-center justify-center z-10'>
+        <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-2.5'>
+          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
+            <Icon
+              fontSize={26}
+              icon={'heroicons:funnel'}
+              className='text-white'
+            />
           </Button>
         </div>
-        <span className='text-xl font-semibold text-[#18181B80] leading-5'>
+        <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
           No Filters Selected
         </span>
-        <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+        <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
           Please choose filters to narrow down your results and make your search
           easier.
         </span>
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
index 17ed7ee9..a72875f5 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
@@ -56,18 +56,19 @@ const UniformityGaugeChartSkeleton: React.FC<
             </PieChart>
           </ResponsiveContainer>
           <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
-            <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center mt-5'>
-              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
+            <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mt-5 mb-2.5'>
+              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
                 <Icon
+                  fontSize={26}
                   icon={'heroicons:funnel'}
-                  className='text-4xl text-whitd'
+                  className='text-white'
                 />
               </Button>
             </div>
-            <span className='text-lg font-semibold text-[#18181B80] leading-5 my-3'>
+            <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
               No Filters Selected
             </span>
-            <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+            <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
               Please choose filters to narrow down your results and make your
               search easier.
             </span>

From 23402370b841649df23ead106e8d81b805c7e242 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:57:44 +0700
Subject: [PATCH 19/53] refactor(FE): Add rounded corners to uniformity
 components

---
 .../pages/production/uniformity/UniformityChart.tsx           | 4 ++--
 .../pages/production/uniformity/UniformityTable.tsx           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index db37c8f1..a6d9833f 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -106,7 +106,7 @@ const UniformityChart = ({
         title='Performance Overview ⓘ'
         variant='bordered'
         className={{
-          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full',
+          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full rounded-xl',
           body: 'h-96',
         }}
       >
@@ -125,7 +125,7 @@ const UniformityChart = ({
           variant='bordered'
           title='Weekly Performance ⓘ'
           className={{
-            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
+            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
             body: 'h-110',
           }}
         >
diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 86826b15..793a0fe2 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1062,7 +1062,7 @@ const UniformityTable = () => {
                 isResponseSuccess(uniformities) &&
                 uniformities?.data?.length === 0,
             }),
-            tableWrapperClassName: 'overflow-x-auto min-h-full ',
+            tableWrapperClassName: 'overflow-x-auto min-h-full rounded-xl',
             tableClassName: 'font-inter w-full table-auto min-h-full!',
             headerRowClassName: 'border-b border-b-gray-200',
             headerColumnClassName:

From 2c8160f816fe49c3dcb6e98db3230c3c165be017 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 12:00:10 +0700
Subject: [PATCH 20/53] refactor(FE): Add padding to UniformityChart card
 bodies

---
 .../pages/production/uniformity/UniformityChart.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index a6d9833f..84fa794b 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -107,7 +107,7 @@ const UniformityChart = ({
         variant='bordered'
         className={{
           wrapper: 'xl:col-span-1 2xl:col-span-3 w-full rounded-xl',
-          body: 'h-96',
+          body: 'h-96 p-4',
         }}
       >
         <div className='w-full h-full flex items-center justify-center'>
@@ -126,7 +126,7 @@ const UniformityChart = ({
           title='Weekly Performance ⓘ'
           className={{
             wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
-            body: 'h-110',
+            body: 'h-110 p-4',
           }}
         >
           <UniformityGaugeChartSkeleton />

From 564d6d0da169b4f11607b21655bc5188bfb29927 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 13:58:42 +0700
Subject: [PATCH 21/53] refactor(FE): Add wrapperContent and refactor
 uniformity charts

---
 src/components/Card.tsx                       |  7 ++-
 .../production/uniformity/UniformityChart.tsx | 59 ++++++++++++-------
 .../skeleton/UniformityBarChartSkeleton.tsx   |  2 +-
 3 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e04fa4c7..c78766e1 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -22,6 +22,7 @@ export interface CardProps
   onCollapsedChange?: (collapsed: boolean) => void;
   className?: {
     wrapper?: string;
+    wrapperContent?: string;
     image?: string;
     body?: string;
     title?: string;
@@ -144,6 +145,10 @@ const Card = ({
     return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
+  const getWrapperContentClasses = () => {
+    return cn('space-y-4', className?.wrapperContent);
+  };
+
   const renderCardContent = () => {
     const hasContent = children || actions || footer;
 
@@ -177,7 +182,7 @@ const Card = ({
     );
 
     const cardContent = (
-      <div className='space-y-4'>
+      <div className={getWrapperContentClasses()}>
         {children}
         {actions && <div className={getActionsClasses()}>{actions}</div>}
         {footer && <div className={getFooterClasses()}>{footer}</div>}
diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 84fa794b..0033e957 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -5,6 +5,7 @@ import UniformityGaugeChart from '@/components/pages/production/uniformity/chart
 import UniformityBarChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton';
 import UniformityGaugeChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton';
 import { Uniformity, type ChartData } from '@/types/api/production/uniformity';
+import { Icon } from '@iconify/react';
 
 interface UniformityChartProps {
   uniformityData?: Uniformity | null;
@@ -103,13 +104,23 @@ const UniformityChart = ({
   return (
     <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-3'>
       <Card
-        title='Performance Overview ⓘ'
         variant='bordered'
         className={{
           wrapper: 'xl:col-span-1 2xl:col-span-3 w-full rounded-xl',
           body: 'h-96 p-4',
         }}
       >
+        <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
+          <div className='text-lg font-semibold leading-7 flex gap-3 items-center'>
+            Performance Overview{' '}
+            <Icon
+              icon='heroicons:information-circle'
+              width={20}
+              height={20}
+              className='inline text-neutral-500'
+            />
+          </div>
+        </div>
         <div className='w-full h-full flex items-center justify-center'>
           {shouldShowEmptyState ||
           !uniformityData ||
@@ -120,26 +131,30 @@ const UniformityChart = ({
           )}
         </div>
       </Card>
-      {shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
-        <Card
-          variant='bordered'
-          title='Weekly Performance ⓘ'
-          className={{
-            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
-            body: 'h-110 p-4',
-          }}
-        >
+      <Card
+        variant='bordered'
+        className={{
+          wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
+          body:
+            shouldShowEmptyState || !uniformityData || !gaugeChartData
+              ? 'h-110 p-4'
+              : 'p-4',
+        }}
+      >
+        <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
+          <div className='text-lg font-semibold leading-7 flex gap-3 items-center'>
+            Weekly Performance{' '}
+            <Icon
+              icon='heroicons:information-circle'
+              width={20}
+              height={20}
+              className='inline text-neutral-500'
+            />
+          </div>
+        </div>
+        {shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
           <UniformityGaugeChartSkeleton />
-        </Card>
-      ) : (
-        <Card
-          variant='bordered'
-          title='Weekly Performance ⓘ'
-          className={{
-            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
-            body: 'p-4',
-          }}
-        >
+        ) : (
           <UniformityGaugeChart
             value={gaugeChartData.value}
             label={gaugeChartData.label}
@@ -150,8 +165,8 @@ const UniformityChart = ({
             hasPrevWeek={gaugeChartData.hasPrevWeek}
             hasNextWeek={gaugeChartData.hasNextWeek}
           />
-        </Card>
-      )}
+        )}
+      </Card>
     </section>
   );
 };
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index 91c7c72d..b9d90dd9 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -90,7 +90,7 @@ const EmptyState = () => {
 
 const UniformityBarChartSkeleton = () => {
   return (
-    <div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'>
+    <div className='relative w-full h-full min-h-[300px] xl:min-h-[330px]'>
       <div className='sm:flex hidden h-full gap-4'>
         <LeftLegend />
         <ChartArea />

From 9817864c3ddfd6853cb0534263c7d9e86ef82746 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:04:35 +0700
Subject: [PATCH 22/53] refactor(FE): Reduce UniformityBarChartSkeleton min
 height

---
 .../uniformity/skeleton/UniformityBarChartSkeleton.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index b9d90dd9..fe7f9aff 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -90,7 +90,7 @@ const EmptyState = () => {
 
 const UniformityBarChartSkeleton = () => {
   return (
-    <div className='relative w-full h-full min-h-[300px] xl:min-h-[330px]'>
+    <div className='relative w-full h-full min-h-[270px] xl:min-h-[330px]'>
       <div className='sm:flex hidden h-full gap-4'>
         <LeftLegend />
         <ChartArea />

From 1ed83351e0ef1fd6e01ef472f1c139c382421a17 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:09:38 +0700
Subject: [PATCH 23/53] refacto(FE): Refine UniformityTableSkeleton styles and
 icon

---
 .../skeleton/UniformityTableSkeleton.tsx          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
index b90048a1..79f0117e 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -3,19 +3,20 @@ import { Icon } from '@iconify/react';
 
 const UniformityTableSkeleton = () => {
   return (
-    <div className='flex flex-col items-center justify-center gap-2 my-20'>
-      <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
-        <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
+    <div className='flex flex-col items-center justify-center'>
+      <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-9'>
+        <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
           <Icon
-            icon={'heroicons-outline:chart-bar'}
-            className='text-4xl text-whitd'
+            fontSize={26}
+            icon={'heroicons:document-text'}
+            className='text-white'
           />
         </Button>
       </div>
-      <span className='text-xl font-semibold text-[#18181B80] leading-5'>
+      <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
         No Data Available
       </span>
-      <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+      <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
         There is no uniformity data displayed. Enter uniformity check data to
         get started.
       </span>

From 4452b6fd03dcd9799ffca158ad52acd6ace3bd02 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:10:36 +0700
Subject: [PATCH 24/53] refactor(FE): Add spacing to UniformityTableSkeleton

---
 .../production/uniformity/skeleton/UniformityTableSkeleton.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
index 79f0117e..08c1e0b5 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -3,7 +3,7 @@ import { Icon } from '@iconify/react';
 
 const UniformityTableSkeleton = () => {
   return (
-    <div className='flex flex-col items-center justify-center'>
+    <div className='flex flex-col items-center justify-center gap-2 my-20'>
       <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-9'>
         <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
           <Icon

From 8511a75842195fb346fe667d0e509b5d2b956946 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:24:58 +0700
Subject: [PATCH 25/53] refactor(FE): Refactor uniformity drawer styles and
 layout

---
 .../uniformity/detail/UniformityDetail.tsx      | 17 +++++++++++------
 .../detail/UniformityDetailsPreview.tsx         |  5 ++---
 .../uniformity/form/UniformityPreviewForm.tsx   |  7 +++----
 .../uniformity/form/UniformityResultForm.tsx    | 15 +++++++++------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/production/uniformity/detail/UniformityDetail.tsx b/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
index e8e5f1b3..11087e44 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
@@ -319,18 +319,19 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
       <DrawerHeader
         leftIconHref='/production/uniformity'
         subtitle={`Details`}
-        subtitleClassName='text-sm text-neutral'
+        subtitleClassName='text-sm font-medium text-base-content/50'
         showDivider
       />
 
       {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6 mb-6'>
+      <section className='w-full p-4'>
         {initialValues ? (
           <div className='flex flex-col gap-4'>
             {/* Info Umum */}
             <div className=''>
-              <p className='text-sm font-medium mb-5'>Informasi Umum</p>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                Informasi Umum
+              </h2>
               <Table<DetailOptionType>
                 data={infoUmumTableData}
                 columns={columnsInfoUmum}
@@ -345,7 +346,9 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             {/* Sampling and Range */}
             {initialValues.sampling && (
               <div className=''>
-                <p className='text-sm font-medium mb-5'>Sampling and Range</p>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                  Sampling and Range
+                </h2>
                 <Table<DetailOptionType>
                   data={samplingTableData}
                   columns={columnsSampling}
@@ -361,7 +364,9 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             {/* Result */}
             {initialValues.result && (
               <div className=''>
-                <p className='text-sm font-medium mb-5'>Result</p>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                  Result
+                </h2>
                 <Table<DetailOptionType>
                   data={resultTableData}
                   columns={resultColumns}
diff --git a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
index 05d21535..9188ba59 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
@@ -102,7 +102,7 @@ const UniformityDetailsPreview = ({
       <DrawerHeader
         leftIcon=''
         subtitle={info_umum?.file_name ?? 'Uniformity Details'}
-        subtitleClassName='text-sm text-neutral line-clamp-1'
+        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
         showDivider={false}
       >
         <button
@@ -114,8 +114,7 @@ const UniformityDetailsPreview = ({
       </DrawerHeader>
 
       {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full p-4'>
         {info_umum ? (
           <div className='flex flex-col gap-4'>
             {/* Body Weight Details */}
diff --git a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
index 63ba34fd..8cac641a 100644
--- a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
@@ -68,19 +68,18 @@ const UniformityPreviewForm = () => {
       <DrawerHeader
         leftIcon=''
         subtitle={uniformityFormData?.file_name || 'Add Body Weight'}
-        subtitleClassName='text-sm text-neutral line-clamp-1'
+        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
         showDivider={false}
       >
         <Button variant='link' className='p-0 text-error' onClick={handleClose}>
           <Tooltip content='Hapus' position='left'>
-            <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            <Icon icon='heroicons-outline:trash' width={18} height={18} />
           </Tooltip>
         </Button>
       </DrawerHeader>
 
       {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full p-4'>
         {verifyUniformityResult ? (
           <div className='flex flex-col gap-4'>
             <Table<BodyWeightData>
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index df144c64..103fc791 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -241,23 +241,24 @@ const UniformityResultForm = () => {
       <DrawerHeader
         leftIcon=''
         subtitle={uniformityFormData?.document_name || 'Uniformity Result'}
-        subtitleClassName='text-sm text-neutral line-clamp-1'
+        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
         showDivider={false}
       >
         <Button variant='link' className='p-0 text-error' onClick={handleClose}>
           <Tooltip content='Hapus' position='left'>
-            <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            <Icon icon='heroicons-outline:trash' width={20} height={20} />
           </Tooltip>
         </Button>
       </DrawerHeader>
 
       {/* Form Section */}
-      <div className='divider mt-3.5'></div>
-      <section className='w-full px-6'>
+      <section className='w-full p-4'>
         {verifyUniformityResult ? (
           <div className='flex flex-col gap-4'>
             <div className=''>
-              <p className='text-sm font-medium mb-5'>Sampling and Range</p>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                Sampling and Range
+              </h2>
               <Table<DetailOptionType>
                 data={samplingTableData}
                 columns={columnsSampling}
@@ -270,7 +271,9 @@ const UniformityResultForm = () => {
             </div>
 
             <div className=''>
-              <p className='text-sm font-medium mb-5'>Result</p>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                Result
+              </h2>
               <Table<DetailOptionType>
                 data={resultTableData}
                 columns={resultColumns}

From d9a1d340bb8ca04fa5cf3257ccd6f5286635c517 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:32:52 +0700
Subject: [PATCH 26/53] refactor(FE): Reduce vertical spacing in Uniformity
 components

---
 .../pages/production/uniformity/UniformityTable.tsx           | 4 ++--
 .../pages/production/uniformity/form/UniformityForm.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 793a0fe2..be133c7c 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1274,8 +1274,8 @@ const UniformityTable = () => {
               </Button>
             </div>
 
-            <div className='space-y-4 px-4'>
-              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
+            <div className='space-y-1.5 px-4'>
+              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
                 <div>
                   <DateInput
                     required
diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 275dbaf1..341c29a1 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -511,7 +511,7 @@ const UniformityForm = ({
             Informasi Umum
           </h2>
 
-          <form onSubmit={handleFormSubmit} className='flex flex-col gap-1'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-1.5'>
             <DateInput
               required
               label='Tanggal'

From 6c2baca807484f13846ef77539367a66c1407550 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 14:50:16 +0700
Subject: [PATCH 27/53] fix(FE): fixing classname using dynamic value

---
 .../pages/dashboard/DashboardProduction.tsx   | 489 +++++++++---------
 .../dashboard/chart/DashboardLineChart.tsx    |  80 +--
 .../pages/dashboard/chart/DashboardStats.tsx  |  29 +-
 .../export/DashboardExportCharts.tsx          |   3 +-
 .../dashboard/export/DashboardExportStats.tsx |  39 +-
 .../skeleton/DashboardLineChartSkeleton.tsx   |  49 +-
 6 files changed, 350 insertions(+), 339 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 7339e831..b2149771 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -211,7 +211,7 @@ const DashboardProduction = () => {
 
   useEffect(() => {
     setNavbarActions(
-      <div className='hidden sm:flex flex-row justify-end gap-[12px] '>
+      <div className='hidden sm:flex flex-row justify-end gap-3 '>
         <ButtonFilter
           values={{
             ...formik.values,
@@ -226,24 +226,26 @@ const DashboardProduction = () => {
               variant='outline'
               color='none'
               className={cn(
-                'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+                'p-2 rounded-lg font-semibold text-sm gap-1.5',
                 'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
               )}
             >
               <Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
               Export
-              <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
+              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
                 <Icon width={14} height={14} icon='heroicons:chevron-down' />
               </div>
             </Button>
           }
           className={{
-            content: 'w-full',
+            content: 'w-full mt-1 p-0',
           }}
         >
-          <Menu className={exporting ? 'hidden' : ''}>
+          <Menu
+            className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
+          >
             <MenuItem
-              className='text-sm padding-[12px]'
+              className='text-sm p-3'
               title='PDF'
               onClick={handleExportPDF}
             />
@@ -270,8 +272,8 @@ const DashboardProduction = () => {
 
   return (
     <>
-      <section className='w-full p-[12px] space-y-[12px]'>
-        <div className='flex sm:hidden flex-row justify-end gap-[12px] '>
+      <section className='w-full p-3 space-y-3'>
+        <div className='flex sm:hidden flex-row justify-end gap-3 '>
           <ButtonFilter
             values={{
               ...formik.values,
@@ -286,7 +288,7 @@ const DashboardProduction = () => {
                 variant='outline'
                 color='none'
                 className={cn(
-                  'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+                  'p-2 rounded-lg font-semibold text-sm gap-1.5',
                   'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
                 )}
               >
@@ -296,18 +298,21 @@ const DashboardProduction = () => {
                   icon='heroicons:cloud-arrow-down'
                 />
                 Export
-                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
+                <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
                   <Icon width={14} height={14} icon='heroicons:chevron-down' />
                 </div>
               </Button>
             }
             className={{
-              content: 'w-full',
+              content:
+                'w-full mt-1 p-0 shadow-button-soft border border-base-content/10 rounded-lg',
             }}
           >
-            <Menu className={exporting ? 'hidden' : ''}>
+            <Menu
+              className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
+            >
               <MenuItem
-                className='text-sm padding-[12px]'
+                className='text-sm p-3'
                 title='PDF'
                 onClick={handleExportPDF}
               />
@@ -405,107 +410,106 @@ const DashboardProduction = () => {
         ref={filterModal.ref}
         className={{
           modal: 'p-0',
-          modalBox: 'p-0 rounded-xl',
+          modalBox: 'p-0 rounded-[14px]',
         }}
       >
-        <div className='space-y-[16px]'>
+        <div className='flex flex-col'>
           {/* Modal Header */}
-          <div className='flex items-center justify-between gap-[8px] py-[16px] border-b border-[#E5E7EB]'>
-            <div className='flex items-center gap-[8px] ms-[16px] text-[#0069E0]'>
+          <div className='flex items-center justify-between p-4 border-b border-base-content/10'>
+            <div className='flex items-center gap-2 text-primary'>
               <Icon icon='heroicons:funnel' width={20} height={20} />
-              <h3 className='font-semibold'>Filter Data</h3>
+              <h3 className='font-medium text-sm'>Filter Data</h3>
             </div>
             <Button
               variant='link'
               onClick={() => filterModal.closeModal()}
-              className='text-gray-500 hover:text-gray-700 me-[16px]'
+              className='text-gray-500 hover:text-gray-700'
             >
               <Icon icon='heroicons:x-mark' width={20} height={20} />
             </Button>
           </div>
 
           <form
-            className='space-y-[8px]'
+            className='flex flex-col'
             onSubmit={handleFormSubmit}
             onReset={handleResetFilter}
           >
-            {/* Rentang Waktu */}
-            <div className='px-[16px]'>
-              <label className='flex text-xs items-center gap-2 mb-[8px] font-semibold'>
-                Tanggal
-              </label>
-              <div className='flex items-start gap-2'>
-                <DateInput
-                  name='startDate'
-                  placeholder='Tanggal Mulai'
-                  value={formik.values.startDate}
-                  errorMessage={formik.errors.startDate}
-                  onChange={formik.handleChange}
-                  isError={
-                    Boolean(formik.errors.startDate) &&
-                    Boolean(formik.touched.startDate)
-                  }
-                />
-                <div className='hidden md:block mt-3 text-center text-[#18181B]/10 '>
-                  —
+            <div className='flex flex-col p-4 gap-1.5'>
+              {/* Rentang Waktu */}
+              <div>
+                <label className='flex text-xs items-center gap-2 py-2 font-semibold'>
+                  Tanggal
+                </label>
+                <div className='flex items-center gap-2'>
+                  <DateInput
+                    name='startDate'
+                    placeholder='Tanggal Mulai'
+                    value={formik.values.startDate}
+                    errorMessage={formik.errors.startDate}
+                    onChange={formik.handleChange}
+                    isError={
+                      Boolean(formik.errors.startDate) &&
+                      Boolean(formik.touched.startDate)
+                    }
+                  />
+                  <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
+                  <DateInput
+                    name='endDate'
+                    placeholder='Tanggal Akhir'
+                    value={formik.values.endDate}
+                    errorMessage={formik.errors.endDate}
+                    onChange={formik.handleChange}
+                    isError={
+                      Boolean(formik.errors.endDate) &&
+                      Boolean(formik.touched.endDate)
+                    }
+                  />
                 </div>
-                <DateInput
-                  name='endDate'
-                  placeholder='Tanggal Akhir'
-                  value={formik.values.endDate}
-                  errorMessage={formik.errors.endDate}
-                  onChange={formik.handleChange}
-                  className={{
-                    inputWrapper:
-                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
-                  }}
-                  isError={
-                    Boolean(formik.errors.endDate) &&
-                    Boolean(formik.touched.endDate)
-                  }
-                />
               </div>
-            </div>
 
-            {/* Analysis Mode */}
-            <div className='px-[16px]'>
-              <label className='block mb-[8px] text-xs font-semibold'>
-                Analysis Mode
-              </label>
-              <RadioGroup
-                name='analysisMode'
-                value={formik.values.analysisMode}
-                onChange={(e) => {
-                  formik.handleChange(e);
-                  setAnalysisMode(e.target.value as 'OVERVIEW' | 'COMPARISON');
-                  // Reset all dependent fields when analysis mode changes
-                  formik.setFieldValue('location', []);
-                  formik.setFieldValue('flock', []);
-                  formik.setFieldValue('kandang', []);
-                  formik.setFieldValue('comparisonType', '');
-                  setSelectedLocationIds([]);
-                }}
-                color='primary'
-                className={{
-                  wrapper:
-                    'w-full flex flex-row items-center min-h-[45px] font-medium text-[#18181B]/50',
-                }}
-              >
-                <RadioGroupItem
+              {/* Analysis Mode */}
+              <div>
+                <label className='block py-2 text-xs font-semibold'>
+                  Analysis Mode
+                </label>
+                <RadioGroup
+                  name='analysisMode'
+                  value={formik.values.analysisMode}
+                  onChange={(e) => {
+                    formik.handleChange(e);
+                    setAnalysisMode(
+                      e.target.value as 'OVERVIEW' | 'COMPARISON'
+                    );
+                    // Reset all dependent fields when analysis mode changes
+                    formik.setFieldValue('location', []);
+                    formik.setFieldValue('flock', []);
+                    formik.setFieldValue('kandang', []);
+                    formik.setFieldValue('comparisonType', '');
+                    setSelectedLocationIds([]);
+                  }}
                   color='primary'
-                  value='OVERVIEW'
-                  label='Performance Overview'
-                />
-                <RadioGroupItem
-                  color='primary'
-                  value='COMPARISON'
-                  label='Performance Comparison'
-                />
-              </RadioGroup>
-            </div>
+                  className={{
+                    wrapper:
+                      'w-full flex flex-row items-center font-medium text-base-content/50',
+                    radioWrapper: 'w-full grid grid-cols-2 gap-0 p-0',
+                  }}
+                >
+                  <RadioGroupItem
+                    color='primary'
+                    value='OVERVIEW'
+                    label='Performance Overview'
+                    className='w-full p-3'
+                  />
+                  <RadioGroupItem
+                    color='primary'
+                    value='COMPARISON'
+                    label='Performance Comparison'
+                    className='w-full p-3'
+                  />
+                </RadioGroup>
+              </div>
 
-            {formik.values.analysisMode === 'COMPARISON' && (
-              <div className='px-[16px]'>
+              {formik.values.analysisMode === 'COMPARISON' && (
                 <SelectInputRadio
                   label='Compared By'
                   value={comparisonTypeOptions.find(
@@ -525,15 +529,12 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.comparisonType)
                   }
                   className={{
-                    label: 'mb-[8px] text-xs font-semibold',
-                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    select: 'rounded-lg text-sm border-base-content/10',
                   }}
                 />
-              </div>
-            )}
+              )}
 
-            {/* Location */}
-            <div className='px-[16px]'>
+              {/* Location */}
               {comparisonTypeOptions.find(
                 (option) => option.value === formik.values.comparisonType
               )?.value === 'FARM' ? (
@@ -564,7 +565,7 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.location)
                   }
                   className={{
-                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    select: 'rounded-lg text-sm border-base-content/10',
                   }}
                 />
               ) : (
@@ -595,166 +596,164 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.location)
                   }
                   className={{
-                    label: 'mb-[8px] text-xs font-semibold',
-                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    select: 'rounded-lg text-sm border-base-content/10',
                   }}
                 />
               )}
+
+              {/* Flock */}
+              {!(
+                formik.values.analysisMode === 'COMPARISON' &&
+                !(
+                  formik.values.comparisonType === 'FLOCK' ||
+                  formik.values.comparisonType === 'KANDANG'
+                )
+              ) && (
+                <>
+                  {comparisonTypeOptions.find(
+                    (option) => option.value === formik.values.comparisonType
+                  )?.value === 'FLOCK' ? (
+                    <SelectInputCheckbox
+                      label='Flock'
+                      value={
+                        formik.values.flock as
+                          | { value: number; label: string }
+                          | { value: number; label: string }[]
+                          | null
+                          | undefined
+                      }
+                      onChange={(selected) =>
+                        formik.setFieldValue('flock', selected)
+                      }
+                      errorMessage={formik.errors.flock as string}
+                      onInputChange={setInputValueFlock}
+                      onMenuScrollToBottom={loadMoreFlock}
+                      options={flockOptions}
+                      isLoading={isLoadingFlockOptions}
+                      isError={
+                        Boolean(formik.errors.flock) &&
+                        Boolean(formik.touched.flock)
+                      }
+                      className={{
+                        select: 'rounded-lg text-sm border-base-content/10',
+                      }}
+                    />
+                  ) : (
+                    <SelectInputRadio
+                      label='Flock'
+                      value={
+                        formik.values.flock as
+                          | { value: number; label: string }
+                          | { value: number; label: string }[]
+                          | null
+                          | undefined
+                      }
+                      onChange={(selected) =>
+                        formik.setFieldValue('flock', selected)
+                      }
+                      errorMessage={formik.errors.flock as string}
+                      onInputChange={setInputValueFlock}
+                      onMenuScrollToBottom={loadMoreFlock}
+                      options={flockOptions}
+                      isLoading={isLoadingFlockOptions}
+                      isError={
+                        Boolean(formik.errors.flock) &&
+                        Boolean(formik.touched.flock)
+                      }
+                      className={{
+                        select: 'rounded-lg text-sm border-base-content/10',
+                      }}
+                    />
+                  )}
+                </>
+              )}
+
+              {/* Kandang */}
+              {!(
+                formik.values.analysisMode === 'COMPARISON' &&
+                !(formik.values.comparisonType === 'KANDANG')
+              ) && (
+                <>
+                  {comparisonTypeOptions.find(
+                    (option) => option.value === formik.values.comparisonType
+                  )?.value === 'KANDANG' ? (
+                    <SelectInputCheckbox
+                      label='Kandang'
+                      value={
+                        formik.values.kandang as
+                          | { value: number; label: string }
+                          | { value: number; label: string }[]
+                          | null
+                          | undefined
+                      }
+                      onChange={(selected) =>
+                        formik.setFieldValue('kandang', selected)
+                      }
+                      errorMessage={formik.errors.kandang as string}
+                      onInputChange={setInputValueKandang}
+                      onMenuScrollToBottom={loadMoreKandang}
+                      options={kandangOptions}
+                      isLoading={isLoadingKandangOptions}
+                      isError={
+                        Boolean(formik.errors.kandang) &&
+                        Boolean(formik.touched.kandang)
+                      }
+                      className={{
+                        select: 'rounded-lg text-sm border-base-content/10',
+                      }}
+                    />
+                  ) : (
+                    <SelectInputRadio
+                      label='Kandang'
+                      value={
+                        formik.values.kandang as
+                          | { value: number; label: string }
+                          | { value: number; label: string }[]
+                          | null
+                          | undefined
+                      }
+                      onChange={(selected) =>
+                        formik.setFieldValue('kandang', selected)
+                      }
+                      errorMessage={formik.errors.kandang as string}
+                      onInputChange={setInputValueKandang}
+                      onMenuScrollToBottom={loadMoreKandang}
+                      options={kandangOptions}
+                      isLoading={isLoadingKandangOptions}
+                      isError={
+                        Boolean(formik.errors.kandang) &&
+                        Boolean(formik.touched.kandang)
+                      }
+                      className={{
+                        select: 'rounded-lg text-sm border-base-content/10',
+                      }}
+                    />
+                  )}
+                </>
+              )}
+
+              {formErrorList.length > 0 && (
+                <div className='w-full'>
+                  <AlertErrorList
+                    formErrorList={formErrorList}
+                    onClose={close}
+                  />
+                </div>
+              )}
             </div>
 
-            {/* Flock */}
-            {!(
-              formik.values.analysisMode === 'COMPARISON' &&
-              !(
-                formik.values.comparisonType === 'FLOCK' ||
-                formik.values.comparisonType === 'KANDANG'
-              )
-            ) && (
-              <div className='px-[16px]'>
-                {comparisonTypeOptions.find(
-                  (option) => option.value === formik.values.comparisonType
-                )?.value === 'FLOCK' ? (
-                  <SelectInputCheckbox
-                    label='Flock'
-                    value={
-                      formik.values.flock as
-                        | { value: number; label: string }
-                        | { value: number; label: string }[]
-                        | null
-                        | undefined
-                    }
-                    onChange={(selected) =>
-                      formik.setFieldValue('flock', selected)
-                    }
-                    errorMessage={formik.errors.flock as string}
-                    onInputChange={setInputValueFlock}
-                    onMenuScrollToBottom={loadMoreFlock}
-                    options={flockOptions}
-                    isLoading={isLoadingFlockOptions}
-                    isError={
-                      Boolean(formik.errors.flock) &&
-                      Boolean(formik.touched.flock)
-                    }
-                    className={{
-                      label: 'mb-[8px] text-xs font-semibold',
-                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
-                    }}
-                  />
-                ) : (
-                  <SelectInputRadio
-                    label='Flock'
-                    value={
-                      formik.values.flock as
-                        | { value: number; label: string }
-                        | { value: number; label: string }[]
-                        | null
-                        | undefined
-                    }
-                    onChange={(selected) =>
-                      formik.setFieldValue('flock', selected)
-                    }
-                    errorMessage={formik.errors.flock as string}
-                    onInputChange={setInputValueFlock}
-                    onMenuScrollToBottom={loadMoreFlock}
-                    options={flockOptions}
-                    isLoading={isLoadingFlockOptions}
-                    isError={
-                      Boolean(formik.errors.flock) &&
-                      Boolean(formik.touched.flock)
-                    }
-                    className={{
-                      label: 'mb-[8px] text-xs font-semibold',
-                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
-                    }}
-                  />
-                )}
-              </div>
-            )}
-
-            {/* Kandang */}
-            {!(
-              formik.values.analysisMode === 'COMPARISON' &&
-              !(formik.values.comparisonType === 'KANDANG')
-            ) && (
-              <div className='px-[16px]'>
-                {comparisonTypeOptions.find(
-                  (option) => option.value === formik.values.comparisonType
-                )?.value === 'KANDANG' ? (
-                  <SelectInputCheckbox
-                    label='Kandang'
-                    value={
-                      formik.values.kandang as
-                        | { value: number; label: string }
-                        | { value: number; label: string }[]
-                        | null
-                        | undefined
-                    }
-                    onChange={(selected) =>
-                      formik.setFieldValue('kandang', selected)
-                    }
-                    errorMessage={formik.errors.kandang as string}
-                    onInputChange={setInputValueKandang}
-                    onMenuScrollToBottom={loadMoreKandang}
-                    options={kandangOptions}
-                    isLoading={isLoadingKandangOptions}
-                    isError={
-                      Boolean(formik.errors.kandang) &&
-                      Boolean(formik.touched.kandang)
-                    }
-                    className={{
-                      label: 'mb-[8px] text-xs font-semibold',
-                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
-                    }}
-                  />
-                ) : (
-                  <SelectInputRadio
-                    label='Kandang'
-                    value={
-                      formik.values.kandang as
-                        | { value: number; label: string }
-                        | { value: number; label: string }[]
-                        | null
-                        | undefined
-                    }
-                    onChange={(selected) =>
-                      formik.setFieldValue('kandang', selected)
-                    }
-                    errorMessage={formik.errors.kandang as string}
-                    onInputChange={setInputValueKandang}
-                    onMenuScrollToBottom={loadMoreKandang}
-                    options={kandangOptions}
-                    isLoading={isLoadingKandangOptions}
-                    isError={
-                      Boolean(formik.errors.kandang) &&
-                      Boolean(formik.touched.kandang)
-                    }
-                    className={{
-                      label: 'mb-[8px] text-xs font-semibold',
-                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
-                    }}
-                  />
-                )}
-              </div>
-            )}
-
-            {formErrorList.length > 0 && (
-              <div className='w-full p-4'>
-                <AlertErrorList formErrorList={formErrorList} onClose={close} />
-              </div>
-            )}
-
             {/* Action Buttons */}
-            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
+            <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-[#F9FAFB]'>
               <Button
                 type='reset'
                 variant='soft'
-                className='ms-4 px-[16px] rounded-[8px] bg-[#F9FAFB] border-[#F9FAFB] text-[#4A5565] hover:bg-[#4A5565]/10'
+                className='rounded-lg p-3 bg-[#F9FAFB] border-[#F9FAFB] text-base-content/65 hover:bg-base-content/10'
               >
                 Reset Filter
               </Button>
               <Button
                 type='submit'
-                className='me-4 min-w-[160px] px-[16px] rounded-[8px]'
+                className='min-w-40 text-sm p-3 text-white rounded-lg'
               >
                 Apply Filter
               </Button>
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 6a419cb4..ab2c347e 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -147,11 +147,12 @@ const DashboardLineChart = ({
   return (
     <Card
       className={{
-        wrapper: 'w-full rounded-lg',
+        wrapper: 'w-full rounded-lg p-0',
+        body: 'p-4',
       }}
       variant='bordered'
     >
-      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-[12px]'>
+      <div className='flex flex-col sm:flex-row justify-between items-start gap-4 mb-3'>
         <div className='text-lg font-semibold'>
           Performance{' '}
           <Icon
@@ -165,28 +166,28 @@ const DashboardLineChart = ({
           <Dropdown
             align='end'
             direction='bottom'
+            className={{
+              content: 'mt-1 min-w-full',
+            }}
             trigger={
               <Button
                 variant='outline'
                 color='none'
-                className='py-[10px] pl-[12px] pr-[4px] text-[#18181B]/50 rounded-[8px] text-[14px] border-[#18181B]/10 shadow-button-soft'
+                className='py-2.5 pl-3 pr-2 text-base-content/50 rounded-lg text-sm border-base-content/10 shadow-button-soft'
                 onClick={() => setOpen(!open)}
               >
                 {chartTypeLabels[chartData]}{' '}
-                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-[#18181B]/10'>
+                <div className='w-6 h-5 flex items-center justify-center border-l border-base-content/10'>
                   <Icon icon='heroicons:chevron-down' width={14} height={14} />
                 </div>
               </Button>
             }
-            className={{
-              content: '',
-            }}
             controlled={open}
           >
-            <Menu>
+            <Menu className='p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg'>
               <MenuItem
                 title='Body weight'
-                className='text-sm padding-[12px] whitespace-nowrap'
+                className='text-sm padding-3 whitespace-nowrap'
                 onClick={() => {
                   setChartData('body_weight');
                   setOpen(!open);
@@ -194,7 +195,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Performance'
-                className='text-sm padding-[12px] whitespace-nowrap'
+                className='text-sm padding-3 whitespace-nowrap'
                 onClick={() => {
                   setChartData('performance');
                   setOpen(!open);
@@ -202,7 +203,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='FCR'
-                className='text-sm padding-[12px] whitespace-nowrap'
+                className='text-sm padding-3 whitespace-nowrap'
                 onClick={() => {
                   setChartData('fcr');
                   setOpen(!open);
@@ -210,7 +211,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Quality Control'
-                className='text-sm padding-[12px] whitespace-nowrap'
+                className='text-sm padding-3 whitespace-nowrap'
                 onClick={() => {
                   setChartData('quality_control');
                   setOpen(!open);
@@ -218,7 +219,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Deplesi'
-                className='text-sm padding-[12px] whitespace-nowrap'
+                className='text-sm padding-3 whitespace-nowrap'
                 onClick={() => {
                   setChartData('deplesi');
                   setOpen(!open);
@@ -267,14 +268,14 @@ const DashboardLineChart = ({
                 }}
                 variant='outline'
                 color='none'
-                className={`flex items-center gap-[8px] px-[12px] py-[10px] rounded-[8px] border transition-colors ${
+                className={`flex items-center gap-2 p-3 rounded-lg border transition-colors ${
                   isVisible
-                    ? 'border-[#18181B]/10 hover:bg-[#18181B]/4'
-                    : 'border-[#18181B]/10 bg-[#18181B]/4'
+                    ? 'border-base-content/10 hover:bg-base-content/4'
+                    : 'border-base-content/10 bg-base-content/4'
                 }`}
               >
                 <div
-                  className={`w-[20px] h-[2px] ${
+                  className={`w-5 h-0.5 ${
                     isStandard ? 'border-t-2 border-dashed' : ''
                   } ${!isVisible ? 'opacity-30' : ''}`}
                   style={{
@@ -287,7 +288,7 @@ const DashboardLineChart = ({
                   }}
                 ></div>
                 <span
-                  className={`font-semibold text-[14px] ${isVisible ? 'text-[#18181B]/50' : 'text-[#18181B]/50'}`}
+                  className={`font-semibold text-sm ${isVisible ? 'text-base-content/50' : 'text-base-content/50'}`}
                 >
                   {series.label}
                 </span>
@@ -295,7 +296,7 @@ const DashboardLineChart = ({
                   icon='heroicons:eye'
                   width={16}
                   height={16}
-                  className='text-[#18181B]/40'
+                  className='text-base-content/40'
                 />
               </Button>
             );
@@ -371,7 +372,8 @@ const DashboardLineChart = ({
                 fontWeight: 600,
               }}
               label={
-                chartData === 'body_weight' || chartData === 'performance'
+                (chartData === 'body_weight' || chartData === 'performance') &&
+                analysisMode === 'OVERVIEW'
                   ? {
                       value:
                         chartData === 'body_weight'
@@ -379,7 +381,7 @@ const DashboardLineChart = ({
                           : 'Percentage',
                       position: 'insideLeft',
                       angle: -90,
-                      offset: 25,
+                      offset: 5,
                       style: {
                         fontSize: 12,
                         fill: '#18181B',
@@ -387,7 +389,20 @@ const DashboardLineChart = ({
                         fontWeight: 600,
                       },
                     }
-                  : undefined
+                  : analysisMode === 'COMPARISON'
+                    ? {
+                        value: 'Percentage',
+                        position: 'insideLeft',
+                        angle: -90,
+                        offset: 5,
+                        style: {
+                          fontSize: 12,
+                          fill: '#18181B',
+                          opacity: 0.2,
+                          fontWeight: 600,
+                        },
+                      }
+                    : undefined
               }
               tickLine={false}
               axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
@@ -508,6 +523,7 @@ const DashboardLineChart = ({
 
                 return Array.from(tickSet).sort((a, b) => a - b);
               })()}
+              tickFormatter={(value) => formatNumber(Number(value))}
             />
             <Tooltip
               contentStyle={{
@@ -522,8 +538,8 @@ const DashboardLineChart = ({
               labelFormatter={(value) => `Week ${value}`}
               content={(props) => {
                 return (
-                  <div className='flex flex-col gap-[6px] rounded-lg bg-neutral-950 p-4  text-white'>
-                    <p className='text-neutral-300 text-[12px] font-semibold text-start'>
+                  <div className='flex flex-col gap-1.5 rounded-lg bg-neutral-950 p-4  text-white'>
+                    <p className='text-white/50 text-xs font-semibold text-start'>
                       {analysisMode === 'OVERVIEW'
                         ? selectedKandang
                           ? selectedKandang.label || 'Overview Performance'
@@ -563,11 +579,11 @@ const DashboardLineChart = ({
                         return (
                           <li
                             key={`${item.name}-${index}`}
-                            className='flex w-full justify-between items-center flex-row gap-y-[6px] gap-x-[12px] p-0'
+                            className='flex w-full justify-between items-center flex-row gap-y-1.5 gap-x-3 p-0'
                           >
-                            <span className='flex flex-row gap-1 items-center'>
+                            <span className='flex flex-row gap-1.5 items-center'>
                               <div
-                                className='h-[20px] w-[20px] m-0 rounded-[4px]'
+                                className='h-5 w-5 m-0 rounded'
                                 style={{
                                   backgroundColor: color,
                                 }}
@@ -582,7 +598,7 @@ const DashboardLineChart = ({
                         );
                       })}
                     </ul>
-                    <p className='text-neutral-300 text-[12px] text-start'>
+                    <p className='text-white/50 text-xs text-start'>
                       Week {props.label}
                     </p>
                   </div>
@@ -705,8 +721,8 @@ const DashboardLineChart = ({
             return (
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
-                <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
-                  <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
+                  <div className='w-9.5 h-9.5 bg-primary rounded-[8px] border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
@@ -717,10 +733,10 @@ const DashboardLineChart = ({
                 </div>
 
                 {/* Empty state text */}
-                <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
                   Data Not Yet Available
                 </h3>
-                <p className='text-gray-500 text-sm text-center max-w-xs'>
+                <p className='text-base-content/50 text-xs text-center max-w-xs'>
                   Please change your filters to get the data.
                 </p>
               </div>
diff --git a/src/components/pages/dashboard/chart/DashboardStats.tsx b/src/components/pages/dashboard/chart/DashboardStats.tsx
index f17e18b0..331547b0 100644
--- a/src/components/pages/dashboard/chart/DashboardStats.tsx
+++ b/src/components/pages/dashboard/chart/DashboardStats.tsx
@@ -21,7 +21,7 @@ const CARD_CONFIG = [
     key: 'Avg. Selling Price',
     icon: 'heroicons:document-currency-dollar',
     alertColor: 'success' as const,
-    suffix: ' /Kg',
+    suffix: ' /Kg Telur',
     prefix: '',
   },
   {
@@ -60,7 +60,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
         {prefix}
         {formatNumber(value)}
         {suffix && (
-          <span className='text-[14px] font-normal text-[#18181B]/50'>
+          <span className='text-sm font-normal text-base-content/50'>
             {suffix}
           </span>
         )}
@@ -69,7 +69,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
   };
 
   return (
-    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-[12px]'>
+    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-3'>
       {CARD_CONFIG.map((config) => {
         // Find matching data from API
         const cardData = data.find((item) => item.label === config.key);
@@ -80,42 +80,41 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
             <Card
               key={config.key}
               className={{
-                wrapper:
-                  'w-full rounded-[12px] border-[1px] border-[#18181B]/10',
+                wrapper: 'w-full rounded-xl border border-base-content/10',
                 body: 'p-0',
                 wrapperContent:
                   'h-full flex flex-col items-between justify-between',
-                footer: '!mt-0',
+                footer: 'mt-0!',
               }}
               variant='bordered'
               footer={
-                <div className='flex flex-row justify-between px-[16px] pb-[16px] max-h-[48px]'>
-                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                <div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
+                  <div className='text-base-content/50 font-semibold text-xs'>
                     From last month
                   </div>
-                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                  <div className='text-base-content/50 font-semibold text-xs'>
                     Filter Required
                   </div>
                 </div>
               }
             >
-              <div className='flex flex-row items-center gap-4 px-4 py-4'>
+              <div className='flex flex-row items-center gap-3 px-4 py-4'>
                 <Alert
                   variant='soft'
-                  className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                  className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
                 >
                   <Icon
                     icon={config.icon}
                     width={24}
                     height={24}
-                    className='text-[#18181B]/50'
+                    className='text-base-content/50'
                   />
                 </Alert>
                 <div>
-                  <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                  <h3 className='text-base-content/50 font-semibold text-sm'>
                     {config.key}
                   </h3>
-                  <p className='text-[20px] font-semibold text-[#18181B]/50'>
+                  <p className='text-xl font-semibold text-base-content/50'>
                     ********
                   </p>
                 </div>
@@ -134,7 +133,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
               body: 'p-0',
               wrapperContent:
                 'h-full flex flex-col items-between justify-between',
-              footer: '!mt-0',
+              footer: 'mt-0!',
             }}
             variant='bordered'
             footer={
diff --git a/src/components/pages/dashboard/export/DashboardExportCharts.tsx b/src/components/pages/dashboard/export/DashboardExportCharts.tsx
index c89014d8..ba0b2fe2 100644
--- a/src/components/pages/dashboard/export/DashboardExportCharts.tsx
+++ b/src/components/pages/dashboard/export/DashboardExportCharts.tsx
@@ -189,7 +189,8 @@ const DashboardExportCharts = forwardRef<
           >
             <Card
               className={{
-                wrapper: 'w-full rounded-lg',
+                wrapper: 'w-full rounded-lg p-0',
+                body: 'p-4',
               }}
               variant='bordered'
             >
diff --git a/src/components/pages/dashboard/export/DashboardExportStats.tsx b/src/components/pages/dashboard/export/DashboardExportStats.tsx
index 3f452d9c..aebdc751 100644
--- a/src/components/pages/dashboard/export/DashboardExportStats.tsx
+++ b/src/components/pages/dashboard/export/DashboardExportStats.tsx
@@ -72,7 +72,7 @@ const DashboardExportStats = forwardRef<
         {prefix}
         {formatNumber(value)}
         {suffix && (
-          <span className='text-[14px] font-normal text-[#18181B]/50'>
+          <span className='text-sm font-normal text-base-content/50'>
             {suffix}
           </span>
         )}
@@ -87,7 +87,7 @@ const DashboardExportStats = forwardRef<
   }));
 
   return (
-    <div ref={containerRef} className='grid grid-cols-4 gap-[12px]'>
+    <div ref={containerRef} className='grid grid-cols-4 gap-3'>
       {CARD_CONFIG.map((config) => {
         // Find matching data from API
         const cardData = data.find((item) => item.label === config.key);
@@ -102,37 +102,37 @@ const DashboardExportStats = forwardRef<
                 body: 'p-0',
                 wrapperContent:
                   'h-full flex flex-col items-between justify-between',
-                footer: '!mt-0',
+                footer: 'mt-0!',
               }}
               variant='bordered'
               footer={
-                <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
-                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                <div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
+                  <div className='text-base-content/50 font-semibold text-xs'>
                     From last month
                   </div>
-                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                  <div className='text-base-content/50 font-semibold text-xs'>
                     Filter Required
                   </div>
                 </div>
               }
             >
-              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+              <div className='flex flex-row items-center gap-3 px-4 pt-4'>
                 <Alert
                   variant='soft'
-                  className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                  className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
                 >
                   <Icon
                     icon={config.icon}
                     width={24}
                     height={24}
-                    className='text-[#18181B]/50'
+                    className='text-base-content/50'
                   />
                 </Alert>
                 <div>
-                  <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                  <h3 className='text-base-content/50 font-semibold text-sm'>
                     {config.key}
                   </h3>
-                  <p className='text-[20px] font-semibold text-[#18181B]/50'>
+                  <p className='text-xl font-semibold text-base-content/50'>
                     ********
                   </p>
                 </div>
@@ -147,21 +147,20 @@ const DashboardExportStats = forwardRef<
           <Card
             key={config.key}
             className={{
-              wrapper:
-                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
+              wrapper: 'w-full rounded-lg border border-base-content/10',
               body: 'p-0',
               wrapperContent:
                 'h-full flex flex-col items-between justify-between',
-              footer: '!mt-0',
+              footer: 'mt-0!',
             }}
             variant='bordered'
             footer={
-              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
-                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+              <div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
+                <div className='text-base-content/50 font-semibold text-xs'>
                   From last month
                 </div>
                 <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
                 >
                   <Icon icon={trend.icon} width={16} height={16} />
                   {trend.value}%
@@ -173,15 +172,15 @@ const DashboardExportStats = forwardRef<
               <Alert
                 variant='soft'
                 color={config.alertColor}
-                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
               >
                 <Icon icon={config.icon} width={24} height={24} />
               </Alert>
               <div>
-                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                <h3 className='text-base-content/50 font-semibold text-sm'>
                   {cardData.label}
                 </h3>
-                <p className='text-[20px] font-semibold'>
+                <p className='text-xl font-semibold'>
                   {formatValue(cardData.value, config.prefix, config.suffix)}
                 </p>
               </div>
diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
index d2999544..66c76071 100644
--- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
@@ -3,15 +3,15 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard';
 
 const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
   return (
-    <div className='w-full bg-white rounded-[12px] border border-[#18181B]/10 p-[16px] relative'>
+    <div className='w-full bg-white rounded-xl border border-base-content/10 p-4 relative'>
       {/* Header with title skeleton */}
-      <div className='text-[16px] font-semibold'>
+      <div className='text-base font-semibold'>
         Performance{' '}
         <Icon
           icon='heroicons:information-circle'
           width={20}
           height={20}
-          className='inline text-[#18181B]/50'
+          className='inline text-base-content/50'
         />
       </div>
 
@@ -24,9 +24,9 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
             {!meta?.filters && (
               <>
                 {/* Filter icon */}
-                <div className='mb-[9px]'>
-                  <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
-                    <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                <div className='mb-2'>
+                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                    <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                       <Icon
                         icon='heroicons:funnel'
                         className='text-white'
@@ -38,10 +38,10 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
                 </div>
 
                 {/* Empty state text */}
-                <h3 className='text-[#18181B]/50 font-semibold text-[14px] mb-[4px]'>
+                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
                   No Filters Selected
                 </h3>
-                <p className='text-[#18181B]/50 text-[12px] text-center max-w-xs'>
+                <p className='text-base-content/50 text-xs text-center max-w-xs'>
                   Please choose filters to narrow down your results and make
                   your search easier.
                 </p>
@@ -50,8 +50,8 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
             {meta?.filters && (
               <>
                 {/* Filter icon */}
-                <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
-                  <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
+                  <div className='w-[38px] h-[38px] bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
@@ -62,44 +62,41 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
                 </div>
 
                 {/* Empty state text */}
-                <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
                   Data Not Yet Available
                 </h3>
-                <p className='text-gray-500 text-sm text-center max-w-xs'>
+                <p className='text-base-content/50 text-xs text-center max-w-xs'>
                   Please change your filters to get the data.
                 </p>
               </>
             )}
           </div>
 
-          <div className='flex flex-row w-full items-center gap-[16px]'>
-            <div className='flex-1 h-full min-w-[16px]'>
-              <div className='h-[114px] w-[16x] bg-[#18181B]/4 rounded-[4px]'></div>
+          <div className='flex flex-row w-full items-center gap-4'>
+            <div className='flex-1 h-full min-w-4'>
+              <div className='h-28.5 w-4 bg-base-content/4 rounded'></div>
             </div>
-            <div className='w-full grid grid-cols-1 gap-y-[53px] mb-[8px]'>
+            <div className='w-full grid grid-cols-1 gap-y-13.25 mb-2'>
               {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className='flex items-center w-full h-[16px] gap-[16px]'
-                >
-                  <div className='h-[16px] w-[24px] bg-[#18181B]/4 rounded-[4px]'></div>
-                  <div className='h-[1px] w-full bg-[#18181B]/4 rounded-[4px]'></div>
+                <div key={item} className='flex items-center w-full h-4 gap-4'>
+                  <div className='h-4 w-6 bg-base-content/4 rounded'></div>
+                  <div className='h-0.25 w-full bg-base-content/4 rounded'></div>
                 </div>
               ))}
             </div>
           </div>
 
           {/* X-axis skeleton (bottom) */}
-          <div className='grid grid-cols-10 gap-[60px] mt-[16px] ps-[52px] sm:ps-[104px] overflow-x-hidden'>
+          <div className='grid grid-cols-10 gap-15 mt-4 ps-13 sm:ps-26 overflow-x-hidden'>
             {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
               <div
                 key={item}
-                className='h-[16px] w-[37px] bg-[#18181B]/4 rounded-[4px]'
+                className='h-4 w-9.5 bg-base-content/4 rounded'
               ></div>
             ))}
           </div>
-          <div className='flex justify-center pt-[16px] ps-[52px] sm:ps-[104px]'>
-            <div className='h-[16px] w-[114px] bg-[#18181B]/4 rounded-[4px]'></div>
+          <div className='flex justify-center pt-4 ps-13 sm:ps-26'>
+            <div className='h-4 w-28.5 bg-base-content/4 rounded'></div>
           </div>
         </div>
       </div>

From b305d43ce6d759a4c5589ca6f2421deca19870ad Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 14:56:52 +0700
Subject: [PATCH 28/53] fix(FE): fixing classname using dynamic value

---
 src/components/pages/dashboard/DashboardProduction.tsx        | 4 ++--
 src/components/pages/dashboard/chart/DashboardLineChart.tsx   | 2 +-
 .../pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index b2149771..ad74413b 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -743,11 +743,11 @@ const DashboardProduction = () => {
             </div>
 
             {/* Action Buttons */}
-            <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-[#F9FAFB]'>
+            <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
               <Button
                 type='reset'
                 variant='soft'
-                className='rounded-lg p-3 bg-[#F9FAFB] border-[#F9FAFB] text-base-content/65 hover:bg-base-content/10'
+                className='rounded-lg p-3 bg-gray-100 border-gray-100 text-base-content/65 hover:bg-base-content/10'
               >
                 Reset Filter
               </Button>
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index ab2c347e..76d18a1e 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -722,7 +722,7 @@ const DashboardLineChart = ({
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
                 <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
-                  <div className='w-9.5 h-9.5 bg-primary rounded-[8px] border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                  <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
index 66c76071..e0c326c1 100644
--- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
@@ -51,7 +51,7 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
               <>
                 {/* Filter icon */}
                 <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
-                  <div className='w-[38px] h-[38px] bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                  <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'

From dada6a542ff478e6a946f17f89c0f19d7663bdc5 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:57:25 +0700
Subject: [PATCH 29/53] refactor(FE): Add badge color helpers for status and
 weight

---
 .../production/uniformity/uniformity-utils.ts | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/components/pages/production/uniformity/uniformity-utils.ts b/src/components/pages/production/uniformity/uniformity-utils.ts
index 340bb555..1b513de4 100644
--- a/src/components/pages/production/uniformity/uniformity-utils.ts
+++ b/src/components/pages/production/uniformity/uniformity-utils.ts
@@ -25,6 +25,20 @@ export const getWeightStatusText = (status: string): string => {
   return weightStatusTextMap[status] || status;
 };
 
+export const weightStatusBadgeColorMap: Record<
+  string,
+  'success' | 'error' | 'neutral' | 'info'
+> = {
+  ideal: 'success',
+  outside: 'error',
+};
+
+export const getWeightStatusBadgeColor = (
+  status: string
+): 'success' | 'error' | 'neutral' | 'info' => {
+  return weightStatusBadgeColorMap[status] || 'neutral';
+};
+
 export const statusColorMap: Record<string, string> = {
   APPROVED: 'bg-[#00D39033]',
   Disetujui: 'bg-[#00D39033]',
@@ -63,3 +77,29 @@ export const getStatusIndicatorColor = (status: string): string => {
 export const getStatusText = (status: string): string => {
   return statusTextMap[status] || status;
 };
+
+export const statusBadgeColorMap: Record<
+  string,
+  'success' | 'error' | 'neutral' | 'info'
+> = {
+  APPROVED: 'success',
+  Disetujui: 'success',
+  approved: 'success',
+  disetujui: 'success',
+  REJECTED: 'error',
+  Ditolak: 'error',
+  rejected: 'error',
+  ditolak: 'error',
+  CREATED: 'neutral',
+  Pengajuan: 'neutral',
+  created: 'neutral',
+  pengajuan: 'neutral',
+  PENDING: 'neutral',
+  pending: 'neutral',
+};
+
+export const getStatusBadgeColor = (
+  status: string
+): 'success' | 'error' | 'neutral' | 'info' => {
+  return statusBadgeColorMap[status] || 'neutral';
+};

From 0e43957e6ea2bc9d735a35a792f3430a1808cdf7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:58:09 +0700
Subject: [PATCH 30/53] refactor(FE): Replace Badge with StatusBadge in
 uniformity views

---
 .../production/uniformity/UniformityTable.tsx | 800 +++++++++---------
 .../detail/UniformityDetailsPreview.tsx       |  33 +-
 .../uniformity/form/UniformityResultForm.tsx  |  33 +-
 3 files changed, 406 insertions(+), 460 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index be133c7c..6cf28f02 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -19,6 +19,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { type BaseApiResponse } from '@/types/api/api-general';
 import Table from '@/components/Table';
 import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -45,6 +46,7 @@ import {
   getStatusColor,
   getStatusIndicatorColor,
   getStatusText,
+  getStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { generateUniformityPDF } from '@/components/pages/production/uniformity/export/UniformityExportPDF';
 import { generateUniformityExcel } from '@/components/pages/production/uniformity/export/UniformityExportExcel';
@@ -832,7 +834,7 @@ const UniformityTable = () => {
         },
         cell: ({ row }) => {
           return (
-            <div>
+            <div className='w-full flex flex-row justify-center'>
               <CheckboxInput
                 name='row'
                 checked={row.getIsSelected()}
@@ -862,8 +864,11 @@ const UniformityTable = () => {
       {
         accessorKey: 'week',
         header: 'Tanggal (Week)',
-        cell: (props) =>
-          `${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`,
+        cell: (props) => (
+          <span className='text-nowrap'>
+            {`${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`}
+          </span>
+        ),
       },
       {
         accessorKey: 'status',
@@ -872,20 +877,11 @@ const UniformityTable = () => {
           const uniformity = props.row.original;
           const status =
             uniformity.latest_approval?.action ?? uniformity.status;
-          return (
-            <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
-                  status: getStatusIndicatorColor(status),
-                }}
-              >
-                {getStatusText(status)}
-              </Badge>
-            </div>
-          );
+
+          const badgeColor = getStatusBadgeColor(status);
+          const statusText = getStatusText(status);
+
+          return <StatusBadge color={badgeColor} text={statusText} />;
         },
       },
       {
@@ -1039,425 +1035,413 @@ const UniformityTable = () => {
         </section>
       </div>
 
-      <section className='p-3 pt-0'>
-        <Table<Uniformity>
-          data={isResponseSuccess(uniformities) ? uniformities?.data : []}
-          columns={uniformityColumns}
-          pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
-          totalItems={
-            isResponseSuccess(uniformities)
-              ? uniformities?.meta?.total_results
-              : 0
-          }
-          onPageChange={setPage}
-          isLoading={isLoading}
-          sorting={sorting}
-          setSorting={setSorting}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
-          className={{
-            containerClassName: cn({
-              'mb-20':
-                isResponseSuccess(uniformities) &&
-                uniformities?.data?.length === 0,
-            }),
-            tableWrapperClassName: 'overflow-x-auto min-h-full rounded-xl',
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
-            headerRowClassName: 'border-b border-b-gray-200',
-            headerColumnClassName:
-              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
-          }}
-          emptyContent={<UniformityTableSkeleton />}
-        />
+      <Table<Uniformity>
+        data={isResponseSuccess(uniformities) ? uniformities?.data : []}
+        columns={uniformityColumns}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(uniformities)
+            ? uniformities?.meta?.total_results
+            : 0
+        }
+        onPageChange={setPage}
+        isLoading={isLoading}
+        sorting={sorting}
+        setSorting={setSorting}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        className={{
+          containerClassName: cn('p-3 pt-0', {
+            'mb-20':
+              isResponseSuccess(uniformities) &&
+              uniformities?.data?.length === 0,
+          }),
+          headerColumnClassName: 'text-nowrap',
+        }}
+        emptyContent={<UniformityTableSkeleton />}
+      />
 
-        <ConfirmationModal
-          ref={successModal.ref}
-          type='success'
-          iconPosition='left'
-          text='Data Berhasil Ditambahkan'
-          subtitleText='Data uniformity telah berhasil disimpan.'
-          closeOnBackdrop={false}
-          primaryButton={{
-            text: 'Ok',
-            color: 'primary',
-            onClick: handleSuccessModalClose,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {createdUniformity ? (
-              <UniformityConfirmationPreview
-                uniformityDetail={createdUniformity}
-              />
-            ) : selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={singleDeleteModal.ref}
-          type='error'
-          iconPosition='left'
-          text={`Delete This Data?`}
-          subtitleText='Are you sure you want to delete this data?'
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Delete',
-            color: 'primary',
-            isLoading: isDeleteLoading,
-            onClick: singleDeleteHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            <UniformityConfirmationPreview uniformity={selectedUniformity} />
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={singleApproveModal.ref}
-          type='success'
-          iconPosition='left'
-          text='Approve This Submission?'
-          subtitleText='Are you sure you want to approve this submission?'
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Approve',
-            color: 'primary',
-            isLoading: isDeleteLoading,
-            onClick: singleApproveHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={bulkApproveModal.ref}
-          type='success'
-          iconPosition='left'
-          text={`Approve This Submission?`}
-          subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Approve',
-            color: 'primary',
-            isLoading: isBulkActionLoading,
-            onClick: bulkApproveHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            <UniformityConfirmationPreview uniformity={selectedUniformity} />
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={singleRejectModal.ref}
-          type='error'
-          iconPosition='left'
-          text='Reject This Submission?'
-          subtitleText='Are you sure you want to reject this submission?'
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Reject',
-            color: 'primary',
-            isLoading: isDeleteLoading,
-            onClick: singleRejectHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        <ConfirmationModal
-          ref={bulkRejectModal.ref}
-          type='error'
-          iconPosition='left'
-          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
-          secondaryButton={{
-            text: 'Cancel',
-          }}
-          primaryButton={{
-            text: 'Reject',
-            color: 'primary',
-            isLoading: isBulkActionLoading,
-            onClick: bulkRejectHandler,
-          }}
-          className={{
-            modalBox: 'rounded-2xl',
-          }}
-        >
-          <div className='flex flex-col gap-4 mt-4'>
-            {selectedRowIds.length === 1 ? (
-              <UniformityConfirmationPreview
-                uniformity={selectedUniformities[0]}
-              />
-            ) : (
-              <div className='text-center text-gray-500'>
-                {selectedRowIds.length} data dipilih
-              </div>
-            )}
-          </div>
-        </ConfirmationModal>
-
-        {/* Filter Modal */}
-        <Modal
-          ref={filterModal.ref}
-          className={{
-            modal: 'p-0',
-            modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
-          }}
-        >
-          <div className='space-y-6'>
-            {/* Modal Header */}
-            <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
-              <div className='flex items-center gap-2 text-primary'>
-                <Icon icon='heroicons:funnel' width={20} height={20} />
-                <h3 className='font-semibold'>Filter Data</h3>
-              </div>
-              <Button
-                variant='link'
-                onClick={filterModal.closeModal}
-                className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
-              >
-                <Icon icon='heroicons:x-mark' width={20} height={20} />
-              </Button>
+      <ConfirmationModal
+        ref={successModal.ref}
+        type='success'
+        iconPosition='left'
+        text='Data Berhasil Ditambahkan'
+        subtitleText='Data uniformity telah berhasil disimpan.'
+        closeOnBackdrop={false}
+        primaryButton={{
+          text: 'Ok',
+          color: 'primary',
+          onClick: handleSuccessModalClose,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {createdUniformity ? (
+            <UniformityConfirmationPreview
+              uniformityDetail={createdUniformity}
+            />
+          ) : selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
             </div>
+          )}
+        </div>
+      </ConfirmationModal>
 
-            <div className='space-y-1.5 px-4'>
-              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
-                <div>
-                  <DateInput
-                    required
-                    label='Tanggal mulai'
-                    name='start_date'
-                    value={filterFormik.values.start_date}
-                    onChange={handleFilterStartDateChange}
-                    onBlur={filterFormik.handleBlur}
-                    isError={
-                      filterFormik.touched.start_date &&
-                      Boolean(filterFormik.errors.start_date)
-                    }
-                    errorMessage={filterFormik.errors.start_date}
-                    className={{ wrapper: 'w-full' }}
-                  />
-                </div>
+      <ConfirmationModal
+        ref={singleDeleteModal.ref}
+        type='error'
+        iconPosition='left'
+        text={`Delete This Data?`}
+        subtitleText='Are you sure you want to delete this data?'
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Delete',
+          color: 'primary',
+          isLoading: isDeleteLoading,
+          onClick: singleDeleteHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+        </div>
+      </ConfirmationModal>
 
-                <div>
-                  <DateInput
-                    required
-                    label='Tanggal akhir'
-                    name='end_date'
-                    value={filterFormik.values.end_date}
-                    onChange={handleFilterEndDateChange}
-                    onBlur={filterFormik.handleBlur}
-                    isError={
-                      filterFormik.touched.end_date &&
-                      Boolean(filterFormik.errors.end_date)
-                    }
-                    errorMessage={filterFormik.errors.end_date}
-                    className={{ wrapper: 'w-full' }}
-                  />
-                </div>
-              </div>
+      <ConfirmationModal
+        ref={singleApproveModal.ref}
+        type='success'
+        iconPosition='left'
+        text='Approve This Submission?'
+        subtitleText='Are you sure you want to approve this submission?'
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Approve',
+          color: 'primary',
+          isLoading: isDeleteLoading,
+          onClick: singleApproveHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
+            </div>
+          )}
+        </div>
+      </ConfirmationModal>
 
+      <ConfirmationModal
+        ref={bulkApproveModal.ref}
+        type='success'
+        iconPosition='left'
+        text={`Approve This Submission?`}
+        subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Approve',
+          color: 'primary',
+          isLoading: isBulkActionLoading,
+          onClick: bulkApproveHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+        </div>
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        ref={singleRejectModal.ref}
+        type='error'
+        iconPosition='left'
+        text='Reject This Submission?'
+        subtitleText='Are you sure you want to reject this submission?'
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Reject',
+          color: 'primary',
+          isLoading: isDeleteLoading,
+          onClick: singleRejectHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
+            </div>
+          )}
+        </div>
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        ref={bulkRejectModal.ref}
+        type='error'
+        iconPosition='left'
+        text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
+        secondaryButton={{
+          text: 'Cancel',
+        }}
+        primaryButton={{
+          text: 'Reject',
+          color: 'primary',
+          isLoading: isBulkActionLoading,
+          onClick: bulkRejectHandler,
+        }}
+        className={{
+          modalBox: 'rounded-2xl',
+        }}
+      >
+        <div className='flex flex-col gap-4 mt-4'>
+          {selectedRowIds.length === 1 ? (
+            <UniformityConfirmationPreview
+              uniformity={selectedUniformities[0]}
+            />
+          ) : (
+            <div className='text-center text-gray-500'>
+              {selectedRowIds.length} data dipilih
+            </div>
+          )}
+        </div>
+      </ConfirmationModal>
+
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+            <div className='flex items-center gap-2 text-primary'>
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              <h3 className='font-semibold'>Filter Data</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={filterModal.closeModal}
+              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+
+          <div className='space-y-1.5 px-4'>
+            <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
               <div>
-                <SelectInput
+                <DateInput
                   required
-                  label='Lokasi'
-                  placeholder='Pilih Lokasi...'
-                  value={filterFormik.values.location}
-                  onChange={(value) => {
-                    handleFilterLocationChange(value);
-                  }}
-                  options={filterLocationOptions}
-                  onInputChange={setFilterLocationInputValue}
-                  isLoading={isLoadingFilterLocations}
-                  onMenuScrollToBottom={loadMoreFilterLocations}
+                  label='Tanggal mulai'
+                  name='start_date'
+                  value={filterFormik.values.start_date}
+                  onChange={handleFilterStartDateChange}
+                  onBlur={filterFormik.handleBlur}
                   isError={
-                    filterFormik.touched.location &&
-                    Boolean(filterFormik.errors.location)
+                    filterFormik.touched.start_date &&
+                    Boolean(filterFormik.errors.start_date)
                   }
-                  errorMessage={filterFormik.errors.location}
-                  isClearable
+                  errorMessage={filterFormik.errors.start_date}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
 
               <div>
-                <SelectInput
+                <DateInput
                   required
-                  label='Project Flock'
-                  placeholder='Pilih Project Flock...'
-                  value={filterFormik.values.project_flock}
-                  onChange={(value) => {
-                    handleFilterProjectFlockChange(value);
-                  }}
-                  options={filterProjectFlockOptions}
-                  onInputChange={setFilterProjectFlockSearchValue}
-                  isLoading={isLoadingFilterProjectFlocks}
-                  onMenuScrollToBottom={loadMoreFilterProjectFlocks}
-                  isDisabled={!filterFormik.values.location}
+                  label='Tanggal akhir'
+                  name='end_date'
+                  value={filterFormik.values.end_date}
+                  onChange={handleFilterEndDateChange}
+                  onBlur={filterFormik.handleBlur}
                   isError={
-                    filterFormik.touched.project_flock &&
-                    Boolean(filterFormik.errors.project_flock)
+                    filterFormik.touched.end_date &&
+                    Boolean(filterFormik.errors.end_date)
                   }
-                  errorMessage={filterFormik.errors.project_flock}
-                  isClearable
-                  className={{ wrapper: 'w-full' }}
-                />
-              </div>
-
-              <div>
-                <SelectInput
-                  required
-                  label='Kandang'
-                  placeholder='Pilih Kandang...'
-                  value={filterFormik.values.kandang}
-                  onChange={(value) => {
-                    handleFilterKandangChange(value);
-                  }}
-                  options={filterKandangOptions}
-                  isDisabled={!filterFormik.values.project_flock}
-                  isError={
-                    filterFormik.touched.kandang &&
-                    Boolean(filterFormik.errors.kandang)
-                  }
-                  errorMessage={filterFormik.errors.kandang}
-                  isClearable
+                  errorMessage={filterFormik.errors.end_date}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
             </div>
 
-            <div className='w-full'>
-              {/* Error List Alert */}
-              {formErrorList.length > 0 && (
-                <div className='w-full px-4'>
-                  <AlertErrorList
-                    formErrorList={formErrorList}
-                    onClose={close}
-                  />
-                </div>
-              )}
+            <div>
+              <SelectInput
+                required
+                label='Lokasi'
+                placeholder='Pilih Lokasi...'
+                value={filterFormik.values.location}
+                onChange={(value) => {
+                  handleFilterLocationChange(value);
+                }}
+                options={filterLocationOptions}
+                onInputChange={setFilterLocationInputValue}
+                isLoading={isLoadingFilterLocations}
+                onMenuScrollToBottom={loadMoreFilterLocations}
+                isError={
+                  filterFormik.touched.location &&
+                  Boolean(filterFormik.errors.location)
+                }
+                errorMessage={filterFormik.errors.location}
+                isClearable
+                className={{ wrapper: 'w-full' }}
+              />
             </div>
 
-            {/* Action Buttons */}
-            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
-              <Button
-                variant='soft'
-                className='ms-4 min-w-36 rounded-lg'
-                onClick={handleResetFilters}
-              >
-                Reset Filter
-              </Button>
-              <Button
-                className='me-4 min-w-36 rounded-lg'
-                onClick={handleApplyFilters}
-              >
-                Apply Filter
-              </Button>
+            <div>
+              <SelectInput
+                required
+                label='Project Flock'
+                placeholder='Pilih Project Flock...'
+                value={filterFormik.values.project_flock}
+                onChange={(value) => {
+                  handleFilterProjectFlockChange(value);
+                }}
+                options={filterProjectFlockOptions}
+                onInputChange={setFilterProjectFlockSearchValue}
+                isLoading={isLoadingFilterProjectFlocks}
+                onMenuScrollToBottom={loadMoreFilterProjectFlocks}
+                isDisabled={!filterFormik.values.location}
+                isError={
+                  filterFormik.touched.project_flock &&
+                  Boolean(filterFormik.errors.project_flock)
+                }
+                errorMessage={filterFormik.errors.project_flock}
+                isClearable
+                className={{ wrapper: 'w-full' }}
+              />
+            </div>
+
+            <div>
+              <SelectInput
+                required
+                label='Kandang'
+                placeholder='Pilih Kandang...'
+                value={filterFormik.values.kandang}
+                onChange={(value) => {
+                  handleFilterKandangChange(value);
+                }}
+                options={filterKandangOptions}
+                isDisabled={!filterFormik.values.project_flock}
+                isError={
+                  filterFormik.touched.kandang &&
+                  Boolean(filterFormik.errors.kandang)
+                }
+                errorMessage={filterFormik.errors.kandang}
+                isClearable
+                className={{ wrapper: 'w-full' }}
+              />
             </div>
           </div>
-        </Modal>
 
-        {/* Floating Actions Button */}
-        <FloatingActionsButton
-          actions={[
-            {
-              action: 'DETAIL',
-              icon: 'mdi:eye-outline',
-              label: 'Lihat Detail',
-              hidden: selectedRowIds.length !== 1,
-              onClick() {
-                router.push(
-                  `/production/uniformity/detail?uniformityId=${selectedRowIds[0]}`
-                );
-                setRowSelection({});
-              },
-              permissions: 'lti.production.uniformity.detail',
+          <div className='w-full'>
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <div className='w-full px-4'>
+                <AlertErrorList formErrorList={formErrorList} onClose={close} />
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
+            <Button
+              variant='soft'
+              className='ms-4 min-w-36 rounded-lg'
+              onClick={handleResetFilters}
+            >
+              Reset Filter
+            </Button>
+            <Button
+              className='me-4 min-w-36 rounded-lg'
+              onClick={handleApplyFilters}
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Floating Actions Button */}
+      <FloatingActionsButton
+        actions={[
+          {
+            action: 'DETAIL',
+            icon: 'mdi:eye-outline',
+            label: 'Lihat Detail',
+            hidden: selectedRowIds.length !== 1,
+            onClick() {
+              router.push(
+                `/production/uniformity/detail?uniformityId=${selectedRowIds[0]}`
+              );
+              setRowSelection({});
             },
-            {
-              action: 'DELETE',
-              icon: 'mdi:delete-outline',
-              label: 'Delete',
-              hidden: selectedRowIds.length !== 1,
-              onClick: handleDelete,
-              permissions: 'lti.production.uniformity.delete',
-            },
-          ]}
-          approvals={[
-            {
-              action: 'APPROVED',
-              icon: 'mdi:check-circle-outline',
-              label: 'Approve',
-              onClick: handleBulkApprove,
-              permissions: 'lti.production.uniformity.approve',
-              disabled: !canApproveReject,
-            },
-            {
-              action: 'REJECTED',
-              icon: 'mdi:close-circle-outline',
-              label: 'Reject',
-              onClick: handleBulkReject,
-              permissions: 'lti.production.uniformity.approve',
-              disabled: !canApproveReject,
-            },
-          ]}
-          selectedRowIds={selectedRowIds}
-          onClose={handleCloseFab}
-        />
-      </section>
+            permissions: 'lti.production.uniformity.detail',
+          },
+          {
+            action: 'DELETE',
+            icon: 'mdi:delete-outline',
+            label: 'Delete',
+            hidden: selectedRowIds.length !== 1,
+            onClick: handleDelete,
+            permissions: 'lti.production.uniformity.delete',
+          },
+        ]}
+        approvals={[
+          {
+            action: 'APPROVED',
+            icon: 'mdi:check-circle-outline',
+            label: 'Approve',
+            onClick: handleBulkApprove,
+            permissions: 'lti.production.uniformity.approve',
+            disabled: !canApproveReject,
+          },
+          {
+            action: 'REJECTED',
+            icon: 'mdi:close-circle-outline',
+            label: 'Reject',
+            onClick: handleBulkReject,
+            permissions: 'lti.production.uniformity.approve',
+            disabled: !canApproveReject,
+          },
+        ]}
+        selectedRowIds={selectedRowIds}
+        onClose={handleCloseFab}
+      />
     </>
   );
 };
diff --git a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
index 9188ba59..8d38d669 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
@@ -10,11 +10,10 @@ import {
   UniformityInfoUmum,
 } from '@/types/api/production/uniformity';
 import Table from '@/components/Table';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import {
-  getWeightStatusColor,
-  getWeightStatusIndicatorColor,
   getWeightStatusText,
+  getWeightStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { BodyWeightData } from '@/types/api/production/uniformity';
 
@@ -65,30 +64,12 @@ const UniformityDetailsPreview = ({
         cell: (props) => {
           const status = props.row.original.status;
           return status ? (
-            <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
-                  status: getWeightStatusIndicatorColor(status),
-                }}
-              >
-                {getWeightStatusText(status)}
-              </Badge>
-            </div>
+            <StatusBadge
+              color={getWeightStatusBadgeColor(status)}
+              text={getWeightStatusText(status)}
+            />
           ) : (
-            <Badge
-              statusIndicator={true}
-              variant='soft'
-              className={{
-                badge:
-                  'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
-                status: 'bg-info',
-              }}
-            >
-              Unknown
-            </Badge>
+            <StatusBadge color='info' text='Unknown' />
           );
         },
       },
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 103fc791..5963df8a 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -14,12 +14,11 @@ import { useRouter } from 'next/navigation';
 import toast from 'react-hot-toast';
 import { UniformityApi } from '@/services/api/uniformity';
 import { isResponseError } from '@/lib/api-helper';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import { formatNumber } from '@/lib/helper';
 import {
-  getWeightStatusColor,
-  getWeightStatusIndicatorColor,
   getWeightStatusText,
+  getWeightStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { DetailOptionType } from '@/types/api/production/uniformity';
 import {
@@ -204,30 +203,12 @@ const UniformityResultForm = () => {
         cell: (props) => {
           const status = props.row.original.status;
           return status ? (
-            <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
-                  status: getWeightStatusIndicatorColor(status),
-                }}
-              >
-                {getWeightStatusText(status)}
-              </Badge>
-            </div>
+            <StatusBadge
+              color={getWeightStatusBadgeColor(status)}
+              text={getWeightStatusText(status)}
+            />
           ) : (
-            <Badge
-              statusIndicator={true}
-              variant='soft'
-              className={{
-                badge:
-                  'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
-                status: 'bg-info',
-              }}
-            >
-              Unknown
-            </Badge>
+            <StatusBadge color='info' text='Unknown' />
           );
         },
       },

From c63df91e081dd5b9c0cc1a410daffb4e773778bf Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 15:10:18 +0700
Subject: [PATCH 31/53] fix(FE): fixing rounded value

---
 src/components/pages/dashboard/DashboardProduction.tsx        | 2 +-
 src/components/pages/dashboard/chart/DashboardLineChart.tsx   | 2 +-
 .../pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx   | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index ad74413b..43c66129 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -410,7 +410,7 @@ const DashboardProduction = () => {
         ref={filterModal.ref}
         className={{
           modal: 'p-0',
-          modalBox: 'p-0 rounded-[14px]',
+          modalBox: 'p-0 rounded-[3.5rem]',
         }}
       >
         <div className='flex flex-col'>
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 76d18a1e..85b0f683 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -721,7 +721,7 @@ const DashboardLineChart = ({
             return (
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
-                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
+                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
                   <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
index e0c326c1..348735bf 100644
--- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
@@ -25,7 +25,7 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
               <>
                 {/* Filter icon */}
                 <div className='mb-2'>
-                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
                     <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                       <Icon
                         icon='heroicons:funnel'
@@ -50,7 +50,7 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
             {meta?.filters && (
               <>
                 {/* Filter icon */}
-                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
+                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
                   <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'

From b8031448ff33ae173d45ce6bcae728a8372b1eda Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 15:24:30 +0700
Subject: [PATCH 32/53] refactor(FE): Adjust checkbox alignment and column
 padding

---
 .../pages/production/uniformity/UniformityTable.tsx      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 6cf28f02..bf482edc 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -821,7 +821,7 @@ const UniformityTable = () => {
           );
 
           return (
-            <div className='w-full flex flex-row justify-center'>
+            <div className='w-full flex flex-row xl:justify-center justify-end'>
               <CheckboxInput
                 name='allRow'
                 checked={isAllSelected}
@@ -834,7 +834,7 @@ const UniformityTable = () => {
         },
         cell: ({ row }) => {
           return (
-            <div className='w-full flex flex-row justify-center'>
+            <div className='w-full flex flex-row xl:justify-center justify-end'>
               <CheckboxInput
                 name='row'
                 checked={row.getIsSelected()}
@@ -1057,7 +1057,10 @@ const UniformityTable = () => {
               isResponseSuccess(uniformities) &&
               uniformities?.data?.length === 0,
           }),
-          headerColumnClassName: 'text-nowrap',
+          headerColumnClassName:
+            'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
+          bodyColumnClassName:
+            'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
         }}
         emptyContent={<UniformityTableSkeleton />}
       />

From e93a9c801181ce6b6e5940dd403ebebbb457ee32 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 15:33:00 +0700
Subject: [PATCH 33/53] refactor(FE): Add divider above Next button in
 UniformityForm

---
 .../uniformity/form/UniformityForm.tsx        | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 341c29a1..257de339 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -757,20 +757,23 @@ const UniformityForm = ({
             </div>
 
             {!isNextStep && (
-              <RequirePermission permissions='lti.production.uniformity.create'>
-                <Button
-                  type='submit'
-                  color='primary'
-                  className='w-full mt-6'
-                  disabled={formik.isSubmitting}
-                >
-                  {formik.isSubmitting ? (
-                    <span className='loading loading-spinner'></span>
-                  ) : (
-                    'Next'
-                  )}
-                </Button>
-              </RequirePermission>
+              <>
+                <div className='border-t border-base-content/20 mt-3' />
+                <RequirePermission permissions='lti.production.uniformity.create'>
+                  <Button
+                    type='submit'
+                    color='primary'
+                    className='w-full mt-4'
+                    disabled={formik.isSubmitting}
+                  >
+                    {formik.isSubmitting ? (
+                      <span className='loading loading-spinner'></span>
+                    ) : (
+                      'Next'
+                    )}
+                  </Button>
+                </RequirePermission>
+              </>
             )}
           </form>
         </section>

From 6c6634fa1d001c3c5bd8050e7d63e00320932804 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 15:35:32 +0700
Subject: [PATCH 34/53] refactor(FE): Rename column header 'No' to 'Number'

---
 .../production/uniformity/detail/UniformityDetailsPreview.tsx   | 2 +-
 .../pages/production/uniformity/form/UniformityPreviewForm.tsx  | 2 +-
 .../pages/production/uniformity/form/UniformityResultForm.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
index 8d38d669..04c43a02 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
@@ -50,7 +50,7 @@ const UniformityDetailsPreview = ({
     () => [
       {
         accessorKey: 'number',
-        header: 'No',
+        header: 'Number',
         cell: (props) => props.row.original.number,
       },
       {
diff --git a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
index 8cac641a..314eabfd 100644
--- a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
@@ -50,7 +50,7 @@ const UniformityPreviewForm = () => {
     () => [
       {
         accessorKey: 'number',
-        header: 'No',
+        header: 'Number',
         cell: (props) => props.row.original.number,
       },
       {
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 5963df8a..98db02fc 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -189,7 +189,7 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'number',
-        header: 'No',
+        header: 'Number',
         cell: (props) => props.row.original.number,
       },
       {

From aab8e0c5ce709f01d54664e6dbafb0e9bbeefcef Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 15:37:53 +0700
Subject: [PATCH 35/53] refactor(FE): Remove unused imports and accessorKey
 props

---
 .../pages/production/uniformity/UniformityTable.tsx          | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index bf482edc..d45cb217 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -24,7 +24,6 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
-import Card from '@/components/Card';
 import UniformityTableSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityTableSkeleton';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useUniformityStore } from '@/stores/uniformity/uniformity.store';
@@ -51,8 +50,6 @@ import {
 import { generateUniformityPDF } from '@/components/pages/production/uniformity/export/UniformityExportPDF';
 import { generateUniformityExcel } from '@/components/pages/production/uniformity/export/UniformityExportExcel';
 import Dropdown from '@/components/Dropdown';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import { useFormik } from 'formik';
 import {
   UniformityTableFilterSchema,
@@ -115,12 +112,10 @@ const UniformityConfirmationPreview = ({
 
   const columns: ColumnDef<DetailOptionType>[] = [
     {
-      accessorKey: 'label',
       header: 'Label',
       cell: (props) => props.row.original.label,
     },
     {
-      accessorKey: 'value',
       header: 'Value',
       cell: (props) => {
         const id = props.row.original.id;

From db33247d6c3bb2b9e349bd8bda72121df2782238 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 15:41:05 +0700
Subject: [PATCH 36/53] refactor(FE): Use English copy for bulk reject modal

---
 src/components/pages/production/uniformity/UniformityTable.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index d45cb217..018e2537 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1209,7 +1209,8 @@ const UniformityTable = () => {
         ref={bulkRejectModal.ref}
         type='error'
         iconPosition='left'
-        text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
+        text={`Reject This Submission?`}
+        subtitleText={`Are you sure you want to reject this submission? (${selectedRowIds.length} data)`}
         secondaryButton={{
           text: 'Cancel',
         }}

From 60d5551dff9d12ff0c0eb160ba5e94ddc8397e47 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 16:17:57 +0700
Subject: [PATCH 37/53] fix(FE): Require delivery fields if supplier chosen

---
 .../movement/form/MovementForm.schema.ts      | 58 ++++++++++---
 .../inventory/movement/form/MovementForm.tsx  | 86 +++++++++++++++++--
 2 files changed, 129 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index c448754a..1de5747e 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -123,23 +123,61 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     .transform((value) =>
       isNaN(value) || value === '' || value === null ? undefined : value
     )
-    .optional()
-    .nullable()
-    .min(1, 'Biaya minimal 1!')
-    .typeError('Biaya harus berupa angka!'),
+    .when('supplier_id', {
+      is: (supplier_id: number | null | undefined) =>
+        supplier_id !== null && supplier_id !== undefined && supplier_id > 0,
+      then: (schema) =>
+        schema
+          .required('Biaya pengiriman wajib diisi!')
+          .min(1, 'Biaya minimal 1!')
+          .typeError('Biaya harus berupa angka!'),
+      otherwise: (schema) =>
+        schema
+          .optional()
+          .nullable()
+          .min(1, 'Biaya minimal 1!')
+          .typeError('Biaya harus berupa angka!'),
+    }),
   delivery_cost_per_item: Yup.number()
     .transform((value) =>
       isNaN(value) || value === '' || value === null ? undefined : value
     )
-    .optional()
-    .nullable()
-    .min(1, 'Biaya per item minimal 1!')
-    .typeError('Biaya per item harus berupa angka!'),
+    .when('supplier_id', {
+      is: (supplier_id: number | null | undefined) =>
+        supplier_id !== null && supplier_id !== undefined && supplier_id > 0,
+      then: (schema) =>
+        schema
+          .required('Biaya per item wajib diisi!')
+          .min(1, 'Biaya per item minimal 1!')
+          .typeError('Biaya per item harus berupa angka!'),
+      otherwise: (schema) =>
+        schema
+          .optional()
+          .nullable()
+          .min(1, 'Biaya per item minimal 1!')
+          .typeError('Biaya per item harus berupa angka!'),
+    }),
   document_path: Yup.string().nullable().optional(),
   document_index: Yup.number().optional(),
   document: DeliveryDocumentSchema,
-  driver_name: Yup.string().optional().nullable(),
-  vehicle_plate: Yup.string().optional().nullable(),
+  driver_name: Yup.string().when('supplier_id', {
+    is: (supplier_id: number | null | undefined) =>
+      supplier_id !== null && supplier_id !== undefined && supplier_id > 0,
+    then: (schema) =>
+      schema
+        .required('Nama sopir wajib diisi!')
+        .min(1, 'Nama sopir wajib diisi!'),
+    otherwise: (schema) => schema.optional().nullable(),
+  }),
+  vehicle_plate: Yup.string().when('supplier_id', {
+    is: (supplier_id: number | null | undefined) =>
+      supplier_id !== null && supplier_id !== undefined && supplier_id > 0,
+    then: (schema) =>
+      schema
+        .required('Plat nomor wajib diisi!')
+        .min(1, 'Plat nomor wajib diisi!'),
+    otherwise: (schema) => schema.optional().nullable(),
+  }),
   supplier: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 05d5b052..b2f50361 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -984,6 +984,28 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik.values.deliveries, formik.values.products, type]
   );
 
+  const isSupplierSelected = useCallback(
+    (deliveryIdx: number) => {
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      return (
+        delivery &&
+        delivery.supplier_id !== null &&
+        delivery.supplier_id !== undefined &&
+        delivery.supplier_id > 0
+      );
+    },
+    [formik.values.deliveries]
+  );
+
+  const hasAnySupplierSelected = useMemo(() => {
+    return formik.values.deliveries?.some(
+      (delivery) =>
+        delivery.supplier_id !== null &&
+        delivery.supplier_id !== undefined &&
+        delivery.supplier_id > 0
+    );
+  }, [formik.values.deliveries]);
+
   // ===== COMPUTED VALUES =====
   const invalidQtyRows = useMemo(
     () =>
@@ -1659,12 +1681,62 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                     </th>
-                    <th>Supplier</th>
-                    <th>Plat Nomor</th>
+                    <th>
+                      Supplier
+                      {hasAnySupplierSelected && (
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-9999'
+                          data-tip='required jika supplier dipilih'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      )}
+                    </th>
+                    <th>
+                      Plat Nomor
+                      {hasAnySupplierSelected && (
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-9999'
+                          data-tip='required jika supplier dipilih'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      )}
+                    </th>
                     <th>Dokumen</th>
-                    <th>Biaya Pengiriman (Rp.)</th>
-                    <th>Biaya Per Item (Rp.)</th>
-                    <th>Nama Sopir</th>
+                    <th>
+                      Biaya Pengiriman (Rp.)
+                      {hasAnySupplierSelected && (
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-9999'
+                          data-tip='required jika supplier dipilih'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      )}
+                    </th>
+                    <th>
+                      Biaya Per Item (Rp.)
+                      {hasAnySupplierSelected && (
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-9999'
+                          data-tip='required jika supplier dipilih'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      )}
+                    </th>
+                    <th>
+                      Nama Sopir
+                      {hasAnySupplierSelected && (
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-9999'
+                          data-tip='required jika supplier dipilih'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      )}
+                    </th>
                     {type !== 'detail' && <th>Aksi</th>}
                   </tr>
                 </thead>
@@ -1772,6 +1844,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             idx
                           )}
                           readOnly={type === 'detail'}
+                          required={isSupplierSelected(idx)}
                           className={{
                             wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
                           }}
@@ -1867,6 +1940,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             idx
                           )}
                           readOnly={type === 'detail'}
+                          required={isSupplierSelected(idx)}
                           className={{
                             wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
                           }}
@@ -1890,6 +1964,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             idx
                           )}
                           readOnly={type === 'detail'}
+                          required={isSupplierSelected(idx)}
                           className={{
                             wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
                           }}
@@ -1908,6 +1983,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             idx
                           )}
                           readOnly={type === 'detail'}
+                          required={isSupplierSelected(idx)}
                           className={{
                             wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
                           }}

From b9ed7df063408d22bc9e3a062af2e680c964d389 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 16:33:02 +0700
Subject: [PATCH 38/53] fix(FE): fixing rounded value

---
 src/components/pages/dashboard/DashboardProduction.tsx        | 2 +-
 src/components/pages/dashboard/chart/DashboardLineChart.tsx   | 2 +-
 .../pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx   | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 43c66129..2085d943 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -410,7 +410,7 @@ const DashboardProduction = () => {
         ref={filterModal.ref}
         className={{
           modal: 'p-0',
-          modalBox: 'p-0 rounded-[3.5rem]',
+          modalBox: 'p-0 rounded-[0.875rem]',
         }}
       >
         <div className='flex flex-col'>
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 85b0f683..092e4bca 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -721,7 +721,7 @@ const DashboardLineChart = ({
             return (
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
-                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
+                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
                   <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
index 348735bf..6e4e4b97 100644
--- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
@@ -25,7 +25,7 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
               <>
                 {/* Filter icon */}
                 <div className='mb-2'>
-                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
                     <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                       <Icon
                         icon='heroicons:funnel'
@@ -50,7 +50,7 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
             {meta?.filters && (
               <>
                 {/* Filter icon */}
-                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
+                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
                   <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'

From a51a020dfa7ae08802a4e83b966c8c7915d4bee8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 17:07:56 +0700
Subject: [PATCH 39/53] refactor(FE): Replace Button with static icon tiles in
 skeletons

---
 .../skeleton/UniformityBarChartSkeleton.tsx   | 37 +++++++++++--------
 .../skeleton/UniformityGaugeChartSkeleton.tsx | 33 ++++++++++-------
 .../skeleton/UniformityTableSkeleton.tsx      | 33 ++++++++++-------
 3 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index fe7f9aff..8d5994b2 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -1,4 +1,3 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 const LeftLegend = () => {
@@ -65,26 +64,32 @@ const ChartArea = () => {
 
 const EmptyState = () => {
   return (
-    <>
-      <div className='absolute inset-0 flex flex-col items-center justify-center z-10'>
-        <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-2.5'>
-          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
-            <Icon
-              fontSize={26}
-              icon={'heroicons:funnel'}
-              className='text-white'
-            />
-          </Button>
+    <div className='absolute inset-0 flex items-center justify-center z-10'>
+      <div className='flex flex-col items-center justify-center'>
+        {/* Filter icon */}
+        <div className='mb-2'>
+          <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+            <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            </div>
+          </div>
         </div>
-        <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
+
+        {/* Empty state text */}
+        <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
           No Filters Selected
-        </span>
-        <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
+        </h3>
+        <p className='text-base-content/50 text-xs text-center max-w-xs'>
           Please choose filters to narrow down your results and make your search
           easier.
-        </span>
+        </p>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
index a72875f5..f49ebc85 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
@@ -1,4 +1,3 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import React from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
@@ -55,23 +54,29 @@ const UniformityGaugeChartSkeleton: React.FC<
               </Pie>
             </PieChart>
           </ResponsiveContainer>
-          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
-            <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mt-5 mb-2.5'>
-              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
-                <Icon
-                  fontSize={26}
-                  icon={'heroicons:funnel'}
-                  className='text-white'
-                />
-              </Button>
+          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
+            {/* Filter icon */}
+            <div className='mb-2 mt-5'>
+              <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                  <Icon
+                    icon='heroicons:funnel'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                </div>
+              </div>
             </div>
-            <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
+
+            {/* Empty state text */}
+            <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
               No Filters Selected
-            </span>
-            <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
+            </h3>
+            <p className='text-base-content/50 text-xs text-center max-w-xs'>
               Please choose filters to narrow down your results and make your
               search easier.
-            </span>
+            </p>
           </div>
         </div>
       </div>
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
index 08c1e0b5..f70b23e1 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -1,25 +1,30 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 const UniformityTableSkeleton = () => {
   return (
-    <div className='flex flex-col items-center justify-center gap-2 my-20'>
-      <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-9'>
-        <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
-          <Icon
-            fontSize={26}
-            icon={'heroicons:document-text'}
-            className='text-white'
-          />
-        </Button>
+    <div className='flex flex-col items-center justify-center my-20'>
+      {/* Document icon */}
+      <div className='mb-2'>
+        <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+          <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+            <Icon
+              icon='heroicons:document-text'
+              className='text-white'
+              width={20}
+              height={20}
+            />
+          </div>
+        </div>
       </div>
-      <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
+
+      {/* Empty state text */}
+      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
         No Data Available
-      </span>
-      <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
+      </h3>
+      <p className='text-base-content/50 text-xs text-center max-w-xs'>
         There is no uniformity data displayed. Enter uniformity check data to
         get started.
-      </span>
+      </p>
     </div>
   );
 };

From c7818cefbb69f5cd1ec88950ecf32fb7f2f49d5e Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 18:24:43 +0700
Subject: [PATCH 40/53] fix(FE): adjust ui debt supplier pixel perfect figma

---
 src/components/Card.tsx                       |   5 +
 src/components/Tabs.tsx                       |  35 ++--
 src/components/helper/ButtonFilter.tsx        |   8 +-
 .../pages/dashboard/DashboardProduction.tsx   |   2 +-
 .../pages/report/finance/FinanceTabs.tsx      |  25 ++-
 .../report/finance/tab/DebtSupplierTab.tsx    | 172 +++++++++++-------
 src/stores/finance-tab/finance-tab.store.ts   |  51 ++++++
 7 files changed, 214 insertions(+), 84 deletions(-)
 create mode 100644 src/stores/finance-tab/finance-tab.store.ts

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index c78766e1..ce7c1c57 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -123,6 +123,10 @@ const Card = ({
     return cn(baseClasses, 'p-6', className?.body);
   };
 
+  const getCollapsibleClasses = () => {
+    return cn('', className?.collapsible);
+  };
+
   const getTitleClasses = () => {
     const sizeClasses = {
       sm: 'text-lg',
@@ -213,6 +217,7 @@ const Card = ({
               titleClassName='w-full cursor-pointer'
               contentClassName='p-0'
               fullWidth={true}
+              className={getCollapsibleClasses()}
             >
               {cardContent}
             </Collapse>
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 8f685452..8a06f9ed 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -25,8 +25,10 @@ export interface TabsProps
         wrapper?: string;
         tab?: string;
         content?: string;
+        tabHeaderWrapper?: string;
       };
   onTabChange?: (tabId: string) => void;
+  sideContent?: ReactNode;
 }
 
 const Tabs = ({
@@ -38,6 +40,7 @@ const Tabs = ({
   activeTabId: controlledActiveId,
   className,
   onTabChange,
+  sideContent,
   ...props
 }: TabsProps) => {
   // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
@@ -59,6 +62,7 @@ const Tabs = ({
     wrapper: wrapperClassName,
     tab: tabClassName,
     content: contentClassName,
+    tabHeaderWrapper: tabHeaderWrapperClassName,
   } = typeof className === 'object'
     ? className
     : { wrapper: className, tab: undefined };
@@ -102,6 +106,10 @@ const Tabs = ({
       tabClassName
     );
 
+  const getSideContentClasses = () => {
+    return cn('flex flex-row', tabHeaderWrapperClassName);
+  };
+
   const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
 
   return (
@@ -112,18 +120,21 @@ const Tabs = ({
         typeof className === 'string' ? className : containerClassName
       )}
     >
-      <div role='tablist' className={getTabsClasses()}>
-        {tabs.map(({ id, label, disabled }) => (
-          <button
-            key={id}
-            role='tab'
-            className={getTabClasses(id === activeTabId, disabled)}
-            onClick={() => !disabled && handleTabChange(id)}
-            disabled={disabled}
-          >
-            {label}
-          </button>
-        ))}
+      <div className={getSideContentClasses()}>
+        <div role='tablist' className={getTabsClasses()}>
+          {tabs.map(({ id, label, disabled }) => (
+            <button
+              key={id}
+              role='tab'
+              className={getTabClasses(id === activeTabId, disabled)}
+              onClick={() => !disabled && handleTabChange(id)}
+              disabled={disabled}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        {sideContent && sideContent}
       </div>
 
       {activeContent && (
diff --git a/src/components/helper/ButtonFilter.tsx b/src/components/helper/ButtonFilter.tsx
index aca86a88..cff1d167 100644
--- a/src/components/helper/ButtonFilter.tsx
+++ b/src/components/helper/ButtonFilter.tsx
@@ -19,11 +19,11 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       variant='outline'
       color='none'
       className={cn(
-        'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+        'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
         'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
         getFilledFormikValuesCount(values) > 0
-          ? 'border-primary-gradient !rounded-[8px]'
-          : '!rounded-[8px]',
+          ? 'border-primary-gradient text-primary rounded-lg!'
+          : 'rounded-lg',
         props.className
       )}
     >
@@ -37,7 +37,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       />
       Filter
       {getFilledFormikValuesCount(values) > 0 && (
-        <span className='w-[20px] h-[20px] text-white bg-[#FF3535] rounded-[8px] border-[1px] border-base-300 flex items-center justify-center text-xs'>
+        <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
           {getFilledFormikValuesCount(values)}
         </span>
       )}
diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 2085d943..674f3719 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -226,7 +226,7 @@ const DashboardProduction = () => {
               variant='outline'
               color='none'
               className={cn(
-                'p-2 rounded-lg font-semibold text-sm gap-1.5',
+                'rounded-lg font-semibold text-sm gap-1.5',
                 'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
               )}
             >
diff --git a/src/components/pages/report/finance/FinanceTabs.tsx b/src/components/pages/report/finance/FinanceTabs.tsx
index 58d1e78b..e7800f96 100644
--- a/src/components/pages/report/finance/FinanceTabs.tsx
+++ b/src/components/pages/report/finance/FinanceTabs.tsx
@@ -1,28 +1,43 @@
 'use client';
 
+import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
 import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
+import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 
 const FinanceTabs = () => {
+  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const tabActions = useFinanceTabStore((state) => state.tabActions);
+
   const tabs = [
     {
       id: '1',
       label: 'Rekapitulasi Hutang Ke Supplier',
-
-      content: <DebtSupplierTab />,
+      content: <DebtSupplierTab tabId={'1'} />,
     },
     {
       id: '2',
       label: 'Kontrol Pembayaran Customer',
-
       content: <CustomerPaymentTab />,
     },
   ];
 
   return (
-    <section className='w-full p-4'>
-      <Tabs tabs={tabs} variant='lifted' />
+    <section className='w-full'>
+      <Tabs
+        tabs={tabs}
+        variant='boxed'
+        activeTabId={activeTabId}
+        onTabChange={setActiveTabId}
+        className={{
+          tabHeaderWrapper:
+            'justify-between items-center p-3 border-b border-base-content/10',
+          tab: 'w-fit',
+          content: 'p-0 m-0',
+        }}
+        sideContent={tabActions[activeTabId] || null}
+      />
     </section>
   );
 };
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index c5065d29..aa66cf66 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -22,7 +22,7 @@ import { generateDebtSupplierExcel } from '@/components/pages/report/finance/exp
 import { generateDebtSupplierPDF } from '@/components/pages/report/finance/export/DebtSupllierExportPDF';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import { DebtSupplierApi } from '@/services/api/report/debt-supplier';
@@ -37,6 +37,7 @@ import { Color } from '@/types/theme';
 import { Supplier } from '@/types/api/master-data/supplier';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -75,7 +76,11 @@ const getPillBadge = (
   );
 };
 
-const DebtSupplierTab = () => {
+interface DebtSupplierTabProps {
+  tabId: string;
+}
+
+const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   // ===== STATE MANAGEMENT =====
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
@@ -271,6 +276,77 @@ const DebtSupplierTab = () => {
     }
   }, [debtSupplierExport]);
 
+  // ===== REGISTER TAB ACTIONS TO STORE =====
+  const setTabActions = useFinanceTabStore((state) => state.setTabActions);
+  const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
+
+  useEffect(() => {
+    setTabActions(
+      tabId,
+      <div className='flex flex-row gap-3 '>
+        <ButtonFilter
+          values={formik.values}
+          onClick={handleFilterModalOpen}
+          variant='outline'
+          className='px-3 py-2.5'
+        />
+
+        <Dropdown
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              isLoading={isAnyExportLoading}
+              className={cn(
+                'px-3 py-2.5',
+                'rounded-lg font-semibold text-sm gap-1.5',
+                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+              )}
+            >
+              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
+              Export
+              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
+                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              </div>
+            </Button>
+          }
+          align='end'
+          className={{
+            content:
+              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
+          }}
+        >
+          <Menu className='p-0 w-full'>
+            <MenuItem
+              className='text-sm p-3'
+              title='Excel'
+              onClick={handleExportExcel}
+            />
+            <MenuItem
+              className='text-sm p-3'
+              title='PDF'
+              onClick={handleExportPdf}
+            />
+          </Menu>
+        </Dropdown>
+      </div>
+    );
+  }, [
+    tabId,
+    formik.values,
+    isAnyExportLoading,
+    handleExportExcel,
+    handleExportPdf,
+    setTabActions,
+  ]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearTabActions(tabId);
+    };
+  }, [tabId, clearTabActions]);
+
   const getTableColumns = (supplier: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
       id: 'no',
@@ -478,41 +554,9 @@ const DebtSupplierTab = () => {
   ];
   return (
     <>
-      <div className='w-full p-0 sm:p-4 flex flex-col gap-4'>
-        <Card
-          subtitle='Laporan > Rekapitulasi Hutang ke Supplier'
-          className={{ wrapper: 'w-full', body: 'p-1!' }}
-        >
-          <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
-            <ButtonFilter
-              values={formik.values}
-              onClick={handleFilterModalOpen}
-              variant='outline'
-            />
-
-            <Dropdown
-              trigger={
-                <Button variant='outline' isLoading={isAnyExportLoading}>
-                  <Icon
-                    icon='heroicons:cloud-arrow-down'
-                    width={18}
-                    height={18}
-                  />
-                  Export
-                </Button>
-              }
-              align='end'
-            >
-              <Menu>
-                <MenuItem title='Excel' onClick={handleExportExcel} />
-                <MenuItem title='PDF' onClick={handleExportPdf} />
-              </Menu>
-            </Dropdown>
-          </div>
-        </Card>
-
+      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
-          <div className='mt-6 text-center text-gray-500'>
+          <div className='mt-6 text-center text-base-content/50'>
             Silakan klik tombol Filter untuk mengatur filter dan menampilkan
             data.
           </div>
@@ -521,7 +565,7 @@ const DebtSupplierTab = () => {
             <span className='loading loading-spinner loading-xl' />
           </div>
         ) : data.length === 0 ? (
-          <div className='mt-6 text-center text-gray-500'>
+          <div className='mt-6 text-center text-base-content/50'>
             Tidak ada data yang dapat ditampilkan...
           </div>
         ) : (
@@ -531,10 +575,11 @@ const DebtSupplierTab = () => {
                 key={supplierReport.supplier.id}
                 title={supplierReport.supplier.name}
                 className={{
-                  wrapper: 'w-full !rounded-lg',
-                  body: 'p-0 rounded-lg',
+                  wrapper: 'w-full rounded-lg border-none',
+                  body: 'p-0',
                   title:
-                    'ps-2 pt-1 pb-1 font-normal text-md bg-primary text-white',
+                    'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+                  collapsible: 'rounded-lg',
                 }}
                 variant='bordered'
                 collapsible={true}
@@ -551,8 +596,9 @@ const DebtSupplierTab = () => {
                   pageSize={supplierReport.rows.length + 1}
                   renderFooter={supplierReport.rows.length > 0}
                   className={{
-                    containerClassName: 'w-full',
-                    tableWrapperClassName: 'overflow-x-auto',
+                    containerClassName: 'w-full mb-0',
+                    tableWrapperClassName:
+                      'overflow-x-auto rounded-tr-none rounded-tl-none',
                     headerColumnClassName: cn(
                       TABLE_DEFAULT_STYLING.headerColumnClassName,
                       'whitespace-nowrap'
@@ -617,33 +663,34 @@ const DebtSupplierTab = () => {
         ref={filterModal.ref}
         className={{
           modal: 'p-0',
-          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
         }}
       >
-        <form
-          className='space-y-6'
-          onSubmit={formik.handleSubmit}
-          onReset={formik.handleReset}
-        >
+        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
           {/* Modal Header */}
-          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+          <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
             <div className='flex items-center gap-2 text-primary'>
               <Icon icon='heroicons:funnel' width={20} height={20} />
-              <h3 className='font-semibold'>Filter Data</h3>
+              <h3 className='font-medium text-sm'>Filter Data</h3>
             </div>
             <Button
               variant='link'
+              type='button'
               onClick={filterModal.closeModal}
-              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+              className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
             >
               <Icon icon='heroicons:x-mark' width={20} height={20} />
             </Button>
           </div>
-          <div className='space-y-4 px-4'>
-            <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
-              <div>
+
+          {/* Modal Body */}
+          <div className='p-4 flex flex-col gap-1.5'>
+            <div>
+              <label className='block text-xs font-semibold text-base-content py-2'>
+                Tanggal
+              </label>
+              <div className='flex flex-row gap-1.5 items-center justify-between'>
                 <DateInput
-                  label='Tanggal'
                   name='startDate'
                   value={formik.values.startDate || ''}
                   onChange={(e) => {
@@ -655,11 +702,8 @@ const DebtSupplierTab = () => {
                   }
                   errorMessage={formik.errors.startDate}
                 />
-              </div>
-
-              <div className='mt-auto'>
+                <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
                 <DateInput
-                  label='‎ '
                   name='endDate'
                   value={formik.values.endDate || ''}
                   onChange={(e) => {
@@ -730,15 +774,19 @@ const DebtSupplierTab = () => {
           </div>
 
           {/* Action Buttons */}
-          <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
+          <div className='flex justify-between items-center gap-4 p-4 border-t border-gray-300 bg-gray-100'>
             <Button
               variant='soft'
-              className='ms-4 min-w-36 rounded-lg'
+              color='none'
+              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
               type='reset'
             >
               Reset Filter
             </Button>
-            <Button className='me-4 min-w-36 rounded-lg' type='submit'>
+            <Button
+              className='min-w-40 text-sm rounded-lg py-3 text-white'
+              type='submit'
+            >
               Apply Filter
             </Button>
           </div>
diff --git a/src/stores/finance-tab/finance-tab.store.ts b/src/stores/finance-tab/finance-tab.store.ts
new file mode 100644
index 00000000..9b5cf096
--- /dev/null
+++ b/src/stores/finance-tab/finance-tab.store.ts
@@ -0,0 +1,51 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export type FinanceTabActionsSlice = {
+  // State - actions per tab ID
+  tabActions: Record<string, ReactNode>;
+
+  // Actions
+  setTabActions: (tabId: string, actions: ReactNode) => void;
+  clearTabActions: (tabId: string) => void;
+  clearAllTabActions: () => void;
+};
+
+export const useFinanceTabStore = create<FinanceTabActionsSlice>()(
+  devtools(
+    (set) => ({
+      tabActions: {},
+
+      setTabActions: (tabId, actions) =>
+        set(
+          (state) => ({
+            tabActions: {
+              ...state.tabActions,
+              [tabId]: actions,
+            },
+          }),
+          false,
+          'setTabActions'
+        ),
+
+      clearTabActions: (tabId) =>
+        set(
+          (state) => {
+            const { [tabId]: _, ...rest } = state.tabActions;
+            return { tabActions: rest };
+          },
+          false,
+          'clearTabActions'
+        ),
+
+      clearAllTabActions: () =>
+        set({ tabActions: {} }, false, 'clearAllTabActions'),
+    }),
+    {
+      name: 'FinanceTabStore',
+    }
+  )
+);

From 0ed6c246b1289b4c496d0c19c66b8d25e479eef2 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 20:18:42 +0700
Subject: [PATCH 41/53] fix(FE): fix badge and table pdf

---
 src/components/helper/StatusBadge.tsx         |  2 +
 .../finance/export/DebtSupllierExportPDF.tsx  | 59 ++++++++++++-------
 .../report/finance/tab/DebtSupplierTab.tsx    | 21 +------
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/helper/StatusBadge.tsx b/src/components/helper/StatusBadge.tsx
index c4f99593..f9725fff 100644
--- a/src/components/helper/StatusBadge.tsx
+++ b/src/components/helper/StatusBadge.tsx
@@ -27,6 +27,7 @@ const StatusBadge = ({
             'bg-success/30': color === 'success',
             'bg-error/20': color === 'error',
             'bg-primary/20': color === 'info',
+            'bg-[#FF9A20]/12': color === 'warning',
           },
           className?.badge
         ),
@@ -43,6 +44,7 @@ const StatusBadge = ({
           'text-[#008000]': color === 'success',
           'text-error': color === 'error',
           'text-primary': color === 'info',
+          'text-[#FF9A20]': color === 'warning',
         })}
       >
         <circle r='6' cx='6' cy='6' fill='currentColor' />
diff --git a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
index 869430b0..edcd360f 100644
--- a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
+++ b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
@@ -281,16 +281,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
                 <Text>No</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>No. PR</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>No. PO</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
                 <Text>Tgl Terima/Bayar</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
                 <Text>Tgl PO</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 0.6 }]}>
@@ -320,7 +320,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
                 <Text>Status</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View
+                style={[
+                  pdfStyles.tableCellHeader,
+                  { flex: 1, borderRight: 'none' },
+                ]}
+              >
                 <Text>No. Perjalanan</Text>
               </View>
             </View>
@@ -330,16 +335,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
                 <Text></Text> {/* NO */}
               </View>
-              <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                 <Text></Text> {/* No. PR */}
               </View>
-              <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                 <Text></Text> {/* No. PO */}
               </View>
-              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                 <Text></Text> {/* Tgl Terima/Bayar */}
               </View>
-              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                 <Text></Text> {/* Tgl PO */}
               </View>
               <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
@@ -381,8 +386,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
                 <Text></Text> {/* Status */}
               </View>
-              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                <Text></Text> {/* No. Perjalanan */}
+              <View
+                style={[
+                  pdfStyles.tableCell, // No. Perjalanan
+                  { flex: 1, borderRight: 'none' },
+                ]}
+              >
+                <Text></Text>
               </View>
             </View>
 
@@ -400,13 +410,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
                   <Text>{index + 1}</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.pr_number || '-'}</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.po_number || '-'}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                   <Text>
                     {item.received_date
                       ? item.received_date != '-'
@@ -415,7 +425,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                       : '-'}
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                   <Text>
                     {item.po_date
                       ? item.po_date != '-'
@@ -526,7 +536,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                     <Text>-</Text>
                   )}
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View
+                  style={[
+                    pdfStyles.tableCell, // No. Perjalanan
+                    { flex: 1, borderRight: 'none' },
+                  ]}
+                >
                   <Text>{item.travel_number || '-'}</Text>
                 </View>
               </View>
@@ -538,18 +553,18 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
                   <Text>Total</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text></Text>
                 </View>
+                <View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
+                  <Text></Text>
+                </View>
+                <View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
+                  <Text></Text>
+                </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
                   <Text>{formatNumber(supplierReport.total.aging)} Hari</Text>
                 </View>
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index aa66cf66..811c739b 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -2,10 +2,7 @@ import Button from '@/components/Button';
 import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
 import DateInput from '@/components/input/DateInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import { OptionType, useSelect } from '@/components/input/SelectInput';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Modal, { useModal } from '@/components/Modal';
@@ -32,12 +29,12 @@ import {
   DebtSupplierFilterType,
 } from '@/components/pages/report/finance/filter/DebtSupplierFilter';
 import ButtonFilter from '@/components/helper/ButtonFilter';
-import Badge from '@/components/Badge';
 import { Color } from '@/types/theme';
 import { Supplier } from '@/types/api/master-data/supplier';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -61,19 +58,7 @@ const getPillBadge = (
       ? dueStatus[statusText] || 'neutral'
       : paymentStatus[statusText] || 'neutral';
 
-  return (
-    <Badge
-      color={color as Color}
-      size='sm'
-      variant='soft'
-      className={{
-        badge: `py-2.5 px-2 font-medium text-base-content rounded-full border border-${color}`,
-      }}
-      statusIndicator
-    >
-      {statusText}
-    </Badge>
-  );
+  return <StatusBadge color={color as Color} text={statusText} />;
 };
 
 interface DebtSupplierTabProps {

From e980320d002c8a1220201f90f8edb33ce6c4cdf7 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 20:59:16 +0700
Subject: [PATCH 42/53] fix(FE): fixing report finance filter ui

---
 src/components/input/DateInput.tsx            |  27 +-
 .../pages/dashboard/DashboardProduction.tsx   |   1 +
 .../pages/report/finance/FinanceTabs.tsx      |   2 +-
 .../report/finance/tab/CustomerPaymentTab.tsx | 412 ++++++++++--------
 .../report/finance/tab/DebtSupplierTab.tsx    |   6 +-
 5 files changed, 253 insertions(+), 195 deletions(-)

diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index da1a4d81..7c0863c5 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -280,7 +280,7 @@ const DateInput = ({
         ref={calendarModal.ref}
         className={{
           modal: 'rounded',
-          modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
+          modalBox: `max-w-max flex flex-col`,
         }}
         closeOnBackdrop
       >
@@ -296,7 +296,11 @@ const DateInput = ({
             endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
             selected={selectedRange as DateRange}
             onSelect={handleSelectRange}
-            footer={<div className='text-center mt-3'>{displayValue}</div>}
+            footer={
+              <div className='text-center py-2 text-base-content/65 font-semibold text-xs'>
+                {displayValue}
+              </div>
+            }
             disabled={
               [
                 minDate ? { before: minDate } : undefined,
@@ -326,17 +330,26 @@ const DateInput = ({
         )}
         <div className='mt-auto flex flex-col gap-2'>
           {isRange && (
-            <small className='text-secondary'>
-              Tekan dua kali untuk memilih tanggal awal
+            <small className='text-base-content/65'>
+              Tekan dua kali untuk reset tanggal awal
             </small>
           )}
 
-          <div className='flex h-full justify-end items-end gap-2'>
-            <Button type='button' color='warning' onClick={handleResetDate}>
+          <div className='flex h-full justify-end items-end gap-1.5 mt-3'>
+            <Button
+              type='button'
+              color='none'
+              className='bg-transparent hover:bg-base-content/10 border-none text-base text-base-content/65 px-3'
+              onClick={handleResetDate}
+            >
               Reset
             </Button>
             {isRange && (
-              <Button type='button' onClick={handleSaveDate}>
+              <Button
+                type='button'
+                className='rounded-lg px-3 py-2 text-white'
+                onClick={handleSaveDate}
+              >
                 Simpan
               </Button>
             )}
diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 674f3719..27cc208b 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -463,6 +463,7 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.endDate) &&
                       Boolean(formik.touched.endDate)
                     }
+                    isRange
                   />
                 </div>
               </div>
diff --git a/src/components/pages/report/finance/FinanceTabs.tsx b/src/components/pages/report/finance/FinanceTabs.tsx
index e7800f96..ffb0d3f1 100644
--- a/src/components/pages/report/finance/FinanceTabs.tsx
+++ b/src/components/pages/report/finance/FinanceTabs.tsx
@@ -19,7 +19,7 @@ const FinanceTabs = () => {
     {
       id: '2',
       label: 'Kontrol Pembayaran Customer',
-      content: <CustomerPaymentTab />,
+      content: <CustomerPaymentTab tabId={'2'} />,
     },
   ];
 
diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index dc1705ed..0ce0b904 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Card from '@/components/Card';
@@ -11,7 +11,7 @@ import { FinanceApi } from '@/services/api/report/finance-report';
 import { UserApi } from '@/services/api/user';
 import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
-import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
 import {
   CustomerPaymentReport,
   CustomerPaymentSummary,
@@ -26,8 +26,13 @@ import { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
 import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
+import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 
-const CustomerPaymentTab = () => {
+interface CustomerPaymentTabProps {
+  tabId: string;
+}
+
+const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   // ===== STATE MANAGEMENT =====
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
@@ -111,6 +116,10 @@ const CustomerPaymentTab = () => {
   };
 
   // ===== FILTER HANDLERS =====
+  const handleFilterModalOpen = useCallback(() => {
+    filterModal.openModal();
+  }, [filterModal]);
+
   const handleResetFilters = useCallback(() => {
     setIsSubmitted(false);
     setFilterCustomer([]);
@@ -298,6 +307,92 @@ const CustomerPaymentTab = () => {
     }
   }, [customerPaymentExport]);
 
+  // ===== REGISTER TAB ACTIONS TO STORE =====
+  const setTabActions = useFinanceTabStore((state) => state.setTabActions);
+  const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
+
+  useEffect(() => {
+    setTabActions(
+      tabId,
+      <div className='flex flex-row gap-3'>
+        <Button
+          variant='outline'
+          color='none'
+          onClick={handleFilterModalOpen}
+          className={cn(
+            'px-3 py-2.5',
+            'rounded-lg! font-semibold text-sm gap-1.5',
+            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
+            hasFilters && 'border-primary-gradient text-primary'
+          )}
+        >
+          <Icon icon='heroicons:funnel' width={18} height={18} />
+          Filter
+          {hasFilters && (
+            <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+              {activeFiltersCount}
+            </span>
+          )}
+        </Button>
+
+        <Dropdown
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              isLoading={isAnyExportLoading}
+              className={cn(
+                'px-3 py-2.5',
+                'rounded-lg font-semibold text-sm gap-1.5',
+                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+              )}
+            >
+              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
+              Export
+              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
+                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              </div>
+            </Button>
+          }
+          align='end'
+          className={{
+            content:
+              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
+          }}
+        >
+          <Menu className='p-0 w-full'>
+            <MenuItem
+              className='text-sm p-3'
+              title='Excel'
+              onClick={handleExportExcel}
+            />
+            <MenuItem
+              className='text-sm p-3'
+              title='PDF'
+              onClick={handleExportPdf}
+            />
+          </Menu>
+        </Dropdown>
+      </div>
+    );
+  }, [
+    tabId,
+    hasFilters,
+    activeFiltersCount,
+    isAnyExportLoading,
+    handleExportExcel,
+    handleExportPdf,
+    filterModal.open,
+    setTabActions,
+  ]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearTabActions(tabId);
+    };
+  }, [tabId, clearTabActions]);
+
   const getTableColumns = (
     summary: CustomerPaymentSummary
   ): ColumnDef<CustomerPaymentReport['rows'][0]>[] => {
@@ -552,181 +647,10 @@ const CustomerPaymentTab = () => {
   };
 
   return (
-    <div className='w-full p-0 sm:p-4'>
-      <Card
-        subtitle='Laporan > Kontrol Pembayaran Customer'
-        className={{ wrapper: 'w-full', body: 'p-1!' }}
-      >
-        <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
-          <Button
-            variant='outline'
-            onClick={filterModal.openModal}
-            className={
-              hasFilters
-                ? 'bg-linear-to-b from-[#0069E0]/40 to-white text-[#0069E0] rounded-lg'
-                : 'rounded-lg'
-            }
-          >
-            <Icon icon='heroicons:funnel' width={18} height={18} />
-            Filter
-            {hasFilters && (
-              <Badge
-                variant='default'
-                className={{
-                  badge:
-                    'rounded-lg px-1.5 py-2.5 text-xs font-semibold bg-error text-white',
-                }}
-              >
-                {activeFiltersCount}
-              </Badge>
-            )}
-          </Button>
-
-          <Dropdown
-            trigger={
-              <Button
-                variant='outline'
-                isLoading={isAnyExportLoading}
-                className='rounded-lg'
-              >
-                <Icon
-                  icon='heroicons:cloud-arrow-down'
-                  width={18}
-                  height={18}
-                />
-                Export
-              </Button>
-            }
-            align='end'
-          >
-            <Menu className={'w-full'}>
-              <MenuItem title='Excel' onClick={handleExportExcel} />
-              <MenuItem title='PDF' onClick={handleExportPdf} />
-            </Menu>
-          </Dropdown>
-        </div>
-
-        {/* Filter Modal */}
-        <Modal
-          ref={filterModal.ref}
-          className={{
-            modal: 'p-0',
-            modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
-          }}
-        >
-          <div className='space-y-6'>
-            {/* Modal Header */}
-            <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
-              <div className='flex items-center gap-2 text-primary'>
-                <Icon icon='heroicons:funnel' width={20} height={20} />
-                <h3 className='font-semibold'>Filter Data</h3>
-              </div>
-              <Button
-                variant='link'
-                onClick={filterModal.closeModal}
-                className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
-              >
-                <Icon icon='heroicons:x-mark' width={20} height={20} />
-              </Button>
-            </div>
-            <div className='space-y-4 px-4'>
-              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
-                <div>
-                  <DateInput
-                    label='Tanggal'
-                    name='start_date'
-                    value={filterStartDate}
-                    onChange={(e) => {
-                      setFilterStartDate(e.target.value);
-                    }}
-                    className={{ wrapper: 'w-full' }}
-                  />
-                </div>
-
-                <div>
-                  <DateInput
-                    label='‎ '
-                    name='end_date'
-                    value={filterEndDate}
-                    onChange={(e) => {
-                      setFilterEndDate(e.target.value);
-                    }}
-                    className={{ wrapper: 'w-full' }}
-                  />
-                </div>
-              </div>
-
-              <div>
-                <SelectInputCheckbox
-                  label='Customer'
-                  placeholder='Pilih Customer'
-                  options={customerOptions}
-                  value={filterCustomer}
-                  onChange={(val) => {
-                    setFilterCustomer(
-                      Array.isArray(val) ? val : val ? [val] : []
-                    );
-                  }}
-                  onInputChange={setCustomerInputValue}
-                  isLoading={isLoadingCustomers}
-                  isClearable
-                  onMenuScrollToBottom={loadMoreCustomers}
-                  className={{ wrapper: 'w-full' }}
-                />
-              </div>
-
-              {/* TODO: Uncomment when BE is ready */}
-              {/* <div>
-                <SelectInputCheckbox
-                  label='Sales'
-                  placeholder='Pilih Sales'
-                  options={salesOptions}
-                  value={filterSales}
-                  onChange={(val) => {
-                    setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
-                  }}
-                  onInputChange={setSalesInputValue}
-                  isLoading={isLoadingSales}
-                  isClearable
-                  onMenuScrollToBottom={loadMoreSales}
-                  className={{ wrapper: 'w-full' }}
-                />
-              </div> */}
-
-              {/* TODO: Uncomment when BE is ready */}
-              {/* <div>
-                <SelectInput
-                  label='Filter Berdasarkan'
-                  placeholder='Pilih Filter Berdasarkan'
-                  options={dataTypeOptions}
-                  value={dataTypeOptions[0]}
-                  isDisabled={true}
-                  className={{ wrapper: 'w-full' }}
-                />
-              </div> */}
-            </div>
-
-            {/* Action Buttons */}
-            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
-              <Button
-                variant='soft'
-                className='ms-4 min-w-36 rounded-lg'
-                onClick={handleResetFilters}
-              >
-                Reset Filter
-              </Button>
-              <Button
-                className='me-4 min-w-36 rounded-lg'
-                onClick={handleApplyFilters}
-              >
-                Apply Filter
-              </Button>
-            </div>
-          </div>
-        </Modal>
-
+    <>
+      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
-          <div className='mt-6 text-center text-gray-500'>
+          <div className='mt-6 text-center text-base-content/50'>
             Silakan klik tombol Filter untuk mengatur filter dan menampilkan
             data.
           </div>
@@ -735,7 +659,7 @@ const CustomerPaymentTab = () => {
             <span className='loading loading-spinner loading-xl' />
           </div>
         ) : data.length === 0 ? (
-          <div className='mt-6 text-center text-gray-500'>
+          <div className='mt-6 text-center text-base-content/50'>
             Tidak ada data yang dapat ditampilkan...
           </div>
         ) : (
@@ -757,15 +681,17 @@ const CustomerPaymentTab = () => {
                 title={customerReport.customer.name}
                 subtitle={`(${customerReport.customer.address})`}
                 className={{
-                  wrapper: 'w-full rounded-2xl',
+                  wrapper: 'w-full rounded-lg border-none',
                   body: 'p-0',
                   title:
-                    'py-1.5 px-3 bg-primary text-white text-lg font-normal',
+                    'px-2 py-1.5 font-normal text-sm bg-primary text-white',
                   subtitle:
-                    'px-3 pb-1 bg-primary text-white text-sm font-normal',
+                    'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
+                  collapsible: 'rounded-lg',
                 }}
                 variant='bordered'
                 collapsible={true}
+                defaultCollapsed={true}
               >
                 <Table
                   data={[
@@ -779,7 +705,8 @@ const CustomerPaymentTab = () => {
                   renderFooter={customerReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full mb-0!',
-                    tableWrapperClassName: 'overflow-x-auto',
+                    tableWrapperClassName:
+                      'overflow-x-auto rounded-tr-none rounded-tl-none',
                     tableClassName: 'w-full table-auto text-sm',
                     headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                     headerColumnClassName:
@@ -799,8 +726,8 @@ const CustomerPaymentTab = () => {
                     if (row.index === 0) {
                       return (
                         <tr
-                          className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
                           key={row.index}
+                          className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
                         >
                           <td
                             className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
@@ -830,8 +757,123 @@ const CustomerPaymentTab = () => {
             );
           })
         )}
-      </Card>
-    </div>
+      </div>
+
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
+          </div>
+          <Button
+            variant='link'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+        <div className='p-4 flex flex-col gap-1.5'>
+          <div>
+            <label className='block text-xs font-semibold text-base-content py-2'>
+              Tanggal
+            </label>
+            <div className='flex flex-row gap-1.5 items-center justify-between'>
+              <DateInput
+                name='start_date'
+                value={filterStartDate}
+                onChange={(e) => {
+                  setFilterStartDate(e.target.value);
+                }}
+                className={{ wrapper: 'w-full' }}
+                isNestedModal
+              />
+              <hr className='w-full max-w-3 h-px border-base-content/10' />
+
+              <DateInput
+                name='end_date'
+                value={filterEndDate}
+                onChange={(e) => {
+                  setFilterEndDate(e.target.value);
+                }}
+                className={{ wrapper: 'w-full' }}
+                isNestedModal
+              />
+            </div>
+          </div>
+
+          <SelectInputCheckbox
+            label='Customer'
+            placeholder='Pilih Customer'
+            options={customerOptions}
+            value={filterCustomer}
+            onChange={(val) => {
+              setFilterCustomer(Array.isArray(val) ? val : val ? [val] : []);
+            }}
+            onInputChange={setCustomerInputValue}
+            isLoading={isLoadingCustomers}
+            isClearable
+            onMenuScrollToBottom={loadMoreCustomers}
+            className={{ wrapper: 'w-full' }}
+          />
+
+          {/* TODO: Uncomment when BE is ready */}
+          {/* <div>
+                <SelectInputCheckbox
+                  label='Sales'
+                  placeholder='Pilih Sales'
+                  options={salesOptions}
+                  value={filterSales}
+                  onChange={(val) => {
+                    setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
+                  }}
+                  onInputChange={setSalesInputValue}
+                  isLoading={isLoadingSales}
+                  isClearable
+                  onMenuScrollToBottom={loadMoreSales}
+                  className={{ wrapper: 'w-full' }}
+                />
+              </div> */}
+
+          {/* TODO: Uncomment when BE is ready */}
+          {/* <div>
+                <SelectInput
+                  label='Filter Berdasarkan'
+                  placeholder='Pilih Filter Berdasarkan'
+                  options={dataTypeOptions}
+                  value={dataTypeOptions[0]}
+                  isDisabled={true}
+                  className={{ wrapper: 'w-full' }}
+                />
+              </div> */}
+
+          {/* Action Buttons */}
+        </div>
+        <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
+          <Button
+            variant='soft'
+            className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
+            onClick={handleResetFilters}
+          >
+            Reset Filter
+          </Button>
+          <Button
+            className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+            onClick={handleApplyFilters}
+          >
+            Apply Filter
+          </Button>
+        </div>
+      </Modal>
+    </>
   );
 };
 
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index 811c739b..ac53a7a3 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -686,6 +686,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
                     formik.touched.startDate && !!formik.errors.startDate
                   }
                   errorMessage={formik.errors.startDate}
+                  isNestedModal
                 />
                 <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
                 <DateInput
@@ -697,6 +698,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
                   className={{ wrapper: 'w-full' }}
                   isError={formik.touched.endDate && !!formik.errors.endDate}
                   errorMessage={formik.errors.endDate}
+                  isNestedModal
                 />
               </div>
             </div>
@@ -759,7 +761,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
           </div>
 
           {/* Action Buttons */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-gray-300 bg-gray-100'>
+          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
             <Button
               variant='soft'
               color='none'
@@ -769,7 +771,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
               Reset Filter
             </Button>
             <Button
-              className='min-w-40 text-sm rounded-lg py-3 text-white'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
               type='submit'
             >
               Apply Filter

From fc81fa9ad3f1f1740ec3ce6e3666d6856a1a39f2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 09:22:52 +0700
Subject: [PATCH 43/53] refactor(FE): Fix bg class syntax in uniformity
 skeletons

---
 .../uniformity/skeleton/UniformityBarChartSkeleton.tsx          | 2 +-
 .../uniformity/skeleton/UniformityGaugeChartSkeleton.tsx        | 2 +-
 .../production/uniformity/skeleton/UniformityTableSkeleton.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index 8d5994b2..27e50c2c 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -68,7 +68,7 @@ const EmptyState = () => {
       <div className='flex flex-col items-center justify-center'>
         {/* Filter icon */}
         <div className='mb-2'>
-          <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+          <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
             <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
               <Icon
                 icon='heroicons:funnel'
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
index f49ebc85..2ff7155b 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
@@ -57,7 +57,7 @@ const UniformityGaugeChartSkeleton: React.FC<
           <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
             {/* Filter icon */}
             <div className='mb-2 mt-5'>
-              <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+              <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
                 <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                   <Icon
                     icon='heroicons:funnel'
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
index f70b23e1..e1bbd4a9 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -5,7 +5,7 @@ const UniformityTableSkeleton = () => {
     <div className='flex flex-col items-center justify-center my-20'>
       {/* Document icon */}
       <div className='mb-2'>
-        <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+        <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
           <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
             <Icon
               icon='heroicons:document-text'

From a1fe08fdebfdc0049acf9df56e3c2a1521764b9b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 09:38:38 +0700
Subject: [PATCH 44/53] refactor(FE): Use text-base for UniformityChart
 headings

---
 .../pages/production/uniformity/UniformityChart.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 0033e957..3f4a9781 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -111,7 +111,7 @@ const UniformityChart = ({
         }}
       >
         <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
-          <div className='text-lg font-semibold leading-7 flex gap-3 items-center'>
+          <div className='text-base font-semibold leading-7 flex gap-3 items-center'>
             Performance Overview{' '}
             <Icon
               icon='heroicons:information-circle'
@@ -142,7 +142,7 @@ const UniformityChart = ({
         }}
       >
         <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
-          <div className='text-lg font-semibold leading-7 flex gap-3 items-center'>
+          <div className='text-base font-semibold leading-7 flex gap-3 items-center'>
             Weekly Performance{' '}
             <Icon
               icon='heroicons:information-circle'

From a9ff4579b0c0c4818ad8815c8f985a9ea9f8891f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 09:46:10 +0700
Subject: [PATCH 45/53] refactor(FE): Adjust 2xl grid layout in UniformityChart

---
 .../pages/production/uniformity/UniformityChart.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 3f4a9781..2eb17548 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -102,11 +102,11 @@ const UniformityChart = ({
   const shouldShowEmptyState = !isFiltered;
 
   return (
-    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-3'>
+    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-[1fr_350px] gap-3'>
       <Card
         variant='bordered'
         className={{
-          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full rounded-xl',
+          wrapper: '2xl:col-span-1 w-full rounded-xl',
           body: 'h-96 p-4',
         }}
       >
@@ -134,7 +134,7 @@ const UniformityChart = ({
       <Card
         variant='bordered'
         className={{
-          wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
+          wrapper: '2xl:col-span-1 w-full rounded-xl',
           body:
             shouldShowEmptyState || !uniformityData || !gaugeChartData
               ? 'h-110 p-4'

From 5ebeeeedb3b0d4f02399462873ae927f9697db48 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 09:56:30 +0700
Subject: [PATCH 46/53] refactor(FE): Make UniformityBarChartSkeleton more
 responsive

---
 .../uniformity/skeleton/UniformityBarChartSkeleton.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index 27e50c2c..3ce40a3a 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -44,11 +44,11 @@ const ChartArea = () => {
             ))}
           </div>
 
-          <div className='flex justify-between gap-2 sm:gap-4 md:gap-8 lg:gap-12 px-2 sm:px-4 py-2'>
+          <div className='flex justify-between gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6 px-1 xs:px-2 sm:px-3 md:px-4 py-2'>
             {ranges.map((range) => (
               <div
                 key={range}
-                className='skeleton h-3 w-8 sm:w-12 md:w-16 shrink-0'
+                className='skeleton h-3 w-6 xs:w-8 sm:w-10 md:w-12 flex-1 max-w-12 xs:max-w-14 sm:max-w-16'
               />
             ))}
           </div>

From dd586f07d28766745d740cf98a78311c1f854e43 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 10:03:03 +0700
Subject: [PATCH 47/53] fix: only refresh session when user data is available

---
 src/components/helper/RequireAuth.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index a4c9f5e0..535bcce5 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -72,8 +72,10 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
       await AuthApi.refresh();
     };
 
-    refreshUserSession();
-  }, []);
+    if (user) {
+      refreshUserSession();
+    }
+  }, [user]);
 
   if (
     (isLoadingUserResponse && !userResponse && !userErrorResponse) ||

From 27ab373ebbb360488bb5c15156e3ea2b298e4b65 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 10:14:13 +0700
Subject: [PATCH 48/53] refactor(FE): Add subtle border to UniformityChart
 cards

---
 .../pages/production/uniformity/UniformityChart.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 2eb17548..91f7a3fe 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -106,7 +106,7 @@ const UniformityChart = ({
       <Card
         variant='bordered'
         className={{
-          wrapper: '2xl:col-span-1 w-full rounded-xl',
+          wrapper: '2xl:col-span-1 w-full rounded-xl border-base-content/10',
           body: 'h-96 p-4',
         }}
       >
@@ -134,7 +134,7 @@ const UniformityChart = ({
       <Card
         variant='bordered'
         className={{
-          wrapper: '2xl:col-span-1 w-full rounded-xl',
+          wrapper: '2xl:col-span-1 w-full rounded-xl border-base-content/10',
           body:
             shouldShowEmptyState || !uniformityData || !gaugeChartData
               ? 'h-110 p-4'

From 14c208f494acff21a268e71d8526f16b9723fcb1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 10:15:07 +0700
Subject: [PATCH 49/53] refactor(FE): Add border class to UniformityChart cards

---
 .../pages/production/uniformity/UniformityChart.tsx         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 91f7a3fe..8c9eab84 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -106,7 +106,8 @@ const UniformityChart = ({
       <Card
         variant='bordered'
         className={{
-          wrapper: '2xl:col-span-1 w-full rounded-xl border-base-content/10',
+          wrapper:
+            '2xl:col-span-1 w-full rounded-xl border border-base-content/10',
           body: 'h-96 p-4',
         }}
       >
@@ -134,7 +135,8 @@ const UniformityChart = ({
       <Card
         variant='bordered'
         className={{
-          wrapper: '2xl:col-span-1 w-full rounded-xl border-base-content/10',
+          wrapper:
+            '2xl:col-span-1 w-full rounded-xl border border-base-content/10',
           body:
             shouldShowEmptyState || !uniformityData || !gaugeChartData
               ? 'h-110 p-4'

From 06c4631ca516f505a1ea21e945363647125a6494 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 10:37:11 +0700
Subject: [PATCH 50/53] refactor(FE): Refactor filter modal into form and
 adjust UI

---
 .../production/uniformity/UniformityTable.tsx | 238 +++++++++---------
 1 file changed, 120 insertions(+), 118 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 018e2537..e9405dd6 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1242,156 +1242,158 @@ const UniformityTable = () => {
         ref={filterModal.ref}
         className={{
           modal: 'p-0',
-          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+          modalBox: 'p-0 rounded-[0.875rem]',
         }}
       >
-        <div className='space-y-6'>
+        <div className='flex flex-col'>
           {/* Modal Header */}
-          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+          <div className='flex items-center justify-between p-4 border-b border-base-content/10'>
             <div className='flex items-center gap-2 text-primary'>
               <Icon icon='heroicons:funnel' width={20} height={20} />
-              <h3 className='font-semibold'>Filter Data</h3>
+              <h3 className='font-medium text-sm'>Filter Data</h3>
             </div>
             <Button
               variant='link'
               onClick={filterModal.closeModal}
-              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+              className='text-gray-500 hover:text-gray-700'
             >
               <Icon icon='heroicons:x-mark' width={20} height={20} />
             </Button>
           </div>
 
-          <div className='space-y-1.5 px-4'>
-            <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
+          <form
+            className='flex flex-col'
+            onSubmit={handleFormSubmit}
+            onReset={handleResetFilters}
+          >
+            <div className='flex flex-col p-4 gap-1.5'>
+              {/* Rentang Waktu */}
               <div>
-                <DateInput
+                <label className='flex text-xs items-center gap-2 py-2 font-semibold'>
+                  Tanggal
+                </label>
+                <div className='flex items-center gap-2'>
+                  <DateInput
+                    name='start_date'
+                    placeholder='Tanggal Mulai'
+                    value={filterFormik.values.start_date}
+                    errorMessage={filterFormik.errors.start_date}
+                    onChange={handleFilterStartDateChange}
+                    isError={
+                      filterFormik.touched.start_date &&
+                      Boolean(filterFormik.errors.start_date)
+                    }
+                  />
+                  <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
+                  <DateInput
+                    name='end_date'
+                    placeholder='Tanggal Akhir'
+                    value={filterFormik.values.end_date}
+                    errorMessage={filterFormik.errors.end_date}
+                    onChange={handleFilterEndDateChange}
+                    isError={
+                      filterFormik.touched.end_date &&
+                      Boolean(filterFormik.errors.end_date)
+                    }
+                  />
+                </div>
+              </div>
+
+              <div>
+                <SelectInput
                   required
-                  label='Tanggal mulai'
-                  name='start_date'
-                  value={filterFormik.values.start_date}
-                  onChange={handleFilterStartDateChange}
-                  onBlur={filterFormik.handleBlur}
+                  label='Lokasi'
+                  placeholder='Pilih Lokasi...'
+                  value={filterFormik.values.location}
+                  onChange={(value) => {
+                    handleFilterLocationChange(value);
+                  }}
+                  options={filterLocationOptions}
+                  onInputChange={setFilterLocationInputValue}
+                  isLoading={isLoadingFilterLocations}
+                  onMenuScrollToBottom={loadMoreFilterLocations}
                   isError={
-                    filterFormik.touched.start_date &&
-                    Boolean(filterFormik.errors.start_date)
+                    filterFormik.touched.location &&
+                    Boolean(filterFormik.errors.location)
                   }
-                  errorMessage={filterFormik.errors.start_date}
+                  errorMessage={filterFormik.errors.location}
+                  isClearable
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
 
               <div>
-                <DateInput
+                <SelectInput
                   required
-                  label='Tanggal akhir'
-                  name='end_date'
-                  value={filterFormik.values.end_date}
-                  onChange={handleFilterEndDateChange}
-                  onBlur={filterFormik.handleBlur}
+                  label='Project Flock'
+                  placeholder='Pilih Project Flock...'
+                  value={filterFormik.values.project_flock}
+                  onChange={(value) => {
+                    handleFilterProjectFlockChange(value);
+                  }}
+                  options={filterProjectFlockOptions}
+                  onInputChange={setFilterProjectFlockSearchValue}
+                  isLoading={isLoadingFilterProjectFlocks}
+                  onMenuScrollToBottom={loadMoreFilterProjectFlocks}
+                  isDisabled={!filterFormik.values.location}
                   isError={
-                    filterFormik.touched.end_date &&
-                    Boolean(filterFormik.errors.end_date)
+                    filterFormik.touched.project_flock &&
+                    Boolean(filterFormik.errors.project_flock)
                   }
-                  errorMessage={filterFormik.errors.end_date}
+                  errorMessage={filterFormik.errors.project_flock}
+                  isClearable
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
-            </div>
 
-            <div>
-              <SelectInput
-                required
-                label='Lokasi'
-                placeholder='Pilih Lokasi...'
-                value={filterFormik.values.location}
-                onChange={(value) => {
-                  handleFilterLocationChange(value);
-                }}
-                options={filterLocationOptions}
-                onInputChange={setFilterLocationInputValue}
-                isLoading={isLoadingFilterLocations}
-                onMenuScrollToBottom={loadMoreFilterLocations}
-                isError={
-                  filterFormik.touched.location &&
-                  Boolean(filterFormik.errors.location)
-                }
-                errorMessage={filterFormik.errors.location}
-                isClearable
-                className={{ wrapper: 'w-full' }}
-              />
-            </div>
-
-            <div>
-              <SelectInput
-                required
-                label='Project Flock'
-                placeholder='Pilih Project Flock...'
-                value={filterFormik.values.project_flock}
-                onChange={(value) => {
-                  handleFilterProjectFlockChange(value);
-                }}
-                options={filterProjectFlockOptions}
-                onInputChange={setFilterProjectFlockSearchValue}
-                isLoading={isLoadingFilterProjectFlocks}
-                onMenuScrollToBottom={loadMoreFilterProjectFlocks}
-                isDisabled={!filterFormik.values.location}
-                isError={
-                  filterFormik.touched.project_flock &&
-                  Boolean(filterFormik.errors.project_flock)
-                }
-                errorMessage={filterFormik.errors.project_flock}
-                isClearable
-                className={{ wrapper: 'w-full' }}
-              />
-            </div>
-
-            <div>
-              <SelectInput
-                required
-                label='Kandang'
-                placeholder='Pilih Kandang...'
-                value={filterFormik.values.kandang}
-                onChange={(value) => {
-                  handleFilterKandangChange(value);
-                }}
-                options={filterKandangOptions}
-                isDisabled={!filterFormik.values.project_flock}
-                isError={
-                  filterFormik.touched.kandang &&
-                  Boolean(filterFormik.errors.kandang)
-                }
-                errorMessage={filterFormik.errors.kandang}
-                isClearable
-                className={{ wrapper: 'w-full' }}
-              />
-            </div>
-          </div>
-
-          <div className='w-full'>
-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <div className='w-full px-4'>
-                <AlertErrorList formErrorList={formErrorList} onClose={close} />
+              <div>
+                <SelectInput
+                  required
+                  label='Kandang'
+                  placeholder='Pilih Kandang...'
+                  value={filterFormik.values.kandang}
+                  onChange={(value) => {
+                    handleFilterKandangChange(value);
+                  }}
+                  options={filterKandangOptions}
+                  isDisabled={!filterFormik.values.project_flock}
+                  isError={
+                    filterFormik.touched.kandang &&
+                    Boolean(filterFormik.errors.kandang)
+                  }
+                  errorMessage={filterFormik.errors.kandang}
+                  isClearable
+                  className={{ wrapper: 'w-full' }}
+                />
               </div>
-            )}
-          </div>
 
-          {/* Action Buttons */}
-          <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
-            <Button
-              variant='soft'
-              className='ms-4 min-w-36 rounded-lg'
-              onClick={handleResetFilters}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              className='me-4 min-w-36 rounded-lg'
-              onClick={handleApplyFilters}
-            >
-              Apply Filter
-            </Button>
-          </div>
+              {formErrorList.length > 0 && (
+                <div className='w-full'>
+                  <AlertErrorList
+                    formErrorList={formErrorList}
+                    onClose={close}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Action Buttons */}
+            <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
+              <Button
+                type='reset'
+                variant='soft'
+                className='rounded-lg p-3 bg-gray-100 border-gray-100 text-base-content/65 hover:bg-base-content/10'
+              >
+                Reset Filter
+              </Button>
+              <Button
+                type='submit'
+                className='min-w-40 text-sm p-3 text-white rounded-lg'
+              >
+                Apply Filter
+              </Button>
+            </div>
+          </form>
         </div>
       </Modal>
 

From ba1d462a0a994a7cc7f9260d7a9d89a0dc35c969 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Fri, 30 Jan 2026 11:02:18 +0700
Subject: [PATCH 51/53] fix(FE): adding skeleton state data on null or
 unfiltered

---
 src/components/Table.tsx                      | 14 ++++-
 .../helper/skeleton/DataStateSkeleton.tsx     | 26 ++++++++
 .../helper/skeleton/IconSkeleton.tsx          | 13 ++++
 .../pages/dashboard/DashboardProduction.tsx   |  1 -
 .../dashboard/chart/DashboardLineChart.tsx    | 19 +++---
 .../skeleton/DashboardLineChartSkeleton.tsx   | 52 ++++++----------
 .../skeleton/CustomerSupplierSkeleton.tsx     | 37 +++++++++++
 .../finance/skeleton/DebtSupplierSkeleton.tsx | 38 ++++++++++++
 .../report/finance/tab/CustomerPaymentTab.tsx | 35 ++++++++---
 .../report/finance/tab/DebtSupplierTab.tsx    | 61 +++++++++++++------
 10 files changed, 222 insertions(+), 74 deletions(-)
 create mode 100644 src/components/helper/skeleton/DataStateSkeleton.tsx
 create mode 100644 src/components/helper/skeleton/IconSkeleton.tsx
 create mode 100644 src/components/pages/report/finance/skeleton/CustomerSupplierSkeleton.tsx
 create mode 100644 src/components/pages/report/finance/skeleton/DebtSupplierSkeleton.tsx

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 0be39fb5..b40d9db5 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -42,6 +42,7 @@ interface TableClassNames {
   footerRowClassName?: string;
   footerColumnClassName?: string;
   paginationClassName?: string;
+  skeletonCellClassName?: string;
 }
 
 export interface TableProps<TData extends object> {
@@ -79,7 +80,9 @@ export interface TableProps<TData extends object> {
   getSubRows?: (originalRow: TData, index: number) => TData[] | undefined;
 }
 
-const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
+const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
+  id: index,
+}));
 
 const emptyContentDefaultValue = (
   <div className='w-full p-5 text-center'>
@@ -414,7 +417,14 @@ const Table = <TData extends object>({
                             cell.getContext()
                           )}
 
-                        {isLoading && <div className='skeleton w-full h-4' />}
+                        {isLoading && (
+                          <div
+                            className={cn(
+                              'skeleton w-full h-4',
+                              tableClassNames.skeletonCellClassName
+                            )}
+                          />
+                        )}
                       </td>
                     ))}
                   </tr>
diff --git a/src/components/helper/skeleton/DataStateSkeleton.tsx b/src/components/helper/skeleton/DataStateSkeleton.tsx
new file mode 100644
index 00000000..cea68b82
--- /dev/null
+++ b/src/components/helper/skeleton/DataStateSkeleton.tsx
@@ -0,0 +1,26 @@
+import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';
+import { Icon } from '@iconify/react';
+
+const DataStateSkeleton = ({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}) => {
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <IconSkeleton>{icon}</IconSkeleton>
+      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
+        {title}
+      </h3>
+      <p className='text-base-content/50 text-xs text-center max-w-xs'>
+        {description}
+      </p>
+    </div>
+  );
+};
+
+export default DataStateSkeleton;
diff --git a/src/components/helper/skeleton/IconSkeleton.tsx b/src/components/helper/skeleton/IconSkeleton.tsx
new file mode 100644
index 00000000..0100f14b
--- /dev/null
+++ b/src/components/helper/skeleton/IconSkeleton.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+const IconSkeleton = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+      <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default IconSkeleton;
diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 27cc208b..674f3719 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -463,7 +463,6 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.endDate) &&
                       Boolean(formik.touched.endDate)
                     }
-                    isRange
                   />
                 </div>
               </div>
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 092e4bca..58749cf2 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -1,6 +1,7 @@
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
 import { OptionType } from '@/components/input/SelectInput';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
@@ -721,24 +722,18 @@ const DashboardLineChart = ({
             return (
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
-                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
-                  <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                <DataStateSkeleton
+                  icon={
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
                       width={20}
                       height={20}
                     />
-                  </div>
-                </div>
-
-                {/* Empty state text */}
-                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
-                  Data Not Yet Available
-                </h3>
-                <p className='text-base-content/50 text-xs text-center max-w-xs'>
-                  Please change your filters to get the data.
-                </p>
+                  }
+                  title='Data Not Yet Available'
+                  description='Please change your filters to get the data.'
+                />
               </div>
             );
           }
diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
index 6e4e4b97..7f19a6d0 100644
--- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
@@ -1,5 +1,6 @@
 import { Icon } from '@iconify/react';
 import { DashboardMeta } from '@/types/api/dashboard/dashboard';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
 
 const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
   return (
@@ -24,50 +25,35 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
             {!meta?.filters && (
               <>
                 {/* Filter icon */}
-                <div className='mb-2'>
-                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
-                    <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
-                      <Icon
-                        icon='heroicons:funnel'
-                        className='text-white'
-                        width={20}
-                        height={20}
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                {/* Empty state text */}
-                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
-                  No Filters Selected
-                </h3>
-                <p className='text-base-content/50 text-xs text-center max-w-xs'>
-                  Please choose filters to narrow down your results and make
-                  your search easier.
-                </p>
+                <DataStateSkeleton
+                  icon={
+                    <Icon
+                      icon='heroicons:funnel'
+                      className='text-white'
+                      width={20}
+                      height={20}
+                    />
+                  }
+                  title='No Filters Selected'
+                  description='Please choose filters to narrow down your results and make your search easier.'
+                />
               </>
             )}
             {meta?.filters && (
               <>
                 {/* Filter icon */}
-                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
-                  <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                <DataStateSkeleton
+                  icon={
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
                       width={20}
                       height={20}
                     />
-                  </div>
-                </div>
-
-                {/* Empty state text */}
-                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
-                  Data Not Yet Available
-                </h3>
-                <p className='text-base-content/50 text-xs text-center max-w-xs'>
-                  Please change your filters to get the data.
-                </p>
+                  }
+                  title='Data Not Yet Available'
+                  description='Please change your filters to get the data.'
+                />
               </>
             )}
           </div>
diff --git a/src/components/pages/report/finance/skeleton/CustomerSupplierSkeleton.tsx b/src/components/pages/report/finance/skeleton/CustomerSupplierSkeleton.tsx
new file mode 100644
index 00000000..8ab0ffd3
--- /dev/null
+++ b/src/components/pages/report/finance/skeleton/CustomerSupplierSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { CustomerPaymentRow } from '@/types/api/report/customer-payment';
+import { ColumnDef } from '@tanstack/react-table';
+
+const CustomerSupplierSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<CustomerPaymentRow>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default CustomerSupplierSkeleton;
diff --git a/src/components/pages/report/finance/skeleton/DebtSupplierSkeleton.tsx b/src/components/pages/report/finance/skeleton/DebtSupplierSkeleton.tsx
new file mode 100644
index 00000000..b9397f8f
--- /dev/null
+++ b/src/components/pages/report/finance/skeleton/DebtSupplierSkeleton.tsx
@@ -0,0 +1,38 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { DebtRow } from '@/types/api/report/debt-supplier';
+import { Icon } from '@iconify/react';
+import { ColumnDef } from '@tanstack/react-table';
+
+const DebtSupplierSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<DebtRow>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default DebtSupplierSkeleton;
diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index 0ce0b904..2987455a 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -14,6 +14,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
 import {
   CustomerPaymentReport,
+  CustomerPaymentRow,
   CustomerPaymentSummary,
 } from '@/types/api/report/customer-payment';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -27,6 +28,7 @@ import toast from 'react-hot-toast';
 import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
 import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
+import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 
 interface CustomerPaymentTabProps {
   tabId: string;
@@ -650,18 +652,37 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     <>
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
-          <div className='mt-6 text-center text-base-content/50'>
-            Silakan klik tombol Filter untuk mengatur filter dan menampilkan
-            data.
-          </div>
+          <CustomerSupplierSkeleton
+            columns={getTableColumns({} as CustomerPaymentSummary)}
+            icon={
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='No Filters Selected'
+            subtitle='Please choose filters to narrow down your results and make your search easier.'
+          />
         ) : isLoading ? (
           <div className='w-full flex flex-row justify-center items-center p-4'>
             <span className='loading loading-spinner loading-xl' />
           </div>
         ) : data.length === 0 ? (
-          <div className='mt-6 text-center text-base-content/50'>
-            Tidak ada data yang dapat ditampilkan...
-          </div>
+          <CustomerSupplierSkeleton
+            columns={getTableColumns({} as CustomerPaymentSummary)}
+            icon={
+              <Icon
+                icon='heroicons:chart-bar'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Data Not Yet Available'
+            subtitle='Please change your filters to get the data.'
+          />
         ) : (
           data.map((customerReport) => {
             const summary = customerReport.summary || {
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index ac53a7a3..646cfb15 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -35,6 +35,8 @@ import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 import StatusBadge from '@/components/helper/StatusBadge';
+import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -332,7 +334,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     };
   }, [tabId, clearTabActions]);
 
-  const getTableColumns = (supplier: DebtSupplier): ColumnDef<DebtRow>[] => [
+  const getTableColumns = (supplier?: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
       id: 'no',
       header: 'No',
@@ -398,8 +400,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         return <div className='text-center'>{formatNumber(value)} Hari</div>;
       },
       footer: () => {
-        const value = supplier.total.aging;
-        return <div className='text-center'>{formatNumber(value)} Hari</div>;
+        const value = supplier?.total.aging;
+        return (
+          <div className='text-center'>{formatNumber(value || 0)} Hari</div>
+        );
       },
     },
     {
@@ -460,10 +464,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         );
       },
       footer: () => {
-        const value = supplier.total.total_price;
+        const value = supplier?.total.total_price;
         return (
-          <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
-            {formatCurrency(value)}
+          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+            {formatCurrency(value || 0)}
           </div>
         );
       },
@@ -482,10 +486,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         );
       },
       footer: () => {
-        const value = supplier.total.payment_price;
+        const value = supplier?.total.payment_price;
         return (
-          <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
-            {formatCurrency(value)}
+          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+            {formatCurrency(value || 0)}
           </div>
         );
       },
@@ -504,10 +508,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         );
       },
       footer: () => {
-        const value = supplier.total.debt_price;
+        const value = supplier?.total.debt_price;
         return (
-          <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
-            {formatCurrency(value)}
+          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+            {formatCurrency(value || 0)}
           </div>
         );
       },
@@ -541,18 +545,37 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     <>
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
-          <div className='mt-6 text-center text-base-content/50'>
-            Silakan klik tombol Filter untuk mengatur filter dan menampilkan
-            data.
-          </div>
+          <DebtSupplierSkeleton
+            columns={getTableColumns()}
+            icon={
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='No Filters Selected'
+            subtitle='Please choose filters to narrow down your results and make your search easier.'
+          />
         ) : isLoading ? (
           <div className='w-full flex flex-row justify-center items-center p-4'>
             <span className='loading loading-spinner loading-xl' />
           </div>
         ) : data.length === 0 ? (
-          <div className='mt-6 text-center text-base-content/50'>
-            Tidak ada data yang dapat ditampilkan...
-          </div>
+          <DebtSupplierSkeleton
+            columns={getTableColumns()}
+            icon={
+              <Icon
+                icon='heroicons:chart-bar'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Data Not Yet Available'
+            subtitle='Please change your filters to get the data.'
+          />
         ) : (
           data.map((supplierReport) => {
             return (

From 8a647801354b5f27bb1c7b3443332818ef467fe2 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Fri, 30 Jan 2026 11:20:47 +0700
Subject: [PATCH 52/53] fix(FE): adding margin on data state skeleton

---
 .../helper/skeleton/DataStateSkeleton.tsx     |  8 +++++-
 .../helper/skeleton/IconSkeleton.tsx          | 26 ++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/helper/skeleton/DataStateSkeleton.tsx b/src/components/helper/skeleton/DataStateSkeleton.tsx
index cea68b82..cd5474e0 100644
--- a/src/components/helper/skeleton/DataStateSkeleton.tsx
+++ b/src/components/helper/skeleton/DataStateSkeleton.tsx
@@ -12,7 +12,13 @@ const DataStateSkeleton = ({
 }) => {
   return (
     <div className='flex flex-col items-center justify-center'>
-      <IconSkeleton>{icon}</IconSkeleton>
+      <IconSkeleton
+        className={{
+          outer: 'mb-2.25',
+        }}
+      >
+        {icon}
+      </IconSkeleton>
       <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
         {title}
       </h3>
diff --git a/src/components/helper/skeleton/IconSkeleton.tsx b/src/components/helper/skeleton/IconSkeleton.tsx
index 0100f14b..7fde0cd8 100644
--- a/src/components/helper/skeleton/IconSkeleton.tsx
+++ b/src/components/helper/skeleton/IconSkeleton.tsx
@@ -1,9 +1,29 @@
+import { cn } from '@/lib/helper';
 import { ReactNode } from 'react';
 
-const IconSkeleton = ({ children }: { children: ReactNode }) => {
+const IconSkeleton = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: {
+    outer?: string;
+    inner?: string;
+  };
+}) => {
   return (
-    <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
-      <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+    <div
+      className={cn(
+        'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center',
+        className?.outer
+      )}
+    >
+      <div
+        className={cn(
+          'w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]',
+          className?.inner
+        )}
+      >
         {children}
       </div>
     </div>

From 359cdb253462a14c4642230082f874940a48bcdb Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Fri, 30 Jan 2026 11:24:42 +0700
Subject: [PATCH 53/53] fix(FE): adding margin on data state skeleton

---
 src/components/helper/skeleton/IconSkeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/helper/skeleton/IconSkeleton.tsx b/src/components/helper/skeleton/IconSkeleton.tsx
index 7fde0cd8..4c865719 100644
--- a/src/components/helper/skeleton/IconSkeleton.tsx
+++ b/src/components/helper/skeleton/IconSkeleton.tsx
@@ -14,7 +14,7 @@ const IconSkeleton = ({
   return (
     <div
       className={cn(
-        'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center',
+        'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center',
         className?.outer
       )}
     >