update sync data from site dashboard and testing closing cycles

components/feedSack/InitialBalanceComparison.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
-import type { InitialBalanceResult } from '../../types/api.ts';
 import { formatNumber } from '../../utils/format.ts';
 
 interface InitialBalanceComparisonProps {
-  result: InitialBalanceResult;
+  date: string;
+  manual: number;
+  iot: number | null;
+  accuracy: number | null;
+  syncError?: string | null;
   loading?: boolean;
 }
 
 const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
-  result,
+  date,
+  manual,
+  iot,
+  accuracy,
+  syncError = null,
   loading = false,
 }) => {
-  const accuracy = result.accuracy;
   const accuracyLabel = accuracy == null ? 'N/A' : `${formatNumber(accuracy, 1)}%`;
   const accuracyColor =
     accuracy == null
@@ -25,18 +31,18 @@ const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
   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...' : ''}
+        Perbandingan {date}
+        {loading ? ' · memuat...' : ''}
       </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>
+          <p className="text-2xl font-bold text-gray-800">{formatNumber(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`}
+            {iot == null ? 'N/A' : `${formatNumber(iot)} karung`}
           </p>
         </div>
         <div className="rounded-lg bg-white border border-gray-200 p-3">
@@ -44,9 +50,9 @@ const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
           <p className={`text-2xl font-bold ${accuracyColor}`}>{accuracyLabel}</p>
         </div>
       </div>
-      {result.sync_error && (
+      {syncError && (
         <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}
+          Sinkron IoT di site: {syncError}
         </p>
       )}
     </div>