import React, { useState, useEffect } from 'react';
import {
LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
Legend, ResponsiveContainer, PieChart, Pie, Cell
} from 'recharts';
const InventoryAnalyticsDashboard = () => {
const [timeRange, setTimeRange] = useState('week');
// Sample data - in a real app, this would come from your API
const salesData = [
{ date: 'Mon', sales: 4000, stock: 2400 },
{ date: 'Tue', sales: 3000, stock: 1398 },
{ date: 'Wed', sales: 2000, stock: 9800 },
{ date: 'Thu', sales: 2780, stock: 3908 },
{ date: 'Fri', sales: 1890, stock: 4800 },
{ date: 'Sat', sales: 2390, stock: 3800 },
{ date: 'Sun', sales: 3490, stock: 4300 }
];
const categoryData = [
{ name: 'Electronics', value: 400 },
{ name: 'Clothing', value: 300 },
{ name: 'Books', value: 300 },
{ name: 'Food', value: 200 }
];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
const MetricCard = ({ title, value, change, isPositive }) => (
);
return (
`${name} ${(percent * 100).toFixed(0)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{categoryData.map((entry, index) => (
|
))}
);
};
export default InventoryAnalyticsDashboard;
{title}
{value}
{isPositive ? '+' : ''}{change}%
Post a Comment