Get frontend dashboard/analytics mostly loading data again

This commit is contained in:
2025-04-08 00:02:43 -04:00
parent 43f76e4ac0
commit f271f3aae4
8 changed files with 575 additions and 613 deletions

View File

@@ -38,21 +38,22 @@ export function CategoryPerformance() {
const rawData = await response.json();
return {
performance: rawData.performance.map((item: any) => ({
...item,
categoryPath: item.categoryPath || item.category,
category: item.category || '',
categoryPath: item.categoryPath || item.categorypath || item.category || '',
revenue: Number(item.revenue) || 0,
profit: Number(item.profit) || 0,
growth: Number(item.growth) || 0,
productCount: Number(item.productCount) || 0
productCount: Number(item.productCount) || Number(item.productcount) || 0
})),
distribution: rawData.distribution.map((item: any) => ({
...item,
categoryPath: item.categoryPath || item.category,
category: item.category || '',
categoryPath: item.categoryPath || item.categorypath || item.category || '',
value: Number(item.value) || 0
})),
trends: rawData.trends.map((item: any) => ({
...item,
categoryPath: item.categoryPath || item.category,
category: item.category || '',
categoryPath: item.categoryPath || item.categorypath || item.category || '',
month: item.month || '',
sales: Number(item.sales) || 0
}))
};

View File

@@ -25,41 +25,91 @@ interface PriceData {
}
export function PriceAnalysis() {
const { data, isLoading } = useQuery<PriceData>({
const { data, isLoading, error } = 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');
try {
const response = await fetch(`${config.apiUrl}/analytics/pricing`);
if (!response.ok) {
throw new Error(`Failed to fetch: ${response.status}`);
}
const rawData = await response.json();
if (!rawData || !rawData.pricePoints) {
return {
pricePoints: [],
elasticity: [],
recommendations: []
};
}
return {
pricePoints: (rawData.pricePoints || []).map((item: any) => ({
price: Number(item.price) || 0,
salesVolume: Number(item.salesVolume || item.salesvolume) || 0,
revenue: Number(item.revenue) || 0,
category: item.category || ''
})),
elasticity: (rawData.elasticity || []).map((item: any) => ({
date: item.date || '',
price: Number(item.price) || 0,
demand: Number(item.demand) || 0
})),
recommendations: (rawData.recommendations || []).map((item: any) => ({
product: item.product || '',
currentPrice: Number(item.currentPrice || item.currentprice) || 0,
recommendedPrice: Number(item.recommendedPrice || item.recommendedprice) || 0,
potentialRevenue: Number(item.potentialRevenue || item.potentialrevenue) || 0,
confidence: Number(item.confidence) || 0
}))
};
} catch (err) {
console.error('Error fetching price data:', err);
throw err;
}
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
}))
};
},
retry: 1
});
if (isLoading || !data) {
if (isLoading) {
return <div>Loading price analysis...</div>;
}
if (error || !data) {
return (
<Card className="mb-4">
<CardHeader>
<CardTitle>Price Analysis</CardTitle>
</CardHeader>
<CardContent>
<p className="text-red-500">
Unable to load price analysis. The price metrics may need to be set up in the database.
</p>
</CardContent>
</Card>
);
}
// Early return if no data to display
if (
data.pricePoints.length === 0 &&
data.elasticity.length === 0 &&
data.recommendations.length === 0
) {
return (
<Card className="mb-4">
<CardHeader>
<CardTitle>Price Analysis</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground">
No price data available. This may be because the price metrics haven't been calculated yet.
</p>
</CardContent>
</Card>
);
}
return (
<div className="grid gap-4">
<div className="grid gap-4 md:grid-cols-2">

View File

@@ -38,22 +38,23 @@ export function ProfitAnalysis() {
const rawData = await response.json();
return {
byCategory: rawData.byCategory.map((item: any) => ({
...item,
categoryPath: item.categoryPath || item.category,
profitMargin: Number(item.profitMargin) || 0,
category: item.category || '',
categoryPath: item.categorypath || item.category || '',
profitMargin: item.profitmargin !== null ? 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,
date: item.date || '',
profitMargin: item.profitmargin !== null ? Number(item.profitmargin) : 0,
revenue: Number(item.revenue) || 0,
cost: Number(item.cost) || 0
})),
topProducts: rawData.topProducts.map((item: any) => ({
...item,
categoryPath: item.categoryPath || item.category,
profitMargin: Number(item.profitMargin) || 0,
product: item.product || '',
category: item.category || '',
categoryPath: item.categorypath || item.category || '',
profitMargin: item.profitmargin !== null ? Number(item.profitmargin) : 0,
revenue: Number(item.revenue) || 0,
cost: Number(item.cost) || 0
}))

View File

@@ -28,42 +28,93 @@ interface StockData {
}
export function StockAnalysis() {
const { data, isLoading } = useQuery<StockData>({
const { data, isLoading, error } = 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');
try {
const response = await fetch(`${config.apiUrl}/analytics/stock`);
if (!response.ok) {
throw new Error(`Failed to fetch: ${response.status}`);
}
const rawData = await response.json();
if (!rawData || !rawData.turnoverByCategory) {
return {
turnoverByCategory: [],
stockLevels: [],
criticalItems: []
};
}
return {
turnoverByCategory: (rawData.turnoverByCategory || []).map((item: any) => ({
category: item.category || '',
turnoverRate: Number(item.turnoverRate || item.turnoverrate) || 0,
averageStock: Number(item.averageStock || item.averagestock) || 0,
totalSales: Number(item.totalSales || item.totalsales) || 0
})),
stockLevels: (rawData.stockLevels || []).map((item: any) => ({
date: item.date || '',
inStock: Number(item.inStock || item.instock) || 0,
lowStock: Number(item.lowStock || item.lowstock) || 0,
outOfStock: Number(item.outOfStock || item.outofstock) || 0
})),
criticalItems: (rawData.criticalItems || []).map((item: any) => ({
product: item.product || '',
sku: item.sku || '',
stockQuantity: Number(item.stockQuantity || item.stockquantity) || 0,
reorderPoint: Number(item.reorderPoint || item.reorderpoint) || 0,
turnoverRate: Number(item.turnoverRate || item.turnoverrate) || 0,
daysUntilStockout: Number(item.daysUntilStockout || item.daysuntilstockout) || 0
}))
};
} catch (err) {
console.error('Error fetching stock data:', err);
throw err;
}
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
}))
};
},
retry: 1
});
if (isLoading || !data) {
if (isLoading) {
return <div>Loading stock analysis...</div>;
}
if (error || !data) {
return (
<Card className="mb-4">
<CardHeader>
<CardTitle>Stock Analysis</CardTitle>
</CardHeader>
<CardContent>
<p className="text-red-500">
Unable to load stock analysis. The stock metrics may need to be set up in the database.
</p>
</CardContent>
</Card>
);
}
// Early return if no data to display
if (
data.turnoverByCategory.length === 0 &&
data.stockLevels.length === 0 &&
data.criticalItems.length === 0
) {
return (
<Card className="mb-4">
<CardHeader>
<CardTitle>Stock Analysis</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground">
No stock data available. This may be because the stock metrics haven't been calculated yet.
</p>
</CardContent>
</Card>
);
}
const getStockStatus = (daysUntilStockout: number) => {
if (daysUntilStockout <= 7) {
return <Badge variant="destructive">Critical</Badge>;

View File

@@ -58,22 +58,22 @@ export function VendorPerformance() {
// Create a complete structure even if some parts are missing
const data: VendorData = {
performance: rawData.performance.map((vendor: any) => ({
vendor: vendor.vendor,
salesVolume: Number(vendor.salesVolume) || 0,
profitMargin: Number(vendor.profitMargin) || 0,
stockTurnover: Number(vendor.stockTurnover) || 0,
vendor: vendor.vendor || '',
salesVolume: vendor.salesVolume !== null ? Number(vendor.salesVolume) : 0,
profitMargin: vendor.profitMargin !== null ? Number(vendor.profitMargin) : 0,
stockTurnover: vendor.stockTurnover !== null ? Number(vendor.stockTurnover) : 0,
productCount: Number(vendor.productCount) || 0,
growth: Number(vendor.growth) || 0
growth: vendor.growth !== null ? Number(vendor.growth) : 0
})),
comparison: rawData.comparison?.map((vendor: any) => ({
vendor: vendor.vendor,
salesPerProduct: Number(vendor.salesPerProduct) || 0,
averageMargin: Number(vendor.averageMargin) || 0,
vendor: vendor.vendor || '',
salesPerProduct: vendor.salesPerProduct !== null ? Number(vendor.salesPerProduct) : 0,
averageMargin: vendor.averageMargin !== null ? Number(vendor.averageMargin) : 0,
size: Number(vendor.size) || 0
})) || [],
trends: rawData.trends?.map((vendor: any) => ({
vendor: vendor.vendor,
month: vendor.month,
vendor: vendor.vendor || '',
month: vendor.month || '',
sales: Number(vendor.sales) || 0
})) || []
};