Add/update dashboard components

inventory/package-lock.json

@@ -12,6 +12,7 @@
         "@radix-ui/react-collapsible": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.4",
         "@radix-ui/react-dropdown-menu": "^2.1.4",
+        "@radix-ui/react-progress": "^1.1.1",
         "@radix-ui/react-separator": "^1.1.1",
         "@radix-ui/react-slot": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.2",
@@ -1596,6 +1597,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.1.tgz",
+      "integrity": "sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",

inventory/package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",

inventory/src/components/dashboard/InventoryStats.tsx

@@ -1,124 +1,106 @@
 import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from 'recharts';
 import config from '../../config';
 
-interface CategoryStats {
-  categories: string;
-  count: number;
-}
-
-interface StockLevels {
-  outOfStock: number;
-  lowStock: number;
-  inStock: number;
-  overStock: number;
+interface InventoryMetrics {
+  stockLevels: {
+    category: string;
+    inStock: number;
+    lowStock: number;
+    outOfStock: number;
+  }[];
+  topVendors: {
+    vendor: string;
+    productCount: number;
+    averageStockLevel: number;
+  }[];
+  stockTurnover: {
+    category: string;
+    rate: number;
+  }[];
 }
 
 export function InventoryStats() {
-  const { data: categoryStats, isLoading: categoryLoading, error: categoryError } = useQuery<CategoryStats[]>({
-    queryKey: ['category-stats'],
+  const { data, isLoading, error } = useQuery<InventoryMetrics>({
+    queryKey: ['inventory-metrics'],
     queryFn: async () => {
-      const response = await fetch(`${config.apiUrl}/dashboard/category-stats`);
+      const response = await fetch(`${config.apiUrl}/dashboard/inventory-metrics`);
       if (!response.ok) {
-        throw new Error('Failed to fetch category stats');
+        throw new Error('Failed to fetch inventory metrics');
       }
       return response.json();
     },
   });
 
-  const { data: stockLevels, isLoading: stockLoading, error: stockError } = useQuery<StockLevels>({
-    queryKey: ['stock-levels'],
-    queryFn: async () => {
-      const response = await fetch(`${config.apiUrl}/dashboard/stock-levels`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch stock levels');
-      }
-      return response.json();
-    },
-  });
-
-  if (categoryLoading || stockLoading) {
-    return <div>Loading inventory stats...</div>;
+  if (isLoading) {
+    return <div>Loading inventory metrics...</div>;
   }
 
-  if (categoryError || stockError) {
-    return <div className="text-red-500">Error loading inventory stats</div>;
+  if (error) {
+    return <div className="text-red-500">Error loading inventory metrics</div>;
   }
 
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-      <Card className="col-span-4">
-        <CardHeader>
-          <CardTitle>Products by Category</CardTitle>
-        </CardHeader>
-        <CardContent className="pl-2">
-          <ResponsiveContainer width="100%" height={350}>
-            <BarChart data={categoryStats}>
-              <XAxis
-                dataKey="categories"
-                stroke="#888888"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-              />
-              <YAxis
-                stroke="#888888"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-              />
-              <Bar
-                dataKey="count"
-                fill="hsl(var(--primary))"
-                radius={[4, 4, 0, 0]}
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
-      <div className="col-span-3 grid gap-4">
+    <div className="grid gap-4">
+      <div className="grid gap-4 md:grid-cols-2">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Out of Stock
-            </CardTitle>
+          <CardHeader>
+            <CardTitle>Stock Levels by Category</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{stockLevels?.outOfStock}</div>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={data?.stockLevels}>
+                <XAxis dataKey="category" />
+                <YAxis />
+                <Tooltip />
+                <Bar dataKey="inStock" name="In Stock" fill="#4ade80" />
+                <Bar dataKey="lowStock" name="Low Stock" fill="#fbbf24" />
+                <Bar dataKey="outOfStock" name="Out of Stock" fill="#f87171" />
+              </BarChart>
+            </ResponsiveContainer>
           </CardContent>
         </Card>
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Low Stock
-            </CardTitle>
+          <CardHeader>
+            <CardTitle>Stock Turnover Rate</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{stockLevels?.lowStock}</div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              In Stock
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stockLevels?.inStock}</div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Over Stock
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stockLevels?.overStock}</div>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={data?.stockTurnover}>
+                <XAxis dataKey="category" />
+                <YAxis />
+                <Tooltip />
+                <Bar dataKey="rate" name="Turnover Rate" fill="#60a5fa" />
+              </BarChart>
+            </ResponsiveContainer>
           </CardContent>
         </Card>
       </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Top Vendors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {data?.topVendors.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">
+                  <p className="text-sm font-medium">
+                    Avg. Stock: {vendor.averageStockLevel.toFixed(0)}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 } 

inventory/src/components/dashboard/SalesByCategory.tsx

@@ -0,0 +1,58 @@
+import { useQuery } from '@tanstack/react-query';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import config from '../../config';
+
+interface CategorySales {
+  category: string;
+  total: number;
+  percentage: number;
+}
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
+
+export function SalesByCategory() {
+  const { data, isLoading, error } = useQuery<CategorySales[]>({
+    queryKey: ['sales-by-category'],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/dashboard/sales-by-category`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch category sales');
+      }
+      return response.json();
+    },
+  });
+
+  if (isLoading) {
+    return <div>Loading chart...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500">Error loading category sales</div>;
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <PieChart>
+        <Pie
+          data={data}
+          cx="50%"
+          cy="50%"
+          labelLine={false}
+          outerRadius={80}
+          fill="#8884d8"
+          dataKey="total"
+          nameKey="category"
+          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+        >
+          {data?.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+        <Tooltip
+          formatter={(value: number) => [`$${value.toLocaleString()}`, 'Sales']}
+        />
+        <Legend />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+} 

inventory/src/components/dashboard/TrendingProducts.tsx

@@ -0,0 +1,71 @@
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import config from '../../config';
+
+interface TrendingProduct {
+  product_id: string;
+  title: string;
+  sku: string;
+  total_sales: number;
+  sales_growth: number;
+  stock_quantity: number;
+  image_url: string;
+}
+
+export function TrendingProducts() {
+  const { data, isLoading, error } = useQuery<TrendingProduct[]>({
+    queryKey: ['trending-products'],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/dashboard/trending-products`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch trending products');
+      }
+      return response.json();
+    },
+  });
+
+  if (isLoading) {
+    return <div>Loading trending products...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500">Error loading trending products</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {data?.map((product) => (
+        <Card key={product.product_id}>
+          <CardContent className="p-4">
+            <div className="flex items-center">
+              {product.image_url && (
+                <img
+                  src={product.image_url}
+                  alt={product.title}
+                  className="h-12 w-12 rounded-md object-cover mr-4"
+                />
+              )}
+              <div className="flex-1 space-y-1">
+                <p className="text-sm font-medium leading-none">{product.title}</p>
+                <p className="text-sm text-muted-foreground">SKU: {product.sku}</p>
+                <div className="flex items-center pt-2">
+                  <Progress value={Math.min(100, product.sales_growth)} className="h-2" />
+                  <span className="ml-2 text-sm text-muted-foreground">
+                    {product.sales_growth > 0 ? '+' : ''}{product.sales_growth}% growth
+                  </span>
+                </div>
+              </div>
+              <div className="ml-4 text-right">
+                <p className="text-sm font-medium">${product.total_sales.toLocaleString()}</p>
+                <p className="text-sm text-muted-foreground">
+                  {product.stock_quantity} in stock
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+} 

inventory/src/components/ui/progress.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

inventory/src/components/ui/sheet.tsx

@@ -64,6 +64,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
+      <SheetPrimitive.Title className="sr-only">Sheet</SheetPrimitive.Title>
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>

inventory/src/pages/Dashboard.tsx

@@ -4,6 +4,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Overview } from '@/components/dashboard/Overview';
 import { RecentSales } from '@/components/dashboard/RecentSales';
 import { InventoryStats } from '@/components/dashboard/InventoryStats';
+import { SalesByCategory } from '@/components/dashboard/SalesByCategory';
+import { TrendingProducts } from '@/components/dashboard/TrendingProducts';
 import config from '../config';
 
 interface DashboardStats {
@@ -11,13 +13,8 @@ interface DashboardStats {
   lowStockProducts: number;
   totalOrders: number;
   averageOrderValue: number;
-}
-
-interface Order {
-  order_id: string;
-  customer_name: string;
-  total_amount: number;
-  order_date: string;
+  totalRevenue: number;
+  profitMargin: number;
 }
 
 export function Dashboard() {
@@ -31,22 +28,13 @@ export function Dashboard() {
       const data = await response.json();
       return {
         ...data,
-        averageOrderValue: parseFloat(data.averageOrderValue) || 0
+        averageOrderValue: parseFloat(data.averageOrderValue) || 0,
+        totalRevenue: parseFloat(data.totalRevenue) || 0,
+        profitMargin: parseFloat(data.profitMargin) || 0
       };
     },
   });
 
-  const { data: orders, isLoading: ordersLoading } = useQuery<Order[]>({
-    queryKey: ['recent-orders'],
-    queryFn: async () => {
-      const response = await fetch(`${config.apiUrl}/dashboard/recent-orders`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch recent orders');
-      }
-      return response.json();
-    },
-  });
-
   if (statsLoading) {
     return <div className="p-8">Loading dashboard...</div>;
   }
@@ -57,31 +45,22 @@ export function Dashboard() {
         <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
       </div>
       <Tabs defaultValue="overview" className="space-y-4">
-        <TabsList className="grid w-full grid-cols-3 lg:w-[400px]">
+        <TabsList className="grid w-full grid-cols-2 lg:w-[400px]">
           <TabsTrigger value="overview">Overview</TabsTrigger>
           <TabsTrigger value="inventory">Inventory</TabsTrigger>
-          <TabsTrigger value="orders">Orders</TabsTrigger>
         </TabsList>
         <TabsContent value="overview" className="space-y-4">
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
             <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                 <CardTitle className="text-sm font-medium">
-                  Total Products
+                  Total Revenue
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold">{stats?.totalProducts || 0}</div>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Low Stock Products
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{stats?.lowStockProducts || 0}</div>
+                <div className="text-2xl font-bold">
+                  ${(stats?.totalRevenue || 0).toLocaleString()}
+                </div>
               </CardContent>
             </Card>
             <Card>
@@ -106,11 +85,23 @@ export function Dashboard() {
                 </div>
               </CardContent>
             </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Profit Margin
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">
+                  {(stats?.profitMargin || 0).toFixed(1)}%
+                </div>
+              </CardContent>
+            </Card>
           </div>
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
             <Card className="col-span-4">
               <CardHeader>
-                <CardTitle>Overview</CardTitle>
+                <CardTitle>Sales Overview</CardTitle>
               </CardHeader>
               <CardContent className="pl-2">
                 <Overview />
@@ -125,49 +116,50 @@ export function Dashboard() {
               </CardContent>
             </Card>
           </div>
-        </TabsContent>
-        <TabsContent value="inventory" className="space-y-4">
-          <InventoryStats />
-        </TabsContent>
-        <TabsContent value="orders" className="space-y-4">
-          <div className="grid gap-4">
+          <div className="grid gap-4 md:grid-cols-2">
             <Card>
               <CardHeader>
-                <CardTitle>Recent Orders</CardTitle>
+                <CardTitle>Sales by Category</CardTitle>
               </CardHeader>
               <CardContent>
-                {ordersLoading ? (
-                  <div>Loading orders...</div>
-                ) : orders && orders.length > 0 ? (
-                  <div className="space-y-8">
-                    {orders.map((order) => (
-                      <div key={order.order_id} className="flex items-center">
-                        <div className="ml-4 space-y-1">
-                          <p className="text-sm font-medium leading-none">
-                            Order #{order.order_id}
-                          </p>
-                          <p className="text-sm text-muted-foreground">
-                            {order.customer_name}
-                          </p>
-                          <p className="text-sm text-muted-foreground">
-                            {new Date(order.order_date).toLocaleDateString()}
-                          </p>
-                        </div>
-                        <div className="ml-auto font-medium">
-                          ${order.total_amount.toFixed(2)}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="text-center text-muted-foreground">
-                    No recent orders found
-                  </div>
-                )}
+                <SalesByCategory />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Trending Products</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <TrendingProducts />
               </CardContent>
             </Card>
           </div>
         </TabsContent>
+        <TabsContent value="inventory" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Total Products
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{stats?.totalProducts || 0}</div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Low Stock Products
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{stats?.lowStockProducts || 0}</div>
+              </CardContent>
+            </Card>
+          </div>
+          <InventoryStats />
+        </TabsContent>
       </Tabs>
     </div>
   );