first commit

components/dashboard/charts/simple-bar-chart.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { 
+  BarChart, 
+  Bar, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer 
+} from "recharts";
+
+interface SimpleBarChartProps {
+  title: string;
+  data: Array<{
+    name: string;
+    value: number;
+  }>;
+  color?: string;
+}
+
+export function SimpleBarChart({ title, data, color = "hsl(var(--primary))" }: SimpleBarChartProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <ResponsiveContainer width="100%" height={200}>
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted/20" />
+            <XAxis 
+              dataKey="name" 
+              axisLine={false}
+              tickLine={false}
+              className="text-xs fill-muted-foreground"
+            />
+            <YAxis 
+              axisLine={false}
+              tickLine={false}
+              className="text-xs fill-muted-foreground"
+            />
+            <Tooltip 
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+                fontSize: '12px'
+              }}
+            />
+            <Bar 
+              dataKey="value" 
+              fill={color}
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}