first commit

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;

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;

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
+    ),
+});

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>

src/components/Pagination.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Pagination = () => {
+  return (
+    <div>Pagination</div>
+  )
+}
+
+export default Pagination

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;

src/components/common/Loader.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Loader = () => {
+  return (
+    <div>Loader</div>
+  )
+}
+
+export default Loader

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;

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;

src/components/layout/Footer.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

src/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+body {
+  font-family: 'Nunito Sans', sans-serif;
+}

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;

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>
+);

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

src/pages/Products/ProductDetails.jsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import axios from "../../app/api";
+import { ArrowLeft } from "lucide-react";
+
+const ProductDetails = () => {
+  const { slug } = useParams();
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+     .get(`/products/${slug}`)
+      .then((res) => {
+        setProduct(res.data.data.product);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, [slug]);
+
+  if (loading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading product details...
+      </div>
+    );
+
+  if (!product)
+    return (
+      <div className="text-center mt-10 text-gray-600">Product not found!</div>
+    );
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      {/* Back Button */}
+      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <Link to="/products" className="font-medium">
+          Back to Products
+        </Link>
+      </div>
+
+      {/* Product Header */}
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between bg-white shadow-md rounded-2xl p-6 border border-gray-100">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{product.name}</h2>
+          <p className="text-gray-500 text-sm mt-1">{product.slug}</p>
+        </div>
+        <div className="mt-4 md:mt-0">
+          <p className="text-3xl font-semibold text-green-600">
+            ₹{product.basePrice?.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {/* Product Info */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Product Details
+          </h3>
+          <InfoRow label="Description" value={product.description || "N/A"} />
+          <InfoRow label="Category ID" value={product.category || "N/A"} />
+          <InfoRow label="Status" value={product.status || "N/A"} />
+          <InfoRow label="Featured" value={product.isFeatured ? "Yes" : "No"} />
+          <InfoRow label="Digital" value={product.isDigital ? "Yes" : "No"} />
+        </div>
+
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Analytics
+          </h3>
+          <InfoRow label="View Count" value={product.viewCount || 0} />
+          <InfoRow label="Purchase Count" value={product.purchaseCount || 0} />
+          <InfoRow
+            label="Created At"
+            value={new Date(product.createdAt).toLocaleString()}
+          />
+          <InfoRow
+            label="Updated At"
+            value={new Date(product.updatedAt).toLocaleString()}
+          />
+        </div>
+      </div>
+
+      {/* Images Section */}
+      {product.images?.gallery?.length > 0 && (
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-3">
+            Product Images
+          </h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4">
+            {product.images.gallery.map((img, idx) => (
+              <div
+                key={idx}
+                className="overflow-hidden rounded-lg border hover:shadow-md transition-all"
+              >
+                <img
+                  src={img}
+                  alt={`product-${idx}`}
+                  className="w-full h-40 object-cover"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Small helper component for clean info rows
+const InfoRow = ({ label, value }) => (
+  <div className="flex justify-between text-sm text-gray-700">
+    <span className="font-medium text-gray-600">{label}:</span>
+    <span className="text-gray-800">{value}</span>
+  </div>
+);
+
+export default ProductDetails;

src/pages/Products/ProductList.jsx

@@ -0,0 +1,645 @@
+// // import React from "react";
+// // import { useGetProductsQuery } from "../../features/products/productApi";
+// // import { Link } from "react-router-dom";
+// // import { FiEye, FiEdit, FiTrash } from "react-icons/fi";
+
+// // const ProductList = () => {
+// //   const { data, isLoading, isError } = useGetProductsQuery({
+// //     page: 1,
+// //     limit: 10,
+// //   });
+
+// //   const handleDelete = (id) => {
+// //   if (confirm("Are you sure you want to delete this product?")) {
+// //     console.log("Delete Product:", id);
+// //     // Later you will add RTK mutation here
+// //   }
+// // };
+
+// //   const products = data?.data?.products || [];
+
+// //   if (isLoading)
+// //     return (
+// //       <div className="text-center mt-10 text-gray-500">Loading products...</div>
+// //     );
+
+// //   if (isError)
+// //     return (
+// //       <div className="text-center mt-10 text-red-600">
+// //         Failed to load products.
+// //       </div>
+// //     );
+
+// //   return (
+// //     <div className="space-y-6">
+// //       {/* <h2 className="text-xl font-semibold text-gray-600">Products</h2> */}
+// //       <div className="flex items-center justify-between mb-6">
+// //         {/* LEFT SIDE TITLE */}
+// //         <h2 className="text-xl font-semibold text-gray-700">Products</h2>
+
+// //         {/* RIGHT SIDE SEARCH BAR */}
+// //         <div className="flex items-center gap-3">
+// //           <input
+// //             type="text"
+// //             placeholder="Search products..."
+// //             className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
+// //           />
+
+// //           <Link
+// //             to="/products/add"
+// //             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+// //           >
+// //             + Add Product
+// //           </Link>
+// //         </div>
+// //       </div>
+
+// //       {products.length === 0 ? (
+// //         <div className="text-center text-gray-500 py-10">
+// //           No products found.
+// //         </div>
+// //       ) : (
+// //         <div className="overflow-x-auto">
+// //           <table className="min-w-full bg-white rounded-xl shadow-md divide-y divide-gray-200">
+// //             <thead className="bg-gray-50">
+// //               <tr>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Sr. No
+// //                 </th>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Name
+// //                 </th>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Price
+// //                 </th>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Status
+// //                 </th>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Views
+// //                 </th>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Created At
+// //                 </th>
+// //                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+// //                   Actions
+// //                 </th>
+// //               </tr>
+// //             </thead>
+// //             <tbody className="divide-y divide-gray-200">
+// //               {products.map((product, index) => (
+// //                 <tr
+// //                   key={product._id}
+// //                   className="hover:bg-gray-50 transition-colors duration-150"
+// //                 >
+// //                   <td className="px-4 py-2 text-sm text-gray-700">
+// //                     {index + 1}
+// //                   </td>
+// //                   <td className="px-4 py-2 text-sm text-gray-800 font-medium">
+// //                     {product.name}
+// //                   </td>
+// //                   <td className="px-4 py-2 text-sm text-gray-700">
+// //                     ₹{product.basePrice}
+// //                   </td>
+// //                   <td className="px-4 py-2">
+// //                     <span
+// //                       className={`px-2 py-1 text-xs font-semibold rounded-full ${
+// //                         product.status === "active"
+// //                           ? "bg-green-100 text-green-800"
+// //                           : "bg-red-100 text-red-800"
+// //                       }`}
+// //                     >
+// //                       {product.status}
+// //                     </span>
+// //                   </td>
+// //                   <td className="px-4 py-2 text-sm text-gray-700">
+// //                     {product.viewCount}
+// //                   </td>
+// //                   <td className="px-4 py-2 text-sm text-gray-500">
+// //                     {new Date(product.createdAt).toLocaleDateString()}
+// //                   </td>
+// //                   {/* <td className="px-6 py-3">
+// //                     <Link
+// //                       to={`/products/${product.slug}`}
+// //                       className="inline-block px-4 py-1 text-sm font-medium bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+// //                     >
+// //                       View Details
+// //                     </Link>
+// //                   </td> */}
+// //                   <td className="px-6 py-3">
+// //   <div className="flex items-center gap-3">
+
+// //     {/* View */}
+// //     <Link
+// //       to={`/products/${product.slug}`}
+// //       className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition"
+// //       title="View Product"
+// //     >
+// //       <FiEye size={18} />
+// //     </Link>
+
+// //     {/* Edit */}
+// //     <Link
+// //       to={`/products/edit/${product._id}`}
+// //       className="p-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition"
+// //       title="Edit Product"
+// //     >
+// //       <FiEdit size={18} />
+// //     </Link>
+
+// //     {/* Delete */}
+// //     <button
+// //       onClick={() => handleDelete(product._id)}
+// //       className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition"
+// //       title="Delete Product"
+// //     >
+// //       <FiTrash size={18} />
+// //     </button>
+
+// //   </div>
+// // </td>
+
+// //                 </tr>
+// //               ))}
+// //             </tbody>
+// //           </table>
+// //         </div>
+// //       )}
+// //     </div>
+// //   );
+// // };
+
+// // export default ProductList;
+
+// import React, { useState } from "react";
+// import { useGetProductsQuery } from "../../features/products/productAPI";
+// import { Link } from "react-router-dom";
+// import { FiEye, FiEdit, FiTrash } from "react-icons/fi";
+// import Table from "../../components/common/Table";
+// import Pagination from "../../components/common/Pagination";
+
+// const ProductList = () => {
+//   const [currentPage, setCurrentPage] = useState(1);
+//   const perPage = 10;
+
+//   const { data, isLoading, isError } = useGetProductsQuery({
+//     page: currentPage,
+//     limit: perPage,
+//   });
+
+//   const handleDelete = (id) => {
+//     if (confirm("Are you sure you want to delete this product?")) {
+//       console.log("Delete Product:", id);
+//       // Later you will add RTK mutation here
+//     }
+//   };
+
+//   const products = data?.data?.products || [];
+//   const totalPages = Math.ceil(data?.data?.total / perPage || 0);
+
+//   // Table columns
+//   const columns = [
+//     {
+//       key: "sr",
+//       label: "Sr. No",
+//       render: (_, row, index) => index + 1,
+//     },
+//     {
+//       key: "name",
+//       label: "Name",
+//     },
+//      {
+//       key: "stock",
+//       label: "Stock",
+//     },
+//     {
+//       key: "price",
+//       label: "Price",
+//       render: (_, row) => `₹${row.basePrice}`,
+//     },
+//     {
+//       key: "status",
+//       label: "Status",
+//       render: (_, row) => (
+//         <span
+//           className={`px-2 py-1 text-xs font-semibold rounded-full ${
+//             row.status === "active"
+//               ? "bg-green-100 text-green-800"
+//               : "bg-red-100 text-red-800"
+//           }`}
+//         >
+//           {row.status}
+//         </span>
+//       ),
+//     },
+//     {
+//       key: "views",
+//       label: "Views",
+//       render: (_, row) => row.viewCount,
+//     },
+//     {
+//       key: "createdAt",
+//       label: "Created At",
+//       render: (_, row) => new Date(row.createdAt).toLocaleDateString(),
+//     },
+//   ];
+
+//   // Action buttons
+//   const rowActions = (row) => (
+//     <div className="flex items-center justify-center gap-2">
+//       <Link
+//         to={`/products/${row.slug}`}
+//         className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition"
+//         title="View"
+//       >
+//         <FiEye size={18} />
+//       </Link>
+
+//       <Link
+//         to={`/products/edit/${row._id}`}
+//         className="p-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition"
+//         title="Edit"
+//       >
+//         <FiEdit size={18} />
+//       </Link>
+
+//       <button
+//         onClick={() => handleDelete(row._id)}
+//         className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition"
+//         title="Delete"
+//       >
+//         <FiTrash size={18} />
+//       </button>
+//     </div>
+//   );
+
+//   if (isLoading)
+//     return (
+//       <div className="text-center mt-10 text-gray-500">Loading products...</div>
+//     );
+
+//   if (isError)
+//     return (
+//       <div className="text-center mt-10 text-red-600">
+//         Failed to load products.
+//       </div>
+//     );
+
+//   return (
+//     <div className="space-y-6">
+//       {/* Header */}
+//       <div className="flex items-center justify-between">
+//         <h2 className="text-xl font-semibold text-gray-700">Products</h2>
+//         <div className="flex items-center gap-3">
+//           <input
+//             type="text"
+//             placeholder="Search products..."
+//             className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
+//           />
+//           <Link
+//             to="/products/add"
+//             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+//           >
+//             + Add Product
+//           </Link>
+//         </div>
+//       </div>
+
+//       {/* Table */}
+//       <Table columns={columns} data={products} actions={rowActions} />
+
+//       {/* Pagination */}
+//       <Pagination
+//         currentPage={currentPage}
+//         totalPages={totalPages}
+//         onPageChange={(pg) => setCurrentPage(pg)}
+//       />
+//     </div>
+//   );
+// };
+
+// export default ProductList;
+
+
+
+
+import React, { useState, useRef, useEffect } from "react";
+import { useGetProductsQuery } from "../../features/products/productAPI";
+import { Link } from "react-router-dom";
+import { FiEye, FiEdit, FiTrash, FiChevronDown, FiPackage } from "react-icons/fi";
+import Table from "../../components/common/Table";
+import Pagination from "../../components/common/Pagination";
+
+// ─── Stock Status Config ────────────────────────────────────────────────────
+const STOCK_CONFIG = {
+  IN_STOCK:    { label: "In Stock",    bg: "bg-green-100",  text: "text-green-700",  dot: "bg-green-500"  },
+  LOW:         { label: "Low",         bg: "bg-yellow-100", text: "text-yellow-700", dot: "bg-yellow-500" },
+  CRITICAL:    { label: "Critical",    bg: "bg-orange-100", text: "text-orange-700", dot: "bg-orange-500" },
+  OUT_OF_STOCK:{ label: "Out of Stock",bg: "bg-red-100",    text: "text-red-700",    dot: "bg-red-500"    },
+};
+
+// ─── Stock Badge ─────────────────────────────────────────────────────────────
+const StockBadge = ({ status, stock, showCount = true }) => {
+  const cfg = STOCK_CONFIG[status] || STOCK_CONFIG.OUT_OF_STOCK;
+  return (
+    <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${cfg.bg} ${cfg.text}`}>
+      <span className={`w-1.5 h-1.5 rounded-full ${cfg.dot}`} />
+      {showCount ? `${stock} · ${cfg.label}` : cfg.label}
+    </span>
+  );
+};
+
+// ─── Stock Cell (handles both simple + variant products) ─────────────────────
+const StockCell = ({ product }) => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handler = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const hasVariants = product.hasVariants && product.variantStock?.length > 0;
+
+  // ── Non-variant: simple badge ────────────────────────────────────────────
+  if (!hasVariants) {
+    return (
+      <StockBadge status={product.stockStatus} stock={product.totalStock} />
+    );
+  }
+
+  // ── Variant product: expandable breakdown ────────────────────────────────
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center gap-1 group focus:outline-none"
+      >
+        <StockBadge status={product.stockStatus} stock={product.totalStock} />
+        <span className={`ml-0.5 text-gray-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`}>
+          <FiChevronDown size={13} />
+        </span>
+      </button>
+
+      {open && (
+        <div className="absolute z-30 top-8 left-0 bg-white border border-gray-200 rounded-xl shadow-xl p-3 min-w-[240px]">
+          {/* Header */}
+          <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+            <FiPackage size={13} className="text-gray-400" />
+            <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+              Variant Inventory
+            </span>
+          </div>
+
+          {/* Variant rows */}
+          <div className="space-y-2">
+            {product.variantStock.map((v) => (
+              <div key={v.variantId} className="flex items-center justify-between gap-3">
+                {/* Left: size + color */}
+                <div className="flex items-center gap-1.5 min-w-0">
+                  <span className="text-xs font-medium text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded">
+                    {v.size}
+                  </span>
+                  <span className="text-xs text-gray-500 truncate">{v.color}</span>
+                </div>
+                {/* Right: stock badge */}
+                <StockBadge status={v.stockStatus} stock={v.stock} />
+              </div>
+            ))}
+          </div>
+
+          {/* Total footer */}
+          <div className="mt-2.5 pt-2 border-t border-gray-100 flex items-center justify-between">
+            <span className="text-xs font-semibold text-gray-600">Total Stock</span>
+            <span className="text-xs font-bold text-gray-800">{product.totalStock} units</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── Main ProductList Page ────────────────────────────────────────────────────
+const ProductList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 10;
+
+  const { data, isLoading, isError } = useGetProductsQuery({
+    page: currentPage,
+    limit: perPage,
+  });
+
+  const handleDelete = (id) => {
+    if (confirm("Are you sure you want to delete this product?")) {
+      console.log("Delete Product:", id);
+    }
+  };
+
+  const products = data?.data?.products || [];
+  const totalPages = Math.ceil((data?.data?.pagination?.total || 0) / perPage);
+
+  // ── Table columns ──────────────────────────────────────────────────────────
+  const columns = [
+    {
+      key: "sr",
+      label: "Sr.",
+      render: (_, row, index) => (
+        <span className="text-gray-400 text-sm">
+          {(currentPage - 1) * perPage + index + 1}
+        </span>
+      ),
+    },
+    {
+      key: "name",
+      label: "Product",
+      render: (_, row) => {
+        const image =
+          row.images?.gallery?.[0] ||
+          row.images?.primary ||
+          row.variantStock?.[0]?.images?.[0] ||
+          null;
+        return (
+          <div className="flex items-center gap-3">
+            {image ? (
+              <img
+                src={image}
+                alt={row.name}
+                className="w-9 h-9 rounded-lg object-cover border border-gray-100 flex-shrink-0"
+                onError={(e) => { e.target.style.display = "none"; }}
+              />
+            ) : (
+              <div className="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <FiPackage size={16} className="text-gray-400" />
+              </div>
+            )}
+            <div className="min-w-0">
+              <p className="text-sm font-medium text-gray-800 truncate max-w-[160px]">{row.name}</p>
+              {row.hasVariants && (
+                <p className="text-xs text-gray-400">{row.variantStock?.length || 0} variants</p>
+              )}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      key: "inventory",
+      label: "Inventory",
+      render: (_, row) => <StockCell product={row} />,
+    },
+    {
+      key: "price",
+      label: "Price",
+      render: (_, row) => (
+        <span className="text-sm font-medium text-gray-700">₹{row.basePrice}</span>
+      ),
+    },
+    {
+      key: "status",
+      label: "Status",
+      render: (_, row) => (
+        <span
+          className={`px-2 py-1 text-xs font-semibold rounded-full ${
+            row.status === "active"
+              ? "bg-green-100 text-green-800"
+              : row.status === "draft"
+              ? "bg-gray-100 text-gray-600"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {row.status}
+        </span>
+      ),
+    },
+    {
+      key: "views",
+      label: "Views",
+      render: (_, row) => (
+        <span className="text-sm text-gray-500">{row.viewCount}</span>
+      ),
+    },
+    {
+      key: "createdAt",
+      label: "Created",
+      render: (_, row) => (
+        <span className="text-sm text-gray-500">
+          {new Date(row.createdAt).toLocaleDateString("en-IN", {
+            day: "2-digit", month: "short", year: "numeric",
+          })}
+        </span>
+      ),
+    },
+  ];
+
+  // ── Row actions ────────────────────────────────────────────────────────────
+  const rowActions = (row) => (
+    <div className="flex items-center justify-center gap-2">
+      <Link
+        to={`/products/${row.slug}`}
+        className="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition"
+        title="View"
+      >
+        <FiEye size={15} />
+      </Link>
+      <Link
+        to={`/products/edit/${row._id}`}
+        className="p-1.5 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition"
+        title="Edit"
+      >
+        <FiEdit size={15} />
+      </Link>
+      <button
+        onClick={() => handleDelete(row._id)}
+        className="p-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"
+        title="Delete"
+      >
+        <FiTrash size={15} />
+      </button>
+    </div>
+  );
+
+  if (isLoading)
+    return <div className="text-center mt-10 text-gray-500">Loading products...</div>;
+
+  if (isError)
+    return <div className="text-center mt-10 text-red-600">Failed to load products.</div>;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-gray-700">Products</h2>
+        <div className="flex items-center gap-3">
+          <input
+            type="text"
+            placeholder="Search products..."
+            className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60 text-sm"
+          />
+          <Link
+            to="/products/add"
+            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition text-sm"
+          >
+            + Add Product
+          </Link>
+        </div>
+      </div>
+
+      {/* Inventory Summary Bar */}
+      <InventorySummary products={products} />
+
+      {/* Table */}
+      <Table columns={columns} data={products} actions={rowActions} />
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(pg) => setCurrentPage(pg)}
+      />
+    </div>
+  );
+};
+
+// ─── Inventory Summary Bar ────────────────────────────────────────────────────
+const InventorySummary = ({ products }) => {
+  const stats = products.reduce(
+    (acc, p) => {
+      const s = p.stockStatus;
+      if (s === "IN_STOCK") acc.inStock++;
+      else if (s === "LOW") acc.low++;
+      else if (s === "CRITICAL") acc.critical++;
+      else if (s === "OUT_OF_STOCK") acc.outOfStock++;
+      return acc;
+    },
+    { inStock: 0, low: 0, critical: 0, outOfStock: 0 }
+  );
+
+  const items = [
+    { label: "In Stock",     value: stats.inStock,    color: "text-green-600",  bg: "bg-green-50",  border: "border-green-200" },
+    { label: "Low Stock",    value: stats.low,         color: "text-yellow-600", bg: "bg-yellow-50", border: "border-yellow-200" },
+    { label: "Critical",     value: stats.critical,    color: "text-orange-600", bg: "bg-orange-50", border: "border-orange-200" },
+    { label: "Out of Stock", value: stats.outOfStock,  color: "text-red-600",    bg: "bg-red-50",    border: "border-red-200" },
+  ];
+
+  return (
+    <div className="grid grid-cols-4 gap-3">
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className={`flex items-center justify-between px-4 py-3 rounded-xl border ${item.bg} ${item.border}`}
+        >
+          <span className="text-xs font-medium text-gray-600">{item.label}</span>
+          <span className={`text-lg font-bold ${item.color}`}>{item.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ProductList;

src/pages/Reports/CustomersReport.jsx

@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import { useGetCustomersReportQuery } from "../../features/report/customersAPI";
+import {
+  BarChart,
+  Bar,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from "recharts";
+import { FiUsers, FiChevronDown } from "react-icons/fi";
+
+const CustomersReport = () => {
+  const { data, isLoading, isError } = useGetCustomersReportQuery();
+  const [activePeriod, setActivePeriod] = useState("weekly");
+
+  if (isLoading) {
+    return (
+      <div className="p-6 text-center animate-pulse">
+        Loading report...
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <p className="p-6 text-center text-red-500">
+        Error loading data
+      </p>
+    );
+  }
+
+  /* SAFE DATA EXTRACTION */
+
+  const report = data?.data || {};
+
+  const newCustomers = report?.newCustomers || 0;
+  const repeatCustomers = report?.repeatCustomers || 0;
+
+  const graph = report?.graph || {};
+
+  const periods = Object.keys(graph);
+
+  const selectedPeriod =
+    Array.isArray(graph[activePeriod])
+      ? graph[activePeriod]
+      : Array.isArray(graph[periods[0]])
+      ? graph[periods[0]]
+      : [];
+
+  const totalCustomers = newCustomers + repeatCustomers;
+
+  return (
+    <div
+      className="bg-white rounded-3xl shadow-xl border border-gray-100 p-6"
+      style={{ backdropFilter: "blur(12px)" }}
+    >
+      {/* HEADER */}
+
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-start gap-4">
+
+          <div
+            className="
+              w-14 h-14 rounded-2xl
+              bg-gradient-to-br from-indigo-500 to-indigo-600
+              flex items-center justify-center
+              shadow-lg text-white text-2xl
+            "
+          >
+            <FiUsers />
+          </div>
+
+          <div>
+            <p className="text-sm text-gray-500">
+              Total Customers
+            </p>
+
+            <h2 className="text-4xl font-extrabold">
+              {totalCustomers}
+            </h2>
+
+            <div className="flex gap-6 mt-2 text-sm text-gray-600">
+
+              <span>
+                <span className="font-semibold text-indigo-600">
+                  {newCustomers}
+                </span>{" "}
+                New
+              </span>
+
+              <span>
+                <span className="font-semibold text-green-600">
+                  {repeatCustomers}
+                </span>{" "}
+                Repeat
+              </span>
+
+            </div>
+          </div>
+        </div>
+
+        {/* PERIOD SELECT */}
+
+        {periods.length > 0 && (
+          <div className="relative">
+
+            <select
+              value={activePeriod}
+              onChange={(e) =>
+                setActivePeriod(e.target.value)
+              }
+              className="
+                appearance-none px-4 py-2 pr-10
+                rounded-full border border-gray-200
+                shadow-sm focus:outline-none
+                focus:ring-2 focus:ring-indigo-500
+                text-gray-700 cursor-pointer
+              "
+            >
+              {periods.map((period) => (
+                <option key={period} value={period}>
+                  {period.charAt(0).toUpperCase() +
+                    period.slice(1)}
+                </option>
+              ))}
+            </select>
+
+            <FiChevronDown
+              className="
+                absolute right-3 top-1/2
+                -translate-y-1/2 text-gray-400
+                pointer-events-none
+              "
+            />
+
+          </div>
+        )}
+      </div>
+
+      {/* CHART */}
+
+      <div className="w-full h-[240px] min-h-[240px]">
+
+        <ResponsiveContainer width="100%" height="100%">
+
+          <BarChart data={selectedPeriod}>
+
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 12 }}
+            />
+
+            <Tooltip
+              cursor={{ opacity: 0.2 }}
+              contentStyle={{
+                borderRadius: "10px",
+                border: "none",
+                boxShadow:
+                  "0 4px 16px rgba(0,0,0,0.1)",
+              }}
+            />
+
+            <defs>
+              <linearGradient
+                id="softGreen"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop
+                  offset="0%"
+                  stopColor="#34d399"
+                  stopOpacity="0.95"
+                />
+                <stop
+                  offset="100%"
+                  stopColor="#34d399"
+                  stopOpacity="0.3"
+                />
+              </linearGradient>
+            </defs>
+
+            <Bar
+              dataKey="value"
+              fill="url(#softGreen)"
+              radius={[10, 10, 0, 0]}
+              barSize={28}
+            />
+
+          </BarChart>
+
+        </ResponsiveContainer>
+
+      </div>
+    </div>
+  );
+};
+
+export default CustomersReport;

src/pages/Reports/InventoryReport.jsx

@@ -0,0 +1,577 @@
+// import React from "react";
+// import { useGetInventoryStatsQuery } from "../../features/report/inventoryAPI";
+
+// const StockBadge = ({ stock }) => {
+//   if (stock === 0) return <span className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full">Out of Stock</span>;
+//   if (stock <= 5) return <span className="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">Low Stock</span>;
+//   return <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">{stock}</span>;
+// };
+
+// const ProductCard = ({ product }) => (
+//   <div className="bg-white shadow-md rounded-xl p-4 hover:shadow-xl transition transform hover:scale-105">
+//     <div className="flex justify-between items-center mb-2">
+//       <h3 className="font-semibold text-gray-800">{product.name}</h3>
+//       <StockBadge stock={product.stock} />
+//     </div>
+//     <p className="text-gray-500 text-sm">{product.category?.name || "Unknown Category"}</p>
+//   </div>
+// );
+
+// const InventorySection = ({ title, products }) => (
+//   <div className="flex flex-col gap-4">
+//     <h2 className="text-xl font-bold text-gray-700">{title}</h2>
+//     {products.length === 0 ? (
+//       <p className="text-gray-400 italic">No products found</p>
+//     ) : (
+//       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+//         {products.map((p) => (
+//           <ProductCard key={p._id} product={p} />
+//         ))}
+//       </div>
+//     )}
+//   </div>
+// );
+
+// const InventoryReport = () => {
+//   const { data, isLoading, isError } = useGetInventoryStatsQuery();
+
+//   if (isLoading) return <div className="text-center p-6 text-gray-500">Loading inventory...</div>;
+//   if (isError) return <div className="text-center p-6 text-red-500">Failed to load inventory</div>;
+
+//   const { lowStock, outOfStock, fastMoving } = data.data;
+
+//   return (
+//     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
+//       <InventorySection title="Low Stock" products={lowStock} />
+//       <InventorySection title="Out of Stock" products={outOfStock} />
+//       <InventorySection title="Fast Moving" products={fastMoving} />
+//     </div>
+//   );
+// };
+
+// export default InventoryReport;
+
+// InventoryReport v2 - Editorial warm theme
+import React, { useState } from "react";
+import { useGetInventoryStatsQuery } from "../../features/report/inventoryAPI";
+
+const styles = `
+  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600&display=swap');
+
+  :root {
+    --bg:        #f7f5f2;
+    --surface:   #ffffff;
+    --border:    #e8e4de;
+    --border2:   #f0ece6;
+    --text:      #1a1714;
+    --muted:     #9c9489;
+    --red:       #e8442a;
+    --red-bg:    #fdf1ef;
+    --red-bdr:   #f4c4bc;
+    --amber:     #d97706;
+    --amber-bg:  #fffbeb;
+    --amber-bdr: #fde68a;
+    --teal:      #0d7a6b;
+    --teal-bg:   #f0faf8;
+    --teal-bdr:  #a7f3e4;
+    --ink:       #2d2a26;
+    --shadow:    0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
+    --shadow-lg: 0 2px 8px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .inv-root {
+    font-family: 'Instrument Sans', sans-serif;
+    background: var(--bg);
+    min-height: 100vh;
+    color: var(--text);
+    padding: 40px 36px;
+  }
+
+  .inv-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 36px;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .inv-eyebrow {
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: 6px;
+  }
+  .inv-title {
+    font-family: 'Fraunces', serif;
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: var(--ink);
+    line-height: 1;
+    letter-spacing: -0.02em;
+  }
+
+  .inv-summary {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+  .inv-pill {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  .inv-pill-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+  }
+  .inv-pill-val {
+    font-family: 'Fraunces', serif;
+    font-size: 1.3rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--ink);
+  }
+  .inv-pill-label {
+    font-size: 0.65rem;
+    font-weight: 500;
+    color: var(--muted);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    margin-top: 2px;
+  }
+  .pill-total .inv-pill-icon { background: #f0ece6; }
+  .pill-ok    .inv-pill-icon { background: var(--teal-bg); }
+  .pill-low   .inv-pill-icon { background: var(--amber-bg); }
+  .pill-out   .inv-pill-icon { background: var(--red-bg); }
+
+  .inv-tabs {
+    display: flex;
+    gap: 2px;
+    border-bottom: 1.5px solid var(--border);
+    margin-bottom: 28px;
+  }
+  .inv-tab {
+    padding: 10px 18px;
+    border: none;
+    background: transparent;
+    color: var(--muted);
+    font-family: 'Instrument Sans', sans-serif;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    transition: color 0.18s;
+    letter-spacing: 0.01em;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1.5px;
+  }
+  .inv-tab:hover { color: var(--ink); }
+  .inv-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
+  .inv-tab-chip {
+    font-size: 0.6rem;
+    font-weight: 600;
+    padding: 2px 6px;
+    border-radius: 99px;
+    letter-spacing: 0.04em;
+  }
+  .chip-out  { background: var(--red-bg);   color: var(--red); }
+  .chip-low  { background: var(--amber-bg); color: var(--amber); }
+  .chip-fast { background: var(--teal-bg);  color: var(--teal); }
+
+  .inv-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    gap: 14px;
+  }
+
+  .inv-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: var(--shadow);
+    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
+    position: relative;
+    overflow: hidden;
+    animation: riseIn 0.3s both;
+  }
+  .inv-card:hover {
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-2px);
+    border-color: #d8d2ca;
+  }
+  @keyframes riseIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .inv-card-stripe {
+    position: absolute;
+    left: 0; top: 16px; bottom: 16px;
+    width: 3px;
+    border-radius: 0 3px 3px 0;
+  }
+  .stripe-red   { background: var(--red); }
+  .stripe-amber { background: var(--amber); }
+  .stripe-teal  { background: var(--teal); }
+  .inv-card-inner { padding-left: 14px; }
+
+  .inv-card-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+  .inv-card-name {
+    font-family: 'Fraunces', serif;
+    font-size: 0.97rem;
+    font-weight: 600;
+    color: var(--ink);
+    line-height: 1.3;
+  }
+  .inv-badge {
+    font-size: 0.62rem;
+    font-weight: 600;
+    padding: 3px 8px;
+    border-radius: 20px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .badge-out { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-bdr); }
+  .badge-low { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bdr); }
+  .badge-ok  { background: var(--teal-bg);  color: var(--teal);  border: 1px solid var(--teal-bdr); }
+
+  .inv-card-meta {
+    font-size: 0.68rem;
+    font-weight: 500;
+    color: var(--muted);
+    margin-bottom: 14px;
+    letter-spacing: 0.03em;
+  }
+  .inv-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .inv-bar-bg {
+    flex: 1;
+    height: 4px;
+    background: var(--border2);
+    border-radius: 99px;
+    overflow: hidden;
+  }
+  .inv-bar-fill {
+    height: 100%;
+    border-radius: 99px;
+    transition: width 0.55s cubic-bezier(0.34,1.4,0.64,1);
+  }
+  .inv-bar-label {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--muted);
+    min-width: 24px;
+    text-align: right;
+  }
+
+  .inv-rank-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 4px;
+  }
+  .inv-rank-num {
+    font-family: 'Fraunces', serif;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--border);
+    line-height: 1;
+    min-width: 44px;
+    flex-shrink: 0;
+  }
+  .inv-purchase-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    color: var(--teal);
+    background: var(--teal-bg);
+    border: 1px solid var(--teal-bdr);
+    padding: 2px 7px;
+    border-radius: 99px;
+    margin-top: 3px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .inv-empty {
+    grid-column: 1/-1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 72px 20px;
+    gap: 10px;
+  }
+  .inv-empty-icon { font-size: 2.5rem; opacity: 0.25; }
+  .inv-empty-text {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .inv-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 60vh;
+    gap: 14px;
+  }
+  .inv-spinner {
+    width: 32px; height: 32px;
+    border: 2px solid var(--border);
+    border-top-color: var(--ink);
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .inv-state-text {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .inv-state-text.err { color: var(--red); }
+`;
+
+const shortId = (id = "") =>
+  typeof id === "string" && id.length > 8
+    ? id.slice(-6).toUpperCase()
+    : String(id).toUpperCase();
+
+const getStockPct = (stock, max = 50) =>
+  stock === 0 ? 0 : Math.min(100, Math.round((stock / max) * 100));
+
+const StockBadge = ({ stock }) => {
+  if (stock === 0) return <span className="inv-badge badge-out">No stock</span>;
+  if (stock <= 5)
+    return <span className="inv-badge badge-low">{stock} left</span>;
+  return <span className="inv-badge badge-ok">In stock</span>;
+};
+
+const StockBar = ({ stock, fillColor }) => (
+  <div className="inv-bar-row">
+    <div className="inv-bar-bg">
+      <div
+        className="inv-bar-fill"
+        style={{ width: `${getStockPct(stock)}%`, background: fillColor }}
+      />
+    </div>
+    <span className="inv-bar-label">{stock}</span>
+  </div>
+);
+
+const OutCard = ({ product, idx }) => (
+  <div className="inv-card" style={{ animationDelay: `${idx * 35}ms` }}>
+    <div className="inv-card-stripe stripe-red" />
+    <div className="inv-card-inner">
+      <div className="inv-card-top">
+        <span className="inv-card-name">{product.name}</span>
+        <StockBadge stock={0} />
+      </div>
+      <div className="inv-card-meta">
+        Category · {shortId(product.category)}
+      </div>
+      <StockBar stock={0} fillColor="var(--red)" />
+    </div>
+  </div>
+);
+
+const LowCard = ({ product, idx }) => (
+  <div className="inv-card" style={{ animationDelay: `${idx * 35}ms` }}>
+    <div className="inv-card-stripe stripe-amber" />
+    <div className="inv-card-inner">
+      <div className="inv-card-top">
+        <span className="inv-card-name">{product.name}</span>
+        <StockBadge stock={product.stock} />
+      </div>
+      <div className="inv-card-meta">
+        Category · {shortId(product.category)}
+      </div>
+      <StockBar stock={product.stock} fillColor="var(--amber)" />
+    </div>
+  </div>
+);
+
+const FastCard = ({ product, idx }) => (
+  <div className="inv-card" style={{ animationDelay: `${idx * 35}ms` }}>
+    <div className="inv-card-stripe stripe-teal" />
+    <div className="inv-card-inner">
+      <div className="inv-rank-row">
+        <span className="inv-rank-num">{String(idx + 1).padStart(2, "0")}</span>
+        <div style={{ flex: 1 }}>
+          <div className="inv-card-top" style={{ marginBottom: 2 }}>
+            <span className="inv-card-name">{product.name}</span>
+            <StockBadge stock={product.stock} />
+          </div>
+          <span className="inv-purchase-tag">
+            ↑ {product.purchaseCount ?? 0} sold
+          </span>
+        </div>
+      </div>
+      <div className="inv-card-meta" style={{ marginTop: 8 }}>
+        Category · {shortId(product.category)}
+      </div>
+      <StockBar stock={product.stock} fillColor="var(--teal)" />
+    </div>
+  </div>
+);
+
+const EmptyState = ({ label }) => (
+  <div className="inv-empty">
+    <div className="inv-empty-icon">○</div>
+    <div className="inv-empty-text">No {label} products</div>
+  </div>
+);
+
+const TABS = [
+  { key: "out", label: "Out of Stock", chipClass: "chip-out" },
+  { key: "low", label: "Low Stock", chipClass: "chip-low" },
+  { key: "fast", label: "Fast Moving", chipClass: "chip-fast" },
+];
+
+const InventoryReport = () => {
+  const [activeTab, setActiveTab] = useState("out");
+  const { data, isLoading, isError } = useGetInventoryStatsQuery();
+
+  if (isLoading)
+    return (
+      <div className="inv-root">
+        <style>{styles}</style>
+        <div className="inv-state">
+          <div className="inv-spinner" />
+          <span className="inv-state-text">Loading inventory…</span>
+        </div>
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className="inv-root">
+        <style>{styles}</style>
+        <div className="inv-state">
+          <span style={{ fontSize: "1.8rem" }}>✕</span>
+          <span className="inv-state-text err">Failed to load data</span>
+        </div>
+      </div>
+    );
+
+  const {
+    summary,
+    lowStock = [],
+    outOfStock = [],
+    fastMoving = [],
+  } = data.data;
+
+  const tabContent = {
+    out: { products: outOfStock, Card: OutCard, emptyLabel: "out-of-stock" },
+    low: { products: lowStock, Card: LowCard, emptyLabel: "low-stock" },
+    fast: { products: fastMoving, Card: FastCard, emptyLabel: "fast-moving" },
+  };
+
+  const { products, Card, emptyLabel } = tabContent[activeTab];
+
+  return (
+    <div className="inv-root">
+      <style>{styles}</style>
+
+      <div className="inv-header">
+        <div>
+          <div className="inv-eyebrow">Admin · Reports</div>
+          <div className="inv-title">Inventory</div>
+        </div>
+
+        {summary && (
+          <div className="inv-summary">
+            <div className="inv-pill pill-total">
+              <div className="inv-pill-icon">📦</div>
+              <div>
+                <div className="inv-pill-val">{summary.totalProducts}</div>
+                <div className="inv-pill-label">Total</div>
+              </div>
+            </div>
+            <div className="inv-pill pill-ok">
+              <div className="inv-pill-icon">✅</div>
+              <div>
+                <div className="inv-pill-val">{summary.healthyStockCount}</div>
+                <div className="inv-pill-label">Healthy</div>
+              </div>
+            </div>
+            <div className="inv-pill pill-low">
+              <div className="inv-pill-icon">⚠️</div>
+              <div>
+                <div className="inv-pill-val">{summary.lowStockCount}</div>
+                <div className="inv-pill-label">Low Stock</div>
+              </div>
+            </div>
+            <div className="inv-pill pill-out">
+              <div className="inv-pill-icon">🚫</div>
+              <div>
+                <div className="inv-pill-val">{summary.outOfStockCount}</div>
+                <div className="inv-pill-label">Out of Stock</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="inv-tabs">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            className={`inv-tab${activeTab === tab.key ? " active" : ""}`}
+            onClick={() => setActiveTab(tab.key)}
+          >
+            {tab.label}
+            <span className={`inv-tab-chip ${tab.chipClass}`}>
+              {tabContent[tab.key].products.length}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      <div className="inv-grid">
+        {products.length === 0 ? (
+          <EmptyState label={emptyLabel} />
+        ) : (
+          products.map((p, i) => <Card key={p._id} product={p} idx={i} />)
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InventoryReport;

src/pages/Reports/OrderStatusCards.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { useGetOrdersReportQuery } from "../../features/report/ordersAPI";
+import { FiCheck, FiClock, FiX } from "react-icons/fi";
+
+const statusConfig = {
+  DELIVERED: {
+    label: "Delivered",
+    icon: <FiCheck className="text-green-500 w-6 h-6" />,
+    color: "text-green-600",
+  },
+  PENDING: {
+    label: "Pending",
+    icon: <FiClock className="text-yellow-500 w-6 h-6" />,
+    color: "text-yellow-600",
+  },
+  CANCELLED: {
+    label: "Cancelled",
+    icon: <FiX className="text-red-500 w-6 h-6" />,
+    color: "text-red-600",
+  },
+};
+
+const OrderCard = ({ status, count }) => {
+  const config = statusConfig[status];
+
+  return (
+    <div className="bg-white rounded-xl shadow-md p-6 flex flex-col gap-4 hover:shadow-lg transition">
+      <div className="flex items-center justify-between">
+        <span className={`font-medium ${config.color}`}>{config.label}</span>
+        <div>{config.icon}</div>
+      </div>
+      <h2 className="text-3xl font-bold text-gray-800">{count}</h2>
+      <p className="text-gray-500 text-sm">Total {config.label} Orders</p>
+    </div>
+  );
+};
+
+const OrdersReport = () => {
+  const { data, isLoading, isError } = useGetOrdersReportQuery();
+
+  if (isLoading)
+    return (
+      <div className="p-6 text-center text-gray-400">
+        Loading orders report...
+      </div>
+    );
+  if (isError)
+    return (
+      <p className="p-6 text-center text-red-500">
+        Error fetching orders report.
+      </p>
+    );
+
+  const stats = ["DELIVERED", "PENDING", "CANCELLED"].map((status) => {
+    const item = data?.data?.byStatus?.find((d) => d.status === status);
+
+    return {
+      status,
+      count: item?.count ?? 0,
+    };
+  });
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+      {stats.map((item) => (
+        <OrderCard key={item.status} status={item.status} count={item.count} />
+      ))}
+    </div>
+  );
+};
+
+export default OrdersReport;

src/pages/Reports/ReportsDashboard.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import SalesReport from "./SalesReport";
+import CustomersReport from "./CustomersReport";
+import OrderStatusCards from "./OrderStatusCards";
+import InventoryReport from "./InventoryReport";
+
+const ReportsDashboard = () => {
+  return (
+    <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-3">
+        <InventoryReport />
+      </div>
+      <div className="md:col-span-3">
+        <SalesReport />
+      </div>
+      <div className="md:col-span-3">
+        <CustomersReport />
+      </div>
+      <div className="md:col-span-3">
+        <OrderStatusCards />
+      </div>
+    </div>
+  );
+};
+
+export default ReportsDashboard;

src/pages/Reports/SalesReport.jsx

@@ -0,0 +1,738 @@
+// import React from "react";
+// import { useGetSalesReportQuery } from "../../features/report/salesAPI";
+// import {
+//   LineChart,
+//   Line,
+//   XAxis,
+//   YAxis,
+//   CartesianGrid,
+//   Tooltip,
+//   ResponsiveContainer,
+// } from "recharts";
+
+// const SalesReport = () => {
+//   const { data, isLoading, isError, error } = useGetSalesReportQuery();
+//   console.log(error);
+//   if (isLoading)
+//     return <p className="p-6 text-center">Loading sales data...</p>;
+//   if (isError)
+//     return (
+//       <p className="p-6 text-center text-red-500">Error loading sales data.</p>
+//     );
+
+//   const dailyData = Object.entries(data?.data?.dailySales || {}).map(
+//     ([date, value]) => ({
+//       date,
+//       sales: value,
+//     })
+//   );
+
+//   const monthlyData = Object.entries(data?.data?.monthlySales || {}).map(
+//     ([month, value]) => ({
+//       month,
+//       sales: value,
+//     })
+//   );
+
+//   return (
+//     <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+//       {/* Daily Sales Card */}
+//       <div className="p-6 bg-white shadow rounded-lg">
+//         <h2 className="text-lg font-bold mb-4">Daily Sales</h2>
+//         {dailyData.length ? (
+//           <ResponsiveContainer width="100%" height={300}>
+//             <LineChart data={dailyData}>
+//               <CartesianGrid stroke="#e0e0e0" strokeDasharray="5 5" />
+//               <XAxis dataKey="date" />
+//               <YAxis />
+//               <Tooltip />
+//               <Line
+//                 type="monotone"
+//                 dataKey="sales"
+//                 stroke="#4f46e5"
+//                 strokeWidth={2}
+//               />
+//             </LineChart>
+//           </ResponsiveContainer>
+//         ) : (
+//           <p>No daily sales data.</p>
+//         )}
+//       </div>
+
+//       {/* Monthly Sales Card */}
+//       <div className="p-6 bg-white shadow rounded-lg">
+//         <h2 className="text-lg font-bold mb-4">Monthly Sales</h2>
+//         {monthlyData.length ? (
+//           <ResponsiveContainer width="100%" height={300}>
+//             <LineChart data={monthlyData}>
+//               <CartesianGrid stroke="#e0e0e0" strokeDasharray="5 5" />
+//               <XAxis dataKey="month" />
+//               <YAxis />
+//               <Tooltip />
+//               <Line
+//                 type="monotone"
+//                 dataKey="sales"
+//                 stroke="#16a34a"
+//                 strokeWidth={2}
+//               />
+//             </LineChart>
+//           </ResponsiveContainer>
+//         ) : (
+//           <p>No monthly sales data.</p>
+//         )}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default SalesReport;
+
+
+
+
+import React, { useState } from "react";
+import { useGetSalesReportQuery } from "../../features/report/salesAPI";
+import {
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+const styles = `
+  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600&display=swap');
+
+  :root {
+    --bg:          #f7f5f2;
+    --surface:     #ffffff;
+    --surface2:    #faf9f7;
+    --border:      #e8e4de;
+    --border2:     #f0ece6;
+    --text:        #1a1714;
+    --muted:       #9c9489;
+    --ink:         #2d2a26;
+    --green:       #16803c;
+    --green-bg:    #f0fdf4;
+    --green-bdr:   #bbf7d0;
+    --orange:      #c2410c;
+    --orange-bg:   #fff7ed;
+    --orange-bdr:  #fed7aa;
+    --blue:        #1d4ed8;
+    --blue-bg:     #eff6ff;
+    --blue-bdr:    #bfdbfe;
+    --red:         #e8442a;
+    --red-bg:      #fdf1ef;
+    --amber:       #d97706;
+    --amber-bg:    #fffbeb;
+    --slate:       #475569;
+    --shadow:      0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
+    --shadow-lg:   0 2px 8px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .sr-root {
+    font-family: 'Instrument Sans', sans-serif;
+    background: var(--bg);
+    min-height: 100vh;
+    color: var(--text);
+    padding: 40px 36px;
+  }
+
+  /* ── Header ── */
+  .sr-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 32px;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .sr-eyebrow {
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: 6px;
+  }
+  .sr-title {
+    font-family: 'Fraunces', serif;
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: var(--ink);
+    line-height: 1;
+    letter-spacing: -0.02em;
+  }
+
+  /* ── Toggle ── */
+  .sr-toggle {
+    display: flex;
+    gap: 2px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 4px;
+    box-shadow: var(--shadow);
+    align-self: flex-end;
+  }
+  .sr-toggle-btn {
+    padding: 7px 16px;
+    border: none;
+    background: transparent;
+    border-radius: 7px;
+    font-family: 'Instrument Sans', sans-serif;
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--muted);
+    cursor: pointer;
+    transition: all 0.18s;
+    letter-spacing: 0.02em;
+  }
+  .sr-toggle-btn:hover { color: var(--ink); }
+  .sr-toggle-btn.active {
+    background: var(--ink);
+    color: #ffffff;
+  }
+
+  /* ── KPI strip ── */
+  .sr-kpis {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 12px;
+    margin-bottom: 28px;
+  }
+  .sr-kpi {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 18px 20px;
+    box-shadow: var(--shadow);
+    position: relative;
+    overflow: hidden;
+    animation: riseIn 0.3s both;
+  }
+  .sr-kpi::before {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 3px;
+    border-radius: 0 0 14px 14px;
+  }
+  .sr-kpi.kpi-green::before  { background: var(--green); }
+  .sr-kpi.kpi-blue::before   { background: var(--blue); }
+  .sr-kpi.kpi-orange::before { background: var(--orange); }
+  .sr-kpi.kpi-slate::before  { background: var(--slate); }
+
+  .sr-kpi-label {
+    font-size: 0.65rem;
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .sr-kpi-val {
+    font-family: 'Fraunces', serif;
+    font-size: 1.7rem;
+    font-weight: 700;
+    color: var(--ink);
+    line-height: 1;
+    letter-spacing: -0.02em;
+  }
+  .sr-kpi-sub {
+    font-size: 0.68rem;
+    color: var(--muted);
+    margin-top: 4px;
+  }
+
+  /* ── Main chart card ── */
+  .sr-chart-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 28px;
+    box-shadow: var(--shadow);
+    margin-bottom: 20px;
+    animation: riseIn 0.35s 0.1s both;
+  }
+  .sr-chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .sr-chart-title {
+    font-family: 'Fraunces', serif;
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--ink);
+  }
+  .sr-chart-sub {
+    font-size: 0.7rem;
+    color: var(--muted);
+    margin-top: 3px;
+    letter-spacing: 0.03em;
+  }
+  .sr-chart-legend {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: var(--muted);
+  }
+  .sr-legend-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  /* ── Status breakdown ── */
+  .sr-bottom {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  @media (max-width: 700px) { .sr-bottom { grid-template-columns: 1fr; } }
+
+  .sr-status-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: var(--shadow);
+    animation: riseIn 0.35s 0.2s both;
+  }
+  .sr-status-title {
+    font-family: 'Fraunces', serif;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--ink);
+    margin-bottom: 20px;
+  }
+
+  /* Status rows */
+  .sr-status-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 14px;
+  }
+  .sr-status-row:last-child { margin-bottom: 0; }
+  .sr-status-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .sr-status-name {
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--ink);
+    min-width: 100px;
+    text-transform: capitalize;
+  }
+  .sr-status-bar-bg {
+    flex: 1;
+    height: 6px;
+    background: var(--border2);
+    border-radius: 99px;
+    overflow: hidden;
+  }
+  .sr-status-bar-fill {
+    height: 100%;
+    border-radius: 99px;
+    transition: width 0.55s cubic-bezier(0.34,1.4,0.64,1);
+  }
+  .sr-status-count {
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--muted);
+    min-width: 20px;
+    text-align: right;
+  }
+
+  /* ── Bar chart card ── */
+  .sr-bar-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: var(--shadow);
+    animation: riseIn 0.35s 0.25s both;
+  }
+  .sr-bar-title {
+    font-family: 'Fraunces', serif;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--ink);
+    margin-bottom: 20px;
+  }
+
+  /* ── Empty state ── */
+  .sr-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 220px;
+    gap: 10px;
+    color: var(--border);
+  }
+  .sr-empty-icon { font-size: 2.2rem; opacity: 0.35; }
+  .sr-empty-text {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  /* ── Loading/Error ── */
+  .sr-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 60vh;
+    gap: 14px;
+  }
+  .sr-spinner {
+    width: 32px; height: 32px;
+    border: 2px solid var(--border);
+    border-top-color: var(--ink);
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .sr-state-text {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .sr-state-text.err { color: var(--red); }
+
+  @keyframes riseIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  /* ── Tooltip ── */
+  .sr-tooltip {
+    background: var(--ink);
+    border: none;
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-family: 'Instrument Sans', sans-serif;
+    font-size: 0.75rem;
+    color: #fff;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+  }
+  .sr-tooltip-label {
+    font-weight: 600;
+    margin-bottom: 2px;
+    opacity: 0.7;
+    font-size: 0.65rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .sr-tooltip-val {
+    font-family: 'Fraunces', serif;
+    font-size: 1rem;
+    font-weight: 700;
+  }
+`;
+
+// ─── Status config ────────────────────────────────────────────────────────────
+const STATUS_CONFIG = {
+  DELIVERED:   { color: "#16803c", bg: "#f0fdf4" },
+  CONFIRMED:   { color: "#1d4ed8", bg: "#eff6ff" },
+  PROCESSING:  { color: "#d97706", bg: "#fffbeb" },
+  PENDING:     { color: "#9c9489", bg: "#f7f5f2" },
+  CANCELLED:   { color: "#e8442a", bg: "#fdf1ef" },
+  SHIPPED:     { color: "#7c3aed", bg: "#f5f3ff" },
+};
+const getStatusColor = (s) => STATUS_CONFIG[s]?.color || "#9c9489";
+
+// ─── Custom Tooltip ───────────────────────────────────────────────────────────
+const CustomTooltip = ({ active, payload, label, prefix = "₹" }) => {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="sr-tooltip">
+      <div className="sr-tooltip-label">{label}</div>
+      <div className="sr-tooltip-val">
+        {prefix}{Number(payload[0].value).toLocaleString("en-IN")}
+      </div>
+    </div>
+  );
+};
+
+const BarTooltip = ({ active, payload, label }) => {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="sr-tooltip">
+      <div className="sr-tooltip-label">{label}</div>
+      <div className="sr-tooltip-val">{payload[0].value} orders</div>
+    </div>
+  );
+};
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+const fmt = (n) => new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 }).format(n);
+
+// ─── Main component ───────────────────────────────────────────────────────────
+const SalesReport = () => {
+  const [view, setView] = useState("daily");
+  const { data, isLoading, isError } = useGetSalesReportQuery();
+
+  if (isLoading)
+    return (
+      <div className="sr-root">
+        <style>{styles}</style>
+        <div className="sr-state">
+          <div className="sr-spinner" />
+          <span className="sr-state-text">Loading sales data…</span>
+        </div>
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className="sr-root">
+        <style>{styles}</style>
+        <div className="sr-state">
+          <span style={{ fontSize: "1.8rem" }}>✕</span>
+          <span className="sr-state-text err">Failed to load sales data</span>
+        </div>
+      </div>
+    );
+
+  const {
+    dailySales = {},
+    monthlySales = {},
+    totalOrders = 0,
+    avgOrderValue = 0,
+    statusBreakdown = [],
+  } = data?.data || {};
+
+  const dailyChartData = Object.entries(dailySales)
+    .map(([date, sales]) => ({ date: date.slice(5), sales }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+
+  const monthlyChartData = Object.entries(monthlySales)
+    .map(([month, sales]) => ({ month, sales }))
+    .sort((a, b) => a.month.localeCompare(b.month));
+
+  const chartData = view === "daily" ? dailyChartData : monthlyChartData;
+  const xKey = view === "daily" ? "date" : "month";
+
+  const totalRevenue = Object.values(view === "daily" ? dailySales : monthlySales)
+    .reduce((s, v) => s + v, 0);
+
+  const maxStatus = Math.max(...statusBreakdown.map((s) => s.count), 1);
+
+  const totalStatusOrders = statusBreakdown.reduce((s, i) => s + i.count, 0);
+
+  return (
+    <div className="sr-root">
+      <style>{styles}</style>
+
+      {/* ── Header ── */}
+      <div className="sr-header">
+        <div>
+          <div className="sr-eyebrow">Admin · Reports</div>
+          <div className="sr-title">Sales</div>
+        </div>
+
+        <div className="sr-toggle">
+          <button
+            className={`sr-toggle-btn${view === "daily" ? " active" : ""}`}
+            onClick={() => setView("daily")}
+          >Daily</button>
+          <button
+            className={`sr-toggle-btn${view === "monthly" ? " active" : ""}`}
+            onClick={() => setView("monthly")}
+          >Monthly</button>
+        </div>
+      </div>
+
+      {/* ── KPIs ── */}
+      <div className="sr-kpis">
+        <div className="sr-kpi kpi-green" style={{ animationDelay: "0ms" }}>
+          <div className="sr-kpi-label">Total Revenue</div>
+          <div className="sr-kpi-val">{fmt(totalRevenue)}</div>
+          <div className="sr-kpi-sub">{view === "daily" ? "Last 30 days" : "All time"}</div>
+        </div>
+        <div className="sr-kpi kpi-blue" style={{ animationDelay: "40ms" }}>
+          <div className="sr-kpi-label">Total Orders</div>
+          <div className="sr-kpi-val">{totalStatusOrders}</div>
+          <div className="sr-kpi-sub">Across all statuses</div>
+        </div>
+        <div className="sr-kpi kpi-orange" style={{ animationDelay: "80ms" }}>
+          <div className="sr-kpi-label">Avg Order Value</div>
+          <div className="sr-kpi-val">{fmt(avgOrderValue)}</div>
+          <div className="sr-kpi-sub">Paid orders only</div>
+        </div>
+        <div className="sr-kpi kpi-slate" style={{ animationDelay: "120ms" }}>
+          <div className="sr-kpi-label">Delivered</div>
+          <div className="sr-kpi-val">
+            {statusBreakdown.find((s) => s.status === "DELIVERED")?.count ?? 0}
+          </div>
+          <div className="sr-kpi-sub">Successfully fulfilled</div>
+        </div>
+      </div>
+
+      {/* ── Area Chart ── */}
+      <div className="sr-chart-card">
+        <div className="sr-chart-header">
+          <div>
+            <div className="sr-chart-title">
+              {view === "daily" ? "Daily Revenue" : "Monthly Revenue"}
+            </div>
+            <div className="sr-chart-sub">
+              {view === "daily" ? "Revenue per day (last 30 days)" : "Revenue per month (all time)"}
+            </div>
+          </div>
+          <div className="sr-chart-legend">
+            <span className="sr-legend-dot" style={{ background: "#16803c" }} />
+            Revenue (INR)
+          </div>
+        </div>
+
+        {chartData.length > 0 ? (
+          <ResponsiveContainer width="100%" height={280}>
+            <AreaChart data={chartData} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
+              <defs>
+                <linearGradient id="greenGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%"  stopColor="#16803c" stopOpacity={0.15} />
+                  <stop offset="95%" stopColor="#16803c" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid stroke="#f0ece6" strokeDasharray="4 4" vertical={false} />
+              <XAxis
+                dataKey={xKey}
+                tick={{ fontFamily: "Instrument Sans", fontSize: 11, fill: "#9c9489" }}
+                axisLine={false}
+                tickLine={false}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                tick={{ fontFamily: "Instrument Sans", fontSize: 11, fill: "#9c9489" }}
+                axisLine={false}
+                tickLine={false}
+                tickFormatter={(v) => `₹${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`}
+                width={52}
+              />
+              <Tooltip content={<CustomTooltip />} cursor={{ stroke: "#e8e4de", strokeWidth: 1 }} />
+              <Area
+                type="monotone"
+                dataKey="sales"
+                stroke="#16803c"
+                strokeWidth={2}
+                fill="url(#greenGrad)"
+                dot={false}
+                activeDot={{ r: 5, fill: "#16803c", strokeWidth: 0 }}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        ) : (
+          <div className="sr-empty">
+            <div className="sr-empty-icon">○</div>
+            <div className="sr-empty-text">No {view} sales data</div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Bottom row ── */}
+      <div className="sr-bottom">
+
+        {/* Status breakdown — horizontal bars */}
+        <div className="sr-status-card">
+          <div className="sr-status-title">Order Status</div>
+          {statusBreakdown.length === 0 ? (
+            <div className="sr-empty" style={{ height: 160 }}>
+              <div className="sr-empty-icon">○</div>
+              <div className="sr-empty-text">No status data</div>
+            </div>
+          ) : (
+            statusBreakdown
+              .slice()
+              .sort((a, b) => b.count - a.count)
+              .map((item, i) => (
+                <div className="sr-status-row" key={item.status} style={{ animationDelay: `${i * 40}ms` }}>
+                  <span className="sr-status-dot" style={{ background: getStatusColor(item.status) }} />
+                  <span className="sr-status-name">{item.status.charAt(0) + item.status.slice(1).toLowerCase()}</span>
+                  <div className="sr-status-bar-bg">
+                    <div
+                      className="sr-status-bar-fill"
+                      style={{
+                        width: `${Math.round((item.count / maxStatus) * 100)}%`,
+                        background: getStatusColor(item.status),
+                      }}
+                    />
+                  </div>
+                  <span className="sr-status-count">{item.count}</span>
+                </div>
+              ))
+          )}
+        </div>
+
+        {/* Bar chart of status counts */}
+        <div className="sr-bar-card">
+          <div className="sr-bar-title">Orders by Status</div>
+          {statusBreakdown.length > 0 ? (
+            <ResponsiveContainer width="100%" height={210}>
+              <BarChart
+                data={statusBreakdown.map((s) => ({
+                  name: s.status.charAt(0) + s.status.slice(1).toLowerCase(),
+                  count: s.count,
+                  color: getStatusColor(s.status),
+                }))}
+                margin={{ top: 4, right: 4, bottom: 0, left: -20 }}
+                barSize={28}
+              >
+                <CartesianGrid stroke="#f0ece6" strokeDasharray="4 4" vertical={false} />
+                <XAxis
+                  dataKey="name"
+                  tick={{ fontFamily: "Instrument Sans", fontSize: 10, fill: "#9c9489" }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fontFamily: "Instrument Sans", fontSize: 10, fill: "#9c9489" }}
+                  axisLine={false}
+                  tickLine={false}
+                  allowDecimals={false}
+                />
+                <Tooltip content={<BarTooltip />} cursor={{ fill: "#f7f5f2" }} />
+                <Bar dataKey="count" radius={[5, 5, 0, 0]}>
+                  {statusBreakdown.map((entry, i) => (
+                    <Cell key={i} fill={getStatusColor(entry.status)} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="sr-empty" style={{ height: 210 }}>
+              <div className="sr-empty-icon">○</div>
+              <div className="sr-empty-text">No data</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SalesReport;

src/pages/Returns/components/ReturnCard.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useUpdateReturnStatusMutation } from "../../../features/orders/ordersAPI";
+import ConfirmModal from '../../../components/common/ConfirmModal';
+
+const ReturnCard = ({ order }) => {
+  const [updateReturnStatus] = useUpdateReturnStatusMutation();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [actionType, setActionType] = useState(null);
+
+  const handleAction = async () => {
+    if (!actionType) return;
+    await updateReturnStatus({ id: order.id, action: actionType });
+    setModalOpen(false);
+  };
+
+  return (
+    <div className="p-4 border rounded-lg shadow-sm bg-white">
+      <h3 className="font-semibold text-lg">Order #{order.orderNumber}</h3>
+      <p className="text-gray-600">
+        Customer: {order.user?.firstName} {order.user?.lastName}
+      </p>
+      <p className="text-gray-600">Total: ₹{order.totalAmount}</p>
+      <p className="text-gray-600">Status: {order.returnStatus}</p>
+
+      <div className="mt-2 flex gap-2">
+        {order.returnStatus === 'REQUESTED' && (
+          <>
+            <button
+              onClick={() => { setActionType('APPROVE'); setModalOpen(true); }}
+              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+            >
+              Approve
+            </button>
+            <button
+              onClick={() => { setActionType('REJECT'); setModalOpen(true); }}
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              Reject
+            </button>
+          </>
+        )}
+      </div>
+
+      <ConfirmModal
+        isOpen={modalOpen}
+        title={actionType ? `${actionType} Return Request` : ''}
+        message={actionType ? `Are you sure you want to ${actionType.toLowerCase()} this return request?` : ''}
+        onCancel={() => setModalOpen(false)}
+        onConfirm={handleAction}
+      />
+    </div>
+  );
+};
+
+export default ReturnCard;

src/pages/Returns/components/ReturnDetails.jsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { useParams, Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { useGetReturnRequestByIdQuery } from "../../../features/orders/ordersAPI";
+
+const ReturnDetails = () => {
+  const { id } = useParams();
+  const { data, isLoading, isError } = useGetReturnRequestByIdQuery(id);
+
+  if (isLoading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading return request details...
+      </div>
+    );
+
+  if (isError || !data?.data)
+    return (
+      <div className="text-center mt-10 text-red-600">
+        Return request not found!
+      </div>
+    );
+
+  const order = data.data;
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      {/* Back Button */}
+      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <Link to="/returns" className="font-medium">
+          Back to Return Requests
+        </Link>
+      </div>
+
+      {/* Return Request Header */}
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between bg-white shadow-md rounded-2xl p-6 border border-gray-100">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">
+            Return Request - {order.orderNumber}
+          </h2>
+          <p className="text-gray-500 text-sm mt-1">
+            Requested At: {new Date(order.returnRequestedAt).toLocaleString()}
+          </p>
+        </div>
+        <div className="mt-4 md:mt-0">
+          <p className="text-3xl font-semibold text-green-600">
+            ₹{order.totalAmount?.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {/* Customer Info */}
+      <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+        <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+          Customer Info
+        </h3>
+        <InfoRow
+          label="Name"
+          value={`${order.user?.firstName || ""} ${order.user?.lastName || ""}`}
+        />
+        <InfoRow label="Email" value={order.user?.email || "N/A"} />
+        <InfoRow label="Phone" value={order.user?.phone || "N/A"} />
+      </div>
+
+      {/* Return Status & Shipping Address */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Return Status
+          </h3>
+          <InfoRow label="Status" value={order.returnStatus} />
+          <InfoRow
+            label="Payment Status"
+            value={order.paymentStatus || "N/A"}
+          />
+          <InfoRow
+            label="Payment Method"
+            value={order.paymentMethod || "N/A"}
+          />
+        </div>
+
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Shipping Address
+          </h3>
+          <InfoRow
+            label="Name"
+            value={`${order.address?.firstName || ""} ${
+              order.address?.lastName || ""
+            }`}
+          />
+          <InfoRow label="Company" value={order.address?.company || "N/A"} />
+          <InfoRow
+            label="Address"
+            value={
+              order.address
+                ? [
+                    order.address.addressLine1,
+                    order.address.addressLine2,
+                    order.address.city,
+                    order.address.state,
+                    order.address.postalCode,
+                    order.address.country,
+                  ]
+                    .join(" ")
+                    .split(" ")
+                    .reduce((acc, word, idx) => {
+                      const lineIndex = Math.floor(idx / 4);
+                      if (!acc[lineIndex]) acc[lineIndex] = [];
+                      acc[lineIndex].push(word);
+                      return acc;
+                    }, [])
+                    .map((lineWords, idx) => (
+                      <span key={idx} className="block">
+                        {lineWords.join(" ")}
+                      </span>
+                    ))
+                : "N/A"
+            }
+          />
+
+          <InfoRow label="Phone" value={order.address?.phone || "N/A"} />
+        </div>
+      </div>
+
+      {/* Products */}
+      <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100">
+        <h3 className="text-lg font-semibold text-gray-700 border-b pb-3">
+          Products
+        </h3>
+        <ul className="list-disc pl-5 mt-3 space-y-1">
+          {order.items?.map((item) => (
+            <li key={item.id}>
+              {item.productName} - Qty: {item.quantity} - ₹
+              {item.price?.toLocaleString()}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+// Small helper component for info rows
+const InfoRow = ({ label, value }) => (
+  <div className="flex justify-between text-sm text-gray-700">
+    <span className="font-medium text-gray-600">{label}:</span>
+    <span className="text-gray-800">{value}</span>
+  </div>
+);
+
+export default ReturnDetails;

src/pages/Returns/components/ReturnHistory.jsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useGetReturnedOrdersQuery } from "../../../features/orders/ordersAPI";
+import Table from "../../../components/common/Table";
+import Pagination from "../../../components/common/Pagination";
+import { Link } from "react-router-dom";
+
+const ReturnHistory = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 10;
+
+  const { data, isLoading, isError } = useGetReturnedOrdersQuery({
+    page: currentPage,
+    limit: perPage,
+  });
+
+  if (isLoading) return <p className="text-gray-500">Loading...</p>;
+  if (isError)
+    return <p className="text-red-600">Failed to load return history.</p>;
+
+  const returns = data?.data || [];
+  const totalPages = Math.ceil((data?.count || 0) / perPage);
+
+  const columns = [
+    { key: "sr", label: "Sr. No", render: (_, __, i) => i + 1 },
+    { key: "orderNumber", label: "Order Number" },
+    {
+      key: "customer",
+      label: "Customer",
+      render: (_, row) =>
+        `${row.user?.firstName || ""} ${row.user?.lastName || ""}`,
+    },
+    {
+      key: "totalAmount",
+      label: "Total",
+      render: (_, row) => `₹${row.totalAmount}`,
+    },
+    {
+      key: "returnStatus",
+      label: "Return Status",
+      render: (_, row) => (
+        <span
+          className={`px-3 py-1 rounded-full text-xs font-medium ${
+            row.returnStatus === "APPROVED"
+              ? "bg-green-100 text-green-700"
+              : "bg-gray-100 text-gray-600"
+          }`}
+        >
+          {row.returnStatus}
+        </span>
+      ),
+    },
+    {
+      key: "approvedAt",
+      label: "Approved On",
+      render: (_, row) =>
+        row.updatedAt ? new Date(row.updatedAt).toLocaleDateString() : "-",
+    },
+  ];
+
+  const rowActions = (row) => (
+    <Link
+      to={`/returns/${row.id}`}
+      className="px-3 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200"
+    >
+      View
+    </Link>
+  );
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-700">Return History</h2>
+      <span className="text-sm bg-yellow-200 p-2 text-gray-500">
+        Shows only
+        {/* <span className="ml-1 text-yellow-600 font-medium">(Requested)</span>, */}
+        <span className="ml-1 text-green-600 font-medium">Approved</span>,
+        <span className="ml-1 text-red-600 font-medium">COMPLETED</span>
+      </span>
+      <Table columns={columns} data={returns} actions={rowActions} />
+
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={setCurrentPage}
+      />
+    </div>
+  );
+};
+
+export default ReturnHistory;

src/pages/Returns/components/ReturnList.jsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { useGetReturnRequestsQuery } from "../../../features/orders/ordersAPI";
+import { Link } from "react-router-dom";
+import Table from "../../../components/common/Table";
+import Pagination from "../../../components/common/Pagination";
+
+const ReturnList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 10;
+
+  const { data, isError, isLoading } = useGetReturnRequestsQuery({
+    page: currentPage,
+    limit: perPage,
+  });
+
+  if (isLoading) return <p className="text-gray-500">Loading...</p>;
+  if (isError)
+    return <p className="text-red-600">Failed to load return requests.</p>;
+
+  const returns = data?.data || [];
+  const totalPages = Math.ceil(data?.count / perPage || 0);
+
+  const columns = [
+    { key: "sr", label: "Sr. No", render: (_, row, index) => index + 1 },
+    { key: "orderNumber", label: "Order Number" },
+    {
+      key: "customer",
+      label: "Customer",
+      render: (_, row) =>
+        `${row.user?.firstName || ""} ${row.user?.lastName || ""}`,
+    },
+    {
+      key: "totalAmount",
+      label: "Total",
+      render: (_, row) => `₹${row.totalAmount}`,
+    },
+    { key: "returnStatus", label: "Status" },
+    {
+      key: "requestedAt",
+      label: "Requested At",
+      render: (_, row) => new Date(row.returnRequestedAt).toLocaleDateString(),
+    },
+  ];
+
+  const rowActions = (row) => (
+    <div className="flex items-center gap-2">
+      <Link
+        to={`/returns/${row.id}`} // <-- changed from order.id to row.id
+        className="px-3 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200 transition"
+      >
+        View
+      </Link>
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* <h2 className="text-xl font-semibold text-gray-700">Return Requests</h2> */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-gray-700">Return Requests</h2>
+        {/* <span className="bg-red-600">for Admin - Pending / Approved / Rejected</span> */}
+        <span className="text-sm bg-yellow-200 p-2 text-gray-500">
+          Shows return requests that require admin action
+          <span className="ml-1 text-yellow-600 font-medium">(Requested)</span>,
+          <span className="ml-1 text-green-600 font-medium">Approved</span>,
+          <span className="ml-1 text-red-600 font-medium">Rejected</span>
+        </span>
+
+        <div className="flex items-center gap-3">
+          <input
+            type="text"
+            placeholder="Search products..."
+            className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
+          />
+          <Link
+            to="/returns/history"
+            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+          >
+            Return History
+          </Link>
+        </div>
+      </div>
+      <Table columns={columns} data={returns} actions={rowActions} />
+
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(pg) => setCurrentPage(pg)}
+      />
+    </div>
+  );
+};
+
+export default ReturnList;

src/pages/Returns/index.js

@@ -0,0 +1,3 @@
+export { default as ReturnCard } from './components/ReturnCard';
+export { default as ReturnList } from './components/ReturnList';
+// export { default as ReturnDetailsModal } from './components/ReturnDetailsModal';

src/pages/Users/StatusBadge.jsx

@@ -0,0 +1,19 @@
+// src/pages/users/StatusBadge.jsx
+import React from "react";
+
+const StatusBadge = ({ value, trueText, falseText }) => {
+  const isTrue = Boolean(value);
+  return (
+    <span
+      className={`px-2 py-1 text-xs rounded-full font-medium ${
+        isTrue
+          ? "bg-green-100 text-green-800"
+          : "bg-red-100 text-red-800"
+      }`}
+    >
+      {isTrue ? trueText : falseText}
+    </span>
+  );
+};
+
+export default StatusBadge;