first commit

components/counting/CountingAccuracyWarningBanner.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { CountingAccuracyWarning } from '../../utils/countingAccuracyWarning.ts';
+import { formatNumber } from '../../utils/format.ts';
+
+type Props = {
+  warning: CountingAccuracyWarning;
+};
+
+const CountingAccuracyWarningBanner: React.FC<Props> = ({ warning }) => {
+  const isOver = warning.direction === 'over';
+  const title = isOver
+    ? 'Hitung ayam IoT lebih tinggi dari stock manual'
+    : 'Akurasi hitung ayam IoT rendah (IoT lebih rendah dari stock)';
+  const body = isOver
+    ? 'Manager perlu cek: kemungkinan fraud / ayam baru yang belum tercatat, atau AI overcount; pastikan juga video kamera lengkap dan tidak bermasalah.'
+    : 'Manager perlu cek: video kamera lengkap atau tidak, kemungkinan masalah AI, atau ada selisih stok.';
+
+  return (
+    <div
+      role="alert"
+      className="mb-6 rounded-lg border-l-4 border-amber-500 bg-amber-50 p-4 text-amber-950"
+    >
+      <div className="flex items-start gap-3">
+        <i className="fa-solid fa-triangle-exclamation mt-0.5 text-xl text-amber-600" aria-hidden />
+        <div className="min-w-0 space-y-1">
+          <p className="text-sm font-semibold">{title}</p>
+          <p className="text-sm">
+            Hari {warning.day} · IoT {formatNumber(warning.iotCount, 0)} vs stock{' '}
+            {formatNumber(warning.stockAkhir, 0)} (akurasi {formatNumber(warning.accuracy, 1)}%)
+          </p>
+          <p className="text-sm">{body}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CountingAccuracyWarningBanner;