feat: detail product

src/routeTree.gen.ts

@@ -28,6 +28,7 @@ import { Route as AuthenticatedProductProductIdImport } from './routes/_authenti
 import { Route as AuthenticatedCategoryCategoryNameImport } from './routes/_authenticated/category.$categoryName'
 import { Route as AdminDashboardUploadImport } from './routes/_admin/dashboard/upload'
 import { Route as AdminDashboardProductsImport } from './routes/_admin/dashboard/products'
+import { Route as AdminDashboardProductProductIdImport } from './routes/_admin/dashboard/product.$productId'
 
 // Create/Update Routes
 
@@ -119,6 +120,12 @@ const AdminDashboardProductsRoute = AdminDashboardProductsImport.update({
   getParentRoute: () => AdminRoute,
 } as any)
 
+const AdminDashboardProductProductIdRoute =
+  AdminDashboardProductProductIdImport.update({
+    path: '/dashboard/product/$productId',
+    getParentRoute: () => AdminRoute,
+  } as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -191,6 +198,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminDashboardIndexImport
       parentRoute: typeof AdminImport
     }
+    '/_admin/dashboard/product/$productId': {
+      preLoaderRoute: typeof AdminDashboardProductProductIdImport
+      parentRoute: typeof AdminImport
+    }
   }
 }
 
@@ -201,6 +212,7 @@ export const routeTree = rootRoute.addChildren([
     AdminDashboardProductsRoute,
     AdminDashboardUploadRoute,
     AdminDashboardIndexRoute,
+    AdminDashboardProductProductIdRoute,
   ]),
   AuthRoute.addChildren([AuthLoginRoute, AuthRegisterRoute]),
   AuthenticatedRoute.addChildren([

src/routes/_admin/dashboard/product.$productId.tsx

@@ -0,0 +1,55 @@
+import { createFileRoute } from "@tanstack/react-router";
+import axios from "axios";
+import { config } from "@/lib/config.ts";
+import { useQuery } from "@tanstack/react-query";
+import Loading from "@/components/loading.tsx";
+
+export const Route = createFileRoute("/_admin/dashboard/product/$productId")({
+  component: ProductDetails,
+});
+
+async function getProductDetails(id: string, session: string) {
+  const { data } = await axios.get(
+    `${config.SERVER_API_URL}/v1/product/get/${id}`,
+    {
+      headers: {
+        Authorization: `Bearer ${session}`,
+      },
+    },
+  );
+  return data;
+}
+
+function ProductDetails() {
+  const { productId } = Route.useParams();
+  const { session } = Route.useRouteContext();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["product", productId],
+    queryFn: () => getProductDetails(productId, session),
+  });
+
+  if (isLoading) return <Loading />;
+
+  console.log(data);
+
+  return (
+    <div className="my-12 container mx-auto">
+      <div className="bg-background shadow-md rounded-lg p-8 mx-auto max-w-md">
+        <h1 className="text-3xl font-bold mb-4">{data.name}</h1>
+        <p className="text-primary mb-4">{data.description}</p>
+        <div className="flex items-center justify-between mb-4">
+          <p className="text-primary">Price: ${data.price}</p>
+          <p className="text-primary">Stock: {data.stock}</p>
+        </div>
+        <div className="w-full mx-auto aspect-w-16 aspect-h-12">
+          <img
+            src={`${config.SERVER_API_URL}/${data.thumbnail}`}
+            alt={data.name}
+            className="w-full rounded-lg object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/routes/_admin/dashboard/products.tsx

@@ -67,7 +67,16 @@ function DashboardProduct() {
               </div>
             </CardContent>
             <CardFooter className="gap-4 flex-wrap">
-              <Button variant="outline">More Info</Button>
+              <Button variant="outline" asChild>
+                <Link
+                  to="/dashboard/product/$productId"
+                  params={{
+                    productId: product.id,
+                  }}
+                >
+                  More Info
+                </Link>
+              </Button>
             </CardFooter>
           </Card>
         ))}