adding dynamic filters

src/app/(main)/_components/user-dropdown.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ExclamationTriangleIcon } from "@/components/icons";
-import { LoadingButton } from "@/components/loading-button";
+import { LoadingButton } from "@/components/Loading-Button";
 import {
   AlertDialog,
   AlertDialogContent,

src/app/(main)/editor/[postId]/_components/post-editor.tsx

@@ -18,7 +18,7 @@ import { PostPreview } from "./post-preview";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/trpc/react";
 import { Pencil2Icon } from "@/components/icons";
-import { LoadingButton } from "@/components/loading-button";
+import { LoadingButton } from "@/components/Loading-Button";
 import Link from "next/link";
 import { createPostSchema } from "@/server/api/routers/post/post.input";
 

src/app/Admin/Users/page.tsx

@@ -3,7 +3,7 @@ import { getData } from "@actions/userActions";
 import PageHero from "@components/PageHero";
 import UsersTable from "@src/components/admin/UsersTable";
 import { Suspense } from "react";
-import Loading from "@src/components/Loading/loading";
+import Loading from "@/components/Loading-Green";
 import { ColumnHeadings } from "@src/lib/utils";
 
 export default async function UsersPage() {
@@ -17,6 +17,7 @@ export default async function UsersPage() {
 
       <div className="container mx-auto">
         <Suspense fallback={<Loading/>}>
+
           <UsersTable data={data} newColumnHeadings={columnHeadings}></UsersTable>
         </Suspense>
       </div>

src/app/Products/accessories/page.tsx

@@ -3,7 +3,7 @@ import styles from '../styles.module.css';
 import PageHero from "@components/PageHero";
 import SortTable from "@components/SortTable";
 import { Suspense } from "react";
-import Loading from "@src/components/Loading/loading";
+import Loading from "@/components/Loading-Green";
 
 export default async function BarrelsPage() {
   const data = await getProductType('Barrels');

src/app/Products/barrels/page.tsx

@@ -3,7 +3,7 @@ import styles from '../styles.module.css';
 import PageHero from "@components/PageHero";
 import SortTable from "@components/SortTable";
 import { Suspense } from "react";
-import Loading from "@src/components/Loading/loading";
+import Loading from "@/components/Loading-Green";
 
 export default async function BarrelsPage() {
   const data = await getProductType('Barrels');

src/app/Products/layout.tsx

@@ -1,8 +1,5 @@
-import Footer from "@components/footer";
-import Navbar from "@components/Navbar";
-import PopNav from "@components/PopNav/page";
-import PageHero from "@components/PageHero";
-import { metadata } from "../layout";
+
+import Filter from "@components/Filter";
 
 
 export default function RootLayout({
@@ -17,7 +14,7 @@ export default function RootLayout({
       <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">
           {/* Left column area */}
-          <h1>Filters go here</h1>
+          <Filter heading="Filters"/>
         </aside>
 
         <main className="flex-1">

src/app/Products/suppressors/page.tsx

@@ -0,0 +1,22 @@
+import { getSuppressors } from "@queries/PSA";
+import styles from '../styles.module.css';
+import PageHero from "@components/PageHero";
+import SortTable from "@components/SortTable";
+import {Suspense} from "react";
+import { LoadingButton } from "@/components/loading-button copy";
+
+export default async function SuppressorsPage() {
+  const data = await getSuppressors();
+
+  return (
+    <div>
+      <PageHero title="Suppressors" />
+      <div className="container mx-auto">
+        <Suspense fallback={<LoadingButton/>}>
+          <SortTable data={data}></SortTable>
+        </Suspense>
+
+      </div>
+    </div>
+  );
+}

src/app/components/PopNav/page.tsx

@@ -1,27 +1,5 @@
-import { Fragment, } from "react";
-import {
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  Popover,
-  PopoverButton,
-  PopoverGroup,
-  PopoverPanel,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-} from "@headlessui/react";
-import {
-  Bars3Icon,
-  MagnifyingGlassIcon,
-  ShoppingBagIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+
 import { validateRequest } from "@/lib/auth/validate-request";
-import { User } from "lucia";
-import  {cookies} from 'next/headers'; 
 import PopNavDialog from "../PopNavDialog/page";
 import { getUserByID } from "@/actions/userActions";
 

src/app/layout.tsx

@@ -3,7 +3,7 @@ import Navbar from "@components/Navbar";
 import PopNav from "@components/PopNav/page";
 import { Roboto } from 'next/font/google'
 import constants from "@src/lib/constants";
-import Footer from "@components/footer";
+import Footer from "@/components/Footer";
 // import {  ClerkProvider, SignInButton, SignedIn, SignedOut,UserButton} from '@clerk/nextjs';
 export const metadata = {
   title: constants.APP_NAME,

src/components/AccountsTable/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { PlusCircleIcon } from "@heroicons/react/20/solid";
-import { ColumnHeadings } from "@src/lib/utils";
-import styles from '../styles.module.css';
-import PageHero from "@components/PageHero";
+//import { ColumnHeadings } from "@src/lib/utils";
+//import styles from '../styles.module.css';
+//import PageHero from "@components/PageHero";
 
 import { Suspense } from "react";
-import Loading from "@src/components/Loading/loading";
+import Loading from "@/components/Loading-Green";
 import Link from "next/link";
 
 export default async function AccountsTable( props: any ) {

src/components/Filter/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { getBBProductsCategories } from "@/db/queries/Products";
+import Link from "next/link";
+
+const Filter: React.FC<{ [key: string]: any }> = async (props: unknown) => {
+    const bbCats = 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}`} onClick={() => alert("Coming")}>
+                            {cat.category}
+                        </Link>
+                    </div>
+                ))
+                }
+            </div>
+        </div>
+    );
+};
+
+export default Filter;

src/components/Footer/index.tsx

@@ -8,6 +8,7 @@ const navigation = {
     { name: 'Uppers', href: '/Products/uppers' },
     { name: 'Optics', href: '/Products/optics' },
     { name: 'Accessories', href: '/Products/accessories' },
+    { name: 'Suppressors', href: '/Products/suppressors' },
   ],
   admin: [
     { name: 'Users', href: '/Admin/Users' },    
@@ -83,8 +84,8 @@ const navigation = {
 }
 
 export default function Footer() {
-  let newDate = new Date(); 
-  let year = newDate.getFullYear();
+  const newDate = new Date(); 
+  const year = newDate.getFullYear();
   return (
     <footer className="bg-zinc-900">
       <div className="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">

src/components/Loading-Green/index.tsx

@@ -0,0 +1,9 @@
+
+const Loading = async () => {
+    return (
+        <div className="flex  justify-center pt-10 h-screen">
+            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-500"></div>
+        </div>
+    )
+}
+export default Loading;

src/components/Loading/loading.tsx

@@ -1,6 +0,0 @@
-const Loading = async () => {
-    return (
-        <div className="text-center mt-14">Loading...</div>);
-}
-
-export default Loading;

src/components/admin/UsersTable/ButtonOnClick.tsx

@@ -2,7 +2,7 @@
 
 import PlusCircleIcon from "@heroicons/react/24/outline/PlusCircleIcon";
 
-export default async function ButtonOnClick(props:any) {
+export default function ButtonOnClick(props:any) {
     const handleClick = async () => {
         alert("This feature is coming soon");
      

src/components/admin/UsersTable/index.tsx

@@ -1,9 +1,10 @@
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { PlusCircleIcon } from "@heroicons/react/20/solid";
+//import { PlusCircleIcon } from "@heroicons/react/20/solid";
 
-import Image from "next/image";
+//import Image from "next/image";
 import Link from "next/link";
 import ButtonOnClick from "./ButtonOnClick";
+import { Suspense } from "react";
 
 
 export default async function UsersTable(props: any) {
@@ -11,9 +12,8 @@ export default async function UsersTable(props: any) {
   const onClick = () => {
     alert("This feature is coming soon");
 }
-  return (
-    <div className="pb-12">
-
+await new Promise((resolve) => setTimeout(resolve,1000));  return (
+    <div className="pb-12"> 
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@@ -93,6 +93,7 @@ export default async function UsersTable(props: any) {
                 </tr>
               </thead>
               <tbody className=" divide-y divide-gray-200 bg-white">
+                <Suspense fallback={<div>Loading...</div>}>
                 {props.data.map((item: any) => (
                   <tr key={item.uuid}>
                     <td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
@@ -113,15 +114,12 @@ export default async function UsersTable(props: any) {
                     </td>
                   </tr>
                 ))}
-
+                </Suspense>
               </tbody>
-
             </table>
-
           </div>
         </div>
       </div>
     </div>
-
   );
-}
+}

src/components/submit-button copy.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import { useFormStatus } from "react-dom";
-import { LoadingButton } from "@/components/loading-button";
+import { LoadingButton } from "@/components/Loading-Button";
 import type { ButtonProps } from "@/components/ui/button";
 
 const SubmitButton = forwardRef<HTMLButtonElement, ButtonProps>(

src/components/submit-button.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import { useFormStatus } from "react-dom";
-import { LoadingButton } from "@/components/loading-button";
+import { LoadingButton } from "@/components/Loading-Button";
 import type { ButtonProps } from "@/components/ui/button";
 
 const SubmitButton = forwardRef<HTMLButtonElement, ButtonProps>(

src/db/queries/PSA/index.ts

@@ -1,5 +1,5 @@
 import { db } from '@db/index';
-import { psa } from '@schemas/schema';
+import { bb_products, psa } from '@schemas/schema';
 import { eq, lt, gte, ne, and, like } from 'drizzle-orm';
 import CATEGORY from '@src/data/parts_cats.json';
 
@@ -69,6 +69,17 @@ export async function getARHandGuards(page = 1) {
     .offset(offset);
 }
 
+export async function getSuppressors(page = 1) {
+  const limit = 40;
+  const offset = (page - 1) * limit;
+  
+  return await db.select()
+    .from(bb_products)
+    .limit(limit)
+    .where(and(eq(bb_products.category, "Muzzle Devices"), eq(bb_products.subcategory, 'Suppressors')))
+    .offset(offset);
+}
+
 export async function getAKHandGuards(page = 1) {
   const limit = 40;
   const offset = (page - 1) * limit;

src/db/queries/Products/index.ts

@@ -1,7 +1,7 @@
 // db/queries.ts
 "use server";
 import { eq, not , asc} from "drizzle-orm";
-import { products } from '@schemas/schema';
+import { products, bb_products } from '@schemas/schema';
 import { db } from '@db/index';
 
 // Fetch all products
@@ -22,4 +22,14 @@ export async function updateProduct( id:number) {
 // Delete a product
 export async function deleteProduct(id: number) {
   return await db.delete(products).where(eq(products.id, id));
+}
+
+// Fetch bb_products categories
+export async function getBBProductsCategories() {
+  return await db.selectDistinct({category:bb_products.category}).from(bb_products).limit(100).orderBy(asc(bb_products.category));
+}
+
+// Fetch bb_products subcategories
+export async function getBBProductsSubCategories(category : string) {
+  return await db.selectDistinct({subcategory:bb_products.subcategory}).from(bb_products).where(eq(bb_products.category, category)).limit(200);
 }