first commit

2026-02-19 17:29:27 +05:30
commit 94d0aabec6
125 changed files with 14511 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.git
+.gitignore
+Dockerfile
+docker-compose.yml
+.env
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,70 @@
+# Node dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Build output
+dist/
+build/
+out/
+
+# Logs
+logs
+*.log
+logs/*.log
+
+# System files
+.DS_Store
+Thumbs.db
+
+# IDE / Editor files
+.vscode/
+.idea/
+
+# Coverage / Testing
+coverage/
+*.lcov
+jest-test-results.json
+
+# Temporary files
+*.tmp
+*.temp
+*.swp
+
+# Cache
+.cache/
+.next/
+.nuxt/
+.sass-cache/
+*.tgz
+
+# Misc
+*.pid
+*.seed
+*.pid.lock
+
+# TypeScript
+*.tsbuildinfo
+
+# Compiled binaries
+*.exe
+*.dll
+*.so
+*.dylib
+*.pyc
+*.pyo
+*.pyd
+
+# OS-specific files
+ehthumbs.db
+Icon?
+Desktop.ini
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+# ---------- Build Stage ----------
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+
+# ---------- Production Stage ----------
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 5174
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Panel</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "vc_ecomm_admin_panel",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/nunito-sans": "^5.2.7",
+    "@headlessui/react": "^2.2.9",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@reduxjs/toolkit": "^2.10.1",
+    "axios": "^1.12.2",
+    "framer-motion": "^12.23.24",
+    "lucide-react": "^0.552.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-icons": "^5.5.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.9.5",
+    "recharts": "^3.4.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
+    "vite": "^7.1.7"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/bitmap.png
+++ b/public/bitmap.png
--- a/public/main-logo.png
+++ b/public/main-logo.png
--- a/public/orders_icon.png
+++ b/public/orders_icon.png
--- a/public/product_icon.png
+++ b/public/product_icon.png
--- a/public/stats_icon.png
+++ b/public/stats_icon.png
--- a/public/users_icon.png
+++ b/public/users_icon.png
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,16 @@
+// src/App.jsx
+import React from "react";
+import { Provider } from "react-redux";
+import { store } from "./app/store";
+import AdminRoutes from "./routes/AdminRoutes";
+import "./index.css"; // Tailwind or custom styles
+
+function App() {
+  return (
+    <Provider store={store}>
+      <AdminRoutes />
+    </Provider>
+  );
+}
+
+export default App;
--- a/src/app/api.js
+++ b/src/app/api.js
@@ -0,0 +1,15 @@
+// src/app/api.js
+import axios from 'axios';
+
+const instance = axios.create({
+    baseURL: import.meta.env.VITE_API_URL,
+});
+
+// Attach token automatically
+instance.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+export default instance;
--- a/src/app/hooks.js
+++ b/src/app/hooks.js
--- a/src/app/rootReducer.js
+++ b/src/app/rootReducer.js
--- a/src/app/store.js
+++ b/src/app/store.js
@@ -0,0 +1,44 @@
+// src/app/store.js
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "../features/auth/authSlice";
+import dashboardReducer from "../features/dashboard/dashboardSlice";
+
+import { orderApi } from "../features/orders/ordersAPI";
+import productApi from "../features/products/productAPI";
+import { categoryApi } from "../features/categories/categoryAPI";
+import { salesApi } from "../features/report/salesAPI";
+import { customersApi } from "../features/report/customersAPI";
+import { ordersApi } from "../features/report/ordersAPI";
+import { inventoryApi } from "../features/report/inventoryAPI";
+// import { couponApi } from "../features/coupons/couponSlice"; // ✅ FIXED
+import { couponApi } from "../features/coupons/couponAPI";
+
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+    dashboard: dashboardReducer,
+
+    // RTK Query reducers
+    [orderApi.reducerPath]: orderApi.reducer,
+    [productApi.reducerPath]: productApi.reducer,
+    [categoryApi.reducerPath]: categoryApi.reducer,
+    [salesApi.reducerPath]: salesApi.reducer,
+    [customersApi.reducerPath]: customersApi.reducer,
+    [ordersApi.reducerPath]: ordersApi.reducer,
+    [inventoryApi.reducerPath]: inventoryApi.reducer,
+    [couponApi.reducerPath]: couponApi.reducer, // ✅ OK
+  },
+
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(
+      orderApi.middleware,
+      productApi.middleware,
+      categoryApi.middleware,
+      salesApi.middleware,
+      customersApi.middleware,
+      ordersApi.middleware,
+      inventoryApi.middleware,
+      couponApi.middleware // ✅ REQUIRED
+    ),
+});
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Pagination = () => {
+  return (
+    <div>Pagination</div>
+  )
+}
+
+export default Pagination
--- a/src/components/common/ConfirmModal.jsx
+++ b/src/components/common/ConfirmModal.jsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+const ConfirmModal = ({ isOpen, title, message, onCancel, onConfirm }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[999] flex items-center justify-center bg-black/10">
+      <div
+        className="bg-white/90 backdrop-blur-xl border border-white/40 
+        rounded-3xl shadow-2xl p-8 w-[90%] max-w-md text-center"
+      >
+        {/* Title */}
+        <h2 className="text-2xl font-bold text-gray-900 mb-3">{title}</h2>
+
+        {/* Message */}
+        <p className="text-gray-600 mb-8 text-[17px]">{message}</p>
+
+        {/* Buttons */}
+        <div className="flex justify-center gap-5">
+          <button
+            onClick={onCancel}
+            className="
+              px-6 py-3 rounded-xl text-gray-700 
+              border border-gray-300 bg-white
+              hover:bg-gray-100 hover:shadow-md
+              transition-all duration-150 font-medium
+            "
+          >
+            Cancel
+          </button>
+
+          <button
+            onClick={onConfirm}
+            className="
+              px-7 py-3 rounded-xl text-white font-semibold
+              bg-[#4880FF] hover:bg-[#6B9BFF]
+              shadow-lg hover:shadow-xl
+              transition-all duration-150
+            "
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;
--- a/src/components/common/Loader.jsx
+++ b/src/components/common/Loader.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Loader = () => {
+  return (
+    <div>Loader</div>
+  )
+}
+
+export default Loader
--- a/src/components/common/Modal.jsx
+++ b/src/components/common/Modal.jsx
--- a/src/components/common/Pagination.jsx
+++ b/src/components/common/Pagination.jsx
@@ -0,0 +1,62 @@
+// src/components/common/Pagination.jsx
+import React from "react";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
+
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  if (totalPages <= 1) return null;
+
+  const pageNumbers = [];
+  for (let i = 1; i <= totalPages; i++) {
+    pageNumbers.push(i);
+  }
+
+  const handlePrevious = () => currentPage > 1 && onPageChange(currentPage - 1);
+  const handleNext = () => currentPage < totalPages && onPageChange(currentPage + 1);
+
+  return (
+    <div className="flex items-center justify-end mt-6 space-x-2">
+      {/* Previous Button */}
+      <button
+        onClick={handlePrevious}
+        disabled={currentPage === 1}
+        className={`flex items-center justify-center px-3 py-2 rounded-full border transition 
+          ${currentPage === 1
+            ? "text-gray-400 border-gray-300 cursor-not-allowed"
+            : "text-blue-600 border-blue-600 hover:bg-blue-50 hover:text-blue-700"
+          }`}
+      >
+        <FiChevronLeft size={18} />
+      </button>
+
+      {/* Page Numbers */}
+      {pageNumbers.map((num) => (
+        <button
+          key={num}
+          onClick={() => onPageChange(num)}
+          className={`px-4 py-2 rounded-full border font-medium transition
+            ${num === currentPage
+              ? "bg-blue-600 text-white border-blue-600 shadow-md"
+              : "text-gray-700 border-gray-300 hover:bg-gray-100"
+            }`}
+        >
+          {num}
+        </button>
+      ))}
+
+      {/* Next Button */}
+      <button
+        onClick={handleNext}
+        disabled={currentPage === totalPages}
+        className={`flex items-center justify-center px-3 py-2 rounded-full border transition
+          ${currentPage === totalPages
+            ? "text-gray-400 border-gray-300 cursor-not-allowed"
+            : "text-blue-600 border-blue-600 hover:bg-blue-50 hover:text-blue-700"
+          }`}
+      >
+        <FiChevronRight size={18} />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
--- a/src/components/common/SearchBar.jsx
+++ b/src/components/common/SearchBar.jsx
--- a/src/components/common/Table.jsx
+++ b/src/components/common/Table.jsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+const Table = ({ columns = [], data = [], actions }) => {
+  return (
+    <div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
+      <table className="min-w-full text-sm text-center">
+        {" "}
+        {/* <-- text-center added */}
+        <thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className="px-6 py-3 text-center">
+                {col.label}
+              </th>
+            ))}
+            {actions && <th className="px-6 py-3 text-center">Action</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr
+              key={row.id || index}
+              className="border-t hover:bg-gray-50 transition-colors"
+            >
+              {columns.map((col) => (
+                <td
+                  key={col.key}
+                  className="px-6 py-3 text-gray-700 text-center"
+                >
+                  {col.render
+                    ? col.render(row[col.key], row, index) // pass index here
+                    : row[col.key]}
+                </td>
+              ))}
+
+              {actions && (
+                <td className="px-6 py-3 text-center flex items-center justify-center gap-2">
+                  {actions(row)}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;
--- a/src/components/dashboard/RecentOrders.jsx
+++ b/src/components/dashboard/RecentOrders.jsx
--- a/src/components/dashboard/SalesChart.jsx
+++ b/src/components/dashboard/SalesChart.jsx
--- a/src/components/dashboard/StatsCard.jsx
+++ b/src/components/dashboard/StatsCard.jsx
--- a/src/components/layout/AdminLayout.jsx
+++ b/src/components/layout/AdminLayout.jsx
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { FiMenu, FiBell } from "react-icons/fi";
+
+const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
+  return (
+    <header className="flex items-center justify-between bg-white shadow px-4 py-3 sticky top-0 z-20">
+      <div className="flex items-center gap-4">
+        <button
+          className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
+          onClick={toggleMobileSidebar}
+        >
+          <FiMenu className="text-[#4880FF]" />
+        </button>
+
+        <button
+          className="hidden md:block p-2 rounded-md hover:bg-gray-100 transition"
+          onClick={toggleSidebar}
+        >
+          <FiMenu className="text-[#4880FF]" />
+        </button>
+
+        <h1 className="text-xl font-semibold hidden md:block text-[#4880FF]">
+          Dashboard
+        </h1>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <button className="p-2 rounded-md hover:bg-gray-100 transition">
+          <FiBell className="text-[#4880FF]" />
+        </button>
+        <div className="hidden md:flex items-center gap-2">
+          <span className="text-gray-700">Admin</span>
+          <img
+            src="/avatar.png"
+            alt="avatar"
+            className="w-8 h-8 rounded-full border-2 border-[#4880FF]"
+          />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.jsx
@@ -0,0 +1,232 @@
+import React, { useState, useEffect } from "react";
+import {
+  FiHome,
+  FiBox,
+  FiUsers,
+  FiShoppingCart,
+  FiLogOut,
+  FiX,
+  FiChevronDown,
+  FiChevronUp,
+} from "react-icons/fi";
+import { Link } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import ConfirmModal from "../common/ConfirmModal";
+
+const Sidebar = ({
+  isCollapsed,
+  // toggleSidebar,
+  mobileOpen,
+  toggleMobileSidebar,
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Separate dropdown states
+  const [productsOpen, setProductsOpen] = useState(false);
+  const [categoriesOpen, setCategoriesOpen] = useState(false);
+  const [logoutOpen, setLogoutOpen] = useState(false);
+
+  // Auto-open dropdown when route matches
+  useEffect(() => {
+    if (location.pathname.startsWith("/products")) setProductsOpen(true);
+    if (location.pathname.startsWith("/categories")) setCategoriesOpen(true);
+  }, [location.pathname]);
+
+  const menuItems = [
+    { name: "Dashboard", icon: <FiHome />, path: "/dashboard" },
+    { name: "Orders", icon: <FiShoppingCart />, path: "/orders" },
+    {
+      name: "Products",
+      icon: <FiBox />,
+      subMenu: [
+        { name: "Product List", path: "/products" },
+        { name: "Add Product", path: "/products/add" },
+      ],
+      state: productsOpen,
+      setState: setProductsOpen,
+    },
+    { name: "Users", icon: <FiUsers />, path: "/users" },
+    // { name: "Report", icon: <FiUsers />, path: "/reports" },
+    {
+      name: "Categories",
+      icon: <FiBox />,
+      subMenu: [
+        { name: "Category List", path: "/categories" },
+        { name: "Add Category", path: "/categories/add" },
+      ],
+      state: categoriesOpen,
+      setState: setCategoriesOpen,
+    },
+     { name: "Returns", icon: <FiBox />, path: "/returns" },
+     { name: "Coupons", icon: <FiBox />, path: "/coupons" },
+  ];
+
+  const isActive = (path) => location.pathname === path;
+
+  const handleLogout = () => {
+    setLogoutOpen(false);
+    navigate("/login");
+  };
+
+  const activeClass = `
+    ${isCollapsed ? "w-12 justify-center" : "w-[193px] justify-start"}
+    bg-[#4880FF] text-white rounded-[6px] h-[46px] flex items-center gap-[10px] px-4 py-[12px]
+    shadow-md transition-all duration-200
+  `;
+
+  const normalClass = `
+    ${isCollapsed ? "w-12 justify-center" : "w-[193px] justify-start"}
+    text-gray-700 hover:bg-[#4880FF]/10 hover:text-[#4880FF] rounded-[6px] h-[46px]
+    flex items-center gap-[10px] px-4 py-[12px] transition-all duration-200
+  `;
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      <div
+        className={`fixed inset-0 bg-black/40 z-40 md:hidden transition-opacity ${
+          mobileOpen ? "opacity-100 visible" : "opacity-0 invisible"
+        }`}
+        onClick={toggleMobileSidebar}
+      ></div>
+
+      {/* Sidebar */}
+      <div
+        className={`fixed inset-y-0 left-0 z-50 bg-white shadow-lg transform transition-all duration-300
+          ${
+            mobileOpen ? "translate-x-0" : "-translate-x-full"
+          } md:translate-x-0 md:static
+          ${isCollapsed ? "w-20" : "w-64"} flex flex-col justify-between
+        `}
+      >
+        {/* Logo & Hamburger */}
+        <div className="flex items-center m-3 px-4 py-4 border-gray-200">
+          <h2
+            className={`absolute left-1/2 -translate-x-1/2 font-bold text-xl text-[#4880FF] ${
+              isCollapsed ? "hidden" : "block"
+            }`}
+          >
+            Vaishnavi
+          </h2>
+
+          <div className="flex items-center gap-2">
+            <button
+              className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
+              onClick={toggleMobileSidebar}
+            >
+              <FiX className="text-[#4880FF]" />
+            </button>
+          </div>
+        </div>
+
+        {/* Menu */}
+        <nav className="mt-2 flex-1 px-2 space-y-2 flex flex-col items-center">
+          {menuItems.map((item, index) => {
+            if (item.subMenu) {
+              const parentActive = item.subMenu.some((sub) =>
+                isActive(sub.path)
+              );
+
+              return (
+                <div key={index}>
+                  <button
+                    className={`flex items-center justify-between px-4 py-[12px] rounded-[6px] transition-all duration-200
+                      ${isCollapsed ? "w-12" : "w-[193px]"}
+                      ${
+                        item.state || parentActive
+                          ? "bg-[#4880FF] text-white shadow-md"
+                          : "text-gray-700 hover:bg-[#4880FF]/10 hover:text-[#4880FF]"
+                      }
+                    `}
+                    onClick={() => item.setState(!item.state)}
+                  >
+                    <div className="flex items-center gap-[10px]">
+                      {item.icon}
+                      <span
+                        className={`${
+                          isCollapsed ? "hidden" : "block font-medium"
+                        }`}
+                      >
+                        {item.name}
+                      </span>
+                    </div>
+                    {!isCollapsed &&
+                      (item.state ? <FiChevronUp /> : <FiChevronDown />)}
+                  </button>
+
+                  {/* Submenu */}
+                  {item.state && !isCollapsed && (
+                    <div className="ml-6 mt-2 flex flex-col gap-2">
+                      {/* {item.subMenu.map((sub) => (
+                        <Link
+                          to={sub.path}
+                          className={
+                            isActive(sub.path) ? activeClass : normalClass
+                          }
+                        >
+                          {sub.name}
+                        </Link>
+                      ))} */}
+                      {item.subMenu.map((sub) => (
+                        <Link
+                          key={sub.id} // 👈 ADD THIS
+                          to={sub.path}
+                          className={
+                            isActive(sub.path) ? activeClass : normalClass
+                          }
+                        >
+                          {sub.name}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            return (
+              <Link
+                key={index}
+                to={item.path}
+                className={isActive(item.path) ? activeClass : normalClass}
+              >
+                {item.icon}
+                <span
+                  className={`${isCollapsed ? "hidden" : "block font-medium"}`}
+                >
+                  {item.name}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Logout */}
+        <div className="px-4 mb-6 flex justify-center">
+          <button
+            className={`flex items-center justify-center gap-[10px]
+              ${isCollapsed ? "w-12" : "w-[193px]"}
+              h-[46px] px-4 py-[12px] rounded-[6px]
+              bg-red-100 text-red-600 hover:bg-red-200 transition-all`}
+            onClick={() => setLogoutOpen(true)}
+          >
+            <FiLogOut />
+            {!isCollapsed && <span className="font-medium">Logout</span>}
+          </button>
+        </div>
+      </div>
+
+      {/* Confirm Modal */}
+      <ConfirmModal
+        isOpen={logoutOpen}
+        title="Logout"
+        message="Are you sure you want to logout?"
+        onCancel={() => setLogoutOpen(false)}
+        onConfirm={handleLogout}
+      />
+    </>
+  );
+};
+
+export default Sidebar;
--- a/src/components/products/ProductCard.jsx
+++ b/src/components/products/ProductCard.jsx
--- a/src/components/products/ProductForm.jsx
+++ b/src/components/products/ProductForm.jsx
--- a/src/components/products/ProductTable.jsx
+++ b/src/components/products/ProductTable.jsx
--- a/src/features/analytics/analyticsAPI.js
+++ b/src/features/analytics/analyticsAPI.js
--- a/src/features/analytics/analyticsSlice.js
+++ b/src/features/analytics/analyticsSlice.js
--- a/src/features/auth/authAPI.js
+++ b/src/features/auth/authAPI.js
--- a/src/features/auth/authSlice.js
+++ b/src/features/auth/authSlice.js
@@ -0,0 +1,64 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+// import axios from "axios";
+import api from "../../app/api";
+
+export const login = createAsyncThunk(
+  "auth/login",
+  async (credentials, thunkAPI) => {
+    try {
+      const response = await api.post("/auth/login", credentials);
+
+      console.log("Login response:", response.data);
+
+      const token = response.data?.token || response.data?.data?.token;
+      const user = response.data?.user || response.data?.data?.user;
+
+      if (!token) {
+        throw new Error("No token returned from server");
+      }
+
+      localStorage.setItem("token", token);
+      return { user, token };
+    } catch (error) {
+      return thunkAPI.rejectWithValue(
+        error.response?.data?.message || "Login failed"
+      );
+    }
+  }
+);
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState: {
+    user: null,
+    loading: false,
+    error: null,
+    token: localStorage.getItem("token") || null,
+  },
+  reducers: {
+    logout: (state) => {
+      state.user = null;
+      state.token = null;
+      localStorage.removeItem("token");
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(login.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(login.fulfilled, (state, action) => {
+        state.loading = false;
+        state.user = action.payload.user;
+        state.token = action.payload.token;
+      })
+      .addCase(login.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export const { logout } = authSlice.actions;
+export default authSlice.reducer;
--- a/src/features/auth/authUtils.js
+++ b/src/features/auth/authUtils.js
--- a/src/features/categories/categoryAPI.js
+++ b/src/features/categories/categoryAPI.js
@@ -0,0 +1,81 @@
+// src/features/categories/categoryAPI.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const categoryApi = createApi({
+  reducerPath: "categoryApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
+    prepareHeaders: (headers, { getState }) => {
+      const token = getState().auth?.token;
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  tagTypes: ["Categories"],
+  endpoints: (builder) => ({
+    getCategoryTree: builder.query({
+      query: () => "/admin/tree",
+      providesTags: ["Categories"],
+    }),
+
+    addCategory: builder.mutation({
+      query: (body) => ({
+        url: "/admin/categories",
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: ["Categories"],
+    }),
+
+    updateCategory: builder.mutation({
+      query: ({ id, ...body }) => ({
+        url: `/admin/categories/${id}`,
+        method: "PUT",
+        body,
+      }),
+      invalidatesTags: ["Categories"],
+    }),
+
+    getCategoryById: builder.query({
+      query: (id) => `/admin/categories/${id}`,
+    }),
+
+    updateCategoryStatus: builder.mutation({
+      query: ({ id, isActive }) => ({
+        url: `/admin/categories/${id}/status`,
+        method: "PATCH",
+        body: { isActive },
+      }),
+      invalidatesTags: ["Categories"],
+    }),
+
+    deleteCategory: builder.mutation({
+      query: (id) => ({
+        url: `/admin/categories/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["Categories"],
+    }),
+
+    reorderCategories: builder.mutation({
+      query: (orders) => ({
+        url: "/admin/categories/reorder",
+        method: "PATCH",
+        body: { orders },
+      }),
+      invalidatesTags: ["Categories"],
+    }),
+  }),
+});
+
+export const {
+  useGetCategoryTreeQuery,
+  useAddCategoryMutation,
+  useUpdateCategoryMutation,
+  useDeleteCategoryMutation,
+  useGetCategoryByIdQuery,
+  useUpdateCategoryStatusMutation,
+  useReorderCategoriesMutation,
+} = categoryApi;
+
+export default categoryApi;
--- a/src/features/categories/categorySlice.js
+++ b/src/features/categories/categorySlice.js
--- a/src/features/coupons/couponAPI.js
+++ b/src/features/coupons/couponAPI.js
@@ -0,0 +1,53 @@
+// src/features/coupons/couponAPI.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const couponApi = createApi({
+  reducerPath: "couponApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
+    prepareHeaders: (headers, { getState }) => {
+      const token = getState().auth?.token;
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  tagTypes: ["Coupons"],
+  endpoints: (builder) => ({
+    getCoupons: builder.query({
+      query: () => "/admin/coupons",
+      transformResponse: (res) => res.data.coupons,
+      providesTags: ["Coupons"],
+    }),
+
+    // ✅ GET SINGLE COUPON (NEW)
+    getCouponById: builder.query({
+      query: (id) => `/admin/coupons/${id}`,
+      transformResponse: (res) => res.data, // 🔥 IMPORTANT
+      providesTags: ["Coupons"],
+    }),
+
+    createCoupon: builder.mutation({
+      query: (body) => ({
+        url: "/admin/coupons",
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: ["Coupons"],
+    }),
+
+    toggleCouponStatus: builder.mutation({
+      query: (id) => ({
+        url: `/admin/coupons/${id}/toggle`,
+        method: "PATCH",
+      }),
+      invalidatesTags: ["Coupons"],
+    }),
+  }),
+});
+
+export const {
+  useGetCouponsQuery,
+  useGetCouponByIdQuery,
+  useCreateCouponMutation,
+  useToggleCouponStatusMutation,
+} = couponApi;
--- a/src/features/dashboard/dashboardSlice.js
+++ b/src/features/dashboard/dashboardSlice.js
@@ -0,0 +1,123 @@
+// import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+// import axios from "../../app/api";
+
+// // ✅ Async thunk to fetch dashboard stats
+// export const fetchDashboard = createAsyncThunk(
+//   "dashboard/fetchDashboard",
+//   async (_, { rejectWithValue }) => {
+//     try {
+//       const res = await axios.get("/admin/dashboard");
+//       return res.data.data;
+//     } catch (error) {
+//       return rejectWithValue(error.response?.data || error.message);
+//     }
+//   }
+// );
+
+// const dashboardSlice = createSlice({
+//   name: "dashboard",
+//   initialState: {
+//     stats: null,
+//     loading: false,
+//     error: null,
+//   },
+//   reducers: {},
+//   extraReducers: (builder) => {
+//     builder
+//       .addCase(fetchDashboard.pending, (state) => {
+//         state.loading = true;
+//         state.error = null;
+//       })
+//       .addCase(fetchDashboard.fulfilled, (state, action) => {
+//         state.loading = false;
+//         state.stats = action.payload;
+//       })
+//       .addCase(fetchDashboard.rejected, (state, action) => {
+//         state.loading = false;
+//         state.error = action.payload;
+//       });
+//   },
+// });
+
+// export default dashboardSlice.reducer;
+
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "../../app/api";
+
+/* =====================================================
+   1️⃣ Fetch Main Dashboard Data
+   Endpoint: GET /admin/dashboard
+===================================================== */
+export const fetchDashboard = createAsyncThunk(
+  "dashboard/fetchDashboard",
+  async (_, { rejectWithValue }) => {
+    try {
+      const res = await axios.get("/admin/dashboard");
+      return res.data.data;
+    } catch (error) {
+      return rejectWithValue(error.response?.data?.message || error.message);
+    }
+  },
+);
+
+/* =====================================================
+   2️⃣ Fetch Coupon Statistics
+   Endpoint: GET /admin/stats
+===================================================== */
+export const fetchCouponStats = createAsyncThunk(
+  "dashboard/fetchCouponStats",
+  async (_, { rejectWithValue }) => {
+    try {
+      const res = await axios.get("/admin/stats");
+      return res.data.data;
+    } catch (error) {
+      return rejectWithValue(error.response?.data?.message || error.message);
+    }
+  },
+);
+
+/* =====================================================
+   Dashboard Slice
+===================================================== */
+const dashboardSlice = createSlice({
+  name: "dashboard",
+  initialState: {
+    stats: null, // data from /admin/dashboard
+    couponStats: null, // data from /admin/stats
+    loading: false,
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+
+      /* ===== DASHBOARD DATA ===== */
+      .addCase(fetchDashboard.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(fetchDashboard.fulfilled, (state, action) => {
+        state.loading = false;
+        state.stats = action.payload;
+      })
+      .addCase(fetchDashboard.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      })
+
+      /* ===== COUPON STATS ===== */
+      .addCase(fetchCouponStats.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(fetchCouponStats.fulfilled, (state, action) => {
+        state.loading = false;
+        state.couponStats = action.payload;
+      })
+      .addCase(fetchCouponStats.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export default dashboardSlice.reducer;
--- a/src/features/orders/ordersAPI.js
+++ b/src/features/orders/ordersAPI.js
@@ -0,0 +1,107 @@
+// src/features/orders/orderApi.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const orderApi = createApi({
+  reducerPath: "orderApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL,
+    prepareHeaders: (headers, { getState }) => {
+      const token = getState().auth?.token;
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getOrders: builder.query({
+      query: ({ page = 1, limit = 10 }) =>
+        `/admin/orders?page=${page}&limit=${limit}`,
+      providesTags: ["Orders"],
+    }),
+
+    // ✅ ADD THIS
+    getOrderById: builder.query({
+      query: (id) => `/admin/orders/${id}`,
+      providesTags: ["Orders"],
+    }),
+
+    // =====================================================
+    // UPDATE ORDER STATUS (Delivery Admin)
+    // Used in: Order Details Page (Update to SHIPPED / DELIVERED etc.)
+    // =====================================================
+    updateOrderStatus: builder.mutation({
+      query: ({ id, status, trackingNumber }) => ({
+        url: `/delivery/admin/${id}/status`,
+        method: "PUT",
+        body: {
+          status,
+          trackingNumber,
+        },
+      }),
+      invalidatesTags: ["Orders"], // better
+    }),
+
+    getOrderHistory: builder.query({
+      query: (id) => `/admin/${id}/history`,
+    }),
+
+    // REQUESTED APPROVED REJECTEDCOMPLETED
+
+    // =====================================================
+    // RETURN REQUESTS (Admin - Pending / Approved / Rejected)
+    // Used in: Admin → Returns → Requests List
+    // Status: REQUESTED | APPROVED | REJECTED
+    // =====================================================
+    getReturnRequests: builder.query({
+      query: ({ page = 1, limit = 10 }) =>
+        `/orders/admin/returns?page=${page}&limit=${limit}`,
+      providesTags: ["Returns"],
+    }),
+
+    // =====================================================
+    // RETURN HISTORY (Admin - Completed / All Return Records)
+    // Used in: Admin → Returns → History Page
+    // =====================================================
+
+    getReturnedOrders: builder.query({
+      query: ({ page = 1, limit = 10 }) =>
+        `/orders/admin/returns/list?page=${page}&limit=${limit}`,
+      providesTags: ["Returns"],
+    }),
+
+    // =====================================================
+    // RETURN DETAILS (Single Return Order)
+    // Used in: Admin → Returns → View Details Page
+    // URL: /returns/:id
+    // =====================================================
+
+    getReturnRequestById: builder.query({
+      query: (id) => `/orders/admin/returns/${id}`,
+      providesTags: (result, error, id) => [{ type: "Returns", id }],
+    }),
+
+    // =====================================================
+    // UPDATE RETURN STATUS
+    // Used in: ReturnDetails page (Approve / Reject buttons)
+    // action = "APPROVE" | "REJECT"
+    // =====================================================
+    updateReturnStatus: builder.mutation({
+      query: ({ id, action }) => ({
+        url: `/${id}/return/status`,
+        method: "PUT",
+        body: { action }, // action = "APPROVE" | "REJECT"
+      }),
+      invalidatesTags: ["Returns"],
+    }),
+  }),
+});
+
+export const {
+  useGetOrdersQuery,
+  useGetOrderByIdQuery,
+  useGetReturnRequestsQuery,
+  useGetReturnedOrdersQuery,
+  useGetReturnRequestByIdQuery,
+  useUpdateReturnStatusMutation,
+  useUpdateOrderStatusMutation,
+  useGetOrderHistoryQuery,
+} = orderApi;
--- a/src/features/orders/ordersSlice.js
+++ b/src/features/orders/ordersSlice.js
--- a/src/features/products/productAPI.js
+++ b/src/features/products/productAPI.js
@@ -0,0 +1,23 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+const productApi = createApi({
+  reducerPath: "productApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api",
+    prepareHeaders: (headers, { getState }) => {
+      const token = getState().auth?.token;
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  tagTypes: ["Products"],
+  endpoints: (builder) => ({
+    getProducts: builder.query({
+      query: ({ page = 1, limit = 10 } = {}) => `/admin/products?page=${page}&limit=${limit}`,
+      providesTags: ["Products"],
+    }),
+  }),
+});
+
+export const { useGetProductsQuery } = productApi;
+export default productApi;
--- a/src/features/products/productSlice.js
+++ b/src/features/products/productSlice.js
--- a/src/features/products/productUtils.js
+++ b/src/features/products/productUtils.js
--- a/src/features/report/customersAPI.js
+++ b/src/features/report/customersAPI.js
@@ -0,0 +1,21 @@
+// src/features/reports/customersAPI.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const customersApi = createApi({
+  reducerPath: "customersApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api",
+    prepareHeaders: (headers) => {
+      const token = localStorage.getItem("token");
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getCustomersReport: builder.query({
+      query: () => "/admin/reports/customers",
+    }),
+  }),
+});
+
+export const { useGetCustomersReportQuery } = customersApi;
--- a/src/features/report/inventoryAPI.js
+++ b/src/features/report/inventoryAPI.js
@@ -0,0 +1,21 @@
+// src/features/reports/inventoryAPI.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const inventoryApi = createApi({
+  reducerPath: "inventoryApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api",
+    prepareHeaders: (headers) => {
+      const token = localStorage.getItem("token");
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getInventoryStats: builder.query({
+      query: () => "/admin/reports/inventory",
+    }),
+  }),
+});
+
+export const { useGetInventoryStatsQuery } = inventoryApi;
--- a/src/features/report/ordersAPI.js
+++ b/src/features/report/ordersAPI.js
@@ -0,0 +1,22 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const ordersApi = createApi({
+  reducerPath: "ordersApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api",
+    prepareHeaders: (headers) => {
+      const token = localStorage.getItem("token");
+      if (token) {
+        headers.set("Authorization", `Bearer ${token}`);
+      }
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getOrdersReport: builder.query({
+      query: () => "/admin/reports/orders",
+    }),
+  }),
+});
+
+export const { useGetOrdersReportQuery } = ordersApi;
--- a/src/features/report/salesAPI.js
+++ b/src/features/report/salesAPI.js
@@ -0,0 +1,20 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const salesApi = createApi({
+  reducerPath: "salesApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api",
+    prepareHeaders: (headers) => {
+      const token = localStorage.getItem("token");
+      if (token) headers.set("Authorization", `Bearer ${token}`);
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getSalesReport: builder.query({
+      query: () => "/admin/reports/sales",
+    }),
+  }),
+});
+
+export const { useGetSalesReportQuery } = salesApi;
--- a/src/features/users/userAPI.js
+++ b/src/features/users/userAPI.js
--- a/src/features/users/userSlice.js
+++ b/src/features/users/userSlice.js
--- a/src/hooks/useAuth.js
+++ b/src/hooks/useAuth.js
--- a/src/hooks/useDebounce.js
+++ b/src/hooks/useDebounce.js
--- a/src/hooks/useForm.js
+++ b/src/hooks/useForm.js
--- a/src/hooks/useToast.js
+++ b/src/hooks/useToast.js
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+body {
+  font-family: 'Nunito Sans', sans-serif;
+}
--- a/src/layouts/AuthLayout.jsx
+++ b/src/layouts/AuthLayout.jsx
--- a/src/layouts/Layout.jsx
+++ b/src/layouts/Layout.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import Sidebar from "../components/layout/Sidebar";
+import Header from "../components/layout/Header";
+
+const Layout = ({ children }) => {
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => setIsSidebarCollapsed(!isSidebarCollapsed);
+  const toggleMobileSidebar = () => setMobileSidebarOpen(!mobileSidebarOpen);
+
+  return (
+    <div className="flex h-screen bg-gray-100 overflow-hidden">
+      {/* Sidebar */}
+      <Sidebar
+        isCollapsed={isSidebarCollapsed}
+        mobileOpen={mobileSidebarOpen}
+        toggleMobileSidebar={toggleMobileSidebar}
+      />
+
+      {/* Main Content */}
+      <div className="flex flex-col flex-1 w-0 overflow-hidden">
+        {/* Header */}
+        <Header
+          toggleSidebar={toggleSidebar}
+          toggleMobileSidebar={toggleMobileSidebar}
+        />
+
+        {/* Page content */}
+        <main className="flex-1 relative overflow-y-auto p-4 md:p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
--- a/src/layouts/ProtectedRoute.jsx
+++ b/src/layouts/ProtectedRoute.jsx
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,25 @@
+import './index.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { store } from './app/store';
+import { BrowserRouter as Router } from 'react-router-dom';
+import AdminRoutes from './routes/AdminRoutes';
+
+
+import "@fontsource/nunito-sans/300.css";
+import "@fontsource/nunito-sans/400.css";
+import "@fontsource/nunito-sans/600.css";
+import "@fontsource/nunito-sans/700.css";
+
+
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <Router>
+        <AdminRoutes />
+      </Router>
+    </Provider>
+  </React.StrictMode>
+);
--- a/src/pages/Analytics/AnalyticsPage.jsx
+++ b/src/pages/Analytics/AnalyticsPage.jsx
--- a/src/pages/Analytics/RevenueChart.jsx
+++ b/src/pages/Analytics/RevenueChart.jsx
--- a/src/pages/Auth/ForgotPassword.jsx
+++ b/src/pages/Auth/ForgotPassword.jsx
--- a/src/pages/Auth/LoginPage.jsx
+++ b/src/pages/Auth/LoginPage.jsx
@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { login } from "../../features/auth/authSlice";
+import { useNavigate } from "react-router-dom";
+import { Eye, EyeOff } from "lucide-react";
+
+const LoginPage = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { loading, error } = useSelector((state) => state.auth);
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await dispatch(login({ email, password })).unwrap();
+      navigate("/dashboard");
+    } catch (err) {
+      console.error("Login failed:", err);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[#4880FF] px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 transform">
+        {/* Logo Section */}
+        <div className="flex flex-col items-center mb-8">
+          <img
+            src="/main-logo.png"
+            alt="Logo"
+            className="w-48 object-contain"
+          />
+          <h1 className="text-2xl font-bold text-[#202224]">Welcome Back</h1>
+          <p className="text-[ #202224] text-sm mt-1">
+            Login to your admin panel
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-4 text-sm text-red-600 bg-red-100 p-2 rounded">
+            {error}
+          </div>
+        )}
+
+        {/* Login Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className="block text-sm font-semibold text-[#757a79] mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              placeholder="admin@example.com"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#D8D8D8] focus:outline-none"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="relative">
+            <label className="block text-sm font-semibold text-[#757a79] mb-1">
+              Password
+            </label>
+            <input
+              type={showPassword ? "text" : "password"}
+              placeholder="••••••••"
+              className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#D8D8D8] focus:outline-none"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            {/* 👁️ Toggle Button */}
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute inset-y-0 right-3 top-6 flex items-center text-gray-500 hover:text-[#704F38]"
+              tabIndex={-1}
+            >
+              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+            </button>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className={`w-full py-2 text-white font-semibold rounded-lg transition-all duration-300 ${
+              loading
+                ? "bg-gray-400 cursor-not-allowed"
+                : "bg-[#4880FF] hover:bg-[#2F5BC4] shadow-md hover:shadow-lg"
+            }`}
+          >
+            {loading ? "Logging in..." : "Login"}
+          </button>
+        </form>
+
+        {/* Footer */}
+        <p className="text-center text-gray-500 text-xs mt-6">
+          © {new Date().getFullYear()} Vaishnavi creation. All rights reserved.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
--- a/src/pages/Auth/RegisterPage.jsx
+++ b/src/pages/Auth/RegisterPage.jsx
--- a/src/pages/Categories/CategoryDetails.jsx
+++ b/src/pages/Categories/CategoryDetails.jsx
@@ -0,0 +1,110 @@
+import React from "react";
+import { useParams, Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { useGetCategoryByIdQuery } from "../../features/categories/categoryAPI";
+
+const CategoryDetails = () => {
+  const { id } = useParams();
+  const { data, isLoading } = useGetCategoryByIdQuery(id);
+
+  const category = data?.data;
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading category details...
+      </div>
+    );
+  }
+
+  if (!category) {
+    return (
+      <div className="text-center mt-10 text-gray-600">Category not found!</div>
+    );
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      {/* Back */}
+      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <Link to="/categories" className="font-medium">
+          Back to Categories
+        </Link>
+      </div>
+
+      {/* Header */}
+      <div className="flex flex-col md:flex-row justify-between bg-white shadow-md rounded-2xl p-6 border">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{category.name}</h2>
+          <p className="text-gray-500 text-sm mt-1">{category.slug}</p>
+        </div>
+
+        <span
+          className={`mt-4 md:mt-0 px-4 py-2 rounded-full text-sm font-medium ${
+            category.isActive
+              ? "bg-green-100 text-green-700"
+              : "bg-red-100 text-red-700"
+          }`}
+        >
+          {category.isActive ? "Active" : "Inactive"}
+        </span>
+      </div>
+
+      {/* Info Grid */}
+      <div className="grid md:grid-cols-2 gap-6">
+        {/* Category Info */}
+        <div className="bg-white rounded-xl shadow-sm p-6 border space-y-3">
+          <h3 className="text-lg font-semibold border-b pb-2">
+            Category Information
+          </h3>
+
+          <InfoRow label="Description" value={category.description || "N/A"} />
+          <InfoRow label="Parent ID" value={category.parentId || "Root"} />
+          <InfoRow label="Sequence" value={category.sequence} />
+          <InfoRow label="Meta Title" value={category.metaTitle} />
+          <InfoRow label="Meta Description" value={category.metaDescription} />
+        </div>
+
+        {/* Meta & Dates */}
+        <div className="bg-white rounded-xl shadow-sm p-6 border space-y-3">
+          <h3 className="text-lg font-semibold border-b pb-2">System Info</h3>
+
+          <InfoRow
+            label="Created At"
+            value={new Date(category.createdAt).toLocaleString()}
+          />
+          <InfoRow
+            label="Updated At"
+            value={new Date(category.updatedAt).toLocaleString()}
+          />
+          <InfoRow label="Category ID" value={category.id} />
+        </div>
+      </div>
+
+      {/* Image */}
+      {category.image && (
+        <div className="bg-white rounded-xl shadow-sm p-6 border">
+          <h3 className="text-lg font-semibold border-b pb-3">
+            Category Image
+          </h3>
+
+          <img
+            src={category.image}
+            alt={category.name}
+            className="mt-4 w-64 h-64 object-cover rounded-xl border"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const InfoRow = ({ label, value }) => (
+  <div className="flex justify-between text-sm">
+    <span className="text-gray-600 font-medium">{label}:</span>
+    <span className="text-gray-800 text-right ml-4">{value}</span>
+  </div>
+);
+
+export default CategoryDetails;
--- a/src/pages/Categories/CategoryEdit.jsx
+++ b/src/pages/Categories/CategoryEdit.jsx
@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams, Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import {
+  useGetCategoryByIdQuery,
+  useUpdateCategoryMutation,
+} from "../../features/categories/categoryAPI";
+
+const CategoryEdit = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const { data, isLoading } = useGetCategoryByIdQuery(id);
+  const [updateCategory, { isLoading: isUpdating }] = useUpdateCategoryMutation();
+
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    image: "",
+    metaTitle: "",
+    metaDescription: "",
+  });
+
+  useEffect(() => {
+    if (data?.data) {
+      const { name, description, image, metaTitle, metaDescription } = data.data;
+      setForm({ name, description, image, metaTitle, metaDescription });
+    }
+  }, [data]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await updateCategory({ id, ...form }).unwrap();
+      alert("Category updated successfully!");
+      navigate("/categories");
+    } catch (error) {
+      console.error(error);
+      alert("Failed to update category");
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-10">Loading category...</div>;
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      {/* Back Link */}
+      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <Link to="/categories" className="font-medium">
+          Back to Categories
+        </Link>
+      </div>
+
+      {/* Form */}
+      <div className="bg-white rounded-xl shadow-md p-6 border">
+        <h2 className="text-2xl font-bold mb-6">Edit Category</h2>
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <FormInput
+            label="Name"
+            name="name"
+            value={form.name}
+            onChange={handleChange}
+            required
+          />
+          <FormInput
+            label="Description"
+            name="description"
+            value={form.description}
+            onChange={handleChange}
+          />
+          <FormInput
+            label="Image URL"
+            name="image"
+            value={form.image}
+            onChange={handleChange}
+          />
+          <FormInput
+            label="Meta Title"
+            name="metaTitle"
+            value={form.metaTitle}
+            onChange={handleChange}
+          />
+          <FormInput
+            label="Meta Description"
+            name="metaDescription"
+            value={form.metaDescription}
+            onChange={handleChange}
+          />
+
+          <button
+            type="submit"
+            disabled={isUpdating}
+            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+          >
+            {isUpdating ? "Updating..." : "Update Category"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+const FormInput = ({ label, name, value, onChange, required }) => (
+  <div>
+    <label className="block text-gray-700 font-medium mb-1">{label}</label>
+    <input
+      type="text"
+      name={name}
+      value={value}
+      onChange={onChange}
+      required={required}
+      className="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+    />
+  </div>
+);
+
+export default CategoryEdit;
--- a/src/pages/Categories/CategoryForm.jsx
+++ b/src/pages/Categories/CategoryForm.jsx
@@ -0,0 +1,377 @@
+// import React, { useState } from "react";
+// import { FiTag, FiAlignLeft, FiLayers, FiImage, FiType } from "react-icons/fi";
+// import {
+//   useAddCategoryMutation,
+//   useGetCategoryTreeQuery,
+// } from "../../features/categories/categoryAPI";
+
+// const AddCategoryPage = () => {
+//   const [form, setForm] = useState({
+//     name: "",
+//     description: "",
+//     image: "",
+//     parentId: "",
+//     metaTitle: "",
+//     metaDescription: "",
+//   });
+
+//   const { data, isLoading: loadingCategories } = useGetCategoryTreeQuery();
+//   const [addCategory, { isLoading: adding }] = useAddCategoryMutation();
+//   const categories = data?.data || [];
+
+//   const handleChange = (e) =>
+//     setForm({ ...form, [e.target.name]: e.target.value });
+
+//   const handleSubmit = async (e) => {
+//     e.preventDefault();
+//     try {
+//       const result = await addCategory({
+//         ...form,
+//         parentId: form.parentId || null,
+//       }).unwrap();
+//       console.log("Category added:", result);
+//       alert("Category added successfully!");
+//       // setForm({ name: "", description: "", parentId: "" });
+//       setForm({
+//         name: "",
+//         description: "",
+//         image: "",
+//         parentId: "",
+//         metaTitle: "",
+//         metaDescription: "",
+//       });
+//     } catch (err) {
+//       console.error("RTK Query error:", err);
+//       const errorMsg =
+//         err?.data?.message || // if server returned { message: "..." }
+//         err?.error || // if network/fetch error
+//         JSON.stringify(err) ||
+//         "Unknown error";
+//       alert("Error adding category: " + errorMsg);
+//     }
+//   };
+
+//   // Flatten categories tree for dropdown
+//   const flattenCategories = (nodes, level = 0) => {
+//     let list = [];
+//     nodes.forEach((node) => {
+//       list.push({ ...node, level });
+//       if (node.children?.length) {
+//         list = list.concat(flattenCategories(node.children, level + 1));
+//       }
+//     });
+//     return list;
+//   };
+
+//   const flatCategories = flattenCategories(categories);
+
+//   return (
+//     <div className="p-6 md:p-12 min-h-screen flex justify-center items-start">
+//       <div className="w-full max-w-2xl bg-white rounded-2xl shadow-2xl p-10 relative">
+//         <h2 className="text-3xl font-bold text-center text-blue-600 mb-8">
+//           <FiLayers className="inline mr-2" /> Add New Category
+//         </h2>
+
+//         <form onSubmit={handleSubmit} className="space-y-6">
+//           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+//             {/* Category Name */}
+//             <div className="flex items-center gap-3 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <FiTag className="text-gray-400 text-xl" />
+//               <input
+//                 type="text"
+//                 name="name"
+//                 value={form.name}
+//                 onChange={handleChange}
+//                 placeholder="Category Name"
+//                 required
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               />
+//             </div>
+
+//             {/* Image URL */}
+//             <div className="flex items-center gap-3 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <FiImage className="text-gray-400 text-xl" />
+//               <input
+//                 type="text"
+//                 name="image"
+//                 value={form.image}
+//                 onChange={handleChange}
+//                 placeholder="Image URL"
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               />
+//             </div>
+
+//             {/* Meta Title */}
+//             <div className="flex items-center gap-3 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <FiType className="text-gray-400 text-xl" />
+//               <input
+//                 type="text"
+//                 name="metaTitle"
+//                 value={form.metaTitle}
+//                 onChange={handleChange}
+//                 placeholder="Meta Title"
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               />
+//             </div>
+
+//             {/* Parent Category */}
+//             <div className="flex flex-col gap-2 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <label className="text-gray-500 font-medium flex items-center gap-2">
+//                 <FiLayers /> Parent Category
+//               </label>
+//               <select
+//                 name="parentId"
+//                 value={form.parentId}
+//                 onChange={handleChange}
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               >
+//                 <option value="">No Parent (Main Category)</option>
+//                 {loadingCategories ? (
+//                   <option disabled>Loading...</option>
+//                 ) : (
+//                   flatCategories.map((cat) => (
+//                     <option key={cat.id} value={cat.id}>
+//                       {"-".repeat(cat.level * 2)} {cat.name}
+//                     </option>
+//                   ))
+//                 )}
+//               </select>
+//             </div>
+//           </div>
+
+//           {/* Description (full width) */}
+//           <div className="flex flex-col gap-2 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//             <label className="text-gray-500 font-medium flex items-center gap-2">
+//               <FiAlignLeft /> Description
+//             </label>
+//             <textarea
+//               name="description"
+//               value={form.description}
+//               onChange={handleChange}
+//               rows={4}
+//               placeholder="Category description"
+//               className="w-full outline-none text-gray-700 font-medium resize-none"
+//             />
+//           </div>
+
+//           {/* Meta Description (full width) */}
+//           <div className="flex flex-col gap-2 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//             <label className="text-gray-500 font-medium flex items-center gap-2">
+//               <FiAlignLeft /> Meta Description
+//             </label>
+//             <textarea
+//               name="metaDescription"
+//               value={form.metaDescription}
+//               onChange={handleChange}
+//               rows={3}
+//               placeholder="Meta Description"
+//               className="w-full outline-none text-gray-700 font-medium resize-none"
+//             />
+//           </div>
+
+//           <button
+//             type="submit"
+//             disabled={adding}
+//             className="w-full bg-blue-600 text-white py-3 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-all shadow-md hover:shadow-lg"
+//           >
+//             {adding ? "Adding..." : "Add Category"}
+//           </button>
+//         </form>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default AddCategoryPage;
+
+
+
+import React, { useState } from "react";
+import {
+  useAddCategoryMutation,
+  useGetCategoryTreeQuery,
+} from "../../features/categories/categoryAPI";
+
+const AddCategoryPage = () => {
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    image: "",
+    parentId: "",
+    metaTitle: "",
+    metaDescription: "",
+  });
+
+  const { data, isLoading } = useGetCategoryTreeQuery();
+  const [addCategory, { isLoading: adding }] = useAddCategoryMutation();
+
+  const categories = data?.data || [];
+
+  const handleChange = (e) =>
+    setForm({ ...form, [e.target.name]: e.target.value });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await addCategory({
+      ...form,
+      parentId: form.parentId || null,
+    }).unwrap();
+
+    setForm({
+      name: "",
+      description: "",
+      image: "",
+      parentId: "",
+      metaTitle: "",
+      metaDescription: "",
+    });
+  };
+
+  // Flatten category tree
+  const flattenCategories = (nodes, level = 0) =>
+    nodes.flatMap((n) => [
+      { ...n, level },
+      ...(n.children ? flattenCategories(n.children, level + 1) : []),
+    ]);
+
+  const flatCategories = flattenCategories(categories);
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex justify-center py-12 px-4">
+      <div className="w-full max-w-3xl bg-white rounded-xl shadow-sm border p-8">
+
+        {/* Header */}
+        <h2 className="text-2xl font-semibold text-gray-800 mb-1">
+          Add Category
+        </h2>
+        <p className="text-sm text-gray-500 mb-8">
+          Create main or sub-categories for products
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+
+          {/* Name + Parent */}
+          <div className="grid md:grid-cols-2 gap-5">
+            <Input
+              label="Category Name"
+              name="name"
+              value={form.name}
+              onChange={handleChange}
+              required
+            />
+
+            <Select
+              label="Parent Category"
+              name="parentId"
+              value={form.parentId}
+              onChange={handleChange}
+              options={flatCategories}
+              loading={isLoading}
+            />
+          </div>
+
+          {/* Image */}
+          <Input
+            label="Image URL"
+            name="image"
+            value={form.image}
+            onChange={handleChange}
+          />
+
+          {/* Description */}
+          <Textarea
+            label="Description"
+            name="description"
+            value={form.description}
+            onChange={handleChange}
+          />
+
+          {/* SEO */}
+          <div className="border rounded-lg p-5 bg-gray-50 space-y-5">
+            <p className="text-sm font-medium text-gray-700">
+              SEO Settings
+            </p>
+
+            <Input
+              label="Meta Title"
+              name="metaTitle"
+              value={form.metaTitle}
+              onChange={handleChange}
+            />
+
+            <Textarea
+              label="Meta Description"
+              name="metaDescription"
+              value={form.metaDescription}
+              onChange={handleChange}
+              rows={3}
+            />
+          </div>
+
+          {/* Submit */}
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              disabled={adding}
+              className="px-6 py-2.5 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition disabled:opacity-60"
+            >
+              {adding ? "Saving..." : "Save Category"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+/* ---------- Reusable Fields ---------- */
+
+const Input = ({ label, ...props }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-600 mb-1">
+      {label}
+    </label>
+    <input
+      {...props}
+      className="w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+    />
+  </div>
+);
+
+const Textarea = ({ label, rows = 4, ...props }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-600 mb-1">
+      {label}
+    </label>
+    <textarea
+      {...props}
+      rows={rows}
+      className="w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
+    />
+  </div>
+);
+
+const Select = ({ label, options, loading, ...props }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-600 mb-1">
+      {label}
+    </label>
+    <select
+      {...props}
+      className="w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+    >
+      <option value="">Main Category</option>
+      {loading ? (
+        <option>Loading...</option>
+      ) : (
+        options.map((cat) => (
+          <option key={cat.id} value={cat.id}>
+            {"—".repeat(cat.level)} {cat.name}
+          </option>
+        ))
+      )}
+    </select>
+  </div>
+);
+
+export default AddCategoryPage;
--- a/src/pages/Categories/CategoryList.jsx
+++ b/src/pages/Categories/CategoryList.jsx
@@ -0,0 +1,332 @@
+import React, { useState } from "react";
+import { Switch } from "@headlessui/react";
+import {
+  useGetCategoryTreeQuery,
+  useDeleteCategoryMutation,
+} from "../../features/categories/categoryAPI";
+import {
+  FiEdit,
+  FiTrash2,
+  FiEye,
+  FiPlus,
+  FiGrid,
+  FiLayers,
+  FiTag,
+  FiChevronRight,
+} from "react-icons/fi";
+import { useNavigate } from "react-router-dom";
+import Table from "../../components/common/Table";
+import Pagination from "../../components/common/Pagination";
+import {
+  useUpdateCategoryStatusMutation,
+  useReorderCategoriesMutation,
+} from "../../features/categories/categoryAPI";
+import ConfirmModal from "../../components/common/ConfirmModal";
+
+const CategoryList = () => {
+  const { data, isLoading } = useGetCategoryTreeQuery();
+  const [deleteCategory] = useDeleteCategoryMutation();
+  const [updateCategoryStatus] = useUpdateCategoryStatusMutation();
+  const [reorderCategories] = useReorderCategoriesMutation();
+
+  const [isReorderMode, setIsReorderMode] = useState(false);
+  const [reorderData, setReorderData] = useState([]);
+  const navigate = useNavigate();
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 20;
+
+  // Flatten tree
+  const flatten = (nodes, level = 0) => {
+    let list = [];
+
+    [...nodes]
+      .sort((a, b) => a.sequence - b.sequence) // 🔥 sort here
+      .forEach((node) => {
+        list.push({ ...node, level });
+
+        if (node.children?.length) {
+          list = list.concat(flatten(node.children, level + 1));
+        }
+      });
+
+    return list;
+  };
+
+  const flatCategories = flatten(data?.data || []);
+
+  const startReorder = () => {
+    const topLevel = flatCategories.filter((c) => c.level === 0);
+    setReorderData(topLevel);
+    setIsReorderMode(true);
+  };
+
+  const cancelReorder = () => {
+    setReorderData([]);
+    setIsReorderMode(false);
+  };
+
+  const moveRow = (index, direction) => {
+    const updated = [...reorderData];
+    const targetIndex = direction === "up" ? index - 1 : index + 1;
+
+    if (targetIndex < 0 || targetIndex >= updated.length) return;
+
+    [updated[index], updated[targetIndex]] = [
+      updated[targetIndex],
+      updated[index],
+    ];
+
+    setReorderData(updated);
+  };
+
+  const submitReorder = async () => {
+    const orders = reorderData.map((item, index) => ({
+      id: item.id,
+      sequence: index + 1,
+    }));
+
+    try {
+      await reorderCategories(orders).unwrap();
+      setIsReorderMode(false);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  // Pagination logic
+  const totalPages = Math.ceil(flatCategories.length / perPage);
+  const paginatedData = flatCategories.slice(
+    (currentPage - 1) * perPage,
+    currentPage * perPage
+  );
+
+  // Level label
+  const getLevelLabel = (level) => {
+    if (level === 0) return "Main Category";
+    if (level === 1) return "Sub Category";
+    return "Child";
+  };
+
+  // Level icon
+  const getLevelIcon = (level) => {
+    if (level === 0) return <FiGrid className="text-indigo-600" size={18} />;
+    if (level === 1) return <FiLayers className="text-blue-600" size={18} />;
+    return <FiTag className="text-green-600" size={16} />;
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!selectedCategory) return;
+
+    try {
+      await deleteCategory(selectedCategory.id).unwrap();
+      setShowDeleteModal(false);
+      setSelectedCategory(null);
+    } catch (error) {
+      alert(error?.data?.message || "Failed to delete category");
+    }
+  };
+
+  // Table columns
+  const columns = [
+    {
+      key: "name",
+      label: "Category",
+      render: (value, row) => (
+        <div
+          className="flex items-center gap-2"
+          style={{ marginLeft: `${row.level * 20}px` }}
+        >
+          {row.level > 0 && <FiChevronRight className="text-gray-400" />}
+          {getLevelIcon(row.level)}
+          <span className="font-medium text-gray-800">{row.name}</span>
+        </div>
+      ),
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (_, row) => (
+        <span
+          className={`px-2 py-1 text-xs rounded-full ${
+            row.level === 0
+              ? "bg-indigo-100 text-indigo-700"
+              : row.level === 1
+              ? "bg-blue-100 text-blue-700"
+              : "bg-green-100 text-green-700"
+          }`}
+        >
+          {getLevelLabel(row.level)}
+        </span>
+      ),
+    },
+    { key: "slug", label: "Slug" },
+    // { key: "status", label: "Status" },
+    {
+      key: "status",
+      label: "Status",
+      render: (_, row) => (
+        <Switch
+          checked={row.isActive}
+          onChange={async (val) => {
+            await updateCategoryStatus({ id: row.id, isActive: val });
+          }}
+          className={`${
+            row.isActive ? "bg-green-500" : "bg-gray-300"
+          } relative inline-flex h-6 w-11 items-center rounded-full`}
+        >
+          <span
+            className={`${
+              row.isActive ? "translate-x-6" : "translate-x-1"
+            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+          />
+        </Switch>
+      ),
+    },
+  ];
+
+  // Row action buttons
+  const rowActions = (row) => (
+    <>
+      <button
+        onClick={() => navigate(`/categories/${row.id}`)}
+        className="text-blue-600 hover:text-blue-800"
+      >
+        <FiEye size={18} />
+      </button>
+
+      <button
+        onClick={() => navigate(`/categories/edit/${row.id}`)}
+        className="text-green-600 hover:text-green-800"
+      >
+        <FiEdit size={18} />
+      </button>
+
+      <button
+        onClick={() => {
+          setSelectedCategory(row);
+          setShowDeleteModal(true);
+        }}
+        className="text-red-600 hover:text-red-800"
+      >
+        <FiTrash2 size={18} />
+      </button>
+
+      {/* <button
+        onClick={() => navigate("/categories/reorder")}
+        className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
+      >
+        <FiLayers /> Reorder Categories
+      </button> */}
+    </>
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Categories</h2>
+
+        <div className="flex gap-2">
+          {!isReorderMode && (
+            <>
+              <button
+                onClick={startReorder}
+                className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
+              >
+                <FiLayers /> Reorder Categories
+              </button>
+
+              <button
+                onClick={() => navigate("/categories/add")}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+              >
+                <FiPlus /> Add Category
+              </button>
+            </>
+          )}
+
+          {isReorderMode && (
+            <>
+              <button
+                onClick={submitReorder}
+                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+              >
+                Update Order
+              </button>
+
+              <button
+                onClick={cancelReorder}
+                className="px-4 py-2 bg-gray-300 rounded-lg hover:bg-gray-400"
+              >
+                Cancel
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Table */}
+      {/* <Table
+        columns={columns}
+        data={isLoading ? [] : paginatedData}
+        actions={rowActions}
+      /> */}
+
+      <Table
+        columns={[
+          ...columns,
+          ...(isReorderMode
+            ? [
+                {
+                  key: "reorder",
+                  label: "Reorder",
+                  render: (_, __, index) => (
+                    <div className="flex gap-1">
+                      <button
+                        onClick={() => moveRow(index, "up")}
+                        className="px-2 py-1 bg-gray-200 rounded"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        onClick={() => moveRow(index, "down")}
+                        className="px-2 py-1 bg-gray-200 rounded"
+                      >
+                        ↓
+                      </button>
+                    </div>
+                  ),
+                },
+              ]
+            : []),
+        ]}
+        data={isLoading ? [] : isReorderMode ? reorderData : paginatedData}
+        actions={isReorderMode ? null : rowActions}
+      />
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(pg) => setCurrentPage(pg)}
+      />
+
+      <ConfirmModal
+        isOpen={showDeleteModal}
+        title="Delete Category"
+        message={`Are you sure you want to delete "${selectedCategory?.name}"?`}
+        onCancel={() => {
+          setShowDeleteModal(false);
+          setSelectedCategory(null);
+        }}
+        onConfirm={handleConfirmDelete}
+      />
+    </div>
+  );
+};
+
+export default CategoryList;
--- a/src/pages/Categories/ReorderCategories.jsx
+++ b/src/pages/Categories/ReorderCategories.jsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { useGetCategoryTreeQuery, useReorderCategoriesMutation } from "../../features/categories/categoryAPI";
+
+const ReorderCategories = () => {
+  const { data } = useGetCategoryTreeQuery();
+  const [reorderCategories] = useReorderCategoriesMutation();
+  const [categories, setCategories] = useState([]);
+
+  const flattenCategories = (nodes, level = 0) => {
+    let list = [];
+    nodes.forEach((node) => {
+      list.push({ ...node, level });
+      if (node.children?.length) {
+        list = list.concat(flattenCategories(node.children, level + 1));
+      }
+    });
+    return list;
+  };
+
+  useEffect(() => {
+    if (data?.data) setCategories(flattenCategories(data.data));
+  }, [data]);
+
+  const handleDragEnd = async (result) => {
+    if (!result.destination) return;
+
+    const reordered = Array.from(categories);
+    const [moved] = reordered.splice(result.source.index, 1);
+    reordered.splice(result.destination.index, 0, moved);
+
+    setCategories(reordered);
+
+    const updatedOrders = reordered.map((item, index) => ({
+      id: item.id,
+      sequence: index + 1,
+    }));
+
+    try {
+      await reorderCategories(updatedOrders).unwrap();
+      console.log("Category order updated!");
+    } catch (err) {
+      console.error("Failed to reorder:", err);
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <h2 className="text-xl font-semibold mb-4">Reorder Categories</h2>
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId="categories">
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef}>
+              {categories.map((cat, index) => (
+                <Draggable key={cat.id} draggableId={cat.id} index={index}>
+                  {(provided) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      className="p-4 mb-2 border rounded-lg shadow-sm bg-white flex justify-between items-center"
+                    >
+                      <span>{"-".repeat(cat.level * 2)} {cat.name}</span>
+                      <span className="text-gray-400 text-sm">Seq: {index + 1}</span>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};
+
+export default ReorderCategories;
--- a/src/pages/Coupons/CouponDetails.jsx
+++ b/src/pages/Coupons/CouponDetails.jsx
@@ -0,0 +1,154 @@
+import { useParams, Link, useNavigate } from "react-router-dom";
+import {
+  useGetCouponByIdQuery,
+  useToggleCouponStatusMutation,
+} from "../../features/coupons/couponAPI";
+import { ArrowLeft, Percent, Calendar, Activity } from "lucide-react";
+import { formatDate } from "../../utils/formatDate";
+
+/* ---------- Status Badge ---------- */
+const StatusBadge = ({ isActive }) => (
+  <span
+    className={`px-3 py-1 rounded-full text-xs font-semibold
+      ${isActive ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}
+  >
+    {isActive ? "ACTIVE" : "INACTIVE"}
+  </span>
+);
+
+/* ---------- Main Component ---------- */
+const CouponDetails = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const {
+    data: coupon,
+    isLoading,
+    isError,
+  } = useGetCouponByIdQuery(id, { skip: !id });
+
+  const [toggleCouponStatus, { isLoading: toggling }] =
+    useToggleCouponStatusMutation();
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading coupon details...
+      </div>
+    );
+  }
+
+  if (isError || !coupon) {
+    return (
+      <div className="text-center py-10 text-red-500">
+        Failed to load coupon details
+      </div>
+    );
+  }
+
+  return (
+   <div className="max-w-7xl mx-auto p-6 space-y-6">
+      {/* Back Button */}
+      <div className="flex items-center gap-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <button onClick={() => navigate(-1)} className="font-medium">
+          Back to Coupons
+        </button>
+      </div>
+
+      {/* Header Card */}
+      <div className="bg-white shadow-lg rounded-2xl p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{coupon.code}</h2>
+          <p className="text-gray-500">{coupon.description}</p>
+          <div className="mt-2">
+            <StatusBadge isActive={coupon.isActive} />
+          </div>
+        </div>
+
+        <div className="text-right space-y-2">
+          <p className="text-2xl font-extrabold text-green-600">
+            {coupon.type === "PERCENTAGE"
+              ? `${coupon.value}% OFF`
+              : `₹${coupon.value} OFF`}
+          </p>
+
+          <button
+            onClick={() => toggleCouponStatus(coupon.id)}
+            disabled={toggling}
+            className={`px-4 py-2 rounded-lg text-sm font-semibold transition
+              ${
+                coupon.isActive
+                  ? "bg-red-100 text-red-700 hover:bg-red-200"
+                  : "bg-green-100 text-green-700 hover:bg-green-200"
+              }`}
+          >
+            {coupon.isActive ? "Deactivate Coupon" : "Activate Coupon"}
+          </button>
+        </div>
+      </div>
+
+      {/* Info Cards */}
+      <div className="grid md:grid-cols-3 gap-6">
+        {/* Discount */}
+        <div className="bg-gradient-to-r from-purple-50 to-purple-100 p-6 rounded-2xl shadow hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-2 flex items-center gap-2">
+            <Percent size={16} /> Discount
+          </h3>
+          <p className="text-xl font-bold text-purple-700">
+            {coupon.type === "PERCENTAGE"
+              ? `${coupon.value}%`
+              : `₹${coupon.value}`}
+          </p>
+          <p className="text-gray-600 text-sm">
+            Min Order: ₹{coupon.minOrderAmount}
+          </p>
+        </div>
+
+        {/* Validity */}
+        <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-2xl shadow hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-2 flex items-center gap-2">
+            <Calendar size={16} /> Validity
+          </h3>
+          <p className="text-gray-800 text-sm">
+            From: {formatDate(coupon.validFrom)}
+          </p>
+          <p className="text-gray-800 text-sm">
+            Till: {formatDate(coupon.validUntil)}
+          </p>
+        </div>
+
+        {/* Usage */}
+        <div className="bg-gradient-to-r from-green-50 to-green-100 p-6 rounded-2xl shadow hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-2 flex items-center gap-2">
+            <Activity size={16} /> Usage
+          </h3>
+          <p className="text-xl font-bold text-green-700">
+            {coupon.usedCount}/{coupon.maxUses}
+          </p>
+          <p className="text-gray-600 text-sm">
+            Remaining: {coupon.remainingUses}
+          </p>
+        </div>
+      </div>
+
+      {/* Extra Info */}
+      <div className="bg-white shadow-lg rounded-2xl p-6 text-sm text-gray-600 grid md:grid-cols-2 gap-4">
+        <div>
+          <b>Created At:</b> {formatDate(coupon.createdAt)}
+        </div>
+        <div>
+          <b>Last Updated:</b> {formatDate(coupon.updatedAt)}
+        </div>
+        <div>
+          <b>Expired:</b> {coupon.isExpired ? "Yes ❌" : "No ✅"}
+        </div>
+        <div>
+          <b>Not Started:</b> {coupon.isNotStarted ? "Yes ⏳" : "No"}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CouponDetails;
--- a/src/pages/Coupons/CouponsPage.jsx
+++ b/src/pages/Coupons/CouponsPage.jsx
@@ -0,0 +1,157 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useGetCouponsQuery,
+  useToggleCouponStatusMutation,
+} from "../../features/coupons/couponAPI";
+import { formatDate } from "../../utils/formatDate";
+
+/* ---------- Badges ---------- */
+
+const StatusBadge = ({ isActive }) => (
+  <span
+    className={`w-[93px] h-[27px] flex items-center justify-center rounded text-xs font-bold
+      ${
+        isActive
+          ? "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]"
+          : "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]"
+      }`}
+  >
+    {isActive ? "ACTIVE" : "INACTIVE"}
+  </span>
+);
+
+const CouponTypeBadge = ({ type }) => (
+  <span
+    className={`w-[110px] h-[27px] flex items-center justify-center rounded text-xs font-bold
+      ${
+        type === "PERCENTAGE"
+          ? "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]"
+          : "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]"
+      }`}
+  >
+    {type}
+  </span>
+);
+
+/* ---------- Toggle Switch ---------- */
+
+const ToggleSwitch = ({ checked, onChange, disabled }) => (
+  <button
+    disabled={disabled}
+    onClick={onChange}
+    className={`relative inline-flex h-6 w-11 items-center rounded-full transition
+      ${checked ? "bg-green-500" : "bg-gray-300"}
+      ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+  >
+    <span
+      className={`inline-block h-4 w-4 transform rounded-full bg-white transition
+        ${checked ? "translate-x-6" : "translate-x-1"}`}
+    />
+  </button>
+);
+
+/* ---------- Main Component ---------- */
+
+const CouponsList = () => {
+  const navigate = useNavigate();
+
+  const { data: list = [], isLoading, isError } = useGetCouponsQuery();
+  const [toggleCouponStatus, { isLoading: toggling }] =
+    useToggleCouponStatusMutation();
+
+  if (isLoading) {
+    return <div className="text-center py-10">Loading coupons...</div>;
+  }
+
+  if (isError) {
+    return (
+      <div className="text-center py-10 text-red-500">
+        Failed to load coupons
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-gray-600">All Coupons</h1>
+        <button
+          onClick={() => navigate("/create")}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium"
+        >
+          + Add Coupon
+        </button>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto bg-white rounded-2xl shadow border">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 uppercase text-xs font-medium">
+            <tr>
+              <th className="px-6 py-3">Code</th>
+              <th className="px-6 py-3">Type</th>
+              <th className="px-6 py-3">Value</th>
+              <th className="px-6 py-3">Min Order</th>
+              <th className="px-6 py-3">Usage</th>
+              <th className="px-6 py-3">Valid Till</th>
+              <th className="px-6 py-3">Status</th>
+              <th className="px-6 py-3 text-center">Toggle</th>
+              <th className="px-6 py-3 text-center">Actions</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {list.map((coupon) => (
+              <tr key={coupon.id} className="border-t hover:bg-gray-50">
+                <td className="px-6 py-3 font-medium">{coupon.code}</td>
+
+                <td className="px-6 py-3">
+                  <CouponTypeBadge type={coupon.type} />
+                </td>
+
+                <td className="px-6 py-3 font-semibold text-green-600">
+                  {coupon.type === "PERCENTAGE"
+                    ? `${coupon.value}%`
+                    : `₹${coupon.value}`}
+                </td>
+
+                <td className="px-6 py-3">₹{coupon.minOrderAmount}</td>
+
+                <td className="px-6 py-3">
+                  {coupon.usedCount}/{coupon.maxUses}
+                </td>
+
+                <td className="px-6 py-3">{formatDate(coupon.validUntil)}</td>
+
+                <td className="px-6 py-3">
+                  <StatusBadge isActive={coupon.isActive} />
+                </td>
+
+                {/* ✅ TOGGLE */}
+                <td className="px-6 py-3 text-center">
+                  <ToggleSwitch
+                    checked={coupon.isActive}
+                    disabled={toggling}
+                    onChange={() => toggleCouponStatus(coupon.id)}
+                  />
+                </td>
+                <td className="px-6 py-3 text-right">
+                  <button
+                    onClick={() => navigate(`/coupons/${coupon.id}`)}
+                    className="text-blue-600 hover:underline"
+                  >
+                    View
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default CouponsList;
--- a/src/pages/Coupons/CreateCoupon.jsx
+++ b/src/pages/Coupons/CreateCoupon.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCreateCouponMutation } from "../../features/coupons/couponAPI";
+
+const CreateCoupon = () => {
+  const navigate = useNavigate();
+
+  // RTK Query mutation
+  const [createCoupon, { isLoading }] = useCreateCouponMutation();
+
+  const [form, setForm] = useState({
+    code: "",
+    description: "",
+    type: "PERCENTAGE",
+    value: "",
+    minOrderAmount: "",
+    maxUses: "",
+    validFrom: "",
+    validUntil: "",
+  });
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      await createCoupon({
+        ...form,
+        value: Number(form.value),
+        minOrderAmount: Number(form.minOrderAmount || 0),
+        maxUses: Number(form.maxUses || 0),
+      }).unwrap();
+
+      // redirect after success
+      navigate("/admin/coupons");
+    } catch (error) {
+      console.error("Failed to create coupon:", error);
+    }
+  };
+
+  return (
+    <div className="flex justify-center mt-5 px-4">
+      <div className="w-full max-w-3xl space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold text-gray-600">
+            Create Coupon
+          </h1>
+          <button
+            onClick={() => navigate("/admin/coupons")}
+            className="text-sm text-gray-500 hover:text-gray-700"
+          >
+            ← Back
+          </button>
+        </div>
+
+        {/* Form Card */}
+        <div className="bg-white rounded-2xl border border-[#B9B9B9] p-6 shadow-sm">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {/* Coupon Code */}
+            <input
+              name="code"
+              placeholder="Coupon Code"
+              value={form.code}
+              className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={handleChange}
+              required
+            />
+
+            {/* Description */}
+            <input
+              name="description"
+              placeholder="Description"
+              value={form.description}
+              className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={handleChange}
+            />
+
+            {/* Type & Value */}
+            <div className="flex gap-4">
+              <select
+                name="type"
+                value={form.type}
+                className="w-1/2 border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              >
+                <option value="PERCENTAGE">Percentage</option>
+                <option value="FLAT">Flat</option>
+              </select>
+
+              <input
+                name="value"
+                type="number"
+                placeholder="Value"
+                value={form.value}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            {/* Min Order & Max Uses */}
+            <div className="flex gap-4">
+              <input
+                name="minOrderAmount"
+                type="number"
+                placeholder="Min Order Amount"
+                value={form.minOrderAmount}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+
+              <input
+                name="maxUses"
+                type="number"
+                placeholder="Max Uses"
+                value={form.maxUses}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+            </div>
+
+            {/* Valid Dates */}
+            <div className="flex gap-4">
+              <input
+                name="validFrom"
+                type="date"
+                value={form.validFrom}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+              <input
+                name="validUntil"
+                type="date"
+                value={form.validUntil}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-end gap-3 pt-4">
+              <button
+                type="button"
+                onClick={() => navigate("/admin/coupons")}
+                className="px-4 py-2 rounded-lg border hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
+              >
+                {isLoading ? "Creating..." : "Create Coupon"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateCoupon;
--- a/src/pages/Dashboard/CouponStats.jsx
+++ b/src/pages/Dashboard/CouponStats.jsx
@@ -0,0 +1,97 @@
+import { useSelector } from "react-redux";
+import {
+  HiOutlineTicket,
+  HiOutlineCheckCircle,
+  HiOutlineXCircle,
+  HiOutlineLightningBolt,
+} from "react-icons/hi";
+
+const CouponStats = () => {
+  const { couponStats, loading } = useSelector((state) => state.dashboard);
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse grid grid-cols-1 md:grid-cols-4 gap-6">
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="h-32 rounded-xl bg-gray-200" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!couponStats) return null;
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-800">
+          Coupon Statistics 🎟️
+        </h1>
+        <p className="text-gray-500 text-sm mt-1">
+          Overview of coupon usage and performance
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
+        <StatCard
+          title="Total Coupons"
+          value={couponStats.totalCoupons}
+          icon={HiOutlineTicket}
+          gradient="from-indigo-500 to-purple-600"
+        />
+        <StatCard
+          title="Active Coupons"
+          value={couponStats.activeCoupons}
+          icon={HiOutlineCheckCircle}
+          gradient="from-emerald-500 to-green-600"
+        />
+        <StatCard
+          title="Expired Coupons"
+          value={couponStats.expiredCoupons}
+          icon={HiOutlineXCircle}
+          gradient="from-rose-500 to-red-600"
+        />
+        <StatCard
+          title="Total Redemptions"
+          value={couponStats.totalRedemptions}
+          icon={HiOutlineLightningBolt}
+          gradient="from-amber-500 to-orange-600"
+        />
+      </div>
+    </div>
+  );
+};
+
+/* =========================
+   Reusable Stat Card
+========================= */
+
+const StatCard = ({ title, value, icon: Icon, gradient }) => {
+  return (
+    <div
+      className={`
+        relative overflow-hidden rounded-2xl p-5 text-white
+        bg-gradient-to-br ${gradient}
+        shadow-lg hover:shadow-2xl
+        transform transition-all duration-300 hover:-translate-y-1
+      `}
+    >
+      {/* Icon */}
+      <div className="absolute right-4 top-4 opacity-20">
+        <Icon size={64} />
+      </div>
+
+      <p className="text-sm font-medium opacity-90">{title}</p>
+      <p className="text-3xl font-bold mt-3">{value}</p>
+
+      {/* Decorative Glow */}
+      <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-white/10 rounded-full blur-2xl" />
+    </div>
+  );
+};
+
+export default CouponStats;
--- a/src/pages/Dashboard/DashboardPage.jsx
+++ b/src/pages/Dashboard/DashboardPage.jsx
--- a/src/pages/Dashboard/DashboardWidgets.jsx
+++ b/src/pages/Dashboard/DashboardWidgets.jsx
--- a/src/pages/Orders/OrderDetails.jsx
+++ b/src/pages/Orders/OrderDetails.jsx
@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+// import axios from "../../app/api";
+import { ArrowLeft, MapPin, Package, CreditCard, Truck } from "lucide-react";
+import {
+  useGetOrderByIdQuery,
+  useUpdateOrderStatusMutation,
+} from "../../features/orders/ordersAPI";
+import OrderHistoryDrawer from "../Orders/OrderHistoryDrawer";
+import { Clock } from "lucide-react";
+import StatusUpdateForm from "./StatusUpdateForm";
+
+const StatusBadge = ({ status }) => {
+  const styles = {
+    PENDING: "bg-yellow-100 text-yellow-800",
+    PROCESSING: "bg-purple-100 text-purple-800",
+    SHIPPED: "bg-blue-100 text-blue-800",
+    DELIVERED: "bg-green-100 text-green-800",
+    CANCELLED: "bg-red-100 text-red-800",
+  };
+  return (
+    <span
+      className={`px-3 py-1 rounded-full text-xs font-semibold ${styles[status]}`}
+    >
+      {status}
+    </span>
+  );
+};
+
+const OrderDetails = () => {
+  const { id } = useParams();
+  // const [order, setOrder] = useState(null);
+  // const [loading, setLoading] = useState(true);
+
+  // useEffect(() => {
+  //   axios
+  //     .get(`/admin/orders/${id}`)
+  //     .then((res) => {
+  //       setOrder(res.data?.data || null);
+  //       setLoading(false);
+  //     })
+  //     .catch(() => setLoading(false));
+  // }, [id]);
+
+  const { data, isLoading } = useGetOrderByIdQuery(id);
+  const [updateOrderStatus, { isLoading: updating }] =
+    useUpdateOrderStatusMutation();
+  const [showHistory, setShowHistory] = useState(false);
+  const [showStatusModal, setShowStatusModal] = useState(false);
+
+  // const order = data?.data;
+  // const order = data?.data?.order;
+  // const order = data?.data?.order || data?.order || data;
+  const order = data?.data;
+
+  console.log("API DATA:", data);
+
+  if (isLoading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading order details...
+      </div>
+    );
+
+  if (!order)
+    return (
+      <div className="text-center py-10 text-gray-500">Order not found!</div>
+    );
+
+  return (
+    <div className="max-w-7xl mx-auto p-6 space-y-6">
+      {/* Back Button */}
+      <div className="flex items-center gap-2 text-blue-600 hover:text-blue-800 transition">
+        <ArrowLeft size={18} />
+        <Link to="/orders" className="font-medium">
+          Back to Orders
+        </Link>
+      </div>
+
+      {/* Order Header */}
+      <div className="bg-white shadow-lg rounded-2xl p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">
+            Order #{order.orderNumber}
+          </h2>
+          <p className="text-gray-500">
+            {new Date(order.createdAt).toLocaleString()}
+          </p>
+          <div className="mt-2">
+            <StatusBadge status={order.status} />
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-2xl font-extrabold text-green-600">
+            ₹{order.totalAmount}
+          </p>
+          <p className="text-gray-500 flex items-center gap-1">
+            <CreditCard size={16} /> {order.paymentMethod} (
+            {order.paymentStatus})
+          </p>
+        </div>
+
+        {/* Admin Status Controls */}
+        <button
+          onClick={() => setShowStatusModal(true)}
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition"
+        >
+          Update Status
+        </button>
+      </div>
+
+      {/* Customer & Shipping */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-2xl shadow-md hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-3">Customer Info</h3>
+          <p className="text-gray-800 font-medium">
+            {order.user?.firstName} {order.user?.lastName}
+          </p>
+          <p className="text-gray-600">{order.user?.email}</p>
+          <p className="text-gray-600">{order.user?.phone}</p>
+        </div>
+
+        <div className="bg-gradient-to-r from-green-50 to-green-100 p-6 rounded-2xl shadow-md hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-3 flex items-center gap-2">
+            <MapPin size={16} /> Shipping Address
+          </h3>
+          <p className="text-gray-800">
+            {/* {order.address.addressLine1}, {order.address.city} */}
+            {order.address?.addressLine1}, {order.address?.city}
+          </p>
+          <p className="text-gray-600">
+            {order.address?.state}, {order.address.country} -{" "}
+            {order.address.postalCode}
+          </p>
+          <p className="text-gray-600">Phone: {order.address.phone}</p>
+        </div>
+      </div>
+
+      {/* Items */}
+      <div className="bg-white shadow-lg rounded-2xl p-6">
+        <h3 className="text-gray-700 font-semibold mb-4 flex items-center gap-2">
+          <Package size={16} /> Order Items
+        </h3>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm text-gray-700">
+            <thead className="bg-gray-100 uppercase text-xs font-semibold">
+              <tr>
+                <th className="px-4 py-2">Product</th>
+                <th className="px-4 py-2">Price</th>
+                <th className="px-4 py-2">Qty</th>
+                <th className="px-4 py-2 text-right">Subtotal</th>
+              </tr>
+            </thead>
+            <tbody>
+              {order.items?.map((item) => (
+                <tr
+                  key={item.id}
+                  className="border-t hover:bg-gray-50 transition"
+                >
+                  <td className="px-4 py-2 font-medium">{item.productName}</td>
+                  <td className="px-4 py-2">₹{item.price}</td>
+                  <td className="px-4 py-2">{item.quantity}</td>
+                  <td className="px-4 py-2 text-right font-semibold">
+                    ₹{item.price * item.quantity}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Order Timeline */}
+
+      <div className="bg-white shadow-xl rounded-3xl p-8">
+        <div className="flex justify-between items-center mb-8">
+          <h3 className="text-xl font-semibold text-gray-800">
+            Order Timeline
+          </h3>
+
+          <button
+            onClick={() => setShowHistory(true)}
+            className="flex items-center gap-2 text-sm bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg transition"
+          >
+            <Clock size={16} />
+            View History
+          </button>
+          <OrderHistoryDrawer
+            orderId={order.id}
+            open={showHistory}
+            onClose={() => setShowHistory(false)}
+          />
+        </div>
+
+        {(() => {
+          const steps = [
+            { key: "PENDING", label: "Order Placed" },
+            { key: "PROCESSING", label: "Processing" },
+            { key: "SHIPPED", label: "Shipped" },
+            { key: "DELIVERED", label: "Delivered" },
+          ];
+
+          const currentStepIndex = steps.findIndex(
+            (step) => step.key === order.status,
+          );
+
+          return (
+            <div className="relative">
+              {steps.map((step, index) => {
+                const isCompleted = index < currentStepIndex;
+                const isActive = index === currentStepIndex;
+                const isLast = index === steps.length - 1;
+
+                return (
+                  <div
+                    key={step.key}
+                    className="relative flex items-start gap-6 pb-12"
+                  >
+                    {/* Vertical Line (ONLY if not last) */}
+                    {!isLast && (
+                      <div
+                        className={`absolute left-4 top-10 w-1 h-full 
+                  ${isCompleted ? "bg-green-500" : "bg-gray-200"}`}
+                      ></div>
+                    )}
+
+                    {/* Circle */}
+                    <div
+                      className={`relative z-10 w-8 h-8 flex items-center justify-center rounded-full border-2 transition-all duration-300
+                  ${
+                    isCompleted
+                      ? "bg-green-500 border-green-500 text-white"
+                      : isActive
+                        ? "bg-blue-600 border-blue-600 text-white"
+                        : "bg-white border-gray-300 text-gray-400"
+                  }
+                `}
+                    >
+                      {isCompleted ? "✓" : index + 1}
+                    </div>
+
+                    {/* Content */}
+                    <div>
+                      <h4
+                        className={`font-medium ${
+                          isCompleted
+                            ? "text-green-600"
+                            : isActive
+                              ? "text-blue-600"
+                              : "text-gray-500"
+                        }`}
+                      >
+                        {step.label}
+                      </h4>
+
+                      {isActive && (
+                        <p className="text-sm text-gray-400 mt-1">
+                          Currently in progress
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })()}
+      </div>
+
+      {showStatusModal && (
+  <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+    <div className="w-full max-w-lg">
+      <StatusUpdateForm
+        orderId={order.id}
+        currentStatus={order.status}
+      />
+
+      <button
+        onClick={() => setShowStatusModal(false)}
+        className="mt-4 w-full bg-gray-200 py-2 rounded-lg"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+)}
+
+    </div>
+  );
+};
+
+export default OrderDetails;
--- a/src/pages/Orders/OrderHistoryDrawer.jsx
+++ b/src/pages/Orders/OrderHistoryDrawer.jsx
@@ -0,0 +1,138 @@
+import React from "react";
+import { X, Clock, Truck, CheckCircle2, Package } from "lucide-react";
+import { useGetOrderHistoryQuery } from "../../features/orders/ordersAPI";
+
+const getStatusColor = (status) => {
+  switch (status) {
+    case "DELIVERED":
+      return "text-green-600 bg-green-100";
+    case "SHIPPED":
+      return "text-blue-600 bg-blue-100";
+    case "PROCESSING":
+      return "text-purple-600 bg-purple-100";
+    case "CANCELLED":
+      return "text-red-600 bg-red-100";
+    default:
+      return "text-gray-600 bg-gray-100";
+  }
+};
+
+const OrderHistoryDrawer = ({ orderId, open, onClose }) => {
+  const { data, isLoading } = useGetOrderHistoryQuery(orderId, {
+    skip: !open,
+  });
+
+  const history = data?.data || [];
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex">
+      {/* Overlay */}
+      <div
+        className="flex-1 bg-black/40 backdrop-blur-sm transition"
+        onClick={onClose}
+      />
+
+      {/* Drawer */}
+      <div className="w-full max-w-md bg-white shadow-2xl h-full flex flex-col animate-slide-in-right">
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b sticky top-0 bg-white z-10">
+          <div className="flex items-center gap-2">
+            <Clock size={18} className="text-gray-600" />
+            <h3 className="text-lg font-semibold text-gray-800">
+              Order History
+            </h3>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full hover:bg-gray-100 transition"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+
+          {isLoading ? (
+            <p className="text-gray-500 text-sm">Loading history...</p>
+          ) : history.length === 0 ? (
+            <p className="text-gray-400 text-sm">
+              No history available
+            </p>
+          ) : (
+            <div className="relative border-l-2 border-gray-200 ml-3">
+              {history.map((event, index) => (
+                <div key={event.id} className="mb-10 ml-6 relative">
+
+                  {/* Timeline Dot */}
+                  <span
+                    className={`absolute -left-[14px] w-7 h-7 rounded-full flex items-center justify-center ring-4 ring-white text-xs font-bold shadow-md
+                      ${getStatusColor(event.toStatus)}
+                    `}
+                  >
+                    {event.toStatus === "DELIVERED" ? (
+                      <CheckCircle2 size={14} />
+                    ) : event.toStatus === "SHIPPED" ? (
+                      <Truck size={14} />
+                    ) : (
+                      <Package size={14} />
+                    )}
+                  </span>
+
+                  {/* Card */}
+                  <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
+                    
+                    <div className="flex items-center justify-between">
+                      <h4 className="font-semibold text-gray-800">
+                        {event.fromStatus || "START"} → {event.toStatus}
+                      </h4>
+
+                      <span
+                        className={`text-xs px-2 py-1 rounded-full font-medium ${getStatusColor(
+                          event.toStatus
+                        )}`}
+                      >
+                        {event.toStatus}
+                      </span>
+                    </div>
+
+                    {event.trackingNumber && (
+                      <p className="text-xs text-gray-600 mt-2">
+                        🚚 Tracking:{" "}
+                        <span className="font-medium">
+                          {event.trackingNumber}
+                        </span>
+                      </p>
+                    )}
+
+                    {event.notes && (
+                      <p className="text-xs text-gray-500 mt-2">
+                        📝 {event.notes}
+                      </p>
+                    )}
+
+                    {event.admin && (
+                      <p className="text-xs text-gray-500 mt-2">
+                        👤 {event.admin.firstName} {event.admin.lastName}
+                      </p>
+                    )}
+
+                    <p className="text-xs text-gray-400 mt-3">
+                      {new Date(event.createdAt).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default OrderHistoryDrawer;
--- a/src/pages/Orders/OrderList.jsx
+++ b/src/pages/Orders/OrderList.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Eye } from "lucide-react";
+import { formatDate } from "../../utils/formatDate";
+import { useGetOrdersQuery } from "../../features/orders/ordersAPI";
+
+const StatusBadge = ({ status }) => {
+  const styles = {
+    COMPLETED: "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]",
+    PROCESSING: "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]",
+    PENDING: "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]",
+    REJECTED: "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]",
+    DELIVERED: "bg-[#61b390]/10 border border-[#61b390] text-[#01352c]",
+  };
+
+  const boxClasses =
+    "w-[93px] h-[27px] flex items-center justify-center rounded-[4.5px] text-xs font-bold";
+
+  return <span className={`${boxClasses} ${styles[status]}`}>{status}</span>;
+};
+
+const PaymentBadge = ({ status }) => {
+  const styles = {
+    PAID: "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]",
+    PROCESSING: "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]",
+    PENDING: "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]",
+    FAILED: "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]",
+  };
+
+  const boxClasses =
+    "w-[93px] h-[27px] flex items-center justify-center rounded-[4.5px] text-xs font-bold";
+
+  return <span className={`${boxClasses} ${styles[status]}`}>{status}</span>;
+};
+
+const OrderList = () => {
+  // ✅ RTK Query handles fetching & state automatically
+  const { data, isLoading, isError } = useGetOrdersQuery({
+    page: 1,
+    limit: 10,
+  });
+  const navigate = useNavigate();
+
+  // Extract safely
+  const orders = data?.data?.orders || [];
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-80 text-gray-600">
+        Loading orders...
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="text-center text-red-600 py-10">
+        Failed to load orders. Please try again.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-xl font-semibold text-gray-600">All Orders</h1>
+
+      {orders.length === 0 ? (
+        <div className="text-center py-10 text-gray-500">No orders found.</div>
+      ) : (
+        <div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
+          <table className="min-w-full text-sm text-left">
+            <thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
+              <tr>
+                <th className="px-6 py-3">Order #</th>
+                <th className="px-6 py-3">Customer</th>
+                <th className="px-6 py-3">Date</th>
+                <th className="px-6 py-3">Total</th>
+                <th className="px-6 py-3">Status</th>
+                <th className="px-6 py-3">Payment</th>
+
+                <th className="px-6 py-3 text-right">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {orders.map((order) => (
+                <tr
+                  key={order.id}
+                  className="border-t  hover:bg-gray-50 transition-colors"
+                >
+                  <td className="px-6 py-3 font-medium text-gray-800">
+                    {order.orderNumber}
+                  </td>
+                  <td className="px-6 py-3 text-gray-700">
+                    {order.user?.firstName} {order.user?.lastName}
+                  </td>
+                  <td className="px-6 py-3 text-gray-600">
+                    {formatDate(order.createdAt)}
+                  </td>
+                  <td className="px-6 py-3 font-semibold text-green-600">
+                    ₹{order.totalAmount}
+                  </td>
+                  <td className="px-6 py-3">
+                    <StatusBadge status={order.status} />
+                  </td>
+                  <td className="px-6 py-3">
+                    <PaymentBadge status={order.paymentStatus} />
+                  </td>
+
+                  <td className="px-6 py-3 text-right">
+                    <button
+                      onClick={() => navigate(`/orders/${order.id}`)}
+                      className="text-blue-600 hover:text-blue-800 flex items-center gap-1"
+                    >
+                      <Eye size={16} /> View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrderList;
--- a/src/pages/Orders/OrderStatusModal.jsx
+++ b/src/pages/Orders/OrderStatusModal.jsx
@@ -0,0 +1,68 @@
+import React from "react";
+
+const OrderStatusModal = ({ order, onClose, onSave }) => {
+  const [status, setStatus] = React.useState(order.status);
+  const [paymentStatus, setPaymentStatus] = React.useState(order.paymentStatus);
+
+  const handleSave = () => {
+    onSave({ status, paymentStatus });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50">
+      <div className="bg-white rounded-2xl shadow-lg p-6 w-96 space-y-4">
+        <h2 className="text-lg font-semibold text-gray-800">Update Order</h2>
+
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">
+              Order Status
+            </label>
+            <select
+              value={status}
+              onChange={(e) => setStatus(e.target.value)}
+              className="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            >
+              <option value="PENDING">PENDING</option>
+              <option value="SHIPPED">SHIPPED</option>
+              <option value="DELIVERED">DELIVERED</option>
+              <option value="CANCELLED">CANCELLED</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">
+              Payment Status
+            </label>
+            <select
+              value={paymentStatus}
+              onChange={(e) => setPaymentStatus(e.target.value)}
+              className="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            >
+              <option value="PENDING">PENDING</option>
+              <option value="PAID">PAID</option>
+              <option value="FAILED">FAILED</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 pt-4">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderStatusModal;
--- a/src/pages/Orders/StatusUpdateForm.jsx
+++ b/src/pages/Orders/StatusUpdateForm.jsx
@@ -0,0 +1,100 @@
+// components/admin/StatusUpdateForm.jsx
+
+import { useState } from 'react';
+import { useUpdateOrderStatusMutation } from '../../features/orders/ordersAPI';
+
+const StatusUpdateForm = ({ orderId, currentStatus }) => {
+  const [status, setStatus] = useState(currentStatus);
+  const [trackingNumber, setTrackingNumber] = useState('');
+  const [notes, setNotes] = useState('');
+  
+  const [updateStatus, { isLoading }] = useUpdateOrderStatusMutation();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      await updateStatus({
+       id: orderId,  
+        status,
+        trackingNumber,
+        notes,
+      }).unwrap();
+
+      alert('Status updated successfully!');
+      setTrackingNumber('');
+      setNotes('');
+    } catch (error) {
+      alert('Failed to update status');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-6">
+      <h3 className="font-bold text-lg mb-4">Update Order Status</h3>
+
+      <div className="space-y-4">
+        {/* Status Dropdown */}
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            New Status
+          </label>
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="w-full border rounded-lg px-3 py-2"
+          >
+            <option value="PENDING">Pending</option>
+            <option value="CONFIRMED">Confirmed</option>
+            <option value="PROCESSING">Processing</option>
+            <option value="SHIPPED">Shipped</option>
+            <option value="DELIVERED">Delivered</option>
+            <option value="CANCELLED">Cancelled</option>
+          </select>
+        </div>
+
+        {/* Tracking Number (show for SHIPPED status) */}
+        {status === 'SHIPPED' && (
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              Tracking Number
+            </label>
+            <input
+              type="text"
+              value={trackingNumber}
+              onChange={(e) => setTrackingNumber(e.target.value)}
+              placeholder="TRK123456789"
+              className="w-full border rounded-lg px-3 py-2"
+            />
+          </div>
+        )}
+
+        {/* Notes */}
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            Notes (Optional)
+          </label>
+          <textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder="Add any notes about this status change..."
+            rows={3}
+            className="w-full border rounded-lg px-3 py-2"
+          />
+        </div>
+
+        {/* Submit Button */}
+        <button
+          type="submit"
+          disabled={isLoading || status === currentStatus}
+          className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-300"
+        >
+          {isLoading ? 'Updating...' : 'Update Status'}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+
+export default StatusUpdateForm;
--- a/src/pages/Products/ProductAdd.jsx
+++ b/src/pages/Products/ProductAdd.jsx
@@ -0,0 +1,887 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { motion } from "framer-motion";
+import { useGetCategoryTreeQuery } from "../../features/categories/categoryAPI";
+import { flattenCategories } from "../../utils/flattenCategories";
+
+const ProductAdd = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    slug: "",
+    description: "",
+    category: "",
+    tags: "",
+    basePrice: "",
+    hasVariants: false,
+    metaKeywords: "",
+    status: "active",
+    isFeatured: false,
+    isDigital: false,
+    weightValue: "",
+    weightUnit: "g",
+    length: "",
+    width: "",
+    height: "",
+    dimensionUnit: "cm",
+  });
+
+  const [previewImages, setPreviewImages] = useState([]);
+
+  const [primaryImage, setPrimaryImage] = useState(null);
+  const [primaryPreview, setPrimaryPreview] = useState(null);
+
+  const [galleryFiles, setGalleryFiles] = useState([]);
+  const [galleryPreviews, setGalleryPreviews] = useState([]);
+
+  const [variants, setVariants] = useState([
+    {
+      color: "",
+      price: "",
+      stock: "",
+      primaryImage: null,
+      galleryImages: [],
+      primaryPreview: null,
+      galleryPreviews: [],
+    },
+  ]);
+
+  // ✅ Fetch categories
+  const { data: categoryResponse, isLoading } = useGetCategoryTreeQuery();
+  const categories = categoryResponse?.data || [];
+
+  const flatCategories = flattenCategories(categories);
+
+  console.log("Categories from API:", categories);
+  console.log("Flattened categories:", flattenCategories(categories));
+
+  // handle text/checkbox input
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData({
+      ...formData,
+      [name]: type === "checkbox" ? checked : value,
+    });
+  };
+  console.log("Submitting category ID:", formData.category);
+
+  // Primary Image
+  const handlePrimaryImage = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    setPrimaryImage(file);
+    setPrimaryPreview(URL.createObjectURL(file));
+  };
+
+  // Gallery Images (MAX 5)
+  const handleGalleryImages = (e) => {
+    const files = Array.from(e.target.files).slice(0, 5);
+
+    setGalleryFiles(files);
+    setGalleryPreviews(files.map((file) => URL.createObjectURL(file)));
+  };
+
+  const addVariant = () => {
+    setVariants([
+      ...variants,
+      {
+        color: "",
+        price: "",
+        stock: "",
+        primaryImage: null,
+        galleryImages: [],
+      },
+    ]);
+  };
+
+  const updateVariant = (index, field, value) => {
+    const updated = [...variants];
+    updated[index][field] = value;
+    setVariants(updated);
+  };
+
+  const handleVariantPrimary = (index, e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const updated = [...variants];
+    updated[index].primaryImage = file;
+    updated[index].primaryPreview = URL.createObjectURL(file);
+    setVariants(updated);
+  };
+
+  const handleVariantGallery = (index, e) => {
+    const files = Array.from(e.target.files).slice(0, 5);
+    const updated = [...variants];
+    updated[index].galleryImages = files;
+    updated[index].galleryPreviews = files.map((f) => URL.createObjectURL(f));
+    setVariants(updated);
+  };
+
+  const removeGalleryImage = (index) => {
+    setGalleryFiles((prev) => prev.filter((_, i) => i !== index));
+    setGalleryPreviews((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const token = localStorage.getItem("token");
+      const form = new FormData();
+
+      // ======================
+      // VALIDATION
+      // ======================
+      // if (!formData.name || !formData.slug) {
+      //   alert("❌ Name and slug are required");
+      //   return;
+      // }
+
+      // ======================
+      // BASIC FIELDS
+      // ======================
+      form.append("name", formData.name);
+      form.append("slug", formData.slug);
+      form.append("description", formData.description || "");
+
+      // Only append category if it's not empty
+      if (formData.category) {
+        form.append("category", formData.category);
+      }
+
+      // Convert basePrice to number and validate
+      const basePrice = Number(formData.basePrice);
+      if (!isNaN(basePrice) && basePrice > 0) {
+        form.append("basePrice", basePrice);
+      } else {
+        alert("❌ Valid base price is required");
+        return;
+      }
+
+      form.append("status", formData.status);
+
+      form.append("hasVariants", formData.hasVariants);
+      form.append("isFeatured", formData.isFeatured);
+      form.append("isDigital", formData.isDigital);
+
+      // ======================
+      // ARRAYS
+      // ======================
+      const tags = formData.tags
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean);
+
+      if (tags.length > 0) {
+        tags.forEach((tag) => form.append("tags[]", tag));
+      }
+
+      const keywords = formData.metaKeywords
+        .split(",")
+        .map((k) => k.trim())
+        .filter(Boolean);
+
+      if (keywords.length > 0) {
+        keywords.forEach((k) => form.append("metaKeywords[]", k));
+      }
+
+      // ======================
+      // WEIGHT & DIMENSIONS
+      // ======================
+      if (formData.weightValue) {
+        form.append("weight[value]", Number(formData.weightValue));
+        form.append("weight[unit]", formData.weightUnit);
+      }
+
+      if (formData.length || formData.width || formData.height) {
+        if (formData.length)
+          form.append("dimensions[length]", Number(formData.length));
+        if (formData.width)
+          form.append("dimensions[width]", Number(formData.width));
+        if (formData.height)
+          form.append("dimensions[height]", Number(formData.height));
+        form.append("dimensions[unit]", formData.dimensionUnit);
+      }
+
+      // ======================
+      // VARIANTS MODE
+      // ======================
+      if (formData.hasVariants) {
+        // Validate variants
+        const validVariants = variants.filter(
+          (v) => v.color && v.price && v.stock,
+        );
+
+        if (validVariants.length === 0) {
+          alert("❌ Please add at least one complete variant");
+          return;
+        }
+
+        // 🔥 SEND VARIANTS AS JSON
+        const cleanVariants = validVariants.map((v) => ({
+          size: "default",
+          color: v.color,
+          sku: `${formData.slug}-${v.color.toLowerCase().replace(/\s+/g, "-")}`,
+          price: Number(v.price),
+          compareAtPrice: null,
+          inventory: {
+            quantity: Number(v.stock),
+            trackInventory: true,
+          },
+        }));
+
+        form.append("variants", JSON.stringify(cleanVariants));
+
+        // 🔥 VARIANT IMAGES
+        // VARIANT IMAGES
+        // 🔥 VARIANT IMAGES - Using color as field identifier
+        validVariants.forEach((variant) => {
+          const color = variant.color.trim();
+          const fieldName = `variantImages_${color}`;
+
+          console.log(`📤 Processing variant: ${color}`);
+          console.log(`📤 Field name: ${fieldName}`);
+
+          // Combine primary + gallery images
+          const allImages = [];
+
+          if (variant.primaryImage) {
+            allImages.push(variant.primaryImage);
+          }
+
+          if (variant.galleryImages?.length) {
+            allImages.push(...variant.galleryImages);
+          }
+
+          // Append all images with the color-based field name
+          allImages.forEach((img) => {
+            form.append(fieldName, img);
+          });
+
+          console.log(`✅ Sent ${allImages.length} images for ${color}`);
+        });
+      }
+
+      // ======================
+      // SIMPLE PRODUCT MODE
+      // ======================
+      else {
+        if (primaryImage) {
+          form.append("primaryImage", primaryImage);
+        }
+
+        galleryFiles.forEach((file) => {
+          form.append("galleryImages", file);
+        });
+      }
+
+      // ======================
+      // DEBUG LOG
+      // ======================
+      console.log("📦 FormData contents:");
+      for (let pair of form.entries()) {
+        console.log(pair[0], ":", pair[1]);
+      }
+
+      // ======================
+      // API CALL
+      // ======================
+      const response = await axios.post(
+        "http://localhost:3000/api/admin/products",
+        form,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        },
+      );
+
+      console.log("✅ Success:", response.data);
+      alert("✅ Product created successfully!");
+
+      // Reset form
+      setFormData({
+        name: "",
+        slug: "",
+        description: "",
+        category: "",
+        tags: "",
+        basePrice: "",
+        hasVariants: false,
+        metaKeywords: "",
+        status: "active",
+        isFeatured: false,
+        isDigital: false,
+        weightValue: "",
+        weightUnit: "g",
+        length: "",
+        width: "",
+        height: "",
+        dimensionUnit: "cm",
+      });
+      setPrimaryImage(null);
+      setPrimaryPreview(null);
+      setGalleryFiles([]);
+      setGalleryPreviews([]);
+      setVariants([
+        {
+          color: "",
+          price: "",
+          stock: "",
+          primaryImage: null,
+          galleryImages: [],
+          primaryPreview: null,
+          galleryPreviews: [],
+        },
+      ]);
+    } catch (err) {
+      console.error("❌ Error details:", err);
+
+      if (err.response) {
+        // Server responded with error
+        console.error("Response data:", err.response.data);
+        console.error("Response status:", err.response.status);
+        console.error("Response headers:", err.response.headers);
+
+        const errorMessage =
+          err.response.data?.message ||
+          err.response.data?.error ||
+          JSON.stringify(err.response.data);
+
+        alert(`❌ Server Error: ${errorMessage}`);
+      } else if (err.request) {
+        // Request made but no response
+        console.error("No response received:", err.request);
+        alert("❌ No response from server. Check if backend is running.");
+      } else {
+        // Error in request setup
+        console.error("Error setting up request:", err.message);
+        alert(`❌ Error: ${err.message}`);
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-6">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="max-w-7xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200"
+      >
+        <div className="px-8 py-6 bg-gradient-to-r from-indigo-500 to-blue-500 text-white">
+          <h2 className="text-3xl font-semibold">Add New Product</h2>
+          <p className="text-sm text-indigo-100 mt-1">
+            Fill in details below to create a new product listing.
+          </p>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="grid grid-cols-1 md:grid-cols-2 gap-10 p-8"
+        >
+          {/* Left Side */}
+          <div className="space-y-8">
+            <div className="bg-white border rounded-xl shadow-sm p-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                🧾 Basic Information
+              </h3>
+              <div className="space-y-4">
+                <Input
+                  label="Product Name *"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  placeholder="e.g. Elegant Silk Saree"
+                  required
+                />
+
+                <div>
+                  <label className="block font-medium text-gray-700">
+                    Slug (auto)
+                  </label>
+                  <input
+                    value={formData.name
+                      .toLowerCase()
+                      .replace(/[^a-z0-9]+/g, "-")
+                      .replace(/(^-|-$)/g, "")}
+                    disabled
+                    className="mt-2 w-full bg-gray-100 border rounded-lg px-4 py-2"
+                  />
+                </div>
+
+                <Textarea
+                  label="Description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleChange}
+                  placeholder="Describe your product"
+                />
+
+                {/* ✅ Category Select */}
+                <Select
+                  label="Category"
+                  name="category"
+                  value={formData.category} // stores ID
+                  onChange={handleChange}
+                  options={
+                    isLoading
+                      ? [{ value: "", label: "Loading categories..." }]
+                      : flatCategories
+                  }
+                />
+              </div>
+            </div>
+
+            <div className="bg-white border rounded-xl shadow-sm p-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                🏷️ Product Details
+              </h3>
+              <div className="space-y-4">
+                <Input
+                  label="Base Price (₹) *"
+                  name="basePrice"
+                  type="number"
+                  value={formData.basePrice}
+                  onChange={handleChange}
+                  placeholder="2599"
+                  required
+                />
+
+                <Input
+                  label="Tags (comma separated)"
+                  name="tags"
+                  value={formData.tags}
+                  onChange={handleChange}
+                  placeholder="saree, silk, ethnic"
+                />
+
+                <Input
+                  label="Meta Keywords"
+                  name="metaKeywords"
+                  value={formData.metaKeywords}
+                  onChange={handleChange}
+                  placeholder="wedding, women, fashion"
+                />
+
+                <div className="flex flex-wrap gap-4 pt-2">
+                  {[
+                    { name: "hasVariants", label: "Has Variants" },
+                    { name: "isFeatured", label: "Featured" },
+                    { name: "isDigital", label: "Digital" },
+                  ].map((opt) => (
+                    <label
+                      key={opt.name}
+                      className="flex items-center space-x-2 text-gray-700"
+                    >
+                      <input
+                        type="checkbox"
+                        name={opt.name}
+                        checked={formData[opt.name]}
+                        onChange={handleChange}
+                      />
+                      <span>{opt.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {formData.hasVariants && (
+              <div className="bg-white border rounded-xl shadow-sm p-6">
+                <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                  🎨 Product Variants
+                </h3>
+
+                {variants.map((variant, index) => (
+                  <div
+                    key={index}
+                    className="border-2 border-indigo-200 rounded-xl p-5 mb-6 space-y-4 bg-gradient-to-br from-white to-indigo-50"
+                  >
+                    <div className="flex items-center justify-between">
+                      <h4 className="font-semibold text-indigo-600 text-lg">
+                        🎨 Variant #{index + 1}
+                      </h4>
+                      {variants.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setVariants(variants.filter((_, i) => i !== index));
+                          }}
+                          className="text-red-500 hover:text-red-700 text-sm font-medium"
+                        >
+                          🗑️ Remove
+                        </button>
+                      )}
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <Input
+                        label="Color *"
+                        value={variant.color}
+                        onChange={(e) =>
+                          updateVariant(index, "color", e.target.value)
+                        }
+                        placeholder="e.g. Red, Blue, Green"
+                      />
+
+                      <Input
+                        label="Price (₹) *"
+                        type="number"
+                        value={variant.price}
+                        onChange={(e) =>
+                          updateVariant(index, "price", e.target.value)
+                        }
+                        placeholder="2599"
+                      />
+
+                      <Input
+                        label="Stock Quantity *"
+                        type="number"
+                        value={variant.stock}
+                        onChange={(e) =>
+                          updateVariant(index, "stock", e.target.value)
+                        }
+                        placeholder="50"
+                      />
+                    </div>
+
+                    {/* Variant Images */}
+                    <div className="bg-white rounded-lg p-4 border border-indigo-100 space-y-4">
+                      <h5 className="font-semibold text-gray-700 text-sm">
+                        📸 Variant Images
+                      </h5>
+
+                      {/* Primary Image for Variant */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-600 mb-2">
+                          Primary Image
+                        </label>
+
+                        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition">
+                          <input
+                            type="file"
+                            accept="image/*"
+                            onChange={(e) => handleVariantPrimary(index, e)}
+                            className="hidden"
+                          />
+
+                          {!variant.primaryPreview ? (
+                            <>
+                              <span className="text-gray-400 text-2xl">📷</span>
+                              <p className="text-xs text-gray-500 mt-1">
+                                Upload primary image
+                              </p>
+                            </>
+                          ) : (
+                            <div className="relative">
+                              <img
+                                src={variant.primaryPreview}
+                                className="w-32 h-32 object-cover rounded border-2 border-indigo-300"
+                                alt={`Variant ${index + 1} primary`}
+                              />
+                              <span className="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs px-2 py-0.5 rounded-full">
+                                Primary
+                              </span>
+                            </div>
+                          )}
+                        </label>
+                      </div>
+
+                      {/* Gallery Images for Variant */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-600 mb-2">
+                          Gallery Images{" "}
+                          <span className="text-xs text-gray-400">(Max 5)</span>
+                        </label>
+
+                        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition">
+                          <input
+                            type="file"
+                            multiple
+                            accept="image/*"
+                            onChange={(e) => handleVariantGallery(index, e)}
+                            className="hidden"
+                          />
+
+                          <span className="text-gray-400 text-2xl">🖼️</span>
+                          <p className="text-xs text-gray-500 mt-1">
+                            Upload gallery images
+                          </p>
+                        </label>
+
+                        {variant.galleryPreviews?.length > 0 && (
+                          <div className="grid grid-cols-3 sm:grid-cols-4 gap-3 mt-3">
+                            {variant.galleryPreviews.map((src, i) => (
+                              <div
+                                key={i}
+                                className="relative group rounded border-2 border-gray-200 overflow-hidden"
+                              >
+                                <img
+                                  src={src}
+                                  className="w-full h-24 object-cover"
+                                  alt={`Variant ${index + 1} gallery ${i + 1}`}
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    const updated = [...variants];
+                                    updated[index].galleryImages = updated[
+                                      index
+                                    ].galleryImages.filter(
+                                      (_, idx) => idx !== i,
+                                    );
+                                    updated[index].galleryPreviews = updated[
+                                      index
+                                    ].galleryPreviews.filter(
+                                      (_, idx) => idx !== i,
+                                    );
+                                    setVariants(updated);
+                                  }}
+                                  className="absolute top-1 right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"
+                                >
+                                  ✕
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+
+                <button
+                  type="button"
+                  onClick={addVariant}
+                  className="mt-4 bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition"
+                >
+                  ➕ Add Another Variant
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Right Side */}
+          <div className="space-y-8">
+            {/* Weight & Dimensions */}
+            <div className="bg-white border rounded-xl shadow-sm p-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                📦 Weight & Dimensions
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                <Input
+                  label="Weight"
+                  name="weightValue"
+                  type="number"
+                  value={formData.weightValue}
+                  onChange={handleChange}
+                  placeholder="700"
+                />
+                <Select
+                  label="Unit"
+                  name="weightUnit"
+                  value={formData.weightUnit}
+                  onChange={handleChange}
+                  options={[
+                    { value: "g", label: "g" },
+                    { value: "kg", label: "kg" },
+                  ]}
+                />
+              </div>
+
+              <div className="grid grid-cols-3 gap-3 mt-4">
+                {["length", "width", "height"].map((dim) => (
+                  <Input
+                    key={dim}
+                    label={dim.charAt(0).toUpperCase() + dim.slice(1)}
+                    name={dim}
+                    type="number"
+                    value={formData[dim]}
+                    onChange={handleChange}
+                    placeholder="10"
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Image Upload Section */}
+            <div className="bg-white border rounded-xl shadow-sm p-6 space-y-8">
+              <h3 className="text-xl font-semibold text-gray-800 border-b pb-2">
+                🖼️ Product Images
+              </h3>
+
+              {!formData.hasVariants ? (
+                <>
+                  {/* Simple Product Images */}
+                  {/* Primary Image */}
+                  <div>
+                    <label className="block font-medium text-gray-700 mb-3">
+                      Primary Image
+                    </label>
+
+                    <label className="flex flex-col items-center justify-center border-2 border-dashed rounded-xl p-6 cursor-pointer hover:bg-indigo-50 transition">
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={handlePrimaryImage}
+                        className="hidden"
+                      />
+
+                      {!primaryPreview ? (
+                        <>
+                          <span className="text-indigo-500 text-3xl">⬆️</span>
+                          <p className="text-sm text-gray-600 mt-2">
+                            Click to upload primary image
+                          </p>
+                        </>
+                      ) : (
+                        <div className="relative">
+                          <img
+                            src={primaryPreview}
+                            className="w-48 h-48 object-cover rounded-lg border shadow-md"
+                            alt="Primary preview"
+                          />
+                          <span className="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">
+                            Primary
+                          </span>
+                        </div>
+                      )}
+                    </label>
+                  </div>
+
+                  {/* Gallery Images */}
+                  <div>
+                    <label className="block font-medium text-gray-700 mb-3">
+                      Gallery Images{" "}
+                      <span className="text-xs text-gray-400">(Max 5)</span>
+                    </label>
+
+                    <label className="flex flex-col items-center justify-center border-2 border-dashed rounded-xl p-6 cursor-pointer hover:bg-indigo-50 transition">
+                      <input
+                        type="file"
+                        multiple
+                        accept="image/*"
+                        onChange={handleGalleryImages}
+                        className="hidden"
+                      />
+
+                      <span className="text-indigo-500 text-3xl">🖼️</span>
+                      <p className="text-sm text-gray-600 mt-2">
+                        Click to upload gallery images
+                      </p>
+                    </label>
+
+                    {galleryPreviews.length > 0 && (
+                      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 mt-5">
+                        {galleryPreviews.map((src, i) => (
+                          <div
+                            key={i}
+                            className="relative group rounded-lg overflow-hidden border shadow-sm"
+                          >
+                            <img
+                              src={src}
+                              className="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105"
+                              alt={`Gallery preview ${i + 1}`}
+                            />
+
+                            <button
+                              type="button"
+                              onClick={() => removeGalleryImage(i)}
+                              className="absolute top-1 right-1 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"
+                            >
+                              ✕
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </>
+              ) : (
+                <div className="text-center py-8 bg-indigo-50 rounded-lg border-2 border-indigo-200">
+                  <span className="text-4xl">🎨</span>
+                  <p className="text-gray-600 mt-3 font-medium">
+                    Upload images for each variant in the Variant section
+                  </p>
+                  <p className="text-sm text-gray-500 mt-1">
+                    Each color variant can have its own set of images
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <div className="text-right">
+              <button
+                type="submit"
+                className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-10 py-3 rounded-xl shadow-md transition duration-300"
+              >
+                Add Product
+              </button>
+            </div>
+          </div>
+        </form>
+      </motion.div>
+    </div>
+  );
+};
+
+/* ===== Reusable Components ===== */
+const Input = ({
+  label,
+  name,
+  type = "text",
+  value,
+  onChange,
+  placeholder,
+  required = false,
+}) => (
+  <div>
+    <label className="block font-medium text-gray-700">{label}</label>
+    <input
+      type={type}
+      name={name}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      required={required}
+      className="mt-2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-400"
+    />
+  </div>
+);
+
+const Textarea = ({ label, name, value, onChange, placeholder }) => (
+  <div>
+    <label className="block font-medium text-gray-700">{label}</label>
+    <textarea
+      name={name}
+      value={value}
+      onChange={onChange}
+      rows={3}
+      placeholder={placeholder}
+      className="mt-2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-400"
+    />
+  </div>
+);
+
+const Select = ({ label, name, value, onChange, options }) => (
+  <div>
+    <label className="block font-medium text-gray-700">{label}</label>
+    <select
+      name={name}
+      value={value}
+      onChange={onChange}
+      className="mt-2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-400"
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  </div>
+);
+
+export default ProductAdd;
--- a/src/pages/Products/ProductDetails.jsx
+++ b/src/pages/Products/ProductDetails.jsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import axios from "../../app/api";
+import { ArrowLeft } from "lucide-react";
+
+const ProductDetails = () => {
+  const { slug } = useParams();
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+     .get(`/products/${slug}`)
+      .then((res) => {
+        setProduct(res.data.data.product);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, [slug]);
+
+  if (loading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading product details...
+      </div>
+    );
+
+  if (!product)
+    return (
+      <div className="text-center mt-10 text-gray-600">Product not found!</div>
+    );
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      {/* Back Button */}
+      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <Link to="/products" className="font-medium">
+          Back to Products
+        </Link>
+      </div>
+
+      {/* Product Header */}
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between bg-white shadow-md rounded-2xl p-6 border border-gray-100">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{product.name}</h2>
+          <p className="text-gray-500 text-sm mt-1">{product.slug}</p>
+        </div>
+        <div className="mt-4 md:mt-0">
+          <p className="text-3xl font-semibold text-green-600">
+            ₹{product.basePrice?.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {/* Product Info */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Product Details
+          </h3>
+          <InfoRow label="Description" value={product.description || "N/A"} />
+          <InfoRow label="Category ID" value={product.category || "N/A"} />
+          <InfoRow label="Status" value={product.status || "N/A"} />
+          <InfoRow label="Featured" value={product.isFeatured ? "Yes" : "No"} />
+          <InfoRow label="Digital" value={product.isDigital ? "Yes" : "No"} />
+        </div>
+
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Analytics
+          </h3>
+          <InfoRow label="View Count" value={product.viewCount || 0} />
+          <InfoRow label="Purchase Count" value={product.purchaseCount || 0} />
+          <InfoRow
+            label="Created At"
+            value={new Date(product.createdAt).toLocaleString()}
+          />
+          <InfoRow
+            label="Updated At"
+            value={new Date(product.updatedAt).toLocaleString()}
+          />
+        </div>
+      </div>
+
+      {/* Images Section */}
+      {product.images?.gallery?.length > 0 && (
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-3">
+            Product Images
+          </h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4">
+            {product.images.gallery.map((img, idx) => (
+              <div
+                key={idx}
+                className="overflow-hidden rounded-lg border hover:shadow-md transition-all"
+              >
+                <img
+                  src={img}
+                  alt={`product-${idx}`}
+                  className="w-full h-40 object-cover"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Small helper component for clean info rows
+const InfoRow = ({ label, value }) => (
+  <div className="flex justify-between text-sm text-gray-700">
+    <span className="font-medium text-gray-600">{label}:</span>
+    <span className="text-gray-800">{value}</span>
+  </div>
+);
+
+export default ProductDetails;
--- a/src/pages/Products/ProductEdit.jsx
+++ b/src/pages/Products/ProductEdit.jsx
--- a/src/pages/Products/ProductList.jsx
+++ b/src/pages/Products/ProductList.jsx
@@ -0,0 +1,317 @@
+// import React from "react";
+// import { useGetProductsQuery } from "../../features/products/productApi";
+// import { Link } from "react-router-dom";
+// import { FiEye, FiEdit, FiTrash } from "react-icons/fi";
+
+// const ProductList = () => {
+//   const { data, isLoading, isError } = useGetProductsQuery({
+//     page: 1,
+//     limit: 10,
+//   });
+
+//   const handleDelete = (id) => {
+//   if (confirm("Are you sure you want to delete this product?")) {
+//     console.log("Delete Product:", id);
+//     // Later you will add RTK mutation here
+//   }
+// };
+
+//   const products = data?.data?.products || [];
+
+//   if (isLoading)
+//     return (
+//       <div className="text-center mt-10 text-gray-500">Loading products...</div>
+//     );
+
+//   if (isError)
+//     return (
+//       <div className="text-center mt-10 text-red-600">
+//         Failed to load products.
+//       </div>
+//     );
+
+//   return (
+//     <div className="space-y-6">
+//       {/* <h2 className="text-xl font-semibold text-gray-600">Products</h2> */}
+//       <div className="flex items-center justify-between mb-6">
+//         {/* LEFT SIDE TITLE */}
+//         <h2 className="text-xl font-semibold text-gray-700">Products</h2>
+
+//         {/* RIGHT SIDE SEARCH BAR */}
+//         <div className="flex items-center gap-3">
+//           <input
+//             type="text"
+//             placeholder="Search products..."
+//             className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
+//           />
+
+//           <Link
+//             to="/products/add"
+//             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+//           >
+//             + Add Product
+//           </Link>
+//         </div>
+//       </div>
+
+//       {products.length === 0 ? (
+//         <div className="text-center text-gray-500 py-10">
+//           No products found.
+//         </div>
+//       ) : (
+//         <div className="overflow-x-auto">
+//           <table className="min-w-full bg-white rounded-xl shadow-md divide-y divide-gray-200">
+//             <thead className="bg-gray-50">
+//               <tr>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Sr. No
+//                 </th>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Name
+//                 </th>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Price
+//                 </th>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Status
+//                 </th>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Views
+//                 </th>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Created At
+//                 </th>
+//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+//                   Actions
+//                 </th>
+//               </tr>
+//             </thead>
+//             <tbody className="divide-y divide-gray-200">
+//               {products.map((product, index) => (
+//                 <tr
+//                   key={product._id}
+//                   className="hover:bg-gray-50 transition-colors duration-150"
+//                 >
+//                   <td className="px-4 py-2 text-sm text-gray-700">
+//                     {index + 1}
+//                   </td>
+//                   <td className="px-4 py-2 text-sm text-gray-800 font-medium">
+//                     {product.name}
+//                   </td>
+//                   <td className="px-4 py-2 text-sm text-gray-700">
+//                     ₹{product.basePrice}
+//                   </td>
+//                   <td className="px-4 py-2">
+//                     <span
+//                       className={`px-2 py-1 text-xs font-semibold rounded-full ${
+//                         product.status === "active"
+//                           ? "bg-green-100 text-green-800"
+//                           : "bg-red-100 text-red-800"
+//                       }`}
+//                     >
+//                       {product.status}
+//                     </span>
+//                   </td>
+//                   <td className="px-4 py-2 text-sm text-gray-700">
+//                     {product.viewCount}
+//                   </td>
+//                   <td className="px-4 py-2 text-sm text-gray-500">
+//                     {new Date(product.createdAt).toLocaleDateString()}
+//                   </td>
+//                   {/* <td className="px-6 py-3">
+//                     <Link
+//                       to={`/products/${product.slug}`}
+//                       className="inline-block px-4 py-1 text-sm font-medium bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+//                     >
+//                       View Details
+//                     </Link>
+//                   </td> */}
+//                   <td className="px-6 py-3">
+//   <div className="flex items-center gap-3">
+
+//     {/* View */}
+//     <Link
+//       to={`/products/${product.slug}`}
+//       className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition"
+//       title="View Product"
+//     >
+//       <FiEye size={18} />
+//     </Link>
+
+//     {/* Edit */}
+//     <Link
+//       to={`/products/edit/${product._id}`}
+//       className="p-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition"
+//       title="Edit Product"
+//     >
+//       <FiEdit size={18} />
+//     </Link>
+
+//     {/* Delete */}
+//     <button
+//       onClick={() => handleDelete(product._id)}
+//       className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition"
+//       title="Delete Product"
+//     >
+//       <FiTrash size={18} />
+//     </button>
+
+//   </div>
+// </td>
+
+//                 </tr>
+//               ))}
+//             </tbody>
+//           </table>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default ProductList;
+
+import React, { useState } from "react";
+import { useGetProductsQuery } from "../../features/products/productAPI";
+import { Link } from "react-router-dom";
+import { FiEye, FiEdit, FiTrash } from "react-icons/fi";
+import Table from "../../components/common/Table";
+import Pagination from "../../components/common/Pagination";
+
+const ProductList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 10;
+
+  const { data, isLoading, isError } = useGetProductsQuery({
+    page: currentPage,
+    limit: perPage,
+  });
+
+  const handleDelete = (id) => {
+    if (confirm("Are you sure you want to delete this product?")) {
+      console.log("Delete Product:", id);
+      // Later you will add RTK mutation here
+    }
+  };
+
+  const products = data?.data?.products || [];
+  const totalPages = Math.ceil(data?.data?.total / perPage || 0);
+
+  // Table columns
+  const columns = [
+    {
+      key: "sr",
+      label: "Sr. No",
+      render: (_, row, index) => index + 1,
+    },
+    {
+      key: "name",
+      label: "Name",
+    },
+    {
+      key: "price",
+      label: "Price",
+      render: (_, row) => `₹${row.basePrice}`,
+    },
+    {
+      key: "status",
+      label: "Status",
+      render: (_, row) => (
+        <span
+          className={`px-2 py-1 text-xs font-semibold rounded-full ${
+            row.status === "active"
+              ? "bg-green-100 text-green-800"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {row.status}
+        </span>
+      ),
+    },
+    {
+      key: "views",
+      label: "Views",
+      render: (_, row) => row.viewCount,
+    },
+    {
+      key: "createdAt",
+      label: "Created At",
+      render: (_, row) => new Date(row.createdAt).toLocaleDateString(),
+    },
+  ];
+
+  // Action buttons
+  const rowActions = (row) => (
+    <div className="flex items-center justify-center gap-2">
+      <Link
+        to={`/products/${row.slug}`}
+        className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition"
+        title="View"
+      >
+        <FiEye size={18} />
+      </Link>
+
+      <Link
+        to={`/products/edit/${row._id}`}
+        className="p-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition"
+        title="Edit"
+      >
+        <FiEdit size={18} />
+      </Link>
+
+      <button
+        onClick={() => handleDelete(row._id)}
+        className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition"
+        title="Delete"
+      >
+        <FiTrash size={18} />
+      </button>
+    </div>
+  );
+
+  if (isLoading)
+    return (
+      <div className="text-center mt-10 text-gray-500">Loading products...</div>
+    );
+
+  if (isError)
+    return (
+      <div className="text-center mt-10 text-red-600">
+        Failed to load products.
+      </div>
+    );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-gray-700">Products</h2>
+        <div className="flex items-center gap-3">
+          <input
+            type="text"
+            placeholder="Search products..."
+            className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
+          />
+          <Link
+            to="/products/add"
+            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+          >
+            + Add Product
+          </Link>
+        </div>
+      </div>
+
+      {/* Table */}
+      <Table columns={columns} data={products} actions={rowActions} />
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(pg) => setCurrentPage(pg)}
+      />
+    </div>
+  );
+};
+
+export default ProductList;
--- a/src/pages/Reports/CustomersReport.jsx
+++ b/src/pages/Reports/CustomersReport.jsx
@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import { useGetCustomersReportQuery } from "../../features/report/customersAPI";
+import {
+  BarChart,
+  Bar,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from "recharts";
+import { FiUsers, FiTrendingUp, FiChevronDown } from "react-icons/fi";
+
+const CustomersReport = () => {
+  const { data, isLoading, isError } = useGetCustomersReportQuery();
+  const [activePeriod, setActivePeriod] = useState("weekly"); // default period
+
+  if (isLoading)
+    return <div className="p-6 text-center animate-pulse">Loading report...</div>;
+  if (isError)
+    return <p className="p-6 text-center text-red-500">Error loading data.</p>;
+
+  const { newCustomers, repeatCustomers, graph } = data.data;
+
+  const periods = Object.keys(graph);
+  const selectedPeriod = graph[activePeriod] ?? graph[periods[0]];
+  const totalCustomers = newCustomers + repeatCustomers;
+
+  return (
+    <div
+      className="
+        bg-white rounded-3xl shadow-xl border border-gray-100 p-6
+        transition-all duration-300 hover:shadow-2xl
+      "
+      style={{ backdropFilter: "blur(12px)" }}
+    >
+      {/* TOP SECTION */}
+      <div className="flex items-center justify-between mb-5">
+        <div className="flex items-start gap-4">
+          <div
+            className="
+              w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-indigo-600
+              flex items-center justify-center shadow-lg text-white text-2xl
+              transform transition-all duration-300 hover:scale-105
+            "
+          >
+            <FiUsers />
+          </div>
+
+          <div>
+            <p className="text-sm text-gray-500">Total Customers</p>
+            <h2 className="text-4xl font-extrabold tracking-tight">{totalCustomers}</h2>
+
+            <div className="flex gap-6 mt-2 text-gray-600 text-sm">
+              <span className="flex gap-1">
+                <span className="font-semibold text-indigo-600">{newCustomers}</span> New
+              </span>
+              <span className="flex gap-1">
+                <span className="font-semibold text-green-600">{repeatCustomers}</span> Repeat
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* PERIOD DROPDOWN RIGHT SIDE */}
+        <div className="relative">
+          <select
+            className="
+              appearance-none px-4 py-2 pr-10 rounded-full border border-gray-200 shadow-sm
+              focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700
+              hover:bg-gray-50 cursor-pointer
+            "
+            value={activePeriod}
+            onChange={(e) => setActivePeriod(e.target.value)}
+          >
+            {periods.map((period) => (
+              <option key={period} value={period}>
+                {period.charAt(0).toUpperCase() + period.slice(1)}
+              </option>
+            ))}
+          </select>
+          <FiChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
+        </div>
+      </div>
+
+      {/* GRAPH */}
+      <div className="w-full h-48">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={selectedPeriod}>
+            <XAxis dataKey="label" tick={{ fontSize: 12 }} />
+            <Tooltip
+              cursor={{ opacity: 0.2 }}
+              contentStyle={{
+                borderRadius: "10px",
+                border: "none",
+                boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
+              }}
+            />
+            <defs>
+              <linearGradient id="softGreen" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#34d399" stopOpacity="0.95" />
+                <stop offset="100%" stopColor="#34d399" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+            <Bar dataKey="value" fill="url(#softGreen)" radius={[10, 10, 0, 0]} barSize={28} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
+
+export default CustomersReport;
--- a/src/pages/Reports/InventoryReport.jsx
+++ b/src/pages/Reports/InventoryReport.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { useGetInventoryStatsQuery } from "../../features/report/inventoryAPI";
+
+const StockBadge = ({ stock }) => {
+  if (stock === 0) return <span className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full">Out of Stock</span>;
+  if (stock <= 5) return <span className="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">Low Stock</span>;
+  return <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">{stock}</span>;
+};
+
+const ProductCard = ({ product }) => (
+  <div className="bg-white shadow-md rounded-xl p-4 hover:shadow-xl transition transform hover:scale-105">
+    <div className="flex justify-between items-center mb-2">
+      <h3 className="font-semibold text-gray-800">{product.name}</h3>
+      <StockBadge stock={product.stock} />
+    </div>
+    <p className="text-gray-500 text-sm">{product.category?.name || "Unknown Category"}</p>
+  </div>
+);
+
+const InventorySection = ({ title, products }) => (
+  <div className="flex flex-col gap-4">
+    <h2 className="text-xl font-bold text-gray-700">{title}</h2>
+    {products.length === 0 ? (
+      <p className="text-gray-400 italic">No products found</p>
+    ) : (
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        {products.map((p) => (
+          <ProductCard key={p._id} product={p} />
+        ))}
+      </div>
+    )}
+  </div>
+);
+
+const InventoryReport = () => {
+  const { data, isLoading, isError } = useGetInventoryStatsQuery();
+
+  if (isLoading) return <div className="text-center p-6 text-gray-500">Loading inventory...</div>;
+  if (isError) return <div className="text-center p-6 text-red-500">Failed to load inventory</div>;
+
+  const { lowStock, outOfStock, fastMoving } = data.data;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
+      <InventorySection title="Low Stock" products={lowStock} />
+      <InventorySection title="Out of Stock" products={outOfStock} />
+      <InventorySection title="Fast Moving" products={fastMoving} />
+    </div>
+  );
+};
+
+export default InventoryReport;
--- a/src/pages/Reports/OrderStatusCards.jsx
+++ b/src/pages/Reports/OrderStatusCards.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { useGetOrdersReportQuery } from "../../features/report/ordersAPI";
+import { FiCheck, FiClock, FiX } from "react-icons/fi";
+
+const statusConfig = {
+  DELIVERED: {
+    label: "Delivered",
+    icon: <FiCheck className="text-green-500 w-6 h-6" />,
+    color: "text-green-600",
+  },
+  PENDING: {
+    label: "Pending",
+    icon: <FiClock className="text-yellow-500 w-6 h-6" />,
+    color: "text-yellow-600",
+  },
+  CANCELLED: {
+    label: "Cancelled",
+    icon: <FiX className="text-red-500 w-6 h-6" />,
+    color: "text-red-600",
+  },
+};
+
+const OrderCard = ({ status, count }) => {
+  const config = statusConfig[status];
+
+  return (
+    <div className="bg-white rounded-xl shadow-md p-6 flex flex-col gap-4 hover:shadow-lg transition">
+      <div className="flex items-center justify-between">
+        <span className={`font-medium ${config.color}`}>{config.label}</span>
+        <div>{config.icon}</div>
+      </div>
+      <h2 className="text-3xl font-bold text-gray-800">{count}</h2>
+      <p className="text-gray-500 text-sm">Total {config.label} Orders</p>
+    </div>
+  );
+};
+
+const OrdersReport = () => {
+  const { data, isLoading, isError } = useGetOrdersReportQuery();
+
+  if (isLoading)
+    return <div className="p-6 text-center text-gray-400">Loading orders report...</div>;
+  if (isError)
+    return <p className="p-6 text-center text-red-500">Error fetching orders report.</p>;
+
+  const stats = ["DELIVERED", "PENDING", "CANCELLED"].map((status) => {
+    const item = data?.data?.find((d) => d.status === status);
+    return {
+      status,
+      count: item?._count?.id ?? 0,
+    };
+  });
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+      {stats.map((item) => (
+        <OrderCard key={item.status} status={item.status} count={item.count} />
+      ))}
+    </div>
+  );
+};
+
+export default OrdersReport;
--- a/src/pages/Reports/ReportsDashboard.jsx
+++ b/src/pages/Reports/ReportsDashboard.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import SalesReport from "./SalesReport";
+import CustomersReport from "./CustomersReport";
+import OrderStatusCards from "./OrderStatusCards";
+import InventoryReport from "./InventoryReport";
+
+const ReportsDashboard = () => {
+  return (
+    <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-3">
+        <InventoryReport />
+      </div>
+      <div className="md:col-span-3">
+        <SalesReport />
+      </div>
+      <div className="md:col-span-3">
+        <CustomersReport />
+      </div>
+      <div className="md:col-span-3">
+        <OrderStatusCards />
+      </div>
+    </div>
+  );
+};
+
+export default ReportsDashboard;
--- a/src/pages/Reports/SalesReport.jsx
+++ b/src/pages/Reports/SalesReport.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { useGetSalesReportQuery } from "../../features/report/salesAPI";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+const SalesReport = () => {
+  const { data, isLoading, isError, error } = useGetSalesReportQuery();
+  console.log(error);
+  if (isLoading)
+    return <p className="p-6 text-center">Loading sales data...</p>;
+  if (isError)
+    return (
+      <p className="p-6 text-center text-red-500">Error loading sales data.</p>
+    );
+
+  const dailyData = Object.entries(data?.data?.dailySales || {}).map(
+    ([date, value]) => ({
+      date,
+      sales: value,
+    })
+  );
+
+  const monthlyData = Object.entries(data?.data?.monthlySales || {}).map(
+    ([month, value]) => ({
+      month,
+      sales: value,
+    })
+  );
+
+  return (
+    <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+      {/* Daily Sales Card */}
+      <div className="p-6 bg-white shadow rounded-lg">
+        <h2 className="text-lg font-bold mb-4">Daily Sales</h2>
+        {dailyData.length ? (
+          <ResponsiveContainer width="100%" height={300}>
+            <LineChart data={dailyData}>
+              <CartesianGrid stroke="#e0e0e0" strokeDasharray="5 5" />
+              <XAxis dataKey="date" />
+              <YAxis />
+              <Tooltip />
+              <Line
+                type="monotone"
+                dataKey="sales"
+                stroke="#4f46e5"
+                strokeWidth={2}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        ) : (
+          <p>No daily sales data.</p>
+        )}
+      </div>
+
+      {/* Monthly Sales Card */}
+      <div className="p-6 bg-white shadow rounded-lg">
+        <h2 className="text-lg font-bold mb-4">Monthly Sales</h2>
+        {monthlyData.length ? (
+          <ResponsiveContainer width="100%" height={300}>
+            <LineChart data={monthlyData}>
+              <CartesianGrid stroke="#e0e0e0" strokeDasharray="5 5" />
+              <XAxis dataKey="month" />
+              <YAxis />
+              <Tooltip />
+              <Line
+                type="monotone"
+                dataKey="sales"
+                stroke="#16a34a"
+                strokeWidth={2}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        ) : (
+          <p>No monthly sales data.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SalesReport;
--- a/src/pages/Returns/components/ReturnCard.jsx
+++ b/src/pages/Returns/components/ReturnCard.jsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useUpdateReturnStatusMutation } from "../../../features/orders/ordersAPI";
+import ConfirmModal from '../../../components/common/ConfirmModal';
+
+const ReturnCard = ({ order }) => {
+  const [updateReturnStatus] = useUpdateReturnStatusMutation();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [actionType, setActionType] = useState(null);
+
+  const handleAction = async () => {
+    if (!actionType) return;
+    await updateReturnStatus({ id: order.id, action: actionType });
+    setModalOpen(false);
+  };
+
+  return (
+    <div className="p-4 border rounded-lg shadow-sm bg-white">
+      <h3 className="font-semibold text-lg">Order #{order.orderNumber}</h3>
+      <p className="text-gray-600">
+        Customer: {order.user?.firstName} {order.user?.lastName}
+      </p>
+      <p className="text-gray-600">Total: ₹{order.totalAmount}</p>
+      <p className="text-gray-600">Status: {order.returnStatus}</p>
+
+      <div className="mt-2 flex gap-2">
+        {order.returnStatus === 'REQUESTED' && (
+          <>
+            <button
+              onClick={() => { setActionType('APPROVE'); setModalOpen(true); }}
+              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+            >
+              Approve
+            </button>
+            <button
+              onClick={() => { setActionType('REJECT'); setModalOpen(true); }}
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              Reject
+            </button>
+          </>
+        )}
+      </div>
+
+      <ConfirmModal
+        isOpen={modalOpen}
+        title={actionType ? `${actionType} Return Request` : ''}
+        message={actionType ? `Are you sure you want to ${actionType.toLowerCase()} this return request?` : ''}
+        onCancel={() => setModalOpen(false)}
+        onConfirm={handleAction}
+      />
+    </div>
+  );
+};
+
+export default ReturnCard;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>