fix(FE): refactor UI Dashboard pixel perfect figma

src/components/pages/dashboard/DashboardProduction.tsx

@@ -21,9 +21,9 @@ import {
 } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
 import DashboardLineChart from '@/components/pages/dashboard/chart/DashboardLineChart';
 import DashboardLineChartSkeleton from '@/components/pages/dashboard/skeleton/DashboardLineChartSkeleton';
-import DashboardAllCharts, {
-  DashboardAllChartsRef,
-} from '@/components/pages/dashboard/chart/DashboardAllCharts';
+import DashboardExportCharts, {
+  DashboardExportChartsRef,
+} from '@/components/pages/dashboard/export/DashboardExportCharts';
 import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
 import {
   DashboardFilter,
@@ -40,6 +40,11 @@ import MenuItem from '@/components/menu/MenuItem';
 import { useDashboardStore } from '@/stores/dashboard';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+import { useUiStore } from '@/stores/ui/ui.store';
+import { cn } from '@/lib/helper';
+import DashboardExportStats, {
+  DashboardExportStatsRef,
+} from '@/components/pages/dashboard/export/DashboardExportStats';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -59,6 +64,10 @@ const DashboardProduction = () => {
   const { filterValues, setFilterValues, resetFilterValues } =
     useDashboardStore();
 
+  // ===== UI STORE (for navbar actions) =====
+  const setNavbarActions = useUiStore((state) => state.setNavbarActions);
+  const clearNavbarActions = useUiStore((state) => state.clearNavbarActions);
+
   const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
     (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
   );
@@ -67,9 +76,8 @@ const DashboardProduction = () => {
     normalizeToArray(filterValues.location)
   );
   const [exporting, setExporting] = useState(false);
-  const statsRef = useRef<HTMLDivElement>(null);
-  const chartRef = useRef<HTMLDivElement>(null);
-  const allChartsRef = useRef<DashboardAllChartsRef>(null);
+  const allChartsRef = useRef<DashboardExportChartsRef>(null);
+  const allStatsRef = useRef<DashboardExportStatsRef>(null);
 
   // ===== FETCH DATA =====
   const {
@@ -194,12 +202,67 @@ const DashboardProduction = () => {
   const handleExportPDF = async () => {
     await generateDashboardPDF({
       filterValues: formik.values,
-      statsRef,
+      allStatsRef,
       allChartsRef,
       setExporting,
     });
   };
 
+  // ===== Register Navbar Actions =====
+  const openFilterModalRef = useRef(filterModal.openModal);
+  openFilterModalRef.current = filterModal.openModal;
+
+  useEffect(() => {
+    setNavbarActions(
+      <div className='hidden sm:flex flex-row justify-end gap-[12px] '>
+        <ButtonFilter
+          values={{
+            ...formik.values,
+            analysisMode: undefined,
+          }}
+          variant='outline'
+          onClick={() => openFilterModalRef.current()}
+        />
+        <Dropdown
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              className={cn(
+                'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+              )}
+            >
+              <Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
+              Export
+              <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
+                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              </div>
+            </Button>
+          }
+          className={{
+            content: 'w-full',
+          }}
+        >
+          <Menu className={exporting ? 'hidden' : ''}>
+            <MenuItem
+              className='text-sm padding-[12px]'
+              title='PDF'
+              onClick={handleExportPDF}
+            />
+          </Menu>
+        </Dropdown>
+      </div>
+    );
+  }, [formik.values, exporting, setNavbarActions]);
+
+  // Cleanup only on unmount
+  useEffect(() => {
+    return () => {
+      clearNavbarActions();
+    };
+  }, [clearNavbarActions]);
+
   if (isLoadingDashboardProductionData) {
     return (
       <div className='w-full min-h-screen flex items-center justify-center'>
@@ -210,48 +273,59 @@ const DashboardProduction = () => {
 
   return (
     <>
-      <section className='w-full p-4 space-y-6'>
-        <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
-          <div></div>
-
-          <div className='flex flex-row justify-end gap-2'>
-            <ButtonFilter
-              values={{
-                ...formik.values,
-                analysisMode: undefined,
-              }}
-              variant='outline'
-              className='min-w-28 rounded-lg'
-              onClick={() => filterModal.openModal()}
-            />
-            <Dropdown
-              trigger={
-                <Button variant='outline' className='min-w-28 rounded-lg z-50'>
-                  <Icon icon='heroicons:arrow-down-tray' />
-                  Export
-                  <Icon icon='heroicons:chevron-down' />
-                </Button>
-              }
-              className={{
-                content: 'w-full',
-              }}
-            >
-              <Menu className={exporting ? 'hidden' : ''}>
-                <MenuItem title='PDF' onClick={handleExportPDF} />
-              </Menu>
-            </Dropdown>
-          </div>
+      <section className='w-full p-[12px] space-y-[12px]'>
+        <div className='flex sm:hidden flex-row justify-end gap-[12px] '>
+          <ButtonFilter
+            values={{
+              ...formik.values,
+              analysisMode: undefined,
+            }}
+            variant='outline'
+            onClick={() => openFilterModalRef.current()}
+          />
+          <Dropdown
+            trigger={
+              <Button
+                variant='outline'
+                color='none'
+                className={cn(
+                  'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+                  'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+                )}
+              >
+                <Icon
+                  width={20}
+                  height={20}
+                  icon='heroicons:cloud-arrow-down'
+                />
+                Export
+                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
+                  <Icon width={14} height={14} icon='heroicons:chevron-down' />
+                </div>
+              </Button>
+            }
+            className={{
+              content: 'w-full',
+            }}
+          >
+            <Menu className={exporting ? 'hidden' : ''}>
+              <MenuItem
+                className='text-sm padding-[12px]'
+                title='PDF'
+                onClick={handleExportPDF}
+              />
+            </Menu>
+          </Dropdown>
         </div>
-
         {/* Dashboard Stats */}
-        <div ref={statsRef}>
+        <div>
           <DashboardStats
             data={dashboardProductionData?.statistics_data ?? []}
           />
         </div>
 
         {/* Use DashboardLineChart component or skeleton */}
-        <div ref={chartRef}>
+        <div>
           {isLoadingDashboardProductionData ? (
             <DashboardLineChartSkeleton />
           ) : dashboardProductionData &&
@@ -287,28 +361,46 @@ const DashboardProduction = () => {
 
         {/* Hidden container for all charts (used for PDF export in OVERVIEW mode) */}
         {dashboardProductionData && (
-          <div
-            style={{
-              position: 'absolute',
-              left: '-9999px',
-              top: 0,
-              width: '1200px', // Fixed width for consistent PDF rendering
-            }}
-          >
-            <DashboardAllCharts
-              ref={allChartsRef}
-              data={dashboardProductionData}
-              analysisMode={
-                isResponseSuccess(dashboardProductionResponse)
-                  ? dashboardProductionResponse.meta
-                    ? (
-                        dashboardProductionResponse.meta as unknown as DashboardMeta
-                      ).filters?.analysis_mode
+          <>
+            {/* Export Stats Charts */}
+            <div
+              style={{
+                position: 'absolute',
+                left: '-9999px',
+                top: 0,
+                width: '1200px', // Fixed width for consistent PDF rendering
+              }}
+            >
+              <DashboardExportStats
+                ref={allStatsRef}
+                data={dashboardProductionData?.statistics_data ?? []}
+              />
+            </div>
+
+            {/* Export ALL Charts */}
+            <div
+              style={{
+                position: 'absolute',
+                left: '-9999px',
+                top: 0,
+                width: '1200px', // Fixed width for consistent PDF rendering
+              }}
+            >
+              <DashboardExportCharts
+                ref={allChartsRef}
+                data={dashboardProductionData}
+                analysisMode={
+                  isResponseSuccess(dashboardProductionResponse)
+                    ? dashboardProductionResponse.meta
+                      ? (
+                          dashboardProductionResponse.meta as unknown as DashboardMeta
+                        ).filters?.analysis_mode
+                      : analysisMode
                     : analysisMode
-                  : analysisMode
-              }
-            />
-          </div>
+                }
+              />
+            </div>
+          </>
         )}
       </section>
 
@@ -319,30 +411,32 @@ const DashboardProduction = () => {
           modalBox: 'p-0 rounded-xl',
         }}
       >
-        <div className='space-y-6'>
+        <div className='space-y-[16px]'>
           {/* Modal Header */}
-          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300'>
-            <div className='flex items-center gap-2 ms-4'>
+          <div className='flex items-center justify-between gap-[8px] py-[16px] border-b border-[#E5E7EB]'>
+            <div className='flex items-center gap-[8px] ms-[16px] text-[#0069E0]'>
               <Icon icon='heroicons:funnel' width={20} height={20} />
               <h3 className='font-semibold'>Filter Data</h3>
             </div>
             <Button
               variant='link'
               onClick={() => filterModal.closeModal()}
-              className='text-gray-500 hover:text-gray-700 me-4 '
+              className='text-gray-500 hover:text-gray-700 me-[16px]'
             >
               <Icon icon='heroicons:x-mark' width={20} height={20} />
             </Button>
           </div>
 
           <form
-            className='space-y-4'
+            className='space-y-[8px]'
             onSubmit={handleFormSubmit}
             onReset={handleResetFilter}
           >
             {/* Rentang Waktu */}
-            <div className='px-4'>
-              <label className='flex items-center gap-2 mb-3'>Tanggal</label>
+            <div className='px-[16px]'>
+              <label className='flex text-xs items-center gap-2 mb-[8px] font-semibold'>
+                Tanggal
+              </label>
               <div className='flex items-start gap-2'>
                 <DateInput
                   name='startDate'
@@ -351,14 +445,17 @@ const DashboardProduction = () => {
                   errorMessage={formik.errors.startDate}
                   onChange={formik.handleChange}
                   className={{
-                    inputWrapper: 'rounded-lg',
+                    inputWrapper:
+                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
                   }}
                   isError={
                     Boolean(formik.errors.startDate) &&
                     Boolean(formik.touched.startDate)
                   }
                 />
-                <div className='hidden md:block mt-3 text-center'>—</div>
+                <div className='hidden md:block mt-3 text-center text-[#18181B]/10 '>
+                  —
+                </div>
                 <DateInput
                   name='endDate'
                   placeholder='Tanggal Akhir'
@@ -366,7 +463,8 @@ const DashboardProduction = () => {
                   errorMessage={formik.errors.endDate}
                   onChange={formik.handleChange}
                   className={{
-                    inputWrapper: 'rounded-lg',
+                    inputWrapper:
+                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
                   }}
                   isError={
                     Boolean(formik.errors.endDate) &&
@@ -377,8 +475,10 @@ const DashboardProduction = () => {
             </div>
 
             {/* Analysis Mode */}
-            <div className='px-4'>
-              <label className='block mb-3'>Analysis Mode</label>
+            <div className='px-[16px]'>
+              <label className='block mb-[8px] text-xs font-semibold'>
+                Analysis Mode
+              </label>
               <RadioGroup
                 name='analysisMode'
                 value={formik.values.analysisMode}
@@ -394,7 +494,8 @@ const DashboardProduction = () => {
                 }}
                 color='primary'
                 className={{
-                  wrapper: 'w-full my-6 font-semibold text-neutral-500',
+                  wrapper:
+                    'w-full flex flex-row items-center min-h-[45px] font-medium text-[#18181B]/50',
                 }}
               >
                 <RadioGroupItem
@@ -411,7 +512,7 @@ const DashboardProduction = () => {
             </div>
 
             {formik.values.analysisMode === 'COMPARISON' && (
-              <div className='px-4'>
+              <div className='px-[16px]'>
                 <SelectInputRadio
                   label='Compared By'
                   value={comparisonTypeOptions.find(
@@ -430,12 +531,16 @@ const DashboardProduction = () => {
                     Boolean(formik.errors.comparisonType) &&
                     Boolean(formik.touched.comparisonType)
                   }
+                  className={{
+                    label: 'mb-[8px] text-xs font-semibold',
+                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                  }}
                 />
               </div>
             )}
 
             {/* Location */}
-            <div className='px-4'>
+            <div className='px-[16px]'>
               {comparisonTypeOptions.find(
                 (option) => option.value === formik.values.comparisonType
               )?.value === 'FARM' ? (
@@ -465,6 +570,10 @@ const DashboardProduction = () => {
                     Boolean(formik.errors.location) &&
                     Boolean(formik.touched.location)
                   }
+                  className={{
+                    label: 'mb-[8px] text-xs font-semibold',
+                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                  }}
                 />
               ) : (
                 <SelectInputRadio
@@ -493,6 +602,10 @@ const DashboardProduction = () => {
                     Boolean(formik.errors.location) &&
                     Boolean(formik.touched.location)
                   }
+                  className={{
+                    label: 'mb-[8px] text-xs font-semibold',
+                    select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                  }}
                 />
               )}
             </div>
@@ -505,7 +618,7 @@ const DashboardProduction = () => {
                 formik.values.comparisonType === 'KANDANG'
               )
             ) && (
-              <div className='px-4'>
+              <div className='px-[16px]'>
                 {comparisonTypeOptions.find(
                   (option) => option.value === formik.values.comparisonType
                 )?.value === 'FLOCK' ? (
@@ -530,6 +643,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.flock) &&
                       Boolean(formik.touched.flock)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 ) : (
                   <SelectInputRadio
@@ -553,6 +670,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.flock) &&
                       Boolean(formik.touched.flock)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 )}
               </div>
@@ -563,7 +684,7 @@ const DashboardProduction = () => {
               formik.values.analysisMode === 'COMPARISON' &&
               !(formik.values.comparisonType === 'KANDANG')
             ) && (
-              <div className='px-4'>
+              <div className='px-[16px]'>
                 {comparisonTypeOptions.find(
                   (option) => option.value === formik.values.comparisonType
                 )?.value === 'KANDANG' ? (
@@ -588,6 +709,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.kandang) &&
                       Boolean(formik.touched.kandang)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 ) : (
                   <SelectInputRadio
@@ -611,6 +736,10 @@ const DashboardProduction = () => {
                       Boolean(formik.errors.kandang) &&
                       Boolean(formik.touched.kandang)
                     }
+                    className={{
+                      label: 'mb-[8px] text-xs font-semibold',
+                      select: 'rounded-[8px] text-sm border-[#18181B]/10',
+                    }}
                   />
                 )}
               </div>
@@ -621,16 +750,19 @@ const DashboardProduction = () => {
             </div>
 
             {/* Action Buttons */}
-            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
+            <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
               <Button
                 type='reset'
                 variant='soft'
-                className='ms-4 min-w-36 rounded-lg'
+                className='ms-4 px-[16px] rounded-[8px] bg-[#F9FAFB] border-[#F9FAFB] text-[#4A5565] hover:bg-[#4A5565]/10'
               >
                 Reset Filter
               </Button>
-              <Button type='submit' className='me-4 min-w-36 rounded-lg'>
-                Terapkan Filter
+              <Button
+                type='submit'
+                className='me-4 min-w-[160px] px-[16px] rounded-[8px]'
+              >
+                Apply Filter
               </Button>
             </div>
           </form>