first commit

2026-03-10 14:55:59 +05:30
commit 39d42663c0
134 changed files with 16311 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.7.0"
+  },
+  "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,140 @@
+// 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;
+
+
+
+import React, { useState } from "react";
+import { FiMenu, FiBell, FiSearch, FiChevronDown } from "react-icons/fi";
+
+const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-20 h-16 bg-white border-b border-gray-100 flex items-center justify-between px-4 md:px-6 shadow-sm">
+
+      {/* ── Left: Hamburger + Search ─────────────────────── */}
+      <div className="flex items-center gap-3">
+        {/* Mobile hamburger */}
+        <button
+          className="md:hidden p-2 rounded-xl hover:bg-gray-100 transition text-gray-600"
+          onClick={toggleMobileSidebar}
+        >
+          <FiMenu size={20} />
+        </button>
+
+        {/* Desktop hamburger */}
+        <button
+          className="hidden md:flex p-2 rounded-xl hover:bg-gray-100 transition text-gray-600"
+          onClick={toggleSidebar}
+        >
+          <FiMenu size={20} />
+        </button>
+
+        {/* Search bar */}
+        <div className="hidden md:flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 w-64 group focus-within:border-blue-400 focus-within:bg-white transition-all">
+          <FiSearch size={15} className="text-gray-400 flex-shrink-0" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className="bg-transparent text-sm text-gray-700 placeholder-gray-400 outline-none w-full"
+          />
+        </div>
+      </div>
+
+      {/* ── Right: Bell + Avatar ─────────────────────────── */}
+      <div className="flex items-center gap-2">
+
+        {/* Notification bell */}
+        <button className="relative p-2 rounded-xl hover:bg-gray-100 transition text-gray-600 group">
+          <FiBell size={20} />
+          {/* Unread dot */}
+          <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500 ring-2 ring-white" />
+        </button>
+
+        {/* Avatar + dropdown */}
+        <div className="relative">
+          <button
+            onClick={() => setShowDropdown(!showDropdown)}
+            className="flex items-center gap-2 pl-1 pr-2 py-1 rounded-xl hover:bg-gray-100 transition"
+          >
+            {/* Avatar */}
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white text-xs font-bold shadow">
+              A
+            </div>
+            <div className="hidden md:block text-left">
+              <p className="text-sm font-semibold text-gray-800 leading-tight">Admin</p>
+              <p className="text-xs text-gray-400 leading-tight">Super Admin</p>
+            </div>
+            <FiChevronDown
+              size={14}
+              className={`hidden md:block text-gray-400 transition-transform duration-200 ${showDropdown ? "rotate-180" : ""}`}
+            />
+          </button>
+
+          {/* Dropdown */}
+          {showDropdown && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setShowDropdown(false)} />
+              <div className="absolute right-0 top-12 z-20 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 w-44 text-sm">
+                <button className="w-full text-left px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition">
+                  Profile
+                </button>
+                <button className="w-full text-left px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition">
+                  Settings
+                </button>
+                <div className="border-t border-gray-100 my-1" />
+                <button className="w-full text-left px-4 py-2.5 text-red-500 hover:bg-red-50 transition font-medium">
+                  Logout
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.jsx
@@ -0,0 +1,475 @@
+// 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;
+
+
+
+
+import React, { useState, useEffect } from "react";
+import {
+  FiHome, FiBox, FiUsers, FiShoppingCart, FiLogOut, FiX,
+  FiChevronDown, FiTag, FiRefreshCw, FiPercent, FiGrid,
+} from "react-icons/fi";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import ConfirmModal from "../common/ConfirmModal";
+
+const NAV_ITEMS = [
+  { 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" },
+    ],
+  },
+  { name: "Users",    icon: FiUsers,    path: "/users" },
+  {
+    name: "Categories", icon: FiGrid,
+    subMenu: [
+      { name: "Category List", path: "/categories" },
+      { name: "Add Category",  path: "/categories/add" },
+    ],
+  },
+   { name: "Report", icon: FiRefreshCw, path: "/reports" },
+  { name: "Returns", icon: FiRefreshCw, path: "/returns" },
+  { name: "Coupons", icon: FiPercent,   path: "/coupons" },
+];
+
+const Sidebar = ({ isCollapsed, mobileOpen, toggleMobileSidebar }) => {
+  const location  = useLocation();
+  const navigate  = useNavigate();
+  const [openMenus,   setOpenMenus]   = useState({});
+  const [logoutOpen,  setLogoutOpen]  = useState(false);
+
+  // Auto-expand parent when child route is active
+  useEffect(() => {
+    NAV_ITEMS.forEach((item) => {
+      if (item.subMenu?.some((s) => location.pathname.startsWith(s.path))) {
+        setOpenMenus((prev) => ({ ...prev, [item.name]: true }));
+      }
+    });
+  }, [location.pathname]);
+
+  const toggle = (name) =>
+    setOpenMenus((prev) => ({ ...prev, [name]: !prev[name] }));
+
+  const isActive     = (path) => location.pathname === path;
+  const isParentActive = (item) =>
+    item.subMenu?.some((s) => location.pathname.startsWith(s.path));
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      <div
+        className={`fixed inset-0 bg-black/50 backdrop-blur-sm z-40 md:hidden transition-opacity duration-300 ${
+          mobileOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
+        }`}
+        onClick={toggleMobileSidebar}
+      />
+
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed inset-y-0 left-0 z-50 flex flex-col
+          bg-[#0f172a] text-white
+          transform transition-all duration-300 ease-in-out
+          ${mobileOpen ? "translate-x-0" : "-translate-x-full"}
+          md:translate-x-0 md:static
+          ${isCollapsed ? "w-[72px]" : "w-64"}
+        `}
+      >
+        {/* ── Logo ─────────────────────────────────────── */}
+        <div className={`flex items-center h-16 px-4 border-b border-white/10 flex-shrink-0 ${isCollapsed ? "justify-center" : "justify-between"}`}>
+          {!isCollapsed && (
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center shadow-lg">
+                <span className="text-white font-black text-sm">V</span>
+              </div>
+              <span className="font-bold text-lg tracking-tight text-white">
+                Vaishnavi
+              </span>
+            </div>
+          )}
+          {isCollapsed && (
+            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center shadow-lg">
+              <span className="text-white font-black text-sm">V</span>
+            </div>
+          )}
+          <button
+            className="md:hidden p-1.5 rounded-lg hover:bg-white/10 transition"
+            onClick={toggleMobileSidebar}
+          >
+            <FiX size={18} />
+          </button>
+        </div>
+
+        {/* ── Navigation ───────────────────────────────── */}
+        <nav className="flex-1 overflow-y-auto py-4 px-2 space-y-0.5 scrollbar-thin scrollbar-thumb-white/10">
+          {!isCollapsed && (
+            <p className="text-[10px] font-semibold uppercase tracking-widest text-white/30 px-3 pb-2 pt-1">
+              Main Menu
+            </p>
+          )}
+
+          {NAV_ITEMS.map((item) => {
+            const Icon        = item.icon;
+            const hasSubMenu  = !!item.subMenu;
+            const isOpen      = openMenus[item.name];
+            const parentActive = isParentActive(item);
+
+            if (hasSubMenu) {
+              return (
+                <div key={item.name}>
+                  <button
+                    onClick={() => toggle(item.name)}
+                    className={`
+                      w-full flex items-center gap-3 px-3 py-2.5 rounded-xl
+                      text-sm font-medium transition-all duration-150 group
+                      ${isOpen || parentActive
+                        ? "bg-white/10 text-white"
+                        : "text-white/60 hover:bg-white/5 hover:text-white"
+                      }
+                      ${isCollapsed ? "justify-center" : "justify-between"}
+                    `}
+                  >
+                    <div className="flex items-center gap-3 min-w-0">
+                      <span className={`flex-shrink-0 transition-colors ${isOpen || parentActive ? "text-blue-400" : "text-white/40 group-hover:text-white/70"}`}>
+                        <Icon size={18} />
+                      </span>
+                      {!isCollapsed && <span className="truncate">{item.name}</span>}
+                    </div>
+                    {!isCollapsed && (
+                      <FiChevronDown
+                        size={14}
+                        className={`flex-shrink-0 text-white/40 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+                      />
+                    )}
+                  </button>
+
+                  {/* Submenu */}
+                  {isOpen && !isCollapsed && (
+                    <div className="ml-4 mt-0.5 mb-1 pl-3 border-l border-white/10 space-y-0.5">
+                      {item.subMenu.map((sub) => (
+                        <Link
+                          key={sub.path}
+                          to={sub.path}
+                          className={`
+                            flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all duration-150
+                            ${isActive(sub.path)
+                              ? "bg-blue-600 text-white font-medium shadow-md shadow-blue-900/40"
+                              : "text-white/50 hover:bg-white/5 hover:text-white"
+                            }
+                          `}
+                        >
+                          <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${isActive(sub.path) ? "bg-white" : "bg-white/30"}`} />
+                          {sub.name}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            // Regular link
+            const active = isActive(item.path);
+            return (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`
+                  flex items-center gap-3 px-3 py-2.5 rounded-xl
+                  text-sm font-medium transition-all duration-150 group
+                  ${isCollapsed ? "justify-center" : ""}
+                  ${active
+                    ? "bg-blue-600 text-white shadow-md shadow-blue-900/40"
+                    : "text-white/60 hover:bg-white/5 hover:text-white"
+                  }
+                `}
+              >
+                <span className={`flex-shrink-0 transition-colors ${active ? "text-white" : "text-white/40 group-hover:text-white/70"}`}>
+                  <Icon size={18} />
+                </span>
+                {!isCollapsed && <span className="truncate">{item.name}</span>}
+
+                {/* Active indicator dot when collapsed */}
+                {isCollapsed && active && (
+                  <span className="absolute right-1 w-1.5 h-1.5 rounded-full bg-blue-400" />
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* ── User + Logout ─────────────────────────────── */}
+        <div className="flex-shrink-0 p-3 border-t border-white/10 space-y-2">
+          {!isCollapsed && (
+            <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-white/5">
+              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-xs font-bold flex-shrink-0">
+                A
+              </div>
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-white truncate">Admin</p>
+                <p className="text-xs text-white/40 truncate">Super Admin</p>
+              </div>
+            </div>
+          )}
+
+          <button
+            onClick={() => setLogoutOpen(true)}
+            className={`
+              w-full flex items-center gap-3 px-3 py-2.5 rounded-xl
+              text-sm font-medium text-white/60
+              hover:bg-red-500/15 hover:text-red-400
+              transition-all duration-150 group
+              ${isCollapsed ? "justify-center" : ""}
+            `}
+          >
+            <FiLogOut size={18} className="flex-shrink-0 group-hover:text-red-400 transition-colors" />
+            {!isCollapsed && <span>Logout</span>}
+          </button>
+        </div>
+      </aside>
+
+      <ConfirmModal
+        isOpen={logoutOpen}
+        title="Logout"
+        message="Are you sure you want to logout?"
+        onCancel={() => setLogoutOpen(false)}
+        onConfirm={() => { setLogoutOpen(false); navigate("/login"); }}
+      />
+    </>
+  );
+};
+
+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,90 @@
+// 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: (formData) => ({
+    url: "/admin/categories",
+    method: "POST",
+    body: formData,   // must be FormData
+  }),
+  invalidatesTags: ["Categories"],
+}),
+
+    // updateCategory: builder.mutation({
+    //   query: ({ id, ...body }) => ({
+    //     url: `/admin/categories/${id}`,
+    //     method: "PUT",
+    //     body,
+    //   }),
+    //   invalidatesTags: ["Categories"],
+    // }),
+
+    updateCategory: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/admin/categories/${id}`,
+        method: "PUT",
+        body: data, // can be FormData OR JSON
+      }),
+      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,248 @@
+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: "",
+    metaTitle: "",
+    metaDescription: "",
+  });
+
+  const [previewImage, setPreviewImage] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  useEffect(() => {
+    if (data?.data) {
+      const { name, description, image, metaTitle, metaDescription } =
+        data.data;
+
+      setForm({ name, description, metaTitle, metaDescription });
+      setPreviewImage(image); // show existing image
+    }
+  }, [data]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+      setPreviewImage(URL.createObjectURL(file));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const formData = new FormData();
+
+      formData.append("name", form.name);
+      formData.append("description", form.description);
+      formData.append("metaTitle", form.metaTitle);
+      formData.append("metaDescription", form.metaDescription);
+
+      if (selectedFile) {
+        formData.append("image", selectedFile);
+      }
+
+      await updateCategory({ id, data: formData }).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="min-h-screen bg-gray-200 py-12 px-4">
+      <div className="max-w-5xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-10">
+          <Link
+            to="/categories"
+            className="flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition"
+          >
+            <ArrowLeft size={20} />
+            <span className="font-medium">Back to Categories</span>
+          </Link>
+
+          <h1 className="text-xl font-bold bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-transparent">
+            Edit Category
+          </h1>
+        </div>
+
+        {/* Glass Card */}
+        <div className="backdrop-blur-xl bg-white/70 border border-white/40 shadow-2xl rounded-3xl p-10 transition hover:shadow-indigo-200/50">
+          <form className="space-y-10" onSubmit={handleSubmit}>
+            {/* SECTION 1 */}
+            <div>
+              <h2 className="text-xl font-semibold text-gray-800 mb-6">
+                Basic Information
+              </h2>
+
+              <div className="grid md:grid-cols-2 gap-8">
+                <FloatingInput
+                  label="Category Name"
+                  name="name"
+                  value={form.name}
+                  onChange={handleChange}
+                  required
+                />
+
+                <FloatingInput
+                  label="Meta Title"
+                  name="metaTitle"
+                  value={form.metaTitle}
+                  onChange={handleChange}
+                />
+              </div>
+
+              <div className="mt-8 space-y-6">
+                <FloatingTextarea
+                  label="Description"
+                  name="description"
+                  value={form.description}
+                  onChange={handleChange}
+                />
+
+                <FloatingTextarea
+                  label="Meta Description"
+                  name="metaDescription"
+                  value={form.metaDescription}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+
+            {/* SECTION 2 - IMAGE */}
+            <div>
+              <h2 className="text-xl font-semibold text-gray-800 mb-6">
+                Category Image
+              </h2>
+
+              <div className="flex flex-col md:flex-row items-start gap-10">
+                {/* Preview Card */}
+                <div className="relative group w-56 h-56 rounded-2xl overflow-hidden shadow-xl border border-gray-200">
+                  {previewImage ? (
+                    <>
+                      <img
+                        src={previewImage}
+                        alt="Preview"
+                        className="w-full h-full object-cover transition duration-300 group-hover:scale-110"
+                      />
+                      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white font-medium transition">
+                        Change Image
+                      </div>
+                    </>
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center text-gray-400 bg-gray-100">
+                      No Image
+                    </div>
+                  )}
+                </div>
+
+                {/* Upload Button */}
+                <label className="cursor-pointer">
+                  <div className="px-8 py-4 rounded-2xl bg-gradient-to-r from-indigo-500 to-blue-600 text-white font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300">
+                    Upload New Image
+                  </div>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleImageChange}
+                    hidden
+                  />
+                </label>
+              </div>
+            </div>
+
+            {/* Submit */}
+            <div className="pt-6 border-t border-gray-200 flex justify-end">
+              <button
+                type="submit"
+                disabled={isUpdating}
+                className="px-10 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-green-600 text-white font-semibold shadow-xl hover:scale-105 hover:shadow-2xl transition-all duration-300 disabled:opacity-50"
+              >
+                {isUpdating ? "Updating..." : "Update Category"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FloatingInput = ({ label, name, value, onChange, required }) => (
+  <div className="relative">
+    <input
+      type="text"
+      name={name}
+      value={value}
+      onChange={onChange}
+      required={required}
+      placeholder=" "
+      className="peer w-full border border-gray-300 rounded-xl px-4 pt-6 pb-2 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
+    />
+    <label
+      className="absolute left-4 top-2 text-gray-500 text-sm transition-all 
+      peer-placeholder-shown:top-4 
+      peer-placeholder-shown:text-base 
+      peer-placeholder-shown:text-gray-400
+      peer-focus:top-2 
+      peer-focus:text-sm 
+      peer-focus:text-indigo-600"
+    >
+      {label}
+    </label>
+  </div>
+);
+
+const FloatingTextarea = ({ label, name, value, onChange }) => (
+  <div className="relative">
+    <textarea
+      name={name}
+      value={value}
+      onChange={onChange}
+      rows={4}
+      placeholder=" "
+      className="peer w-full border border-gray-300 rounded-xl px-4 pt-6 pb-2 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition resize-none"
+    />
+    <label
+      className="absolute left-4 top-2 text-gray-500 text-sm transition-all 
+      peer-placeholder-shown:top-4 
+      peer-placeholder-shown:text-base 
+      peer-placeholder-shown:text-gray-400
+      peer-focus:top-2 
+      peer-focus:text-sm 
+      peer-focus:text-indigo-600"
+    >
+      {label}
+    </label>
+  </div>
+);
+
+export default CategoryEdit;
--- a/src/pages/Categories/CategoryForm.jsx
+++ b/src/pages/Categories/CategoryForm.jsx
@@ -0,0 +1,624 @@
+// 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;
+
+
+
+import React, { useState } from "react";
+import {
+  useAddCategoryMutation,
+  useGetCategoryTreeQuery,
+} from "../../features/categories/categoryAPI";
+
+const AddCategoryPage = () => {
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    parentId: "",
+    metaTitle: "",
+    metaDescription: "",
+  });
+
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [previewImage, setPreviewImage] = useState(null);
+
+  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 handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+      setPreviewImage(URL.createObjectURL(file));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const formData = new FormData();
+
+    formData.append("name", form.name);
+    formData.append("description", form.description);
+    formData.append("parentId", form.parentId || "");
+    formData.append("metaTitle", form.metaTitle);
+    formData.append("metaDescription", form.metaDescription);
+
+    if (selectedFile) {
+      formData.append("image", selectedFile);
+    }
+
+    await addCategory(formData).unwrap();
+
+    // Reset
+    setForm({
+      name: "",
+      description: "",
+      parentId: "",
+      metaTitle: "",
+      metaDescription: "",
+    });
+    setSelectedFile(null);
+    setPreviewImage(null);
+  };
+
+  // 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-gradient-to-br from-gray-50 to-gray-100 flex justify-center py-12 px-4">
+      <div className="w-full max-w-3xl bg-white rounded-2xl shadow-xl border p-8 space-y-8">
+
+        {/* Header */}
+        <div>
+          <h2 className="text-3xl font-bold text-gray-800">
+            Create New Category
+          </h2>
+          <p className="text-sm text-gray-500 mt-1">
+            Organize your products efficiently
+          </p>
+        </div>
+
+        <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 Upload */}
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-2">
+              Category Image
+            </label>
+
+            <div className="flex items-center gap-6">
+
+              {/* Preview Box */}
+              <div className="w-40 h-40 border-2 border-dashed rounded-xl flex items-center justify-center bg-gray-50 overflow-hidden">
+                {previewImage ? (
+                  <img
+                    src={previewImage}
+                    alt="Preview"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <span className="text-gray-400 text-sm">
+                    No Image Selected
+                  </span>
+                )}
+              </div>
+
+              {/* Upload Button */}
+              <label className="cursor-pointer">
+                <div className="px-6 py-3 bg-blue-600 text-white rounded-xl shadow hover:bg-blue-700 transition font-medium">
+                  Choose Image
+                </div>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageChange}
+                  hidden
+                />
+              </label>
+            </div>
+          </div>
+
+          {/* Description */}
+          <Textarea
+            label="Description"
+            name="description"
+            value={form.description}
+            onChange={handleChange}
+          />
+
+          {/* SEO Section */}
+          <div className="border rounded-xl p-6 bg-gray-50 space-y-5">
+            <p className="text-sm font-semibold 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 pt-4 border-t">
+            <button
+              type="submit"
+              disabled={adding}
+              className="px-8 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-60"
+            >
+              {adding ? "Saving..." : "Create 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-xl border px-4 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-xl border px-4 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-xl border px-4 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/components/ChartsSection.jsx
+++ b/src/pages/Dashboard/components/ChartsSection.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import OrdersOverview from "./OrdersOverview";
+import OrdersByStatusCard from "./OrdersByStatusCard";
+
+const ChartsSection = ({ charts }) => {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Left: takes 2/3 width */}
+      <div className="lg:col-span-11">
+        <OrdersOverview orderOverview={charts?.orderOverview} />
+      </div>
+    </div>
+  );
+};
+
+export default ChartsSection;
--- a/src/pages/Dashboard/components/InventoryStatus.jsx
+++ b/src/pages/Dashboard/components/InventoryStatus.jsx
@@ -0,0 +1,84 @@
+import React from "react";
+
+const inventoryItems = [
+  {
+    key: "inStock",
+    label: "In Stock",
+    bgClass: "bg-green-50 border-green-200",
+    textClass: "text-green-600",
+    valueClass: "text-green-700",
+    iconBg: "bg-green-100",
+    iconColor: "text-green-600",
+    icon: (
+      <svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    key: "lowStock",
+    label: "Low Stock",
+    bgClass: "bg-yellow-50 border-yellow-200",
+    textClass: "text-yellow-600",
+    valueClass: "text-yellow-700",
+    iconBg: "bg-yellow-100",
+    iconColor: "text-yellow-600",
+    icon: (
+      <svg className="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    key: "criticalStock",
+    label: "Critical",
+    bgClass: "bg-orange-50 border-orange-200",
+    textClass: "text-orange-600",
+    valueClass: "text-orange-700",
+    iconBg: "bg-orange-100",
+    iconColor: "text-orange-600",
+    icon: (
+      <svg className="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    key: "outOfStock",
+    label: "Out of Stock",
+    bgClass: "bg-red-50 border-red-200",
+    textClass: "text-red-600",
+    valueClass: "text-red-700",
+    iconBg: "bg-red-100",
+    iconColor: "text-red-600",
+    icon: (
+      <svg className="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+];
+
+const InventoryStatus = ({ inventory }) => {
+  if (!inventory) return null;
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {inventoryItems.map((item) => (
+        <div key={item.key} className={`${item.bgClass} border rounded-xl p-4`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-xs ${item.textClass} font-semibold uppercase`}>{item.label}</p>
+              <p className={`text-2xl font-bold ${item.valueClass} mt-1`}>{inventory[item.key]}</p>
+            </div>
+            <div className={`${item.iconBg} w-12 h-12 rounded-lg flex items-center justify-center`}>
+              {item.icon}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default InventoryStatus;
--- a/src/pages/Dashboard/components/LowStockAlert.jsx
+++ b/src/pages/Dashboard/components/LowStockAlert.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const LowStockAlert = ({ lowStockProducts }) => {
+  const navigate = useNavigate();
+
+  if (!lowStockProducts || lowStockProducts.length === 0) return null;
+
+  return (
+    <div className="bg-yellow-50 border-2 border-yellow-200 rounded-2xl p-6">
+      <div className="flex items-center gap-3 mb-4">
+        <svg className="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+        </svg>
+        <div>
+          <h3 className="text-xl font-bold text-yellow-900">Low Stock Alert</h3>
+          <p className="text-sm text-yellow-700">{lowStockProducts.length} products need restocking</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {lowStockProducts.map((product) => (
+          <div
+            key={product._id}
+            className="bg-white rounded-lg p-4 border border-yellow-200 flex items-center gap-4 cursor-pointer hover:shadow-md transition-shadow"
+            onClick={() => navigate(`/products/${product._id}`)}
+          >
+            <img
+              src={product.displayImage || "/bitmap.png"}
+              alt={product.name}
+              className="w-16 h-16 object-cover rounded-lg"
+              onError={(e) => { e.target.src = "/bitmap.png"; }}
+            />
+            <div className="flex-1">
+              <p className="font-semibold text-gray-900 text-sm line-clamp-1">{product.name}</p>
+              <p className="text-xs text-red-600 font-bold mt-1">Only {product.stock} left</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LowStockAlert;
--- a/src/pages/Dashboard/components/MonthlyComparison.jsx
+++ b/src/pages/Dashboard/components/MonthlyComparison.jsx
@@ -0,0 +1,81 @@
+import React from "react";
+
+const MonthlyComparison = ({ monthlyComparison }) => {
+  const orderGrowth = monthlyComparison?.growth?.orders || 0;
+  const revenueGrowth = monthlyComparison?.growth?.revenue || 0;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {/* Orders Comparison */}
+      <div className="bg-gradient-to-br from-blue-50 to-white shadow-lg rounded-2xl p-6 border border-blue-100">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-bold text-gray-900">Monthly Orders Comparison</h3>
+          <svg className="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+          </svg>
+        </div>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-500">{monthlyComparison?.currentMonth?.label}</p>
+              <p className="text-3xl font-bold text-blue-600">
+                {monthlyComparison?.currentMonth?.orders || 0}
+              </p>
+            </div>
+            <div className="text-right">
+              <p className="text-sm text-gray-500">{monthlyComparison?.previousMonth?.label}</p>
+              <p className="text-2xl font-semibold text-gray-400">
+                {monthlyComparison?.previousMonth?.orders || 0}
+              </p>
+            </div>
+          </div>
+          <div className="pt-4 border-t border-blue-100">
+            <div className="flex items-center gap-2">
+              <span className={`text-lg font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
+                {orderGrowth >= 0 ? "+" : ""}{orderGrowth.toFixed(1)}%
+              </span>
+              <span className="text-sm text-gray-600">growth</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Revenue Comparison */}
+      <div className="bg-gradient-to-br from-green-50 to-white shadow-lg rounded-2xl p-6 border border-green-100">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-bold text-gray-900">Monthly Revenue Comparison</h3>
+          <svg className="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
+          </svg>
+        </div>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-500">{monthlyComparison?.currentMonth?.label}</p>
+              <p className="text-3xl font-bold text-green-600">
+                ₹{(monthlyComparison?.currentMonth?.revenue || 0).toLocaleString()}
+              </p>
+            </div>
+            <div className="text-right">
+              <p className="text-sm text-gray-500">{monthlyComparison?.previousMonth?.label}</p>
+              <p className="text-2xl font-semibold text-gray-400">
+                ₹{(monthlyComparison?.previousMonth?.revenue || 0).toLocaleString()}
+              </p>
+            </div>
+          </div>
+          <div className="pt-4 border-t border-green-100">
+            <div className="flex items-center gap-2">
+              <span className={`text-lg font-bold ${revenueGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
+                {revenueGrowth >= 0 ? "+" : ""}{revenueGrowth.toFixed(1)}%
+              </span>
+              <span className="text-sm text-gray-600">growth</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MonthlyComparison;
--- a/src/pages/Dashboard/components/OrdersByStatusCard.jsx
+++ b/src/pages/Dashboard/components/OrdersByStatusCard.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+
+const OrdersByStatusCard = ({ ordersByStatus = [] }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300 flex flex-col">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold text-gray-900">Orders by Status</h2>
+          <p className="text-gray-500 text-sm mt-1">Current distribution</p>
+        </div>
+        <button
+          onClick={() => navigate("/orders-by-status")}
+          className="flex items-center gap-1.5 bg-[#704F38] hover:bg-[#5d3f2c] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors duration-200 whitespace-nowrap shadow-sm"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+          View All
+        </button>
+      </div>
+
+      {/* Pie Chart */}
+      <ResponsiveContainer width="100%" height={220}>
+        <PieChart>
+          <Pie
+            data={ordersByStatus}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            label={({ label, percent }) => `${label} ${(percent * 100).toFixed(0)}%`}
+            outerRadius={80}
+            dataKey="count"
+          >
+            {ordersByStatus.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Tooltip />
+        </PieChart>
+      </ResponsiveContainer>
+
+      {/* Legend List */}
+      <div className="mt-4 space-y-2 flex-1">
+        {ordersByStatus.map((status, index) => (
+          <div key={index} className="flex items-center justify-between text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: status.color }} />
+              <span className="text-gray-700">{status.label}</span>
+            </div>
+            <span className="font-semibold text-gray-900">{status.count}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom CTA */}
+      <button
+        onClick={() => navigate("/orders-by-status")}
+        className="mt-4 w-full border-2 border-[#704F38] text-[#704F38] hover:bg-[#704F38] hover:text-white text-sm font-semibold py-2.5 rounded-xl transition-all duration-200"
+      >
+        View Detailed Breakdown →
+      </button>
+    </div>
+  );
+};
+
+export default OrdersByStatusCard;
--- a/src/pages/Dashboard/components/OrdersByStatusPage.jsx
+++ b/src/pages/Dashboard/components/OrdersByStatusPage.jsx
@@ -0,0 +1,224 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+const statusMeta = {
+  DELIVERED: { icon: "✅", bg: "bg-green-50", border: "border-green-200", text: "text-green-700", badge: "bg-green-100 text-green-700" },
+  PENDING:   { icon: "⏳", bg: "bg-yellow-50", border: "border-yellow-200", text: "text-yellow-700", badge: "bg-yellow-100 text-yellow-700" },
+  SHIPPED:   { icon: "🚚", bg: "bg-blue-50", border: "border-blue-200", text: "text-blue-700", badge: "bg-blue-100 text-blue-700" },
+  CANCELLED: { icon: "❌", bg: "bg-red-50", border: "border-red-200", text: "text-red-700", badge: "bg-red-100 text-red-700" },
+  PROCESSING:{ icon: "⚙️", bg: "bg-purple-50", border: "border-purple-200", text: "text-purple-700", badge: "bg-purple-100 text-purple-700" },
+};
+
+const CustomTooltip = ({ active, payload }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white border border-gray-200 rounded-xl p-3 shadow-lg">
+        <p className="font-bold text-gray-900">{payload[0].name}</p>
+        <p className="text-gray-600">Count: <span className="font-bold text-[#704F38]">{payload[0].value}</span></p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const OrdersByStatusPage = () => {
+  const navigate = useNavigate();
+  const { stats } = useSelector((state) => state.dashboard);
+
+  const ordersByStatus = stats?.charts?.ordersByStatus || [];
+  const total = ordersByStatus.reduce((sum, s) => sum + s.count, 0);
+
+  if (!stats) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <p className="text-gray-500 text-xl">No data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
+      <div className="max-w-6xl mx-auto space-y-8">
+
+        {/* Header */}
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => navigate(-1)}
+            className="flex items-center gap-2 text-gray-600 hover:text-[#704F38] transition-colors font-medium"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Back
+          </button>
+          <div className="h-6 w-px bg-gray-300" />
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Orders by Status</h1>
+            <p className="text-gray-500 text-sm">Detailed breakdown of all {total} orders</p>
+          </div>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          {ordersByStatus.map((status) => {
+            const meta = statusMeta[status.label] || {
+              icon: "📦", bg: "bg-gray-50", border: "border-gray-200",
+              text: "text-gray-700", badge: "bg-gray-100 text-gray-700",
+            };
+            const percentage = total > 0 ? ((status.count / total) * 100).toFixed(1) : 0;
+
+            return (
+              <div
+                key={status.label}
+                className={`${meta.bg} ${meta.border} border-2 rounded-2xl p-5 flex flex-col gap-3`}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-2xl">{meta.icon}</span>
+                  <span className={`text-xs font-bold px-2 py-1 rounded-full ${meta.badge}`}>
+                    {percentage}%
+                  </span>
+                </div>
+                <div>
+                  <p className={`text-3xl font-extrabold ${meta.text}`}>{status.count}</p>
+                  <p className="text-sm text-gray-600 font-medium mt-1">{status.label}</p>
+                </div>
+                {/* Mini progress bar */}
+                <div className="w-full bg-white rounded-full h-1.5">
+                  <div
+                    className="h-1.5 rounded-full transition-all duration-700"
+                    style={{ width: `${percentage}%`, backgroundColor: status.color }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Charts Row */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Pie Chart */}
+          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
+            <h2 className="text-lg font-bold text-gray-900 mb-6">Distribution Overview</h2>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={ordersByStatus}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={70}
+                  outerRadius={110}
+                  paddingAngle={4}
+                  dataKey="count"
+                >
+                  {ordersByStatus.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip content={<CustomTooltip />} />
+                <Legend
+                  formatter={(value) => <span className="text-sm text-gray-700">{value}</span>}
+                />
+              </PieChart>
+            </ResponsiveContainer>
+
+            {/* Total in center label */}
+            <div className="text-center mt-2">
+              <p className="text-sm text-gray-500">Total Orders</p>
+              <p className="text-3xl font-extrabold text-[#704F38]">{total}</p>
+            </div>
+          </div>
+
+          {/* Bar Chart */}
+          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
+            <h2 className="text-lg font-bold text-gray-900 mb-6">Status Comparison</h2>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={ordersByStatus} barSize={40}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                <XAxis
+                  dataKey="label"
+                  stroke="#888"
+                  style={{ fontSize: "11px" }}
+                  tick={{ fill: "#6b7280" }}
+                />
+                <YAxis stroke="#888" style={{ fontSize: "12px" }} />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar dataKey="count" name="Orders" radius={[6, 6, 0, 0]}>
+                  {ordersByStatus.map((entry, index) => (
+                    <Cell key={`bar-${index}`} fill={entry.color} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Detailed Table */}
+        <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
+          <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] px-6 py-4">
+            <h2 className="text-lg font-bold text-white">Status Summary Table</h2>
+          </div>
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-50 border-b border-gray-200">
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Order Count</th>
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Percentage</th>
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Progress</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {ordersByStatus.map((status) => {
+                const percentage = total > 0 ? ((status.count / total) * 100).toFixed(1) : 0;
+                const meta = statusMeta[status.label] || { badge: "bg-gray-100 text-gray-700" };
+                return (
+                  <tr key={status.label} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <span className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold ${meta.badge}`}>
+                        <span className="w-2 h-2 rounded-full" style={{ backgroundColor: status.color }} />
+                        {status.label}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 font-bold text-gray-900 text-lg">{status.count}</td>
+                    <td className="px-6 py-4 font-semibold text-gray-700">{percentage}%</td>
+                    <td className="px-6 py-4 w-48">
+                      <div className="w-full bg-gray-100 rounded-full h-2">
+                        <div
+                          className="h-2 rounded-full transition-all duration-700"
+                          style={{ width: `${percentage}%`, backgroundColor: status.color }}
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+            <tfoot>
+              <tr className="bg-gray-50 border-t-2 border-gray-200">
+                <td className="px-6 py-4 font-bold text-gray-900">Total</td>
+                <td className="px-6 py-4 font-extrabold text-[#704F38] text-lg">{total}</td>
+                <td className="px-6 py-4 font-bold text-gray-700">100%</td>
+                <td className="px-6 py-4" />
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrdersByStatusPage;
--- a/src/pages/Dashboard/components/OrdersOverview.jsx
+++ b/src/pages/Dashboard/components/OrdersOverview.jsx
@@ -0,0 +1,97 @@
+
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+const OrdersOverview = ({ orderOverview = [] }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
+      {/* Header with View All button on right */}
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold text-gray-900">Orders Overview</h2>
+          <p className="text-gray-500 text-sm mt-1">
+            Last 30 days order trends
+          </p>
+        </div>
+        <button
+          onClick={() => navigate("/orders-by-status")}
+          className="flex items-center gap-1.5 bg-[#704F38] hover:bg-[#5d3f2c] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors duration-200 whitespace-nowrap shadow-sm"
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+          View All
+        </button>
+      </div>
+
+      <ResponsiveContainer width="100%" height={300}>
+        <AreaChart data={orderOverview}>
+          <defs>
+            <linearGradient id="colorTotal" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#4880FF" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#4880FF" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="colorCompleted" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#10B981" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#10B981" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+          <XAxis dataKey="label" stroke="#888" style={{ fontSize: "12px" }} />
+          <YAxis stroke="#888" style={{ fontSize: "12px" }} />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: "white",
+              borderRadius: "12px",
+              border: "1px solid #e5e7eb",
+              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+            }}
+          />
+          <Legend />
+          <Area
+            type="monotone"
+            dataKey="total"
+            stroke="#4880FF"
+            strokeWidth={2}
+            fillOpacity={1}
+            fill="url(#colorTotal)"
+            name="Total Orders"
+          />
+          <Area
+            type="monotone"
+            dataKey="completed"
+            stroke="#10B981"
+            strokeWidth={2}
+            fillOpacity={1}
+            fill="url(#colorCompleted)"
+            name="Completed"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default OrdersOverview;
--- a/src/pages/Dashboard/components/RecentOrders.jsx
+++ b/src/pages/Dashboard/components/RecentOrders.jsx
@@ -0,0 +1,205 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const statusStyles = {
+  DELIVERED: "bg-green-100 text-green-700 ring-1 ring-green-200",
+  PENDING: "bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200",
+  SHIPPED: "bg-blue-100 text-blue-700 ring-1 ring-blue-200",
+  CANCELLED: "bg-red-100 text-red-700 ring-1 ring-red-200",
+};
+
+const statusDotStyles = {
+  DELIVERED: "bg-green-500",
+  PENDING: "bg-yellow-500",
+  SHIPPED: "bg-blue-500",
+  CANCELLED: "bg-red-500",
+};
+
+const RecentOrders = ({ recentOrders, topProducts }) => {
+  const navigate = useNavigate();
+
+  const getProductImage = (order) => {
+    const productImage = order.items?.[0]?.productImage;
+    if (productImage && productImage !== "https://via.placeholder.com/300")
+      return productImage;
+    const productId = order.items?.[0]?.productId;
+    if (productId) {
+      const product = topProducts?.find((p) => p._id === productId);
+      if (product?.displayImage) return product.displayImage;
+    }
+    return "/bitmap.png";
+  };
+
+  const getProductName = (order) => {
+    const productDetails = order.items?.[0]?.productDetails;
+    if (productDetails?.name) return productDetails.name;
+    const product = topProducts?.find(
+      (p) => p._id === order.items[0]?.productId,
+    );
+    return product?.name || order.items[0]?.productName || "Product";
+  };
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300">
+      <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-2xl font-bold text-white">Recent Orders</h3>
+            <p className="text-gray-200 text-sm mt-1">
+              Latest {recentOrders?.length || 0} transactions
+            </p>
+          </div>
+          <button
+            onClick={() => navigate("/orders")}
+            className="bg-white text-[#704F38] px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+          >
+            View All
+          </button>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              {[
+                "Order Details",
+                "Customer",
+                "Amount",
+                "Status",
+                "Payment",
+                "Date",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {recentOrders?.map((order) => (
+              <tr
+                key={order.id}
+                className="hover:bg-gray-50 transition-colors duration-200 cursor-pointer"
+                onClick={() => navigate(`/orders/${order.id}`)}
+              >
+                <td className="px-6 py-4">
+                  <div className="flex items-center gap-4">
+                    <div className="relative">
+                      <img
+                        src={getProductImage(order)}
+                        alt={getProductName(order)}
+                        className="w-16 h-16 object-cover rounded-xl shadow-md ring-2 ring-gray-100"
+                        onError={(e) => {
+                          e.target.src = "/bitmap.png";
+                        }}
+                      />
+                      {order.items.length > 1 && (
+                        <div className="absolute -top-2 -right-2 bg-[#704F38] text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
+                          {order.items.length}
+                        </div>
+                      )}
+                    </div>
+                    <div>
+                      <p className="font-bold text-gray-900 text-sm">
+                        {order.orderNumber}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {getProductName(order)}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+
+                <td className="px-6 py-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center text-white font-bold text-sm">
+                      {order.user.firstName?.[0]}
+                      {order.user.lastName?.[0]}
+                    </div>
+                    <div>
+                      <p className="font-semibold text-gray-900 text-sm">
+                        {order.user.firstName} {order.user.lastName}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        {order.user.email}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+
+                <td className="px-6 py-4">
+                  <p className="font-bold text-lg text-[#704F38]">
+                    ₹{parseFloat(order.totalAmount).toLocaleString()}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-1 uppercase">
+                    {order.paymentMethod}
+                  </p>
+                </td>
+
+                <td className="px-6 py-4">
+                  <span
+                    className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm ${statusStyles[order.status] || "bg-purple-100 text-purple-700 ring-1 ring-purple-200"}`}
+                  >
+                    <span
+                      className={`w-2 h-2 rounded-full ${statusDotStyles[order.status] || "bg-purple-500"}`}
+                    ></span>
+                    {order.status}
+                  </span>
+                </td>
+
+                <td className="px-6 py-4">
+                  <span
+                    className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm ${order.paymentStatus === "PAID" ? "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200" : "bg-orange-100 text-orange-700 ring-1 ring-orange-200"}`}
+                  >
+                    {order.paymentStatus === "PAID" ? "✓" : "⏱"}{" "}
+                    {order.paymentStatus}
+                  </span>
+                </td>
+
+                <td className="px-6 py-4">
+                  <p className="text-sm text-gray-900">
+                    {new Date(order.createdAt).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {new Date(order.createdAt).toLocaleTimeString("en-US", {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {(!recentOrders || recentOrders.length === 0) && (
+        <div className="text-center py-12">
+          <svg
+            className="w-16 h-16 text-gray-300 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+            />
+          </svg>
+          <p className="text-gray-500 text-lg">No recent orders found</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RecentOrders;
--- a/src/pages/Dashboard/components/StatsCards.jsx
+++ b/src/pages/Dashboard/components/StatsCards.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const StatsCards = ({ stats, couponStats }) => {
+  const navigate = useNavigate();
+  const orderGrowth = stats?.charts?.monthlyComparison?.growth?.orders || 0;
+
+  const cards = [
+    {
+      label: "Total Users",
+      value: stats?.totalUsers,
+      gradient: "from-white to-[#FAF7F5]",
+      iconBg: "from-[#F5ECE6] to-[#E8D5C4]",
+      iconColor: "text-[#704F38]",
+      footer: <span className="text-xs text-gray-600">Active users</span>,
+      icon: (
+        <svg className="w-8 h-8 text-[#704F38]" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+        </svg>
+      ),
+    },
+    {
+      label: "Total Orders",
+      value: stats?.totalOrders,
+      gradient: "from-white to-[#E7F3FF]",
+      iconBg: "from-[#E7F3FF] to-[#C2DFFF]",
+      iconColor: "text-blue-600",
+      footer: (
+        <div className="flex items-center gap-2">
+          <svg
+            className={`w-4 h-4 ${orderGrowth >= 0 ? "text-green-500" : "text-red-500"}`}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d={
+                orderGrowth >= 0
+                  ? "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
+                  : "M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586l-4.293-4.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
+              }
+              clipRule="evenodd"
+            />
+          </svg>
+          <span className={`text-sm font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
+            {orderGrowth.toFixed(1)}%
+          </span>
+          <p className="text-sm text-gray-600">vs last month</p>
+        </div>
+      ),
+      icon: (
+        <svg className="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+        </svg>
+      ),
+    },
+    {
+      label: "Total Products",
+      value: stats?.inventory?.totalProducts || stats?.totalProducts,
+      gradient: "from-white to-[#FFF3E6]",
+      iconBg: "from-[#FFF3E6] to-[#FFE4B8]",
+      iconColor: "text-orange-600",
+      footer: (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-green-600">In Stock: {stats?.inventory?.inStock || 0}</span>
+          {stats?.inventory?.outOfStock > 0 && (
+            <span className="text-xs text-red-600">• Out: {stats.inventory.outOfStock}</span>
+          )}
+        </div>
+      ),
+      icon: (
+        <svg className="w-8 h-8 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clipRule="evenodd" />
+        </svg>
+      ),
+    },
+    {
+      label: "Total Coupons",
+      value: couponStats?.totalCoupons ?? 0,
+      gradient: "from-white to-[#EAF1FF]",
+      iconBg: "from-[#EAF1FF] to-[#C7D7FE]",
+      iconColor: "text-blue-600",
+      footer: (
+        <div className="flex items-center justify-between w-full">
+          <p className="text-sm font-bold text-green-600">Active: {couponStats?.activeCoupons ?? 0}</p>
+          <button
+            onClick={(e) => { e.stopPropagation(); navigate("/coupon-stats"); }}
+            className="text-blue-600 hover:text-blue-800 transition font-semibold"
+          >
+            View →
+          </button>
+        </div>
+      ),
+      icon: (
+        <svg className="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M21 10V7a1 1 0 00-1-1h-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v2H4a1 1 0 00-1 1v3a2 2 0 010 4v3a1 1 0 001 1h3v2a1 1 0 001 1h8a1 1 0 001-1v-2h3a1 1 0 001-1v-3a2 2 0 010-4zM9 4h6v2H9V4zm6 16H9v-2h6v2z" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      {cards.map((card, i) => (
+        <div
+          key={i}
+          className={`group bg-gradient-to-br ${card.gradient} shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer`}
+        >
+          <div className="flex justify-between items-start mb-4">
+            <div>
+              <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">{card.label}</p>
+              <p className="text-4xl font-extrabold text-[#704F38] mt-2">{card.value}</p>
+            </div>
+            <div className={`bg-gradient-to-br ${card.iconBg} w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300`}>
+              {card.icon}
+            </div>
+          </div>
+          <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200 w-full">
+            {card.footer}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default StatsCards;
--- a/src/pages/Dashboard/components/TopProducts.jsx
+++ b/src/pages/Dashboard/components/TopProducts.jsx
@@ -0,0 +1,85 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const TopProducts = ({ topProducts }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl border border-gray-100 p-8 hover:shadow-2xl transition-shadow duration-300">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h3 className="text-2xl font-bold text-gray-900">Top Selling Products</h3>
+          <p className="text-gray-500 text-sm mt-1">Best performers by revenue and orders</p>
+        </div>
+        <button
+          onClick={() => navigate("/products")}
+          className="text-[#704F38] hover:bg-[#FAF7F5] px-4 py-2 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2"
+        >
+          View All
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
+        {topProducts?.map((product, index) => (
+          <div
+            key={product._id}
+            className="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer"
+            onClick={() => navigate(`/products/${product._id}`)}
+          >
+            {/* Rank Badge */}
+            <div className="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center shadow-lg z-10">
+              <span className="text-white font-bold text-sm">#{index + 1}</span>
+            </div>
+
+            {/* Out of Stock Badge */}
+            {product.stockStatus === "OUT_OF_STOCK" && (
+              <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg z-10">
+                Out of Stock
+              </div>
+            )}
+
+            {/* Product Image */}
+            <div className="relative mb-4 overflow-hidden rounded-xl">
+              <img
+                src={product.displayImage || "/bitmap.png"}
+                alt={product.name}
+                className="w-full h-40 object-cover transform group-hover:scale-110 transition-transform duration-300"
+                onError={(e) => { e.target.src = "/bitmap.png"; }}
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            </div>
+
+            {/* Product Details */}
+            <div className="space-y-2">
+              <h4 className="font-bold text-gray-900 text-sm line-clamp-1">{product.name}</h4>
+              <div className="flex items-center justify-between pt-3 border-t border-gray-200">
+                <div className="bg-gradient-to-r from-[#FFE6B3] to-[#FFD280] px-3 py-1 rounded-full">
+                  <span className="text-[#704F38] font-extrabold text-sm">
+                    ₹{product.basePrice.toLocaleString()}
+                  </span>
+                </div>
+              </div>
+              <div className="space-y-1 pt-2 border-t border-gray-200">
+                {[
+                  { label: "Sold:", value: `${product.totalSold} units` },
+                  { label: "Orders:", value: product.totalOrders },
+                  { label: "Revenue:", value: `₹${product.revenue.toLocaleString()}`, green: true },
+                ].map(({ label, value, green }) => (
+                  <div key={label} className="flex items-center justify-between text-xs">
+                    <span className="text-gray-500">{label}</span>
+                    <span className={`font-bold ${green ? "text-green-600" : "text-gray-900"}`}>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TopProducts;
--- 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/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>