refactor(FE): Handle ideal/outside ranges in uniformity tooltip

src/components/pages/production/uniformity/UniformityChart.tsx

@@ -39,9 +39,8 @@ const UniformityChart = ({
       name: range.range,
       uv: range.bird_count,
       isIdeal: range.is_ideal_range,
-      idealCount: range.is_ideal_range
-        ? weekData.ideal_range.total_ideal_birds
-        : undefined,
+      idealRange: range.ideal_range,
+      outsideRange: range.outside_range,
     }));
   }, [chartData]);
 

src/components/pages/production/uniformity/chart/UniformityBarChart.tsx

@@ -27,7 +27,8 @@ interface BarChartData {
   name: string;
   uv: number;
   isIdeal?: boolean;
-  idealCount?: number;
+  idealRange?: string;
+  outsideRange?: string;
 }
 
 interface UniformityBarChartProps {
@@ -40,30 +41,117 @@ function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
     const chartData = data.payload as BarChartData;
     const labelStr = String(label);
 
-    if (chartData.isIdeal && chartData.idealCount !== undefined) {
+    // If the range has both ideal and outside ranges (like 340-344)
+    if (chartData.idealRange && chartData.outsideRange) {
+      return (
+        <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
+          <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
+          <div className='flex flex-col gap-2 mt-2'>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
+                <span className='text-sm'>Ideal</span>
+              </div>
+              <span className='text-sm font-medium'>
+                {chartData.idealRange}
+              </span>
+            </div>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <div className='w-5 h-5 bg-[#EF4444] rounded-md'></div>
+                <span className='text-sm'>Outside</span>
+              </div>
+              <span className='text-sm font-medium'>
+                {chartData.outsideRange}
+              </span>
+            </div>
+            <div className='border-t border-white/20 pt-2 mt-1'>
+              <div className='flex items-center justify-between'>
+                <span className='text-white/70 text-sm'>Total Birds:</span>
+                <span className='font-semibold'>{payload[0].value}</span>
+              </div>
+            </div>
+            <div className='text-center text-xs text-white/50'>{labelStr}</div>
+          </div>
+        </div>
+      );
+    }
+
+    // If the range has only ideal range
+    if (chartData.idealRange) {
       return (
         <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
           <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
           <div className='flex items-center gap-2 mt-2 justify-between'>
             <div className='flex items-center gap-2'>
               <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
-              {chartData.idealCount} of Birds
+              <span className='text-sm'>Ideal</span>
             </div>
-            <span>{labelStr}</span>
+            <span className='text-sm font-medium'>{chartData.idealRange}</span>
+          </div>
+          <div className='border-t border-white/20 pt-2 mt-2'>
+            <div className='flex items-center justify-between'>
+              <span className='text-white/70 text-sm'>Birds:</span>
+              <span className='font-semibold'>{payload[0].value}</span>
+            </div>
+          </div>
+          <div className='text-center text-xs text-white/50 mt-1'>
+            {labelStr}
           </div>
         </div>
       );
     }
 
+    // If the range has only outside range
+    if (chartData.outsideRange) {
+      return (
+        <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
+          <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
+          <div className='flex items-center gap-2 mt-2 justify-between'>
+            <div className='flex items-center gap-2'>
+              <div className='w-5 h-5 bg-[#EF4444] rounded-md'></div>
+              <span className='text-sm'>Outside</span>
+            </div>
+            <span className='text-sm font-medium'>
+              {chartData.outsideRange}
+            </span>
+          </div>
+          <div className='border-t border-white/20 pt-2 mt-2'>
+            <div className='flex items-center justify-between'>
+              <span className='text-white/70 text-sm'>Birds:</span>
+              <span className='font-semibold'>{payload[0].value}</span>
+            </div>
+          </div>
+          <div className='text-center text-xs text-white/50 mt-1'>
+            {labelStr}
+          </div>
+        </div>
+      );
+    }
+
+    // Fallback for backward compatibility
     return (
       <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
         <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
         <div className='flex items-center gap-2 mt-2 justify-between'>
           <div className='flex items-center gap-2'>
-            <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
-            {payload[0].value} of Birds
+            <div
+              className='w-5 h-5 rounded-md'
+              style={{
+                backgroundColor: chartData.isIdeal ? '#0069E0' : '#EF4444',
+              }}
+            ></div>
+            <span className='text-sm'>
+              {chartData.isIdeal ? 'Ideal' : 'Outside'}
+            </span>
+          </div>
+          <span className='text-sm font-medium'>{labelStr}</span>
+        </div>
+        <div className='border-t border-white/20 pt-2 mt-2'>
+          <div className='flex items-center justify-between'>
+            <span className='text-white/70 text-sm'>Birds:</span>
+            <span className='font-semibold'>{payload[0].value}</span>
           </div>
-          <span>{labelStr}</span>
         </div>
       </div>
     );

src/types/api/production/uniformity.d.ts

@@ -8,6 +8,8 @@ export type WeightDistributionRange = {
   max_weight: number;
   bird_count: number;
   is_ideal_range: boolean;
+  ideal_range?: string;
+  outside_range?: string;
 };
 
 export type IdealRange = {