first commit

components/counting/PopulationTrendChart.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { formatNumber } from '../../utils/format.ts';
+
+export type PopulationPoint = {
+  date: string;
+  population: number;
+  chickenCount?: number;
+};
+
+type Props = {
+  data: PopulationPoint[];
+  title?: string;
+};
+
+function yTick(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}jt`;
+  if (value >= 1_000) return `${Math.round(value / 1_000)}rb`;
+  return `${value}`;
+}
+
+const PopulationTrendChart: React.FC<Props> = ({ data, title = 'Tren Populasi' }) => {
+  if (!data || data.length === 0) {
+    return (
+      <div className="bg-white p-6 rounded-xl shadow-sm">
+        <h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>
+        <div className="h-64 flex items-center justify-center text-gray-400">
+          <div className="text-center">
+            <i className="fa-solid fa-chart-line text-4xl mb-2"></i>
+            <p>Tidak ada data tersedia</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-sm">
+      <h3 className="text-lg font-bold text-gray-800 mb-2">{title}</h3>
+
+      {/* Legend: explicit color explanation */}
+      <div className="flex flex-wrap items-center gap-x-5 gap-y-2 mb-3 text-xs">
+        <span className="inline-flex items-center gap-2">
+          <span className="inline-block w-5 h-[3px] rounded-full bg-red-500"></span>
+          <span className="font-semibold text-red-700">Populasi (Stock Akhir Manual)</span>
+        </span>
+        <span className="inline-flex items-center gap-2">
+          <span className="inline-block w-5 h-[3px] rounded-full bg-blue-500"></span>
+          <span className="font-semibold text-blue-700">Chicken Counting (IOT)</span>
+        </span>
+      </div>
+
+      <div className="h-64">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
+            <XAxis
+              dataKey="date"
+              fontSize={11}
+              tick={{ fill: '#6b7280' }}
+              interval="preserveStartEnd"
+            />
+            <YAxis fontSize={11} tick={{ fill: '#6b7280' }} tickFormatter={yTick} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                border: '1px solid #e0e0e0',
+                borderRadius: '8px',
+                padding: '8px 12px',
+              }}
+              formatter={(value, name) => {
+                const num = Number(value ?? 0);
+                return [num === 0 ? '0' : formatNumber(num, 0), name];
+              }}
+              labelStyle={{ fontWeight: 600, marginBottom: '4px' }}
+            />
+            <Line
+              type="monotone"
+              dataKey="population"
+              stroke="#ef4444"
+              strokeWidth={2.5}
+              name="Populasi (Stock Akhir Manual)"
+              dot={{ r: 3, fill: '#ef4444' }}
+              activeDot={{ r: 5, strokeWidth: 2, stroke: '#fff' }}
+            />
+            <Line
+              type="monotone"
+              dataKey="chickenCount"
+              stroke="#3b82f6"
+              strokeWidth={2.5}
+              name="Chicken Counting (IOT)"
+              dot={{ r: 3, fill: '#3b82f6' }}
+              activeDot={{ r: 5, strokeWidth: 2, stroke: '#fff' }}
+              connectNulls={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      <p className="mt-3 text-xs text-gray-500">
+        <i className="fa-solid fa-circle-info mr-1 text-gray-400"></i>
+        Garis <span className="font-semibold text-red-700">merah</span> = populasi hasil perhitungan
+        manual (stock akhir), garis <span className="font-semibold text-blue-700">biru</span> =
+        hasil hitung otomatis sensor IOT. Semakin berdekatan kedua garis, semakin akurat hitungan
+        IOT.
+      </p>
+    </div>
+  );
+};
+
+export default PopulationTrendChart;