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] 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>