Add Oudelaa dashboard API integration

oudelaa_dashboard/components/dashboard/charts.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import type { ChannelPoint, Insight, RevenuePoint } from "@/types";
+
+const pieColors = ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))"];
+
+export function RevenueAreaChart({ data }: { data: RevenuePoint[] }) {
+  return (
+    <div className="h-72 w-full">
+      <ResponsiveContainer>
+        <AreaChart data={data}>
+          <CartesianGrid stroke="rgba(180,150,110,0.14)" vertical={false} />
+          <XAxis dataKey="month" tick={{ fill: "#c6b698", fontSize: 12 }} axisLine={false} tickLine={false} />
+          <YAxis tick={{ fill: "#a79577", fontSize: 12 }} axisLine={false} tickLine={false} />
+          <Tooltip
+            cursor={{ stroke: "rgba(214,170,100,0.35)" }}
+            contentStyle={{ background: "#20160f", border: "1px solid #5e4732", borderRadius: "12px" }}
+          />
+          <Legend />
+          <Area type="monotone" dataKey="revenue" name="الإيراد" stroke="hsl(var(--chart-1))" fill="hsl(var(--chart-1))" fillOpacity={0.2} strokeWidth={2.5} />
+          <Area type="monotone" dataKey="orders" name="الطلبات" stroke="hsl(var(--chart-2))" fill="hsl(var(--chart-2))" fillOpacity={0.16} strokeWidth={2} />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function ChannelPieChart({ data }: { data: ChannelPoint[] }) {
+  return (
+    <div className="h-72 w-full">
+      <ResponsiveContainer>
+        <PieChart>
+          <Tooltip contentStyle={{ background: "#20160f", border: "1px solid #5e4732", borderRadius: "12px" }} />
+          <Pie data={data} dataKey="value" nameKey="name" innerRadius={58} outerRadius={94} paddingAngle={4}>
+            {data.map((entry, index) => (
+              <Cell key={entry.name} fill={pieColors[index % pieColors.length]} />
+            ))}
+          </Pie>
+          <Legend />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function InsightBarChart({ data }: { data: Insight[] }) {
+  return (
+    <div className="h-72 w-full">
+      <ResponsiveContainer>
+        <BarChart data={data}>
+          <CartesianGrid stroke="rgba(180,150,110,0.14)" vertical={false} />
+          <XAxis dataKey="label" tick={{ fill: "#c6b698", fontSize: 12 }} axisLine={false} tickLine={false} />
+          <YAxis tick={{ fill: "#a79577", fontSize: 12 }} axisLine={false} tickLine={false} />
+          <Tooltip contentStyle={{ background: "#20160f", border: "1px solid #5e4732", borderRadius: "12px" }} />
+          <Bar dataKey="value" radius={[8, 8, 0, 0]} fill="hsl(var(--chart-1))" />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}