filters dispolaying, now need to link it to the data

package.json

@@ -9,17 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.2.0",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
-    "@mui/icons-material": "^6.1.7",
-    "@mui/joy": "^5.0.0-beta.48",
-    "@mui/material": "^6.1.7",
-    "@mui/styles": "^6.1.7",
-    "@mui/system": "^6.1.7",
-    "@mui/x-data-grid": "^7.22.2",
+    "@mui/material": "^6.4.3",
+    "@mui/x-tree-view": "^7.25.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.1.5",

src/app/Products/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({
     <div className="flex min-h-full flex-col">
 
       <div className="mx-auto flex w-full max-w-7xl items-start gap-x-8 ">
-        <aside className="sticky top-8 hidden w-44 shrink-0 lg:block pt-4">
+        <aside className="sticky top-8 hidden w[200] shrink-0 lg:block pt-4">
           {/* Left column area */}
           <Filter heading="Filters"/>
         </aside>

src/app/Products/sights/page.tsx

@@ -1,5 +1,5 @@
 import { getSights } from "@queries/PSA";
-import styles from '../styles.module.css';
+// import styles from '../styles.module.css';
 import PageHero from "@components/PageHero";
 import SortTable from "@components/SortTable";
 import {Suspense} from "react";
@@ -12,7 +12,7 @@ export default async function SightsPage() {
     <div>
       <PageHero title="Sights" />
 
-      <div className="container mx-auto">
+      <div className="container mx-auto"> 
           <Suspense fallback={<Loading/>}>
           <SortTable data={data}></SortTable>
           </Suspense>

src/components/ButtonProduct/index.tsx

@@ -1,5 +1,9 @@
 "use client";
-const ButtonProducts = ( props:any ) => {
+interface ButtonProductsProps {
+    category: string;
+}
+
+const ButtonProducts = (props: ButtonProductsProps) => {
     const category = props.category;
     return (
         <button onClick={async () => { alert(category); return false;}} >{props.category}</button>

src/components/Filter/index.tsx

@@ -1,29 +1,45 @@
 import React from "react";
-import { getBBProductsCategories } from "@/db/queries/Products";
+import { getBBProductsCategories, getBBProductsSubCategories } from "@/db/queries/Products";
 // import Link from "next/link";
-import ButtonProducts from "../ButtonProduct";
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
 
 interface FilterProps {
     heading: string;
     [key: string]: unknown;
 }
+async function SubCategories(props: { cat: string; }) {
 
-const Filter: React.FC<FilterProps> = async (props) => {
-    const bbCats = getBBProductsCategories();
+    const bbSubCats = await getBBProductsSubCategories(props.cat);
+    return (
+        <>
+            {bbSubCats.map((subcat) => (
+                <TreeItem key={subcat.subcategory} itemId={subcat.subcategory} label={subcat.subcategory} />
+            ))}
+
+        </>
+    );
+}
+
+async function Filter(props: FilterProps) {
+    const bbCats = await getBBProductsCategories();
 
     return (
+
         <div className="mt-20">
             <h1 className="pt-10 ml-2 font-bold">{props.heading}</h1>
             <div className="flex flex-col pt-2 pb-6 ml-2 rounded-r-lg text-white bg-[#334155]">
-
-                {(await bbCats).map((cat) => (
-                    <div className="ml-2 " key={cat.category}>
-                        {/* <Link href={`/products/${cat.category}`}> */}
-                        <ButtonProducts category={cat.category} />
-                        {/* </Link> */}
-                    </div>
-                ))
-                }
+            <Box sx={ {minHeight: 600, minWidth: 250} }>
+                <SimpleTreeView>
+                    {bbCats.map((cat) => (
+                            <TreeItem key={cat.category} itemId={cat.category} label={cat.category}>
+                                {cat.category && <SubCategories cat={cat.category} />}
+                            </TreeItem>
+                    ))}
+                </SimpleTreeView>
+                </Box>
             </div>
         </div>
     );