adding dynamic filters

next.config.ts

@@ -4,6 +4,13 @@ import type { NextConfig } from "next";
 
     images: {
       remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: 'www.brownells.com',
+          port: '',
+          pathname: '/**',
+          search: '',
+        },
         {
           protocol: 'https',
           hostname: 'assets.example.com',

package.json

@@ -80,6 +80,8 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
     "autoprefixer": "^10.4.20",
     "csv-parse": "^5.6.0",
     "csv-parser": "^3.0.0",
@@ -87,6 +89,7 @@
     "drizzle-orm": "^0.38.4",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
+    "eslint-plugin-drizzle": "^0.2.3",
     "fs": "0.0.1-security",
     "next-auth": "^5.0.0-beta.25",
     "postcss": "^8.5.1",

pnpm-lock.yaml

@@ -216,6 +216,12 @@ importers:
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.22.0
+        version: 8.22.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.22.0
+        version: 8.22.0(eslint@8.57.1)(typescript@5.7.3)
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.1)
@@ -237,6 +243,9 @@ importers:
       eslint-config-next:
         specifier: 15.0.3
         version: 15.0.3(eslint@8.57.1)(typescript@5.7.3)
+      eslint-plugin-drizzle:
+        specifier: ^0.2.3
+        version: 0.2.3(eslint@8.57.1)
       fs:
         specifier: 0.0.1-security
         version: 0.0.1-security
@@ -2136,51 +2145,51 @@ packages:
   '@types/ws@8.5.14':
     resolution: {integrity: sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==}
 
-  '@typescript-eslint/eslint-plugin@8.21.0':
+  '@typescript-eslint/eslint-plugin@8.22.0':
-    resolution: {integrity: sha512-eTH+UOR4I7WbdQnG4Z48ebIA6Bgi7WO8HvFEneeYBxG8qCOYgTOFPSg6ek9ITIDvGjDQzWHcoWHCDO2biByNzA==}
+    resolution: {integrity: sha512-4Uta6REnz/xEJMvwf72wdUnC3rr4jAQf5jnTkeRQ9b6soxLxhDEbS/pfMPoJLDfFPNVRdryqWUIV/2GZzDJFZw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/parser@8.21.0':
+  '@typescript-eslint/parser@8.22.0':
-    resolution: {integrity: sha512-Wy+/sdEH9kI3w9civgACwabHbKl+qIOu0uFZ9IMKzX3Jpv9og0ZBJrZExGrPpFAY7rWsXuxs5e7CPPP17A4eYA==}
+    resolution: {integrity: sha512-MqtmbdNEdoNxTPzpWiWnqNac54h8JDAmkWtJExBVVnSrSmi9z+sZUt0LfKqk9rjqmKOIeRhO4fHHJ1nQIjduIQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/scope-manager@8.21.0':
+  '@typescript-eslint/scope-manager@8.22.0':
-    resolution: {integrity: sha512-G3IBKz0/0IPfdeGRMbp+4rbjfSSdnGkXsM/pFZA8zM9t9klXDnB/YnKOBQ0GoPmoROa4bCq2NeHgJa5ydsQ4mA==}
+    resolution: {integrity: sha512-/lwVV0UYgkj7wPSw0o8URy6YI64QmcOdwHuGuxWIYznO6d45ER0wXUbksr9pYdViAofpUCNJx/tAzNukgvaaiQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.21.0':
+  '@typescript-eslint/type-utils@8.22.0':
-    resolution: {integrity: sha512-95OsL6J2BtzoBxHicoXHxgk3z+9P3BEcQTpBKriqiYzLKnM2DeSqs+sndMKdamU8FosiadQFT3D+BSL9EKnAJQ==}
+    resolution: {integrity: sha512-NzE3aB62fDEaGjaAYZE4LH7I1MUwHooQ98Byq0G0y3kkibPJQIXVUspzlFOmOfHhiDLwKzMlWxaNv+/qcZurJA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/types@8.21.0':
+  '@typescript-eslint/types@8.22.0':
-    resolution: {integrity: sha512-PAL6LUuQwotLW2a8VsySDBwYMm129vFm4tMVlylzdoTybTHaAi0oBp7Ac6LhSrHHOdLM3efH+nAR6hAWoMF89A==}
+    resolution: {integrity: sha512-0S4M4baNzp612zwpD4YOieP3VowOARgK2EkN/GBn95hpyF8E2fbMT55sRHWBq+Huaqk3b3XK+rxxlM8sPgGM6A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.21.0':
+  '@typescript-eslint/typescript-estree@8.22.0':
-    resolution: {integrity: sha512-x+aeKh/AjAArSauz0GiQZsjT8ciadNMHdkUSwBB9Z6PrKc/4knM4g3UfHml6oDJmKC88a6//cdxnO/+P2LkMcg==}
+    resolution: {integrity: sha512-SJX99NAS2ugGOzpyhMza/tX+zDwjvwAtQFLsBo3GQxiGcvaKlqGBkmZ+Y1IdiSi9h4Q0Lr5ey+Cp9CGWNY/F/w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/utils@8.21.0':
+  '@typescript-eslint/utils@8.22.0':
-    resolution: {integrity: sha512-xcXBfcq0Kaxgj7dwejMbFyq7IOHgpNMtVuDveK7w3ZGwG9owKzhALVwKpTF2yrZmEwl9SWdetf3fxNzJQaVuxw==}
+    resolution: {integrity: sha512-T8oc1MbF8L+Bk2msAvCUzjxVB2Z2f+vXYfcucE2wOmYs7ZUwco5Ep0fYZw8quNwOiw9K8GYVL+Kgc2pETNTLOg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/visitor-keys@8.21.0':
+  '@typescript-eslint/visitor-keys@8.22.0':
-    resolution: {integrity: sha512-BkLMNpdV6prozk8LlyK/SOoWLmUFi+ZD+pcqti9ILCbVvHGk1ui1g4jJOc2WDLaeExz2qWwojxlPce5PljcT3w==}
+    resolution: {integrity: sha512-AWpYAXnUgvLNabGTy3uBylkgZoosva/miNd1I8Bz3SjotmQPbVqhO4Cczo8AsZ44XVErEBPr/CRSgaj8sG7g0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -2805,6 +2814,11 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
+  eslint-plugin-drizzle@0.2.3:
+    resolution: {integrity: sha512-BO+ymHo33IUNoJlC0rbd7HP9EwwpW4VIp49R/tWQF/d2E1K2kgTf0tCXT0v9MSiBr6gGR1LtPwMLapTKEWSg9A==}
+    peerDependencies:
+      eslint: '>=8.0.0'
+
   eslint-plugin-import@2.31.0:
     resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
     engines: {node: '>=4'}
@@ -5998,14 +6012,14 @@ snapshots:
     dependencies:
       '@types/node': 20.17.16
 
-  '@typescript-eslint/eslint-plugin@8.21.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
-      '@typescript-eslint/scope-manager': 8.21.0
+      '@typescript-eslint/scope-manager': 8.22.0
-      '@typescript-eslint/type-utils': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/type-utils': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.21.0
+      '@typescript-eslint/visitor-keys': 8.22.0
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 5.3.2
@@ -6015,27 +6029,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3)':
+  '@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.21.0
+      '@typescript-eslint/scope-manager': 8.22.0
-      '@typescript-eslint/types': 8.21.0
+      '@typescript-eslint/types': 8.22.0
-      '@typescript-eslint/typescript-estree': 8.21.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.22.0(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.21.0
+      '@typescript-eslint/visitor-keys': 8.22.0
       debug: 4.4.0
       eslint: 8.57.1
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.21.0':
+  '@typescript-eslint/scope-manager@8.22.0':
     dependencies:
-      '@typescript-eslint/types': 8.21.0
+      '@typescript-eslint/types': 8.22.0
-      '@typescript-eslint/visitor-keys': 8.21.0
+      '@typescript-eslint/visitor-keys': 8.22.0
 
-  '@typescript-eslint/type-utils@8.21.0(eslint@8.57.1)(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.22.0(eslint@8.57.1)(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.21.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.22.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
       debug: 4.4.0
       eslint: 8.57.1
       ts-api-utils: 2.0.0(typescript@5.7.3)
@@ -6043,12 +6057,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.21.0': {}
+  '@typescript-eslint/types@8.22.0': {}
 
-  '@typescript-eslint/typescript-estree@8.21.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@8.22.0(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/types': 8.21.0
+      '@typescript-eslint/types': 8.22.0
-      '@typescript-eslint/visitor-keys': 8.21.0
+      '@typescript-eslint/visitor-keys': 8.22.0
       debug: 4.4.0
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -6059,20 +6073,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.21.0(eslint@8.57.1)(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.22.0(eslint@8.57.1)(typescript@5.7.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.21.0
+      '@typescript-eslint/scope-manager': 8.22.0
-      '@typescript-eslint/types': 8.21.0
+      '@typescript-eslint/types': 8.22.0
-      '@typescript-eslint/typescript-estree': 8.21.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.22.0(typescript@5.7.3)
       eslint: 8.57.1
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.21.0':
+  '@typescript-eslint/visitor-keys@8.22.0':
     dependencies:
-      '@typescript-eslint/types': 8.21.0
+      '@typescript-eslint/types': 8.22.0
       eslint-visitor-keys: 4.2.0
 
   '@ungap/structured-clone@1.3.0': {}
@@ -6726,12 +6740,12 @@ snapshots:
     dependencies:
       '@next/eslint-plugin-next': 15.0.3
       '@rushstack/eslint-patch': 1.10.5
-      '@typescript-eslint/eslint-plugin': 8.21.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.22.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)
-      '@typescript-eslint/parser': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.1.0(eslint@8.57.1)
@@ -6762,22 +6776,26 @@ snapshots:
       is-glob: 4.0.3
       stable-hash: 0.0.4
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
+  eslint-plugin-drizzle@0.2.3(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -6788,7 +6806,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.21.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -6800,7 +6818,7 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack

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 Filter from "@components/Filter";
-import PopNav from "@components/PopNav/page";
-import PageHero from "@components/PageHero";
-import { metadata } from "../layout";
 
 
 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 { ColumnHeadings } from "@src/lib/utils";
-import styles from '../styles.module.css';
+//import styles from '../styles.module.css';
-import PageHero from "@components/PageHero";
+//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(); 
+  const newDate = new Date(); 
-  let year = newDate.getFullYear();
+  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 (
+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
@@ -23,3 +23,13 @@ export async function updateProduct( id:number) {
 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);
+}

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
 
 export default {
     darkMode: ['class'],
@@ -60,5 +61,6 @@ export default {
 		// }
 	}
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindcssAnimate],
-} satisfies Config;
+
+} as unknown as Config;