adding dynamic filters

2025-12-06 02:36:44 -05:00 · 2025-02-01 23:47:45 -05:00
parent 583162acbe
commit ffb42ba2d1
25 changed files with 241 additions and 165 deletions
--- a/next.config.ts
+++ b/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',
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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':
-    resolution: {integrity: sha512-eTH+UOR4I7WbdQnG4Z48ebIA6Bgi7WO8HvFEneeYBxG8qCOYgTOFPSg6ek9ITIDvGjDQzWHcoWHCDO2biByNzA==}
+  '@typescript-eslint/eslint-plugin@8.22.0':
+    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':
-    resolution: {integrity: sha512-Wy+/sdEH9kI3w9civgACwabHbKl+qIOu0uFZ9IMKzX3Jpv9og0ZBJrZExGrPpFAY7rWsXuxs5e7CPPP17A4eYA==}
+  '@typescript-eslint/parser@8.22.0':
+    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':
-    resolution: {integrity: sha512-G3IBKz0/0IPfdeGRMbp+4rbjfSSdnGkXsM/pFZA8zM9t9klXDnB/YnKOBQ0GoPmoROa4bCq2NeHgJa5ydsQ4mA==}
+  '@typescript-eslint/scope-manager@8.22.0':
+    resolution: {integrity: sha512-/lwVV0UYgkj7wPSw0o8URy6YI64QmcOdwHuGuxWIYznO6d45ER0wXUbksr9pYdViAofpUCNJx/tAzNukgvaaiQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/type-utils@8.21.0':
-    resolution: {integrity: sha512-95OsL6J2BtzoBxHicoXHxgk3z+9P3BEcQTpBKriqiYzLKnM2DeSqs+sndMKdamU8FosiadQFT3D+BSL9EKnAJQ==}
+  '@typescript-eslint/type-utils@8.22.0':
+    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':
-    resolution: {integrity: sha512-PAL6LUuQwotLW2a8VsySDBwYMm129vFm4tMVlylzdoTybTHaAi0oBp7Ac6LhSrHHOdLM3efH+nAR6hAWoMF89A==}
+  '@typescript-eslint/types@8.22.0':
+    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':
-    resolution: {integrity: sha512-x+aeKh/AjAArSauz0GiQZsjT8ciadNMHdkUSwBB9Z6PrKc/4knM4g3UfHml6oDJmKC88a6//cdxnO/+P2LkMcg==}
+  '@typescript-eslint/typescript-estree@8.22.0':
+    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':
-    resolution: {integrity: sha512-xcXBfcq0Kaxgj7dwejMbFyq7IOHgpNMtVuDveK7w3ZGwG9owKzhALVwKpTF2yrZmEwl9SWdetf3fxNzJQaVuxw==}
+  '@typescript-eslint/utils@8.22.0':
+    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':
-    resolution: {integrity: sha512-BkLMNpdV6prozk8LlyK/SOoWLmUFi+ZD+pcqti9ILCbVvHGk1ui1g4jJOc2WDLaeExz2qWwojxlPce5PljcT3w==}
+  '@typescript-eslint/visitor-keys@8.22.0':
+    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/scope-manager': 8.21.0
-      '@typescript-eslint/type-utils': 8.21.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/visitor-keys': 8.21.0
+      '@typescript-eslint/parser': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.22.0
+      '@typescript-eslint/type-utils': 8.22.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.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/types': 8.21.0
-      '@typescript-eslint/typescript-estree': 8.21.0(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.21.0
+      '@typescript-eslint/scope-manager': 8.22.0
+      '@typescript-eslint/types': 8.22.0
+      '@typescript-eslint/typescript-estree': 8.22.0(typescript@5.7.3)
+      '@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/visitor-keys': 8.21.0
+      '@typescript-eslint/types': 8.22.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/utils': 8.21.0(eslint@8.57.1)(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.22.0(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/visitor-keys': 8.21.0
+      '@typescript-eslint/types': 8.22.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/types': 8.21.0
-      '@typescript-eslint/typescript-estree': 8.21.0(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.22.0
+      '@typescript-eslint/types': 8.22.0
+      '@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/parser': 8.21.0(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.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
--- a/src/app/(main)/_components/user-dropdown.tsx
+++ b/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,
--- a/src/app/(main)/editor/[postId]/_components/post-editor.tsx
+++ b/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";

--- a/src/app/Admin/Users/page.tsx
+++ b/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>
--- a/src/app/Products/accessories/page.tsx
+++ b/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');
--- a/src/app/Products/barrels/page.tsx
+++ b/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');
--- a/src/app/Products/layout.tsx
+++ b/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">
--- a/src/app/Products/suppressors/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/components/PopNav/page.tsx
+++ b/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";

--- a/src/app/layout.tsx
+++ b/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,
--- a/src/components/AccountsTable/index.tsx
+++ b/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 ) {
--- a/src/components/Filter/index.tsx
+++ b/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;
--- a/src/components/Footer/index.tsx
+++ b/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">
--- a/src/components/Loading-Button/index.tsx
+++ b/src/components/Loading-Button/index.tsx
--- a/src/components/Loading-Green/index.tsx
+++ b/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;
--- a/src/components/Loading/loading.tsx
+++ b/src/components/Loading/loading.tsx
@@ -1,6 +0,0 @@
-const Loading = async () => {
-    return (
-        <div className="text-center mt-14">Loading...</div>);
-}
-
-export default Loading;
--- a/src/components/admin/UsersTable/ButtonOnClick.tsx
+++ b/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");
     
--- a/src/components/admin/UsersTable/index.tsx
+++ b/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>
-
  );
 }
--- a/src/components/submit-button
+++ b/src/components/submit-button
@@ -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>(
--- a/src/components/submit-button.tsx
+++ b/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>(
--- a/src/db/queries/PSA/index.ts
+++ b/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;
--- a/src/db/queries/Products/index.ts
+++ b/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);
+}
--- a/tailwind.config.ts
+++ b/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")],
-} satisfies Config;
+  plugins: [tailwindcssAnimate],
+
+} as unknown as Config;