fix feed use chart and add feed out on chart

components/Dashboard.tsx

@@ -118,7 +118,7 @@ const Dashboard: React.FC<Props> = ({ setView }) => {
       {
         key: 'karung',
         title: 'Karung Dituang',
-        value: karung?.out_today ?? karung?.feed_use_today ?? null,
+        value: karung?.feed_use_today ?? karung?.out_today ?? null,
         unit: 'karung',
         icon: '🛢️',
         status: karung ? 'ok' : 'na',

components/feedSack/FeedTrendChart.tsx

@@ -21,7 +21,7 @@ const FeedTrendChart: React.FC<FeedTrendChartProps> = ({ rows, cycleStartDate, c
   const chartData = useMemo(() => {
     const cycleStart = new Date(`${cycleStartDate}T00:00:00`);
 
-    const dailyData: { label: string; masuk: number; dituang: number }[] = [];
+    const dailyData: { label: string; masuk: number; dituang: number; keluar: number }[] = [];
     for (let d = 0; d <= currentDay; d++) {
       const date = new Date(cycleStart);
       date.setDate(cycleStart.getDate() + d);
@@ -29,14 +29,16 @@ const FeedTrendChart: React.FC<FeedTrendChartProps> = ({ rows, cycleStartDate, c
         label: date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' }),
         masuk: 0,
         dituang: 0,
+        keluar: 0,
       });
     }
 
-    const byKey = new Map<string, { masuk: number; dituang: number }>();
+    const byKey = new Map<string, { masuk: number; dituang: number; keluar: number }>();
     for (const row of rows) {
-      const bucket = byKey.get(row.date) ?? { masuk: 0, dituang: 0 };
+      const bucket = byKey.get(row.date) ?? { masuk: 0, dituang: 0, keluar: 0 };
       bucket.masuk += row.in_today;
-      bucket.dituang += row.out_today;
+      bucket.dituang += row.feed_use_today ?? 0;
+      bucket.keluar += row.out_today ?? 0;
       byKey.set(row.date, bucket);
     }
 
@@ -51,12 +53,19 @@ const FeedTrendChart: React.FC<FeedTrendChartProps> = ({ rows, cycleStartDate, c
       if (bucket && entry) {
         entry.masuk = bucket.masuk;
         entry.dituang = bucket.dituang;
+        entry.keluar = bucket.keluar;
       }
     }
 
     return dailyData;
   }, [rows, cycleStartDate, currentDay]);
 
+  const seriesLabel = (name: string) => {
+    if (name === 'masuk') return 'Karung Masuk';
+    if (name === 'dituang') return 'Karung Dituang';
+    return 'Karung Keluar';
+  };
+
   return (
     <div className="bg-white p-6 rounded-xl shadow-sm">
       <h2 className="text-xl font-bold text-gray-800 mb-4">Tren Harian Karung IOT</h2>
@@ -81,15 +90,14 @@ const FeedTrendChart: React.FC<FeedTrendChartProps> = ({ rows, cycleStartDate, c
               }}
               formatter={(value: unknown, name: unknown) => [
                 `${Number(value ?? 0)} karung`,
-                name === 'masuk' ? 'Karung Masuk' : 'Karung Dituang',
+                seriesLabel(String(name)),
               ]}
               labelFormatter={(label) => `Tanggal: ${label}`}
             />
-            <Legend
+            <Legend formatter={(value) => seriesLabel(String(value))} />
-              formatter={(value) => (value === 'masuk' ? 'Karung Masuk' : 'Karung Dituang')}
+            <Bar dataKey="masuk" name="masuk" fill="#2563eb" barSize={8} />
-            />
+            <Bar dataKey="dituang" name="dituang" fill="#ea580c" barSize={8} />
-            <Bar dataKey="masuk" name="masuk" fill="#3b82f6" barSize={8} />
+            <Bar dataKey="keluar" name="keluar" fill="#dc2626" barSize={8} />
-            <Bar dataKey="dituang" name="dituang" fill="#dc2626" barSize={8} />
           </BarChart>
         </ResponsiveContainer>
       </div>