refactor(FE): Add wrapperContent and refactor uniformity charts

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/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
-        <Card
+        variant='bordered'
-          variant='bordered'
+        className={{
-          title='Weekly Performance ⓘ'
+          wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
-          className={{
+          body:
-            wrapper: 'xl:col-span-1 2xl:col-span-1 w-full rounded-xl',
+            shouldShowEmptyState || !uniformityData || !gaugeChartData
-            body: 'h-110 p-4',
+              ? '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>
   );
 };

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