first commit

components/feedSack/InitialBalanceComparison.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { InitialBalanceResult } from '../../types/api.ts';
+import { formatNumber } from '../../utils/format.ts';
+
+interface InitialBalanceComparisonProps {
+  result: InitialBalanceResult;
+  loading?: boolean;
+}
+
+const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
+  result,
+  loading = false,
+}) => {
+  const accuracy = result.accuracy;
+  const accuracyLabel = accuracy == null ? 'N/A' : `${formatNumber(accuracy, 1)}%`;
+  const accuracyColor =
+    accuracy == null
+      ? 'text-gray-500'
+      : accuracy >= 95
+        ? 'text-green-600'
+        : accuracy >= 80
+          ? 'text-yellow-600'
+          : 'text-red-600';
+
+  return (
+    <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50/50 p-4">
+      <p className="text-sm font-semibold text-gray-800 mb-3">
+        Perbandingan {result.date}
+        {loading ? ' · memuat IoT...' : ''}
+      </p>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-center">
+        <div className="rounded-lg bg-white border border-gray-200 p-3">
+          <p className="text-xs font-semibold text-blue-700">Manual</p>
+          <p className="text-2xl font-bold text-gray-800">{formatNumber(result.manual)} karung</p>
+        </div>
+        <div className="rounded-lg bg-white border border-gray-200 p-3">
+          <p className="text-xs font-semibold text-purple-700">IOT</p>
+          <p className="text-2xl font-bold text-gray-800">
+            {result.iot == null ? 'N/A' : `${formatNumber(result.iot)} karung`}
+          </p>
+        </div>
+        <div className="rounded-lg bg-white border border-gray-200 p-3">
+          <p className="text-xs font-semibold text-gray-600">Akurasi</p>
+          <p className={`text-2xl font-bold ${accuracyColor}`}>{accuracyLabel}</p>
+        </div>
+      </div>
+      {result.sync_error && (
+        <p className="mt-3 text-xs text-yellow-700 bg-yellow-50 border border-yellow-200 rounded-lg p-2">
+          Gagal menarik data IoT dari karung-web-admin: {result.sync_error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default InitialBalanceComparison;