feat(FE-316): Add Gauge and Detail Card to Uniformity Chart

src/components/pages/uniformity/UniformityChart.tsx

@@ -1,6 +1,10 @@
+import React from 'react';
 import {
   Bar,
   BarChart,
+  Cell,
+  Pie,
+  PieChart,
   Rectangle,
   ResponsiveContainer,
   Tooltip,
@@ -8,6 +12,8 @@ import {
   YAxis,
 } from 'recharts';
 import Card from '@/components/Card';
+import { Icon } from '@iconify/react';
+import { formatNumber } from '@/lib/helper';
 
 interface Payload {
   value?: number;
@@ -21,8 +27,65 @@ interface CustomTooltipProps {
   label?: string | number;
 }
 
+interface GaugeChartProps {
+  value: number;
+  label: string;
+}
+
+const GaugeChart: React.FC<GaugeChartProps> = ({ value, label }) => {
+  const numberOfSegments = 50;
+  const filledSegments = Math.round((value / 100) * numberOfSegments);
+
+  const data = Array.from({ length: numberOfSegments }, (_, index) => ({
+    name: index,
+    value: 1,
+    filled: index < filledSegments,
+  }));
+
+  const activeColor = '#1890ff';
+  const inactiveColor = '#f0f0f0';
+
+  return (
+    <div className='relative w-full h-full flex flex-col items-center justify-end'>
+      <ResponsiveContainer width='100%' height='100%'>
+        <PieChart>
+          <Pie
+            data={data}
+            cx='50%'
+            cy='70%'
+            startAngle={180}
+            endAngle={0}
+            innerRadius='75%'
+            outerRadius='100%'
+            paddingAngle={2}
+            dataKey='value'
+            stroke='none'
+            isAnimationActive={false}
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={entry.filled ? activeColor : inactiveColor}
+              />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+      <div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center pointer-events-none'>
+        <span className='2xl:text-4xl text-2xl font-bold text-gray-800 mb-4'>
+          {value}%
+        </span>
+        <div className='mt-2 px-4 py-1 bg-gray-100 rounded-full shadow-sm border border-gray-200'>
+          <span className='text-sm font-medium text-gray-700 mb-32'>
+            {label}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const UniformityChart = () => {
-  // #start Uniformity Sample data
   const data = [
     {
       name: '48-52',
@@ -76,7 +139,6 @@ const UniformityChart = () => {
     left: 20,
     bottom: 5,
   };
-  // #end Uniformity Sample data
 
   function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
     if (active && payload && payload.length && label !== undefined) {
@@ -139,8 +201,44 @@ const UniformityChart = () => {
         title='Weekly Performance'
         className={{ wrapper: 'xl:col-span-1 w-full' }}
       >
-        <div className='h-80 flex items-center justify-center text-gray-400'>
-          Weekly Performance Content
+        <div className='flex flex-col'>
+          <div className='h-64 w-full relative flex justify-center'>
+            <GaugeChart value={52} label='Uniformity' />
+          </div>
+          <Card
+            variant='bordered'
+            className={{
+              wrapper: 'w-full',
+            }}
+          >
+            <section className='flex items-center gap-4'>
+              <div className='w-12 h-12 bg-base-200 rounded-lg flex items-center justify-center border border-gray-200 shrink-0'>
+                <Icon
+                  icon='heroicons:calendar-date-range'
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <div className='grid grid-cols-1 min-w-0'>
+                <div className='flex items-center space-x-2 text-gray-500 text-sm mb-1'>
+                  <span className='font-medium truncate'>Kandang Cirangga</span>
+                  <span className='shrink-0'>•</span>
+                  <span className='text-blue-600 font-semibold truncate'>
+                    Week 2
+                  </span>
+                </div>
+                <div className='text-xl font-bold text-gray-800'>
+                  <span className='text-blue-600 break-all'>
+                    {formatNumber(512)}
+                  </span>
+                  <span className='mx-1 text-gray-400 font-normal'>From</span>
+                  <span className='text-gray-500 break-all'>
+                    {formatNumber(1024)}
+                  </span>
+                </div>
+              </div>
+            </section>
+          </Card>
         </div>
       </Card>
     </section>