Update frontend to allow categories

app/dashboard/products/page.tsx

@@ -14,11 +14,13 @@ import {
 } from "@/lib/productData";
 import { ProductModal } from "@/components/modals/product-modal";
 import ProductTable from "@/components/tables/product-table";
+import { Category } from "@/models/categories"
+
 
 export default function ProductsPage() {
   const router = useRouter();
   const [products, setProducts] = useState<Product[]>([]);
-  const [categories, setCategories] = useState<any[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [editing, setEditing] = useState<boolean>(false);
@@ -47,14 +49,8 @@ export default function ProductsPage() {
     const fetchDataAsync = async () => {
       try {
         const [fetchedProducts, fetchedCategories] = await Promise.all([
-          fetchProductData(
-            `${process.env.NEXT_PUBLIC_API_URL}/products`,
-            authToken
-          ),
-          fetchProductData(
-            `${process.env.NEXT_PUBLIC_API_URL}/categories`,
-            authToken
-          ),
+          fetchProductData(`${process.env.NEXT_PUBLIC_API_URL}/products`, authToken),
+          fetchProductData(`${process.env.NEXT_PUBLIC_API_URL}/categories`, authToken),
         ]);
 
         console.log("Fetched Products:", fetchedProducts);
@@ -207,7 +203,12 @@ export default function ProductsPage() {
   // Get category name by ID
   const getCategoryNameById = (categoryId: string): string => {
     const category = categories.find((cat) => cat._id === categoryId);
-    return category ? category.name : "Unknown Category";
+    if (!category) return "Unknown Category";
+    if (category.parentId) {
+      const parent = categories.find((cat) => cat._id === category.parentId);
+      return parent ? `${parent.name} > ${category.name}` : category.name;
+    }
+    return category.name;
   };
 
   return (