refactor(FE): Highlight ideal ranges in Uniformity charts

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

@@ -3,6 +3,7 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
+  Cell,
   Rectangle,
   ResponsiveContainer,
   Tooltip,
@@ -25,6 +26,7 @@ interface CustomTooltipProps {
 interface BarChartData {
   name: string;
   uv: number;
+  isIdeal?: boolean;
 }
 
 interface UniformityBarChartProps {
@@ -105,9 +107,6 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
         <Bar
           name='Birds'
           dataKey='uv'
-          fill='#FFFFFF'
-          stroke='#DDD'
-          strokeWidth={2}
           radius={[25, 25, 0, 0]}
           activeBar={
             <Rectangle
@@ -117,7 +116,16 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
               radius={[25, 25, 0, 0]}
             />
           }
-        />
+        >
+          {data.map((entry, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={entry.isIdeal ? 'url(#activeBarGradient)' : '#FFFFFF'}
+              stroke={entry.isIdeal ? '#18181B' : '#DDD'}
+              strokeWidth={entry.isIdeal ? 0 : 2}
+            />
+          ))}
+        </Bar>
       </BarChart>
     </ResponsiveContainer>
   );