feat(FE-390): slicing UI and API integration for production dashboard

2026-05-24 23:35:45 +00:00 · 2025-12-30 19:29:42 +07:00
parent 2712821f4e
commit 28639516d5
15 changed files with 4059 additions and 19 deletions
@@ -0,0 +1,89 @@
+'use client';
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts';
+import { DashboardProductionEggWeights } from '@/types/api/dashboard/dashboard-production';
+
+interface EggWeightBarChartProps {
+  data?: DashboardProductionEggWeights[];
+}
+
+const EggWeightBarChart = ({ data }: EggWeightBarChartProps) => {
+  // Show loading state if no data
+  if (!data || data.length === 0) {
+    return (
+      <div className='w-full h-full'>
+        <h3 className='text-lg font-semibold mb-4'>
+          Rata-rata Berat Telur (EW)
+        </h3>
+        <div className='flex items-center justify-center h-[350px]'>
+          <p className='text-gray-500'>Memuat data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='w-full h-full'>
+      <h3 className='text-lg font-semibold mb-4'>Rata-rata Berat Telur (EW)</h3>
+      <ResponsiveContainer width='100%' height={350}>
+        <BarChart
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 0,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
+          <XAxis
+            dataKey='flock.name'
+            tick={{ fontSize: 12 }}
+            tickLine={false}
+            axisLine={{ stroke: '#e5e7eb' }}
+          />
+          <YAxis
+            tick={{ fontSize: 12 }}
+            tickLine={false}
+            axisLine={{ stroke: '#e5e7eb' }}
+            domain={[0, 'auto']}
+            label={{
+              value: 'Berat (gram)',
+              angle: -90,
+              position: 'insideLeft',
+              style: { fontSize: 12 },
+            }}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: 'white',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
+              padding: '8px 12px',
+            }}
+            formatter={(value: number | undefined) =>
+              value !== undefined ? [`${value} gram`, ''] : ['', '']
+            }
+            cursor={{ fill: 'rgba(59, 130, 246, 0.1)' }}
+          />
+          <Bar dataKey='weight' radius={[8, 8, 0, 0]}>
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill='#3b82f6' />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default EggWeightBarChart;