+ {col.label} +	Action
+ {col.render + ? col.render(row[col.key], row, index) // pass index here + : row[col.key]} +	+ {actions(row)} +

+ + {/* Sidebar */} +

+ {/* ── Logo ─────────────────────────────────────── */} +

+ {!isCollapsed && ( +

+ V +

+ + Vaishnavi + +

+ )} + {isCollapsed && ( +

+ V +

+ )} + +

+ + {/* ── Navigation ───────────────────────────────── */} +

+ {!isCollapsed && ( +

+ Main Menu +

+ )} + + {NAV_ITEMS.map((item) => { + const Icon = item.icon; + const hasSubMenu = !!item.subMenu; + const isOpen = openMenus[item.name]; + const parentActive = isParentActive(item); + + if (hasSubMenu) { + return ( +

+ + + {/* Submenu */} + {isOpen && !isCollapsed && ( +

+ {item.subMenu.map((sub) => ( + + + {sub.name} + + ))} +

+ )} +

+ ); + } + + // Regular link + const active = isActive(item.path); + return ( + + + + + {!isCollapsed && {item.name}} + + {/* Active indicator dot when collapsed */} + {isCollapsed && active && ( + + )} + + ); + })} +

+ + {/* ── User + Logout ─────────────────────────────── */} +

+ {!isCollapsed && ( +

+ A +

Admin

Super Admin

+ )} + + +

+ + setLogoutOpen(false)} + onConfirm={() => { setLogoutOpen(false); navigate("/login"); }} + /> + + ); +}; + +export default Sidebar; \ No newline at end of file diff --git a/src/components/products/ProductCard.jsx b/src/components/products/ProductCard.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/products/ProductForm.jsx b/src/components/products/ProductForm.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/products/ProductTable.jsx b/src/components/products/ProductTable.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/features/analytics/analyticsAPI.js b/src/features/analytics/analyticsAPI.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/analytics/analyticsSlice.js b/src/features/analytics/analyticsSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/auth/authAPI.js b/src/features/auth/authAPI.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/auth/authSlice.js b/src/features/auth/authSlice.js new file mode 100644 index 0000000..0e624ef --- /dev/null +++ b/src/features/auth/authSlice.js @@ -0,0 +1,64 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +// import axios from "axios"; +import api from "../../app/api"; + +export const login = createAsyncThunk( + "auth/login", + async (credentials, thunkAPI) => { + try { + const response = await api.post("/auth/login", credentials); + + console.log("Login response:", response.data); + + const token = response.data?.token || response.data?.data?.token; + const user = response.data?.user || response.data?.data?.user; + + if (!token) { + throw new Error("No token returned from server"); + } + + localStorage.setItem("token", token); + return { user, token }; + } catch (error) { + return thunkAPI.rejectWithValue( + error.response?.data?.message || "Login failed" + ); + } + } +); + +const authSlice = createSlice({ + name: "auth", + initialState: { + user: null, + loading: false, + error: null, + token: localStorage.getItem("token") || null, + }, + reducers: { + logout: (state) => { + state.user = null; + state.token = null; + localStorage.removeItem("token"); + }, + }, + extraReducers: (builder) => { + builder + .addCase(login.pending, (state) => { + state.loading = true; + state.error = null; + }) + .addCase(login.fulfilled, (state, action) => { + state.loading = false; + state.user = action.payload.user; + state.token = action.payload.token; + }) + .addCase(login.rejected, (state, action) => { + state.loading = false; + state.error = action.payload; + }); + }, +}); + +export const { logout } = authSlice.actions; +export default authSlice.reducer; diff --git a/src/features/auth/authUtils.js b/src/features/auth/authUtils.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/categories/categoryAPI.js b/src/features/categories/categoryAPI.js new file mode 100644 index 0000000..015eec5 --- /dev/null +++ b/src/features/categories/categoryAPI.js @@ -0,0 +1,90 @@ +// src/features/categories/categoryAPI.js +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const categoryApi = createApi({ + reducerPath: "categoryApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:3000/api", + prepareHeaders: (headers, { getState }) => { + const token = getState().auth?.token; + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + tagTypes: ["Categories"], + endpoints: (builder) => ({ + getCategoryTree: builder.query({ + query: () => "/admin/tree", + providesTags: ["Categories"], + }), + + addCategory: builder.mutation({ + query: (formData) => ({ + url: "/admin/categories", + method: "POST", + body: formData, // must be FormData + }), + invalidatesTags: ["Categories"], +}), + + // updateCategory: builder.mutation({ + // query: ({ id, ...body }) => ({ + // url: `/admin/categories/${id}`, + // method: "PUT", + // body, + // }), + // invalidatesTags: ["Categories"], + // }), + + updateCategory: builder.mutation({ + query: ({ id, data }) => ({ + url: `/admin/categories/${id}`, + method: "PUT", + body: data, // can be FormData OR JSON + }), + invalidatesTags: ["Categories"], + }), + + getCategoryById: builder.query({ + query: (id) => `/admin/categories/${id}`, + }), + + updateCategoryStatus: builder.mutation({ + query: ({ id, isActive }) => ({ + url: `/admin/categories/${id}/status`, + method: "PATCH", + body: { isActive }, + }), + invalidatesTags: ["Categories"], + }), + + deleteCategory: builder.mutation({ + query: (id) => ({ + url: `/admin/categories/${id}`, + method: "DELETE", + }), + invalidatesTags: ["Categories"], + }), + + reorderCategories: builder.mutation({ + query: (orders) => ({ + url: "/admin/categories/reorder", + method: "PATCH", + body: { orders }, + }), + invalidatesTags: ["Categories"], + }), + }), +}); + +export const { + useGetCategoryTreeQuery, + useAddCategoryMutation, + useUpdateCategoryMutation, + useDeleteCategoryMutation, + useGetCategoryByIdQuery, + useUpdateCategoryStatusMutation, + useReorderCategoriesMutation, +} = categoryApi; + +export default categoryApi; diff --git a/src/features/categories/categorySlice.js b/src/features/categories/categorySlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/coupons/couponAPI.js b/src/features/coupons/couponAPI.js new file mode 100644 index 0000000..479d9b1 --- /dev/null +++ b/src/features/coupons/couponAPI.js @@ -0,0 +1,53 @@ +// src/features/coupons/couponAPI.js +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const couponApi = createApi({ + reducerPath: "couponApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:3000/api", + prepareHeaders: (headers, { getState }) => { + const token = getState().auth?.token; + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + tagTypes: ["Coupons"], + endpoints: (builder) => ({ + getCoupons: builder.query({ + query: () => "/admin/coupons", + transformResponse: (res) => res.data.coupons, + providesTags: ["Coupons"], + }), + + // ✅ GET SINGLE COUPON (NEW) + getCouponById: builder.query({ + query: (id) => `/admin/coupons/${id}`, + transformResponse: (res) => res.data, // 🔥 IMPORTANT + providesTags: ["Coupons"], + }), + + createCoupon: builder.mutation({ + query: (body) => ({ + url: "/admin/coupons", + method: "POST", + body, + }), + invalidatesTags: ["Coupons"], + }), + + toggleCouponStatus: builder.mutation({ + query: (id) => ({ + url: `/admin/coupons/${id}/toggle`, + method: "PATCH", + }), + invalidatesTags: ["Coupons"], + }), + }), +}); + +export const { + useGetCouponsQuery, + useGetCouponByIdQuery, + useCreateCouponMutation, + useToggleCouponStatusMutation, +} = couponApi; diff --git a/src/features/dashboard/dashboardSlice.js b/src/features/dashboard/dashboardSlice.js new file mode 100644 index 0000000..c8d80b5 --- /dev/null +++ b/src/features/dashboard/dashboardSlice.js @@ -0,0 +1,123 @@ +// import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +// import axios from "../../app/api"; + +// // ✅ Async thunk to fetch dashboard stats +// export const fetchDashboard = createAsyncThunk( +// "dashboard/fetchDashboard", +// async (_, { rejectWithValue }) => { +// try { +// const res = await axios.get("/admin/dashboard"); +// return res.data.data; +// } catch (error) { +// return rejectWithValue(error.response?.data || error.message); +// } +// } +// ); + +// const dashboardSlice = createSlice({ +// name: "dashboard", +// initialState: { +// stats: null, +// loading: false, +// error: null, +// }, +// reducers: {}, +// extraReducers: (builder) => { +// builder +// .addCase(fetchDashboard.pending, (state) => { +// state.loading = true; +// state.error = null; +// }) +// .addCase(fetchDashboard.fulfilled, (state, action) => { +// state.loading = false; +// state.stats = action.payload; +// }) +// .addCase(fetchDashboard.rejected, (state, action) => { +// state.loading = false; +// state.error = action.payload; +// }); +// }, +// }); + +// export default dashboardSlice.reducer; + +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import axios from "../../app/api"; + +/* ===================================================== + 1️⃣ Fetch Main Dashboard Data + Endpoint: GET /admin/dashboard +===================================================== */ +export const fetchDashboard = createAsyncThunk( + "dashboard/fetchDashboard", + async (_, { rejectWithValue }) => { + try { + const res = await axios.get("/admin/dashboard"); + return res.data.data; + } catch (error) { + return rejectWithValue(error.response?.data?.message || error.message); + } + }, +); + +/* ===================================================== + 2️⃣ Fetch Coupon Statistics + Endpoint: GET /admin/stats +===================================================== */ +export const fetchCouponStats = createAsyncThunk( + "dashboard/fetchCouponStats", + async (_, { rejectWithValue }) => { + try { + const res = await axios.get("/admin/stats"); + return res.data.data; + } catch (error) { + return rejectWithValue(error.response?.data?.message || error.message); + } + }, +); + +/* ===================================================== + Dashboard Slice +===================================================== */ +const dashboardSlice = createSlice({ + name: "dashboard", + initialState: { + stats: null, // data from /admin/dashboard + couponStats: null, // data from /admin/stats + loading: false, + error: null, + }, + reducers: {}, + extraReducers: (builder) => { + builder + + /* ===== DASHBOARD DATA ===== */ + .addCase(fetchDashboard.pending, (state) => { + state.loading = true; + state.error = null; + }) + .addCase(fetchDashboard.fulfilled, (state, action) => { + state.loading = false; + state.stats = action.payload; + }) + .addCase(fetchDashboard.rejected, (state, action) => { + state.loading = false; + state.error = action.payload; + }) + + /* ===== COUPON STATS ===== */ + .addCase(fetchCouponStats.pending, (state) => { + state.loading = true; + }) + .addCase(fetchCouponStats.fulfilled, (state, action) => { + state.loading = false; + state.couponStats = action.payload; + }) + .addCase(fetchCouponStats.rejected, (state, action) => { + state.loading = false; + state.error = action.payload; + }); + }, +}); + +export default dashboardSlice.reducer; diff --git a/src/features/orders/ordersAPI.js b/src/features/orders/ordersAPI.js new file mode 100644 index 0000000..94bef46 --- /dev/null +++ b/src/features/orders/ordersAPI.js @@ -0,0 +1,107 @@ +// src/features/orders/orderApi.js +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const orderApi = createApi({ + reducerPath: "orderApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL, + prepareHeaders: (headers, { getState }) => { + const token = getState().auth?.token; + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + endpoints: (builder) => ({ + getOrders: builder.query({ + query: ({ page = 1, limit = 10 }) => + `/admin/orders?page=${page}&limit=${limit}`, + providesTags: ["Orders"], + }), + + // ✅ ADD THIS + getOrderById: builder.query({ + query: (id) => `/admin/orders/${id}`, + providesTags: ["Orders"], + }), + + // ===================================================== + // UPDATE ORDER STATUS (Delivery Admin) + // Used in: Order Details Page (Update to SHIPPED / DELIVERED etc.) + // ===================================================== + updateOrderStatus: builder.mutation({ + query: ({ id, status, trackingNumber }) => ({ + url: `/delivery/admin/${id}/status`, + method: "PUT", + body: { + status, + trackingNumber, + }, + }), + invalidatesTags: ["Orders"], // better + }), + + getOrderHistory: builder.query({ + query: (id) => `/admin/${id}/history`, + }), + + // REQUESTED APPROVED REJECTEDCOMPLETED + + // ===================================================== + // RETURN REQUESTS (Admin - Pending / Approved / Rejected) + // Used in: Admin → Returns → Requests List + // Status: REQUESTED | APPROVED | REJECTED + // ===================================================== + getReturnRequests: builder.query({ + query: ({ page = 1, limit = 10 }) => + `/orders/admin/returns?page=${page}&limit=${limit}`, + providesTags: ["Returns"], + }), + + // ===================================================== + // RETURN HISTORY (Admin - Completed / All Return Records) + // Used in: Admin → Returns → History Page + // ===================================================== + + getReturnedOrders: builder.query({ + query: ({ page = 1, limit = 10 }) => + `/orders/admin/returns/list?page=${page}&limit=${limit}`, + providesTags: ["Returns"], + }), + + // ===================================================== + // RETURN DETAILS (Single Return Order) + // Used in: Admin → Returns → View Details Page + // URL: /returns/:id + // ===================================================== + + getReturnRequestById: builder.query({ + query: (id) => `/orders/admin/returns/${id}`, + providesTags: (result, error, id) => [{ type: "Returns", id }], + }), + + // ===================================================== + // UPDATE RETURN STATUS + // Used in: ReturnDetails page (Approve / Reject buttons) + // action = "APPROVE" | "REJECT" + // ===================================================== + updateReturnStatus: builder.mutation({ + query: ({ id, action }) => ({ + url: `/${id}/return/status`, + method: "PUT", + body: { action }, // action = "APPROVE" | "REJECT" + }), + invalidatesTags: ["Returns"], + }), + }), +}); + +export const { + useGetOrdersQuery, + useGetOrderByIdQuery, + useGetReturnRequestsQuery, + useGetReturnedOrdersQuery, + useGetReturnRequestByIdQuery, + useUpdateReturnStatusMutation, + useUpdateOrderStatusMutation, + useGetOrderHistoryQuery, +} = orderApi; diff --git a/src/features/orders/ordersSlice.js b/src/features/orders/ordersSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/products/productAPI.js b/src/features/products/productAPI.js new file mode 100644 index 0000000..b96b7fd --- /dev/null +++ b/src/features/products/productAPI.js @@ -0,0 +1,23 @@ +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +const productApi = createApi({ + reducerPath: "productApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api", + prepareHeaders: (headers, { getState }) => { + const token = getState().auth?.token; + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + tagTypes: ["Products"], + endpoints: (builder) => ({ + getProducts: builder.query({ + query: ({ page = 1, limit = 10 } = {}) => `/admin/products?page=${page}&limit=${limit}`, + providesTags: ["Products"], + }), + }), +}); + +export const { useGetProductsQuery } = productApi; +export default productApi; diff --git a/src/features/products/productSlice.js b/src/features/products/productSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/products/productUtils.js b/src/features/products/productUtils.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/report/customersAPI.js b/src/features/report/customersAPI.js new file mode 100644 index 0000000..69b509a --- /dev/null +++ b/src/features/report/customersAPI.js @@ -0,0 +1,21 @@ +// src/features/reports/customersAPI.js +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const customersApi = createApi({ + reducerPath: "customersApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api", + prepareHeaders: (headers) => { + const token = localStorage.getItem("token"); + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + endpoints: (builder) => ({ + getCustomersReport: builder.query({ + query: () => "/admin/reports/customers", + }), + }), +}); + +export const { useGetCustomersReportQuery } = customersApi; diff --git a/src/features/report/inventoryAPI.js b/src/features/report/inventoryAPI.js new file mode 100644 index 0000000..934a421 --- /dev/null +++ b/src/features/report/inventoryAPI.js @@ -0,0 +1,21 @@ +// src/features/reports/inventoryAPI.js +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const inventoryApi = createApi({ + reducerPath: "inventoryApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api", + prepareHeaders: (headers) => { + const token = localStorage.getItem("token"); + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + endpoints: (builder) => ({ + getInventoryStats: builder.query({ + query: () => "/admin/reports/inventory", + }), + }), +}); + +export const { useGetInventoryStatsQuery } = inventoryApi; diff --git a/src/features/report/ordersAPI.js b/src/features/report/ordersAPI.js new file mode 100644 index 0000000..fcbefd2 --- /dev/null +++ b/src/features/report/ordersAPI.js @@ -0,0 +1,22 @@ +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const ordersApi = createApi({ + reducerPath: "ordersApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api", + prepareHeaders: (headers) => { + const token = localStorage.getItem("token"); + if (token) { + headers.set("Authorization", `Bearer ${token}`); + } + return headers; + }, + }), + endpoints: (builder) => ({ + getOrdersReport: builder.query({ + query: () => "/admin/reports/orders", + }), + }), +}); + +export const { useGetOrdersReportQuery } = ordersApi; diff --git a/src/features/report/salesAPI.js b/src/features/report/salesAPI.js new file mode 100644 index 0000000..46ff03d --- /dev/null +++ b/src/features/report/salesAPI.js @@ -0,0 +1,20 @@ +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const salesApi = createApi({ + reducerPath: "salesApi", + baseQuery: fetchBaseQuery({ + baseUrl: import.meta.env.VITE_API_URL || "http://localhost:5000/api", + prepareHeaders: (headers) => { + const token = localStorage.getItem("token"); + if (token) headers.set("Authorization", `Bearer ${token}`); + return headers; + }, + }), + endpoints: (builder) => ({ + getSalesReport: builder.query({ + query: () => "/admin/reports/sales", + }), + }), +}); + +export const { useGetSalesReportQuery } = salesApi; diff --git a/src/features/users/userAPI.js b/src/features/users/userAPI.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/users/userSlice.js b/src/features/users/userSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js new file mode 100644 index 0000000..e69de29 diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js new file mode 100644 index 0000000..e69de29 diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js new file mode 100644 index 0000000..e69de29 diff --git a/src/hooks/useToast.js b/src/hooks/useToast.js new file mode 100644 index 0000000..e69de29 diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..7cb6bf2 --- /dev/null +++ b/src/index.css @@ -0,0 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + + +body { + font-family: 'Nunito Sans', sans-serif; +} diff --git a/src/layouts/AuthLayout.jsx b/src/layouts/AuthLayout.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/layouts/Layout.jsx b/src/layouts/Layout.jsx new file mode 100644 index 0000000..0478d64 --- /dev/null +++ b/src/layouts/Layout.jsx @@ -0,0 +1,38 @@ +import React, { useState } from "react"; +import Sidebar from "../components/layout/Sidebar"; +import Header from "../components/layout/Header"; + +const Layout = ({ children }) => { + const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); + const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false); + + const toggleSidebar = () => setIsSidebarCollapsed(!isSidebarCollapsed); + const toggleMobileSidebar = () => setMobileSidebarOpen(!mobileSidebarOpen); + + return ( +

+ {/* Sidebar */} + + + {/* Main Content */} +

+ {/* Header */} +

+ + {/* Page content */} +

+ {children} +

+ ); +}; + +export default Layout; diff --git a/src/layouts/ProtectedRoute.jsx b/src/layouts/ProtectedRoute.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..cdf84c0 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,25 @@ +import './index.css'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { Provider } from 'react-redux'; +import { store } from './app/store'; +import { BrowserRouter as Router } from 'react-router-dom'; +import AdminRoutes from './routes/AdminRoutes'; + + +import "@fontsource/nunito-sans/300.css"; +import "@fontsource/nunito-sans/400.css"; +import "@fontsource/nunito-sans/600.css"; +import "@fontsource/nunito-sans/700.css"; + + + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + + + + +); diff --git a/src/pages/Analytics/AnalyticsPage.jsx b/src/pages/Analytics/AnalyticsPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Analytics/RevenueChart.jsx b/src/pages/Analytics/RevenueChart.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Auth/ForgotPassword.jsx b/src/pages/Auth/ForgotPassword.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Auth/LoginPage.jsx b/src/pages/Auth/LoginPage.jsx new file mode 100644 index 0000000..f7392e9 --- /dev/null +++ b/src/pages/Auth/LoginPage.jsx @@ -0,0 +1,109 @@ +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { login } from "../../features/auth/authSlice"; +import { useNavigate } from "react-router-dom"; +import { Eye, EyeOff } from "lucide-react"; + +const LoginPage = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { loading, error } = useSelector((state) => state.auth); + + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [showPassword, setShowPassword] = useState(false); + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + await dispatch(login({ email, password })).unwrap(); + navigate("/dashboard"); + } catch (err) { + console.error("Login failed:", err); + } + }; + + return ( +

+ {/* Logo Section */} +

Welcome Back

+ Login to your admin panel +

+ + {error && ( +

+ {error} +

+ )} + + {/* Login Form */} + + + {/* Footer */} +

+ ); +}; + +export default LoginPage; diff --git a/src/pages/Auth/RegisterPage.jsx b/src/pages/Auth/RegisterPage.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Categories/CategoryDetails.jsx b/src/pages/Categories/CategoryDetails.jsx new file mode 100644 index 0000000..1d6feaf --- /dev/null +++ b/src/pages/Categories/CategoryDetails.jsx @@ -0,0 +1,110 @@ +import React from "react"; +import { useParams, Link } from "react-router-dom"; +import { ArrowLeft } from "lucide-react"; +import { useGetCategoryByIdQuery } from "../../features/categories/categoryAPI"; + +const CategoryDetails = () => { + const { id } = useParams(); + const { data, isLoading } = useGetCategoryByIdQuery(id); + + const category = data?.data; + + if (isLoading) { + return ( +

+ Loading category details... +

+ ); + } + + if (!category) { + return ( +

Category not found!

+ ); + } + + return ( +

+ {/* Back */} +

+ + + Back to Categories + +

+ + {/* Header */} +

{category.name}

{category.slug}

+ + + {category.isActive ? "Active" : "Inactive"} + +

+ + {/* Info Grid */} +

+ {/* Category Info */} +

+ Category Information +

+ + + + + + +

+ + {/* Meta & Dates */} +

System Info

+ + + + +

+ + {/* Image */} + {category.image && ( +

+ Category Image +

+ +

+ )} +

+ ); +}; + +const InfoRow = ({ label, value }) => ( +

+ {label}: + {value} +

+); + +export default CategoryDetails; diff --git a/src/pages/Categories/CategoryEdit.jsx b/src/pages/Categories/CategoryEdit.jsx new file mode 100644 index 0000000..a51a744 --- /dev/null +++ b/src/pages/Categories/CategoryEdit.jsx @@ -0,0 +1,248 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate, useParams, Link } from "react-router-dom"; +import { ArrowLeft } from "lucide-react"; +import { + useGetCategoryByIdQuery, + useUpdateCategoryMutation, +} from "../../features/categories/categoryAPI"; + +const CategoryEdit = () => { + const { id } = useParams(); + const navigate = useNavigate(); + + const { data, isLoading } = useGetCategoryByIdQuery(id); + const [updateCategory, { isLoading: isUpdating }] = + useUpdateCategoryMutation(); + + const [form, setForm] = useState({ + name: "", + description: "", + metaTitle: "", + metaDescription: "", + }); + + const [previewImage, setPreviewImage] = useState(null); + const [selectedFile, setSelectedFile] = useState(null); + + useEffect(() => { + if (data?.data) { + const { name, description, image, metaTitle, metaDescription } = + data.data; + + setForm({ name, description, metaTitle, metaDescription }); + setPreviewImage(image); // show existing image + } + }, [data]); + + const handleChange = (e) => { + const { name, value } = e.target; + setForm((prev) => ({ ...prev, [name]: value })); + }; + + const handleImageChange = (e) => { + const file = e.target.files[0]; + if (file) { + setSelectedFile(file); + setPreviewImage(URL.createObjectURL(file)); + } + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + const formData = new FormData(); + + formData.append("name", form.name); + formData.append("description", form.description); + formData.append("metaTitle", form.metaTitle); + formData.append("metaDescription", form.metaDescription); + + if (selectedFile) { + formData.append("image", selectedFile); + } + + await updateCategory({ id, data: formData }).unwrap(); + + alert("Category updated successfully!"); + navigate("/categories"); + } catch (error) { + console.error(error); + alert("Failed to update category"); + } + }; + + if (isLoading) { + return

Loading category...

; + } + + return ( +

+ {/* Header */} +

+ + + Back to Categories + + +

+ Edit Category +

+ + {/* Glass Card */} +

+ {/* SECTION 1 */} +

+ Basic Information +

+ +

+ + + +

+ +

+ + + +

+ + {/* SECTION 2 - IMAGE */} +

+ Category Image +

+ +

+ {/* Preview Card */} +

+ {previewImage ? ( + <> + Preview

+ Change Image +

+ + ) : ( +

+ No Image +

+ )} +

+ + {/* Upload Button */} + +

+ Upload New Image +

+ + +

+ + {/* Submit */} +

+ +

+ ); +}; + +const FloatingInput = ({ label, name, value, onChange, required }) => ( +

+ + + {label} + +

+); + +const FloatingTextarea = ({ label, name, value, onChange }) => ( +

+    <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;
diff --git a/src/pages/Categories/CategoryForm.jsx b/src/pages/Categories/CategoryForm.jsx
new file mode 100644
index 0000000..3c4f806
--- /dev/null
+++ b/src/pages/Categories/CategoryForm.jsx
@@ -0,0 +1,624 @@
+// import React, { useState } from "react";
+// import { FiTag, FiAlignLeft, FiLayers, FiImage, FiType } from "react-icons/fi";
+// import {
+//   useAddCategoryMutation,
+//   useGetCategoryTreeQuery,
+// } from "../../features/categories/categoryAPI";
+
+// const AddCategoryPage = () => {
+//   const [form, setForm] = useState({
+//     name: "",
+//     description: "",
+//     image: "",
+//     parentId: "",
+//     metaTitle: "",
+//     metaDescription: "",
+//   });
+
+//   const { data, isLoading: loadingCategories } = useGetCategoryTreeQuery();
+//   const [addCategory, { isLoading: adding }] = useAddCategoryMutation();
+//   const categories = data?.data || [];
+
+//   const handleChange = (e) =>
+//     setForm({ ...form, [e.target.name]: e.target.value });
+
+//   const handleSubmit = async (e) => {
+//     e.preventDefault();
+//     try {
+//       const result = await addCategory({
+//         ...form,
+//         parentId: form.parentId || null,
+//       }).unwrap();
+//       console.log("Category added:", result);
+//       alert("Category added successfully!");
+//       // setForm({ name: "", description: "", parentId: "" });
+//       setForm({
+//         name: "",
+//         description: "",
+//         image: "",
+//         parentId: "",
+//         metaTitle: "",
+//         metaDescription: "",
+//       });
+//     } catch (err) {
+//       console.error("RTK Query error:", err);
+//       const errorMsg =
+//         err?.data?.message || // if server returned { message: "..." }
+//         err?.error || // if network/fetch error
+//         JSON.stringify(err) ||
+//         "Unknown error";
+//       alert("Error adding category: " + errorMsg);
+//     }
+//   };
+
+//   // Flatten categories tree for dropdown
+//   const flattenCategories = (nodes, level = 0) => {
+//     let list = [];
+//     nodes.forEach((node) => {
+//       list.push({ ...node, level });
+//       if (node.children?.length) {
+//         list = list.concat(flattenCategories(node.children, level + 1));
+//       }
+//     });
+//     return list;
+//   };
+
+//   const flatCategories = flattenCategories(categories);
+
+//   return (
+//     <div className="p-6 md:p-12 min-h-screen flex justify-center items-start">
+//       <div className="w-full max-w-2xl bg-white rounded-2xl shadow-2xl p-10 relative">
+//         <h2 className="text-3xl font-bold text-center text-blue-600 mb-8">
+//           <FiLayers className="inline mr-2" /> Add New Category
+//         </h2>
+
+//         <form onSubmit={handleSubmit} className="space-y-6">
+//           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+//             {/* Category Name */}
+//             <div className="flex items-center gap-3 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <FiTag className="text-gray-400 text-xl" />
+//               <input
+//                 type="text"
+//                 name="name"
+//                 value={form.name}
+//                 onChange={handleChange}
+//                 placeholder="Category Name"
+//                 required
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               />
+//             </div>
+
+//             {/* Image URL */}
+//             <div className="flex items-center gap-3 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <FiImage className="text-gray-400 text-xl" />
+//               <input
+//                 type="text"
+//                 name="image"
+//                 value={form.image}
+//                 onChange={handleChange}
+//                 placeholder="Image URL"
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               />
+//             </div>
+
+//             {/* Meta Title */}
+//             <div className="flex items-center gap-3 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <FiType className="text-gray-400 text-xl" />
+//               <input
+//                 type="text"
+//                 name="metaTitle"
+//                 value={form.metaTitle}
+//                 onChange={handleChange}
+//                 placeholder="Meta Title"
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               />
+//             </div>
+
+//             {/* Parent Category */}
+//             <div className="flex flex-col gap-2 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//               <label className="text-gray-500 font-medium flex items-center gap-2">
+//                 <FiLayers /> Parent Category
+//               </label>
+//               <select
+//                 name="parentId"
+//                 value={form.parentId}
+//                 onChange={handleChange}
+//                 className="w-full outline-none text-gray-700 font-medium"
+//               >
+//                 <option value="">No Parent (Main Category)</option>
+//                 {loadingCategories ? (
+//                   <option disabled>Loading...</option>
+//                 ) : (
+//                   flatCategories.map((cat) => (
+//                     <option key={cat.id} value={cat.id}>
+//                       {"-".repeat(cat.level * 2)} {cat.name}
+//                     </option>
+//                   ))
+//                 )}
+//               </select>
+//             </div>
+//           </div>
+
+//           {/* Description (full width) */}
+//           <div className="flex flex-col gap-2 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//             <label className="text-gray-500 font-medium flex items-center gap-2">
+//               <FiAlignLeft /> Description
+//             </label>
+//             <textarea
+//               name="description"
+//               value={form.description}
+//               onChange={handleChange}
+//               rows={4}
+//               placeholder="Category description"
+//               className="w-full outline-none text-gray-700 font-medium resize-none"
+//             />
+//           </div>
+
+//           {/* Meta Description (full width) */}
+//           <div className="flex flex-col gap-2 border rounded-xl p-3 focus-within:ring-2 focus-within:ring-blue-400 transition">
+//             <label className="text-gray-500 font-medium flex items-center gap-2">
+//               <FiAlignLeft /> Meta Description
+//             </label>
+//             <textarea
+//               name="metaDescription"
+//               value={form.metaDescription}
+//               onChange={handleChange}
+//               rows={3}
+//               placeholder="Meta Description"
+//               className="w-full outline-none text-gray-700 font-medium resize-none"
+//             />
+//           </div>
+
+//           <button
+//             type="submit"
+//             disabled={adding}
+//             className="w-full bg-blue-600 text-white py-3 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-all shadow-md hover:shadow-lg"
+//           >
+//             {adding ? "Adding..." : "Add Category"}
+//           </button>
+//         </form>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default AddCategoryPage;
+
+
+
+// import React, { useState } from "react";
+// import {
+//   useAddCategoryMutation,
+//   useGetCategoryTreeQuery,
+// } from "../../features/categories/categoryAPI";
+
+// const AddCategoryPage = () => {
+//   const [form, setForm] = useState({
+//     name: "",
+//     description: "",
+//     image: "",
+//     parentId: "",
+//     metaTitle: "",
+//     metaDescription: "",
+//   });
+
+//   const { data, isLoading } = useGetCategoryTreeQuery();
+//   const [addCategory, { isLoading: adding }] = useAddCategoryMutation();
+
+//   const categories = data?.data || [];
+
+//   const handleChange = (e) =>
+//     setForm({ ...form, [e.target.name]: e.target.value });
+
+//   const handleSubmit = async (e) => {
+//     e.preventDefault();
+//     await addCategory({
+//       ...form,
+//       parentId: form.parentId || null,
+//     }).unwrap();
+
+//     setForm({
+//       name: "",
+//       description: "",
+//       image: "",
+//       parentId: "",
+//       metaTitle: "",
+//       metaDescription: "",
+//     });
+//   };
+
+//   // Flatten category tree
+//   const flattenCategories = (nodes, level = 0) =>
+//     nodes.flatMap((n) => [
+//       { ...n, level },
+//       ...(n.children ? flattenCategories(n.children, level + 1) : []),
+//     ]);
+
+//   const flatCategories = flattenCategories(categories);
+
+//   return (
+//     <div className="min-h-screen bg-gray-50 flex justify-center py-12 px-4">
+//       <div className="w-full max-w-3xl bg-white rounded-xl shadow-sm border p-8">
+
+//         {/* Header */}
+//         <h2 className="text-2xl font-semibold text-gray-800 mb-1">
+//           Add Category
+//         </h2>
+//         <p className="text-sm text-gray-500 mb-8">
+//           Create main or sub-categories for products
+//         </p>
+
+//         <form onSubmit={handleSubmit} className="space-y-6">
+
+//           {/* Name + Parent */}
+//           <div className="grid md:grid-cols-2 gap-5">
+//             <Input
+//               label="Category Name"
+//               name="name"
+//               value={form.name}
+//               onChange={handleChange}
+//               required
+//             />
+
+//             <Select
+//               label="Parent Category"
+//               name="parentId"
+//               value={form.parentId}
+//               onChange={handleChange}
+//               options={flatCategories}
+//               loading={isLoading}
+//             />
+//           </div>
+
+//           {/* Image */}
+//           <Input
+//             label="Image URL"
+//             name="image"
+//             value={form.image}
+//             onChange={handleChange}
+//           />
+
+//           {/* Description */}
+//           <Textarea
+//             label="Description"
+//             name="description"
+//             value={form.description}
+//             onChange={handleChange}
+//           />
+
+//           {/* SEO */}
+//           <div className="border rounded-lg p-5 bg-gray-50 space-y-5">
+//             <p className="text-sm font-medium text-gray-700">
+//               SEO Settings
+//             </p>
+
+//             <Input
+//               label="Meta Title"
+//               name="metaTitle"
+//               value={form.metaTitle}
+//               onChange={handleChange}
+//             />
+
+//             <Textarea
+//               label="Meta Description"
+//               name="metaDescription"
+//               value={form.metaDescription}
+//               onChange={handleChange}
+//               rows={3}
+//             />
+//           </div>
+
+//           {/* Submit */}
+//           <div className="flex justify-end">
+//             <button
+//               type="submit"
+//               disabled={adding}
+//               className="px-6 py-2.5 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition disabled:opacity-60"
+//             >
+//               {adding ? "Saving..." : "Save Category"}
+//             </button>
+//           </div>
+//         </form>
+//       </div>
+//     </div>
+//   );
+// };
+
+// /* ---------- Reusable Fields ---------- */
+
+// const Input = ({ label, ...props }) => (
+//   <div>
+//     <label className="block text-sm font-medium text-gray-600 mb-1">
+//       {label}
+//     </label>
+//     <input
+//       {...props}
+//       className="w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+//     />
+//   </div>
+// );
+
+// const Textarea = ({ label, rows = 4, ...props }) => (
+//   <div>
+//     <label className="block text-sm font-medium text-gray-600 mb-1">
+//       {label}
+//     </label>
+//     <textarea
+//       {...props}
+//       rows={rows}
+//       className="w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
+//     />
+//   </div>
+// );
+
+// const Select = ({ label, options, loading, ...props }) => (
+//   <div>
+//     <label className="block text-sm font-medium text-gray-600 mb-1">
+//       {label}
+//     </label>
+//     <select
+//       {...props}
+//       className="w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+//     >
+//       <option value="">Main Category</option>
+//       {loading ? (
+//         <option>Loading...</option>
+//       ) : (
+//         options.map((cat) => (
+//           <option key={cat.id} value={cat.id}>
+//             {"—".repeat(cat.level)} {cat.name}
+//           </option>
+//         ))
+//       )}
+//     </select>
+//   </div>
+// );
+
+// export default AddCategoryPage;
+
+
+
+import React, { useState } from "react";
+import {
+  useAddCategoryMutation,
+  useGetCategoryTreeQuery,
+} from "../../features/categories/categoryAPI";
+
+const AddCategoryPage = () => {
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    parentId: "",
+    metaTitle: "",
+    metaDescription: "",
+  });
+
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [previewImage, setPreviewImage] = useState(null);
+
+  const { data, isLoading } = useGetCategoryTreeQuery();
+  const [addCategory, { isLoading: adding }] = useAddCategoryMutation();
+
+  const categories = data?.data || [];
+
+  const handleChange = (e) =>
+    setForm({ ...form, [e.target.name]: e.target.value });
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+      setPreviewImage(URL.createObjectURL(file));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const formData = new FormData();
+
+    formData.append("name", form.name);
+    formData.append("description", form.description);
+    formData.append("parentId", form.parentId || "");
+    formData.append("metaTitle", form.metaTitle);
+    formData.append("metaDescription", form.metaDescription);
+
+    if (selectedFile) {
+      formData.append("image", selectedFile);
+    }
+
+    await addCategory(formData).unwrap();
+
+    // Reset
+    setForm({
+      name: "",
+      description: "",
+      parentId: "",
+      metaTitle: "",
+      metaDescription: "",
+    });
+    setSelectedFile(null);
+    setPreviewImage(null);
+  };
+
+  // Flatten category tree
+  const flattenCategories = (nodes, level = 0) =>
+    nodes.flatMap((n) => [
+      { ...n, level },
+      ...(n.children ? flattenCategories(n.children, level + 1) : []),
+    ]);
+
+  const flatCategories = flattenCategories(categories);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex justify-center py-12 px-4">
+      <div className="w-full max-w-3xl bg-white rounded-2xl shadow-xl border p-8 space-y-8">
+
+        {/* Header */}
+        <div>
+          <h2 className="text-3xl font-bold text-gray-800">
+            Create New Category
+          </h2>
+          <p className="text-sm text-gray-500 mt-1">
+            Organize your products efficiently
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+
+          {/* Name + Parent */}
+          <div className="grid md:grid-cols-2 gap-5">
+            <Input
+              label="Category Name"
+              name="name"
+              value={form.name}
+              onChange={handleChange}
+              required
+            />
+
+            <Select
+              label="Parent Category"
+              name="parentId"
+              value={form.parentId}
+              onChange={handleChange}
+              options={flatCategories}
+              loading={isLoading}
+            />
+          </div>
+
+          {/* Image Upload */}
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-2">
+              Category Image
+            </label>
+
+            <div className="flex items-center gap-6">
+
+              {/* Preview Box */}
+              <div className="w-40 h-40 border-2 border-dashed rounded-xl flex items-center justify-center bg-gray-50 overflow-hidden">
+                {previewImage ? (
+                  <img
+                    src={previewImage}
+                    alt="Preview"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <span className="text-gray-400 text-sm">
+                    No Image Selected
+                  </span>
+                )}
+              </div>
+
+              {/* Upload Button */}
+              <label className="cursor-pointer">
+                <div className="px-6 py-3 bg-blue-600 text-white rounded-xl shadow hover:bg-blue-700 transition font-medium">
+                  Choose Image
+                </div>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageChange}
+                  hidden
+                />
+              </label>
+            </div>
+          </div>
+
+          {/* Description */}
+          <Textarea
+            label="Description"
+            name="description"
+            value={form.description}
+            onChange={handleChange}
+          />
+
+          {/* SEO Section */}
+          <div className="border rounded-xl p-6 bg-gray-50 space-y-5">
+            <p className="text-sm font-semibold text-gray-700">
+              SEO Settings
+            </p>
+
+            <Input
+              label="Meta Title"
+              name="metaTitle"
+              value={form.metaTitle}
+              onChange={handleChange}
+            />
+
+            <Textarea
+              label="Meta Description"
+              name="metaDescription"
+              value={form.metaDescription}
+              onChange={handleChange}
+              rows={3}
+            />
+          </div>
+
+          {/* Submit */}
+          <div className="flex justify-end pt-4 border-t">
+            <button
+              type="submit"
+              disabled={adding}
+              className="px-8 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-60"
+            >
+              {adding ? "Saving..." : "Create Category"}
+            </button>
+          </div>
+
+        </form>
+      </div>
+    </div>
+  );
+};
+
+/* ---------- Reusable Fields ---------- */
+
+const Input = ({ label, ...props }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-600 mb-1">
+      {label}
+    </label>
+    <input
+      {...props}
+      className="w-full rounded-xl border px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+    />
+  </div>
+);
+
+const Textarea = ({ label, rows = 4, ...props }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-600 mb-1">
+      {label}
+    </label>
+    <textarea
+      {...props}
+      rows={rows}
+      className="w-full rounded-xl border px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
+    />
+  </div>
+);
+
+const Select = ({ label, options, loading, ...props }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-600 mb-1">
+      {label}
+    </label>
+    <select
+      {...props}
+      className="w-full rounded-xl border px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+    >
+      <option value="">Main Category</option>
+      {loading ? (
+        <option>Loading...</option>
+      ) : (
+        options.map((cat) => (
+          <option key={cat.id} value={cat.id}>
+            {"—".repeat(cat.level)} {cat.name}
+          </option>
+        ))
+      )}
+    </select>
+  </div>
+);
+
+export default AddCategoryPage;
diff --git a/src/pages/Categories/CategoryList.jsx b/src/pages/Categories/CategoryList.jsx
new file mode 100644
index 0000000..d954a2f
--- /dev/null
+++ b/src/pages/Categories/CategoryList.jsx
@@ -0,0 +1,332 @@
+import React, { useState } from "react";
+import { Switch } from "@headlessui/react";
+import {
+  useGetCategoryTreeQuery,
+  useDeleteCategoryMutation,
+} from "../../features/categories/categoryAPI";
+import {
+  FiEdit,
+  FiTrash2,
+  FiEye,
+  FiPlus,
+  FiGrid,
+  FiLayers,
+  FiTag,
+  FiChevronRight,
+} from "react-icons/fi";
+import { useNavigate } from "react-router-dom";
+import Table from "../../components/common/Table";
+import Pagination from "../../components/common/Pagination";
+import {
+  useUpdateCategoryStatusMutation,
+  useReorderCategoriesMutation,
+} from "../../features/categories/categoryAPI";
+import ConfirmModal from "../../components/common/ConfirmModal";
+
+const CategoryList = () => {
+  const { data, isLoading } = useGetCategoryTreeQuery();
+  const [deleteCategory] = useDeleteCategoryMutation();
+  const [updateCategoryStatus] = useUpdateCategoryStatusMutation();
+  const [reorderCategories] = useReorderCategoriesMutation();
+
+  const [isReorderMode, setIsReorderMode] = useState(false);
+  const [reorderData, setReorderData] = useState([]);
+  const navigate = useNavigate();
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 20;
+
+  // Flatten tree
+  const flatten = (nodes, level = 0) => {
+    let list = [];
+
+    [...nodes]
+      .sort((a, b) => a.sequence - b.sequence) // 🔥 sort here
+      .forEach((node) => {
+        list.push({ ...node, level });
+
+        if (node.children?.length) {
+          list = list.concat(flatten(node.children, level + 1));
+        }
+      });
+
+    return list;
+  };
+
+  const flatCategories = flatten(data?.data || []);
+
+  const startReorder = () => {
+    const topLevel = flatCategories.filter((c) => c.level === 0);
+    setReorderData(topLevel);
+    setIsReorderMode(true);
+  };
+
+  const cancelReorder = () => {
+    setReorderData([]);
+    setIsReorderMode(false);
+  };
+
+  const moveRow = (index, direction) => {
+    const updated = [...reorderData];
+    const targetIndex = direction === "up" ? index - 1 : index + 1;
+
+    if (targetIndex < 0 || targetIndex >= updated.length) return;
+
+    [updated[index], updated[targetIndex]] = [
+      updated[targetIndex],
+      updated[index],
+    ];
+
+    setReorderData(updated);
+  };
+
+  const submitReorder = async () => {
+    const orders = reorderData.map((item, index) => ({
+      id: item.id,
+      sequence: index + 1,
+    }));
+
+    try {
+      await reorderCategories(orders).unwrap();
+      setIsReorderMode(false);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  // Pagination logic
+  const totalPages = Math.ceil(flatCategories.length / perPage);
+  const paginatedData = flatCategories.slice(
+    (currentPage - 1) * perPage,
+    currentPage * perPage
+  );
+
+  // Level label
+  const getLevelLabel = (level) => {
+    if (level === 0) return "Main Category";
+    if (level === 1) return "Sub Category";
+    return "Child";
+  };
+
+  // Level icon
+  const getLevelIcon = (level) => {
+    if (level === 0) return <FiGrid className="text-indigo-600" size={18} />;
+    if (level === 1) return <FiLayers className="text-blue-600" size={18} />;
+    return <FiTag className="text-green-600" size={16} />;
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!selectedCategory) return;
+
+    try {
+      await deleteCategory(selectedCategory.id).unwrap();
+      setShowDeleteModal(false);
+      setSelectedCategory(null);
+    } catch (error) {
+      alert(error?.data?.message || "Failed to delete category");
+    }
+  };
+
+  // Table columns
+  const columns = [
+    {
+      key: "name",
+      label: "Category",
+      render: (value, row) => (
+        <div
+          className="flex items-center gap-2"
+          style={{ marginLeft: `${row.level * 20}px` }}
+        >
+          {row.level > 0 && <FiChevronRight className="text-gray-400" />}
+          {getLevelIcon(row.level)}
+          <span className="font-medium text-gray-800">{row.name}</span>
+        </div>
+      ),
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (_, row) => (
+        <span
+          className={`px-2 py-1 text-xs rounded-full ${
+            row.level === 0
+              ? "bg-indigo-100 text-indigo-700"
+              : row.level === 1
+              ? "bg-blue-100 text-blue-700"
+              : "bg-green-100 text-green-700"
+          }`}
+        >
+          {getLevelLabel(row.level)}
+        </span>
+      ),
+    },
+    { key: "slug", label: "Slug" },
+    // { key: "status", label: "Status" },
+    {
+      key: "status",
+      label: "Status",
+      render: (_, row) => (
+        <Switch
+          checked={row.isActive}
+          onChange={async (val) => {
+            await updateCategoryStatus({ id: row.id, isActive: val });
+          }}
+          className={`${
+            row.isActive ? "bg-green-500" : "bg-gray-300"
+          } relative inline-flex h-6 w-11 items-center rounded-full`}
+        >
+          <span
+            className={`${
+              row.isActive ? "translate-x-6" : "translate-x-1"
+            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+          />
+        </Switch>
+      ),
+    },
+  ];
+
+  // Row action buttons
+  const rowActions = (row) => (
+    <>
+      <button
+        onClick={() => navigate(`/categories/${row.id}`)}
+        className="text-blue-600 hover:text-blue-800"
+      >
+        <FiEye size={18} />
+      </button>
+
+      <button
+        onClick={() => navigate(`/categories/edit/${row.id}`)}
+        className="text-green-600 hover:text-green-800"
+      >
+        <FiEdit size={18} />
+      </button>
+
+      <button
+        onClick={() => {
+          setSelectedCategory(row);
+          setShowDeleteModal(true);
+        }}
+        className="text-red-600 hover:text-red-800"
+      >
+        <FiTrash2 size={18} />
+      </button>
+
+      {/* <button
+        onClick={() => navigate("/categories/reorder")}
+        className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
+      >
+        <FiLayers /> Reorder Categories
+      </button> */}
+    </>
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Categories</h2>
+
+        <div className="flex gap-2">
+          {!isReorderMode && (
+            <>
+              <button
+                onClick={startReorder}
+                className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
+              >
+                <FiLayers /> Reorder Categories
+              </button>
+
+              <button
+                onClick={() => navigate("/categories/add")}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+              >
+                <FiPlus /> Add Category
+              </button>
+            </>
+          )}
+
+          {isReorderMode && (
+            <>
+              <button
+                onClick={submitReorder}
+                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+              >
+                Update Order
+              </button>
+
+              <button
+                onClick={cancelReorder}
+                className="px-4 py-2 bg-gray-300 rounded-lg hover:bg-gray-400"
+              >
+                Cancel
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Table */}
+      {/* <Table
+        columns={columns}
+        data={isLoading ? [] : paginatedData}
+        actions={rowActions}
+      /> */}
+
+      <Table
+        columns={[
+          ...columns,
+          ...(isReorderMode
+            ? [
+                {
+                  key: "reorder",
+                  label: "Reorder",
+                  render: (_, __, index) => (
+                    <div className="flex gap-1">
+                      <button
+                        onClick={() => moveRow(index, "up")}
+                        className="px-2 py-1 bg-gray-200 rounded"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        onClick={() => moveRow(index, "down")}
+                        className="px-2 py-1 bg-gray-200 rounded"
+                      >
+                        ↓
+                      </button>
+                    </div>
+                  ),
+                },
+              ]
+            : []),
+        ]}
+        data={isLoading ? [] : isReorderMode ? reorderData : paginatedData}
+        actions={isReorderMode ? null : rowActions}
+      />
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(pg) => setCurrentPage(pg)}
+      />
+
+      <ConfirmModal
+        isOpen={showDeleteModal}
+        title="Delete Category"
+        message={`Are you sure you want to delete "${selectedCategory?.name}"?`}
+        onCancel={() => {
+          setShowDeleteModal(false);
+          setSelectedCategory(null);
+        }}
+        onConfirm={handleConfirmDelete}
+      />
+    </div>
+  );
+};
+
+export default CategoryList;
diff --git a/src/pages/Categories/ReorderCategories.jsx b/src/pages/Categories/ReorderCategories.jsx
new file mode 100644
index 0000000..fe68b3d
--- /dev/null
+++ b/src/pages/Categories/ReorderCategories.jsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { useGetCategoryTreeQuery, useReorderCategoriesMutation } from "../../features/categories/categoryAPI";
+
+const ReorderCategories = () => {
+  const { data } = useGetCategoryTreeQuery();
+  const [reorderCategories] = useReorderCategoriesMutation();
+  const [categories, setCategories] = useState([]);
+
+  const flattenCategories = (nodes, level = 0) => {
+    let list = [];
+    nodes.forEach((node) => {
+      list.push({ ...node, level });
+      if (node.children?.length) {
+        list = list.concat(flattenCategories(node.children, level + 1));
+      }
+    });
+    return list;
+  };
+
+  useEffect(() => {
+    if (data?.data) setCategories(flattenCategories(data.data));
+  }, [data]);
+
+  const handleDragEnd = async (result) => {
+    if (!result.destination) return;
+
+    const reordered = Array.from(categories);
+    const [moved] = reordered.splice(result.source.index, 1);
+    reordered.splice(result.destination.index, 0, moved);
+
+    setCategories(reordered);
+
+    const updatedOrders = reordered.map((item, index) => ({
+      id: item.id,
+      sequence: index + 1,
+    }));
+
+    try {
+      await reorderCategories(updatedOrders).unwrap();
+      console.log("Category order updated!");
+    } catch (err) {
+      console.error("Failed to reorder:", err);
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <h2 className="text-xl font-semibold mb-4">Reorder Categories</h2>
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId="categories">
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef}>
+              {categories.map((cat, index) => (
+                <Draggable key={cat.id} draggableId={cat.id} index={index}>
+                  {(provided) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      className="p-4 mb-2 border rounded-lg shadow-sm bg-white flex justify-between items-center"
+                    >
+                      <span>{"-".repeat(cat.level * 2)} {cat.name}</span>
+                      <span className="text-gray-400 text-sm">Seq: {index + 1}</span>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};
+
+export default ReorderCategories;
diff --git a/src/pages/Coupons/CouponDetails.jsx b/src/pages/Coupons/CouponDetails.jsx
new file mode 100644
index 0000000..b1e1c98
--- /dev/null
+++ b/src/pages/Coupons/CouponDetails.jsx
@@ -0,0 +1,154 @@
+import { useParams, Link, useNavigate } from "react-router-dom";
+import {
+  useGetCouponByIdQuery,
+  useToggleCouponStatusMutation,
+} from "../../features/coupons/couponAPI";
+import { ArrowLeft, Percent, Calendar, Activity } from "lucide-react";
+import { formatDate } from "../../utils/formatDate";
+
+/* ---------- Status Badge ---------- */
+const StatusBadge = ({ isActive }) => (
+  <span
+    className={`px-3 py-1 rounded-full text-xs font-semibold
+      ${isActive ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}
+  >
+    {isActive ? "ACTIVE" : "INACTIVE"}
+  </span>
+);
+
+/* ---------- Main Component ---------- */
+const CouponDetails = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const {
+    data: coupon,
+    isLoading,
+    isError,
+  } = useGetCouponByIdQuery(id, { skip: !id });
+
+  const [toggleCouponStatus, { isLoading: toggling }] =
+    useToggleCouponStatusMutation();
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading coupon details...
+      </div>
+    );
+  }
+
+  if (isError || !coupon) {
+    return (
+      <div className="text-center py-10 text-red-500">
+        Failed to load coupon details
+      </div>
+    );
+  }
+
+  return (
+   <div className="max-w-7xl mx-auto p-6 space-y-6">
+      {/* Back Button */}
+      <div className="flex items-center gap-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <button onClick={() => navigate(-1)} className="font-medium">
+          Back to Coupons
+        </button>
+      </div>
+
+      {/* Header Card */}
+      <div className="bg-white shadow-lg rounded-2xl p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{coupon.code}</h2>
+          <p className="text-gray-500">{coupon.description}</p>
+          <div className="mt-2">
+            <StatusBadge isActive={coupon.isActive} />
+          </div>
+        </div>
+
+        <div className="text-right space-y-2">
+          <p className="text-2xl font-extrabold text-green-600">
+            {coupon.type === "PERCENTAGE"
+              ? `${coupon.value}% OFF`
+              : `₹${coupon.value} OFF`}
+          </p>
+
+          <button
+            onClick={() => toggleCouponStatus(coupon.id)}
+            disabled={toggling}
+            className={`px-4 py-2 rounded-lg text-sm font-semibold transition
+              ${
+                coupon.isActive
+                  ? "bg-red-100 text-red-700 hover:bg-red-200"
+                  : "bg-green-100 text-green-700 hover:bg-green-200"
+              }`}
+          >
+            {coupon.isActive ? "Deactivate Coupon" : "Activate Coupon"}
+          </button>
+        </div>
+      </div>
+
+      {/* Info Cards */}
+      <div className="grid md:grid-cols-3 gap-6">
+        {/* Discount */}
+        <div className="bg-gradient-to-r from-purple-50 to-purple-100 p-6 rounded-2xl shadow hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-2 flex items-center gap-2">
+            <Percent size={16} /> Discount
+          </h3>
+          <p className="text-xl font-bold text-purple-700">
+            {coupon.type === "PERCENTAGE"
+              ? `${coupon.value}%`
+              : `₹${coupon.value}`}
+          </p>
+          <p className="text-gray-600 text-sm">
+            Min Order: ₹{coupon.minOrderAmount}
+          </p>
+        </div>
+
+        {/* Validity */}
+        <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-2xl shadow hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-2 flex items-center gap-2">
+            <Calendar size={16} /> Validity
+          </h3>
+          <p className="text-gray-800 text-sm">
+            From: {formatDate(coupon.validFrom)}
+          </p>
+          <p className="text-gray-800 text-sm">
+            Till: {formatDate(coupon.validUntil)}
+          </p>
+        </div>
+
+        {/* Usage */}
+        <div className="bg-gradient-to-r from-green-50 to-green-100 p-6 rounded-2xl shadow hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-2 flex items-center gap-2">
+            <Activity size={16} /> Usage
+          </h3>
+          <p className="text-xl font-bold text-green-700">
+            {coupon.usedCount}/{coupon.maxUses}
+          </p>
+          <p className="text-gray-600 text-sm">
+            Remaining: {coupon.remainingUses}
+          </p>
+        </div>
+      </div>
+
+      {/* Extra Info */}
+      <div className="bg-white shadow-lg rounded-2xl p-6 text-sm text-gray-600 grid md:grid-cols-2 gap-4">
+        <div>
+          <b>Created At:</b> {formatDate(coupon.createdAt)}
+        </div>
+        <div>
+          <b>Last Updated:</b> {formatDate(coupon.updatedAt)}
+        </div>
+        <div>
+          <b>Expired:</b> {coupon.isExpired ? "Yes ❌" : "No ✅"}
+        </div>
+        <div>
+          <b>Not Started:</b> {coupon.isNotStarted ? "Yes ⏳" : "No"}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CouponDetails;
diff --git a/src/pages/Coupons/CouponsPage.jsx b/src/pages/Coupons/CouponsPage.jsx
new file mode 100644
index 0000000..966ef03
--- /dev/null
+++ b/src/pages/Coupons/CouponsPage.jsx
@@ -0,0 +1,157 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useGetCouponsQuery,
+  useToggleCouponStatusMutation,
+} from "../../features/coupons/couponAPI";
+import { formatDate } from "../../utils/formatDate";
+
+/* ---------- Badges ---------- */
+
+const StatusBadge = ({ isActive }) => (
+  <span
+    className={`w-[93px] h-[27px] flex items-center justify-center rounded text-xs font-bold
+      ${
+        isActive
+          ? "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]"
+          : "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]"
+      }`}
+  >
+    {isActive ? "ACTIVE" : "INACTIVE"}
+  </span>
+);
+
+const CouponTypeBadge = ({ type }) => (
+  <span
+    className={`w-[110px] h-[27px] flex items-center justify-center rounded text-xs font-bold
+      ${
+        type === "PERCENTAGE"
+          ? "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]"
+          : "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]"
+      }`}
+  >
+    {type}
+  </span>
+);
+
+/* ---------- Toggle Switch ---------- */
+
+const ToggleSwitch = ({ checked, onChange, disabled }) => (
+  <button
+    disabled={disabled}
+    onClick={onChange}
+    className={`relative inline-flex h-6 w-11 items-center rounded-full transition
+      ${checked ? "bg-green-500" : "bg-gray-300"}
+      ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+  >
+    <span
+      className={`inline-block h-4 w-4 transform rounded-full bg-white transition
+        ${checked ? "translate-x-6" : "translate-x-1"}`}
+    />
+  </button>
+);
+
+/* ---------- Main Component ---------- */
+
+const CouponsList = () => {
+  const navigate = useNavigate();
+
+  const { data: list = [], isLoading, isError } = useGetCouponsQuery();
+  const [toggleCouponStatus, { isLoading: toggling }] =
+    useToggleCouponStatusMutation();
+
+  if (isLoading) {
+    return <div className="text-center py-10">Loading coupons...</div>;
+  }
+
+  if (isError) {
+    return (
+      <div className="text-center py-10 text-red-500">
+        Failed to load coupons
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-gray-600">All Coupons</h1>
+        <button
+          onClick={() => navigate("/create")}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium"
+        >
+          + Add Coupon
+        </button>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto bg-white rounded-2xl shadow border">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 uppercase text-xs font-medium">
+            <tr>
+              <th className="px-6 py-3">Code</th>
+              <th className="px-6 py-3">Type</th>
+              <th className="px-6 py-3">Value</th>
+              <th className="px-6 py-3">Min Order</th>
+              <th className="px-6 py-3">Usage</th>
+              <th className="px-6 py-3">Valid Till</th>
+              <th className="px-6 py-3">Status</th>
+              <th className="px-6 py-3 text-center">Toggle</th>
+              <th className="px-6 py-3 text-center">Actions</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {list.map((coupon) => (
+              <tr key={coupon.id} className="border-t hover:bg-gray-50">
+                <td className="px-6 py-3 font-medium">{coupon.code}</td>
+
+                <td className="px-6 py-3">
+                  <CouponTypeBadge type={coupon.type} />
+                </td>
+
+                <td className="px-6 py-3 font-semibold text-green-600">
+                  {coupon.type === "PERCENTAGE"
+                    ? `${coupon.value}%`
+                    : `₹${coupon.value}`}
+                </td>
+
+                <td className="px-6 py-3">₹{coupon.minOrderAmount}</td>
+
+                <td className="px-6 py-3">
+                  {coupon.usedCount}/{coupon.maxUses}
+                </td>
+
+                <td className="px-6 py-3">{formatDate(coupon.validUntil)}</td>
+
+                <td className="px-6 py-3">
+                  <StatusBadge isActive={coupon.isActive} />
+                </td>
+
+                {/* ✅ TOGGLE */}
+                <td className="px-6 py-3 text-center">
+                  <ToggleSwitch
+                    checked={coupon.isActive}
+                    disabled={toggling}
+                    onChange={() => toggleCouponStatus(coupon.id)}
+                  />
+                </td>
+                <td className="px-6 py-3 text-right">
+                  <button
+                    onClick={() => navigate(`/coupons/${coupon.id}`)}
+                    className="text-blue-600 hover:underline"
+                  >
+                    View
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default CouponsList;
diff --git a/src/pages/Coupons/CreateCoupon.jsx b/src/pages/Coupons/CreateCoupon.jsx
new file mode 100644
index 0000000..6ca7844
--- /dev/null
+++ b/src/pages/Coupons/CreateCoupon.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCreateCouponMutation } from "../../features/coupons/couponAPI";
+
+const CreateCoupon = () => {
+  const navigate = useNavigate();
+
+  // RTK Query mutation
+  const [createCoupon, { isLoading }] = useCreateCouponMutation();
+
+  const [form, setForm] = useState({
+    code: "",
+    description: "",
+    type: "PERCENTAGE",
+    value: "",
+    minOrderAmount: "",
+    maxUses: "",
+    validFrom: "",
+    validUntil: "",
+  });
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      await createCoupon({
+        ...form,
+        value: Number(form.value),
+        minOrderAmount: Number(form.minOrderAmount || 0),
+        maxUses: Number(form.maxUses || 0),
+      }).unwrap();
+
+      // redirect after success
+      navigate("/admin/coupons");
+    } catch (error) {
+      console.error("Failed to create coupon:", error);
+    }
+  };
+
+  return (
+    <div className="flex justify-center mt-5 px-4">
+      <div className="w-full max-w-3xl space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold text-gray-600">
+            Create Coupon
+          </h1>
+          <button
+            onClick={() => navigate("/admin/coupons")}
+            className="text-sm text-gray-500 hover:text-gray-700"
+          >
+            ← Back
+          </button>
+        </div>
+
+        {/* Form Card */}
+        <div className="bg-white rounded-2xl border border-[#B9B9B9] p-6 shadow-sm">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {/* Coupon Code */}
+            <input
+              name="code"
+              placeholder="Coupon Code"
+              value={form.code}
+              className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={handleChange}
+              required
+            />
+
+            {/* Description */}
+            <input
+              name="description"
+              placeholder="Description"
+              value={form.description}
+              className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={handleChange}
+            />
+
+            {/* Type & Value */}
+            <div className="flex gap-4">
+              <select
+                name="type"
+                value={form.type}
+                className="w-1/2 border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              >
+                <option value="PERCENTAGE">Percentage</option>
+                <option value="FLAT">Flat</option>
+              </select>
+
+              <input
+                name="value"
+                type="number"
+                placeholder="Value"
+                value={form.value}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            {/* Min Order & Max Uses */}
+            <div className="flex gap-4">
+              <input
+                name="minOrderAmount"
+                type="number"
+                placeholder="Min Order Amount"
+                value={form.minOrderAmount}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+
+              <input
+                name="maxUses"
+                type="number"
+                placeholder="Max Uses"
+                value={form.maxUses}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+            </div>
+
+            {/* Valid Dates */}
+            <div className="flex gap-4">
+              <input
+                name="validFrom"
+                type="date"
+                value={form.validFrom}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+              <input
+                name="validUntil"
+                type="date"
+                value={form.validUntil}
+                className="w-1/2 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={handleChange}
+              />
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-end gap-3 pt-4">
+              <button
+                type="button"
+                onClick={() => navigate("/admin/coupons")}
+                className="px-4 py-2 rounded-lg border hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
+              >
+                {isLoading ? "Creating..." : "Create Coupon"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateCoupon;
diff --git a/src/pages/Dashboard/CouponStats.jsx b/src/pages/Dashboard/CouponStats.jsx
new file mode 100644
index 0000000..4fed6a5
--- /dev/null
+++ b/src/pages/Dashboard/CouponStats.jsx
@@ -0,0 +1,97 @@
+import { useSelector } from "react-redux";
+import {
+  HiOutlineTicket,
+  HiOutlineCheckCircle,
+  HiOutlineXCircle,
+  HiOutlineLightningBolt,
+} from "react-icons/hi";
+
+const CouponStats = () => {
+  const { couponStats, loading } = useSelector((state) => state.dashboard);
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse grid grid-cols-1 md:grid-cols-4 gap-6">
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="h-32 rounded-xl bg-gray-200" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!couponStats) return null;
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-800">
+          Coupon Statistics 🎟️
+        </h1>
+        <p className="text-gray-500 text-sm mt-1">
+          Overview of coupon usage and performance
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
+        <StatCard
+          title="Total Coupons"
+          value={couponStats.totalCoupons}
+          icon={HiOutlineTicket}
+          gradient="from-indigo-500 to-purple-600"
+        />
+        <StatCard
+          title="Active Coupons"
+          value={couponStats.activeCoupons}
+          icon={HiOutlineCheckCircle}
+          gradient="from-emerald-500 to-green-600"
+        />
+        <StatCard
+          title="Expired Coupons"
+          value={couponStats.expiredCoupons}
+          icon={HiOutlineXCircle}
+          gradient="from-rose-500 to-red-600"
+        />
+        <StatCard
+          title="Total Redemptions"
+          value={couponStats.totalRedemptions}
+          icon={HiOutlineLightningBolt}
+          gradient="from-amber-500 to-orange-600"
+        />
+      </div>
+    </div>
+  );
+};
+
+/* =========================
+   Reusable Stat Card
+========================= */
+
+const StatCard = ({ title, value, icon: Icon, gradient }) => {
+  return (
+    <div
+      className={`
+        relative overflow-hidden rounded-2xl p-5 text-white
+        bg-gradient-to-br ${gradient}
+        shadow-lg hover:shadow-2xl
+        transform transition-all duration-300 hover:-translate-y-1
+      `}
+    >
+      {/* Icon */}
+      <div className="absolute right-4 top-4 opacity-20">
+        <Icon size={64} />
+      </div>
+
+      <p className="text-sm font-medium opacity-90">{title}</p>
+      <p className="text-3xl font-bold mt-3">{value}</p>
+
+      {/* Decorative Glow */}
+      <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-white/10 rounded-full blur-2xl" />
+    </div>
+  );
+};
+
+export default CouponStats;
diff --git a/src/pages/Dashboard/DashboardPage.jsx b/src/pages/Dashboard/DashboardPage.jsx
new file mode 100644
index 0000000..c3cdb41
--- /dev/null
+++ b/src/pages/Dashboard/DashboardPage.jsx
@@ -0,0 +1,1195 @@
+// import React, { useEffect } from "react";
+// import { useDispatch, useSelector } from "react-redux";
+// import {
+//   fetchDashboard,
+//   fetchCouponStats,
+// } from "../../features/dashboard/dashboardSlice";
+// import {
+//   AreaChart,
+//   Area,
+//   BarChart,
+//   Bar,
+//   PieChart,
+//   Pie,
+//   Cell,
+//   XAxis,
+//   YAxis,
+//   Tooltip,
+//   CartesianGrid,
+//   ResponsiveContainer,
+//   Legend,
+// } from "recharts";
+// import { useNavigate } from "react-router-dom";
+
+// const Dashboard = () => {
+//   const dispatch = useDispatch();
+//   const navigate = useNavigate();
+//   const { stats, couponStats, loading, error } = useSelector(
+//     (state) => state.dashboard
+//   );
+
+//   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 = stats.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 = stats.topProducts.find(
+//       (p) => p._id === order.items[0]?.productId
+//     );
+
+//     return product?.name || order.items[0]?.productName || "Product";
+//   };
+
+//   useEffect(() => {
+//     dispatch(fetchDashboard());
+//     dispatch(fetchCouponStats());
+//   }, [dispatch]);
+
+//   if (loading)
+//     return (
+//       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+//         <div className="text-center">
+//           <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-[#704F38] mx-auto"></div>
+//           <p className="mt-4 text-gray-600 font-semibold">
+//             Loading Dashboard...
+//           </p>
+//         </div>
+//       </div>
+//     );
+
+//   if (error)
+//     return (
+//       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 to-red-100">
+//         <div className="bg-white p-8 rounded-2xl shadow-xl">
+//           <div className="text-red-600 text-xl font-bold">{error}</div>
+//         </div>
+//       </div>
+//     );
+
+//   if (!stats)
+//     return (
+//       <div className="flex items-center justify-center min-h-screen">
+//         <div className="text-gray-500 text-xl">No data available</div>
+//       </div>
+//     );
+
+//   // Calculate growth percentages
+//   const orderGrowth = stats.charts?.monthlyComparison?.growth?.orders || 0;
+//   const revenueGrowth = stats.charts?.monthlyComparison?.growth?.revenue || 0;
+
+//   return (
+//     <div className="space-y-6 min-h-screen p-2">
+//       <div className="max-w-[1600px] mx-auto space-y-8">
+//         {/* Header Section */}
+//         <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+//           <div>
+//             <h1 className="text-2xl font-bold text-gray-600 tracking-tight">
+//               Dashboard
+//             </h1>
+//             <p className="text-gray-500 mt-2">
+//               Welcome back! Here's what's happening with your store.
+//             </p>
+//           </div>
+//           <div className="flex items-center gap-3">
+//             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
+//               <p className="text-xs text-gray-500">Current Month</p>
+//               <p className="font-bold text-gray-900">
+//                 {stats.charts?.monthlyComparison?.currentMonth?.label}
+//               </p>
+//             </div>
+//             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
+//               <p className="text-xs text-gray-500">Today</p>
+//               <p className="font-semibold text-gray-900">
+//                 {new Date().toLocaleDateString("en-US", {
+//                   month: "short",
+//                   day: "numeric",
+//                 })}
+//               </p>
+//             </div>
+//           </div>
+//         </div>
+
+//         {/* Stats Cards Grid */}
+//         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+//           {/* Total Users Card */}
+//           <div className="group bg-gradient-to-br from-white to-[#FAF7F5] 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">
+//                   Total Users
+//                 </p>
+//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
+//                   {stats.totalUsers}
+//                 </p>
+//               </div>
+//               <div className="bg-gradient-to-br from-[#F5ECE6] to-[#E8D5C4] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
+//                 <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>
+//               </div>
+//             </div>
+//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
+//               <span className="text-xs text-gray-600">Active users</span>
+//             </div>
+//           </div>
+
+//           {/* Total Orders Card */}
+//           <div className="group bg-gradient-to-br from-white to-[#E7F3FF] 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">
+//                   Total Orders
+//                 </p>
+//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
+//                   {stats.totalOrders}
+//                 </p>
+//               </div>
+//               <div className="bg-gradient-to-br from-[#E7F3FF] to-[#C2DFFF] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
+//                 <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>
+//               </div>
+//             </div>
+//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
+//               <div className="flex items-center gap-1">
+//                 <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>
+//               </div>
+//               <p className="text-sm text-gray-600">vs last month</p>
+//             </div>
+//           </div>
+
+//           {/* Total Products Card */}
+//           <div className="group bg-gradient-to-br from-white to-[#FFF3E6] 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">
+//                   Total Products
+//                 </p>
+//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
+//                   {stats.inventory?.totalProducts || stats.totalProducts}
+//                 </p>
+//               </div>
+//               <div className="bg-gradient-to-br from-[#FFF3E6] to-[#FFE4B8] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
+//                 <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>
+//               </div>
+//             </div>
+//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
+//               <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>
+//           </div>
+
+//           {/* Total Coupons Card */}
+//           <div className="group bg-gradient-to-br from-white to-[#EAF1FF] 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">
+//                   Total Coupons
+//                 </p>
+//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
+//                   {couponStats?.totalCoupons ?? 0}
+//                 </p>
+//               </div>
+//               <div className="bg-gradient-to-br from-[#EAF1FF] to-[#C7D7FE] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
+//                 <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>
+//               </div>
+//             </div>
+//             <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
+//               <p className="text-sm font-bold text-green-600">
+//                 Active: {couponStats?.activeCoupons ?? 0}
+//               </p>
+//               <button
+//                 onClick={() => navigate("/coupon-stats")}
+//                 className="text-blue-600 hover:text-blue-800 transition font-semibold"
+//               >
+//                 View →
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+
+//         {/* 🆕 Inventory Status Cards */}
+//         {stats.inventory && (
+//           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+//             <div className="bg-green-50 border border-green-200 rounded-xl p-4">
+//               <div className="flex items-center justify-between">
+//                 <div>
+//                   <p className="text-xs text-green-600 font-semibold uppercase">
+//                     In Stock
+//                   </p>
+//                   <p className="text-2xl font-bold text-green-700 mt-1">
+//                     {stats.inventory.inStock}
+//                   </p>
+//                 </div>
+//                 <div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center">
+//                   <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>
+//                 </div>
+//               </div>
+//             </div>
+
+//             <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
+//               <div className="flex items-center justify-between">
+//                 <div>
+//                   <p className="text-xs text-yellow-600 font-semibold uppercase">
+//                     Low Stock
+//                   </p>
+//                   <p className="text-2xl font-bold text-yellow-700 mt-1">
+//                     {stats.inventory.lowStock}
+//                   </p>
+//                 </div>
+//                 <div className="bg-yellow-100 w-12 h-12 rounded-lg flex items-center justify-center">
+//                   <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>
+//                 </div>
+//               </div>
+//             </div>
+
+//             <div className="bg-orange-50 border border-orange-200 rounded-xl p-4">
+//               <div className="flex items-center justify-between">
+//                 <div>
+//                   <p className="text-xs text-orange-600 font-semibold uppercase">
+//                     Critical
+//                   </p>
+//                   <p className="text-2xl font-bold text-orange-700 mt-1">
+//                     {stats.inventory.criticalStock}
+//                   </p>
+//                 </div>
+//                 <div className="bg-orange-100 w-12 h-12 rounded-lg flex items-center justify-center">
+//                   <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>
+//                 </div>
+//               </div>
+//             </div>
+
+//             <div className="bg-red-50 border border-red-200 rounded-xl p-4">
+//               <div className="flex items-center justify-between">
+//                 <div>
+//                   <p className="text-xs text-red-600 font-semibold uppercase">
+//                     Out of Stock
+//                   </p>
+//                   <p className="text-2xl font-bold text-red-700 mt-1">
+//                     {stats.inventory.outOfStock}
+//                   </p>
+//                 </div>
+//                 <div className="bg-red-100 w-12 h-12 rounded-lg flex items-center justify-center">
+//                   <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>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         )}
+
+//         {/* Charts Row */}
+//         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+//           {/* Orders Overview Chart - Takes 2 columns */}
+//           <div className="lg:col-span-2 bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
+//             <div className="flex items-center 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>
+//             </div>
+
+//             <ResponsiveContainer width="100%" height={300}>
+//               <AreaChart data={stats.charts?.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>
+
+//           {/* Orders by Status - Pie Chart */}
+//           <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
+//             <div className="mb-6">
+//               <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>
+
+//             <ResponsiveContainer width="100%" height={300}>
+//               <PieChart>
+//                 <Pie
+//                   data={stats.charts?.ordersByStatus || []}
+//                   cx="50%"
+//                   cy="50%"
+//                   labelLine={false}
+//                   label={({ label, percent }) =>
+//                     `${label} ${(percent * 100).toFixed(0)}%`
+//                   }
+//                   outerRadius={80}
+//                   fill="#8884d8"
+//                   dataKey="count"
+//                 >
+//                   {(stats.charts?.ordersByStatus || []).map((entry, index) => (
+//                     <Cell key={`cell-${index}`} fill={entry.color} />
+//                   ))}
+//                 </Pie>
+//                 <Tooltip />
+//               </PieChart>
+//             </ResponsiveContainer>
+
+//             <div className="mt-4 space-y-2">
+//               {(stats.charts?.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 }}
+//                     ></div>
+//                     <span className="text-gray-700">{status.label}</span>
+//                   </div>
+//                   <span className="font-semibold text-gray-900">
+//                     {status.count}
+//                   </span>
+//                 </div>
+//               ))}
+//             </div>
+//           </div>
+//         </div>
+
+//         {/* Monthly Comparison Cards */}
+//         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+//           <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">
+//                     {stats.charts?.monthlyComparison?.currentMonth?.label}
+//                   </p>
+//                   <p className="text-3xl font-bold text-blue-600">
+//                     {stats.charts?.monthlyComparison?.currentMonth?.orders || 0}
+//                   </p>
+//                 </div>
+//                 <div className="text-right">
+//                   <p className="text-sm text-gray-500">
+//                     {stats.charts?.monthlyComparison?.previousMonth?.label}
+//                   </p>
+//                   <p className="text-2xl font-semibold text-gray-400">
+//                     {stats.charts?.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>
+
+//           <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">
+//                     {stats.charts?.monthlyComparison?.currentMonth?.label}
+//                   </p>
+//                   <p className="text-3xl font-bold text-green-600">
+//                     ₹
+//                     {(
+//                       stats.charts?.monthlyComparison?.currentMonth?.revenue ||
+//                       0
+//                     ).toLocaleString()}
+//                   </p>
+//                 </div>
+//                 <div className="text-right">
+//                   <p className="text-sm text-gray-500">
+//                     {stats.charts?.monthlyComparison?.previousMonth?.label}
+//                   </p>
+//                   <p className="text-2xl font-semibold text-gray-400">
+//                     ₹
+//                     {(
+//                       stats.charts?.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>
+
+//         {/* Recent Orders Section */}
+//         <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 {stats.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">
+//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
+//                     Order Details
+//                   </th>
+//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
+//                     Customer
+//                   </th>
+//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
+//                     Amount
+//                   </th>
+//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
+//                     Status
+//                   </th>
+//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
+//                     Payment
+//                   </th>
+//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
+//                     Date
+//                   </th>
+//                 </tr>
+//               </thead>
+
+//               <tbody className="divide-y divide-gray-200">
+//                 {stats.recentOrders?.map((order, index) => (
+//                   <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
+//                         ${
+//                           order.status === "DELIVERED"
+//                             ? "bg-green-100 text-green-700 ring-1 ring-green-200"
+//                             : order.status === "PENDING"
+//                               ? "bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200"
+//                               : order.status === "SHIPPED"
+//                                 ? "bg-blue-100 text-blue-700 ring-1 ring-blue-200"
+//                                 : order.status === "CANCELLED"
+//                                   ? "bg-red-100 text-red-700 ring-1 ring-red-200"
+//                                   : "bg-purple-100 text-purple-700 ring-1 ring-purple-200"
+//                         }`}
+//                       >
+//                         <span
+//                           className={`w-2 h-2 rounded-full ${
+//                             order.status === "DELIVERED"
+//                               ? "bg-green-500"
+//                               : order.status === "PENDING"
+//                                 ? "bg-yellow-500"
+//                                 : order.status === "SHIPPED"
+//                                   ? "bg-blue-500"
+//                                   : order.status === "CANCELLED"
+//                                     ? "bg-red-500"
+//                                     : "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>
+
+//           {(!stats.recentOrders || stats.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>
+
+//         {/* 🆕 Top Products Section with Enhanced Data */}
+//         <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">
+//             {stats.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>
+
+//                 {/* Stock Status 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>
+
+//                   {/* 🆕 Sales Info */}
+//                   <div className="space-y-1 pt-2 border-t border-gray-200">
+//                     <div className="flex items-center justify-between text-xs">
+//                       <span className="text-gray-500">Sold:</span>
+//                       <span className="font-bold text-gray-900">
+//                         {product.totalSold} units
+//                       </span>
+//                     </div>
+//                     <div className="flex items-center justify-between text-xs">
+//                       <span className="text-gray-500">Orders:</span>
+//                       <span className="font-bold text-gray-900">
+//                         {product.totalOrders}
+//                       </span>
+//                     </div>
+//                     <div className="flex items-center justify-between text-xs">
+//                       <span className="text-gray-500">Revenue:</span>
+//                       <span className="font-bold text-green-600">
+//                         ₹{product.revenue.toLocaleString()}
+//                       </span>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//             ))}
+//           </div>
+//         </div>
+
+//         {/* 🆕 Low Stock Alert Section */}
+//         {stats.lowStockProducts && stats.lowStockProducts.length > 0 && (
+//           <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">
+//                   {stats.lowStockProducts.length} products need restocking
+//                 </p>
+//               </div>
+//             </div>
+
+//             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+//               {stats.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>
+//         )}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Dashboard;
+
+
+
+
+// import React, { useEffect } from "react";
+// import { useDispatch, useSelector } from "react-redux";
+// import { fetchDashboard, fetchCouponStats } from "../../features/dashboard/dashboardSlice";
+
+// import StatsCards from "./components/StatsCards";
+// import InventoryStatus from "./components/InventoryStatus";
+// // import ChartsSection from "./components/ChartsSection";
+// import MonthlyComparison from "./components/MonthlyComparison";
+// import RecentOrders from "./components/RecentOrders";
+// import TopProducts from "./components/TopProducts";
+// import LowStockAlert from "./components/LowStockAlert";
+
+// import ChartsSection from "./components/ChartsSection";        // layout wrapper (2/3 + 1/3 grid)
+// import OrdersOverview from "./components/OrdersOverview";      // area chart only
+// import OrdersByStatusCard from "./components/OrdersByStatusCard"; // pie chart + nav buttons
+
+// const Dashboard = () => {
+//   const dispatch = useDispatch();
+//   const { stats, couponStats, loading, error } = useSelector((state) => state.dashboard);
+
+//   useEffect(() => {
+//     dispatch(fetchDashboard());
+//     dispatch(fetchCouponStats());
+//   }, [dispatch]);
+
+//   if (loading) {
+//     return (
+//       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+//         <div className="text-center">
+//           <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-[#704F38] mx-auto"></div>
+//           <p className="mt-4 text-gray-600 font-semibold">Loading Dashboard...</p>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   if (error) {
+//     return (
+//       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 to-red-100">
+//         <div className="bg-white p-8 rounded-2xl shadow-xl">
+//           <div className="text-red-600 text-xl font-bold">{error}</div>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   if (!stats) {
+//     return (
+//       <div className="flex items-center justify-center min-h-screen">
+//         <div className="text-gray-500 text-xl">No data available</div>
+//       </div>
+//     );
+//   }
+
+//   return (
+//     <div className="space-y-6 min-h-screen p-2">
+//       <div className="max-w-[1600px] mx-auto space-y-8">
+
+//         {/* Header */}
+//         <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+//           <div>
+//             <h1 className="text-2xl font-bold text-gray-600 tracking-tight">Dashboard</h1>
+//             <p className="text-gray-500 mt-2">Welcome back! Here's what's happening with your store.</p>
+//           </div>
+//           <div className="flex items-center gap-3">
+//             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
+//               <p className="text-xs text-gray-500">Current Month</p>
+//               <p className="font-bold text-gray-900">
+//                 {stats.charts?.monthlyComparison?.currentMonth?.label}
+//               </p>
+//             </div>
+//             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
+//               <p className="text-xs text-gray-500">Today</p>
+//               <p className="font-semibold text-gray-900">
+//                 {new Date().toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+//               </p>
+//             </div>
+//           </div>
+//         </div>
+
+//         {/* Stats Cards */}
+//         <StatsCards stats={stats} couponStats={couponStats} />
+
+//         {/* Inventory Status */}
+//         <InventoryStatus inventory={stats.inventory} />
+
+//         {/* Charts: Orders Overview (left 2/3) + Orders by Status (right 1/3) */}
+//         <ChartsSection charts={stats.charts} />
+
+//         {/* Monthly Comparison */}
+//         <MonthlyComparison monthlyComparison={stats.charts?.monthlyComparison} />
+
+//         {/* Recent Orders Table */}
+//         <RecentOrders recentOrders={stats.recentOrders} topProducts={stats.topProducts} />
+
+//         {/* Top Selling Products */}
+//         <TopProducts topProducts={stats.topProducts} />
+
+//         {/* Low Stock Alert */}
+//         <LowStockAlert lowStockProducts={stats.lowStockProducts} />
+
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Dashboard;
+
+
+
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchDashboard, fetchCouponStats } from "../../features/dashboard/dashboardSlice";
+
+import StatsCards from "./components/StatsCards";
+import InventoryStatus from "./components/InventoryStatus";
+import ChartsSection from "./components/ChartsSection";
+import OrdersOverview from "./components/OrdersOverview";
+import OrdersByStatusCard from "./components/OrdersByStatusCard";
+import MonthlyComparison from "./components/MonthlyComparison";
+import RecentOrders from "./components/RecentOrders";
+import TopProducts from "./components/TopProducts";
+import LowStockAlert from "./components/LowStockAlert";
+
+const Dashboard = () => {
+  const dispatch = useDispatch();
+  const { stats, couponStats, loading, error } = useSelector((state) => state.dashboard);
+
+  useEffect(() => {
+    dispatch(fetchDashboard());
+    dispatch(fetchCouponStats());
+  }, [dispatch]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-[#704F38] mx-auto"></div>
+          <p className="mt-4 text-gray-600 font-semibold">Loading Dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 to-red-100">
+        <div className="bg-white p-8 rounded-2xl shadow-xl">
+          <div className="text-red-600 text-xl font-bold">{error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-gray-500 text-xl">No data available</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 min-h-screen p-2">
+      <div className="max-w-[1600px] mx-auto space-y-8">
+
+        {/* Header */}
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-600 tracking-tight">Dashboard</h1>
+            <p className="text-gray-500 mt-2">Welcome back! Here's what's happening with your store.</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
+              <p className="text-xs text-gray-500">Current Month</p>
+              <p className="font-bold text-gray-900">
+                {stats.charts?.monthlyComparison?.currentMonth?.label}
+              </p>
+            </div>
+            <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
+              <p className="text-xs text-gray-500">Today</p>
+              <p className="font-semibold text-gray-900">
+                {new Date().toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Stats Cards */}
+        <StatsCards stats={stats} couponStats={couponStats} />
+
+        {/* Inventory Status */}
+        <InventoryStatus inventory={stats.inventory} />
+
+        {/* Charts: Orders Overview (left 2/3) + Orders by Status (right 1/3) */}
+        <ChartsSection charts={stats.charts} />
+
+        {/* Monthly Comparison */}
+        <MonthlyComparison monthlyComparison={stats.charts?.monthlyComparison} />
+
+        {/* Recent Orders Table */}
+        <RecentOrders recentOrders={stats.recentOrders} topProducts={stats.topProducts} />
+
+        {/* Top Selling Products */}
+        <TopProducts topProducts={stats.topProducts} />
+
+        {/* Low Stock Alert */}
+        <LowStockAlert lowStockProducts={stats.lowStockProducts} />
+
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/ChartsSection.jsx b/src/pages/Dashboard/components/ChartsSection.jsx
new file mode 100644
index 0000000..214299e
--- /dev/null
+++ b/src/pages/Dashboard/components/ChartsSection.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import OrdersOverview from "./OrdersOverview";
+import OrdersByStatusCard from "./OrdersByStatusCard";
+
+const ChartsSection = ({ charts }) => {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Left: takes 2/3 width */}
+      <div className="lg:col-span-11">
+        <OrdersOverview orderOverview={charts?.orderOverview} />
+      </div>
+    </div>
+  );
+};
+
+export default ChartsSection;
diff --git a/src/pages/Dashboard/components/InventoryStatus.jsx b/src/pages/Dashboard/components/InventoryStatus.jsx
new file mode 100644
index 0000000..4a9c542
--- /dev/null
+++ b/src/pages/Dashboard/components/InventoryStatus.jsx
@@ -0,0 +1,84 @@
+import React from "react";
+
+const inventoryItems = [
+  {
+    key: "inStock",
+    label: "In Stock",
+    bgClass: "bg-green-50 border-green-200",
+    textClass: "text-green-600",
+    valueClass: "text-green-700",
+    iconBg: "bg-green-100",
+    iconColor: "text-green-600",
+    icon: (
+      <svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    key: "lowStock",
+    label: "Low Stock",
+    bgClass: "bg-yellow-50 border-yellow-200",
+    textClass: "text-yellow-600",
+    valueClass: "text-yellow-700",
+    iconBg: "bg-yellow-100",
+    iconColor: "text-yellow-600",
+    icon: (
+      <svg className="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    key: "criticalStock",
+    label: "Critical",
+    bgClass: "bg-orange-50 border-orange-200",
+    textClass: "text-orange-600",
+    valueClass: "text-orange-700",
+    iconBg: "bg-orange-100",
+    iconColor: "text-orange-600",
+    icon: (
+      <svg className="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    key: "outOfStock",
+    label: "Out of Stock",
+    bgClass: "bg-red-50 border-red-200",
+    textClass: "text-red-600",
+    valueClass: "text-red-700",
+    iconBg: "bg-red-100",
+    iconColor: "text-red-600",
+    icon: (
+      <svg className="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+];
+
+const InventoryStatus = ({ inventory }) => {
+  if (!inventory) return null;
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {inventoryItems.map((item) => (
+        <div key={item.key} className={`${item.bgClass} border rounded-xl p-4`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-xs ${item.textClass} font-semibold uppercase`}>{item.label}</p>
+              <p className={`text-2xl font-bold ${item.valueClass} mt-1`}>{inventory[item.key]}</p>
+            </div>
+            <div className={`${item.iconBg} w-12 h-12 rounded-lg flex items-center justify-center`}>
+              {item.icon}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default InventoryStatus;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/LowStockAlert.jsx b/src/pages/Dashboard/components/LowStockAlert.jsx
new file mode 100644
index 0000000..194873b
--- /dev/null
+++ b/src/pages/Dashboard/components/LowStockAlert.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const LowStockAlert = ({ lowStockProducts }) => {
+  const navigate = useNavigate();
+
+  if (!lowStockProducts || lowStockProducts.length === 0) return null;
+
+  return (
+    <div className="bg-yellow-50 border-2 border-yellow-200 rounded-2xl p-6">
+      <div className="flex items-center gap-3 mb-4">
+        <svg className="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+        </svg>
+        <div>
+          <h3 className="text-xl font-bold text-yellow-900">Low Stock Alert</h3>
+          <p className="text-sm text-yellow-700">{lowStockProducts.length} products need restocking</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {lowStockProducts.map((product) => (
+          <div
+            key={product._id}
+            className="bg-white rounded-lg p-4 border border-yellow-200 flex items-center gap-4 cursor-pointer hover:shadow-md transition-shadow"
+            onClick={() => navigate(`/products/${product._id}`)}
+          >
+            <img
+              src={product.displayImage || "/bitmap.png"}
+              alt={product.name}
+              className="w-16 h-16 object-cover rounded-lg"
+              onError={(e) => { e.target.src = "/bitmap.png"; }}
+            />
+            <div className="flex-1">
+              <p className="font-semibold text-gray-900 text-sm line-clamp-1">{product.name}</p>
+              <p className="text-xs text-red-600 font-bold mt-1">Only {product.stock} left</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LowStockAlert;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/MonthlyComparison.jsx b/src/pages/Dashboard/components/MonthlyComparison.jsx
new file mode 100644
index 0000000..6ee4d9c
--- /dev/null
+++ b/src/pages/Dashboard/components/MonthlyComparison.jsx
@@ -0,0 +1,81 @@
+import React from "react";
+
+const MonthlyComparison = ({ monthlyComparison }) => {
+  const orderGrowth = monthlyComparison?.growth?.orders || 0;
+  const revenueGrowth = monthlyComparison?.growth?.revenue || 0;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {/* Orders Comparison */}
+      <div className="bg-gradient-to-br from-blue-50 to-white shadow-lg rounded-2xl p-6 border border-blue-100">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-bold text-gray-900">Monthly Orders Comparison</h3>
+          <svg className="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+          </svg>
+        </div>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-500">{monthlyComparison?.currentMonth?.label}</p>
+              <p className="text-3xl font-bold text-blue-600">
+                {monthlyComparison?.currentMonth?.orders || 0}
+              </p>
+            </div>
+            <div className="text-right">
+              <p className="text-sm text-gray-500">{monthlyComparison?.previousMonth?.label}</p>
+              <p className="text-2xl font-semibold text-gray-400">
+                {monthlyComparison?.previousMonth?.orders || 0}
+              </p>
+            </div>
+          </div>
+          <div className="pt-4 border-t border-blue-100">
+            <div className="flex items-center gap-2">
+              <span className={`text-lg font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
+                {orderGrowth >= 0 ? "+" : ""}{orderGrowth.toFixed(1)}%
+              </span>
+              <span className="text-sm text-gray-600">growth</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Revenue Comparison */}
+      <div className="bg-gradient-to-br from-green-50 to-white shadow-lg rounded-2xl p-6 border border-green-100">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-bold text-gray-900">Monthly Revenue Comparison</h3>
+          <svg className="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
+          </svg>
+        </div>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-500">{monthlyComparison?.currentMonth?.label}</p>
+              <p className="text-3xl font-bold text-green-600">
+                ₹{(monthlyComparison?.currentMonth?.revenue || 0).toLocaleString()}
+              </p>
+            </div>
+            <div className="text-right">
+              <p className="text-sm text-gray-500">{monthlyComparison?.previousMonth?.label}</p>
+              <p className="text-2xl font-semibold text-gray-400">
+                ₹{(monthlyComparison?.previousMonth?.revenue || 0).toLocaleString()}
+              </p>
+            </div>
+          </div>
+          <div className="pt-4 border-t border-green-100">
+            <div className="flex items-center gap-2">
+              <span className={`text-lg font-bold ${revenueGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
+                {revenueGrowth >= 0 ? "+" : ""}{revenueGrowth.toFixed(1)}%
+              </span>
+              <span className="text-sm text-gray-600">growth</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MonthlyComparison;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/OrdersByStatusCard.jsx b/src/pages/Dashboard/components/OrdersByStatusCard.jsx
new file mode 100644
index 0000000..3a81ba0
--- /dev/null
+++ b/src/pages/Dashboard/components/OrdersByStatusCard.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+
+const OrdersByStatusCard = ({ ordersByStatus = [] }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300 flex flex-col">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold text-gray-900">Orders by Status</h2>
+          <p className="text-gray-500 text-sm mt-1">Current distribution</p>
+        </div>
+        <button
+          onClick={() => navigate("/orders-by-status")}
+          className="flex items-center gap-1.5 bg-[#704F38] hover:bg-[#5d3f2c] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors duration-200 whitespace-nowrap shadow-sm"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+          View All
+        </button>
+      </div>
+
+      {/* Pie Chart */}
+      <ResponsiveContainer width="100%" height={220}>
+        <PieChart>
+          <Pie
+            data={ordersByStatus}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            label={({ label, percent }) => `${label} ${(percent * 100).toFixed(0)}%`}
+            outerRadius={80}
+            dataKey="count"
+          >
+            {ordersByStatus.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Tooltip />
+        </PieChart>
+      </ResponsiveContainer>
+
+      {/* Legend List */}
+      <div className="mt-4 space-y-2 flex-1">
+        {ordersByStatus.map((status, index) => (
+          <div key={index} className="flex items-center justify-between text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: status.color }} />
+              <span className="text-gray-700">{status.label}</span>
+            </div>
+            <span className="font-semibold text-gray-900">{status.count}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom CTA */}
+      <button
+        onClick={() => navigate("/orders-by-status")}
+        className="mt-4 w-full border-2 border-[#704F38] text-[#704F38] hover:bg-[#704F38] hover:text-white text-sm font-semibold py-2.5 rounded-xl transition-all duration-200"
+      >
+        View Detailed Breakdown →
+      </button>
+    </div>
+  );
+};
+
+export default OrdersByStatusCard;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/OrdersByStatusPage.jsx b/src/pages/Dashboard/components/OrdersByStatusPage.jsx
new file mode 100644
index 0000000..b620db8
--- /dev/null
+++ b/src/pages/Dashboard/components/OrdersByStatusPage.jsx
@@ -0,0 +1,224 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+const statusMeta = {
+  DELIVERED: { icon: "✅", bg: "bg-green-50", border: "border-green-200", text: "text-green-700", badge: "bg-green-100 text-green-700" },
+  PENDING:   { icon: "⏳", bg: "bg-yellow-50", border: "border-yellow-200", text: "text-yellow-700", badge: "bg-yellow-100 text-yellow-700" },
+  SHIPPED:   { icon: "🚚", bg: "bg-blue-50", border: "border-blue-200", text: "text-blue-700", badge: "bg-blue-100 text-blue-700" },
+  CANCELLED: { icon: "❌", bg: "bg-red-50", border: "border-red-200", text: "text-red-700", badge: "bg-red-100 text-red-700" },
+  PROCESSING:{ icon: "⚙️", bg: "bg-purple-50", border: "border-purple-200", text: "text-purple-700", badge: "bg-purple-100 text-purple-700" },
+};
+
+const CustomTooltip = ({ active, payload }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white border border-gray-200 rounded-xl p-3 shadow-lg">
+        <p className="font-bold text-gray-900">{payload[0].name}</p>
+        <p className="text-gray-600">Count: <span className="font-bold text-[#704F38]">{payload[0].value}</span></p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const OrdersByStatusPage = () => {
+  const navigate = useNavigate();
+  const { stats } = useSelector((state) => state.dashboard);
+
+  const ordersByStatus = stats?.charts?.ordersByStatus || [];
+  const total = ordersByStatus.reduce((sum, s) => sum + s.count, 0);
+
+  if (!stats) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <p className="text-gray-500 text-xl">No data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
+      <div className="max-w-6xl mx-auto space-y-8">
+
+        {/* Header */}
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => navigate(-1)}
+            className="flex items-center gap-2 text-gray-600 hover:text-[#704F38] transition-colors font-medium"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Back
+          </button>
+          <div className="h-6 w-px bg-gray-300" />
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Orders by Status</h1>
+            <p className="text-gray-500 text-sm">Detailed breakdown of all {total} orders</p>
+          </div>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          {ordersByStatus.map((status) => {
+            const meta = statusMeta[status.label] || {
+              icon: "📦", bg: "bg-gray-50", border: "border-gray-200",
+              text: "text-gray-700", badge: "bg-gray-100 text-gray-700",
+            };
+            const percentage = total > 0 ? ((status.count / total) * 100).toFixed(1) : 0;
+
+            return (
+              <div
+                key={status.label}
+                className={`${meta.bg} ${meta.border} border-2 rounded-2xl p-5 flex flex-col gap-3`}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-2xl">{meta.icon}</span>
+                  <span className={`text-xs font-bold px-2 py-1 rounded-full ${meta.badge}`}>
+                    {percentage}%
+                  </span>
+                </div>
+                <div>
+                  <p className={`text-3xl font-extrabold ${meta.text}`}>{status.count}</p>
+                  <p className="text-sm text-gray-600 font-medium mt-1">{status.label}</p>
+                </div>
+                {/* Mini progress bar */}
+                <div className="w-full bg-white rounded-full h-1.5">
+                  <div
+                    className="h-1.5 rounded-full transition-all duration-700"
+                    style={{ width: `${percentage}%`, backgroundColor: status.color }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Charts Row */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Pie Chart */}
+          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
+            <h2 className="text-lg font-bold text-gray-900 mb-6">Distribution Overview</h2>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={ordersByStatus}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={70}
+                  outerRadius={110}
+                  paddingAngle={4}
+                  dataKey="count"
+                >
+                  {ordersByStatus.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip content={<CustomTooltip />} />
+                <Legend
+                  formatter={(value) => <span className="text-sm text-gray-700">{value}</span>}
+                />
+              </PieChart>
+            </ResponsiveContainer>
+
+            {/* Total in center label */}
+            <div className="text-center mt-2">
+              <p className="text-sm text-gray-500">Total Orders</p>
+              <p className="text-3xl font-extrabold text-[#704F38]">{total}</p>
+            </div>
+          </div>
+
+          {/* Bar Chart */}
+          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
+            <h2 className="text-lg font-bold text-gray-900 mb-6">Status Comparison</h2>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={ordersByStatus} barSize={40}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                <XAxis
+                  dataKey="label"
+                  stroke="#888"
+                  style={{ fontSize: "11px" }}
+                  tick={{ fill: "#6b7280" }}
+                />
+                <YAxis stroke="#888" style={{ fontSize: "12px" }} />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar dataKey="count" name="Orders" radius={[6, 6, 0, 0]}>
+                  {ordersByStatus.map((entry, index) => (
+                    <Cell key={`bar-${index}`} fill={entry.color} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Detailed Table */}
+        <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
+          <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] px-6 py-4">
+            <h2 className="text-lg font-bold text-white">Status Summary Table</h2>
+          </div>
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-50 border-b border-gray-200">
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Order Count</th>
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Percentage</th>
+                <th className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Progress</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {ordersByStatus.map((status) => {
+                const percentage = total > 0 ? ((status.count / total) * 100).toFixed(1) : 0;
+                const meta = statusMeta[status.label] || { badge: "bg-gray-100 text-gray-700" };
+                return (
+                  <tr key={status.label} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <span className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold ${meta.badge}`}>
+                        <span className="w-2 h-2 rounded-full" style={{ backgroundColor: status.color }} />
+                        {status.label}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 font-bold text-gray-900 text-lg">{status.count}</td>
+                    <td className="px-6 py-4 font-semibold text-gray-700">{percentage}%</td>
+                    <td className="px-6 py-4 w-48">
+                      <div className="w-full bg-gray-100 rounded-full h-2">
+                        <div
+                          className="h-2 rounded-full transition-all duration-700"
+                          style={{ width: `${percentage}%`, backgroundColor: status.color }}
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+            <tfoot>
+              <tr className="bg-gray-50 border-t-2 border-gray-200">
+                <td className="px-6 py-4 font-bold text-gray-900">Total</td>
+                <td className="px-6 py-4 font-extrabold text-[#704F38] text-lg">{total}</td>
+                <td className="px-6 py-4 font-bold text-gray-700">100%</td>
+                <td className="px-6 py-4" />
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrdersByStatusPage;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/OrdersOverview.jsx b/src/pages/Dashboard/components/OrdersOverview.jsx
new file mode 100644
index 0000000..a815158
--- /dev/null
+++ b/src/pages/Dashboard/components/OrdersOverview.jsx
@@ -0,0 +1,97 @@
+
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+const OrdersOverview = ({ orderOverview = [] }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
+      {/* Header with View All button on right */}
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold text-gray-900">Orders Overview</h2>
+          <p className="text-gray-500 text-sm mt-1">
+            Last 30 days order trends
+          </p>
+        </div>
+        <button
+          onClick={() => navigate("/orders-by-status")}
+          className="flex items-center gap-1.5 bg-[#704F38] hover:bg-[#5d3f2c] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors duration-200 whitespace-nowrap shadow-sm"
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+          View All
+        </button>
+      </div>
+
+      <ResponsiveContainer width="100%" height={300}>
+        <AreaChart data={orderOverview}>
+          <defs>
+            <linearGradient id="colorTotal" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#4880FF" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#4880FF" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="colorCompleted" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#10B981" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#10B981" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+          <XAxis dataKey="label" stroke="#888" style={{ fontSize: "12px" }} />
+          <YAxis stroke="#888" style={{ fontSize: "12px" }} />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: "white",
+              borderRadius: "12px",
+              border: "1px solid #e5e7eb",
+              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+            }}
+          />
+          <Legend />
+          <Area
+            type="monotone"
+            dataKey="total"
+            stroke="#4880FF"
+            strokeWidth={2}
+            fillOpacity={1}
+            fill="url(#colorTotal)"
+            name="Total Orders"
+          />
+          <Area
+            type="monotone"
+            dataKey="completed"
+            stroke="#10B981"
+            strokeWidth={2}
+            fillOpacity={1}
+            fill="url(#colorCompleted)"
+            name="Completed"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default OrdersOverview;
diff --git a/src/pages/Dashboard/components/RecentOrders.jsx b/src/pages/Dashboard/components/RecentOrders.jsx
new file mode 100644
index 0000000..a2e62b4
--- /dev/null
+++ b/src/pages/Dashboard/components/RecentOrders.jsx
@@ -0,0 +1,205 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const statusStyles = {
+  DELIVERED: "bg-green-100 text-green-700 ring-1 ring-green-200",
+  PENDING: "bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200",
+  SHIPPED: "bg-blue-100 text-blue-700 ring-1 ring-blue-200",
+  CANCELLED: "bg-red-100 text-red-700 ring-1 ring-red-200",
+};
+
+const statusDotStyles = {
+  DELIVERED: "bg-green-500",
+  PENDING: "bg-yellow-500",
+  SHIPPED: "bg-blue-500",
+  CANCELLED: "bg-red-500",
+};
+
+const RecentOrders = ({ recentOrders, topProducts }) => {
+  const navigate = useNavigate();
+
+  const getProductImage = (order) => {
+    const productImage = order.items?.[0]?.productImage;
+    if (productImage && productImage !== "https://via.placeholder.com/300")
+      return productImage;
+    const productId = order.items?.[0]?.productId;
+    if (productId) {
+      const product = topProducts?.find((p) => p._id === productId);
+      if (product?.displayImage) return product.displayImage;
+    }
+    return "/bitmap.png";
+  };
+
+  const getProductName = (order) => {
+    const productDetails = order.items?.[0]?.productDetails;
+    if (productDetails?.name) return productDetails.name;
+    const product = topProducts?.find(
+      (p) => p._id === order.items[0]?.productId,
+    );
+    return product?.name || order.items[0]?.productName || "Product";
+  };
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300">
+      <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-2xl font-bold text-white">Recent Orders</h3>
+            <p className="text-gray-200 text-sm mt-1">
+              Latest {recentOrders?.length || 0} transactions
+            </p>
+          </div>
+          <button
+            onClick={() => navigate("/orders")}
+            className="bg-white text-[#704F38] px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+          >
+            View All
+          </button>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              {[
+                "Order Details",
+                "Customer",
+                "Amount",
+                "Status",
+                "Payment",
+                "Date",
+              ].map((h) => (
+                <th
+                  key={h}
+                  className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {recentOrders?.map((order) => (
+              <tr
+                key={order.id}
+                className="hover:bg-gray-50 transition-colors duration-200 cursor-pointer"
+                onClick={() => navigate(`/orders/${order.id}`)}
+              >
+                <td className="px-6 py-4">
+                  <div className="flex items-center gap-4">
+                    <div className="relative">
+                      <img
+                        src={getProductImage(order)}
+                        alt={getProductName(order)}
+                        className="w-16 h-16 object-cover rounded-xl shadow-md ring-2 ring-gray-100"
+                        onError={(e) => {
+                          e.target.src = "/bitmap.png";
+                        }}
+                      />
+                      {order.items.length > 1 && (
+                        <div className="absolute -top-2 -right-2 bg-[#704F38] text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
+                          {order.items.length}
+                        </div>
+                      )}
+                    </div>
+                    <div>
+                      <p className="font-bold text-gray-900 text-sm">
+                        {order.orderNumber}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {getProductName(order)}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+
+                <td className="px-6 py-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center text-white font-bold text-sm">
+                      {order.user.firstName?.[0]}
+                      {order.user.lastName?.[0]}
+                    </div>
+                    <div>
+                      <p className="font-semibold text-gray-900 text-sm">
+                        {order.user.firstName} {order.user.lastName}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        {order.user.email}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+
+                <td className="px-6 py-4">
+                  <p className="font-bold text-lg text-[#704F38]">
+                    ₹{parseFloat(order.totalAmount).toLocaleString()}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-1 uppercase">
+                    {order.paymentMethod}
+                  </p>
+                </td>
+
+                <td className="px-6 py-4">
+                  <span
+                    className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm ${statusStyles[order.status] || "bg-purple-100 text-purple-700 ring-1 ring-purple-200"}`}
+                  >
+                    <span
+                      className={`w-2 h-2 rounded-full ${statusDotStyles[order.status] || "bg-purple-500"}`}
+                    ></span>
+                    {order.status}
+                  </span>
+                </td>
+
+                <td className="px-6 py-4">
+                  <span
+                    className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm ${order.paymentStatus === "PAID" ? "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200" : "bg-orange-100 text-orange-700 ring-1 ring-orange-200"}`}
+                  >
+                    {order.paymentStatus === "PAID" ? "✓" : "⏱"}{" "}
+                    {order.paymentStatus}
+                  </span>
+                </td>
+
+                <td className="px-6 py-4">
+                  <p className="text-sm text-gray-900">
+                    {new Date(order.createdAt).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {new Date(order.createdAt).toLocaleTimeString("en-US", {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {(!recentOrders || recentOrders.length === 0) && (
+        <div className="text-center py-12">
+          <svg
+            className="w-16 h-16 text-gray-300 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+            />
+          </svg>
+          <p className="text-gray-500 text-lg">No recent orders found</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RecentOrders;
diff --git a/src/pages/Dashboard/components/StatsCards.jsx b/src/pages/Dashboard/components/StatsCards.jsx
new file mode 100644
index 0000000..98bc900
--- /dev/null
+++ b/src/pages/Dashboard/components/StatsCards.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const StatsCards = ({ stats, couponStats }) => {
+  const navigate = useNavigate();
+  const orderGrowth = stats?.charts?.monthlyComparison?.growth?.orders || 0;
+
+  const cards = [
+    {
+      label: "Total Users",
+      value: stats?.totalUsers,
+      gradient: "from-white to-[#FAF7F5]",
+      iconBg: "from-[#F5ECE6] to-[#E8D5C4]",
+      iconColor: "text-[#704F38]",
+      footer: <span className="text-xs text-gray-600">Active users</span>,
+      icon: (
+        <svg className="w-8 h-8 text-[#704F38]" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+        </svg>
+      ),
+    },
+    {
+      label: "Total Orders",
+      value: stats?.totalOrders,
+      gradient: "from-white to-[#E7F3FF]",
+      iconBg: "from-[#E7F3FF] to-[#C2DFFF]",
+      iconColor: "text-blue-600",
+      footer: (
+        <div className="flex items-center gap-2">
+          <svg
+            className={`w-4 h-4 ${orderGrowth >= 0 ? "text-green-500" : "text-red-500"}`}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d={
+                orderGrowth >= 0
+                  ? "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
+                  : "M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586l-4.293-4.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
+              }
+              clipRule="evenodd"
+            />
+          </svg>
+          <span className={`text-sm font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
+            {orderGrowth.toFixed(1)}%
+          </span>
+          <p className="text-sm text-gray-600">vs last month</p>
+        </div>
+      ),
+      icon: (
+        <svg className="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+        </svg>
+      ),
+    },
+    {
+      label: "Total Products",
+      value: stats?.inventory?.totalProducts || stats?.totalProducts,
+      gradient: "from-white to-[#FFF3E6]",
+      iconBg: "from-[#FFF3E6] to-[#FFE4B8]",
+      iconColor: "text-orange-600",
+      footer: (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-green-600">In Stock: {stats?.inventory?.inStock || 0}</span>
+          {stats?.inventory?.outOfStock > 0 && (
+            <span className="text-xs text-red-600">• Out: {stats.inventory.outOfStock}</span>
+          )}
+        </div>
+      ),
+      icon: (
+        <svg className="w-8 h-8 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clipRule="evenodd" />
+        </svg>
+      ),
+    },
+    {
+      label: "Total Coupons",
+      value: couponStats?.totalCoupons ?? 0,
+      gradient: "from-white to-[#EAF1FF]",
+      iconBg: "from-[#EAF1FF] to-[#C7D7FE]",
+      iconColor: "text-blue-600",
+      footer: (
+        <div className="flex items-center justify-between w-full">
+          <p className="text-sm font-bold text-green-600">Active: {couponStats?.activeCoupons ?? 0}</p>
+          <button
+            onClick={(e) => { e.stopPropagation(); navigate("/coupon-stats"); }}
+            className="text-blue-600 hover:text-blue-800 transition font-semibold"
+          >
+            View →
+          </button>
+        </div>
+      ),
+      icon: (
+        <svg className="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M21 10V7a1 1 0 00-1-1h-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v2H4a1 1 0 00-1 1v3a2 2 0 010 4v3a1 1 0 001 1h3v2a1 1 0 001 1h8a1 1 0 001-1v-2h3a1 1 0 001-1v-3a2 2 0 010-4zM9 4h6v2H9V4zm6 16H9v-2h6v2z" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      {cards.map((card, i) => (
+        <div
+          key={i}
+          className={`group bg-gradient-to-br ${card.gradient} shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer`}
+        >
+          <div className="flex justify-between items-start mb-4">
+            <div>
+              <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">{card.label}</p>
+              <p className="text-4xl font-extrabold text-[#704F38] mt-2">{card.value}</p>
+            </div>
+            <div className={`bg-gradient-to-br ${card.iconBg} w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300`}>
+              {card.icon}
+            </div>
+          </div>
+          <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200 w-full">
+            {card.footer}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default StatsCards;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/TopProducts.jsx b/src/pages/Dashboard/components/TopProducts.jsx
new file mode 100644
index 0000000..8137046
--- /dev/null
+++ b/src/pages/Dashboard/components/TopProducts.jsx
@@ -0,0 +1,85 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const TopProducts = ({ topProducts }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl border border-gray-100 p-8 hover:shadow-2xl transition-shadow duration-300">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h3 className="text-2xl font-bold text-gray-900">Top Selling Products</h3>
+          <p className="text-gray-500 text-sm mt-1">Best performers by revenue and orders</p>
+        </div>
+        <button
+          onClick={() => navigate("/products")}
+          className="text-[#704F38] hover:bg-[#FAF7F5] px-4 py-2 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2"
+        >
+          View All
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
+        {topProducts?.map((product, index) => (
+          <div
+            key={product._id}
+            className="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer"
+            onClick={() => navigate(`/products/${product._id}`)}
+          >
+            {/* Rank Badge */}
+            <div className="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center shadow-lg z-10">
+              <span className="text-white font-bold text-sm">#{index + 1}</span>
+            </div>
+
+            {/* Out of Stock Badge */}
+            {product.stockStatus === "OUT_OF_STOCK" && (
+              <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg z-10">
+                Out of Stock
+              </div>
+            )}
+
+            {/* Product Image */}
+            <div className="relative mb-4 overflow-hidden rounded-xl">
+              <img
+                src={product.displayImage || "/bitmap.png"}
+                alt={product.name}
+                className="w-full h-40 object-cover transform group-hover:scale-110 transition-transform duration-300"
+                onError={(e) => { e.target.src = "/bitmap.png"; }}
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            </div>
+
+            {/* Product Details */}
+            <div className="space-y-2">
+              <h4 className="font-bold text-gray-900 text-sm line-clamp-1">{product.name}</h4>
+              <div className="flex items-center justify-between pt-3 border-t border-gray-200">
+                <div className="bg-gradient-to-r from-[#FFE6B3] to-[#FFD280] px-3 py-1 rounded-full">
+                  <span className="text-[#704F38] font-extrabold text-sm">
+                    ₹{product.basePrice.toLocaleString()}
+                  </span>
+                </div>
+              </div>
+              <div className="space-y-1 pt-2 border-t border-gray-200">
+                {[
+                  { label: "Sold:", value: `${product.totalSold} units` },
+                  { label: "Orders:", value: product.totalOrders },
+                  { label: "Revenue:", value: `₹${product.revenue.toLocaleString()}`, green: true },
+                ].map(({ label, value, green }) => (
+                  <div key={label} className="flex items-center justify-between text-xs">
+                    <span className="text-gray-500">{label}</span>
+                    <span className={`font-bold ${green ? "text-green-600" : "text-gray-900"}`}>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TopProducts;
\ No newline at end of file
diff --git a/src/pages/Orders/OrderDetails.jsx b/src/pages/Orders/OrderDetails.jsx
new file mode 100644
index 0000000..e927481
--- /dev/null
+++ b/src/pages/Orders/OrderDetails.jsx
@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+// import axios from "../../app/api";
+import { ArrowLeft, MapPin, Package, CreditCard, Truck } from "lucide-react";
+import {
+  useGetOrderByIdQuery,
+  useUpdateOrderStatusMutation,
+} from "../../features/orders/ordersAPI";
+import OrderHistoryDrawer from "../Orders/OrderHistoryDrawer";
+import { Clock } from "lucide-react";
+import StatusUpdateForm from "./StatusUpdateForm";
+
+const StatusBadge = ({ status }) => {
+  const styles = {
+    PENDING: "bg-yellow-100 text-yellow-800",
+    PROCESSING: "bg-purple-100 text-purple-800",
+    SHIPPED: "bg-blue-100 text-blue-800",
+    DELIVERED: "bg-green-100 text-green-800",
+    CANCELLED: "bg-red-100 text-red-800",
+  };
+  return (
+    <span
+      className={`px-3 py-1 rounded-full text-xs font-semibold ${styles[status]}`}
+    >
+      {status}
+    </span>
+  );
+};
+
+const OrderDetails = () => {
+  const { id } = useParams();
+  // const [order, setOrder] = useState(null);
+  // const [loading, setLoading] = useState(true);
+
+  // useEffect(() => {
+  //   axios
+  //     .get(`/admin/orders/${id}`)
+  //     .then((res) => {
+  //       setOrder(res.data?.data || null);
+  //       setLoading(false);
+  //     })
+  //     .catch(() => setLoading(false));
+  // }, [id]);
+
+  const { data, isLoading } = useGetOrderByIdQuery(id);
+  const [updateOrderStatus, { isLoading: updating }] =
+    useUpdateOrderStatusMutation();
+  const [showHistory, setShowHistory] = useState(false);
+  const [showStatusModal, setShowStatusModal] = useState(false);
+
+  // const order = data?.data;
+  // const order = data?.data?.order;
+  // const order = data?.data?.order || data?.order || data;
+  const order = data?.data;
+
+  console.log("API DATA:", data);
+
+  if (isLoading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading order details...
+      </div>
+    );
+
+  if (!order)
+    return (
+      <div className="text-center py-10 text-gray-500">Order not found!</div>
+    );
+
+  return (
+    <div className="max-w-7xl mx-auto p-6 space-y-6">
+      {/* Back Button */}
+      <div className="flex items-center gap-2 text-blue-600 hover:text-blue-800 transition">
+        <ArrowLeft size={18} />
+        <Link to="/orders" className="font-medium">
+          Back to Orders
+        </Link>
+      </div>
+
+      {/* Order Header */}
+      <div className="bg-white shadow-lg rounded-2xl p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">
+            Order #{order.orderNumber}
+          </h2>
+          <p className="text-gray-500">
+            {new Date(order.createdAt).toLocaleString()}
+          </p>
+          <div className="mt-2">
+            <StatusBadge status={order.status} />
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-2xl font-extrabold text-green-600">
+            ₹{order.totalAmount}
+          </p>
+          <p className="text-gray-500 flex items-center gap-1">
+            <CreditCard size={16} /> {order.paymentMethod} (
+            {order.paymentStatus})
+          </p>
+        </div>
+
+        {/* Admin Status Controls */}
+        <button
+          onClick={() => setShowStatusModal(true)}
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition"
+        >
+          Update Status
+        </button>
+      </div>
+
+      {/* Customer & Shipping */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-2xl shadow-md hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-3">Customer Info</h3>
+          <p className="text-gray-800 font-medium">
+            {order.user?.firstName} {order.user?.lastName}
+          </p>
+          <p className="text-gray-600">{order.user?.email}</p>
+          <p className="text-gray-600">{order.user?.phone}</p>
+        </div>
+
+        <div className="bg-gradient-to-r from-green-50 to-green-100 p-6 rounded-2xl shadow-md hover:shadow-lg transition">
+          <h3 className="text-gray-700 font-semibold mb-3 flex items-center gap-2">
+            <MapPin size={16} /> Shipping Address
+          </h3>
+          <p className="text-gray-800">
+            {/* {order.address.addressLine1}, {order.address.city} */}
+            {order.address?.addressLine1}, {order.address?.city}
+          </p>
+          <p className="text-gray-600">
+            {order.address?.state}, {order.address.country} -{" "}
+            {order.address.postalCode}
+          </p>
+          <p className="text-gray-600">Phone: {order.address.phone}</p>
+        </div>
+      </div>
+
+      {/* Items */}
+      <div className="bg-white shadow-lg rounded-2xl p-6">
+        <h3 className="text-gray-700 font-semibold mb-4 flex items-center gap-2">
+          <Package size={16} /> Order Items
+        </h3>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm text-gray-700">
+            <thead className="bg-gray-100 uppercase text-xs font-semibold">
+              <tr>
+                <th className="px-4 py-2">Product</th>
+                <th className="px-4 py-2">Price</th>
+                <th className="px-4 py-2">Qty</th>
+                <th className="px-4 py-2 text-right">Subtotal</th>
+              </tr>
+            </thead>
+            <tbody>
+              {order.items?.map((item) => (
+                <tr
+                  key={item.id}
+                  className="border-t hover:bg-gray-50 transition"
+                >
+                  <td className="px-4 py-2 font-medium">{item.productName}</td>
+                  <td className="px-4 py-2">₹{item.price}</td>
+                  <td className="px-4 py-2">{item.quantity}</td>
+                  <td className="px-4 py-2 text-right font-semibold">
+                    ₹{item.price * item.quantity}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Order Timeline */}
+
+      <div className="bg-white shadow-xl rounded-3xl p-8">
+        <div className="flex justify-between items-center mb-8">
+          <h3 className="text-xl font-semibold text-gray-800">
+            Order Timeline
+          </h3>
+
+          <button
+            onClick={() => setShowHistory(true)}
+            className="flex items-center gap-2 text-sm bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg transition"
+          >
+            <Clock size={16} />
+            View History
+          </button>
+          <OrderHistoryDrawer
+            orderId={order.id}
+            open={showHistory}
+            onClose={() => setShowHistory(false)}
+          />
+        </div>
+
+        {(() => {
+          const steps = [
+            { key: "PENDING", label: "Order Placed" },
+            { key: "PROCESSING", label: "Processing" },
+            { key: "SHIPPED", label: "Shipped" },
+            { key: "DELIVERED", label: "Delivered" },
+          ];
+
+          const currentStepIndex = steps.findIndex(
+            (step) => step.key === order.status,
+          );
+
+          return (
+            <div className="relative">
+              {steps.map((step, index) => {
+                const isCompleted = index < currentStepIndex;
+                const isActive = index === currentStepIndex;
+                const isLast = index === steps.length - 1;
+
+                return (
+                  <div
+                    key={step.key}
+                    className="relative flex items-start gap-6 pb-12"
+                  >
+                    {/* Vertical Line (ONLY if not last) */}
+                    {!isLast && (
+                      <div
+                        className={`absolute left-4 top-10 w-1 h-full 
+                  ${isCompleted ? "bg-green-500" : "bg-gray-200"}`}
+                      ></div>
+                    )}
+
+                    {/* Circle */}
+                    <div
+                      className={`relative z-10 w-8 h-8 flex items-center justify-center rounded-full border-2 transition-all duration-300
+                  ${
+                    isCompleted
+                      ? "bg-green-500 border-green-500 text-white"
+                      : isActive
+                        ? "bg-blue-600 border-blue-600 text-white"
+                        : "bg-white border-gray-300 text-gray-400"
+                  }
+                `}
+                    >
+                      {isCompleted ? "✓" : index + 1}
+                    </div>
+
+                    {/* Content */}
+                    <div>
+                      <h4
+                        className={`font-medium ${
+                          isCompleted
+                            ? "text-green-600"
+                            : isActive
+                              ? "text-blue-600"
+                              : "text-gray-500"
+                        }`}
+                      >
+                        {step.label}
+                      </h4>
+
+                      {isActive && (
+                        <p className="text-sm text-gray-400 mt-1">
+                          Currently in progress
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })()}
+      </div>
+
+      {showStatusModal && (
+  <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+    <div className="w-full max-w-lg">
+      <StatusUpdateForm
+        orderId={order.id}
+        currentStatus={order.status}
+      />
+
+      <button
+        onClick={() => setShowStatusModal(false)}
+        className="mt-4 w-full bg-gray-200 py-2 rounded-lg"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+)}
+
+    </div>
+  );
+};
+
+export default OrderDetails;
diff --git a/src/pages/Orders/OrderHistoryDrawer.jsx b/src/pages/Orders/OrderHistoryDrawer.jsx
new file mode 100644
index 0000000..f246ac2
--- /dev/null
+++ b/src/pages/Orders/OrderHistoryDrawer.jsx
@@ -0,0 +1,138 @@
+import React from "react";
+import { X, Clock, Truck, CheckCircle2, Package } from "lucide-react";
+import { useGetOrderHistoryQuery } from "../../features/orders/ordersAPI";
+
+const getStatusColor = (status) => {
+  switch (status) {
+    case "DELIVERED":
+      return "text-green-600 bg-green-100";
+    case "SHIPPED":
+      return "text-blue-600 bg-blue-100";
+    case "PROCESSING":
+      return "text-purple-600 bg-purple-100";
+    case "CANCELLED":
+      return "text-red-600 bg-red-100";
+    default:
+      return "text-gray-600 bg-gray-100";
+  }
+};
+
+const OrderHistoryDrawer = ({ orderId, open, onClose }) => {
+  const { data, isLoading } = useGetOrderHistoryQuery(orderId, {
+    skip: !open,
+  });
+
+  const history = data?.data || [];
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex">
+      {/* Overlay */}
+      <div
+        className="flex-1 bg-black/40 backdrop-blur-sm transition"
+        onClick={onClose}
+      />
+
+      {/* Drawer */}
+      <div className="w-full max-w-md bg-white shadow-2xl h-full flex flex-col animate-slide-in-right">
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b sticky top-0 bg-white z-10">
+          <div className="flex items-center gap-2">
+            <Clock size={18} className="text-gray-600" />
+            <h3 className="text-lg font-semibold text-gray-800">
+              Order History
+            </h3>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full hover:bg-gray-100 transition"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+
+          {isLoading ? (
+            <p className="text-gray-500 text-sm">Loading history...</p>
+          ) : history.length === 0 ? (
+            <p className="text-gray-400 text-sm">
+              No history available
+            </p>
+          ) : (
+            <div className="relative border-l-2 border-gray-200 ml-3">
+              {history.map((event, index) => (
+                <div key={event.id} className="mb-10 ml-6 relative">
+
+                  {/* Timeline Dot */}
+                  <span
+                    className={`absolute -left-[14px] w-7 h-7 rounded-full flex items-center justify-center ring-4 ring-white text-xs font-bold shadow-md
+                      ${getStatusColor(event.toStatus)}
+                    `}
+                  >
+                    {event.toStatus === "DELIVERED" ? (
+                      <CheckCircle2 size={14} />
+                    ) : event.toStatus === "SHIPPED" ? (
+                      <Truck size={14} />
+                    ) : (
+                      <Package size={14} />
+                    )}
+                  </span>
+
+                  {/* Card */}
+                  <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
+                    
+                    <div className="flex items-center justify-between">
+                      <h4 className="font-semibold text-gray-800">
+                        {event.fromStatus || "START"} → {event.toStatus}
+                      </h4>
+
+                      <span
+                        className={`text-xs px-2 py-1 rounded-full font-medium ${getStatusColor(
+                          event.toStatus
+                        )}`}
+                      >
+                        {event.toStatus}
+                      </span>
+                    </div>
+
+                    {event.trackingNumber && (
+                      <p className="text-xs text-gray-600 mt-2">
+                        🚚 Tracking:{" "}
+                        <span className="font-medium">
+                          {event.trackingNumber}
+                        </span>
+                      </p>
+                    )}
+
+                    {event.notes && (
+                      <p className="text-xs text-gray-500 mt-2">
+                        📝 {event.notes}
+                      </p>
+                    )}
+
+                    {event.admin && (
+                      <p className="text-xs text-gray-500 mt-2">
+                        👤 {event.admin.firstName} {event.admin.lastName}
+                      </p>
+                    )}
+
+                    <p className="text-xs text-gray-400 mt-3">
+                      {new Date(event.createdAt).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default OrderHistoryDrawer;
diff --git a/src/pages/Orders/OrderList.jsx b/src/pages/Orders/OrderList.jsx
new file mode 100644
index 0000000..af3da1c
--- /dev/null
+++ b/src/pages/Orders/OrderList.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Eye } from "lucide-react";
+import { formatDate } from "../../utils/formatDate";
+import { useGetOrdersQuery } from "../../features/orders/ordersAPI";
+
+const StatusBadge = ({ status }) => {
+  const styles = {
+    COMPLETED: "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]",
+    PROCESSING: "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]",
+    PENDING: "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]",
+    REJECTED: "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]",
+    DELIVERED: "bg-[#61b390]/10 border border-[#61b390] text-[#01352c]",
+  };
+
+  const boxClasses =
+    "w-[93px] h-[27px] flex items-center justify-center rounded-[4.5px] text-xs font-bold";
+
+  return <span className={`${boxClasses} ${styles[status]}`}>{status}</span>;
+};
+
+const PaymentBadge = ({ status }) => {
+  const styles = {
+    PAID: "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]",
+    PROCESSING: "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]",
+    PENDING: "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]",
+    FAILED: "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]",
+  };
+
+  const boxClasses =
+    "w-[93px] h-[27px] flex items-center justify-center rounded-[4.5px] text-xs font-bold";
+
+  return <span className={`${boxClasses} ${styles[status]}`}>{status}</span>;
+};
+
+const OrderList = () => {
+  // ✅ RTK Query handles fetching & state automatically
+  const { data, isLoading, isError } = useGetOrdersQuery({
+    page: 1,
+    limit: 10,
+  });
+  const navigate = useNavigate();
+
+  // Extract safely
+  const orders = data?.data?.orders || [];
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-80 text-gray-600">
+        Loading orders...
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="text-center text-red-600 py-10">
+        Failed to load orders. Please try again.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-xl font-semibold text-gray-600">All Orders</h1>
+
+      {orders.length === 0 ? (
+        <div className="text-center py-10 text-gray-500">No orders found.</div>
+      ) : (
+        <div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
+          <table className="min-w-full text-sm text-left">
+            <thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
+              <tr>
+                <th className="px-6 py-3">Order #</th>
+                <th className="px-6 py-3">Customer</th>
+                <th className="px-6 py-3">Date</th>
+                <th className="px-6 py-3">Total</th>
+                <th className="px-6 py-3">Status</th>
+                <th className="px-6 py-3">Payment</th>
+
+                <th className="px-6 py-3 text-right">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {orders.map((order) => (
+                <tr
+                  key={order.id}
+                  className="border-t  hover:bg-gray-50 transition-colors"
+                >
+                  <td className="px-6 py-3 font-medium text-gray-800">
+                    {order.orderNumber}
+                  </td>
+                  <td className="px-6 py-3 text-gray-700">
+                    {order.user?.firstName} {order.user?.lastName}
+                  </td>
+                  <td className="px-6 py-3 text-gray-600">
+                    {formatDate(order.createdAt)}
+                  </td>
+                  <td className="px-6 py-3 font-semibold text-green-600">
+                    ₹{order.totalAmount}
+                  </td>
+                  <td className="px-6 py-3">
+                    <StatusBadge status={order.status} />
+                  </td>
+                  <td className="px-6 py-3">
+                    <PaymentBadge status={order.paymentStatus} />
+                  </td>
+
+                  <td className="px-6 py-3 text-right">
+                    <button
+                      onClick={() => navigate(`/orders/${order.id}`)}
+                      className="text-blue-600 hover:text-blue-800 flex items-center gap-1"
+                    >
+                      <Eye size={16} /> View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrderList;
diff --git a/src/pages/Orders/OrderStatusModal.jsx b/src/pages/Orders/OrderStatusModal.jsx
new file mode 100644
index 0000000..5dc0275
--- /dev/null
+++ b/src/pages/Orders/OrderStatusModal.jsx
@@ -0,0 +1,68 @@
+import React from "react";
+
+const OrderStatusModal = ({ order, onClose, onSave }) => {
+  const [status, setStatus] = React.useState(order.status);
+  const [paymentStatus, setPaymentStatus] = React.useState(order.paymentStatus);
+
+  const handleSave = () => {
+    onSave({ status, paymentStatus });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50">
+      <div className="bg-white rounded-2xl shadow-lg p-6 w-96 space-y-4">
+        <h2 className="text-lg font-semibold text-gray-800">Update Order</h2>
+
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">
+              Order Status
+            </label>
+            <select
+              value={status}
+              onChange={(e) => setStatus(e.target.value)}
+              className="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            >
+              <option value="PENDING">PENDING</option>
+              <option value="SHIPPED">SHIPPED</option>
+              <option value="DELIVERED">DELIVERED</option>
+              <option value="CANCELLED">CANCELLED</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">
+              Payment Status
+            </label>
+            <select
+              value={paymentStatus}
+              onChange={(e) => setPaymentStatus(e.target.value)}
+              className="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            >
+              <option value="PENDING">PENDING</option>
+              <option value="PAID">PAID</option>
+              <option value="FAILED">FAILED</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 pt-4">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderStatusModal;
diff --git a/src/pages/Orders/StatusUpdateForm.jsx b/src/pages/Orders/StatusUpdateForm.jsx
new file mode 100644
index 0000000..f2c574f
--- /dev/null
+++ b/src/pages/Orders/StatusUpdateForm.jsx
@@ -0,0 +1,100 @@
+// components/admin/StatusUpdateForm.jsx
+
+import { useState } from 'react';
+import { useUpdateOrderStatusMutation } from '../../features/orders/ordersAPI';
+
+const StatusUpdateForm = ({ orderId, currentStatus }) => {
+  const [status, setStatus] = useState(currentStatus);
+  const [trackingNumber, setTrackingNumber] = useState('');
+  const [notes, setNotes] = useState('');
+  
+  const [updateStatus, { isLoading }] = useUpdateOrderStatusMutation();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      await updateStatus({
+       id: orderId,  
+        status,
+        trackingNumber,
+        notes,
+      }).unwrap();
+
+      alert('Status updated successfully!');
+      setTrackingNumber('');
+      setNotes('');
+    } catch (error) {
+      alert('Failed to update status');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-6">
+      <h3 className="font-bold text-lg mb-4">Update Order Status</h3>
+
+      <div className="space-y-4">
+        {/* Status Dropdown */}
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            New Status
+          </label>
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="w-full border rounded-lg px-3 py-2"
+          >
+            <option value="PENDING">Pending</option>
+            <option value="CONFIRMED">Confirmed</option>
+            <option value="PROCESSING">Processing</option>
+            <option value="SHIPPED">Shipped</option>
+            <option value="DELIVERED">Delivered</option>
+            <option value="CANCELLED">Cancelled</option>
+          </select>
+        </div>
+
+        {/* Tracking Number (show for SHIPPED status) */}
+        {status === 'SHIPPED' && (
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              Tracking Number
+            </label>
+            <input
+              type="text"
+              value={trackingNumber}
+              onChange={(e) => setTrackingNumber(e.target.value)}
+              placeholder="TRK123456789"
+              className="w-full border rounded-lg px-3 py-2"
+            />
+          </div>
+        )}
+
+        {/* Notes */}
+        <div>
+          <label className="block text-sm font-medium mb-2">
+            Notes (Optional)
+          </label>
+          <textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder="Add any notes about this status change..."
+            rows={3}
+            className="w-full border rounded-lg px-3 py-2"
+          />
+        </div>
+
+        {/* Submit Button */}
+        <button
+          type="submit"
+          disabled={isLoading || status === currentStatus}
+          className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-300"
+        >
+          {isLoading ? 'Updating...' : 'Update Status'}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+
+export default StatusUpdateForm;
\ No newline at end of file
diff --git a/src/pages/Products/ProductAdd.jsx b/src/pages/Products/ProductAdd.jsx
new file mode 100644
index 0000000..a88c209
--- /dev/null
+++ b/src/pages/Products/ProductAdd.jsx
@@ -0,0 +1,887 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { motion } from "framer-motion";
+import { useGetCategoryTreeQuery } from "../../features/categories/categoryAPI";
+import { flattenCategories } from "../../utils/flattenCategories";
+
+const ProductAdd = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    slug: "",
+    description: "",
+    category: "",
+    tags: "",
+    basePrice: "",
+    hasVariants: false,
+    metaKeywords: "",
+    status: "active",
+    isFeatured: false,
+    isDigital: false,
+    weightValue: "",
+    weightUnit: "g",
+    length: "",
+    width: "",
+    height: "",
+    dimensionUnit: "cm",
+  });
+
+  const [previewImages, setPreviewImages] = useState([]);
+
+  const [primaryImage, setPrimaryImage] = useState(null);
+  const [primaryPreview, setPrimaryPreview] = useState(null);
+
+  const [galleryFiles, setGalleryFiles] = useState([]);
+  const [galleryPreviews, setGalleryPreviews] = useState([]);
+
+  const [variants, setVariants] = useState([
+    {
+      color: "",
+      price: "",
+      stock: "",
+      primaryImage: null,
+      galleryImages: [],
+      primaryPreview: null,
+      galleryPreviews: [],
+    },
+  ]);
+
+  // ✅ Fetch categories
+  const { data: categoryResponse, isLoading } = useGetCategoryTreeQuery();
+  const categories = categoryResponse?.data || [];
+
+  const flatCategories = flattenCategories(categories);
+
+  console.log("Categories from API:", categories);
+  console.log("Flattened categories:", flattenCategories(categories));
+
+  // handle text/checkbox input
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData({
+      ...formData,
+      [name]: type === "checkbox" ? checked : value,
+    });
+  };
+  console.log("Submitting category ID:", formData.category);
+
+  // Primary Image
+  const handlePrimaryImage = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    setPrimaryImage(file);
+    setPrimaryPreview(URL.createObjectURL(file));
+  };
+
+  // Gallery Images (MAX 5)
+  const handleGalleryImages = (e) => {
+    const files = Array.from(e.target.files).slice(0, 5);
+
+    setGalleryFiles(files);
+    setGalleryPreviews(files.map((file) => URL.createObjectURL(file)));
+  };
+
+  const addVariant = () => {
+    setVariants([
+      ...variants,
+      {
+        color: "",
+        price: "",
+        stock: "",
+        primaryImage: null,
+        galleryImages: [],
+      },
+    ]);
+  };
+
+  const updateVariant = (index, field, value) => {
+    const updated = [...variants];
+    updated[index][field] = value;
+    setVariants(updated);
+  };
+
+  const handleVariantPrimary = (index, e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const updated = [...variants];
+    updated[index].primaryImage = file;
+    updated[index].primaryPreview = URL.createObjectURL(file);
+    setVariants(updated);
+  };
+
+  const handleVariantGallery = (index, e) => {
+    const files = Array.from(e.target.files).slice(0, 5);
+    const updated = [...variants];
+    updated[index].galleryImages = files;
+    updated[index].galleryPreviews = files.map((f) => URL.createObjectURL(f));
+    setVariants(updated);
+  };
+
+  const removeGalleryImage = (index) => {
+    setGalleryFiles((prev) => prev.filter((_, i) => i !== index));
+    setGalleryPreviews((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const token = localStorage.getItem("token");
+      const form = new FormData();
+
+      // ======================
+      // VALIDATION
+      // ======================
+      // if (!formData.name || !formData.slug) {
+      //   alert("❌ Name and slug are required");
+      //   return;
+      // }
+
+      // ======================
+      // BASIC FIELDS
+      // ======================
+      form.append("name", formData.name);
+      form.append("slug", formData.slug);
+      form.append("description", formData.description || "");
+
+      // Only append category if it's not empty
+      if (formData.category) {
+        form.append("category", formData.category);
+      }
+
+      // Convert basePrice to number and validate
+      const basePrice = Number(formData.basePrice);
+      if (!isNaN(basePrice) && basePrice > 0) {
+        form.append("basePrice", basePrice);
+      } else {
+        alert("❌ Valid base price is required");
+        return;
+      }
+
+      form.append("status", formData.status);
+
+      form.append("hasVariants", formData.hasVariants);
+      form.append("isFeatured", formData.isFeatured);
+      form.append("isDigital", formData.isDigital);
+
+      // ======================
+      // ARRAYS
+      // ======================
+      const tags = formData.tags
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean);
+
+      if (tags.length > 0) {
+        tags.forEach((tag) => form.append("tags[]", tag));
+      }
+
+      const keywords = formData.metaKeywords
+        .split(",")
+        .map((k) => k.trim())
+        .filter(Boolean);
+
+      if (keywords.length > 0) {
+        keywords.forEach((k) => form.append("metaKeywords[]", k));
+      }
+
+      // ======================
+      // WEIGHT & DIMENSIONS
+      // ======================
+      if (formData.weightValue) {
+        form.append("weight[value]", Number(formData.weightValue));
+        form.append("weight[unit]", formData.weightUnit);
+      }
+
+      if (formData.length || formData.width || formData.height) {
+        if (formData.length)
+          form.append("dimensions[length]", Number(formData.length));
+        if (formData.width)
+          form.append("dimensions[width]", Number(formData.width));
+        if (formData.height)
+          form.append("dimensions[height]", Number(formData.height));
+        form.append("dimensions[unit]", formData.dimensionUnit);
+      }
+
+      // ======================
+      // VARIANTS MODE
+      // ======================
+      if (formData.hasVariants) {
+        // Validate variants
+        const validVariants = variants.filter(
+          (v) => v.color && v.price && v.stock,
+        );
+
+        if (validVariants.length === 0) {
+          alert("❌ Please add at least one complete variant");
+          return;
+        }
+
+        // 🔥 SEND VARIANTS AS JSON
+        const cleanVariants = validVariants.map((v) => ({
+          size: "default",
+          color: v.color,
+          sku: `${formData.slug}-${v.color.toLowerCase().replace(/\s+/g, "-")}`,
+          price: Number(v.price),
+          compareAtPrice: null,
+          inventory: {
+            quantity: Number(v.stock),
+            trackInventory: true,
+          },
+        }));
+
+        form.append("variants", JSON.stringify(cleanVariants));
+
+        // 🔥 VARIANT IMAGES
+        // VARIANT IMAGES
+        // 🔥 VARIANT IMAGES - Using color as field identifier
+        validVariants.forEach((variant) => {
+          const color = variant.color.trim();
+          const fieldName = `variantImages_${color}`;
+
+          console.log(`📤 Processing variant: ${color}`);
+          console.log(`📤 Field name: ${fieldName}`);
+
+          // Combine primary + gallery images
+          const allImages = [];
+
+          if (variant.primaryImage) {
+            allImages.push(variant.primaryImage);
+          }
+
+          if (variant.galleryImages?.length) {
+            allImages.push(...variant.galleryImages);
+          }
+
+          // Append all images with the color-based field name
+          allImages.forEach((img) => {
+            form.append(fieldName, img);
+          });
+
+          console.log(`✅ Sent ${allImages.length} images for ${color}`);
+        });
+      }
+
+      // ======================
+      // SIMPLE PRODUCT MODE
+      // ======================
+      else {
+        if (primaryImage) {
+          form.append("primaryImage", primaryImage);
+        }
+
+        galleryFiles.forEach((file) => {
+          form.append("galleryImages", file);
+        });
+      }
+
+      // ======================
+      // DEBUG LOG
+      // ======================
+      console.log("📦 FormData contents:");
+      for (let pair of form.entries()) {
+        console.log(pair[0], ":", pair[1]);
+      }
+
+      // ======================
+      // API CALL
+      // ======================
+      const response = await axios.post(
+        "http://localhost:3000/api/admin/products",
+        form,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        },
+      );
+
+      console.log("✅ Success:", response.data);
+      alert("✅ Product created successfully!");
+
+      // Reset form
+      setFormData({
+        name: "",
+        slug: "",
+        description: "",
+        category: "",
+        tags: "",
+        basePrice: "",
+        hasVariants: false,
+        metaKeywords: "",
+        status: "active",
+        isFeatured: false,
+        isDigital: false,
+        weightValue: "",
+        weightUnit: "g",
+        length: "",
+        width: "",
+        height: "",
+        dimensionUnit: "cm",
+      });
+      setPrimaryImage(null);
+      setPrimaryPreview(null);
+      setGalleryFiles([]);
+      setGalleryPreviews([]);
+      setVariants([
+        {
+          color: "",
+          price: "",
+          stock: "",
+          primaryImage: null,
+          galleryImages: [],
+          primaryPreview: null,
+          galleryPreviews: [],
+        },
+      ]);
+    } catch (err) {
+      console.error("❌ Error details:", err);
+
+      if (err.response) {
+        // Server responded with error
+        console.error("Response data:", err.response.data);
+        console.error("Response status:", err.response.status);
+        console.error("Response headers:", err.response.headers);
+
+        const errorMessage =
+          err.response.data?.message ||
+          err.response.data?.error ||
+          JSON.stringify(err.response.data);
+
+        alert(`❌ Server Error: ${errorMessage}`);
+      } else if (err.request) {
+        // Request made but no response
+        console.error("No response received:", err.request);
+        alert("❌ No response from server. Check if backend is running.");
+      } else {
+        // Error in request setup
+        console.error("Error setting up request:", err.message);
+        alert(`❌ Error: ${err.message}`);
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-6">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="max-w-7xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200"
+      >
+        <div className="px-8 py-6 bg-gradient-to-r from-indigo-500 to-blue-500 text-white">
+          <h2 className="text-3xl font-semibold">Add New Product</h2>
+          <p className="text-sm text-indigo-100 mt-1">
+            Fill in details below to create a new product listing.
+          </p>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="grid grid-cols-1 md:grid-cols-2 gap-10 p-8"
+        >
+          {/* Left Side */}
+          <div className="space-y-8">
+            <div className="bg-white border rounded-xl shadow-sm p-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                🧾 Basic Information
+              </h3>
+              <div className="space-y-4">
+                <Input
+                  label="Product Name *"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  placeholder="e.g. Elegant Silk Saree"
+                  required
+                />
+
+                <div>
+                  <label className="block font-medium text-gray-700">
+                    Slug (auto)
+                  </label>
+                  <input
+                    value={formData.name
+                      .toLowerCase()
+                      .replace(/[^a-z0-9]+/g, "-")
+                      .replace(/(^-|-$)/g, "")}
+                    disabled
+                    className="mt-2 w-full bg-gray-100 border rounded-lg px-4 py-2"
+                  />
+                </div>
+
+                <Textarea
+                  label="Description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleChange}
+                  placeholder="Describe your product"
+                />
+
+                {/* ✅ Category Select */}
+                <Select
+                  label="Category"
+                  name="category"
+                  value={formData.category} // stores ID
+                  onChange={handleChange}
+                  options={
+                    isLoading
+                      ? [{ value: "", label: "Loading categories..." }]
+                      : flatCategories
+                  }
+                />
+              </div>
+            </div>
+
+            <div className="bg-white border rounded-xl shadow-sm p-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                🏷️ Product Details
+              </h3>
+              <div className="space-y-4">
+                <Input
+                  label="Base Price (₹) *"
+                  name="basePrice"
+                  type="number"
+                  value={formData.basePrice}
+                  onChange={handleChange}
+                  placeholder="2599"
+                  required
+                />
+
+                <Input
+                  label="Tags (comma separated)"
+                  name="tags"
+                  value={formData.tags}
+                  onChange={handleChange}
+                  placeholder="saree, silk, ethnic"
+                />
+
+                <Input
+                  label="Meta Keywords"
+                  name="metaKeywords"
+                  value={formData.metaKeywords}
+                  onChange={handleChange}
+                  placeholder="wedding, women, fashion"
+                />
+
+                <div className="flex flex-wrap gap-4 pt-2">
+                  {[
+                    { name: "hasVariants", label: "Has Variants" },
+                    { name: "isFeatured", label: "Featured" },
+                    { name: "isDigital", label: "Digital" },
+                  ].map((opt) => (
+                    <label
+                      key={opt.name}
+                      className="flex items-center space-x-2 text-gray-700"
+                    >
+                      <input
+                        type="checkbox"
+                        name={opt.name}
+                        checked={formData[opt.name]}
+                        onChange={handleChange}
+                      />
+                      <span>{opt.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {formData.hasVariants && (
+              <div className="bg-white border rounded-xl shadow-sm p-6">
+                <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                  🎨 Product Variants
+                </h3>
+
+                {variants.map((variant, index) => (
+                  <div
+                    key={index}
+                    className="border-2 border-indigo-200 rounded-xl p-5 mb-6 space-y-4 bg-gradient-to-br from-white to-indigo-50"
+                  >
+                    <div className="flex items-center justify-between">
+                      <h4 className="font-semibold text-indigo-600 text-lg">
+                        🎨 Variant #{index + 1}
+                      </h4>
+                      {variants.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setVariants(variants.filter((_, i) => i !== index));
+                          }}
+                          className="text-red-500 hover:text-red-700 text-sm font-medium"
+                        >
+                          🗑️ Remove
+                        </button>
+                      )}
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <Input
+                        label="Color *"
+                        value={variant.color}
+                        onChange={(e) =>
+                          updateVariant(index, "color", e.target.value)
+                        }
+                        placeholder="e.g. Red, Blue, Green"
+                      />
+
+                      <Input
+                        label="Price (₹) *"
+                        type="number"
+                        value={variant.price}
+                        onChange={(e) =>
+                          updateVariant(index, "price", e.target.value)
+                        }
+                        placeholder="2599"
+                      />
+
+                      <Input
+                        label="Stock Quantity *"
+                        type="number"
+                        value={variant.stock}
+                        onChange={(e) =>
+                          updateVariant(index, "stock", e.target.value)
+                        }
+                        placeholder="50"
+                      />
+                    </div>
+
+                    {/* Variant Images */}
+                    <div className="bg-white rounded-lg p-4 border border-indigo-100 space-y-4">
+                      <h5 className="font-semibold text-gray-700 text-sm">
+                        📸 Variant Images
+                      </h5>
+
+                      {/* Primary Image for Variant */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-600 mb-2">
+                          Primary Image
+                        </label>
+
+                        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition">
+                          <input
+                            type="file"
+                            accept="image/*"
+                            onChange={(e) => handleVariantPrimary(index, e)}
+                            className="hidden"
+                          />
+
+                          {!variant.primaryPreview ? (
+                            <>
+                              <span className="text-gray-400 text-2xl">📷</span>
+                              <p className="text-xs text-gray-500 mt-1">
+                                Upload primary image
+                              </p>
+                            </>
+                          ) : (
+                            <div className="relative">
+                              <img
+                                src={variant.primaryPreview}
+                                className="w-32 h-32 object-cover rounded border-2 border-indigo-300"
+                                alt={`Variant ${index + 1} primary`}
+                              />
+                              <span className="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs px-2 py-0.5 rounded-full">
+                                Primary
+                              </span>
+                            </div>
+                          )}
+                        </label>
+                      </div>
+
+                      {/* Gallery Images for Variant */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-600 mb-2">
+                          Gallery Images{" "}
+                          <span className="text-xs text-gray-400">(Max 5)</span>
+                        </label>
+
+                        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition">
+                          <input
+                            type="file"
+                            multiple
+                            accept="image/*"
+                            onChange={(e) => handleVariantGallery(index, e)}
+                            className="hidden"
+                          />
+
+                          <span className="text-gray-400 text-2xl">🖼️</span>
+                          <p className="text-xs text-gray-500 mt-1">
+                            Upload gallery images
+                          </p>
+                        </label>
+
+                        {variant.galleryPreviews?.length > 0 && (
+                          <div className="grid grid-cols-3 sm:grid-cols-4 gap-3 mt-3">
+                            {variant.galleryPreviews.map((src, i) => (
+                              <div
+                                key={i}
+                                className="relative group rounded border-2 border-gray-200 overflow-hidden"
+                              >
+                                <img
+                                  src={src}
+                                  className="w-full h-24 object-cover"
+                                  alt={`Variant ${index + 1} gallery ${i + 1}`}
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    const updated = [...variants];
+                                    updated[index].galleryImages = updated[
+                                      index
+                                    ].galleryImages.filter(
+                                      (_, idx) => idx !== i,
+                                    );
+                                    updated[index].galleryPreviews = updated[
+                                      index
+                                    ].galleryPreviews.filter(
+                                      (_, idx) => idx !== i,
+                                    );
+                                    setVariants(updated);
+                                  }}
+                                  className="absolute top-1 right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"
+                                >
+                                  ✕
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+
+                <button
+                  type="button"
+                  onClick={addVariant}
+                  className="mt-4 bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition"
+                >
+                  ➕ Add Another Variant
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Right Side */}
+          <div className="space-y-8">
+            {/* Weight & Dimensions */}
+            <div className="bg-white border rounded-xl shadow-sm p-6">
+              <h3 className="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">
+                📦 Weight & Dimensions
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                <Input
+                  label="Weight"
+                  name="weightValue"
+                  type="number"
+                  value={formData.weightValue}
+                  onChange={handleChange}
+                  placeholder="700"
+                />
+                <Select
+                  label="Unit"
+                  name="weightUnit"
+                  value={formData.weightUnit}
+                  onChange={handleChange}
+                  options={[
+                    { value: "g", label: "g" },
+                    { value: "kg", label: "kg" },
+                  ]}
+                />
+              </div>
+
+              <div className="grid grid-cols-3 gap-3 mt-4">
+                {["length", "width", "height"].map((dim) => (
+                  <Input
+                    key={dim}
+                    label={dim.charAt(0).toUpperCase() + dim.slice(1)}
+                    name={dim}
+                    type="number"
+                    value={formData[dim]}
+                    onChange={handleChange}
+                    placeholder="10"
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Image Upload Section */}
+            <div className="bg-white border rounded-xl shadow-sm p-6 space-y-8">
+              <h3 className="text-xl font-semibold text-gray-800 border-b pb-2">
+                🖼️ Product Images
+              </h3>
+
+              {!formData.hasVariants ? (
+                <>
+                  {/* Simple Product Images */}
+                  {/* Primary Image */}
+                  <div>
+                    <label className="block font-medium text-gray-700 mb-3">
+                      Primary Image
+                    </label>
+
+                    <label className="flex flex-col items-center justify-center border-2 border-dashed rounded-xl p-6 cursor-pointer hover:bg-indigo-50 transition">
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={handlePrimaryImage}
+                        className="hidden"
+                      />
+
+                      {!primaryPreview ? (
+                        <>
+                          <span className="text-indigo-500 text-3xl">⬆️</span>
+                          <p className="text-sm text-gray-600 mt-2">
+                            Click to upload primary image
+                          </p>
+                        </>
+                      ) : (
+                        <div className="relative">
+                          <img
+                            src={primaryPreview}
+                            className="w-48 h-48 object-cover rounded-lg border shadow-md"
+                            alt="Primary preview"
+                          />
+                          <span className="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">
+                            Primary
+                          </span>
+                        </div>
+                      )}
+                    </label>
+                  </div>
+
+                  {/* Gallery Images */}
+                  <div>
+                    <label className="block font-medium text-gray-700 mb-3">
+                      Gallery Images{" "}
+                      <span className="text-xs text-gray-400">(Max 5)</span>
+                    </label>
+
+                    <label className="flex flex-col items-center justify-center border-2 border-dashed rounded-xl p-6 cursor-pointer hover:bg-indigo-50 transition">
+                      <input
+                        type="file"
+                        multiple
+                        accept="image/*"
+                        onChange={handleGalleryImages}
+                        className="hidden"
+                      />
+
+                      <span className="text-indigo-500 text-3xl">🖼️</span>
+                      <p className="text-sm text-gray-600 mt-2">
+                        Click to upload gallery images
+                      </p>
+                    </label>
+
+                    {galleryPreviews.length > 0 && (
+                      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 mt-5">
+                        {galleryPreviews.map((src, i) => (
+                          <div
+                            key={i}
+                            className="relative group rounded-lg overflow-hidden border shadow-sm"
+                          >
+                            <img
+                              src={src}
+                              className="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105"
+                              alt={`Gallery preview ${i + 1}`}
+                            />
+
+                            <button
+                              type="button"
+                              onClick={() => removeGalleryImage(i)}
+                              className="absolute top-1 right-1 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition"
+                            >
+                              ✕
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </>
+              ) : (
+                <div className="text-center py-8 bg-indigo-50 rounded-lg border-2 border-indigo-200">
+                  <span className="text-4xl">🎨</span>
+                  <p className="text-gray-600 mt-3 font-medium">
+                    Upload images for each variant in the Variant section
+                  </p>
+                  <p className="text-sm text-gray-500 mt-1">
+                    Each color variant can have its own set of images
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <div className="text-right">
+              <button
+                type="submit"
+                className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-10 py-3 rounded-xl shadow-md transition duration-300"
+              >
+                Add Product
+              </button>
+            </div>
+          </div>
+        </form>
+      </motion.div>
+    </div>
+  );
+};
+
+/* ===== Reusable Components ===== */
+const Input = ({
+  label,
+  name,
+  type = "text",
+  value,
+  onChange,
+  placeholder,
+  required = false,
+}) => (
+  <div>
+    <label className="block font-medium text-gray-700">{label}</label>
+    <input
+      type={type}
+      name={name}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      required={required}
+      className="mt-2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-400"
+    />
+  </div>
+);
+
+const Textarea = ({ label, name, value, onChange, placeholder }) => (
+  <div>
+    <label className="block font-medium text-gray-700">{label}</label>
+    <textarea
+      name={name}
+      value={value}
+      onChange={onChange}
+      rows={3}
+      placeholder={placeholder}
+      className="mt-2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-400"
+    />
+  </div>
+);
+
+const Select = ({ label, name, value, onChange, options }) => (
+  <div>
+    <label className="block font-medium text-gray-700">{label}</label>
+    <select
+      name={name}
+      value={value}
+      onChange={onChange}
+      className="mt-2 w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-400"
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  </div>
+);
+
+export default ProductAdd;
diff --git a/src/pages/Products/ProductDetails.jsx b/src/pages/Products/ProductDetails.jsx
new file mode 100644
index 0000000..a16d298
--- /dev/null
+++ b/src/pages/Products/ProductDetails.jsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import axios from "../../app/api";
+import { ArrowLeft } from "lucide-react";
+
+const ProductDetails = () => {
+  const { slug } = useParams();
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+     .get(`/products/${slug}`)
+      .then((res) => {
+        setProduct(res.data.data.product);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, [slug]);
+
+  if (loading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading product details...
+      </div>
+    );
+
+  if (!product)
+    return (
+      <div className="text-center mt-10 text-gray-600">Product not found!</div>
+    );
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      {/* Back Button */}
+      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+        <ArrowLeft size={18} />
+        <Link to="/products" className="font-medium">
+          Back to Products
+        </Link>
+      </div>
+
+      {/* Product Header */}
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between bg-white shadow-md rounded-2xl p-6 border border-gray-100">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{product.name}</h2>
+          <p className="text-gray-500 text-sm mt-1">{product.slug}</p>
+        </div>
+        <div className="mt-4 md:mt-0">
+          <p className="text-3xl font-semibold text-green-600">
+            ₹{product.basePrice?.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {/* Product Info */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Product Details
+          </h3>
+          <InfoRow label="Description" value={product.description || "N/A"} />
+          <InfoRow label="Category ID" value={product.category || "N/A"} />
+          <InfoRow label="Status" value={product.status || "N/A"} />
+          <InfoRow label="Featured" value={product.isFeatured ? "Yes" : "No"} />
+          <InfoRow label="Digital" value={product.isDigital ? "Yes" : "No"} />
+        </div>
+
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100 space-y-3">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-2">
+            Analytics
+          </h3>
+          <InfoRow label="View Count" value={product.viewCount || 0} />
+          <InfoRow label="Purchase Count" value={product.purchaseCount || 0} />
+          <InfoRow
+            label="Created At"
+            value={new Date(product.createdAt).toLocaleString()}
+          />
+          <InfoRow
+            label="Updated At"
+            value={new Date(product.updatedAt).toLocaleString()}
+          />
+        </div>
+      </div>
+
+      {/* Images Section */}
+      {product.images?.gallery?.length > 0 && (
+        <div className="bg-white shadow-sm rounded-xl p-6 border border-gray-100">
+          <h3 className="text-lg font-semibold text-gray-700 border-b pb-3">
+            Product Images
+          </h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4">
+            {product.images.gallery.map((img, idx) => (
+              <div
+                key={idx}
+                className="overflow-hidden rounded-lg border hover:shadow-md transition-all"
+              >
+                <img
+                  src={img}
+                  alt={`product-${idx}`}
+                  className="w-full h-40 object-cover"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Small helper component for clean info rows
+const InfoRow = ({ label, value }) => (
+  <div className="flex justify-between text-sm text-gray-700">
+    <span className="font-medium text-gray-600">{label}:</span>
+    <span className="text-gray-800">{value}</span>
+  </div>
+);
+
+export default ProductDetails;
diff --git a/src/pages/Products/ProductEdit.jsx b/src/pages/Products/ProductEdit.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Products/ProductList.jsx b/src/pages/Products/ProductList.jsx
new file mode 100644
index 0000000..444a05e
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/Reports/CustomersReport.jsx b/src/pages/Reports/CustomersReport.jsx
new file mode 100644
index 0000000..426311a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/Reports/InventoryReport.jsx b/src/pages/Reports/InventoryReport.jsx
new file mode 100644
index 0000000..06fc370
--- /dev/null
+++ b/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;
diff --git a/src/pages/Reports/OrderStatusCards.jsx b/src/pages/Reports/OrderStatusCards.jsx
new file mode 100644
index 0000000..f1feb73
--- /dev/null
+++ b/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;
diff --git a/src/pages/Reports/ReportsDashboard.jsx b/src/pages/Reports/ReportsDashboard.jsx
new file mode 100644
index 0000000..d3275c3
--- /dev/null
+++ b/src/pages/Reports/ReportsDashboard.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import SalesReport from "./SalesReport";
+import CustomersReport from "./CustomersReport";
+import OrderStatusCards from "./OrderStatusCards";
+import InventoryReport from "./InventoryReport";
+
+const ReportsDashboard = () => {
+  return (
+    <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-3">
+        <InventoryReport />
+      </div>
+      <div className="md:col-span-3">
+        <SalesReport />
+      </div>
+      <div className="md:col-span-3">
+        <CustomersReport />
+      </div>
+      <div className="md:col-span-3">
+        <OrderStatusCards />
+      </div>
+    </div>
+  );
+};
+
+export default ReportsDashboard;
diff --git a/src/pages/Reports/SalesReport.jsx b/src/pages/Reports/SalesReport.jsx
new file mode 100644
index 0000000..0524ea7
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/Returns/components/ReturnCard.jsx b/src/pages/Returns/components/ReturnCard.jsx
new file mode 100644
index 0000000..9006821
--- /dev/null
+++ b/src/pages/Returns/components/ReturnCard.jsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useUpdateReturnStatusMutation } from "../../../features/orders/ordersAPI";
+import ConfirmModal from '../../../components/common/ConfirmModal';
+
+const ReturnCard = ({ order }) => {
+  const [updateReturnStatus] = useUpdateReturnStatusMutation();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [actionType, setActionType] = useState(null);
+
+  const handleAction = async () => {
+    if (!actionType) return;
+    await updateReturnStatus({ id: order.id, action: actionType });
+    setModalOpen(false);
+  };
+
+  return (
+    <div className="p-4 border rounded-lg shadow-sm bg-white">
+      <h3 className="font-semibold text-lg">Order #{order.orderNumber}</h3>
+      <p className="text-gray-600">
+        Customer: {order.user?.firstName} {order.user?.lastName}
+      </p>
+      <p className="text-gray-600">Total: ₹{order.totalAmount}</p>
+      <p className="text-gray-600">Status: {order.returnStatus}</p>
+
+      <div className="mt-2 flex gap-2">
+        {order.returnStatus === 'REQUESTED' && (
+          <>
+            <button
+              onClick={() => { setActionType('APPROVE'); setModalOpen(true); }}
+              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+            >
+              Approve
+            </button>
+            <button
+              onClick={() => { setActionType('REJECT'); setModalOpen(true); }}
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              Reject
+            </button>
+          </>
+        )}
+      </div>
+
+      <ConfirmModal
+        isOpen={modalOpen}
+        title={actionType ? `${actionType} Return Request` : ''}
+        message={actionType ? `Are you sure you want to ${actionType.toLowerCase()} this return request?` : ''}
+        onCancel={() => setModalOpen(false)}
+        onConfirm={handleAction}
+      />
+    </div>
+  );
+};
+
+export default ReturnCard;
diff --git a/src/pages/Returns/components/ReturnDetails.jsx b/src/pages/Returns/components/ReturnDetails.jsx
new file mode 100644
index 0000000..3b6c686
--- /dev/null
+++ b/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;
diff --git a/src/pages/Returns/components/ReturnHistory.jsx b/src/pages/Returns/components/ReturnHistory.jsx
new file mode 100644
index 0000000..9276250
--- /dev/null
+++ b/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;
diff --git a/src/pages/Returns/components/ReturnList.jsx b/src/pages/Returns/components/ReturnList.jsx
new file mode 100644
index 0000000..3977eb1
--- /dev/null
+++ b/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;
diff --git a/src/pages/Returns/index.js b/src/pages/Returns/index.js
new file mode 100644
index 0000000..c105b06
--- /dev/null
+++ b/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';
diff --git a/src/pages/Settings/ProfileSettings.jsx b/src/pages/Settings/ProfileSettings.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Settings/SettingsPage.jsx b/src/pages/Settings/SettingsPage.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Users/StatusBadge.jsx b/src/pages/Users/StatusBadge.jsx
new file mode 100644
index 0000000..7d303ce
--- /dev/null
+++ b/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;
diff --git a/src/pages/Users/UserDetails.jsx b/src/pages/Users/UserDetails.jsx
new file mode 100644
index 0000000..a70cbf4
--- /dev/null
+++ b/src/pages/Users/UserDetails.jsx
@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import axios from "../../app/api";
+import { ArrowLeft, Mail, Shield, User as UserIcon, Activity, Clock } from "lucide-react";
+import StatusBadge from "./StatusBadge";
+import { formatDate } from "../../utils/formatDate";
+
+const UserDetails = () => {
+  const { id } = useParams();
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+      .get(`/admin/users/${id}`)
+      .then((res) => {
+        setUser(res.data.data.user);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, [id]);
+
+  if (loading)
+    return (
+      <div className="flex justify-center items-center h-64 text-gray-600">
+        Loading user details...
+      </div>
+    );
+
+  if (!user)
+    return (
+      <div className="text-center mt-10 text-gray-600">User 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="/users" className="font-medium">
+          Back to Users
+        </Link>
+      </div>
+
+      {/* Header Card */}
+      <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 className="flex items-center gap-4">
+          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-2xl font-semibold uppercase">
+            {user.firstName?.[0] || "U"}
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-gray-800">
+              {user.firstName} {user.lastName}
+            </h2>
+            <div className="flex items-center text-gray-500 text-sm space-x-2 mt-1">
+              <Mail size={16} className="text-blue-500" />
+              <span>{user.email}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-4 md:mt-0">
+          <StatusBadge
+            value={user.isActive}
+            trueText="Active"
+            falseText="Inactive"
+          />
+        </div>
+      </div>
+
+      {/* Details Section */}
+      <div className="grid md:grid-cols-2 gap-6">
+        {/* Left - User 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">
+            User Information
+          </h3>
+          <InfoRow icon={<UserIcon />} label="Username" value={user.username} />
+          <InfoRow icon={<Shield />} label="Role" value={user.role} />
+          <InfoRow
+            label="Verified"
+            value={
+              <StatusBadge
+                value={user.isVerified}
+                trueText="Yes"
+                falseText="No"
+              />
+            }
+          />
+          <InfoRow
+            label="Email Verified"
+            value={user.isVerified ? "Yes" : "No"}
+          />
+          <InfoRow
+            label="Created At"
+            value={formatDate(user.createdAt)}
+          />
+        </div>
+
+        {/* Right - Activity 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">
+            Account Activity
+          </h3>
+          <InfoRow
+            icon={<Activity />}
+            label="Last Login"
+            value={formatDate(user.lastLoginAt)}
+          />
+          <InfoRow
+            icon={<Clock />}
+            label="Last Updated"
+            value={formatDate(user.updatedAt || user.lastLoginAt)}
+          />
+          <InfoRow label="Account Status" value={user.isActive ? "Active" : "Inactive"} />
+          <InfoRow label="Role" value={user.role} />
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex justify-end gap-4 pt-6">
+        <button className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-all">
+          Edit User
+        </button>
+        <button className="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-red-50 hover:text-red-600 transition-all">
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// Reusable Info Row
+const InfoRow = ({ icon, label, value }) => (
+  <div className="flex justify-between items-center text-sm text-gray-700">
+    <div className="flex items-center gap-2 text-gray-600">
+      {icon && <span className="text-blue-500">{icon}</span>}
+      <span className="font-medium">{label}:</span>
+    </div>
+    <span className="text-gray-800 font-medium">{value || "—"}</span>
+  </div>
+);
+
+export default UserDetails;
diff --git a/src/pages/Users/UserList.jsx b/src/pages/Users/UserList.jsx
new file mode 100644
index 0000000..3d47c21
--- /dev/null
+++ b/src/pages/Users/UserList.jsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from "react";
+import axios from "../../app/api";
+import Table from "../../components/common/Table";
+import Pagination from "../../components/common/Pagination";
+import { FiEdit, FiTrash2, FiEye } from "react-icons/fi";
+import { useNavigate } from "react-router-dom";
+
+const UserList = () => {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 10;
+
+  useEffect(() => {
+    axios
+      .get("/admin/users")
+      .then((res) => {
+        setUsers(res.data.data.users);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, []);
+
+  const totalPages = Math.ceil(users.length / perPage);
+  const paginatedData = users.slice(
+    (currentPage - 1) * perPage,
+    currentPage * perPage
+  );
+
+  // Table columns
+  const columns = [
+    {
+      key: "sr",
+      label: "Sr. No.",
+      render: (_, __, index) => index + 1, // index passed from Table
+    },
+    // { key: "name", label: "Name" },
+    {
+      key: "name",
+      label: "Name",
+      render: (_, row) => `${row.firstName} ${row.lastName}`,
+    },
+
+    { key: "email", label: "Email" },
+    { key: "username", label: "Username" },
+    { key: "role", label: "Role" },
+    {
+      key: "verified",
+      label: "Verified",
+      render: (value) =>
+        value ? (
+          <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
+            Yes
+          </span>
+        ) : (
+          <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
+            No
+          </span>
+        ),
+    },
+    {
+      key: "active",
+      label: "Active",
+      render: (value) =>
+        value ? (
+          <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
+            Active
+          </span>
+        ) : (
+          <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
+            Inactive
+          </span>
+        ),
+    },
+    // {
+    //   key: "lastLogin",
+    //   label: "Last Login",
+    //   render: (_, row) =>
+    //     row.lastLoginAt ? new Date(row.lastLoginAt).toLocaleString() : "--",
+    // },
+  ];
+
+  // Row actions
+  const rowActions = (row) => (
+    <div className="flex items-center gap-2 justify-center">
+      <button
+        onClick={() => navigate(`/users/${row.id}`)}
+        className="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200"
+      >
+        <FiEye size={16} />
+      </button>
+      <button className="p-2 bg-green-100 text-green-600 rounded hover:bg-green-200">
+        <FiEdit size={16} />
+      </button>
+      <button className="p-2 bg-red-100 text-red-600 rounded hover:bg-red-200">
+        <FiTrash2 size={16} />
+      </button>
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-gray-600">Users</h2>
+        <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+          + Add User
+        </button>
+      </div>
+
+      {/* Table */}
+      <Table
+        columns={columns}
+        data={loading ? [] : paginatedData}
+        actions={rowActions}
+        center // optional prop if your Table supports center alignment
+      />
+
+      {/* Pagination */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(pg) => setCurrentPage(pg)}
+      />
+    </div>
+  );
+};
+
+export default UserList;
diff --git a/src/pages/Users/UserProfile.jsx b/src/pages/Users/UserProfile.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Users/UserRow.jsx b/src/pages/Users/UserRow.jsx
new file mode 100644
index 0000000..5d5294b
--- /dev/null
+++ b/src/pages/Users/UserRow.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const UserRow = ({ user, index }) => {
+  return (
+    <tr className="border-b hover:bg-gray-50">
+      <td className="px-4 py-3">{index + 1}</td>
+      <td className="px-4 py-3 font-medium text-gray-900">
+        {user.firstName} {user.lastName}
+      </td>
+      <td className="px-4 py-3">{user.email}</td>
+      <td className="px-4 py-3">{user.username}</td>
+      <td className="px-4 py-3">{user.role}</td>
+      <td className="px-4 py-3">
+        {user.isVerified ? (
+          <span className="text-green-600 font-medium">Yes</span>
+        ) : (
+          <span className="text-red-500 font-medium">No</span>
+        )}
+      </td>
+      <td className="px-4 py-3">
+        {user.isActive ? (
+          <span className="text-green-600 font-medium">Active</span>
+        ) : (
+          <span className="text-gray-400 font-medium">Inactive</span>
+        )}
+      </td>
+      <td className="px-4 py-3 text-gray-500">
+        {user.lastLoginAt
+          ? new Date(user.lastLoginAt).toLocaleDateString()
+          : "Never"}
+      </td>
+      <td className="px-4 py-3">
+        <Link
+          to={`/users/${user.id}`} // ✅ IMPORTANT: use correct field name here
+          className="text-blue-600 hover:underline font-medium"
+        >
+          View
+        </Link>
+      </td>
+    </tr>
+  );
+};
+
+export default UserRow;
diff --git a/src/routes/AdminRoutes.jsx b/src/routes/AdminRoutes.jsx
new file mode 100644
index 0000000..478c21c
--- /dev/null
+++ b/src/routes/AdminRoutes.jsx
@@ -0,0 +1,312 @@
+import React from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import Layout from "../layouts/Layout";
+import Dashboard from "../pages/Dashboard/DashboardPage";
+import LoginPage from "../pages/Auth/LoginPage";
+import Products from "../pages/Products/ProductList";
+import ProductDetails from "../pages/Products/ProductDetails";
+import Users from "../pages/Users/UserList";
+import UserDetails from "../pages/Users/UserDetails";
+import OrderList from "../pages/Orders/OrderList";
+import OrderDetails from "../pages/Orders/OrderDetails";
+import ProductAdd from "../pages/Products/ProductAdd";
+import CategoryList from "../pages/Categories/CategoryList";
+import CategoryForm from "../pages/Categories/CategoryForm";
+import ReportsDashboard from "../pages/Reports/ReportsDashboard";
+import CategoryDetails from "../pages/Categories/CategoryDetails";
+import CategoryEdit from "../pages/Categories/CategoryEdit";
+import ReorderCategories from "../pages/Categories/ReorderCategories";
+// import ReturnsPage from "../pages/Returns/ReturnsPage";
+import ReturnDetails from "../pages/Returns/components/ReturnDetails";
+import { ReturnList } from "../pages/Returns";
+import ReturnHistory from "../pages/Returns/components/ReturnHistory";
+import CouponsPage from "../pages/Coupons/CouponsPage";
+import CreateCoupon from "../pages/Coupons/CreateCoupon";
+import CouponDetails from "../pages/Coupons/CouponDetails";
+import CouponStats from "../pages/Dashboard/CouponStats";
+import OrdersByStatusPage from "../pages/Dashboard/components/OrdersByStatusPage";
+
+const ProtectedRoute = ({ token, children }) => {
+  return token ? children : <Navigate to="/login" replace />;
+};
+
+const AdminRoutes = () => {
+  const { token } = useSelector((state) => state.auth || {});
+
+  return (
+    <Routes>
+      {/* Public Route */}
+      <Route path="/login" element={<LoginPage />} />
+
+      {/* Protected Routes */}
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <Dashboard />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <Dashboard />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+       <Route
+        path="/orders-by-status"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <OrdersByStatusPage />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+{/* <Route path="/orders-by-status" element={<OrdersByStatusPage />} /> */}
+      <Route
+        path="/coupon-stats"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CouponStats />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/orders"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <OrderList />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/orders/:id"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <OrderDetails />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/users"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <Users />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+      {/* <Route path="/users/:id" element={<UserDetails />} /> */}
+      <Route
+        path="/users/:id"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <UserDetails />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/products"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <Products />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/products/:slug"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ProductDetails />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/products/add"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ProductAdd />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/categories"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CategoryList />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/categories/add"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CategoryForm />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/categories/:id"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CategoryDetails />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/categories/edit/:id"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CategoryEdit />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/categories/reorder"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ReorderCategories />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/reports"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ReportsDashboard />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/returns"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ReturnList />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/returns/:id"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ReturnDetails />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/returns/history"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <ReturnHistory />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/coupons"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CouponsPage />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/create"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CreateCoupon />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/coupons/:id"
+        element={
+          <ProtectedRoute token={token}>
+            <Layout>
+              <CouponDetails />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+
+      {/* Catch-all redirect */}
+      <Route
+        path="*"
+        element={
+          token ? (
+            <Navigate to="/dashboard" replace />
+          ) : (
+            <Navigate to="/login" replace />
+          )
+        }
+      />
+    </Routes>
+  );
+};
+
+export default AdminRoutes;
diff --git a/src/routes/AppRoutes.jsx b/src/routes/AppRoutes.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/ProtectedRoutes.jsx b/src/routes/ProtectedRoutes.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000..1e7f3f1
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,13 @@
+// import axios from "axios";
+
+// const api = axios.create({
+//   baseURL: import.meta.env.VITE_API_URL || "https://api.example.com",
+// });
+
+// api.interceptors.request.use((config) => {
+//   const token = localStorage.getItem("token");
+//   if (token) config.headers.Authorization = `Bearer ${token}`;
+//   return config;
+// });
+
+// export default api;
diff --git a/src/services/endpoints.js b/src/services/endpoints.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/constants.js b/src/utils/constants.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/flattenCategories.js b/src/utils/flattenCategories.js
new file mode 100644
index 0000000..582f0f7
--- /dev/null
+++ b/src/utils/flattenCategories.js
@@ -0,0 +1,56 @@
+// export const flattenCategories = (categories, prefix = "") => {
+//   let result = [];
+
+//   if (!Array.isArray(categories)) return result;
+
+//   categories.forEach((cat) => {
+//     const path = prefix ? `${prefix} > ${cat.name}` : cat.name;
+
+//     result.push({
+//       value: cat._id,   // ✅ ID stored
+//       label: path,      // ✅ Path shown
+//     });
+
+//     if (cat.children?.length) {
+//       result = result.concat(
+//         flattenCategories(cat.children, path)
+//       );
+//     }
+//   });
+
+//   return result;
+// };
+
+
+
+
+export const flattenCategories = (categories, prefix = "") => {
+  let result = [];
+
+  if (!Array.isArray(categories)) return result;
+
+  categories.forEach((cat) => {
+    const path = prefix ? `${prefix} > ${cat.name}` : cat.name;
+    
+    // ✅ Handle multiple ID field names
+    const categoryId = cat.id || cat._id || cat.categoryId;
+    
+    if (!categoryId) {
+      console.error("❌ Category missing ID:", cat);
+      return; // Skip this category
+    }
+
+    result.push({
+      value: categoryId,   // ✅ Store ID
+      label: path,         // ✅ Display path
+    });
+
+    if (cat.children?.length) {
+      result = result.concat(
+        flattenCategories(cat.children, path)
+      );
+    }
+  });
+
+  return result;
+};
\ No newline at end of file
diff --git a/src/utils/formatCurrency.js b/src/utils/formatCurrency.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/formatDate.js b/src/utils/formatDate.js
new file mode 100644
index 0000000..feebded
--- /dev/null
+++ b/src/utils/formatDate.js
@@ -0,0 +1,12 @@
+// src/utils/formatDate.js
+export const formatDate = (dateString) => {
+  if (!dateString) return "N/A";
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-IN", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
diff --git a/src/utils/handleError.js b/src/utils/handleError.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/validators.js b/src/utils/validators.js
new file mode 100644
index 0000000..e69de29
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..6d144b5
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+  nunito: ["Nunito Sans", "sans-serif"],
+},
+    },
+  },
+  plugins: [],
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

{title}

+// Vaishnavi +//

Welcome Back

{category.name}

+ Category Information +

System Info

+ Category Image +

+ Edit Category +

+ Basic Information +

+ Category Image +