Add analytics page
This commit is contained in:
@@ -6,6 +6,7 @@ import { Import } from './pages/Import';
|
||||
import { Dashboard } from './pages/Dashboard';
|
||||
import { Orders } from './pages/Orders';
|
||||
import { Settings } from './pages/Settings';
|
||||
import { Analytics } from './pages/Analytics';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
@@ -21,6 +22,7 @@ function App() {
|
||||
<Route path="/products" element={<Products />} />
|
||||
<Route path="/import" element={<Import />} />
|
||||
<Route path="/orders" element={<Orders />} />
|
||||
<Route path="/analytics" element={<Analytics />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Routes>
|
||||
</MainLayout>
|
||||
|
||||
153
inventory/src/components/analytics/CategoryPerformance.tsx
Normal file
153
inventory/src/components/analytics/CategoryPerformance.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, PieChart, Pie, Cell, Legend } from 'recharts';
|
||||
import config from '../../config';
|
||||
|
||||
interface CategoryData {
|
||||
performance: {
|
||||
category: string;
|
||||
revenue: number;
|
||||
profit: number;
|
||||
growth: number;
|
||||
productCount: number;
|
||||
}[];
|
||||
distribution: {
|
||||
category: string;
|
||||
value: number;
|
||||
}[];
|
||||
trends: {
|
||||
category: string;
|
||||
month: string;
|
||||
sales: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
const COLORS = ['#4ade80', '#60a5fa', '#f87171', '#fbbf24', '#a78bfa', '#f472b6'];
|
||||
|
||||
export function CategoryPerformance() {
|
||||
const { data, isLoading } = useQuery<CategoryData>({
|
||||
queryKey: ['category-performance'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${config.apiUrl}/analytics/categories`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch category performance');
|
||||
}
|
||||
const rawData = await response.json();
|
||||
return {
|
||||
performance: rawData.performance.map((item: any) => ({
|
||||
...item,
|
||||
revenue: Number(item.revenue) || 0,
|
||||
profit: Number(item.profit) || 0,
|
||||
growth: Number(item.growth) || 0,
|
||||
productCount: Number(item.productCount) || 0
|
||||
})),
|
||||
distribution: rawData.distribution.map((item: any) => ({
|
||||
...item,
|
||||
value: Number(item.value) || 0
|
||||
}))
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading || !data) {
|
||||
return <div>Loading category performance...</div>;
|
||||
}
|
||||
|
||||
const formatGrowth = (growth: number) => {
|
||||
const value = growth >= 0 ? `+${growth.toFixed(1)}%` : `${growth.toFixed(1)}%`;
|
||||
const color = growth >= 0 ? 'text-green-500' : 'text-red-500';
|
||||
return <span className={color}>{value}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Category Revenue Distribution</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data.distribution}
|
||||
dataKey="value"
|
||||
nameKey="category"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={100}
|
||||
fill="#8884d8"
|
||||
label={(entry) => entry.category}
|
||||
>
|
||||
{data.distribution.map((entry, index) => (
|
||||
<Cell
|
||||
key={entry.category}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`$${value.toLocaleString()}`, 'Revenue']}
|
||||
/>
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Category Growth Rates</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={data.performance}>
|
||||
<XAxis dataKey="category" />
|
||||
<YAxis tickFormatter={(value) => `${value}%`} />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`${value.toFixed(1)}%`, 'Growth Rate']}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="growth"
|
||||
fill="#4ade80"
|
||||
name="Growth Rate"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Category Performance Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.performance.map((category) => (
|
||||
<div key={category.category} className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{category.category}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{category.productCount} products
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 text-right space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
${category.revenue.toLocaleString()} revenue
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
${category.profit.toLocaleString()} profit
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Growth: {formatGrowth(category.growth)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
182
inventory/src/components/analytics/PriceAnalysis.tsx
Normal file
182
inventory/src/components/analytics/PriceAnalysis.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, Tooltip, ZAxis, LineChart, Line } from 'recharts';
|
||||
import config from '../../config';
|
||||
|
||||
interface PriceData {
|
||||
pricePoints: {
|
||||
price: number;
|
||||
salesVolume: number;
|
||||
revenue: number;
|
||||
category: string;
|
||||
}[];
|
||||
elasticity: {
|
||||
date: string;
|
||||
price: number;
|
||||
demand: number;
|
||||
}[];
|
||||
recommendations: {
|
||||
product: string;
|
||||
currentPrice: number;
|
||||
recommendedPrice: number;
|
||||
potentialRevenue: number;
|
||||
confidence: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function PriceAnalysis() {
|
||||
const { data, isLoading } = useQuery<PriceData>({
|
||||
queryKey: ['price-analysis'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${config.apiUrl}/analytics/pricing`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch price analysis');
|
||||
}
|
||||
const rawData = await response.json();
|
||||
return {
|
||||
pricePoints: rawData.pricePoints.map((item: any) => ({
|
||||
...item,
|
||||
price: Number(item.price) || 0,
|
||||
salesVolume: Number(item.salesVolume) || 0,
|
||||
revenue: Number(item.revenue) || 0
|
||||
})),
|
||||
elasticity: rawData.elasticity.map((item: any) => ({
|
||||
...item,
|
||||
price: Number(item.price) || 0,
|
||||
demand: Number(item.demand) || 0
|
||||
})),
|
||||
recommendations: rawData.recommendations.map((item: any) => ({
|
||||
...item,
|
||||
currentPrice: Number(item.currentPrice) || 0,
|
||||
recommendedPrice: Number(item.recommendedPrice) || 0,
|
||||
potentialRevenue: Number(item.potentialRevenue) || 0,
|
||||
confidence: Number(item.confidence) || 0
|
||||
}))
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading || !data) {
|
||||
return <div>Loading price analysis...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Price Point Analysis</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<ScatterChart>
|
||||
<XAxis
|
||||
dataKey="price"
|
||||
name="Price"
|
||||
tickFormatter={(value) => `$${value}`}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey="salesVolume"
|
||||
name="Sales Volume"
|
||||
/>
|
||||
<ZAxis
|
||||
dataKey="revenue"
|
||||
range={[50, 400]}
|
||||
name="Revenue"
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'Price') return [`$${value}`, name];
|
||||
if (name === 'Sales Volume') return [value.toLocaleString(), name];
|
||||
if (name === 'Revenue') return [`$${value.toLocaleString()}`, name];
|
||||
return [value, name];
|
||||
}}
|
||||
/>
|
||||
<Scatter
|
||||
data={data.pricePoints}
|
||||
fill="#a78bfa"
|
||||
name="Products"
|
||||
/>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Price Elasticity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={data.elasticity}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={(value) => new Date(value).toLocaleDateString()}
|
||||
/>
|
||||
<YAxis yAxisId="left" orientation="left" stroke="#a78bfa" />
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
stroke="#4ade80"
|
||||
tickFormatter={(value) => `$${value}`}
|
||||
/>
|
||||
<Tooltip
|
||||
labelFormatter={(label) => new Date(label).toLocaleDateString()}
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'Price') return [`$${value}`, name];
|
||||
return [value.toLocaleString(), name];
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="demand"
|
||||
stroke="#a78bfa"
|
||||
name="Demand"
|
||||
/>
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="monotone"
|
||||
dataKey="price"
|
||||
stroke="#4ade80"
|
||||
name="Price"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Price Optimization Recommendations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.recommendations.map((item) => (
|
||||
<div key={item.product} className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{item.product}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Current Price: ${item.currentPrice.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 text-right space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
Recommended: ${item.recommendedPrice.toFixed(2)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Potential Revenue: ${item.potentialRevenue.toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Confidence: {item.confidence}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
145
inventory/src/components/analytics/ProfitAnalysis.tsx
Normal file
145
inventory/src/components/analytics/ProfitAnalysis.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, LineChart, Line } from 'recharts';
|
||||
import config from '../../config';
|
||||
|
||||
interface ProfitData {
|
||||
byCategory: {
|
||||
category: string;
|
||||
profitMargin: number;
|
||||
revenue: number;
|
||||
cost: number;
|
||||
}[];
|
||||
overTime: {
|
||||
date: string;
|
||||
profitMargin: number;
|
||||
revenue: number;
|
||||
cost: number;
|
||||
}[];
|
||||
topProducts: {
|
||||
product: string;
|
||||
profitMargin: number;
|
||||
revenue: number;
|
||||
cost: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function ProfitAnalysis() {
|
||||
const { data, isLoading } = useQuery<ProfitData>({
|
||||
queryKey: ['profit-analysis'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${config.apiUrl}/analytics/profit`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch profit analysis');
|
||||
}
|
||||
const rawData = await response.json();
|
||||
return {
|
||||
byCategory: rawData.byCategory.map((item: any) => ({
|
||||
...item,
|
||||
profitMargin: Number(item.profitMargin) || 0,
|
||||
revenue: Number(item.revenue) || 0,
|
||||
cost: Number(item.cost) || 0
|
||||
})),
|
||||
overTime: rawData.overTime.map((item: any) => ({
|
||||
...item,
|
||||
profitMargin: Number(item.profitMargin) || 0,
|
||||
revenue: Number(item.revenue) || 0,
|
||||
cost: Number(item.cost) || 0
|
||||
})),
|
||||
topProducts: rawData.topProducts.map((item: any) => ({
|
||||
...item,
|
||||
profitMargin: Number(item.profitMargin) || 0,
|
||||
revenue: Number(item.revenue) || 0,
|
||||
cost: Number(item.cost) || 0
|
||||
}))
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading || !data) {
|
||||
return <div>Loading profit analysis...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profit Margins by Category</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={data.byCategory}>
|
||||
<XAxis dataKey="category" />
|
||||
<YAxis tickFormatter={(value) => `${value}%`} />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`${value.toFixed(1)}%`, 'Profit Margin']}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="profitMargin"
|
||||
fill="#4ade80"
|
||||
name="Profit Margin"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Profit Margin Trend</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={data.overTime}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={(value) => new Date(value).toLocaleDateString()}
|
||||
/>
|
||||
<YAxis tickFormatter={(value) => `${value}%`} />
|
||||
<Tooltip
|
||||
labelFormatter={(label) => new Date(label).toLocaleDateString()}
|
||||
formatter={(value: number) => [`${value.toFixed(1)}%`, 'Profit Margin']}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="profitMargin"
|
||||
stroke="#4ade80"
|
||||
name="Profit Margin"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Top Performing Products by Profit Margin</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.topProducts.map((product) => (
|
||||
<div key={product.product} className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{product.product}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Revenue: ${product.revenue.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 text-right">
|
||||
<p className="text-sm font-medium">
|
||||
{product.profitMargin.toFixed(1)}% margin
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cost: ${product.cost.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
176
inventory/src/components/analytics/StockAnalysis.tsx
Normal file
176
inventory/src/components/analytics/StockAnalysis.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, LineChart, Line } from 'recharts';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import config from '../../config';
|
||||
|
||||
interface StockData {
|
||||
turnoverByCategory: {
|
||||
category: string;
|
||||
turnoverRate: number;
|
||||
averageStock: number;
|
||||
totalSales: number;
|
||||
}[];
|
||||
stockLevels: {
|
||||
date: string;
|
||||
inStock: number;
|
||||
lowStock: number;
|
||||
outOfStock: number;
|
||||
}[];
|
||||
criticalItems: {
|
||||
product: string;
|
||||
sku: string;
|
||||
stockQuantity: number;
|
||||
reorderPoint: number;
|
||||
turnoverRate: number;
|
||||
daysUntilStockout: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function StockAnalysis() {
|
||||
const { data, isLoading } = useQuery<StockData>({
|
||||
queryKey: ['stock-analysis'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${config.apiUrl}/analytics/stock`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch stock analysis');
|
||||
}
|
||||
const rawData = await response.json();
|
||||
return {
|
||||
turnoverByCategory: rawData.turnoverByCategory.map((item: any) => ({
|
||||
...item,
|
||||
turnoverRate: Number(item.turnoverRate) || 0,
|
||||
averageStock: Number(item.averageStock) || 0,
|
||||
totalSales: Number(item.totalSales) || 0
|
||||
})),
|
||||
stockLevels: rawData.stockLevels.map((item: any) => ({
|
||||
...item,
|
||||
inStock: Number(item.inStock) || 0,
|
||||
lowStock: Number(item.lowStock) || 0,
|
||||
outOfStock: Number(item.outOfStock) || 0
|
||||
})),
|
||||
criticalItems: rawData.criticalItems.map((item: any) => ({
|
||||
...item,
|
||||
stockQuantity: Number(item.stockQuantity) || 0,
|
||||
reorderPoint: Number(item.reorderPoint) || 0,
|
||||
turnoverRate: Number(item.turnoverRate) || 0,
|
||||
daysUntilStockout: Number(item.daysUntilStockout) || 0
|
||||
}))
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading || !data) {
|
||||
return <div>Loading stock analysis...</div>;
|
||||
}
|
||||
|
||||
const getStockStatus = (daysUntilStockout: number) => {
|
||||
if (daysUntilStockout <= 7) {
|
||||
return <Badge variant="destructive">Critical</Badge>;
|
||||
}
|
||||
if (daysUntilStockout <= 14) {
|
||||
return <Badge variant="outline">Warning</Badge>;
|
||||
}
|
||||
return <Badge variant="secondary">OK</Badge>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Stock Turnover by Category</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={data.turnoverByCategory}>
|
||||
<XAxis dataKey="category" />
|
||||
<YAxis tickFormatter={(value) => `${value.toFixed(1)}x`} />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`${value.toFixed(1)}x`, 'Turnover Rate']}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="turnoverRate"
|
||||
fill="#fbbf24"
|
||||
name="Turnover Rate"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Stock Level Trends</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={data.stockLevels}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={(value) => new Date(value).toLocaleDateString()}
|
||||
/>
|
||||
<YAxis />
|
||||
<Tooltip
|
||||
labelFormatter={(label) => new Date(label).toLocaleDateString()}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="inStock"
|
||||
stroke="#4ade80"
|
||||
name="In Stock"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="lowStock"
|
||||
stroke="#fbbf24"
|
||||
name="Low Stock"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="outOfStock"
|
||||
stroke="#f87171"
|
||||
name="Out of Stock"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Critical Stock Items</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.criticalItems.map((item) => (
|
||||
<div key={item.sku} className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium">{item.product}</p>
|
||||
{getStockStatus(item.daysUntilStockout)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
SKU: {item.sku}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 text-right space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
{item.stockQuantity} in stock
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Reorder at: {item.reorderPoint}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{item.daysUntilStockout} days until stockout
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
155
inventory/src/components/analytics/VendorPerformance.tsx
Normal file
155
inventory/src/components/analytics/VendorPerformance.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, ScatterChart, Scatter, ZAxis } from 'recharts';
|
||||
import config from '../../config';
|
||||
|
||||
interface VendorData {
|
||||
performance: {
|
||||
vendor: string;
|
||||
salesVolume: number;
|
||||
profitMargin: number;
|
||||
stockTurnover: number;
|
||||
productCount: number;
|
||||
}[];
|
||||
comparison: {
|
||||
vendor: string;
|
||||
salesPerProduct: number;
|
||||
averageMargin: number;
|
||||
size: number;
|
||||
}[];
|
||||
trends: {
|
||||
vendor: string;
|
||||
month: string;
|
||||
sales: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function VendorPerformance() {
|
||||
const { data, isLoading } = useQuery<VendorData>({
|
||||
queryKey: ['vendor-performance'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${config.apiUrl}/analytics/vendors`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch vendor performance');
|
||||
}
|
||||
const rawData = await response.json();
|
||||
return {
|
||||
performance: rawData.performance.map((vendor: any) => ({
|
||||
...vendor,
|
||||
salesVolume: Number(vendor.salesVolume) || 0,
|
||||
profitMargin: Number(vendor.profitMargin) || 0,
|
||||
stockTurnover: Number(vendor.stockTurnover) || 0,
|
||||
productCount: Number(vendor.productCount) || 0
|
||||
})),
|
||||
comparison: rawData.comparison.map((vendor: any) => ({
|
||||
...vendor,
|
||||
salesPerProduct: Number(vendor.salesPerProduct) || 0,
|
||||
averageMargin: Number(vendor.averageMargin) || 0,
|
||||
size: Number(vendor.size) || 0
|
||||
}))
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading || !data) {
|
||||
return <div>Loading vendor performance...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Top Vendors by Sales Volume</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={data.performance}>
|
||||
<XAxis dataKey="vendor" />
|
||||
<YAxis tickFormatter={(value) => `$${(value / 1000).toFixed(0)}k`} />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`$${value.toLocaleString()}`, 'Sales Volume']}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="salesVolume"
|
||||
fill="#60a5fa"
|
||||
name="Sales Volume"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Vendor Performance Matrix</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<ScatterChart>
|
||||
<XAxis
|
||||
dataKey="salesPerProduct"
|
||||
name="Sales per Product"
|
||||
tickFormatter={(value) => `$${(value / 1000).toFixed(0)}k`}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey="averageMargin"
|
||||
name="Average Margin"
|
||||
tickFormatter={(value) => `${value.toFixed(0)}%`}
|
||||
/>
|
||||
<ZAxis
|
||||
dataKey="size"
|
||||
range={[50, 400]}
|
||||
name="Product Count"
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'Sales per Product') return [`$${value.toLocaleString()}`, name];
|
||||
if (name === 'Average Margin') return [`${value.toFixed(1)}%`, name];
|
||||
return [value, name];
|
||||
}}
|
||||
/>
|
||||
<Scatter
|
||||
data={data.comparison}
|
||||
fill="#60a5fa"
|
||||
name="Vendors"
|
||||
/>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Vendor Performance Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.performance.map((vendor) => (
|
||||
<div key={vendor.vendor} className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{vendor.vendor}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{vendor.productCount} products
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 text-right space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
${vendor.salesVolume.toLocaleString()} sales
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{vendor.profitMargin.toFixed(1)}% margin
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{vendor.stockTurnover.toFixed(1)}x turnover
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -31,9 +31,9 @@ const items = [
|
||||
url: "/orders",
|
||||
},
|
||||
{
|
||||
title: "Reports",
|
||||
title: "Analytics",
|
||||
icon: BarChart2,
|
||||
url: "/reports",
|
||||
url: "/analytics",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
112
inventory/src/pages/Analytics.tsx
Normal file
112
inventory/src/pages/Analytics.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
|
||||
import { ProfitAnalysis } from '../components/analytics/ProfitAnalysis';
|
||||
import { VendorPerformance } from '../components/analytics/VendorPerformance';
|
||||
import { StockAnalysis } from '../components/analytics/StockAnalysis';
|
||||
import { PriceAnalysis } from '../components/analytics/PriceAnalysis';
|
||||
import { CategoryPerformance } from '../components/analytics/CategoryPerformance';
|
||||
import config from '../config';
|
||||
|
||||
interface AnalyticsStats {
|
||||
profitMargin: number;
|
||||
averageMarkup: number;
|
||||
stockTurnoverRate: number;
|
||||
vendorCount: number;
|
||||
categoryCount: number;
|
||||
averageOrderValue: number;
|
||||
}
|
||||
|
||||
export function Analytics() {
|
||||
const { data: stats, isLoading: statsLoading } = useQuery<AnalyticsStats>({
|
||||
queryKey: ['analytics-stats'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${config.apiUrl}/analytics/stats`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch analytics stats');
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
});
|
||||
|
||||
if (statsLoading || !stats) {
|
||||
return <div className="p-8">Loading analytics...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 space-y-4 p-8 pt-6">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Analytics</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Overall Profit Margin
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats.profitMargin.toFixed(1)}%
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Average Markup
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats.averageMarkup.toFixed(1)}%
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Stock Turnover Rate
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats.stockTurnoverRate.toFixed(2)}x
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="profit" className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-5 lg:w-[600px]">
|
||||
<TabsTrigger value="profit">Profit</TabsTrigger>
|
||||
<TabsTrigger value="vendors">Vendors</TabsTrigger>
|
||||
<TabsTrigger value="stock">Stock</TabsTrigger>
|
||||
<TabsTrigger value="pricing">Pricing</TabsTrigger>
|
||||
<TabsTrigger value="categories">Categories</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="profit" className="space-y-4">
|
||||
<ProfitAnalysis />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="vendors" className="space-y-4">
|
||||
<VendorPerformance />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="stock" className="space-y-4">
|
||||
<StockAnalysis />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="pricing" className="space-y-4">
|
||||
<PriceAnalysis />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="categories" className="space-y-4">
|
||||
<CategoryPerformance />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user