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 01/65] 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 02/65] 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 03/65] 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 04/65] 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 f28aeda74c8787c78c5a0347e3a205a8ad978120 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:29:19 +0700
Subject: [PATCH 05/65] 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 06/65] 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 07/65] 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 08/65] 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 09/65] 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 10/65] 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 11/65] 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 12/65] 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 13/65] 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 14/65] 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 dada6a542ff478e6a946f17f89c0f19d7663bdc5 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 14:57:25 +0700
Subject: [PATCH 15/65] 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 16/65] 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 b8031448ff33ae173d45ce6bcae728a8372b1eda Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 15:24:30 +0700
Subject: [PATCH 17/65] 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 18/65] 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 19/65] 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 20/65] 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 21/65] 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 a51a020dfa7ae08802a4e83b966c8c7915d4bee8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 17:07:56 +0700
Subject: [PATCH 22/65] 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 23/65] 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 24/65] 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 25/65] 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 26/65] 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 27/65] 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 28/65] 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 29/65] 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 27ab373ebbb360488bb5c15156e3ea2b298e4b65 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 10:14:13 +0700
Subject: [PATCH 30/65] 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 31/65] 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 32/65] 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 89f711241da265adcf2d26a59389cd40c0905013 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 10:49:17 +0700
Subject: [PATCH 33/65] refactor(FE): Remove left chart margin and lower
 min-height

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

diff --git a/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx b/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
index 82f0085c..e03f6927 100644
--- a/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
+++ b/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
@@ -164,7 +164,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
   const margin = {
     top: 20,
     right: 30,
-    left: 20,
+    left: 0,
     bottom: 5,
   };
 
@@ -172,7 +172,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
     <ResponsiveContainer
       width='100%'
       height='100%'
-      className='min-h-[300px] xl:min-h-[350px]'
+      className='min-h-[270px] xl:min-h-80'
     >
       <BarChart data={data} margin={margin} barGap={20}>
         <defs>

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 34/65] 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 de8fda93605c633c0bce0b29b4b46a6369b853b2 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 11:03:17 +0700
Subject: [PATCH 35/65] fix: reset input error when dialog is closed

---
 .../MasterConfigurationContent.tsx            | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx b/src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx
index 9fa75c33..33ad2608 100644
--- a/src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx
+++ b/src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Plus, MoreVertical, Pencil, Trash2 } from 'lucide-react';
 import { Card, CardContent } from '@/figma-make/components/base/card';
 import { Button } from '@/figma-make/components/base/button';
@@ -404,7 +404,22 @@ export function MasterConfigurationContent() {
       </div>
 
       {/* Add/Edit Modal */}
-      <Dialog open={showModal} onOpenChange={setShowModal}>
+      <Dialog
+        open={showModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsFormInvalid(false);
+            setConfigurationForm({
+              id: 0,
+              date: '',
+              percentage_threshold_bad: '',
+              percentage_threshold_enough: '',
+            });
+          }
+
+          setShowModal(open);
+        }}
+      >
         <DialogContent className='sm:max-w-md bg-white rounded-xl shadow-lg'>
           <DialogHeader>
             <DialogTitle>

From 8babb4e3d7d3b9a26c849ffefb901ea1c0f02b82 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 11:05:38 +0700
Subject: [PATCH 36/65] refactor(FE): Use className props for drawer widths

---
 src/components/Drawer.tsx                                 | 8 +++++---
 .../pages/production/uniformity/UniformityPageWrapper.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index bbc36782..fc0af9fb 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -16,7 +16,6 @@ interface DrawerProps {
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
   expandedContent?: ReactNode;
-  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -25,6 +24,7 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
+  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -39,7 +39,6 @@ const Drawer = ({
   onBackdropClick,
   closeOnBackdropClick = true,
   expandedContent,
-  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -56,6 +55,9 @@ const Drawer = ({
           ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
           : 'w-full max-w-[300px] lg:w-[300px]';
       }
+      if (className?.drawerSidebarContent) {
+        return '';
+      }
       return 'w-full sm:min-w-120 sm:w-fit';
     };
 
@@ -174,7 +176,7 @@ const Drawer = ({
             <div
               className={cn(
                 'border-l border-gray-200 bg-white flex flex-col h-full',
-                expandedWidth
+                className?.drawerExpandedContent
               )}
             >
               <div className='overflow-y-auto flex-1 h-full'>
diff --git a/src/components/pages/production/uniformity/UniformityPageWrapper.tsx b/src/components/pages/production/uniformity/UniformityPageWrapper.tsx
index 07f313b6..5c8f1313 100644
--- a/src/components/pages/production/uniformity/UniformityPageWrapper.tsx
+++ b/src/components/pages/production/uniformity/UniformityPageWrapper.tsx
@@ -58,7 +58,10 @@ export default function UniformityPageWrapper({
         zIndex='99999'
         sidebarContent={isOpen ? <div className=''>{children}</div> : null}
         expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
-        expandedWidth='w-[500px]'
+        className={{
+          drawerSidebarContent: 'w-[446px]',
+          drawerExpandedContent: 'w-[446px]',
+        }}
       />
     </>
   );

From 7956ce5b6f61da9cd07ec3ebd61475d9bc2c8600 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 11:18:39 +0700
Subject: [PATCH 37/65] fix: issue when selecting all phase and employee

---
 .../daily-checklist/DailyChecklistContent.tsx | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
index 37430354..b99842bd 100644
--- a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+++ b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
@@ -535,14 +535,6 @@ export function DailyChecklistContent() {
     }
   };
 
-  const toggleSelectAllAbk = () => {
-    if (tempSelectedEmployees.length === employees.length) {
-      setTempSelectedEmployees([]);
-    } else {
-      setTempSelectedEmployees([...employees]);
-    }
-  };
-
   const applyAbkSelection = async () => {
     if (!dailyChecklistId) {
       toast.error('Checklist belum tersedia');
@@ -853,10 +845,34 @@ export function DailyChecklistContent() {
   );
 
   const isAllAbkSelected =
-    tempSelectedEmployees.length === employees.length && employees.length > 0;
+    tempSelectedEmployees.length === filteredEmployees.length &&
+    filteredEmployees.length > 0 &&
+    tempSelectedEmployees.every((tempSelectedEmployee) => {
+      return (
+        filteredEmployees.findIndex(
+          (filteredEmployee) => filteredEmployee.id === tempSelectedEmployee.id
+        ) >= 0
+      );
+    });
   const isAllPhasesSelected =
-    tempSelectedPhaseIds.length === availablePhases.length &&
-    availablePhases.length > 0;
+    tempSelectedPhaseIds.length === filteredPhases.length &&
+    filteredPhases.length > 0 &&
+    tempSelectedPhaseIds.every((tempSelectedPhaseId) => {
+      return (
+        filteredPhases.findIndex(
+          (filteredPhase) =>
+            String(filteredPhase.id) === String(tempSelectedPhaseId)
+        ) >= 0
+      );
+    });
+
+  const toggleSelectAllAbk = () => {
+    if (isAllAbkSelected) {
+      setTempSelectedEmployees([]);
+    } else {
+      setTempSelectedEmployees([...filteredEmployees]);
+    }
+  };
 
   // Group activities by PHASE → TIME_TYPE → ACTIVITIES
   const groupActivitiesByPhase = () => {
@@ -1519,14 +1535,14 @@ export function DailyChecklistContent() {
                       setTempSelectedPhaseIds([]);
                     } else {
                       setTempSelectedPhaseIds(
-                        availablePhases.map((p) => String(p.id))
+                        filteredPhases.map((p) => String(p.id))
                       );
                     }
                   }}
                   className='checkbox-clean'
                 />
                 <span className='text-sm font-medium text-gray-700 group-hover:text-gray-900'>
-                  Pilih Semua ({availablePhases.length} Fase)
+                  Pilih Semua ({filteredPhases.length} Fase)
                 </span>
               </label>
             </div>
@@ -1621,7 +1637,7 @@ export function DailyChecklistContent() {
             />
           </div>
 
-          {employees.length > 0 && (
+          {filteredEmployees.length > 0 && (
             <div className='flex items-center gap-3 px-1 py-2'>
               <label className='flex items-center gap-2 cursor-pointer group'>
                 <input
@@ -1631,7 +1647,7 @@ export function DailyChecklistContent() {
                   className='checkbox-clean'
                 />
                 <span className='text-sm font-medium text-gray-700 group-hover:text-gray-900'>
-                  Pilih Semua ({employees.length} ABK)
+                  Pilih Semua ({filteredEmployees.length} ABK)
                 </span>
               </label>
             </div>

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 38/65] 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 39/65] 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
       )}
     >

From 99f8e5dcf3671956adb57de2364d6b04fd2bd8d9 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 11:45:50 +0700
Subject: [PATCH 40/65] chore: add validation in phase selection and sort
 activity and employee name

---
 .../daily-checklist/DailyChecklistContent.tsx | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
index b99842bd..79049480 100644
--- a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+++ b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
@@ -127,6 +127,10 @@ export function DailyChecklistContent() {
     { id: number; name: string }[]
   >([]);
 
+  const sortedSelectedEmployees = selectedEmployees.toSorted((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+
   const [dailyChecklistId, setDailyChecklistId] = useState<string | null>(null);
   const [checklistStatus, setChecklistStatus] = useState<string>('DRAFT');
   // const [isEditMode, setIsEditMode] = useState(false);
@@ -486,6 +490,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (!tempSelectedPhaseIds.length) {
+      toast.error('Pilih minimal satu fase');
+      return;
+    }
+
     try {
       // Insert new phase links
       const setDailyChecklistPhaseRes =
@@ -1146,7 +1155,7 @@ export function DailyChecklistContent() {
                           <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700 border-r border-gray-200 min-w-[200px]'>
                             Aktivitas
                           </th>
-                          {selectedEmployees.map((emp) => (
+                          {sortedSelectedEmployees.map((emp) => (
                             <th
                               key={emp.id}
                               className='text-center py-3 px-4 text-sm font-semibold text-gray-700 border-r border-gray-200 min-w-[100px]'
@@ -1232,6 +1241,14 @@ export function DailyChecklistContent() {
                               }
 
                               // ACTIVITY rows (Child rows with checkboxes)
+                              activities.sort((a, b) =>
+                                a.name.localeCompare(b.name, undefined, {
+                                  sensitivity: 'base',
+                                })
+                              );
+
+                              console.log(activities);
+
                               activities.forEach((activity, index) => {
                                 const taskId =
                                   taskIdsByPhaseActivityId[activity.id];
@@ -1260,7 +1277,7 @@ export function DailyChecklistContent() {
                                         </p>
                                       )}
                                     </td>
-                                    {selectedEmployees.map((emp) => (
+                                    {sortedSelectedEmployees.map((emp) => (
                                       <td
                                         key={emp.id}
                                         className='text-center py-3 px-4 border-r border-gray-200'

From 970278f6845aa3155c5bd7804379fef93e838c33 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 11:46:29 +0700
Subject: [PATCH 41/65] chore: sort activity and employee name

---
 .../detail/DetailDailyChecklistContent.tsx    | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx b/src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx
index 0b3ece27..d8723df0 100644
--- a/src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx
+++ b/src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx
@@ -275,6 +275,13 @@ export function DetailDailyChecklistContent() {
           ])
         ).values()
       );
+
+      uniqueEmployees.sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, {
+          sensitivity: 'base',
+        })
+      );
+
       setEmployees(uniqueEmployees);
 
       // Group data by Phase → Time Type → Activity
@@ -779,11 +786,23 @@ export function DetailDailyChecklistContent() {
                         }
 
                         // ACTIVITY rows
-                        timeGroup.activities.forEach((activity, index) => {
+                        const activities = timeGroup.activities;
+
+                        activities.sort((a, b) =>
+                          a.name.localeCompare(b.name, undefined, {
+                            sensitivity: 'base',
+                          })
+                        );
+
+                        activities.forEach((activity, index) => {
                           const indentClass = hasMultipleTimeTypes
                             ? 'pl-12'
                             : 'pl-8';
 
+                          console.log({
+                            activity,
+                          });
+
                           rows.push(
                             <tr
                               key={`activity-${activity.id}-${index}`}
@@ -823,9 +842,15 @@ export function DetailDailyChecklistContent() {
                               })}
                               <td className='py-3 px-4'>
                                 {activity.employees.length > 0 &&
-                                activity.employees[0].note ? (
+                                activity.employees[
+                                  activity.employees.length - 1
+                                ].note ? (
                                   <p className='text-sm text-gray-600'>
-                                    {activity.employees[0].note}
+                                    {
+                                      activity.employees[
+                                        activity.employees.length - 1
+                                      ].note
+                                    }
                                   </p>
                                 ) : (
                                   <p className='text-xs text-gray-400 italic'>

From 8947d48a4396e1ffb8c5dd7b552f044d568cb810 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:20:04 +0700
Subject: [PATCH 42/65] refactor(FE): Adjust spacing and border in
 UniformityForm

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

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 257de339..f5e687c7 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.5'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col'>
             <DateInput
               required
               label='Tanggal'
@@ -582,7 +582,7 @@ const UniformityForm = ({
                 <label
                   htmlFor='file-upload-input'
                   className={cn(
-                    "w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
+                    "w-full text-sm font-normal leading-7 after:content-['*'] after:ml-0.5 after:text-red-500",
                     formik.touched.document &&
                       formik.errors.document &&
                       'text-red-500'
@@ -758,7 +758,7 @@ const UniformityForm = ({
 
             {!isNextStep && (
               <>
-                <div className='border-t border-base-content/20 mt-3' />
+                <div className='border-t border-base-content/10 -mx-4 mt-3' />
                 <RequirePermission permissions='lti.production.uniformity.create'>
                   <Button
                     type='submit'

From 15c167d24d506e7742bf2982a1849f36cd1f8258 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 13:24:08 +0700
Subject: [PATCH 43/65] fix: add permission for Penjualan and Keuangan menu

---
 src/config/constant.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index fff9fa92..c2465cda 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -114,11 +114,13 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Penjualan',
     link: '/marketing',
     icon: 'heroicons-outline:currency-dollar',
+    permission: ['lti.marketing.delivery_order.list'],
   },
   {
     text: 'Keuangan',
     link: '/finance',
     icon: 'heroicons-outline:banknotes',
+    permission: ['lti.finance.transactions.list'],
   },
   {
     text: 'Biaya',

From 93b2496f5543946de4b9469506db2c642faa0c23 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:25:08 +0700
Subject: [PATCH 44/65] refactor(FE): Adjust spacing in UniformityForm

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

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index f5e687c7..f5e7d61f 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -582,7 +582,7 @@ const UniformityForm = ({
                 <label
                   htmlFor='file-upload-input'
                   className={cn(
-                    "w-full text-sm font-normal leading-7 after:content-['*'] after:ml-0.5 after:text-red-500",
+                    "w-full text-sm font-normal leading-7 after:content-['*'] after:ml-0.5 after:text-red-500 py-2",
                     formik.touched.document &&
                       formik.errors.document &&
                       'text-red-500'
@@ -622,7 +622,7 @@ const UniformityForm = ({
 
               <section
                 className={cn(
-                  'h-full w-full border rounded-2xl border-dashed cursor-pointer mt-2',
+                  'h-full w-full border rounded-2xl border-dashed cursor-pointer',
                   formik.touched.document && formik.errors.document
                     ? 'border-red-500'
                     : 'border-gray-300'
@@ -758,7 +758,7 @@ const UniformityForm = ({
 
             {!isNextStep && (
               <>
-                <div className='border-t border-base-content/10 -mx-4 mt-3' />
+                <div className='border-t border-base-content/10 -mx-4 mt-4' />
                 <RequirePermission permissions='lti.production.uniformity.create'>
                   <Button
                     type='submit'

From 4b0397903d45d36ba6b1bdb504fbc958cc6da4eb Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:27:11 +0700
Subject: [PATCH 45/65] refactor(FE): Adjust file upload label styling

---
 .../pages/production/uniformity/form/UniformityForm.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index f5e7d61f..0b8bf4ae 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -582,7 +582,7 @@ const UniformityForm = ({
                 <label
                   htmlFor='file-upload-input'
                   className={cn(
-                    "w-full text-sm font-normal leading-7 after:content-['*'] after:ml-0.5 after:text-red-500 py-2",
+                    "w-full text-xs font-semibold leading-5 after:content-['*'] after:ml-0.5 after:text-red-500 py-2",
                     formik.touched.document &&
                       formik.errors.document &&
                       'text-red-500'

From c0b1da89f1bfef356e92115bd2d7f2e6509397e0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:32:07 +0700
Subject: [PATCH 46/65] refactor(FE): Standardize button styles in uniformity
 forms

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

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 0b8bf4ae..eeb161f0 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -763,7 +763,7 @@ const UniformityForm = ({
                   <Button
                     type='submit'
                     color='primary'
-                    className='w-full mt-4'
+                    className='w-full mt-4 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
                     disabled={formik.isSubmitting}
                   >
                     {formik.isSubmitting ? (
diff --git a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
index 314eabfd..a1f98526 100644
--- a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
@@ -89,7 +89,11 @@ const UniformityPreviewForm = () => {
               className={{ containerClassName: 'mb-5' }}
             />
             <RequirePermission permissions='lti.production.uniformity.create'>
-              <Button color='primary' onClick={handleNext} className='mb-10'>
+              <Button
+                color='primary'
+                onClick={handleNext}
+                className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
+              >
                 Next
               </Button>
             </RequirePermission>
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 98db02fc..20b267f7 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -280,7 +280,7 @@ const UniformityResultForm = () => {
                 onClick={handleSubmit}
                 isLoading={isSubmitting}
                 disabled={!uniformityFormData}
-                className='mb-10'
+                className='mb-10 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
               >
                 Submit
               </Button>

From fbf7cb2d2120350bd93f4b48f853c5aa395711b0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:37:13 +0700
Subject: [PATCH 47/65] refactor(FE): Wrap table headers in styled span

---
 .../uniformity/form/UniformityPreviewForm.tsx |  8 ++++--
 .../uniformity/form/UniformityResultForm.tsx  | 28 ++++++++++++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
index a1f98526..3cc120fd 100644
--- a/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
@@ -50,12 +50,16 @@ const UniformityPreviewForm = () => {
     () => [
       {
         accessorKey: 'number',
-        header: 'Number',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Number</span>
+        ),
         cell: (props) => props.row.original.number,
       },
       {
         accessorKey: 'weight',
-        header: 'Weight (g)',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
+        ),
         cell: (props) => <span>{props.row.original.weight}</span>,
       },
     ],
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 20b267f7..3cc12017 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -120,12 +120,16 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
       },
     ],
@@ -160,12 +164,16 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
       },
     ],
@@ -189,17 +197,23 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'number',
-        header: 'Number',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Number</span>
+        ),
         cell: (props) => props.row.original.number,
       },
       {
         accessorKey: 'weight',
-        header: 'Weight (g)',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
+        ),
         cell: (props) => <span>{props.row.original.weight}</span>,
       },
       {
         accessorKey: 'status',
-        header: 'Status',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Status</span>
+        ),
         cell: (props) => {
           const status = props.row.original.status;
           return status ? (

From ace301853926e280e61c6661b630de99dba630d5 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:40:19 +0700
Subject: [PATCH 48/65] refactor(FE): Add bottom margin to Informasi Umum
 heading

---
 .../pages/production/uniformity/form/UniformityForm.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index eeb161f0..c3ec0615 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -507,7 +507,7 @@ const UniformityForm = ({
         />
 
         <section className='w-full p-4'>
-          <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+          <h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
             Informasi Umum
           </h2>
 

From 2a12bc4ba482c492c13ac317b7259cce6811f5c5 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:46:46 +0700
Subject: [PATCH 49/65] refactor(FE): Tweak spacing and icon size in uniformity
 form

---
 .../uniformity/form/UniformityResultForm.tsx         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 3cc12017..9660d2c6 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -241,7 +241,7 @@ const UniformityResultForm = () => {
       >
         <Button variant='link' className='p-0 text-error' onClick={handleClose}>
           <Tooltip content='Hapus' position='left'>
-            <Icon icon='heroicons-outline:trash' width={20} height={20} />
+            <Icon icon='heroicons-outline:trash' width={18} height={18} />
           </Tooltip>
         </Button>
       </DrawerHeader>
@@ -249,9 +249,9 @@ const UniformityResultForm = () => {
       {/* Form Section */}
       <section className='w-full p-4'>
         {verifyUniformityResult ? (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-3'>
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
                 Sampling and Range
               </h2>
               <Table<DetailOptionType>
@@ -266,7 +266,7 @@ const UniformityResultForm = () => {
             </div>
 
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
                 Result
               </h2>
               <Table<DetailOptionType>
@@ -279,7 +279,7 @@ const UniformityResultForm = () => {
                 }}
               />
             </div>
-            <div className='mt-4'>
+            <div className=''>
               <Table<BodyWeightData>
                 data={tableData}
                 columns={columnsUniformity}
@@ -294,7 +294,7 @@ const UniformityResultForm = () => {
                 onClick={handleSubmit}
                 isLoading={isSubmitting}
                 disabled={!uniformityFormData}
-                className='mb-10 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
+                className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
               >
                 Submit
               </Button>

From ae0d03ddc03b046ec0560570c6452b96fe207135 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:49:47 +0700
Subject: [PATCH 50/65] refactor(FE): Reduce info icon size to 15

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

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index c3ec0615..0c71eb26 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -611,8 +611,8 @@ const UniformityForm = ({
                     >
                       <Icon
                         icon='heroicons:information-circle'
-                        width={20}
-                        height={20}
+                        width={15}
+                        height={15}
                         className='text-gray-400 hover:text-gray-600'
                       />
                     </Tooltip>

From 64bd57cad47f187553678d0354ec7884d3f15870 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 13:50:21 +0700
Subject: [PATCH 51/65] refactor(FE): Reduce info icon size to 15

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

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 0c71eb26..8ab62d85 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -598,8 +598,8 @@ const UniformityForm = ({
                   >
                     <Icon
                       icon='heroicons-solid:trash'
-                      width={20}
-                      height={20}
+                      width={15}
+                      height={15}
                       className='text-gray-400 hover:text-gray-600'
                     />
                   </button>

From aecf4701736a2620fa697766e73a00dc4e3f239f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 13:57:17 +0700
Subject: [PATCH 52/65] chore: add max size and bottom label for file input in
 daily checklist form

---
 .../components/pages/daily-checklist/DailyChecklistContent.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
index 79049480..266b8740 100644
--- a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+++ b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
@@ -1478,6 +1478,8 @@ export function DailyChecklistContent() {
                         inputWrapper: 'flex items-center',
                         label: 'font-semibold text-gray-900',
                       }}
+                      maxSize={5242880} // 5 MB
+                      bottomLabel='Ukuran file maksimal 5MB'
                     />
                   )}
                 </>

From a5613980c0d29fe33376e97fbcb9370774bea0dd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 14:13:38 +0700
Subject: [PATCH 53/65] refactor(FE): Update UniformityGaugeChart styles

---
 .../uniformity/chart/UniformityGaugeChart.tsx | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx b/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
index 54f8e4ec..8249e1d5 100644
--- a/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+++ b/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
@@ -65,12 +65,12 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
               </Pie>
             </PieChart>
           </ResponsiveContainer>
-          <div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'>
-            <span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'>
+          <div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
+            <span className='text-2xl font-medium text-base-content mb-4 leading-8'>
               {value}%
             </span>
-            <div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'>
-              <span className='text-sm font-medium text-gray-700 mb-32'>
+            <div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
+              <span className='text-lg font-medium text-base-content leading-6'>
                 {label}
               </span>
             </div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <button
           onClick={() => onWeekChange?.('prev')}
           disabled={!hasPrevWeek}
-          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
           aria-label='Previous week'
         >
           <Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <Card
           variant='bordered'
           className={{
-            wrapper: 'max-w-xs',
+            wrapper: 'max-w-40 rounded-lg',
+            body: 'p-3',
           }}
         >
           <section className='flex items-center justify-center gap-4'>
             <div className='grid grid-cols-1 min-w-0 text-center'>
-              <div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
-                <span className='text-[#0069E0] font-semibold truncate'>
+              <div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
+                <span className='text-primary font-semibold truncate'>
                   {week}
                 </span>
               </div>
-              <div className='text-xl font-bold text-[#18181B80]'>
-                <span className='text-[#0069E0] break-all'>
+              <div className='text-xl font-bold text-base-content/50'>
+                <span className='text-primary break-all'>
                   {formatNumber(currentValue ?? 0)}
                 </span>
-                <span className='mx-1 text-gray-400 text-base'>From</span>
+                <span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
+                  From
+                </span>
                 <span className='break-all'>
                   {formatNumber(totalValue ?? 0)}
                 </span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <button
           onClick={() => onWeekChange?.('next')}
           disabled={!hasNextWeek}
-          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
           aria-label='Next week'
         >
           <Icon icon='heroicons:chevron-right' width={20} height={20} />

From 8b0dd6deea3b92eafbcf1e7a8e1ddd47e62a0719 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 14:16:22 +0700
Subject: [PATCH 54/65] refactor(FE): Set xl min height to 72 for Uniformity
 chart

---
 .../pages/production/uniformity/chart/UniformityBarChart.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx b/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
index e03f6927..f43aa244 100644
--- a/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
+++ b/src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
@@ -172,7 +172,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
     <ResponsiveContainer
       width='100%'
       height='100%'
-      className='min-h-[270px] xl:min-h-80'
+      className='min-h-[270px] xl:min-h-72'
     >
       <BarChart data={data} margin={margin} barGap={20}>
         <defs>

From 2c27b2e41d08b37563aa0d1fbe289b24b1520040 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 14:34:48 +0700
Subject: [PATCH 55/65] chore: add transfer_context query when fetching source
 warehouse

---
 .../inventory/movement/form/MovementForm.tsx  | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index b2f50361..dbb30314 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -86,6 +86,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   }
 
   // ===== USE SELECT HOOKS =====
+  const {
+    setInputValue: setSourceWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingSourceWarehouses,
+    loadMore: loadMoreSourceWarehouses,
+    rawData: sourceWarehouses,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name', 'search', {
+    transfer_context: 'inventory_transfer',
+  });
+
   const {
     setInputValue: setWarehouseSelectInputValue,
     isLoadingOptions: isLoadingWarehouses,
@@ -136,6 +145,25 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     return stockMap;
   }, [allProductWarehouses]);
 
+  const sourceWarehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(sourceWarehouses)) return [];
+
+    return (
+      sourceWarehouses?.data.map((w) => {
+        warehouseStockMap.get(w.id);
+        return {
+          value: w.id,
+          label: w.name,
+          area: w.area?.name,
+          location:
+            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+              ? w.location?.name
+              : undefined,
+        };
+      }) || []
+    );
+  }, [sourceWarehouses, warehouseStockMap]);
+
   const warehouseOptions = useMemo(() => {
     if (!isResponseSuccess(warehouses)) return [];
 
@@ -1354,10 +1382,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 placeholder='Pilih gudang asal...'
                 value={formik.values.source_warehouse}
                 onChange={handleSourceWarehouseChange}
-                options={warehouseOptions}
-                onInputChange={setWarehouseSelectInputValue}
-                onMenuScrollToBottom={loadMoreWarehouses}
-                isLoading={isLoadingWarehouses}
+                options={sourceWarehouseOptions}
+                onInputChange={setSourceWarehouseSelectInputValue}
+                onMenuScrollToBottom={loadMoreSourceWarehouses}
+                isLoading={isLoadingSourceWarehouses}
                 isError={
                   formik.touched.source_warehouse_id &&
                   Boolean(formik.errors.source_warehouse_id)

From d3be683b6998e7d4b121e458f28fa6060f4c71f7 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 14:35:21 +0700
Subject: [PATCH 56/65] chore: add transfer_context query when fetching source
 project flock

---
 .../production/transfer-to-laying/TransferToLayingFormModal.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
index 87541d8c..399468c7 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
@@ -98,6 +98,7 @@ const TransferToLayingFormModal = () => {
     'search',
     {
       category: 'GROWING',
+      transfer_context: 'transfer_to_laying',
     }
   );
 

From b9b02f285fa4009dfa40438ee0dad5bc9e310077 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 14:36:36 +0700
Subject: [PATCH 57/65] refactor(FE): Refine Uniformity table headers and
 layout

---
 .../uniformity/detail/UniformityDetail.tsx    | 38 ++++++++++++++-----
 .../detail/UniformityDetailsPreview.tsx       |  4 +-
 .../uniformity/form/UniformityResultForm.tsx  | 20 +++++-----
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/pages/production/uniformity/detail/UniformityDetail.tsx b/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
index 11087e44..2c0a848c 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
@@ -150,12 +150,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => {
           const id = props.row.original.id;
           const { info_umum, latest_approval } = initialValues!;
@@ -258,12 +264,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
       },
     ],
@@ -301,12 +313,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
       },
     ],
@@ -326,10 +344,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
       {/* Form Section */}
       <section className='w-full p-4'>
         {initialValues ? (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-3'>
             {/* Info Umum */}
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                 Informasi Umum
               </h2>
               <Table<DetailOptionType>
@@ -346,7 +364,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             {/* Sampling and Range */}
             {initialValues.sampling && (
               <div className=''>
-                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                   Sampling and Range
                 </h2>
                 <Table<DetailOptionType>
@@ -364,7 +382,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             {/* Result */}
             {initialValues.result && (
               <div className=''>
-                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                   Result
                 </h2>
                 <Table<DetailOptionType>
diff --git a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
index 04c43a02..1eb3a7ff 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
@@ -97,10 +97,10 @@ const UniformityDetailsPreview = ({
       {/* Form Section */}
       <section className='w-full p-4'>
         {info_umum ? (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-3'>
             {/* Body Weight Details */}
             {uniformity_details && uniformity_details.length > 0 ? (
-              <div className='mt-4'>
+              <div className=''>
                 <Table<BodyWeightData>
                   data={tableData}
                   columns={columnsUniformity}
diff --git a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
index 9660d2c6..eaf51103 100644
--- a/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityResultForm.tsx
@@ -124,6 +124,7 @@ const UniformityResultForm = () => {
           <span className='font-medium text-sm leading-[150%]'>Label</span>
         ),
         cell: (props) => props.row.original.label,
+        enableSorting: false,
       },
       {
         accessorKey: 'value',
@@ -131,6 +132,7 @@ const UniformityResultForm = () => {
           <span className='font-medium text-sm leading-[150%]'>Value</span>
         ),
         cell: (props) => <span>{props.row.original.value}</span>,
+        enableSorting: false,
       },
     ],
     []
@@ -168,6 +170,7 @@ const UniformityResultForm = () => {
           <span className='font-medium text-sm leading-[150%]'>Label</span>
         ),
         cell: (props) => props.row.original.label,
+        enableSorting: false,
       },
       {
         accessorKey: 'value',
@@ -175,6 +178,7 @@ const UniformityResultForm = () => {
           <span className='font-medium text-sm leading-[150%]'>Value</span>
         ),
         cell: (props) => <span>{props.row.original.value}</span>,
+        enableSorting: false,
       },
     ],
     []
@@ -197,23 +201,17 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'number',
-        header: () => (
-          <span className='font-medium text-sm leading-[150%]'>Number</span>
-        ),
+        header: 'Number',
         cell: (props) => props.row.original.number,
       },
       {
         accessorKey: 'weight',
-        header: () => (
-          <span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
-        ),
+        header: 'Weight (g)',
         cell: (props) => <span>{props.row.original.weight}</span>,
       },
       {
         accessorKey: 'status',
-        header: () => (
-          <span className='font-medium text-sm leading-[150%]'>Status</span>
-        ),
+        header: 'Status',
         cell: (props) => {
           const status = props.row.original.status;
           return status ? (
@@ -251,7 +249,7 @@ const UniformityResultForm = () => {
         {verifyUniformityResult ? (
           <div className='flex flex-col gap-3'>
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                 Sampling and Range
               </h2>
               <Table<DetailOptionType>
@@ -266,7 +264,7 @@ const UniformityResultForm = () => {
             </div>
 
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                 Result
               </h2>
               <Table<DetailOptionType>

From 190792affeb342aeac7d7b5b65bf99019d5c8e0d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 14:44:26 +0700
Subject: [PATCH 58/65] chore: format license plate number

---
 src/components/pages/report/DailyMarketingsTable.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/report/DailyMarketingsTable.tsx b/src/components/pages/report/DailyMarketingsTable.tsx
index 67702035..2ed5a9cb 100644
--- a/src/components/pages/report/DailyMarketingsTable.tsx
+++ b/src/components/pages/report/DailyMarketingsTable.tsx
@@ -10,7 +10,13 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
 import Collapse from '@/components/Collapse';
 
-import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { DailyMarketingRow } from '@/types/api/report/marketing';
 import { MarketingReportApi } from '@/services/api/report/marketing-report';
@@ -94,7 +100,9 @@ const DailyMarketingsTable = ({
       accessorKey: 'vehicle_number',
       header: 'No. Polisi',
       cell: (props) => (
-        <span className='text-nowrap'>{props.row.original.vehicle_number}</span>
+        <span className='text-nowrap'>
+          {formatVechicleNumber(props.row.original.vehicle_number)}
+        </span>
       ),
     },
     {

From 0b7ff6f3f135f3db2ea1656a7c7b8301975982d0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 14:44:29 +0700
Subject: [PATCH 59/65] refactor(FE): Use accessorKey/styled headers and remove
 dead code

---
 .../production/uniformity/UniformityTable.tsx | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index e9405dd6..5633cdf9 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -112,11 +112,19 @@ const UniformityConfirmationPreview = ({
 
   const columns: ColumnDef<DetailOptionType>[] = [
     {
-      header: 'Label',
+      accessorKey: 'label',
+      enableSorting: false,
+      header: () => (
+        <span className='font-medium text-sm leading-[150%]'>Label</span>
+      ),
       cell: (props) => props.row.original.label,
     },
     {
-      header: 'Value',
+      accessorKey: 'value',
+      enableSorting: false,
+      header: () => (
+        <span className='font-medium text-sm leading-[150%]'>Value</span>
+      ),
       cell: (props) => {
         const id = props.row.original.id;
         const value = props.row.original.value;
@@ -214,7 +222,6 @@ const UniformityTable = () => {
   const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
-  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
 
   const singleDeleteModal = useModal();
   const successModal = useModal();
@@ -238,7 +245,7 @@ const UniformityTable = () => {
   const [filterEndDate, setFilterEndDate] = useState('');
   const [filterProjectFlockLocationId, setFilterProjectFlockLocationId] =
     useState<string>('');
-  const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
+  const [, setFilterErrors] = useState<Record<string, string>>({});
 
   const {
     setInputValue: setFilterLocationInputValue,
@@ -309,7 +316,6 @@ const UniformityTable = () => {
       ? projectFlockKandangLookupData.data
       : undefined;
 
-  // Update filterProjectFlockKandangId when lookup changes
   useEffect(() => {
     if (projectFlockKandangLookup?.id) {
       setFilterProjectFlockKandangId(projectFlockKandangLookup.id);
@@ -483,12 +489,6 @@ const UniformityTable = () => {
     [filterFormik]
   );
 
-  const handleApplyFilters = useCallback(() => {
-    handleFormSubmit(
-      new Event('submit') as unknown as React.FormEvent<HTMLFormElement>
-    );
-  }, [handleFormSubmit]);
-
   const selectedRowIds = useMemo(() => {
     return Object.keys(rowSelection)
       .filter((key) => rowSelection[key])
@@ -1076,7 +1076,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           {createdUniformity ? (
             <UniformityConfirmationPreview
               uniformityDetail={createdUniformity}
@@ -1112,7 +1112,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           <UniformityConfirmationPreview uniformity={selectedUniformity} />
         </div>
       </ConfirmationModal>
@@ -1136,7 +1136,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           {selectedRowIds.length === 1 ? (
             <UniformityConfirmationPreview
               uniformity={selectedUniformities[0]}
@@ -1168,7 +1168,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           <UniformityConfirmationPreview uniformity={selectedUniformity} />
         </div>
       </ConfirmationModal>
@@ -1192,7 +1192,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           {selectedRowIds.length === 1 ? (
             <UniformityConfirmationPreview
               uniformity={selectedUniformities[0]}
@@ -1224,7 +1224,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           {selectedRowIds.length === 1 ? (
             <UniformityConfirmationPreview
               uniformity={selectedUniformities[0]}

From e3a2b413421599bcc97a6d5a10ac6fc832957445 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 14:55:11 +0700
Subject: [PATCH 60/65] refactor(FE): Replace Badge with StatusBadge and
 cleanup utils

---
 .../production/uniformity/UniformityTable.tsx | 16 ++-----
 .../uniformity/detail/UniformityDetail.tsx    | 19 +++-----
 .../production/uniformity/uniformity-utils.ts | 44 -------------------
 3 files changed, 10 insertions(+), 69 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 5633cdf9..a3530032 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -42,8 +42,6 @@ import {
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import {
-  getStatusColor,
-  getStatusIndicatorColor,
   getStatusText,
   getStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
@@ -132,16 +130,10 @@ const UniformityConfirmationPreview = ({
         if (id === '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(value)}`,
-                  status: getStatusIndicatorColor(value),
-                }}
-              >
-                {getStatusText(value)}
-              </Badge>
+              <StatusBadge
+                color={getStatusBadgeColor(value)}
+                text={getStatusText(value)}
+              />
             </div>
           );
         }
diff --git a/src/components/pages/production/uniformity/detail/UniformityDetail.tsx b/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
index 2c0a848c..7772e91b 100644
--- a/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
+++ b/src/components/pages/production/uniformity/detail/UniformityDetail.tsx
@@ -7,7 +7,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import Button from '@/components/Button';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import Table from '@/components/Table';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import Tooltip from '@/components/Tooltip';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { UniformityDetail as UniformityDetailType } from '@/types/api/production/uniformity';
@@ -18,8 +18,7 @@ import { UniformityApi } from '@/services/api/uniformity';
 import useSWR from 'swr';
 import { isResponseSuccess } from '@/lib/api-helper';
 import {
-  getStatusColor,
-  getStatusIndicatorColor,
+  getStatusBadgeColor,
   getStatusText,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { DetailOptionType } from '@/types/api/production/uniformity';
@@ -184,16 +183,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             if (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>
+                  <StatusBadge
+                    color={getStatusBadgeColor(status)}
+                    text={getStatusText(status)}
+                  />
                 </div>
               );
             }
diff --git a/src/components/pages/production/uniformity/uniformity-utils.ts b/src/components/pages/production/uniformity/uniformity-utils.ts
index 1b513de4..f25f9293 100644
--- a/src/components/pages/production/uniformity/uniformity-utils.ts
+++ b/src/components/pages/production/uniformity/uniformity-utils.ts
@@ -1,26 +1,8 @@
-export const weightStatusColorMap: Record<string, string> = {
-  ideal: 'bg-[#00D39033]',
-  outside: 'bg-error/10',
-};
-
-export const weightStatusIndicatorColorMap: Record<string, string> = {
-  ideal: 'bg-[#008000]',
-  outside: 'bg-error',
-};
-
 export const weightStatusTextMap: Record<string, string> = {
   ideal: 'Ideal',
   outside: 'Outside',
 };
 
-export const getWeightStatusColor = (status: string): string => {
-  return weightStatusColorMap[status] || 'bg-info';
-};
-
-export const getWeightStatusIndicatorColor = (status: string): string => {
-  return weightStatusIndicatorColorMap[status] || 'bg-info';
-};
-
 export const getWeightStatusText = (status: string): string => {
   return weightStatusTextMap[status] || status;
 };
@@ -39,24 +21,6 @@ export const getWeightStatusBadgeColor = (
   return weightStatusBadgeColorMap[status] || 'neutral';
 };
 
-export const statusColorMap: Record<string, string> = {
-  APPROVED: 'bg-[#00D39033]',
-  Disetujui: 'bg-[#00D39033]',
-  REJECTED: 'bg-error/10',
-  Ditolak: 'bg-error/10',
-  CREATED: 'bg-[#f3f3f4]',
-  Pengajuan: 'bg-[#f3f3f4]',
-};
-
-export const statusIndicatorColorMap: Record<string, string> = {
-  APPROVED: 'bg-[#008000]',
-  Disetujui: 'bg-[#008000]',
-  REJECTED: 'bg-error',
-  Ditolak: 'bg-error',
-  CREATED: 'bg-[#D9D9D9]',
-  Pengajuan: 'bg-[#D9D9D9]',
-};
-
 export const statusTextMap: Record<string, string> = {
   APPROVED: 'Disetujui',
   Disetujui: 'Disetujui',
@@ -66,14 +30,6 @@ export const statusTextMap: Record<string, string> = {
   Pengajuan: 'Pengajuan',
 };
 
-export const getStatusColor = (status: string): string => {
-  return statusColorMap[status] || 'bg-info';
-};
-
-export const getStatusIndicatorColor = (status: string): string => {
-  return statusIndicatorColorMap[status] || 'bg-info';
-};
-
 export const getStatusText = (status: string): string => {
   return statusTextMap[status] || status;
 };

From 24f2b94bb8a041624679466829f9a707a121a444 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 15:38:12 +0700
Subject: [PATCH 61/65] feat: update menu permissions

---
 src/config/constant.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index c2465cda..120b6b6a 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -5,6 +5,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Dashboard',
     link: '/dashboard',
     icon: 'heroicons-outline:chart-bar-square',
+    permission: ['lti.dashboard.list'],
   },
   {
     text: 'Daily Checklist',
@@ -138,26 +139,46 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Laporan',
     link: '/report',
     icon: 'mdi:chart-box-outline',
+    permission: [
+      'lti.repport.debtsupplier.list',
+      'lti.repport.customerpayment.list',
+      'lti.repport.purchasesupplier.list',
+      'lti.repport.expense.list',
+      'lti.repport.delivery.list',
+      'lti.repport.gethppperkandang.list',
+      'lti.repport.production_result.list',
+    ],
     submenu: [
       {
         text: 'Keuangan',
         link: '/report/finance',
+        permission: [
+          'lti.repport.debtsupplier.list',
+          'lti.repport.customerpayment.list',
+        ],
       },
       {
         text: 'Logistik & Persediaan',
         link: '/report/logistic-stock',
+        permission: ['lti.repport.purchasesupplier.list'],
       },
       {
         text: 'Biaya Operasional',
         link: '/report/expense',
+        permission: ['lti.repport.expense.list'],
       },
       {
         text: 'Penjualan',
         link: '/report/marketing',
+        permission: [
+          'lti.repport.delivery.list',
+          'lti.repport.gethppperkandang.list',
+        ],
       },
       {
         text: 'Hasil Produksi',
         link: '/report/production-result',
+        permission: ['lti.repport.production_result.list'],
       },
     ],
   },
@@ -206,6 +227,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
       'lti.master.suppliers.list',
       'lti.master.uoms.list',
       'lti.master.warehouses.list',
+      'lti.master.production_standards.list',
     ],
     submenu: [
       {
@@ -276,6 +298,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
       {
         text: 'Standar Produksi',
         link: '/master-data/production-standard',
+        permission: ['lti.master.production_standards.list'],
       },
     ],
   },

From 92cc082c5433aa2051bb20185d54bb8cb93862e2 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 15:39:04 +0700
Subject: [PATCH 62/65] chore: use localized language

---
 src/components/helper/PermissionNotFound.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/helper/PermissionNotFound.tsx b/src/components/helper/PermissionNotFound.tsx
index 75e48c62..e2823b8b 100644
--- a/src/components/helper/PermissionNotFound.tsx
+++ b/src/components/helper/PermissionNotFound.tsx
@@ -1,10 +1,17 @@
+import Button from '@/components/Button';
+
 const PermissionNotFound = () => {
   return (
     <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
-      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <h2 className='text-2xl font-bold text-error'>
+        Hak Akses Tidak Ditemukan
+      </h2>
       <p className='text-gray-600 text-center'>
-        You do not have permission to access this page.
+        Anda tidak memiliki hak akses untuk mengakses halaman ini.
       </p>
+      <Button href='/dashboard' className='text-base-100'>
+        Kembali ke Dashboard
+      </Button>
     </div>
   );
 };

From 8ce72b21e1df2ae8be983fdfabce20387d3f7cd5 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 15:39:16 +0700
Subject: [PATCH 63/65] chore: update permissions for /report/marketing

---
 src/config/route-permission.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/config/route-permission.ts b/src/config/route-permission.ts
index 44f3728e..20ee5292 100644
--- a/src/config/route-permission.ts
+++ b/src/config/route-permission.ts
@@ -116,7 +116,10 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   // Report
   '/report/logistic-stock/': ['lti.repport.purchasesupplier.list'],
   '/report/expense/': ['lti.repport.expense.list'],
-  '/report/marketing/': ['lti.repport.delivery.list'],
+  '/report/marketing/': [
+    'lti.repport.delivery.list',
+    'lti.repport.gethppperkandang.list',
+  ],
   '/report/production-result/': ['lti.repport.production_result.list'],
   '/report/finance/': [
     'lti.repport.finance.list',

From c6b9ed4f129d78dad118932c5a7ca873d2cfe159 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 16:54:19 +0700
Subject: [PATCH 64/65] hotfix: add permission guard in transfer to laying page

---
 src/app/production/transfer-to-laying/page.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
index 5d790345..be8ff454 100644
--- a/src/app/production/transfer-to-laying/page.tsx
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -1,15 +1,25 @@
 import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
 import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const TransferToLaying = () => {
   return (
     <section className='w-full'>
       <TransferToLayingsTable />
 
-      <TransferToLayingFormModal />
+      <RequirePermission
+        permissions={[
+          'lti.production.transfer_to_laying.create',
+          'lti.production.transfer_to_laying.update',
+        ]}
+      >
+        <TransferToLayingFormModal />
+      </RequirePermission>
 
-      <TransferToLayingDetailModal />
+      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
+        <TransferToLayingDetailModal />
+      </RequirePermission>
     </section>
   );
 };

From 5b167db6c3d9e55e6f80aa39725e396091040d85 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 30 Jan 2026 16:55:32 +0700
Subject: [PATCH 65/65] chore: add permission for transfer to laying

---
 src/config/constant.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index 120b6b6a..9c6946f7 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -82,6 +82,8 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     permission: [
       'lti.production.project_flocks.list',
       'lti.production.recording.list',
+      'lti.production.transfer_to_laying.list',
+      'lti.production.uniformity.list',
     ],
     submenu: [
       {
@@ -97,6 +99,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
       {
         text: 'Transfer ke Laying',
         link: '/production/transfer-to-laying',
+        permission: ['lti.production.transfer_to_laying.list'],
       },
       {
         text: 'Uniformity',