first commit
This commit is contained in:
7
.dockerignore
Normal file
7
.dockerignore
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
Dockerfile
|
||||||
|
docker-compose.yml
|
||||||
|
.env
|
||||||
70
.gitignore
vendored
Normal file
70
.gitignore
vendored
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
# Node dependencies
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
out/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
logs/*.log
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# IDE / Editor files
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# Coverage / Testing
|
||||||
|
coverage/
|
||||||
|
*.lcov
|
||||||
|
jest-test-results.json
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.tmp
|
||||||
|
*.temp
|
||||||
|
*.swp
|
||||||
|
|
||||||
|
# Cache
|
||||||
|
.cache/
|
||||||
|
.next/
|
||||||
|
.nuxt/
|
||||||
|
.sass-cache/
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# TypeScript
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Compiled binaries
|
||||||
|
*.exe
|
||||||
|
*.dll
|
||||||
|
*.so
|
||||||
|
*.dylib
|
||||||
|
*.pyc
|
||||||
|
*.pyo
|
||||||
|
*.pyd
|
||||||
|
|
||||||
|
# OS-specific files
|
||||||
|
ehthumbs.db
|
||||||
|
Icon?
|
||||||
|
Desktop.ini
|
||||||
21
Dockerfile
Normal file
21
Dockerfile
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
# ---------- Build Stage ----------
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
|
||||||
|
# ---------- Production Stage ----------
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
EXPOSE 5174
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
16
README.md
Normal file
16
README.md
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||||
29
eslint.config.js
Normal file
29
eslint.config.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
reactHooks.configs['recommended-latest'],
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Admin Panel</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5158
package-lock.json
generated
Normal file
5158
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "vc_ecomm_admin_panel",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fontsource/nunito-sans": "^5.2.7",
|
||||||
|
"@headlessui/react": "^2.2.9",
|
||||||
|
"@hello-pangea/dnd": "^18.0.1",
|
||||||
|
"@reduxjs/toolkit": "^2.10.1",
|
||||||
|
"axios": "^1.12.2",
|
||||||
|
"framer-motion": "^12.23.24",
|
||||||
|
"lucide-react": "^0.552.0",
|
||||||
|
"react": "^19.1.1",
|
||||||
|
"react-dom": "^19.1.1",
|
||||||
|
"react-icons": "^5.5.0",
|
||||||
|
"react-redux": "^9.2.0",
|
||||||
|
"react-router-dom": "^7.9.5",
|
||||||
|
"recharts": "^3.7.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.36.0",
|
||||||
|
"@types/react": "^19.1.16",
|
||||||
|
"@types/react-dom": "^19.1.9",
|
||||||
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"eslint": "^9.36.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.22",
|
||||||
|
"globals": "^16.4.0",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.18",
|
||||||
|
"vite": "^7.1.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/bitmap.png
Normal file
BIN
public/bitmap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/main-logo.png
Normal file
BIN
public/main-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 990 KiB |
BIN
public/orders_icon.png
Normal file
BIN
public/orders_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
public/product_icon.png
Normal file
BIN
public/product_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
public/stats_icon.png
Normal file
BIN
public/stats_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
public/users_icon.png
Normal file
BIN
public/users_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
16
src/App.jsx
Normal file
16
src/App.jsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// src/App.jsx
|
||||||
|
import React from "react";
|
||||||
|
import { Provider } from "react-redux";
|
||||||
|
import { store } from "./app/store";
|
||||||
|
import AdminRoutes from "./routes/AdminRoutes";
|
||||||
|
import "./index.css"; // Tailwind or custom styles
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Provider store={store}>
|
||||||
|
<AdminRoutes />
|
||||||
|
</Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
15
src/app/api.js
Normal file
15
src/app/api.js
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
// src/app/api.js
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const instance = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_API_URL,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Attach token automatically
|
||||||
|
instance.interceptors.request.use((config) => {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
if (token) config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default instance;
|
||||||
0
src/app/hooks.js
Normal file
0
src/app/hooks.js
Normal file
0
src/app/rootReducer.js
Normal file
0
src/app/rootReducer.js
Normal file
44
src/app/store.js
Normal file
44
src/app/store.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
// src/app/store.js
|
||||||
|
import { configureStore } from "@reduxjs/toolkit";
|
||||||
|
import authReducer from "../features/auth/authSlice";
|
||||||
|
import dashboardReducer from "../features/dashboard/dashboardSlice";
|
||||||
|
|
||||||
|
import { orderApi } from "../features/orders/ordersAPI";
|
||||||
|
import productApi from "../features/products/productAPI";
|
||||||
|
import { categoryApi } from "../features/categories/categoryAPI";
|
||||||
|
import { salesApi } from "../features/report/salesAPI";
|
||||||
|
import { customersApi } from "../features/report/customersAPI";
|
||||||
|
import { ordersApi } from "../features/report/ordersAPI";
|
||||||
|
import { inventoryApi } from "../features/report/inventoryAPI";
|
||||||
|
// import { couponApi } from "../features/coupons/couponSlice"; // ✅ FIXED
|
||||||
|
import { couponApi } from "../features/coupons/couponAPI";
|
||||||
|
|
||||||
|
|
||||||
|
export const store = configureStore({
|
||||||
|
reducer: {
|
||||||
|
auth: authReducer,
|
||||||
|
dashboard: dashboardReducer,
|
||||||
|
|
||||||
|
// RTK Query reducers
|
||||||
|
[orderApi.reducerPath]: orderApi.reducer,
|
||||||
|
[productApi.reducerPath]: productApi.reducer,
|
||||||
|
[categoryApi.reducerPath]: categoryApi.reducer,
|
||||||
|
[salesApi.reducerPath]: salesApi.reducer,
|
||||||
|
[customersApi.reducerPath]: customersApi.reducer,
|
||||||
|
[ordersApi.reducerPath]: ordersApi.reducer,
|
||||||
|
[inventoryApi.reducerPath]: inventoryApi.reducer,
|
||||||
|
[couponApi.reducerPath]: couponApi.reducer, // ✅ OK
|
||||||
|
},
|
||||||
|
|
||||||
|
middleware: (getDefaultMiddleware) =>
|
||||||
|
getDefaultMiddleware().concat(
|
||||||
|
orderApi.middleware,
|
||||||
|
productApi.middleware,
|
||||||
|
categoryApi.middleware,
|
||||||
|
salesApi.middleware,
|
||||||
|
customersApi.middleware,
|
||||||
|
ordersApi.middleware,
|
||||||
|
inventoryApi.middleware,
|
||||||
|
couponApi.middleware // ✅ REQUIRED
|
||||||
|
),
|
||||||
|
});
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
0
src/assets/styles/global.css
Normal file
0
src/assets/styles/global.css
Normal file
9
src/components/Pagination.jsx
Normal file
9
src/components/Pagination.jsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Pagination = () => {
|
||||||
|
return (
|
||||||
|
<div>Pagination</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Pagination
|
||||||
49
src/components/common/ConfirmModal.jsx
Normal file
49
src/components/common/ConfirmModal.jsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const ConfirmModal = ({ isOpen, title, message, onCancel, onConfirm }) => {
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-[999] flex items-center justify-center bg-black/10">
|
||||||
|
<div
|
||||||
|
className="bg-white/90 backdrop-blur-xl border border-white/40
|
||||||
|
rounded-3xl shadow-2xl p-8 w-[90%] max-w-md text-center"
|
||||||
|
>
|
||||||
|
{/* Title */}
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-3">{title}</h2>
|
||||||
|
|
||||||
|
{/* Message */}
|
||||||
|
<p className="text-gray-600 mb-8 text-[17px]">{message}</p>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex justify-center gap-5">
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
className="
|
||||||
|
px-6 py-3 rounded-xl text-gray-700
|
||||||
|
border border-gray-300 bg-white
|
||||||
|
hover:bg-gray-100 hover:shadow-md
|
||||||
|
transition-all duration-150 font-medium
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onConfirm}
|
||||||
|
className="
|
||||||
|
px-7 py-3 rounded-xl text-white font-semibold
|
||||||
|
bg-[#4880FF] hover:bg-[#6B9BFF]
|
||||||
|
shadow-lg hover:shadow-xl
|
||||||
|
transition-all duration-150
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConfirmModal;
|
||||||
9
src/components/common/Loader.jsx
Normal file
9
src/components/common/Loader.jsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Loader = () => {
|
||||||
|
return (
|
||||||
|
<div>Loader</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Loader
|
||||||
0
src/components/common/Modal.jsx
Normal file
0
src/components/common/Modal.jsx
Normal file
62
src/components/common/Pagination.jsx
Normal file
62
src/components/common/Pagination.jsx
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
// src/components/common/Pagination.jsx
|
||||||
|
import React from "react";
|
||||||
|
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
|
||||||
|
|
||||||
|
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
|
||||||
|
if (totalPages <= 1) return null;
|
||||||
|
|
||||||
|
const pageNumbers = [];
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
pageNumbers.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePrevious = () => currentPage > 1 && onPageChange(currentPage - 1);
|
||||||
|
const handleNext = () => currentPage < totalPages && onPageChange(currentPage + 1);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-end mt-6 space-x-2">
|
||||||
|
{/* Previous Button */}
|
||||||
|
<button
|
||||||
|
onClick={handlePrevious}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
className={`flex items-center justify-center px-3 py-2 rounded-full border transition
|
||||||
|
${currentPage === 1
|
||||||
|
? "text-gray-400 border-gray-300 cursor-not-allowed"
|
||||||
|
: "text-blue-600 border-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FiChevronLeft size={18} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Page Numbers */}
|
||||||
|
{pageNumbers.map((num) => (
|
||||||
|
<button
|
||||||
|
key={num}
|
||||||
|
onClick={() => onPageChange(num)}
|
||||||
|
className={`px-4 py-2 rounded-full border font-medium transition
|
||||||
|
${num === currentPage
|
||||||
|
? "bg-blue-600 text-white border-blue-600 shadow-md"
|
||||||
|
: "text-gray-700 border-gray-300 hover:bg-gray-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{num}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Next Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
className={`flex items-center justify-center px-3 py-2 rounded-full border transition
|
||||||
|
${currentPage === totalPages
|
||||||
|
? "text-gray-400 border-gray-300 cursor-not-allowed"
|
||||||
|
: "text-blue-600 border-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FiChevronRight size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Pagination;
|
||||||
0
src/components/common/SearchBar.jsx
Normal file
0
src/components/common/SearchBar.jsx
Normal file
49
src/components/common/Table.jsx
Normal file
49
src/components/common/Table.jsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Table = ({ columns = [], data = [], actions }) => {
|
||||||
|
return (
|
||||||
|
<div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
|
||||||
|
<table className="min-w-full text-sm text-center">
|
||||||
|
{" "}
|
||||||
|
{/* <-- text-center added */}
|
||||||
|
<thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
|
||||||
|
<tr>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<th key={col.key} className="px-6 py-3 text-center">
|
||||||
|
{col.label}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
{actions && <th className="px-6 py-3 text-center">Action</th>}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.map((row, index) => (
|
||||||
|
<tr
|
||||||
|
key={row.id || index}
|
||||||
|
className="border-t hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<td
|
||||||
|
key={col.key}
|
||||||
|
className="px-6 py-3 text-gray-700 text-center"
|
||||||
|
>
|
||||||
|
{col.render
|
||||||
|
? col.render(row[col.key], row, index) // pass index here
|
||||||
|
: row[col.key]}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{actions && (
|
||||||
|
<td className="px-6 py-3 text-center flex items-center justify-center gap-2">
|
||||||
|
{actions(row)}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Table;
|
||||||
0
src/components/dashboard/RecentOrders.jsx
Normal file
0
src/components/dashboard/RecentOrders.jsx
Normal file
0
src/components/dashboard/SalesChart.jsx
Normal file
0
src/components/dashboard/SalesChart.jsx
Normal file
0
src/components/dashboard/StatsCard.jsx
Normal file
0
src/components/dashboard/StatsCard.jsx
Normal file
0
src/components/layout/AdminLayout.jsx
Normal file
0
src/components/layout/AdminLayout.jsx
Normal file
9
src/components/layout/Footer.jsx
Normal file
9
src/components/layout/Footer.jsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div>Footer</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer
|
||||||
140
src/components/layout/Header.jsx
Normal file
140
src/components/layout/Header.jsx
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
// import React from "react";
|
||||||
|
// import { FiMenu, FiBell } from "react-icons/fi";
|
||||||
|
|
||||||
|
// const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
|
||||||
|
// return (
|
||||||
|
// <header className="flex items-center justify-between bg-white shadow px-4 py-3 sticky top-0 z-20">
|
||||||
|
// <div className="flex items-center gap-4">
|
||||||
|
// <button
|
||||||
|
// className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
|
||||||
|
// onClick={toggleMobileSidebar}
|
||||||
|
// >
|
||||||
|
// <FiMenu className="text-[#4880FF]" />
|
||||||
|
// </button>
|
||||||
|
|
||||||
|
// <button
|
||||||
|
// className="hidden md:block p-2 rounded-md hover:bg-gray-100 transition"
|
||||||
|
// onClick={toggleSidebar}
|
||||||
|
// >
|
||||||
|
// <FiMenu className="text-[#4880FF]" />
|
||||||
|
// </button>
|
||||||
|
|
||||||
|
// <h1 className="text-xl font-semibold hidden md:block text-[#4880FF]">
|
||||||
|
// Dashboard
|
||||||
|
// </h1>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// <div className="flex items-center gap-4">
|
||||||
|
// <button className="p-2 rounded-md hover:bg-gray-100 transition">
|
||||||
|
// <FiBell className="text-[#4880FF]" />
|
||||||
|
// </button>
|
||||||
|
// <div className="hidden md:flex items-center gap-2">
|
||||||
|
// <span className="text-gray-700">Admin</span>
|
||||||
|
// <img
|
||||||
|
// src="/avatar.png"
|
||||||
|
// alt="avatar"
|
||||||
|
// className="w-8 h-8 rounded-full border-2 border-[#4880FF]"
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </header>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export default Header;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { FiMenu, FiBell, FiSearch, FiChevronDown } from "react-icons/fi";
|
||||||
|
|
||||||
|
const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
|
||||||
|
const [showDropdown, setShowDropdown] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-20 h-16 bg-white border-b border-gray-100 flex items-center justify-between px-4 md:px-6 shadow-sm">
|
||||||
|
|
||||||
|
{/* ── Left: Hamburger + Search ─────────────────────── */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Mobile hamburger */}
|
||||||
|
<button
|
||||||
|
className="md:hidden p-2 rounded-xl hover:bg-gray-100 transition text-gray-600"
|
||||||
|
onClick={toggleMobileSidebar}
|
||||||
|
>
|
||||||
|
<FiMenu size={20} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Desktop hamburger */}
|
||||||
|
<button
|
||||||
|
className="hidden md:flex p-2 rounded-xl hover:bg-gray-100 transition text-gray-600"
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
>
|
||||||
|
<FiMenu size={20} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Search bar */}
|
||||||
|
<div className="hidden md:flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 w-64 group focus-within:border-blue-400 focus-within:bg-white transition-all">
|
||||||
|
<FiSearch size={15} className="text-gray-400 flex-shrink-0" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search..."
|
||||||
|
className="bg-transparent text-sm text-gray-700 placeholder-gray-400 outline-none w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Right: Bell + Avatar ─────────────────────────── */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
|
||||||
|
{/* Notification bell */}
|
||||||
|
<button className="relative p-2 rounded-xl hover:bg-gray-100 transition text-gray-600 group">
|
||||||
|
<FiBell size={20} />
|
||||||
|
{/* Unread dot */}
|
||||||
|
<span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500 ring-2 ring-white" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Avatar + dropdown */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDropdown(!showDropdown)}
|
||||||
|
className="flex items-center gap-2 pl-1 pr-2 py-1 rounded-xl hover:bg-gray-100 transition"
|
||||||
|
>
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white text-xs font-bold shadow">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block text-left">
|
||||||
|
<p className="text-sm font-semibold text-gray-800 leading-tight">Admin</p>
|
||||||
|
<p className="text-xs text-gray-400 leading-tight">Super Admin</p>
|
||||||
|
</div>
|
||||||
|
<FiChevronDown
|
||||||
|
size={14}
|
||||||
|
className={`hidden md:block text-gray-400 transition-transform duration-200 ${showDropdown ? "rotate-180" : ""}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dropdown */}
|
||||||
|
{showDropdown && (
|
||||||
|
<>
|
||||||
|
<div className="fixed inset-0 z-10" onClick={() => setShowDropdown(false)} />
|
||||||
|
<div className="absolute right-0 top-12 z-20 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 w-44 text-sm">
|
||||||
|
<button className="w-full text-left px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition">
|
||||||
|
Profile
|
||||||
|
</button>
|
||||||
|
<button className="w-full text-left px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition">
|
||||||
|
Settings
|
||||||
|
</button>
|
||||||
|
<div className="border-t border-gray-100 my-1" />
|
||||||
|
<button className="w-full text-left px-4 py-2.5 text-red-500 hover:bg-red-50 transition font-medium">
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
475
src/components/layout/Sidebar.jsx
Normal file
475
src/components/layout/Sidebar.jsx
Normal file
@@ -0,0 +1,475 @@
|
|||||||
|
// import React, { useState, useEffect } from "react";
|
||||||
|
// import {
|
||||||
|
// FiHome,
|
||||||
|
// FiBox,
|
||||||
|
// FiUsers,
|
||||||
|
// FiShoppingCart,
|
||||||
|
// FiLogOut,
|
||||||
|
// FiX,
|
||||||
|
// FiChevronDown,
|
||||||
|
// FiChevronUp,
|
||||||
|
// } from "react-icons/fi";
|
||||||
|
// import { Link } from "react-router-dom";
|
||||||
|
// import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
// import ConfirmModal from "../common/ConfirmModal";
|
||||||
|
|
||||||
|
// const Sidebar = ({
|
||||||
|
// isCollapsed,
|
||||||
|
// // toggleSidebar,
|
||||||
|
// mobileOpen,
|
||||||
|
// toggleMobileSidebar,
|
||||||
|
// }) => {
|
||||||
|
// const location = useLocation();
|
||||||
|
// const navigate = useNavigate();
|
||||||
|
|
||||||
|
// // Separate dropdown states
|
||||||
|
// const [productsOpen, setProductsOpen] = useState(false);
|
||||||
|
// const [categoriesOpen, setCategoriesOpen] = useState(false);
|
||||||
|
// const [logoutOpen, setLogoutOpen] = useState(false);
|
||||||
|
|
||||||
|
// // Auto-open dropdown when route matches
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (location.pathname.startsWith("/products")) setProductsOpen(true);
|
||||||
|
// if (location.pathname.startsWith("/categories")) setCategoriesOpen(true);
|
||||||
|
// }, [location.pathname]);
|
||||||
|
|
||||||
|
// const menuItems = [
|
||||||
|
// { name: "Dashboard", icon: <FiHome />, path: "/dashboard" },
|
||||||
|
// { name: "Orders", icon: <FiShoppingCart />, path: "/orders" },
|
||||||
|
// {
|
||||||
|
// name: "Products",
|
||||||
|
// icon: <FiBox />,
|
||||||
|
// subMenu: [
|
||||||
|
// { name: "Product List", path: "/products" },
|
||||||
|
// { name: "Add Product", path: "/products/add" },
|
||||||
|
// ],
|
||||||
|
// state: productsOpen,
|
||||||
|
// setState: setProductsOpen,
|
||||||
|
// },
|
||||||
|
// { name: "Users", icon: <FiUsers />, path: "/users" },
|
||||||
|
// // { name: "Report", icon: <FiUsers />, path: "/reports" },
|
||||||
|
// {
|
||||||
|
// name: "Categories",
|
||||||
|
// icon: <FiBox />,
|
||||||
|
// subMenu: [
|
||||||
|
// { name: "Category List", path: "/categories" },
|
||||||
|
// { name: "Add Category", path: "/categories/add" },
|
||||||
|
// ],
|
||||||
|
// state: categoriesOpen,
|
||||||
|
// setState: setCategoriesOpen,
|
||||||
|
// },
|
||||||
|
// { name: "Returns", icon: <FiBox />, path: "/returns" },
|
||||||
|
// { name: "Coupons", icon: <FiBox />, path: "/coupons" },
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// const isActive = (path) => location.pathname === path;
|
||||||
|
|
||||||
|
// const handleLogout = () => {
|
||||||
|
// setLogoutOpen(false);
|
||||||
|
// navigate("/login");
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const activeClass = `
|
||||||
|
// ${isCollapsed ? "w-12 justify-center" : "w-[193px] justify-start"}
|
||||||
|
// bg-[#4880FF] text-white rounded-[6px] h-[46px] flex items-center gap-[10px] px-4 py-[12px]
|
||||||
|
// shadow-md transition-all duration-200
|
||||||
|
// `;
|
||||||
|
|
||||||
|
// const normalClass = `
|
||||||
|
// ${isCollapsed ? "w-12 justify-center" : "w-[193px] justify-start"}
|
||||||
|
// text-gray-700 hover:bg-[#4880FF]/10 hover:text-[#4880FF] rounded-[6px] h-[46px]
|
||||||
|
// flex items-center gap-[10px] px-4 py-[12px] transition-all duration-200
|
||||||
|
// `;
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// {/* Mobile overlay */}
|
||||||
|
// <div
|
||||||
|
// className={`fixed inset-0 bg-black/40 z-40 md:hidden transition-opacity ${
|
||||||
|
// mobileOpen ? "opacity-100 visible" : "opacity-0 invisible"
|
||||||
|
// }`}
|
||||||
|
// onClick={toggleMobileSidebar}
|
||||||
|
// ></div>
|
||||||
|
|
||||||
|
// {/* Sidebar */}
|
||||||
|
// <div
|
||||||
|
// className={`fixed inset-y-0 left-0 z-50 bg-white shadow-lg transform transition-all duration-300
|
||||||
|
// ${
|
||||||
|
// mobileOpen ? "translate-x-0" : "-translate-x-full"
|
||||||
|
// } md:translate-x-0 md:static
|
||||||
|
// ${isCollapsed ? "w-20" : "w-64"} flex flex-col justify-between
|
||||||
|
// `}
|
||||||
|
// >
|
||||||
|
// {/* Logo & Hamburger */}
|
||||||
|
// <div className="flex items-center m-3 px-4 py-4 border-gray-200">
|
||||||
|
// <h2
|
||||||
|
// className={`absolute left-1/2 -translate-x-1/2 font-bold text-xl text-[#4880FF] ${
|
||||||
|
// isCollapsed ? "hidden" : "block"
|
||||||
|
// }`}
|
||||||
|
// >
|
||||||
|
// Vaishnavi
|
||||||
|
// </h2>
|
||||||
|
|
||||||
|
// <div className="flex items-center gap-2">
|
||||||
|
// <button
|
||||||
|
// className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
|
||||||
|
// onClick={toggleMobileSidebar}
|
||||||
|
// >
|
||||||
|
// <FiX className="text-[#4880FF]" />
|
||||||
|
// </button>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Menu */}
|
||||||
|
// <nav className="mt-2 flex-1 px-2 space-y-2 flex flex-col items-center">
|
||||||
|
// {menuItems.map((item, index) => {
|
||||||
|
// if (item.subMenu) {
|
||||||
|
// const parentActive = item.subMenu.some((sub) =>
|
||||||
|
// isActive(sub.path)
|
||||||
|
// );
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div key={index}>
|
||||||
|
// <button
|
||||||
|
// className={`flex items-center justify-between px-4 py-[12px] rounded-[6px] transition-all duration-200
|
||||||
|
// ${isCollapsed ? "w-12" : "w-[193px]"}
|
||||||
|
// ${
|
||||||
|
// item.state || parentActive
|
||||||
|
// ? "bg-[#4880FF] text-white shadow-md"
|
||||||
|
// : "text-gray-700 hover:bg-[#4880FF]/10 hover:text-[#4880FF]"
|
||||||
|
// }
|
||||||
|
// `}
|
||||||
|
// onClick={() => item.setState(!item.state)}
|
||||||
|
// >
|
||||||
|
// <div className="flex items-center gap-[10px]">
|
||||||
|
// {item.icon}
|
||||||
|
// <span
|
||||||
|
// className={`${
|
||||||
|
// isCollapsed ? "hidden" : "block font-medium"
|
||||||
|
// }`}
|
||||||
|
// >
|
||||||
|
// {item.name}
|
||||||
|
// </span>
|
||||||
|
// </div>
|
||||||
|
// {!isCollapsed &&
|
||||||
|
// (item.state ? <FiChevronUp /> : <FiChevronDown />)}
|
||||||
|
// </button>
|
||||||
|
|
||||||
|
// {/* Submenu */}
|
||||||
|
// {item.state && !isCollapsed && (
|
||||||
|
// <div className="ml-6 mt-2 flex flex-col gap-2">
|
||||||
|
// {/* {item.subMenu.map((sub) => (
|
||||||
|
// <Link
|
||||||
|
// to={sub.path}
|
||||||
|
// className={
|
||||||
|
// isActive(sub.path) ? activeClass : normalClass
|
||||||
|
// }
|
||||||
|
// >
|
||||||
|
// {sub.name}
|
||||||
|
// </Link>
|
||||||
|
// ))} */}
|
||||||
|
// {item.subMenu.map((sub) => (
|
||||||
|
// <Link
|
||||||
|
// key={sub.id} // 👈 ADD THIS
|
||||||
|
// to={sub.path}
|
||||||
|
// className={
|
||||||
|
// isActive(sub.path) ? activeClass : normalClass
|
||||||
|
// }
|
||||||
|
// >
|
||||||
|
// {sub.name}
|
||||||
|
// </Link>
|
||||||
|
// ))}
|
||||||
|
// </div>
|
||||||
|
// )}
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <Link
|
||||||
|
// key={index}
|
||||||
|
// to={item.path}
|
||||||
|
// className={isActive(item.path) ? activeClass : normalClass}
|
||||||
|
// >
|
||||||
|
// {item.icon}
|
||||||
|
// <span
|
||||||
|
// className={`${isCollapsed ? "hidden" : "block font-medium"}`}
|
||||||
|
// >
|
||||||
|
// {item.name}
|
||||||
|
// </span>
|
||||||
|
// </Link>
|
||||||
|
// );
|
||||||
|
// })}
|
||||||
|
// </nav>
|
||||||
|
|
||||||
|
// {/* Logout */}
|
||||||
|
// <div className="px-4 mb-6 flex justify-center">
|
||||||
|
// <button
|
||||||
|
// className={`flex items-center justify-center gap-[10px]
|
||||||
|
// ${isCollapsed ? "w-12" : "w-[193px]"}
|
||||||
|
// h-[46px] px-4 py-[12px] rounded-[6px]
|
||||||
|
// bg-red-100 text-red-600 hover:bg-red-200 transition-all`}
|
||||||
|
// onClick={() => setLogoutOpen(true)}
|
||||||
|
// >
|
||||||
|
// <FiLogOut />
|
||||||
|
// {!isCollapsed && <span className="font-medium">Logout</span>}
|
||||||
|
// </button>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Confirm Modal */}
|
||||||
|
// <ConfirmModal
|
||||||
|
// isOpen={logoutOpen}
|
||||||
|
// title="Logout"
|
||||||
|
// message="Are you sure you want to logout?"
|
||||||
|
// onCancel={() => setLogoutOpen(false)}
|
||||||
|
// onConfirm={handleLogout}
|
||||||
|
// />
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export default Sidebar;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
FiHome, FiBox, FiUsers, FiShoppingCart, FiLogOut, FiX,
|
||||||
|
FiChevronDown, FiTag, FiRefreshCw, FiPercent, FiGrid,
|
||||||
|
} from "react-icons/fi";
|
||||||
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
|
import ConfirmModal from "../common/ConfirmModal";
|
||||||
|
|
||||||
|
const NAV_ITEMS = [
|
||||||
|
{ name: "Dashboard", icon: FiHome, path: "/dashboard" },
|
||||||
|
{ name: "Orders", icon: FiShoppingCart, path: "/orders" },
|
||||||
|
{
|
||||||
|
name: "Products", icon: FiBox,
|
||||||
|
subMenu: [
|
||||||
|
{ name: "Product List", path: "/products" },
|
||||||
|
{ name: "Add Product", path: "/products/add" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ name: "Users", icon: FiUsers, path: "/users" },
|
||||||
|
{
|
||||||
|
name: "Categories", icon: FiGrid,
|
||||||
|
subMenu: [
|
||||||
|
{ name: "Category List", path: "/categories" },
|
||||||
|
{ name: "Add Category", path: "/categories/add" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ name: "Report", icon: FiRefreshCw, path: "/reports" },
|
||||||
|
{ name: "Returns", icon: FiRefreshCw, path: "/returns" },
|
||||||
|
{ name: "Coupons", icon: FiPercent, path: "/coupons" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const Sidebar = ({ isCollapsed, mobileOpen, toggleMobileSidebar }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [openMenus, setOpenMenus] = useState({});
|
||||||
|
const [logoutOpen, setLogoutOpen] = useState(false);
|
||||||
|
|
||||||
|
// Auto-expand parent when child route is active
|
||||||
|
useEffect(() => {
|
||||||
|
NAV_ITEMS.forEach((item) => {
|
||||||
|
if (item.subMenu?.some((s) => location.pathname.startsWith(s.path))) {
|
||||||
|
setOpenMenus((prev) => ({ ...prev, [item.name]: true }));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
const toggle = (name) =>
|
||||||
|
setOpenMenus((prev) => ({ ...prev, [name]: !prev[name] }));
|
||||||
|
|
||||||
|
const isActive = (path) => location.pathname === path;
|
||||||
|
const isParentActive = (item) =>
|
||||||
|
item.subMenu?.some((s) => location.pathname.startsWith(s.path));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Mobile overlay */}
|
||||||
|
<div
|
||||||
|
className={`fixed inset-0 bg-black/50 backdrop-blur-sm z-40 md:hidden transition-opacity duration-300 ${
|
||||||
|
mobileOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
|
||||||
|
}`}
|
||||||
|
onClick={toggleMobileSidebar}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside
|
||||||
|
className={`
|
||||||
|
fixed inset-y-0 left-0 z-50 flex flex-col
|
||||||
|
bg-[#0f172a] text-white
|
||||||
|
transform transition-all duration-300 ease-in-out
|
||||||
|
${mobileOpen ? "translate-x-0" : "-translate-x-full"}
|
||||||
|
md:translate-x-0 md:static
|
||||||
|
${isCollapsed ? "w-[72px]" : "w-64"}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{/* ── Logo ─────────────────────────────────────── */}
|
||||||
|
<div className={`flex items-center h-16 px-4 border-b border-white/10 flex-shrink-0 ${isCollapsed ? "justify-center" : "justify-between"}`}>
|
||||||
|
{!isCollapsed && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center shadow-lg">
|
||||||
|
<span className="text-white font-black text-sm">V</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-bold text-lg tracking-tight text-white">
|
||||||
|
Vaishnavi
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isCollapsed && (
|
||||||
|
<div className="w-9 h-9 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center shadow-lg">
|
||||||
|
<span className="text-white font-black text-sm">V</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="md:hidden p-1.5 rounded-lg hover:bg-white/10 transition"
|
||||||
|
onClick={toggleMobileSidebar}
|
||||||
|
>
|
||||||
|
<FiX size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Navigation ───────────────────────────────── */}
|
||||||
|
<nav className="flex-1 overflow-y-auto py-4 px-2 space-y-0.5 scrollbar-thin scrollbar-thumb-white/10">
|
||||||
|
{!isCollapsed && (
|
||||||
|
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/30 px-3 pb-2 pt-1">
|
||||||
|
Main Menu
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{NAV_ITEMS.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const hasSubMenu = !!item.subMenu;
|
||||||
|
const isOpen = openMenus[item.name];
|
||||||
|
const parentActive = isParentActive(item);
|
||||||
|
|
||||||
|
if (hasSubMenu) {
|
||||||
|
return (
|
||||||
|
<div key={item.name}>
|
||||||
|
<button
|
||||||
|
onClick={() => toggle(item.name)}
|
||||||
|
className={`
|
||||||
|
w-full flex items-center gap-3 px-3 py-2.5 rounded-xl
|
||||||
|
text-sm font-medium transition-all duration-150 group
|
||||||
|
${isOpen || parentActive
|
||||||
|
? "bg-white/10 text-white"
|
||||||
|
: "text-white/60 hover:bg-white/5 hover:text-white"
|
||||||
|
}
|
||||||
|
${isCollapsed ? "justify-center" : "justify-between"}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
|
<span className={`flex-shrink-0 transition-colors ${isOpen || parentActive ? "text-blue-400" : "text-white/40 group-hover:text-white/70"}`}>
|
||||||
|
<Icon size={18} />
|
||||||
|
</span>
|
||||||
|
{!isCollapsed && <span className="truncate">{item.name}</span>}
|
||||||
|
</div>
|
||||||
|
{!isCollapsed && (
|
||||||
|
<FiChevronDown
|
||||||
|
size={14}
|
||||||
|
className={`flex-shrink-0 text-white/40 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Submenu */}
|
||||||
|
{isOpen && !isCollapsed && (
|
||||||
|
<div className="ml-4 mt-0.5 mb-1 pl-3 border-l border-white/10 space-y-0.5">
|
||||||
|
{item.subMenu.map((sub) => (
|
||||||
|
<Link
|
||||||
|
key={sub.path}
|
||||||
|
to={sub.path}
|
||||||
|
className={`
|
||||||
|
flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all duration-150
|
||||||
|
${isActive(sub.path)
|
||||||
|
? "bg-blue-600 text-white font-medium shadow-md shadow-blue-900/40"
|
||||||
|
: "text-white/50 hover:bg-white/5 hover:text-white"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${isActive(sub.path) ? "bg-white" : "bg-white/30"}`} />
|
||||||
|
{sub.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Regular link
|
||||||
|
const active = isActive(item.path);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className={`
|
||||||
|
flex items-center gap-3 px-3 py-2.5 rounded-xl
|
||||||
|
text-sm font-medium transition-all duration-150 group
|
||||||
|
${isCollapsed ? "justify-center" : ""}
|
||||||
|
${active
|
||||||
|
? "bg-blue-600 text-white shadow-md shadow-blue-900/40"
|
||||||
|
: "text-white/60 hover:bg-white/5 hover:text-white"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<span className={`flex-shrink-0 transition-colors ${active ? "text-white" : "text-white/40 group-hover:text-white/70"}`}>
|
||||||
|
<Icon size={18} />
|
||||||
|
</span>
|
||||||
|
{!isCollapsed && <span className="truncate">{item.name}</span>}
|
||||||
|
|
||||||
|
{/* Active indicator dot when collapsed */}
|
||||||
|
{isCollapsed && active && (
|
||||||
|
<span className="absolute right-1 w-1.5 h-1.5 rounded-full bg-blue-400" />
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* ── User + Logout ─────────────────────────────── */}
|
||||||
|
<div className="flex-shrink-0 p-3 border-t border-white/10 space-y-2">
|
||||||
|
{!isCollapsed && (
|
||||||
|
<div className="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-white/5">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="text-sm font-medium text-white truncate">Admin</p>
|
||||||
|
<p className="text-xs text-white/40 truncate">Super Admin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setLogoutOpen(true)}
|
||||||
|
className={`
|
||||||
|
w-full flex items-center gap-3 px-3 py-2.5 rounded-xl
|
||||||
|
text-sm font-medium text-white/60
|
||||||
|
hover:bg-red-500/15 hover:text-red-400
|
||||||
|
transition-all duration-150 group
|
||||||
|
${isCollapsed ? "justify-center" : ""}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<FiLogOut size={18} className="flex-shrink-0 group-hover:text-red-400 transition-colors" />
|
||||||
|
{!isCollapsed && <span>Logout</span>}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<ConfirmModal
|
||||||
|
isOpen={logoutOpen}
|
||||||
|
title="Logout"
|
||||||
|
message="Are you sure you want to logout?"
|
||||||
|
onCancel={() => setLogoutOpen(false)}
|
||||||
|
onConfirm={() => { setLogoutOpen(false); navigate("/login"); }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
0
src/components/products/ProductCard.jsx
Normal file
0
src/components/products/ProductCard.jsx
Normal file
0
src/components/products/ProductForm.jsx
Normal file
0
src/components/products/ProductForm.jsx
Normal file
0
src/components/products/ProductTable.jsx
Normal file
0
src/components/products/ProductTable.jsx
Normal file
0
src/features/analytics/analyticsAPI.js
Normal file
0
src/features/analytics/analyticsAPI.js
Normal file
0
src/features/analytics/analyticsSlice.js
Normal file
0
src/features/analytics/analyticsSlice.js
Normal file
0
src/features/auth/authAPI.js
Normal file
0
src/features/auth/authAPI.js
Normal file
64
src/features/auth/authSlice.js
Normal file
64
src/features/auth/authSlice.js
Normal file
@@ -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;
|
||||||
0
src/features/auth/authUtils.js
Normal file
0
src/features/auth/authUtils.js
Normal file
90
src/features/categories/categoryAPI.js
Normal file
90
src/features/categories/categoryAPI.js
Normal file
@@ -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;
|
||||||
0
src/features/categories/categorySlice.js
Normal file
0
src/features/categories/categorySlice.js
Normal file
53
src/features/coupons/couponAPI.js
Normal file
53
src/features/coupons/couponAPI.js
Normal file
@@ -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;
|
||||||
123
src/features/dashboard/dashboardSlice.js
Normal file
123
src/features/dashboard/dashboardSlice.js
Normal file
@@ -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;
|
||||||
107
src/features/orders/ordersAPI.js
Normal file
107
src/features/orders/ordersAPI.js
Normal file
@@ -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;
|
||||||
0
src/features/orders/ordersSlice.js
Normal file
0
src/features/orders/ordersSlice.js
Normal file
23
src/features/products/productAPI.js
Normal file
23
src/features/products/productAPI.js
Normal file
@@ -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;
|
||||||
0
src/features/products/productSlice.js
Normal file
0
src/features/products/productSlice.js
Normal file
0
src/features/products/productUtils.js
Normal file
0
src/features/products/productUtils.js
Normal file
21
src/features/report/customersAPI.js
Normal file
21
src/features/report/customersAPI.js
Normal file
@@ -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;
|
||||||
21
src/features/report/inventoryAPI.js
Normal file
21
src/features/report/inventoryAPI.js
Normal file
@@ -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;
|
||||||
22
src/features/report/ordersAPI.js
Normal file
22
src/features/report/ordersAPI.js
Normal file
@@ -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;
|
||||||
20
src/features/report/salesAPI.js
Normal file
20
src/features/report/salesAPI.js
Normal file
@@ -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;
|
||||||
0
src/features/users/userAPI.js
Normal file
0
src/features/users/userAPI.js
Normal file
0
src/features/users/userSlice.js
Normal file
0
src/features/users/userSlice.js
Normal file
0
src/hooks/useAuth.js
Normal file
0
src/hooks/useAuth.js
Normal file
0
src/hooks/useDebounce.js
Normal file
0
src/hooks/useDebounce.js
Normal file
0
src/hooks/useForm.js
Normal file
0
src/hooks/useForm.js
Normal file
0
src/hooks/useToast.js
Normal file
0
src/hooks/useToast.js
Normal file
8
src/index.css
Normal file
8
src/index.css
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
|
}
|
||||||
0
src/layouts/AuthLayout.jsx
Normal file
0
src/layouts/AuthLayout.jsx
Normal file
38
src/layouts/Layout.jsx
Normal file
38
src/layouts/Layout.jsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import Sidebar from "../components/layout/Sidebar";
|
||||||
|
import Header from "../components/layout/Header";
|
||||||
|
|
||||||
|
const Layout = ({ children }) => {
|
||||||
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||||
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||||
|
|
||||||
|
const toggleSidebar = () => setIsSidebarCollapsed(!isSidebarCollapsed);
|
||||||
|
const toggleMobileSidebar = () => setMobileSidebarOpen(!mobileSidebarOpen);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen bg-gray-100 overflow-hidden">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<Sidebar
|
||||||
|
isCollapsed={isSidebarCollapsed}
|
||||||
|
mobileOpen={mobileSidebarOpen}
|
||||||
|
toggleMobileSidebar={toggleMobileSidebar}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="flex flex-col flex-1 w-0 overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<Header
|
||||||
|
toggleSidebar={toggleSidebar}
|
||||||
|
toggleMobileSidebar={toggleMobileSidebar}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Page content */}
|
||||||
|
<main className="flex-1 relative overflow-y-auto p-4 md:p-6">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
0
src/layouts/ProtectedRoute.jsx
Normal file
0
src/layouts/ProtectedRoute.jsx
Normal file
25
src/main.jsx
Normal file
25
src/main.jsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import './index.css';
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
|
import { store } from './app/store';
|
||||||
|
import { BrowserRouter as Router } from 'react-router-dom';
|
||||||
|
import AdminRoutes from './routes/AdminRoutes';
|
||||||
|
|
||||||
|
|
||||||
|
import "@fontsource/nunito-sans/300.css";
|
||||||
|
import "@fontsource/nunito-sans/400.css";
|
||||||
|
import "@fontsource/nunito-sans/600.css";
|
||||||
|
import "@fontsource/nunito-sans/700.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<Provider store={store}>
|
||||||
|
<Router>
|
||||||
|
<AdminRoutes />
|
||||||
|
</Router>
|
||||||
|
</Provider>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
0
src/pages/Analytics/AnalyticsPage.jsx
Normal file
0
src/pages/Analytics/AnalyticsPage.jsx
Normal file
0
src/pages/Analytics/RevenueChart.jsx
Normal file
0
src/pages/Analytics/RevenueChart.jsx
Normal file
0
src/pages/Auth/ForgotPassword.jsx
Normal file
0
src/pages/Auth/ForgotPassword.jsx
Normal file
109
src/pages/Auth/LoginPage.jsx
Normal file
109
src/pages/Auth/LoginPage.jsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { login } from "../../features/auth/authSlice";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { Eye, EyeOff } from "lucide-react";
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { loading, error } = useSelector((state) => state.auth);
|
||||||
|
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
await dispatch(login({ email, password })).unwrap();
|
||||||
|
navigate("/dashboard");
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Login failed:", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#4880FF] px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 transform">
|
||||||
|
{/* Logo Section */}
|
||||||
|
<div className="flex flex-col items-center mb-8">
|
||||||
|
<img
|
||||||
|
src="/main-logo.png"
|
||||||
|
alt="Logo"
|
||||||
|
className="w-48 object-contain"
|
||||||
|
/>
|
||||||
|
<h1 className="text-2xl font-bold text-[#202224]">Welcome Back</h1>
|
||||||
|
<p className="text-[ #202224] text-sm mt-1">
|
||||||
|
Login to your admin panel
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 text-sm text-red-600 bg-red-100 p-2 rounded">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Login Form */}
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-[#757a79] mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="admin@example.com"
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#D8D8D8] focus:outline-none"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<label className="block text-sm font-semibold text-[#757a79] mb-1">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={showPassword ? "text" : "password"}
|
||||||
|
placeholder="••••••••"
|
||||||
|
className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#D8D8D8] focus:outline-none"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{/* 👁️ Toggle Button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute inset-y-0 right-3 top-6 flex items-center text-gray-500 hover:text-[#704F38]"
|
||||||
|
tabIndex={-1}
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className={`w-full py-2 text-white font-semibold rounded-lg transition-all duration-300 ${
|
||||||
|
loading
|
||||||
|
? "bg-gray-400 cursor-not-allowed"
|
||||||
|
: "bg-[#4880FF] hover:bg-[#2F5BC4] shadow-md hover:shadow-lg"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{loading ? "Logging in..." : "Login"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<p className="text-center text-gray-500 text-xs mt-6">
|
||||||
|
© {new Date().getFullYear()} Vaishnavi creation. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
0
src/pages/Auth/RegisterPage.jsx
Normal file
0
src/pages/Auth/RegisterPage.jsx
Normal file
110
src/pages/Categories/CategoryDetails.jsx
Normal file
110
src/pages/Categories/CategoryDetails.jsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useParams, Link } from "react-router-dom";
|
||||||
|
import { ArrowLeft } from "lucide-react";
|
||||||
|
import { useGetCategoryByIdQuery } from "../../features/categories/categoryAPI";
|
||||||
|
|
||||||
|
const CategoryDetails = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const { data, isLoading } = useGetCategoryByIdQuery(id);
|
||||||
|
|
||||||
|
const category = data?.data;
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-64 text-gray-600">
|
||||||
|
Loading category details...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!category) {
|
||||||
|
return (
|
||||||
|
<div className="text-center mt-10 text-gray-600">Category not found!</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-5xl mx-auto space-y-8">
|
||||||
|
{/* Back */}
|
||||||
|
<div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
|
||||||
|
<ArrowLeft size={18} />
|
||||||
|
<Link to="/categories" className="font-medium">
|
||||||
|
Back to Categories
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex flex-col md:flex-row justify-between bg-white shadow-md rounded-2xl p-6 border">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800">{category.name}</h2>
|
||||||
|
<p className="text-gray-500 text-sm mt-1">{category.slug}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
className={`mt-4 md:mt-0 px-4 py-2 rounded-full text-sm font-medium ${
|
||||||
|
category.isActive
|
||||||
|
? "bg-green-100 text-green-700"
|
||||||
|
: "bg-red-100 text-red-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{category.isActive ? "Active" : "Inactive"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info Grid */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{/* Category Info */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6 border space-y-3">
|
||||||
|
<h3 className="text-lg font-semibold border-b pb-2">
|
||||||
|
Category Information
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<InfoRow label="Description" value={category.description || "N/A"} />
|
||||||
|
<InfoRow label="Parent ID" value={category.parentId || "Root"} />
|
||||||
|
<InfoRow label="Sequence" value={category.sequence} />
|
||||||
|
<InfoRow label="Meta Title" value={category.metaTitle} />
|
||||||
|
<InfoRow label="Meta Description" value={category.metaDescription} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Meta & Dates */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6 border space-y-3">
|
||||||
|
<h3 className="text-lg font-semibold border-b pb-2">System Info</h3>
|
||||||
|
|
||||||
|
<InfoRow
|
||||||
|
label="Created At"
|
||||||
|
value={new Date(category.createdAt).toLocaleString()}
|
||||||
|
/>
|
||||||
|
<InfoRow
|
||||||
|
label="Updated At"
|
||||||
|
value={new Date(category.updatedAt).toLocaleString()}
|
||||||
|
/>
|
||||||
|
<InfoRow label="Category ID" value={category.id} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image */}
|
||||||
|
{category.image && (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6 border">
|
||||||
|
<h3 className="text-lg font-semibold border-b pb-3">
|
||||||
|
Category Image
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src={category.image}
|
||||||
|
alt={category.name}
|
||||||
|
className="mt-4 w-64 h-64 object-cover rounded-xl border"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const InfoRow = ({ label, value }) => (
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-gray-600 font-medium">{label}:</span>
|
||||||
|
<span className="text-gray-800 text-right ml-4">{value}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default CategoryDetails;
|
||||||
248
src/pages/Categories/CategoryEdit.jsx
Normal file
248
src/pages/Categories/CategoryEdit.jsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useNavigate, useParams, Link } from "react-router-dom";
|
||||||
|
import { ArrowLeft } from "lucide-react";
|
||||||
|
import {
|
||||||
|
useGetCategoryByIdQuery,
|
||||||
|
useUpdateCategoryMutation,
|
||||||
|
} from "../../features/categories/categoryAPI";
|
||||||
|
|
||||||
|
const CategoryEdit = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { data, isLoading } = useGetCategoryByIdQuery(id);
|
||||||
|
const [updateCategory, { isLoading: isUpdating }] =
|
||||||
|
useUpdateCategoryMutation();
|
||||||
|
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
metaTitle: "",
|
||||||
|
metaDescription: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [previewImage, setPreviewImage] = useState(null);
|
||||||
|
const [selectedFile, setSelectedFile] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data?.data) {
|
||||||
|
const { name, description, image, metaTitle, metaDescription } =
|
||||||
|
data.data;
|
||||||
|
|
||||||
|
setForm({ name, description, metaTitle, metaDescription });
|
||||||
|
setPreviewImage(image); // show existing image
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setForm((prev) => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageChange = (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
setSelectedFile(file);
|
||||||
|
setPreviewImage(URL.createObjectURL(file));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
formData.append("name", form.name);
|
||||||
|
formData.append("description", form.description);
|
||||||
|
formData.append("metaTitle", form.metaTitle);
|
||||||
|
formData.append("metaDescription", form.metaDescription);
|
||||||
|
|
||||||
|
if (selectedFile) {
|
||||||
|
formData.append("image", selectedFile);
|
||||||
|
}
|
||||||
|
|
||||||
|
await updateCategory({ id, data: formData }).unwrap();
|
||||||
|
|
||||||
|
alert("Category updated successfully!");
|
||||||
|
navigate("/categories");
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
alert("Failed to update category");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <div className="text-center py-10">Loading category...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-200 py-12 px-4">
|
||||||
|
<div className="max-w-5xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-10">
|
||||||
|
<Link
|
||||||
|
to="/categories"
|
||||||
|
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition"
|
||||||
|
>
|
||||||
|
<ArrowLeft size={20} />
|
||||||
|
<span className="font-medium">Back to Categories</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<h1 className="text-xl font-bold bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-transparent">
|
||||||
|
Edit Category
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Glass Card */}
|
||||||
|
<div className="backdrop-blur-xl bg-white/70 border border-white/40 shadow-2xl rounded-3xl p-10 transition hover:shadow-indigo-200/50">
|
||||||
|
<form className="space-y-10" onSubmit={handleSubmit}>
|
||||||
|
{/* SECTION 1 */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-gray-800 mb-6">
|
||||||
|
Basic Information
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
<FloatingInput
|
||||||
|
label="Category Name"
|
||||||
|
name="name"
|
||||||
|
value={form.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FloatingInput
|
||||||
|
label="Meta Title"
|
||||||
|
name="metaTitle"
|
||||||
|
value={form.metaTitle}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 space-y-6">
|
||||||
|
<FloatingTextarea
|
||||||
|
label="Description"
|
||||||
|
name="description"
|
||||||
|
value={form.description}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FloatingTextarea
|
||||||
|
label="Meta Description"
|
||||||
|
name="metaDescription"
|
||||||
|
value={form.metaDescription}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SECTION 2 - IMAGE */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-gray-800 mb-6">
|
||||||
|
Category Image
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row items-start gap-10">
|
||||||
|
{/* Preview Card */}
|
||||||
|
<div className="relative group w-56 h-56 rounded-2xl overflow-hidden shadow-xl border border-gray-200">
|
||||||
|
{previewImage ? (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={previewImage}
|
||||||
|
alt="Preview"
|
||||||
|
className="w-full h-full object-cover transition duration-300 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white font-medium transition">
|
||||||
|
Change Image
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center text-gray-400 bg-gray-100">
|
||||||
|
No Image
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload Button */}
|
||||||
|
<label className="cursor-pointer">
|
||||||
|
<div className="px-8 py-4 rounded-2xl bg-gradient-to-r from-indigo-500 to-blue-600 text-white font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300">
|
||||||
|
Upload New Image
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleImageChange}
|
||||||
|
hidden
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit */}
|
||||||
|
<div className="pt-6 border-t border-gray-200 flex justify-end">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isUpdating}
|
||||||
|
className="px-10 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-green-600 text-white font-semibold shadow-xl hover:scale-105 hover:shadow-2xl transition-all duration-300 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isUpdating ? "Updating..." : "Update Category"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FloatingInput = ({ label, name, value, onChange, required }) => (
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
required={required}
|
||||||
|
placeholder=" "
|
||||||
|
className="peer w-full border border-gray-300 rounded-xl px-4 pt-6 pb-2 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="absolute left-4 top-2 text-gray-500 text-sm transition-all
|
||||||
|
peer-placeholder-shown:top-4
|
||||||
|
peer-placeholder-shown:text-base
|
||||||
|
peer-placeholder-shown:text-gray-400
|
||||||
|
peer-focus:top-2
|
||||||
|
peer-focus:text-sm
|
||||||
|
peer-focus:text-indigo-600"
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const FloatingTextarea = ({ label, name, value, onChange }) => (
|
||||||
|
<div className="relative">
|
||||||
|
<textarea
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
rows={4}
|
||||||
|
placeholder=" "
|
||||||
|
className="peer w-full border border-gray-300 rounded-xl px-4 pt-6 pb-2 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition resize-none"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="absolute left-4 top-2 text-gray-500 text-sm transition-all
|
||||||
|
peer-placeholder-shown:top-4
|
||||||
|
peer-placeholder-shown:text-base
|
||||||
|
peer-placeholder-shown:text-gray-400
|
||||||
|
peer-focus:top-2
|
||||||
|
peer-focus:text-sm
|
||||||
|
peer-focus:text-indigo-600"
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default CategoryEdit;
|
||||||
624
src/pages/Categories/CategoryForm.jsx
Normal file
624
src/pages/Categories/CategoryForm.jsx
Normal file
@@ -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;
|
||||||
332
src/pages/Categories/CategoryList.jsx
Normal file
332
src/pages/Categories/CategoryList.jsx
Normal file
@@ -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;
|
||||||
78
src/pages/Categories/ReorderCategories.jsx
Normal file
78
src/pages/Categories/ReorderCategories.jsx
Normal file
@@ -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;
|
||||||
154
src/pages/Coupons/CouponDetails.jsx
Normal file
154
src/pages/Coupons/CouponDetails.jsx
Normal file
@@ -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;
|
||||||
157
src/pages/Coupons/CouponsPage.jsx
Normal file
157
src/pages/Coupons/CouponsPage.jsx
Normal file
@@ -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;
|
||||||
169
src/pages/Coupons/CreateCoupon.jsx
Normal file
169
src/pages/Coupons/CreateCoupon.jsx
Normal file
@@ -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;
|
||||||
97
src/pages/Dashboard/CouponStats.jsx
Normal file
97
src/pages/Dashboard/CouponStats.jsx
Normal file
@@ -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;
|
||||||
1195
src/pages/Dashboard/DashboardPage.jsx
Normal file
1195
src/pages/Dashboard/DashboardPage.jsx
Normal file
File diff suppressed because it is too large
Load Diff
16
src/pages/Dashboard/components/ChartsSection.jsx
Normal file
16
src/pages/Dashboard/components/ChartsSection.jsx
Normal file
@@ -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;
|
||||||
84
src/pages/Dashboard/components/InventoryStatus.jsx
Normal file
84
src/pages/Dashboard/components/InventoryStatus.jsx
Normal file
@@ -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;
|
||||||
45
src/pages/Dashboard/components/LowStockAlert.jsx
Normal file
45
src/pages/Dashboard/components/LowStockAlert.jsx
Normal file
@@ -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;
|
||||||
81
src/pages/Dashboard/components/MonthlyComparison.jsx
Normal file
81
src/pages/Dashboard/components/MonthlyComparison.jsx
Normal file
@@ -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;
|
||||||
71
src/pages/Dashboard/components/OrdersByStatusCard.jsx
Normal file
71
src/pages/Dashboard/components/OrdersByStatusCard.jsx
Normal file
@@ -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;
|
||||||
224
src/pages/Dashboard/components/OrdersByStatusPage.jsx
Normal file
224
src/pages/Dashboard/components/OrdersByStatusPage.jsx
Normal file
@@ -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;
|
||||||
97
src/pages/Dashboard/components/OrdersOverview.jsx
Normal file
97
src/pages/Dashboard/components/OrdersOverview.jsx
Normal file
@@ -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;
|
||||||
205
src/pages/Dashboard/components/RecentOrders.jsx
Normal file
205
src/pages/Dashboard/components/RecentOrders.jsx
Normal file
@@ -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;
|
||||||
127
src/pages/Dashboard/components/StatsCards.jsx
Normal file
127
src/pages/Dashboard/components/StatsCards.jsx
Normal file
@@ -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;
|
||||||
85
src/pages/Dashboard/components/TopProducts.jsx
Normal file
85
src/pages/Dashboard/components/TopProducts.jsx
Normal file
@@ -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;
|
||||||
292
src/pages/Orders/OrderDetails.jsx
Normal file
292
src/pages/Orders/OrderDetails.jsx
Normal file
@@ -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;
|
||||||
138
src/pages/Orders/OrderHistoryDrawer.jsx
Normal file
138
src/pages/Orders/OrderHistoryDrawer.jsx
Normal file
@@ -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;
|
||||||
127
src/pages/Orders/OrderList.jsx
Normal file
127
src/pages/Orders/OrderList.jsx
Normal file
@@ -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;
|
||||||
68
src/pages/Orders/OrderStatusModal.jsx
Normal file
68
src/pages/Orders/OrderStatusModal.jsx
Normal file
@@ -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;
|
||||||
100
src/pages/Orders/StatusUpdateForm.jsx
Normal file
100
src/pages/Orders/StatusUpdateForm.jsx
Normal file
@@ -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;
|
||||||
887
src/pages/Products/ProductAdd.jsx
Normal file
887
src/pages/Products/ProductAdd.jsx
Normal file
@@ -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;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user