63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { formatNumber } from '../../utils/format.ts';
|
|
|
|
interface InitialBalanceComparisonProps {
|
|
date: string;
|
|
manual: number;
|
|
iot: number | null;
|
|
accuracy: number | null;
|
|
syncError?: string | null;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
|
|
date,
|
|
manual,
|
|
iot,
|
|
accuracy,
|
|
syncError = null,
|
|
loading = false,
|
|
}) => {
|
|
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 {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(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">
|
|
{iot == null ? 'N/A' : `${formatNumber(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>
|
|
{syncError && (
|
|
<p className="mt-3 text-xs text-yellow-700 bg-yellow-50 border border-yellow-200 rounded-lg p-2">
|
|
Sinkron IoT di site: {syncError}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InitialBalanceComparison;
|