first commit

components/scheduling/ConsumptionPatternChart.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { ConsumptionPatternPoint } from '../../types';
+
+interface ConsumptionPatternChartProps {
+  data: ConsumptionPatternPoint[];
+}
+
+const ConsumptionPatternChart: React.FC<ConsumptionPatternChartProps> = ({ data }) => {
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-sm">
+      <h2 className="text-xl font-bold mb-4">Pola Konsumsi Harian</h2>
+      <div className="h-64">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
+            <XAxis
+              dataKey="hour"
+              fontSize={12}
+              tick={{ fill: '#6b7280' }}
+              unit=":00"
+              interval={3}
+            />
+            <YAxis fontSize={12} tick={{ fill: '#6b7280' }} unit="%" width={40} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                border: '1px solid #ccc',
+                borderRadius: '8px',
+              }}
+              formatter={(value: number) => [`${value.toFixed(1)}%`, '']}
+            />
+            <Legend wrapperStyle={{ fontSize: '14px' }} verticalAlign="top" align="right" />
+            <Line
+              type="monotone"
+              dataKey="actual"
+              stroke="#ef4444"
+              strokeWidth={2.5}
+              name="Aktual"
+              dot={{ r: 3 }}
+              activeDot={{ r: 5 }}
+              connectNulls
+            />
+            <Line
+              type="monotone"
+              dataKey="predicted"
+              stroke="#8884d8"
+              strokeWidth={2}
+              name="Prediksi AI"
+              strokeDasharray="5 5"
+              dot={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
+
+export default ConsumptionPatternChart;