Get data loading in frontend

2025-01-09 17:08:46 -05:00
parent 608f376790
commit 9034897ef1
9 changed files with 253 additions and 201 deletions
--- a/inventory/src/components/dashboard/InventoryStats.tsx
+++ b/inventory/src/components/dashboard/InventoryStats.tsx
@@ -4,7 +4,7 @@ import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import config from '../../config';

 interface CategoryStats {
-  category: string;
+  categories: string;
  count: number;
 }

@@ -16,7 +16,7 @@ interface StockLevels {
 }

 export function InventoryStats() {
-  const { data: categoryStats } = useQuery<CategoryStats[]>({
+  const { data: categoryStats, isLoading: categoryLoading, error: categoryError } = useQuery<CategoryStats[]>({
    queryKey: ['category-stats'],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/dashboard/category-stats`);
@@ -27,7 +27,7 @@ export function InventoryStats() {
    },
  });

-  const { data: stockLevels } = useQuery<StockLevels>({
+  const { data: stockLevels, isLoading: stockLoading, error: stockError } = useQuery<StockLevels>({
    queryKey: ['stock-levels'],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/dashboard/stock-levels`);
@@ -38,6 +38,14 @@ export function InventoryStats() {
    },
  });

+  if (categoryLoading || stockLoading) {
+    return <div>Loading inventory stats...</div>;
+  }
+
+  if (categoryError || stockError) {
+    return <div className="text-red-500">Error loading inventory stats</div>;
+  }
+
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
      <Card className="col-span-4">
@@ -48,7 +56,7 @@ export function InventoryStats() {
          <ResponsiveContainer width="100%" height={350}>
            <BarChart data={categoryStats}>
              <XAxis
-                dataKey="category"
+                dataKey="categories"
                stroke="#888888"
                fontSize={12}
                tickLine={false}
--- a/inventory/src/components/dashboard/Overview.tsx
+++ b/inventory/src/components/dashboard/Overview.tsx
@@ -8,14 +8,19 @@ interface SalesData {
 }

 export function Overview() {
-  const { data, isLoading } = useQuery<SalesData[]>({
+  const { data, isLoading, error } = useQuery<SalesData[]>({
    queryKey: ['sales-overview'],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/dashboard/sales-overview`);
      if (!response.ok) {
        throw new Error('Failed to fetch sales overview');
      }
-      return response.json();
+      const rawData = await response.json();
+      return rawData.map((item: SalesData) => ({
+        ...item,
+        total: parseFloat(item.total.toString()),
+        date: new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+      }));
    },
  });

@@ -23,6 +28,10 @@ export function Overview() {
    return <div>Loading chart...</div>;
  }

+  if (error) {
+    return <div className="text-red-500">Error loading sales overview</div>;
+  }
+
  return (
    <ResponsiveContainer width="100%" height={350}>
      <LineChart data={data}>
@@ -38,9 +47,12 @@ export function Overview() {
          fontSize={12}
          tickLine={false}
          axisLine={false}
-          tickFormatter={(value) => `$${value}`}
+          tickFormatter={(value) => `$${value.toLocaleString()}`}
+        />
+        <Tooltip 
+          formatter={(value: number) => [`$${value.toLocaleString()}`, 'Sales']}
+          labelFormatter={(label) => `Date: ${label}`}
        />
-        <Tooltip />
        <Line
          type="monotone"
          dataKey="total"
--- a/inventory/src/components/dashboard/RecentSales.tsx
+++ b/inventory/src/components/dashboard/RecentSales.tsx
@@ -3,21 +3,25 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import config from '../../config';

 interface RecentOrder {
-  id: string;
-  customer: string;
-  amount: number;
-  date: string;
+  order_id: string;
+  customer_name: string;
+  total_amount: number;
+  order_date: string;
 }

 export function RecentSales() {
-  const { data: recentOrders, isLoading } = useQuery<RecentOrder[]>({
+  const { data: recentOrders, isLoading, error } = useQuery<RecentOrder[]>({
    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();
+      const data = await response.json();
+      return data.map((order: RecentOrder) => ({
+        ...order,
+        total_amount: parseFloat(order.total_amount.toString())
+      }));
    },
  });

@@ -25,26 +29,35 @@ export function RecentSales() {
    return <div>Loading recent sales...</div>;
  }

+  if (error) {
+    return <div className="text-red-500">Error loading recent sales</div>;
+  }
+
  return (
    <div className="space-y-8">
      {recentOrders?.map((order) => (
-        <div key={order.id} className="flex items-center">
+        <div key={order.order_id} className="flex items-center">
          <Avatar className="h-9 w-9">
            <AvatarFallback>
-              {order.customer.split(' ').map(n => n[0]).join('')}
+              {order.customer_name?.split(' ').map(n => n[0]).join('') || '??'}
            </AvatarFallback>
          </Avatar>
          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">Order #{order.id}</p>
+            <p className="text-sm font-medium leading-none">Order #{order.order_id}</p>
            <p className="text-sm text-muted-foreground">
-              {new Date(order.date).toLocaleDateString()}
+              {new Date(order.order_date).toLocaleDateString()}
            </p>
          </div>
          <div className="ml-auto font-medium">
-            +${order.amount.toFixed(2)}
+            ${order.total_amount.toFixed(2)}
          </div>
        </div>
      ))}
+      {!recentOrders?.length && (
+        <div className="text-center text-muted-foreground">
+          No recent orders found
+        </div>
+      )}
    </div>
  );
 } 
--- a/inventory/src/pages/Dashboard.tsx
+++ b/inventory/src/pages/Dashboard.tsx
@@ -13,19 +13,41 @@ interface DashboardStats {
  averageOrderValue: number;
 }

+interface Order {
+  order_id: string;
+  customer_name: string;
+  total_amount: number;
+  order_date: string;
+}
+
 export function Dashboard() {
-  const { data: stats, isLoading } = useQuery<DashboardStats>({
+  const { data: stats, isLoading: statsLoading } = useQuery<DashboardStats>({
    queryKey: ['dashboard-stats'],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/dashboard/stats`);
      if (!response.ok) {
        throw new Error('Failed to fetch dashboard stats');
      }
+      const data = await response.json();
+      return {
+        ...data,
+        averageOrderValue: parseFloat(data.averageOrderValue) || 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 (isLoading) {
+  if (statsLoading) {
    return <div className="p-8">Loading dashboard...</div>;
  }

@@ -49,7 +71,7 @@ export function Dashboard() {
                </CardTitle>
              </CardHeader>
              <CardContent>
-                <div className="text-2xl font-bold">{stats?.totalProducts}</div>
+                <div className="text-2xl font-bold">{stats?.totalProducts || 0}</div>
              </CardContent>
            </Card>
            <Card>
@@ -59,7 +81,7 @@ export function Dashboard() {
                </CardTitle>
              </CardHeader>
              <CardContent>
-                <div className="text-2xl font-bold">{stats?.lowStockProducts}</div>
+                <div className="text-2xl font-bold">{stats?.lowStockProducts || 0}</div>
              </CardContent>
            </Card>
            <Card>
@@ -69,7 +91,7 @@ export function Dashboard() {
                </CardTitle>
              </CardHeader>
              <CardContent>
-                <div className="text-2xl font-bold">{stats?.totalOrders}</div>
+                <div className="text-2xl font-bold">{stats?.totalOrders || 0}</div>
              </CardContent>
            </Card>
            <Card>
@@ -80,7 +102,7 @@ export function Dashboard() {
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
-                  ${stats?.averageOrderValue.toFixed(2)}
+                  ${(stats?.averageOrderValue || 0).toFixed(2)}
                </div>
              </CardContent>
            </Card>
@@ -107,6 +129,45 @@ export function Dashboard() {
        <TabsContent value="inventory" className="space-y-4">
          <InventoryStats />
        </TabsContent>
+        <TabsContent value="orders" className="space-y-4">
+          <div className="grid gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>Recent Orders</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>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
      </Tabs>
    </div>
  );
--- a/inventory/src/pages/Products.tsx
+++ b/inventory/src/pages/Products.tsx
@@ -2,14 +2,18 @@ import { useQuery } from '@tanstack/react-query';
 import config from '../config';

 interface Product {
-  id: string;
-  sku: string;
-  name: string;
-  description: string | null;
-  category: string | null;
-  quantity: number;
-  reorder_point: number | null;
-  reorder_quantity: number | null;
+  product_id: string;
+  title: string;
+  SKU: string;
+  stock_quantity: number;
+  price: number;
+  regular_price: number;
+  cost_price: number;
+  vendor: string;
+  brand: string;
+  categories: string;
+  visible: boolean;
+  managing_stock: boolean;
 }

 export function Products() {
@@ -20,7 +24,13 @@ export function Products() {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
-      return response.json();
+      const data = await response.json();
+      return data.map((product: Product) => ({
+        ...product,
+        price: parseFloat(product.price?.toString() || '0'),
+        regular_price: parseFloat(product.regular_price?.toString() || '0'),
+        cost_price: parseFloat(product.cost_price?.toString() || '0')
+      }));
    },
  });

@@ -34,38 +44,29 @@ export function Products() {

  return (
    <div className="p-8">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">Products</h1>
-        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90">
-          Add Product
-        </button>
-      </div>
+      <h1 className="text-2xl font-bold mb-6">Products</h1>

      <div className="border rounded-lg">
        <table className="w-full">
          <thead>
            <tr className="border-b bg-muted/50">
              <th className="text-left p-4 font-medium">SKU</th>
-              <th className="text-left p-4 font-medium">Name</th>
-              <th className="text-left p-4 font-medium">Category</th>
-              <th className="text-right p-4 font-medium">Quantity</th>
-              <th className="text-right p-4 font-medium">Reorder Point</th>
-              <th className="text-right p-4 font-medium">Actions</th>
+              <th className="text-left p-4 font-medium">Title</th>
+              <th className="text-left p-4 font-medium">Brand</th>
+              <th className="text-left p-4 font-medium">Vendor</th>
+              <th className="text-right p-4 font-medium">Stock</th>
+              <th className="text-right p-4 font-medium">Price</th>
            </tr>
          </thead>
          <tbody>
            {products?.map((product) => (
-              <tr key={product.id} className="border-b">
-                <td className="p-4">{product.sku}</td>
-                <td className="p-4">{product.name}</td>
-                <td className="p-4">{product.category || '-'}</td>
-                <td className="p-4 text-right">{product.quantity}</td>
-                <td className="p-4 text-right">{product.reorder_point || '-'}</td>
-                <td className="p-4 text-right">
-                  <button className="text-sm text-primary hover:underline">
-                    Edit
-                  </button>
-                </td>
+              <tr key={product.product_id} className="border-b">
+                <td className="p-4">{product.SKU}</td>
+                <td className="p-4">{product.title}</td>
+                <td className="p-4">{product.brand || '-'}</td>
+                <td className="p-4">{product.vendor || '-'}</td>
+                <td className="p-4 text-right">{product.stock_quantity}</td>
+                <td className="p-4 text-right">${(product.price || 0).toFixed(2)}</td>
              </tr>
            ))}
            {!products?.length && (