fix(FE): refactor UI Dashboard pixel perfect figma

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

src/components/Navbar.tsx

@@ -12,6 +12,7 @@ import PopoverContent from '@/components/popover/PopoverContent';
 import { useAuth } from '@/services/hooks/useAuth';
 import { AuthApi } from '@/services/api/auth';
 import { isResponseError } from '@/lib/api-helper';
+import { useUiStore } from '@/stores/ui/ui.store';
 
 interface NavbarProps {
   toggleSidebar?: () => void;
@@ -21,6 +22,7 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
   const { setUser } = useAuth();
   const router = useRouter();
   const pathname = usePathname();
+  const navbarActions = useUiStore((state) => state.navbarActions);
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
@@ -53,7 +55,9 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
         </div>
       </div>
 
-      <div className='flex gap-2'>
+      <div className='flex gap-2 items-center'>
+        {/* Page-specific actions */}
+        {navbarActions && <div className='mr-2'>{navbarActions}</div>}
         <PopoverButton
           tabIndex={0}
           variant='ghost'

src/components/helper/ButtonFilter.tsx

@@ -9,15 +9,21 @@ export type ButtonFilterProps = ButtonProps & {
   onClick: () => void;
 };
 
+// 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
+
 const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
   return (
     <Button
       {...props}
       onClick={onClick}
+      variant='outline'
+      color='none'
       className={cn(
+        'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
+        'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
         getFilledFormikValuesCount(values) > 0
-          ? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
+          ? 'border-primary-gradient !rounded-[8px]'
-          : '',
+          : '!rounded-[8px]',
         props.className
       )}
     >
@@ -31,7 +37,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       />
       Filter
       {getFilledFormikValuesCount(values) > 0 && (
-        <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
+        <span className='w-[20px] h-[20px] text-white bg-[#FF3535] rounded-[8px] border-[1px] border-base-300 flex items-center justify-center text-xs'>
           {getFilledFormikValuesCount(values)}
         </span>
       )}

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, {
+import DashboardExportCharts, {
-  DashboardAllChartsRef,
+  DashboardExportChartsRef,
-} from '@/components/pages/dashboard/chart/DashboardAllCharts';
+} 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 allChartsRef = useRef<DashboardExportChartsRef>(null);
-  const chartRef = useRef<HTMLDivElement>(null);
+  const allStatsRef = useRef<DashboardExportStatsRef>(null);
-  const allChartsRef = useRef<DashboardAllChartsRef>(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'>
+      <section className='w-full p-[12px] space-y-[12px]'>
-        <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
+        <div className='flex sm:hidden flex-row justify-end gap-[12px] '>
-          <div></div>
+          <ButtonFilter
-
+            values={{
-          <div className='flex flex-row justify-end gap-2'>
+              ...formik.values,
-            <ButtonFilter
+              analysisMode: undefined,
-              values={{
+            }}
-                ...formik.values,
+            variant='outline'
-                analysisMode: undefined,
+            onClick={() => openFilterModalRef.current()}
-              }}
+          />
-              variant='outline'
+          <Dropdown
-              className='min-w-28 rounded-lg'
+            trigger={
-              onClick={() => filterModal.openModal()}
+              <Button
-            />
+                variant='outline'
-            <Dropdown
+                color='none'
-              trigger={
+                className={cn(
-                <Button variant='outline' className='min-w-28 rounded-lg z-50'>
+                  'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
-                  <Icon icon='heroicons:arrow-down-tray' />
+                  'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-                  Export
+                )}
-                  <Icon icon='heroicons:chevron-down' />
+              >
-                </Button>
+                <Icon
-              }
+                  width={20}
-              className={{
+                  height={20}
-                content: 'w-full',
+                  icon='heroicons:cloud-arrow-down'
-              }}
+                />
-            >
+                Export
-              <Menu className={exporting ? 'hidden' : ''}>
+                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
-                <MenuItem title='PDF' onClick={handleExportPDF} />
+                  <Icon width={14} height={14} icon='heroicons:chevron-down' />
-              </Menu>
+                </div>
-            </Dropdown>
+              </Button>
-          </div>
+            }
+            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={{
+            {/* Export Stats Charts */}
-              position: 'absolute',
+            <div
-              left: '-9999px',
+              style={{
-              top: 0,
+                position: 'absolute',
-              width: '1200px', // Fixed width for consistent PDF rendering
+                left: '-9999px',
-            }}
+                top: 0,
-          >
+                width: '1200px', // Fixed width for consistent PDF rendering
-            <DashboardAllCharts
+              }}
-              ref={allChartsRef}
+            >
-              data={dashboardProductionData}
+              <DashboardExportStats
-              analysisMode={
+                ref={allStatsRef}
-                isResponseSuccess(dashboardProductionResponse)
+                data={dashboardProductionData?.statistics_data ?? []}
-                  ? dashboardProductionResponse.meta
+              />
-                    ? (
+            </div>
-                        dashboardProductionResponse.meta as unknown as DashboardMeta
+
-                      ).filters?.analysis_mode
+            {/* 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 justify-between gap-[8px] py-[16px] border-b border-[#E5E7EB]'>
-            <div className='flex items-center gap-2 ms-4'>
+            <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'>
+            <div className='px-[16px]'>
-              <label className='flex items-center gap-2 mb-3'>Tanggal</label>
+              <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'>
+            <div className='px-[16px]'>
-              <label className='block mb-3'>Analysis Mode</label>
+              <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'>
+              <Button
-                Terapkan Filter
+                type='submit'
+                className='me-4 min-w-[160px] px-[16px] rounded-[8px]'
+              >
+                Apply Filter
               </Button>
             </div>
           </form>

src/components/pages/dashboard/chart/DashboardLineChart.tsx

@@ -151,7 +151,7 @@ const DashboardLineChart = ({
       }}
       variant='bordered'
     >
-      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6'>
+      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-[12px]'>
         <div className='text-lg font-semibold'>
           Performance{' '}
           <Icon
@@ -169,22 +169,24 @@ const DashboardLineChart = ({
               <Button
                 variant='outline'
                 color='none'
-                className='text-neutral-500 hover:text-neutral-700 rounded-lg px-4 py-2 border-neutral-300'
+                className='py-[10px] pl-[12px] pr-[4px] text-[#18181B]/50 rounded-[8px] text-[14px] border-[#18181B]/10 shadow-button-soft'
                 onClick={() => setOpen(!open)}
               >
                 {chartTypeLabels[chartData]}{' '}
-                <div className='divider divider-horizontal p-0 m-0 before:bg-neutral-300 after:bg-neutral-300'></div>
+                <div className='w-[26px] h-[20px] flex items-center justify-center border-l border-[#18181B]/10'>
-                <Icon icon='heroicons:chevron-down' width={20} height={20} />
+                  <Icon icon='heroicons:chevron-down' width={14} height={14} />
+                </div>
               </Button>
             }
             className={{
-              content: 'w-52 mt-3',
+              content: '',
             }}
             controlled={open}
           >
             <Menu>
               <MenuItem
                 title='Body weight'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('body_weight');
                   setOpen(!open);
@@ -192,6 +194,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Performance'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('performance');
                   setOpen(!open);
@@ -199,6 +202,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='FCR'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('fcr');
                   setOpen(!open);
@@ -206,6 +210,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Quality Control'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('quality_control');
                   setOpen(!open);
@@ -213,6 +218,7 @@ const DashboardLineChart = ({
               />
               <MenuItem
                 title='Deplesi'
+                className='text-sm padding-[12px] whitespace-nowrap'
                 onClick={() => {
                   setChartData('deplesi');
                   setOpen(!open);
@@ -248,8 +254,8 @@ const DashboardLineChart = ({
               .includes('std');
 
             return (
-              <button
+              <Button
-                key={series.id}
+                key={`${series.id}-${index}`}
                 onClick={() => {
                   const newVisible = new Set(visibleSeries);
                   if (isVisible) {
@@ -259,14 +265,16 @@ const DashboardLineChart = ({
                   }
                   setVisibleSeries(newVisible);
                 }}
-                className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors ${
+                variant='outline'
+                color='none'
+                className={`flex items-center gap-[8px] px-[12px] py-[10px] rounded-[8px] border transition-colors ${
                   isVisible
-                    ? 'border-neutral-400 bg-neutral-50'
+                    ? 'border-[#18181B]/10 hover:bg-[#18181B]/4'
-                    : 'border-neutral-300 hover:bg-neutral-50'
+                    : 'border-[#18181B]/10 bg-[#18181B]/4'
                 }`}
               >
                 <div
-                  className={`w-6 h-0.5 ${
+                  className={`w-[20px] h-[2px] ${
                     isStandard ? 'border-t-2 border-dashed' : ''
                   } ${!isVisible ? 'opacity-30' : ''}`}
                   style={{
@@ -279,17 +287,17 @@ const DashboardLineChart = ({
                   }}
                 ></div>
                 <span
-                  className={`text-sm ${isVisible ? 'text-neutral-900 font-medium' : 'text-neutral-700'}`}
+                  className={`font-semibold text-[14px] ${isVisible ? 'text-[#18181B]/50' : 'text-[#18181B]/50'}`}
                 >
                   {series.label}
                 </span>
                 <Icon
-                  icon='heroicons:information-circle'
+                  icon='heroicons:eye'
                   width={16}
                   height={16}
-                  className='text-neutral-400'
+                  className='text-[#18181B]/40'
                 />
-              </button>
+              </Button>
             );
           });
         })()}
@@ -335,20 +343,54 @@ const DashboardLineChart = ({
             <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
             <XAxis
               dataKey='week'
-              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tick={{
+                fontSize: 12,
+                fill: '#18181B',
+                opacity: 0.5,
+                fontWeight: 600,
+              }}
               tickLine={false}
-              axisLine={{ stroke: '#e5e7eb' }}
+              axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
               label={{
                 value: 'Weeks',
                 position: 'insideBottom',
                 offset: -5,
-                style: { fontSize: 12, fill: '#9ca3af' },
+                style: {
+                  fontSize: 12,
+                  fill: '#18181B',
+                  opacity: 0.2,
+                  fontWeight: 600,
+                },
               }}
             />
             <YAxis
-              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tick={{
+                fontSize: 12,
+                fill: '#18181B',
+                opacity: 0.5,
+                fontWeight: 600,
+              }}
+              label={
+                chartData === 'body_weight' || chartData === 'performance'
+                  ? {
+                      value:
+                        chartData === 'body_weight'
+                          ? 'Body Weight'
+                          : 'Percentage',
+                      position: 'insideLeft',
+                      angle: -90,
+                      offset: 25,
+                      style: {
+                        fontSize: 12,
+                        fill: '#18181B',
+                        opacity: 0.2,
+                        fontWeight: 600,
+                      },
+                    }
+                  : undefined
+              }
               tickLine={false}
-              axisLine={{ stroke: '#e5e7eb' }}
+              axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
               domain={(() => {
                 // Calculate dynamic domain based on visible data
                 let seriesData: DashboardChartsSeries[] = [];
@@ -399,14 +441,12 @@ const DashboardLineChart = ({
               })()}
               ticks={(() => {
                 // Calculate dynamic ticks based on domain
-                let seriesData: DashboardChartsSeries[] = [];
                 let dataset: DashboardChartsDataset[] = [];
 
                 if (
                   analysisMode === 'OVERVIEW' &&
                   isOverviewCharts(data.charts)
                 ) {
-                  seriesData = data.charts[chartData]?.series || [];
                   dataset = data.charts[chartData]?.dataset || [];
                 } else if (
                   analysisMode === 'COMPARISON' &&
@@ -416,7 +456,6 @@ const DashboardLineChart = ({
                     data.charts.farm ||
                     data.charts.flock ||
                     data.charts.kandang;
-                  seriesData = comparisonChart?.series || [];
                   dataset = comparisonChart?.dataset || [];
                 }
 
@@ -436,6 +475,20 @@ const DashboardLineChart = ({
 
                 const minValue = Math.min(...allValues);
                 const maxValue = Math.max(...allValues);
+
+                // Handle edge case where min equals max
+                if (minValue === maxValue) {
+                  const value = Math.round(minValue);
+                  const padding = Math.max(10, Math.abs(value) * 0.2);
+                  return [
+                    Math.floor(value - padding),
+                    Math.floor(value - padding / 2),
+                    value,
+                    Math.ceil(value + padding / 2),
+                    Math.ceil(value + padding),
+                  ];
+                }
+
                 const padding = (maxValue - minValue) * 0.1;
                 const domainMin = Math.floor(Math.max(0, minValue - padding));
                 const domainMax = Math.ceil(maxValue + padding);
@@ -444,13 +497,16 @@ const DashboardLineChart = ({
                 const range = domainMax - domainMin;
                 const step = range / 4;
 
-                return [
+                // Use Set to ensure unique values
+                const tickSet = new Set([
                   domainMin,
                   Math.round(domainMin + step),
                   Math.round(domainMin + step * 2),
                   Math.round(domainMin + step * 3),
                   domainMax,
-                ];
+                ]);
+
+                return Array.from(tickSet).sort((a, b) => a - b);
               })()}
             />
             <Tooltip
@@ -458,7 +514,7 @@ const DashboardLineChart = ({
                 backgroundColor: '#1f2937',
                 border: 'none',
                 borderRadius: '8px',
-                padding: '8px 12px',
+                padding: '12px 12px',
                 color: 'white',
               }}
               labelStyle={{ color: 'white', marginBottom: '4px' }}
@@ -466,8 +522,8 @@ const DashboardLineChart = ({
               labelFormatter={(value) => `Week ${value}`}
               content={(props) => {
                 return (
-                  <div className='flex flex-col gap-2 rounded-lg bg-neutral-950 p-4  text-white'>
+                  <div className='flex flex-col gap-[6px] rounded-lg bg-neutral-950 p-4  text-white'>
-                    <p className='text-neutral-300 text-xs font-semibold text-start'>
+                    <p className='text-neutral-300 text-[12px] font-semibold text-start'>
                       {analysisMode === 'OVERVIEW'
                         ? selectedKandang
                           ? selectedKandang.label || 'Overview Performance'
@@ -506,12 +562,12 @@ const DashboardLineChart = ({
 
                         return (
                           <li
-                            key={item.name}
+                            key={`${item.name}-${index}`}
-                            className='flex w-full justify-between items-center flex-row gap-6 p-0'
+                            className='flex w-full justify-between items-center flex-row gap-y-[6px] gap-x-[12px] p-0'
                           >
                             <span className='flex flex-row gap-1 items-center'>
                               <div
-                                className='h-4 w-4 m-0 rounded-md'
+                                className='h-[20px] w-[20px] m-0 rounded-[4px]'
                                 style={{
                                   backgroundColor: color,
                                 }}
@@ -526,7 +582,7 @@ const DashboardLineChart = ({
                         );
                       })}
                     </ul>
-                    <p className='text-neutral-300 text-xs text-start'>
+                    <p className='text-neutral-300 text-[12px] text-start'>
                       Week {props.label}
                     </p>
                   </div>
@@ -598,7 +654,7 @@ const DashboardLineChart = ({
 
                   return (
                     <Line
-                      key={series.id}
+                      key={`${series.id}--${index}`}
                       type='monotone'
                       dataKey={dataKey}
                       name={series.label}
@@ -649,13 +705,15 @@ const DashboardLineChart = ({
             return (
               <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
                 {/* Chart icon */}
-                <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
-                  <Icon
+                  <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
-                    icon='heroicons:chart-bar'
+                    <Icon
-                    className='text-white'
+                      icon='heroicons:chart-bar'
-                    width={24}
+                      className='text-white'
-                    height={24}
+                      width={20}
-                  />
+                      height={20}
+                    />
+                  </div>
                 </div>
 
                 {/* Empty state text */}

src/components/pages/dashboard/chart/DashboardStats.tsx

@@ -48,7 +48,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
       icon: isPositive
         ? 'heroicons:arrow-trending-up'
         : 'heroicons:arrow-trending-down',
-      color: isPositive ? 'text-success' : 'text-error',
+      color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
       value: Math.abs(percent),
     };
   };
@@ -60,14 +60,16 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
         {prefix}
         {formatNumber(value)}
         {suffix && (
-          <span className='text-sm font-normal text-neutral-500'>{suffix}</span>
+          <span className='text-[14px] font-normal text-[#18181B]/50'>
+            {suffix}
+          </span>
         )}
       </>
     );
   };
 
   return (
-    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
+    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-[12px]'>
       {CARD_CONFIG.map((config) => {
         // Find matching data from API
         const cardData = data.find((item) => item.label === config.key);
@@ -78,35 +80,42 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
             <Card
               key={config.key}
               className={{
-                wrapper: 'w-full rounded-lg',
+                wrapper:
+                  'w-full rounded-[12px] border-[1px] border-[#18181B]/10',
                 body: 'p-0',
+                wrapperContent:
+                  'h-full flex flex-col items-between justify-between',
+                footer: '!mt-0',
               }}
               variant='bordered'
               footer={
-                <div className='flex flex-row justify-between px-4 pb-4'>
+                <div className='flex flex-row justify-between px-[16px] pb-[16px] max-h-[48px]'>
-                  <div className='text-neutral-400 font-semibold text-sm'>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
                     From last month
                   </div>
-                  <div className='text-neutral-400 font-semibold text-sm'>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
                     Filter Required
                   </div>
                 </div>
               }
             >
-              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+              <div className='flex flex-row items-center gap-4 px-4 py-4'>
-                <Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
+                <Alert
+                  variant='soft'
+                  className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                >
                   <Icon
                     icon={config.icon}
-                    width={32}
+                    width={24}
-                    height={32}
+                    height={24}
-                    className='text-neutral-400'
+                    className='text-[#18181B]/50'
                   />
                 </Alert>
                 <div>
-                  <h3 className='text-neutral-400 font-semibold text-sm'>
+                  <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
                     {config.key}
                   </h3>
-                  <p className='text-2xl font-semibold text-neutral-400'>
+                  <p className='text-[20px] font-semibold text-[#18181B]/50'>
                     ********
                   </p>
                 </div>
@@ -121,17 +130,21 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
           <Card
             key={config.key}
             className={{
-              wrapper: 'w-full rounded-lg',
+              wrapper:
+                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
               body: 'p-0',
+              wrapperContent:
+                'h-full flex flex-col items-between justify-between',
+              footer: '!mt-0',
             }}
             variant='bordered'
             footer={
-              <div className='flex flex-row justify-between px-4 pb-4'>
+              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
-                <div className='text-neutral-500 font-semibold text-sm'>
+                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
                   From last month
                 </div>
                 <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
                 >
                   <Icon icon={trend.icon} width={16} height={16} />
                   {trend.value}%
@@ -143,15 +156,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
               <Alert
                 variant='soft'
                 color={config.alertColor}
-                className='rounded-lg p-3'
+                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
               >
-                <Icon icon={config.icon} width={32} height={32} />
+                <Icon icon={config.icon} width={24} height={24} />
               </Alert>
               <div>
-                <h3 className='text-neutral-500 font-semibold text-sm'>
+                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
                   {cardData.label}
                 </h3>
-                <p className='text-2xl font-semibold'>
+                <p className='text-[20px] font-semibold'>
                   {formatValue(cardData.value, config.prefix, config.suffix)}
                 </p>
               </div>

src/components/pages/dashboard/export/DashboardExportCharts.tsx

@@ -17,12 +17,12 @@ import {
   YAxis,
 } from 'recharts';
 
-type DashboardAllChartsProps = {
+type DashboardExportChartsProps = {
   data: Dashboard;
   analysisMode: string;
 };
 
-export type DashboardAllChartsRef = {
+export type DashboardExportChartsRef = {
   getChartRefs: () => {
     key: string;
     ref: HTMLDivElement | null;
@@ -99,9 +99,9 @@ const chartTypeLabels: Record<keyof DashboardOverviewCharts, string> = {
   deplesi: 'Deplesi',
 };
 
-const DashboardAllCharts = forwardRef<
+const DashboardExportCharts = forwardRef<
-  DashboardAllChartsRef,
+  DashboardExportChartsRef,
-  DashboardAllChartsProps
+  DashboardExportChartsProps
 >(({ data, analysisMode }, ref) => {
   // Create refs for charts - use string keys for flexibility
   const chartRefs = useRef<{
@@ -338,6 +338,6 @@ const DashboardAllCharts = forwardRef<
   );
 });
 
-DashboardAllCharts.displayName = 'DashboardAllCharts';
+DashboardExportCharts.displayName = 'DashboardExportCharts';
 
-export default DashboardAllCharts;
+export default DashboardExportCharts;

src/components/pages/dashboard/export/DashboardExportStats.tsx

@@ -0,0 +1,201 @@
+import Alert from '@/components/Alert';
+import Card from '@/components/Card';
+import { formatNumber } from '@/lib/helper';
+import {
+  DashboardOverviewCharts,
+  DashboardStatisticsData,
+} from '@/types/api/dashboard/dashboard';
+import { Icon } from '@iconify/react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+interface DashboardStatsProps {
+  data: DashboardStatisticsData[];
+}
+export type DashboardExportStatsRef = {
+  getStatsRefs: () => {
+    key: string;
+    ref: HTMLDivElement | null;
+    label: string;
+  }[];
+  getContainerRef: () => HTMLDivElement | null;
+};
+
+// Konfigurasi untuk setiap kartu
+const CARD_CONFIG = [
+  {
+    key: 'HPP Global',
+    icon: 'heroicons:banknotes',
+    alertColor: 'warning' as const,
+    suffix: ' /Kg',
+    prefix: 'RP ',
+  },
+  {
+    key: 'Avg. Selling Price',
+    icon: 'heroicons:document-currency-dollar',
+    alertColor: 'success' as const,
+    suffix: ' /Kg',
+    prefix: '',
+  },
+  {
+    key: 'FCR',
+    icon: 'heroicons:clipboard-document-list',
+    alertColor: 'info' as const,
+    suffix: '',
+    prefix: '',
+  },
+  {
+    key: 'Mortality',
+    icon: 'heroicons:exclamation-triangle',
+    alertColor: 'error' as const,
+    suffix: ' %',
+    prefix: '',
+  },
+];
+
+const DashboardExportStats = forwardRef<
+  DashboardExportStatsRef,
+  DashboardStatsProps
+>(({ data }, ref) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Helper to get trend icon and color
+  const getTrendDisplay = (percent: number) => {
+    const isPositive = percent >= 0;
+    return {
+      icon: isPositive
+        ? 'heroicons:arrow-trending-up'
+        : 'heroicons:arrow-trending-down',
+      color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
+      value: Math.abs(percent),
+    };
+  };
+
+  // Helper to format value
+  const formatValue = (value: number, prefix: string, suffix: string) => {
+    return (
+      <>
+        {prefix}
+        {formatNumber(value)}
+        {suffix && (
+          <span className='text-[14px] font-normal text-[#18181B]/50'>
+            {suffix}
+          </span>
+        )}
+      </>
+    );
+  };
+
+  // Expose container ref through imperative handle
+  useImperativeHandle(ref, () => ({
+    getStatsRefs: () => [],
+    getContainerRef: () => containerRef.current,
+  }));
+
+  return (
+    <div ref={containerRef} className='grid grid-cols-4 gap-[12px]'>
+      {CARD_CONFIG.map((config) => {
+        // Find matching data from API
+        const cardData = data.find((item) => item.label === config.key);
+
+        if (!cardData) {
+          // Show placeholder card for missing data (FCR & Mortality)
+          return (
+            <Card
+              key={config.key}
+              className={{
+                wrapper: 'w-full rounded-lg',
+                body: 'p-0',
+                wrapperContent:
+                  'h-full flex flex-col items-between justify-between',
+                footer: '!mt-0',
+              }}
+              variant='bordered'
+              footer={
+                <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                    From last month
+                  </div>
+                  <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                    Filter Required
+                  </div>
+                </div>
+              }
+            >
+              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+                <Alert
+                  variant='soft'
+                  className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                >
+                  <Icon
+                    icon={config.icon}
+                    width={24}
+                    height={24}
+                    className='text-[#18181B]/50'
+                  />
+                </Alert>
+                <div>
+                  <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                    {config.key}
+                  </h3>
+                  <p className='text-[20px] font-semibold text-[#18181B]/50'>
+                    ********
+                  </p>
+                </div>
+              </div>
+            </Card>
+          );
+        }
+
+        const trend = getTrendDisplay(cardData.percent_last_month);
+
+        return (
+          <Card
+            key={config.key}
+            className={{
+              wrapper:
+                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
+              body: 'p-0',
+              wrapperContent:
+                'h-full flex flex-col items-between justify-between',
+              footer: '!mt-0',
+            }}
+            variant='bordered'
+            footer={
+              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
+                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+                  From last month
+                </div>
+                <div
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
+                >
+                  <Icon icon={trend.icon} width={16} height={16} />
+                  {trend.value}%
+                </div>
+              </div>
+            }
+          >
+            <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+              <Alert
+                variant='soft'
+                color={config.alertColor}
+                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+              >
+                <Icon icon={config.icon} width={24} height={24} />
+              </Alert>
+              <div>
+                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+                  {cardData.label}
+                </h3>
+                <p className='text-[20px] font-semibold'>
+                  {formatValue(cardData.value, config.prefix, config.suffix)}
+                </p>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+});
+
+DashboardExportStats.displayName = 'DashboardExportStats';
+
+export default DashboardExportStats;

src/components/pages/dashboard/export/DashboardPDF.ts

@@ -3,18 +3,19 @@ import { toPng } from 'html-to-image';
 import toast from 'react-hot-toast';
 import { formatDate } from '@/lib/helper';
 import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
-import { DashboardAllChartsRef } from '@/components/pages/dashboard/chart/DashboardAllCharts';
+import { DashboardExportChartsRef } from '@/components/pages/dashboard/export/DashboardExportCharts';
+import { DashboardExportStatsRef } from '@/components/pages/dashboard/export/DashboardExportStats';
 
 interface DashboardPDFExportParams {
   filterValues: DashboardFilterType;
-  statsRef: React.RefObject<HTMLDivElement | null>;
+  allStatsRef: React.RefObject<DashboardExportStatsRef | null>;
-  allChartsRef: React.RefObject<DashboardAllChartsRef | null>;
+  allChartsRef: React.RefObject<DashboardExportChartsRef | null>;
   setExporting: (value: boolean) => void;
 }
 
 export const generateDashboardPDF = async ({
   filterValues,
-  statsRef,
+  allStatsRef,
   allChartsRef,
   setExporting,
 }: DashboardPDFExportParams): Promise<void> => {
@@ -168,31 +169,34 @@ export const generateDashboardPDF = async ({
     yPosition += 10;
 
     // Capture and add stats if available
-    if (statsRef.current) {
+    if (allStatsRef.current) {
-      const statsImage = await toPng(statsRef.current, {
+      const statsContainer = allStatsRef.current.getContainerRef();
-        quality: 1,
+      if (statsContainer) {
-        pixelRatio: 2,
+        const statsImage = await toPng(statsContainer, {
-      });
+          quality: 1,
-      const statsImgProps = pdf.getImageProperties(statsImage);
+          pixelRatio: 2,
-      const statsWidth = pageWidth - 2 * margin;
+        });
-      const statsHeight =
+        const statsImgProps = pdf.getImageProperties(statsImage);
-        (statsImgProps.height * statsWidth) / statsImgProps.width;
+        const statsWidth = pageWidth - 2 * margin;
+        const statsHeight =
+          (statsImgProps.height * statsWidth) / statsImgProps.width;
 
-      // Check if we need a new page
+        // Check if we need a new page
-      if (yPosition + statsHeight > pageHeight - margin) {
+        if (yPosition + statsHeight > pageHeight - margin) {
-        pdf.addPage();
+          pdf.addPage();
-        yPosition = margin;
+          yPosition = margin;
+        }
+
+        pdf.addImage(
+          statsImage,
+          'PNG',
+          margin,
+          yPosition,
+          statsWidth,
+          statsHeight
+        );
+        yPosition += statsHeight + 10;
       }
-
-      pdf.addImage(
-        statsImage,
-        'PNG',
-        margin,
-        yPosition,
-        statsWidth,
-        statsHeight
-      );
-      yPosition += statsHeight + 10;
     }
 
     if (allChartsRef.current) {

src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx

@@ -3,94 +3,104 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard';
 
 const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
   return (
-    <div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
+    <div className='w-full bg-white rounded-[12px] border border-[#18181B]/10 p-[16px] relative'>
       {/* Header with title skeleton */}
-      <div className='text-lg font-semibold'>
+      <div className='text-[16px] font-semibold'>
         Performance{' '}
         <Icon
           icon='heroicons:information-circle'
           width={20}
           height={20}
-          className='inline text-neutral-500'
+          className='inline text-[#18181B]/50'
         />
       </div>
 
       {/* Chart area with axes skeleton */}
-      <div className='relative mt-6'>
+      <div className='relative mt-6 '>
-        {/* Main chart container */}
+        {/* Chart content area */}
-        <div className='flex gap-4'>
+        <div className='flex-1 relative'>
-          {/* Y-axis skeleton (left side) */}
+          {/* Empty state centered in chart area */}
-          <div className='flex flex-col justify-between py-4 space-y-4'>
+          <div className='absolute inset-0 flex flex-col items-center justify-center pb-10'>
-            {[1, 2, 3, 4, 5, 6].map((item) => (
+            {!meta?.filters && (
-              <div
+              <>
-                key={item}
+                {/* Filter icon */}
-                className='h-4 w-12 bg-gray-100 rounded animate-pulse'
+                <div className='mb-[9px]'>
-              ></div>
+                  <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
-            ))}
+                    <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
-          </div>
+                      <Icon
-
+                        icon='heroicons:funnel'
-          {/* Chart content area */}
+                        className='text-white'
-          <div className='flex-1 relative'>
+                        width={20}
-            {/* Empty state centered in chart area */}
+                        height={20}
-            <div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
+                      />
-              {!meta?.filters && (
+                    </div>
-                <>
-                  {/* Filter icon */}
-                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
-                    <Icon
-                      icon='heroicons:funnel'
-                      className='text-white'
-                      width={24}
-                      height={24}
-                    />
                   </div>
+                </div>
 
-                  {/* Empty state text */}
+                {/* Empty state text */}
-                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                <h3 className='text-[#18181B]/50 font-semibold text-[14px] mb-[4px]'>
-                    No Filters Selected
+                  No Filters Selected
-                  </h3>
+                </h3>
-                  <p className='text-gray-500 text-sm text-center max-w-xs'>
+                <p className='text-[#18181B]/50 text-[12px] text-center max-w-xs'>
-                    Please choose filters to narrow down your results and make
+                  Please choose filters to narrow down your results and make
-                    your search easier.
+                  your search easier.
-                  </p>
+                </p>
-                </>
+              </>
-              )}
+            )}
-              {meta?.filters && (
+            {meta?.filters && (
-                <>
+              <>
-                  {/* Filter icon */}
+                {/* Filter icon */}
-                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                <div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
+                  <div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
                     <Icon
                       icon='heroicons:chart-bar'
                       className='text-white'
-                      width={24}
+                      width={20}
-                      height={24}
+                      height={20}
                     />
                   </div>
+                </div>
 
-                  {/* Empty state text */}
+                {/* Empty state text */}
-                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                <h3 className='text-gray-900 font-semibold text-base mb-2'>
-                    Data Not Yet Available
+                  Data Not Yet Available
-                  </h3>
+                </h3>
-                  <p className='text-gray-500 text-sm text-center max-w-xs'>
+                <p className='text-gray-500 text-sm text-center max-w-xs'>
-                    Please change your filters to get the data.
+                  Please change your filters to get the data.
-                  </p>
+                </p>
-                </>
+              </>
-              )}
+            )}
+          </div>
+
+          <div className='flex flex-row w-full items-center gap-[16px]'>
+            <div className='flex-1 h-full min-w-[16px]'>
+              <div className='h-[114px] w-[16x] bg-[#18181B]/4 rounded-[4px]'></div>
             </div>
-
+            <div className='w-full grid grid-cols-1 gap-y-[53px] mb-[8px]'>
-            {/* Placeholder for chart height */}
+              {[1, 2, 3, 4].map((item) => (
-            <div className='h-64'></div>
-
-            {/* X-axis skeleton (bottom) */}
-            <div className='flex justify-between pt-4 border-t border-gray-100'>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
                 <div
                   key={item}
-                  className='h-4 w-8 bg-gray-100 rounded animate-pulse'
+                  className='flex items-center w-full h-[16px] gap-[16px]'
-                ></div>
+                >
+                  <div className='h-[16px] w-[24px] bg-[#18181B]/4 rounded-[4px]'></div>
+                  <div className='h-[1px] w-full bg-[#18181B]/4 rounded-[4px]'></div>
+                </div>
               ))}
             </div>
           </div>
+
+          {/* X-axis skeleton (bottom) */}
+          <div className='grid grid-cols-10 gap-[60px] mt-[16px] ps-[52px] sm:ps-[104px] overflow-x-hidden'>
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
+              <div
+                key={item}
+                className='h-[16px] w-[37px] bg-[#18181B]/4 rounded-[4px]'
+              ></div>
+            ))}
+          </div>
+          <div className='flex justify-center pt-[16px] ps-[52px] sm:ps-[104px]'>
+            <div className='h-[16px] w-[114px] bg-[#18181B]/4 rounded-[4px]'></div>
+          </div>
         </div>
       </div>
     </div>

src/stores/ui/slices/navbar.slice.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { StateCreator } from 'zustand';
+import { UIStore } from '@/types/stores';
+
+type NavbarActionsSlice = {
+  navbarActions: ReactNode | null;
+  setNavbarActions: (actions: ReactNode) => void;
+  clearNavbarActions: () => void;
+};
+
+export const createNavbarActionsSlice: StateCreator<
+  UIStore,
+  [],
+  [],
+  NavbarActionsSlice
+> = (set) => ({
+  navbarActions: null,
+  setNavbarActions: (actions) => set({ navbarActions: actions }),
+  clearNavbarActions: () => set({ navbarActions: null }),
+});

src/stores/ui/ui.store.ts

@@ -7,6 +7,7 @@ import { UIStore } from '@/types/stores';
 import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
 import { createDrawerUISlice } from '@/stores/ui/slices/drawer.slice';
 import { createTableUISlice } from '@/stores/ui/slices/table.slice';
+import { createNavbarActionsSlice } from '@/stores/ui/slices/navbar.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
@@ -15,6 +16,7 @@ export const useUiStore = create<UIStore>()(
         ...createMainUiSlice(...args),
         ...createDrawerUISlice(...args),
         ...createTableUISlice(...args),
+        ...createNavbarActionsSlice(...args),
       }),
       {
         name: 'ui-cache',

src/types/stores.d.ts

@@ -32,7 +32,17 @@ type TableUISlice = {
   resetSearchValue: () => void;
 };
 
-export type UIStore = MainUiSlice & DrawerUISlice & TableUISlice;
+// Navbar Actions Slice
+type NavbarActionsSlice = {
+  navbarActions: ReactNode | null;
+  setNavbarActions: (actions: ReactNode) => void;
+  clearNavbarActions: () => void;
+};
+
+export type UIStore = MainUiSlice &
+  DrawerUISlice &
+  TableUISlice &
+  NavbarActionsSlice;
 
 type ProductionStandardFormSlice = {
   formData: {