57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
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;
|