From 042452ef06ed08f7104600fb5577b67e5e818ebf Mon Sep 17 00:00:00 2001
From: kelvin <kelvin.kiprop96@gmail.com>
Date: Fri, 16 May 2025 23:57:29 +0300
Subject: [PATCH 1/4] feat: added products route

---
 components/Navigation/Navigation.tsx |  2 ++
 package.json                         |  2 +-
 pnpm-lock.yaml                       | 41 ++++++++++++++--------------
 routes/index.ts                      |  3 ++
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 676bac9..f913267 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -19,6 +19,7 @@ import {
   IconListDetails,
   IconLogin2,
   IconMessages,
+  IconPackages,
   IconReceipt2,
   IconRotateRectangle,
   IconUserCircle,
@@ -85,6 +86,7 @@ const mockdata = [
         icon: IconFiles,
         link: PATH_APPS.fileManager.root,
       },
+      { label: 'Products', icon: IconPackages, link: PATH_APPS.orders },
     ],
   },
   {
diff --git a/package.json b/package.json
index 2839e1b..497a377 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@mantine/nprogress": "^7.14.3",
     "@mantine/spotlight": "^7.14.3",
     "@mantine/tiptap": "^7.14.3",
-    "@tabler/icons-react": "^2.40.0",
+    "@tabler/icons-react": "^3.33.0",
     "@tiptap/extension-highlight": "^2.1.12",
     "@tiptap/extension-link": "^2.10.3",
     "@tiptap/extension-placeholder": "^2.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 173a26e..3a25c0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,8 +87,8 @@ importers:
         specifier: ^7.14.3
         version: 7.17.7(@mantine/core@7.17.7(@mantine/hooks@7.17.7(react@18.3.1))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.7(react@18.3.1))(@tiptap/extension-link@2.11.9(@tiptap/core@2.11.9(@tiptap/pm@2.11.9))(@tiptap/pm@2.11.9))(@tiptap/react@2.11.9(@tiptap/core@2.11.9(@tiptap/pm@2.11.9))(@tiptap/pm@2.11.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tabler/icons-react':
-        specifier: ^2.40.0
-        version: 2.47.0(react@18.3.1)
+        specifier: ^3.33.0
+        version: 3.33.0(react@18.3.1)
       '@tiptap/extension-highlight':
         specifier: ^2.1.12
         version: 2.11.9(@tiptap/core@2.11.9(@tiptap/pm@2.11.9))
@@ -242,7 +242,7 @@ importers:
         version: 9.1.0
       eslint-plugin-import:
         specifier: ^2.31.0
-        version: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+        version: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       husky:
         specifier: ^8.0.0
         version: 8.0.3
@@ -2619,13 +2619,13 @@ packages:
   '@swc/types@0.1.14':
     resolution: {integrity: sha512-PbSmTiYCN+GMrvfjrMo9bdY+f2COnwbdnoMw7rqU/PI5jXpKjxOGZ0qqZCImxnT81NkNsKnmEpvu+hRXLBeCJg==}
 
-  '@tabler/icons-react@2.47.0':
-    resolution: {integrity: sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g==}
+  '@tabler/icons-react@3.33.0':
+    resolution: {integrity: sha512-ay+HDecCjmFl25Lg14hcl59ffSjnOcgfrlV14shu8Qjbz+Xh4LRus93DuoyLQte8YSxE7Pe5gnEz6OF0GtwNtw==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+      react: '>= 16'
 
-  '@tabler/icons@2.47.0':
-    resolution: {integrity: sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==}
+  '@tabler/icons@3.33.0':
+    resolution: {integrity: sha512-NZeFfzcYe7xcBHR3zKoCSrw/cFWvfj6LjenPQ48yVMTGdX854HH9nH44ZfMH8rrDzHBllfjwl4CIX6Vh2tyN0Q==}
 
   '@testing-library/dom@9.3.4':
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
@@ -11312,13 +11312,12 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@tabler/icons-react@2.47.0(react@18.3.1)':
+  '@tabler/icons-react@3.33.0(react@18.3.1)':
     dependencies:
-      '@tabler/icons': 2.47.0
-      prop-types: 15.8.1
+      '@tabler/icons': 3.33.0
       react: 18.3.1
 
-  '@tabler/icons@2.47.0': {}
+  '@tabler/icons@3.33.0': {}
 
   '@testing-library/dom@9.3.4':
     dependencies:
@@ -13411,8 +13410,8 @@ snapshots:
       '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.1.6)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -13431,37 +13430,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.1.6)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13472,7 +13471,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.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
diff --git a/routes/index.ts b/routes/index.ts
index f4efb9f..128e9a9 100644
--- a/routes/index.ts
+++ b/routes/index.ts
@@ -41,6 +41,9 @@ export const PATH_APPS = {
   fileManager: {
     root: path(ROOT_APPS, '/file-manager'),
   },
+  products: {
+    root: path(ROOT_APPS, '/products'),
+  },
 };
 
 export const PATH_PAGES = {

From e4822d548b819221d0d8eca61caca40cd58c4c5a Mon Sep 17 00:00:00 2001
From: kelvin <kelvin.kiprop96@gmail.com>
Date: Sat, 17 May 2025 00:36:53 +0300
Subject: [PATCH 2/4] feat: added product page and minimal create product
 components

---
 app/api/products/route.ts                     |  76 ++++++++
 .../products/components/NewProductDrawer.tsx  | 149 +++++++++++++++
 .../ProductCard/ProductsCard.module.css       |   3 +
 .../ProductCard/ProductsCard.stories.tsx      |  36 ++++
 .../components/ProductCard/ProductsCard.tsx   | 178 ++++++++++++++++++
 app/apps/products/layout.tsx                  |  15 ++
 app/apps/products/page.tsx                    | 169 +++++++++++++++++
 components/Navigation/Navigation.tsx          |   2 +-
 types/products.ts                             |  35 ++++
 9 files changed, 662 insertions(+), 1 deletion(-)
 create mode 100644 app/api/products/route.ts
 create mode 100644 app/apps/products/components/NewProductDrawer.tsx
 create mode 100644 app/apps/products/components/ProductCard/ProductsCard.module.css
 create mode 100644 app/apps/products/components/ProductCard/ProductsCard.stories.tsx
 create mode 100644 app/apps/products/components/ProductCard/ProductsCard.tsx
 create mode 100644 app/apps/products/layout.tsx
 create mode 100644 app/apps/products/page.tsx
 create mode 100644 types/products.ts

diff --git a/app/api/products/route.ts b/app/api/products/route.ts
new file mode 100644
index 0000000..3f0e1ce
--- /dev/null
+++ b/app/api/products/route.ts
@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  try {
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/products',
+      {
+        method: 'GET',
+        headers,
+      },
+    );
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to fetch products' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/products',
+      {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+      },
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to create product', details: data },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to create product' },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/apps/products/components/NewProductDrawer.tsx b/app/apps/products/components/NewProductDrawer.tsx
new file mode 100644
index 0000000..847d6f3
--- /dev/null
+++ b/app/apps/products/components/NewProductDrawer.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  LoadingOverlay,
+  Stack,
+  TextInput,
+  Textarea,
+} from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+import { useAuth } from '@/hooks/useAuth';
+
+type NewProjectDrawerProps = Omit<DrawerProps, 'title' | 'children'> & {
+  onProjectCreated?: () => void;
+};
+
+export const NewProductDrawer = ({
+  onProjectCreated,
+  ...drawerProps
+}: NewProjectDrawerProps) => {
+  const { user, accessToken } = useAuth();
+  const [loading, setLoading] = useState(false);
+
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      title: '',
+      description: '',
+      status: 1,
+      startDate: null,
+      dueDate: null,
+    },
+    validate: {
+      title: isNotEmpty('Project title cannot be empty'),
+      description: isNotEmpty('Project description cannot be empty'),
+      startDate: isNotEmpty('Start date cannot be empty'),
+    },
+  });
+
+  const handleSubmit = async (values: typeof form.values) => {
+    setLoading(true);
+    try {
+      // Format dates for API
+      const payload = {
+        ...values,
+        startDate: values.startDate
+          ? new Date(values.startDate).toISOString()
+          : null,
+        dueDate: values.dueDate ? new Date(values.dueDate).toISOString() : null,
+        ownerId: user?.id,
+      };
+
+      const response = await fetch('/api/projects', {
+        method: 'POST',
+        headers: {
+          Authorization: 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create project');
+      }
+
+      // Show success notification
+      notifications.show({
+        title: 'Success',
+        message: 'Project created successfully',
+        color: 'green',
+      });
+
+      // Reset form
+      form.reset();
+
+      // Close drawer
+      if (drawerProps.onClose) {
+        drawerProps.onClose();
+      }
+
+      // Trigger refresh of projects list
+      if (onProjectCreated) {
+        onProjectCreated();
+      }
+    } catch (error) {
+      // Show error notification
+      notifications.show({
+        title: 'Error',
+        message:
+          error instanceof Error ? error.message : 'Failed to create project',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Drawer {...drawerProps} title="Create a new project">
+      <LoadingOverlay visible={loading} />
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <Stack>
+          <TextInput
+            label="Project title"
+            placeholder="Project title"
+            key={form.key('title')}
+            {...form.getInputProps('title')}
+            required
+          />
+          <Textarea
+            label="Project description"
+            placeholder="Project description"
+            key={form.key('description')}
+            {...form.getInputProps('description')}
+            required
+          />
+          <DateInput
+            label="Start date"
+            placeholder="Start date"
+            key={form.key('startDate')}
+            {...form.getInputProps('startDate')}
+            clearable
+          />
+          <DateInput
+            label="Due date"
+            placeholder="Due date"
+            key={form.key('dueDate')}
+            {...form.getInputProps('dueDate')}
+            clearable
+          />
+          <Button type="submit" mt="md" loading={loading}>
+            Create Project
+          </Button>
+        </Stack>
+      </form>
+    </Drawer>
+  );
+};
+
+export default NewProductDrawer;
diff --git a/app/apps/products/components/ProductCard/ProductsCard.module.css b/app/apps/products/components/ProductCard/ProductsCard.module.css
new file mode 100644
index 0000000..fdf3b53
--- /dev/null
+++ b/app/apps/products/components/ProductCard/ProductsCard.module.css
@@ -0,0 +1,3 @@
+.tasksCompleted {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
diff --git a/app/apps/products/components/ProductCard/ProductsCard.stories.tsx b/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
new file mode 100644
index 0000000..24d0572
--- /dev/null
+++ b/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
@@ -0,0 +1,36 @@
+import ProductsCard from './ProductsCard';
+
+import type { StoryObj } from '@storybook/react';
+
+const MOCKS = {
+  id: 'fe2c25c6-2cbc-4c73-9edc-8477af0000a8',
+  title: 'Gembucket',
+  description:
+    'Phasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.\n\nDuis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.',
+  status: 'active',
+  image: null,
+  completion: 86,
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Projects/Card',
+  component: ProductsCard,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductsCard>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    ...MOCKS,
+    style: { width: 500 },
+  },
+};
diff --git a/app/apps/products/components/ProductCard/ProductsCard.tsx b/app/apps/products/components/ProductCard/ProductsCard.tsx
new file mode 100644
index 0000000..302af92
--- /dev/null
+++ b/app/apps/products/components/ProductCard/ProductsCard.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+import {
+  Avatar,
+  Badge,
+  Button,
+  Divider,
+  Flex,
+  Group,
+  MantineColor,
+  Paper,
+  PaperProps,
+  Progress,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+import { IconNotebook, IconShare } from '@tabler/icons-react';
+
+import { Surface } from '@/components';
+import { IProject } from '@/types/projects';
+
+import classes from './ProductsCard.module.css';
+
+const avatars = [
+  'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
+  'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
+  'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
+];
+
+type Status =
+  | 'active'
+  | 'inactive'
+  | 'pending'
+  | 'completed'
+  | 'cancelled'
+  | 'on hold'
+  | 'in progress'
+  | 'archived'
+  | 'suspended'
+  | 'expired'
+  | string;
+
+type StatusProps = {
+  status: Status;
+};
+
+const StatusBadge = ({ status }: StatusProps) => {
+  let color: MantineColor;
+
+  switch (status) {
+    case 'expired':
+      color = 'dark';
+      break;
+    case 'active':
+      color = 'green';
+      break;
+    case 'cancelled':
+      color = 'gray';
+      break;
+    case 'archived':
+      color = 'gray';
+      break;
+    case 'inactive':
+      color = 'dark';
+      break;
+    case 'completed':
+      color = 'green';
+      break;
+    case 'in progress':
+      color = 'indigo';
+      break;
+    case 'pending':
+      color = 'yellow.8';
+      break;
+    case 'suspended':
+      color = 'red';
+      break;
+    case 'on hold':
+      color = 'pink';
+      break;
+    default:
+      color = 'gray';
+  }
+
+  return (
+    <Badge color={color} variant="filled" radius="sm">
+      {status}
+    </Badge>
+  );
+};
+
+type ProjectsCardProps = {
+  data: IProject;
+} & Omit<PaperProps, 'children'>;
+
+const ProductsCard = (props: ProjectsCardProps) => {
+  const { data, ...others } = props;
+
+  if (!data) {
+    return null;
+  }
+
+  const {
+    statusText = 'pending',
+    title = 'Untitled Project',
+    description = 'No description provided',
+    owner = {},
+    completionPercentage = 0,
+  } = data;
+
+  return (
+    <Surface component={Paper} {...others}>
+      <Stack gap="sm">
+        <Flex justify="space-between" align="center">
+          <Flex align="center" gap="xs">
+            <Text fz="md" fw={600}>
+              {title}
+            </Text>
+          </Flex>
+          <StatusBadge status={statusText.toLowerCase()} />
+        </Flex>
+        <Text fz="sm" lineClamp={3}>
+          {description}
+        </Text>
+
+        <Text fz="sm">
+          Tasks completed:{' '}
+          <Text span fz="sm" fw={500} className={classes.tasksCompleted}>
+            {completionPercentage}
+          </Text>
+        </Text>
+
+        <Progress
+          value={completionPercentage}
+          mt={5}
+          size="sm"
+          color={
+            completionPercentage < 21
+              ? 'red'
+              : completionPercentage < 51
+                ? 'yellow'
+                : completionPercentage < 86
+                  ? 'blue'
+                  : 'green'
+          }
+        />
+
+        <Flex align="center" gap="xs">
+          <Tooltip label={data.owner.userName}>
+            <Avatar size="md" radius="xl" />
+          </Tooltip>
+          <Text>{data.owner.userName}</Text>
+        </Flex>
+        <Divider />
+
+        <Group gap="sm">
+          <Button
+            size="compact-md"
+            variant="subtle"
+            leftSection={<IconShare size={14} />}
+          >
+            Share
+          </Button>
+          <Button
+            size="compact-md"
+            variant="subtle"
+            leftSection={<IconNotebook size={14} />}
+          >
+            Learn More
+          </Button>
+        </Group>
+      </Stack>
+    </Surface>
+  );
+};
+
+export default ProductsCard;
diff --git a/app/apps/products/layout.tsx b/app/apps/products/layout.tsx
new file mode 100644
index 0000000..d4bff3d
--- /dev/null
+++ b/app/apps/products/layout.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import { Container, Stack } from '@mantine/core';
+
+export default function DashboardLayout({ children }: PropsWithChildren) {
+  return (
+    <Container fluid>
+      <Stack gap="lg">
+        {children}
+      </Stack>
+    </Container>
+  );
+}
diff --git a/app/apps/products/page.tsx b/app/apps/products/page.tsx
new file mode 100644
index 0000000..f719b56
--- /dev/null
+++ b/app/apps/products/page.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import {
+  Anchor,
+  Button,
+  Paper,
+  PaperProps,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useDisclosure, useFetch } from '@mantine/hooks';
+import { IconMoodEmpty, IconPlus } from '@tabler/icons-react';
+
+import NewProductDrawer from '@/app/apps/products/components/NewProductDrawer';
+import ProductsCard from '@/app/apps/products/components/ProductCard/ProductsCard';
+import { ErrorAlert, PageHeader, Surface } from '@/components';
+import { useAuth } from '@/hooks/useAuth';
+import { PATH_DASHBOARD } from '@/routes';
+import { IApiResponse } from '@/types/api-response';
+import { IProduct } from '@/types/products';
+
+const items = [
+  { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
+  { title: 'Products', href: '#' },
+].map((item, index) => (
+  <Anchor href={item.href} key={index}>
+    {item.title}
+  </Anchor>
+));
+
+const CARD_PROPS: Omit<PaperProps, 'children'> = {
+  p: 'md',
+  shadow: 'md',
+  radius: 'md',
+};
+
+function Products() {
+  const { permissions, accessToken } = useAuth();
+  const {
+    data: productsData,
+    loading: productsLoading,
+    error: productsError,
+    refetch: refetchProducts,
+  } = useFetch<IApiResponse<IProduct[]>>('/api/products', {
+    headers: {
+      Authorization: 'Bearer ' + accessToken,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  // Check if the user has a can add project
+  const canAddProject = permissions?.includes('Permissions.Projects.Create');
+
+  const [newDrawerOpened, { open: newProjectOpen, close: newProductClose }] =
+    useDisclosure(false);
+
+  const handleProductCreated = useCallback(() => {
+    refetchProducts();
+  }, [refetchProducts]);
+
+  const projectItems = productsData?.data?.map((p: any) => (
+    <ProductsCard key={p.id} data={p} {...CARD_PROPS} />
+  ));
+
+  const renderContent = () => {
+    if (productsLoading) {
+      return (
+        <SimpleGrid
+          cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+          spacing={{ base: 10, sm: 'xl' }}
+          verticalSpacing={{ base: 'md', sm: 'xl' }}
+        >
+          {Array.from({ length: 8 }).map((o, i) => (
+            <Skeleton
+              key={`project-loading-${i}`}
+              visible={true}
+              height={300}
+            />
+          ))}
+        </SimpleGrid>
+      );
+    }
+
+    if (productsError || !productsData?.succeeded) {
+      return (
+        <ErrorAlert
+          title="Error loading products"
+          message={productsData?.errors?.join(',')}
+        />
+      );
+    }
+
+    if (!productsData?.data?.length) {
+      return (
+        <Surface component={Paper} p="md">
+          <Stack align="center">
+            <IconMoodEmpty size={24} />
+            <Title order={4}>No products found</Title>
+            <Text>
+              You don&apos;t have any products yet. Create one to get started.
+            </Text>
+            {canAddProject && (
+              <Button
+                leftSection={<IconPlus size={18} />}
+                onClick={newProjectOpen}
+              >
+                New Project
+              </Button>
+            )}
+          </Stack>
+        </Surface>
+      );
+    }
+
+    return (
+      <SimpleGrid
+        cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+        spacing={{ base: 10, sm: 'xl' }}
+        verticalSpacing={{ base: 'md', sm: 'xl' }}
+      >
+        {projectItems}
+      </SimpleGrid>
+    );
+  };
+
+  return (
+    <>
+      <>
+        <title>Products | DesignSparx</title>
+        <meta
+          name="description"
+          content="Explore our versatile dashboard website template featuring a stunning array of themes and meticulously crafted components. Elevate your web project with seamless integration, customizable themes, and a rich variety of components for a dynamic user experience. Effortlessly bring your data to life with our intuitive dashboard template, designed to streamline development and captivate users. Discover endless possibilities in design and functionality today!"
+        />
+      </>
+      <PageHeader
+        title="Products"
+        breadcrumbItems={items}
+        actionButton={
+          canAddProject &&
+          productsData?.data?.length && (
+            <Button
+              leftSection={<IconPlus size={18} />}
+              onClick={newProjectOpen}
+            >
+              New Product
+            </Button>
+          )
+        }
+      />
+
+      {renderContent()}
+
+      <NewProductDrawer
+        opened={newDrawerOpened}
+        onClose={newProductClose}
+        position="right"
+        onProjectCreated={handleProductCreated}
+      />
+    </>
+  );
+}
+
+export default Products;
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index f913267..21c7a19 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -86,7 +86,7 @@ const mockdata = [
         icon: IconFiles,
         link: PATH_APPS.fileManager.root,
       },
-      { label: 'Products', icon: IconPackages, link: PATH_APPS.orders },
+      { label: 'Products', icon: IconPackages, link: PATH_APPS.products.root },
     ],
   },
   {
diff --git a/types/products.ts b/types/products.ts
new file mode 100644
index 0000000..a65d4a8
--- /dev/null
+++ b/types/products.ts
@@ -0,0 +1,35 @@
+import { IUser } from '@/types/user';
+
+export interface IProduct {
+  id: string;
+  title: any;
+  description: any;
+  price: number;
+  quantityInStock: number;
+  sku: any;
+  imageUrl: any;
+  isActive: boolean;
+  status: number;
+  category: IProductCategory;
+  categoryId: string;
+  categoryName: any;
+  created: string;
+  modified: string;
+  createdById: any;
+  createdBy: IUser;
+  modifiedById: any;
+  modifiedBy: IUser;
+}
+
+export interface IProductCategory {
+  id: string;
+  title: any;
+  description: any;
+  created: string;
+  modified: string;
+  createdById: any;
+  createdBy: IUser;
+  modifiedById: any;
+  modifiedBy: IUser;
+  productCount: number;
+}

From 79daba291ae5618490fccd9e467e360688c4751d Mon Sep 17 00:00:00 2001
From: kelvin <kelvin.kiprop96@gmail.com>
Date: Sat, 17 May 2025 16:03:22 +0300
Subject: [PATCH 3/4] feat: fixed nested nav link styling issue

---
 components/Navigation/Links/Links.module.css | 40 ++++++--------------
 components/Navigation/Links/Links.tsx        |  2 +-
 2 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/components/Navigation/Links/Links.module.css b/components/Navigation/Links/Links.module.css
index 57d19a5..9167a19 100644
--- a/components/Navigation/Links/Links.module.css
+++ b/components/Navigation/Links/Links.module.css
@@ -56,44 +56,26 @@
   display: block;
   text-decoration: none;
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  margin-left: var(--mantine-spacing-xl);
   font-size: var(--mantine-font-size-sm);
-  border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-white);
-  }
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  cursor: pointer;
+  transition: all ease .2s;
 
   @mixin hover {
     transition: all ease .2s;
-
-    @mixin light {
-      background-color: var(--mantine-color-white);
-      color: var(--mantine-primary-color-filled);
-    }
-
-    @mixin dark {
-      background-color: var(--mantine-color-black);
-      color: var(--mantine-primary-color-light-color);
-    }
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-black));
+    color: light-dark(var(--mantine-primary-color-filled), var(--mantine-primary-color-light-color));
   }
 
   &[data-active] {
     &,
     &:hover {
-      @mixin light {
-        background-color: var(--mantine-primary-color-filled-hover);
-        color: var(--mantine-color-white);
-      }
-
-      @mixin dark {
-        background-color: var(--mantine-primary-color-light-hover);
-        color: var(--mantine-color-black);
-      }
+      background-color: light-dark(var(--mantine-color-dark-2), var(--mantine-color-dark-9));
+      color: light-dark(var(--mantine-primary-color-filled), var(--mantine-primary-color-light-color));
     }
   }
 }
diff --git a/components/Navigation/Links/Links.tsx b/components/Navigation/Links/Links.tsx
index 7bcb5c8..162c817 100644
--- a/components/Navigation/Links/Links.tsx
+++ b/components/Navigation/Links/Links.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import {
   Box,
+  Button,
   Collapse,
   Group,
   Menu,
@@ -48,7 +49,6 @@ export function LinksGroup(props: LinksGroupProps) {
   const LinkItem = ({ link }: { link: { label: string; link: string } }) => {
     return (
       <Text
-        component="button"
         className={classes.link}
         onClick={() => {
           router.push(link.link);

From 7d0940ced83c8a79a1bd86f7ab3005a46717656e Mon Sep 17 00:00:00 2001
From: kelvin <kelvin.kiprop96@gmail.com>
Date: Sat, 17 May 2025 16:07:39 +0300
Subject: [PATCH 4/4] feat: added product & product categories creating and
 fetching logic

---
 app/api/product-categories/route.ts           |  76 +++++++
 .../components/NewCategoryDrawerProps.tsx     | 118 ++++++++++
 app/apps/products/categories/page.tsx         | 174 +++++++++++++++
 .../products/components/NewProductDrawer.tsx  | 131 +++++++----
 .../ProductCard/ProductsCard.stories.tsx      |   2 +-
 .../components/ProductCard/ProductsCard.tsx   | 204 +++---------------
 app/apps/products/page.tsx                    |   6 +-
 components/Navigation/Navigation.tsx          |   9 +-
 constants/api.ts                              |   3 -
 routes/index.ts                               |   4 +-
 10 files changed, 510 insertions(+), 217 deletions(-)
 create mode 100644 app/api/product-categories/route.ts
 create mode 100644 app/apps/products/categories/components/NewCategoryDrawerProps.tsx
 create mode 100644 app/apps/products/categories/page.tsx
 delete mode 100644 constants/api.ts

diff --git a/app/api/product-categories/route.ts b/app/api/product-categories/route.ts
new file mode 100644
index 0000000..4f6fcc2
--- /dev/null
+++ b/app/api/product-categories/route.ts
@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  try {
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/product-categories',
+      {
+        method: 'GET',
+        headers,
+      },
+    );
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to fetch product categories' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/product-categories',
+      {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+      },
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to create product category', details: data },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to create product category' },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/apps/products/categories/components/NewCategoryDrawerProps.tsx b/app/apps/products/categories/components/NewCategoryDrawerProps.tsx
new file mode 100644
index 0000000..46ac493
--- /dev/null
+++ b/app/apps/products/categories/components/NewCategoryDrawerProps.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  LoadingOverlay,
+  Stack,
+  TextInput,
+  Textarea,
+} from '@mantine/core';
+import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+import { useAuth } from '@/hooks/useAuth';
+
+type NewCategoryDrawerProps = Omit<DrawerProps, 'title' | 'children'> & {
+  onCategoryCreated?: () => void;
+};
+
+export const NewCategoryDrawer = ({
+  onCategoryCreated,
+  ...drawerProps
+}: NewCategoryDrawerProps) => {
+  const { user, accessToken } = useAuth();
+  const [loading, setLoading] = useState(false);
+
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      title: '',
+      description: '',
+    },
+    validate: {
+      title: isNotEmpty('Category title cannot be empty'),
+    },
+  });
+
+  const handleSubmit = async (values: typeof form.values) => {
+    setLoading(true);
+    try {
+      const payload = {
+        ...values,
+        createdById: user?.id,
+      };
+
+      const response = await fetch('/api/product-categories', {
+        method: 'POST',
+        headers: {
+          Authorization: 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create category');
+      }
+
+      notifications.show({
+        title: 'Success',
+        message: 'Category created successfully',
+        color: 'green',
+      });
+
+      form.reset();
+
+      if (drawerProps.onClose) {
+        drawerProps.onClose();
+      }
+
+      if (onCategoryCreated) {
+        onCategoryCreated();
+      }
+    } catch (error) {
+      notifications.show({
+        title: 'Error',
+        message:
+          error instanceof Error ? error.message : 'Failed to create category',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Drawer {...drawerProps} title="Create a new product category">
+      <LoadingOverlay visible={loading} />
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <Stack>
+          <TextInput
+            label="Title"
+            placeholder="Category title"
+            key={form.key('title')}
+            {...form.getInputProps('title')}
+            required
+          />
+          <Textarea
+            label="Description"
+            placeholder="Category description"
+            key={form.key('description')}
+            {...form.getInputProps('description')}
+          />
+          <Button type="submit" mt="md" loading={loading}>
+            Create Category
+          </Button>
+        </Stack>
+      </form>
+    </Drawer>
+  );
+};
+
+export default NewCategoryDrawer;
diff --git a/app/apps/products/categories/page.tsx b/app/apps/products/categories/page.tsx
new file mode 100644
index 0000000..5fd594e
--- /dev/null
+++ b/app/apps/products/categories/page.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import {
+  Anchor,
+  Button,
+  Group,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useDisclosure, useFetch } from '@mantine/hooks';
+import { IconMoodEmpty, IconPlus } from '@tabler/icons-react';
+
+import NewCategoryDrawer from '@/app/apps/products/categories/components/NewCategoryDrawerProps';
+import { ErrorAlert, PageHeader, Surface } from '@/components';
+import { useAuth } from '@/hooks/useAuth';
+import { PATH_DASHBOARD } from '@/routes';
+import { IApiResponse } from '@/types/api-response';
+import { IProductCategory } from '@/types/products';
+
+const items = [
+  { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
+  { title: 'Products', href: '#' },
+  { title: 'Categories', href: '#' },
+].map((item, index) => (
+  <Anchor href={item.href} key={index}>
+    {item.title}
+  </Anchor>
+));
+
+const CategoryCard = ({ data }: { data: IProductCategory }) => (
+  <Paper p="md" shadow="md" radius="md">
+    <Title order={4} mb="xs">{data.title}</Title>
+    <Text size="sm" c="dimmed" mb="md" lineClamp={2}>
+      {data.description || 'No description'}
+    </Text>
+    <Group>
+      <Text size="sm">Products: {data.productCount}</Text>
+    </Group>
+  </Paper>
+);
+
+function Categories() {
+  const { permissions, accessToken } = useAuth();
+  const {
+    data: categoriesData,
+    loading: categoriesLoading,
+    error: categoriesError,
+    refetch: refetchCategories,
+  } = useFetch<IApiResponse<IProductCategory[]>>('/api/product-categories', {
+    headers: {
+      Authorization: 'Bearer ' + accessToken,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  const canAddCategory = permissions?.includes('Permissions.Products.Create');
+
+  const [newDrawerOpened, { open: newCategoryOpen, close: newCategoryClose }] =
+    useDisclosure(false);
+
+  const handleCategoryCreated = useCallback(() => {
+    refetchCategories();
+  }, [refetchCategories]);
+
+  const categoryItems = categoriesData?.data?.map((category) => (
+    <CategoryCard key={category.id} data={category} />
+  ));
+
+  const renderContent = () => {
+    if (categoriesLoading) {
+      return (
+        <SimpleGrid
+          cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+          spacing={{ base: 10, sm: 'xl' }}
+          verticalSpacing={{ base: 'md', sm: 'xl' }}
+        >
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton
+              key={`category-loading-${i}`}
+              visible={true}
+              height={150}
+            />
+          ))}
+        </SimpleGrid>
+      );
+    }
+
+    if (categoriesError || !categoriesData?.succeeded) {
+      return (
+        <ErrorAlert
+          title="Error loading categories"
+          message={categoriesData?.errors?.join(',')}
+        />
+      );
+    }
+
+    if (!categoriesData?.data?.length) {
+      return (
+        <Surface component={Paper} p="md">
+          <Stack align="center">
+            <IconMoodEmpty size={24} />
+            <Title order={4}>No categories found</Title>
+            <Text>
+              You don&apos;t have any product categories yet. Create one to get started.
+            </Text>
+            {canAddCategory && (
+              <Button
+                leftSection={<IconPlus size={18} />}
+                onClick={newCategoryOpen}
+              >
+                New Category
+              </Button>
+            )}
+          </Stack>
+        </Surface>
+      );
+    }
+
+    return (
+      <SimpleGrid
+        cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+        spacing={{ base: 10, sm: 'xl' }}
+        verticalSpacing={{ base: 'md', sm: 'xl' }}
+      >
+        {categoryItems}
+      </SimpleGrid>
+    );
+  };
+
+  return (
+    <>
+      <>
+        <title>Product Categories | DesignSparx</title>
+        <meta
+          name="description"
+          content="Manage product categories in your dashboard"
+        />
+      </>
+      <PageHeader
+        title="Product Categories"
+        breadcrumbItems={items}
+        actionButton={
+          canAddCategory &&
+          categoriesData?.data?.length && (
+            <Button
+              leftSection={<IconPlus size={18} />}
+              onClick={newCategoryOpen}
+            >
+              New Category
+            </Button>
+          )
+        }
+      />
+
+      {renderContent()}
+
+      <NewCategoryDrawer
+        opened={newDrawerOpened}
+        onClose={newCategoryClose}
+        position="right"
+        onCategoryCreated={handleCategoryCreated}
+      />
+    </>
+  );
+}
+
+export default Categories;
diff --git a/app/apps/products/components/NewProductDrawer.tsx b/app/apps/products/components/NewProductDrawer.tsx
index 847d6f3..050ec31 100644
--- a/app/apps/products/components/NewProductDrawer.tsx
+++ b/app/apps/products/components/NewProductDrawer.tsx
@@ -1,12 +1,14 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import {
   Button,
   Drawer,
   DrawerProps,
   LoadingOverlay,
+  NumberInput,
+  Select,
   Stack,
   TextInput,
   Textarea,
@@ -16,48 +18,88 @@ import { isNotEmpty, useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
 
 import { useAuth } from '@/hooks/useAuth';
+import { IProductCategory } from '@/types/products';
 
 type NewProjectDrawerProps = Omit<DrawerProps, 'title' | 'children'> & {
-  onProjectCreated?: () => void;
+  onProductCreated?: () => void;
 };
 
 export const NewProductDrawer = ({
-  onProjectCreated,
+  onProductCreated,
   ...drawerProps
 }: NewProjectDrawerProps) => {
   const { user, accessToken } = useAuth();
   const [loading, setLoading] = useState(false);
+  const [categories, setCategories] = useState<
+    { value: string; label: string }[]
+  >([]);
+  const [categoriesLoading, setCategoriesLoading] = useState(false);
+
+  // Fetch categories when drawer opens
+  useEffect(() => {
+    if (drawerProps.opened) {
+      fetchCategories();
+    }
+  }, [drawerProps.opened]);
+
+  const fetchCategories = async () => {
+    setCategoriesLoading(true);
+    try {
+      const response = await fetch('/api/product-categories', {
+        method: 'GET',
+        headers: {
+          Authorization: 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const result = await response.json();
+
+      if (result.succeeded && result.data) {
+        const categoryOptions = result.data.map(
+          (category: IProductCategory) => ({
+            value: category.id,
+            label: category.title,
+          }),
+        );
+        setCategories(categoryOptions);
+      }
+    } catch (error) {
+      console.error('Error fetching categories:', error);
+    } finally {
+      setCategoriesLoading(false);
+    }
+  };
 
   const form = useForm({
     mode: 'controlled',
     initialValues: {
       title: '',
       description: '',
+      price: 0,
+      quantityInStock: 0,
+      sku: '',
       status: 1,
-      startDate: null,
-      dueDate: null,
+      categoryId: '',
     },
     validate: {
-      title: isNotEmpty('Project title cannot be empty'),
-      description: isNotEmpty('Project description cannot be empty'),
-      startDate: isNotEmpty('Start date cannot be empty'),
+      title: isNotEmpty('Product title cannot be empty'),
+      description: isNotEmpty('Product description cannot be empty'),
+      price: isNotEmpty('Price cannot be empty'),
+      quantityInStock: isNotEmpty('Quantity in stock cannot be empty'),
+      categoryId: isNotEmpty('Category cannot be empty'),
     },
   });
 
   const handleSubmit = async (values: typeof form.values) => {
     setLoading(true);
     try {
-      // Format dates for API
       const payload = {
         ...values,
-        startDate: values.startDate
-          ? new Date(values.startDate).toISOString()
-          : null,
-        dueDate: values.dueDate ? new Date(values.dueDate).toISOString() : null,
-        ownerId: user?.id,
+        createdById: user?.id,
       };
 
-      const response = await fetch('/api/projects', {
+      const response = await fetch('/api/products', {
         method: 'POST',
         headers: {
           Authorization: 'Bearer ' + accessToken,
@@ -69,13 +111,13 @@ export const NewProductDrawer = ({
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || 'Failed to create project');
+        throw new Error(data.error || 'Failed to create product');
       }
 
       // Show success notification
       notifications.show({
         title: 'Success',
-        message: 'Project created successfully',
+        message: 'Product created successfully',
         color: 'green',
       });
 
@@ -87,16 +129,16 @@ export const NewProductDrawer = ({
         drawerProps.onClose();
       }
 
-      // Trigger refresh of projects list
-      if (onProjectCreated) {
-        onProjectCreated();
+      // Trigger refresh of products list
+      if (onProductCreated) {
+        onProductCreated();
       }
     } catch (error) {
       // Show error notification
       notifications.show({
         title: 'Error',
         message:
-          error instanceof Error ? error.message : 'Failed to create project',
+          error instanceof Error ? error.message : 'Failed to create product',
         color: 'red',
       });
     } finally {
@@ -105,40 +147,51 @@ export const NewProductDrawer = ({
   };
 
   return (
-    <Drawer {...drawerProps} title="Create a new project">
+    <Drawer {...drawerProps} title="Create a new product">
       <LoadingOverlay visible={loading} />
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack>
           <TextInput
-            label="Project title"
-            placeholder="Project title"
+            label="Title"
+            placeholder="title"
             key={form.key('title')}
             {...form.getInputProps('title')}
             required
           />
           <Textarea
-            label="Project description"
-            placeholder="Project description"
+            label="Description"
+            placeholder="description"
             key={form.key('description')}
             {...form.getInputProps('description')}
             required
           />
-          <DateInput
-            label="Start date"
-            placeholder="Start date"
-            key={form.key('startDate')}
-            {...form.getInputProps('startDate')}
-            clearable
+          <NumberInput
+            label="Price"
+            placeholder="price"
+            {...form.getInputProps('price')}
+            required
+          />
+          <NumberInput
+            label="Quantity in stock"
+            placeholder="quantity in stock"
+            {...form.getInputProps('quantityInStock')}
+            required
           />
-          <DateInput
-            label="Due date"
-            placeholder="Due date"
-            key={form.key('dueDate')}
-            {...form.getInputProps('dueDate')}
-            clearable
+          <TextInput
+            label="SKU"
+            placeholder="Stock Keeping Unit"
+            {...form.getInputProps('sku')}
+          />
+          <Select
+            label="Category"
+            placeholder="Select category"
+            data={categories}
+            disabled={categoriesLoading}
+            {...form.getInputProps('categoryId')}
+            required
           />
           <Button type="submit" mt="md" loading={loading}>
-            Create Project
+            Create Product
           </Button>
         </Stack>
       </form>
diff --git a/app/apps/products/components/ProductCard/ProductsCard.stories.tsx b/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
index 24d0572..ed2f4e1 100644
--- a/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
+++ b/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
@@ -14,7 +14,7 @@ const MOCKS = {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
-  title: 'Projects/Card',
+  title: 'Products/Card',
   component: ProductsCard,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/app/apps/products/components/ProductCard/ProductsCard.tsx b/app/apps/products/components/ProductCard/ProductsCard.tsx
index 302af92..8c29fee 100644
--- a/app/apps/products/components/ProductCard/ProductsCard.tsx
+++ b/app/apps/products/components/ProductCard/ProductsCard.tsx
@@ -1,178 +1,44 @@
 'use client';
 
-import {
-  Avatar,
-  Badge,
-  Button,
-  Divider,
-  Flex,
-  Group,
-  MantineColor,
-  Paper,
-  PaperProps,
-  Progress,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
-import { IconNotebook, IconShare } from '@tabler/icons-react';
+import { Badge, Group, Paper, PaperProps, Text, Title } from '@mantine/core';
 
-import { Surface } from '@/components';
-import { IProject } from '@/types/projects';
+import { IProduct } from '@/types/products';
 
-import classes from './ProductsCard.module.css';
-
-const avatars = [
-  'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
-  'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
-  'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
-];
-
-type Status =
-  | 'active'
-  | 'inactive'
-  | 'pending'
-  | 'completed'
-  | 'cancelled'
-  | 'on hold'
-  | 'in progress'
-  | 'archived'
-  | 'suspended'
-  | 'expired'
-  | string;
-
-type StatusProps = {
-  status: Status;
-};
-
-const StatusBadge = ({ status }: StatusProps) => {
-  let color: MantineColor;
-
-  switch (status) {
-    case 'expired':
-      color = 'dark';
-      break;
-    case 'active':
-      color = 'green';
-      break;
-    case 'cancelled':
-      color = 'gray';
-      break;
-    case 'archived':
-      color = 'gray';
-      break;
-    case 'inactive':
-      color = 'dark';
-      break;
-    case 'completed':
-      color = 'green';
-      break;
-    case 'in progress':
-      color = 'indigo';
-      break;
-    case 'pending':
-      color = 'yellow.8';
-      break;
-    case 'suspended':
-      color = 'red';
-      break;
-    case 'on hold':
-      color = 'pink';
-      break;
-    default:
-      color = 'gray';
-  }
-
-  return (
-    <Badge color={color} variant="filled" radius="sm">
-      {status}
-    </Badge>
-  );
-};
-
-type ProjectsCardProps = {
-  data: IProject;
-} & Omit<PaperProps, 'children'>;
-
-const ProductsCard = (props: ProjectsCardProps) => {
-  const { data, ...others } = props;
-
-  if (!data) {
-    return null;
-  }
-
-  const {
-    statusText = 'pending',
-    title = 'Untitled Project',
-    description = 'No description provided',
-    owner = {},
-    completionPercentage = 0,
-  } = data;
+interface ProductsCardProps extends Omit<PaperProps, 'children'> {
+  data: IProduct;
+}
 
+export function ProductsCard({ data, ...props }: ProductsCardProps) {
   return (
-    <Surface component={Paper} {...others}>
-      <Stack gap="sm">
-        <Flex justify="space-between" align="center">
-          <Flex align="center" gap="xs">
-            <Text fz="md" fw={600}>
-              {title}
-            </Text>
-          </Flex>
-          <StatusBadge status={statusText.toLowerCase()} />
-        </Flex>
-        <Text fz="sm" lineClamp={3}>
-          {description}
-        </Text>
-
-        <Text fz="sm">
-          Tasks completed:{' '}
-          <Text span fz="sm" fw={500} className={classes.tasksCompleted}>
-            {completionPercentage}
-          </Text>
-        </Text>
-
-        <Progress
-          value={completionPercentage}
-          mt={5}
-          size="sm"
-          color={
-            completionPercentage < 21
-              ? 'red'
-              : completionPercentage < 51
-                ? 'yellow'
-                : completionPercentage < 86
-                  ? 'blue'
-                  : 'green'
-          }
-        />
-
-        <Flex align="center" gap="xs">
-          <Tooltip label={data.owner.userName}>
-            <Avatar size="md" radius="xl" />
-          </Tooltip>
-          <Text>{data.owner.userName}</Text>
-        </Flex>
-        <Divider />
-
-        <Group gap="sm">
-          <Button
-            size="compact-md"
-            variant="subtle"
-            leftSection={<IconShare size={14} />}
-          >
-            Share
-          </Button>
-          <Button
-            size="compact-md"
-            variant="subtle"
-            leftSection={<IconNotebook size={14} />}
-          >
-            Learn More
-          </Button>
-        </Group>
-      </Stack>
-    </Surface>
+    <Paper {...props}>
+      <Group justify="space-between" mb="xs">
+        <Title order={4}>{data.title}</Title>
+        <Badge color={data.isActive ? 'green' : 'red'}>
+          {data.isActive ? 'Active' : 'Inactive'}
+        </Badge>
+      </Group>
+
+      <Text lineClamp={2} mb="md" size="sm" c="dimmed">
+        {data.description}
+      </Text>
+
+      <Group>
+        <Text fw={500}>Price: ${data.price.toFixed(2)}</Text>
+        <Text>Stock: {data.quantityInStock}</Text>
+      </Group>
+
+      <Text size="sm" mt="md">
+        Category:{' '}
+        {data.categoryName ||
+          (data.category && data.category.title) ||
+          'Uncategorized'}
+      </Text>
+
+      <Text size="xs" c="dimmed" mt="sm">
+        SKU: {data.sku || 'N/A'}
+      </Text>
+    </Paper>
   );
-};
+}
 
 export default ProductsCard;
diff --git a/app/apps/products/page.tsx b/app/apps/products/page.tsx
index f719b56..7ba5535 100644
--- a/app/apps/products/page.tsx
+++ b/app/apps/products/page.tsx
@@ -22,7 +22,7 @@ import { ErrorAlert, PageHeader, Surface } from '@/components';
 import { useAuth } from '@/hooks/useAuth';
 import { PATH_DASHBOARD } from '@/routes';
 import { IApiResponse } from '@/types/api-response';
-import { IProduct } from '@/types/products';
+import { IProduct, IProductCategory } from '@/types/products';
 
 const items = [
   { title: 'Dashboard', href: PATH_DASHBOARD.default },
@@ -110,7 +110,7 @@ function Products() {
                 leftSection={<IconPlus size={18} />}
                 onClick={newProjectOpen}
               >
-                New Project
+                New Product
               </Button>
             )}
           </Stack>
@@ -160,7 +160,7 @@ function Products() {
         opened={newDrawerOpened}
         onClose={newProductClose}
         position="right"
-        onProjectCreated={handleProductCreated}
+        onProductCreated={handleProductCreated}
       />
     </>
   );
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 21c7a19..03a4acd 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -86,7 +86,14 @@ const mockdata = [
         icon: IconFiles,
         link: PATH_APPS.fileManager.root,
       },
-      { label: 'Products', icon: IconPackages, link: PATH_APPS.products.root },
+      {
+        label: 'Products',
+        icon: IconPackages,
+        links: [
+          { label: 'List', link: PATH_APPS.products.root },
+          { label: 'Categories', link: PATH_APPS.products.categories },
+        ],
+      },
     ],
   },
   {
diff --git a/constants/api.ts b/constants/api.ts
deleted file mode 100644
index d7d8d58..0000000
--- a/constants/api.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const BASE_API_URL = process.env.NEXT_PUBLIC_API_URL + '/api';
-
-export const PROJECTS_API_URL = BASE_API_URL + '/projects';
diff --git a/routes/index.ts b/routes/index.ts
index 128e9a9..f639371 100644
--- a/routes/index.ts
+++ b/routes/index.ts
@@ -15,6 +15,7 @@ const ROOTS_ERRORS = '/error';
 const ROOTS_CHANGELOG = '/changelog';
 const ROOTS_AUTH_PROVIDERS = '/authProviders';
 const ROOTS_ABOUT = '/pages/about';
+const ROOTS_PRODUCTS = '/products';
 
 export const PATH_DASHBOARD = {
   root: ROOTS_DASHBOARD,
@@ -42,7 +43,8 @@ export const PATH_APPS = {
     root: path(ROOT_APPS, '/file-manager'),
   },
   products: {
-    root: path(ROOT_APPS, '/products'),
+    root: path(ROOT_APPS, ROOTS_PRODUCTS),
+    categories: path(ROOT_APPS, ROOTS_PRODUCTS + '/categories'),
   },
 };