feat: admin page

src/App.tsx

@@ -1,24 +1,27 @@
-import { useMemo } from 'react'
+import { useMemo, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { useQuery } from '@apollo/client/react'
 import { AuthProvider } from '#src/contexts/auth/AuthContext'
 import { CartProvider } from '#src/contexts/cart/CartContext'
 import { Layout } from '#src/components/layout/Layout'
+import { LoadingState } from '#src/components/LoadingState'
 import { GET_PRODUCTS } from '#src/graphql/queries'
 import { routes } from '#src/routes'
 import type { ProductsQueryResult } from '#src/types'
 
 function AppRoutes() {
   return (
-    <Routes>
-      {routes.map((route) => (
-        <Route
-          key={route.path}
-          path={route.path}
-          element={<Layout backLink={route.backLink}>{route.element}</Layout>}
-        />
-      ))}
-    </Routes>
+    <Suspense fallback={<LoadingState />}>
+      <Routes>
+        {routes.map((route) => (
+          <Route
+            key={route.path}
+            path={route.path}
+            element={<Layout backLink={route.backLink}>{route.element}</Layout>}
+          />
+        ))}
+      </Routes>
+    </Suspense>
   )
 }
 

src/ProductCard.tsx

@@ -8,12 +8,15 @@ type ProductCardProps = {
   product: Product
   onAdd: () => void
   isHighlighted: boolean
+  averageRating: number | null
 }
 
-export default function ProductCard({ product, onAdd, isHighlighted }: ProductCardProps) {
-  // Use product.rating from database (which should be kept up to date)
-  const averageRating = product.rating || null
-
+export default function ProductCard({
+  product,
+  onAdd,
+  isHighlighted,
+  averageRating,
+}: ProductCardProps) {
   return (
     <Link
       to={`/product/${product.id}`}