first commit

components/feedSack/KarungDituangTodayCard.tsx

@@ -0,0 +1,71 @@
+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;