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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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/29] 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 fc81fa9ad3f1f1740ec3ce6e3666d6856a1a39f2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 09:22:52 +0700
Subject: [PATCH 23/29] 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 24/29] 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 25/29] 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 26/29] 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 27/29] 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 28/29] 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 29/29] 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>