72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Kpi } from '../../types.ts';
|
|
import { formatNumber } from '../../utils/formatters.ts';
|
|
|
|
interface KarungDituangTodayCardProps {
|
|
karungKpi?: Kpi;
|
|
effectiveDate?: Date;
|
|
}
|
|
|
|
const KarungDituangTodayCard: React.FC<KarungDituangTodayCardProps> = ({
|
|
karungKpi,
|
|
effectiveDate,
|
|
}) => {
|
|
const todayData = useMemo(() => {
|
|
const totalKarung = karungKpi?.value ?? 0;
|
|
const totalKg = totalKarung * 50;
|
|
|
|
return { totalKarung, totalKg };
|
|
}, [karungKpi]);
|
|
|
|
const formatDisplayDate = (date: Date) =>
|
|
date.toLocaleDateString('id-ID', {
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
});
|
|
|
|
const displayDate = effectiveDate ?? new Date();
|
|
|
|
return (
|
|
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl shadow-sm border-2 border-blue-200">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-orange-500 text-white p-3 rounded-lg">
|
|
<i className="fa-solid fa-arrow-up text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-800">Karung Dituang</h2>
|
|
<p className="text-sm text-gray-600">{formatDisplayDate(displayDate)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Today's Usage Display */}
|
|
<div className="bg-white rounded-lg p-6 border border-blue-200">
|
|
<div className="flex items-center justify-center gap-8">
|
|
{/* Karung Count */}
|
|
<div className="text-center">
|
|
<p className="text-sm font-semibold text-gray-600 mb-2">Total Karung</p>
|
|
<p className="text-4xl font-bold text-orange-600">
|
|
{formatNumber(todayData.totalKarung)}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">karung</p>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="h-16 w-px bg-gray-300"></div>
|
|
|
|
{/* Kg Conversion */}
|
|
<div className="text-center">
|
|
<p className="text-sm font-semibold text-gray-600 mb-2">Total Berat</p>
|
|
<p className="text-4xl font-bold text-gray-700">{formatNumber(todayData.totalKg)}</p>
|
|
<p className="text-xs text-gray-400 mt-1">kg</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KarungDituangTodayCard;
|