58 lines
No EOL
1.7 KiB
TypeScript
58 lines
No EOL
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useDashboardData } from "@/hooks/useDashboardData";
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
|
|
export function StockChart() {
|
|
const { monthlyActivityData, loading, error } = useDashboardData();
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card className="col-span-1 lg:col-span-2">
|
|
<CardContent className="h-80 flex items-center justify-center">
|
|
Loading chart data...
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<Card className="col-span-1 lg:col-span-2">
|
|
<CardContent className="h-80 flex items-center justify-center text-red-500">
|
|
Error loading chart: {error}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="col-span-1 lg:col-span-2">
|
|
<CardHeader>
|
|
<CardTitle>Monthly Stock Activity</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={monthlyActivityData}
|
|
margin={{
|
|
top: 5,
|
|
right: 10,
|
|
left: 10,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="stockIn" fill="#82ca9d" name="Stock In" />
|
|
<Bar dataKey="stockOut" fill="#8884d8" name="Stock Out" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |