Initial Commit
This commit is contained in:
Suraj Birewar
parent
4e79af2965
commit
022d2c2fd7
21
.eslintrc.cjs
Normal file
21
.eslintrc.cjs
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react/jsx-runtime',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||||
|
settings: { react: { version: '18.2' } },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!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>Brooks Bingam app</title>
|
||||||
|
<link rel="stylesheet" href="./src/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6103
package-lock.json
generated
Normal file
6103
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "dashboard",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.3.7",
|
||||||
|
"antd": "^5.18.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.23.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.66",
|
||||||
|
"@types/react-dom": "^18.2.22",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"autoprefixer": "^10.4.19",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-react": "^7.34.1",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.6",
|
||||||
|
"postcss": "^8.4.38",
|
||||||
|
"tailwindcss": "^3.4.4",
|
||||||
|
"vite": "^5.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
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 |
0
src/App.css
Normal file
0
src/App.css
Normal file
53
src/App.jsx
Normal file
53
src/App.jsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import React, { useContext } from 'react';
|
||||||
|
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
|
||||||
|
import { Layout } from 'antd';
|
||||||
|
import LoginPage from './components/Auth/LoginPage';
|
||||||
|
import AdminDashboard from './components/admin/AdminDashboard';
|
||||||
|
import EmployeeDashboard from './components/employee/EmployeeDashboard';
|
||||||
|
import CustomerList from './components/customer/CustomerList';
|
||||||
|
import AddCustomer from './components/customer/AddCustomer';
|
||||||
|
import Sidebar from './components/sidebar/Sidebar';
|
||||||
|
import CustomerMeasurements from './components/customer/CustomerMeasurements';
|
||||||
|
|
||||||
|
import { AuthProvider, AuthContext } from './contexts/AuthContext';
|
||||||
|
|
||||||
|
const { Content } = Layout;
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
const { user } = { name: 'Suraj' }; // useContext(AuthContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex w-full">
|
||||||
|
<Content className="flex-1 p-6 bg-gray-900 text-white">
|
||||||
|
{user && <Sidebar />}
|
||||||
|
<AuthProvider>
|
||||||
|
<Router>
|
||||||
|
<Routes>
|
||||||
|
<Route exact path="/" element={<LoginPage />} />
|
||||||
|
<Route path="/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
|
||||||
|
<Route path="/admin-dashboard" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
|
||||||
|
<Route path="/employee" element={<PrivateRoute><EmployeeDashboard /></PrivateRoute>} />
|
||||||
|
<Route path="/customers" element={<PrivateRoute><CustomerList /></PrivateRoute>} />
|
||||||
|
<Route path="/add-customer" element={<PrivateRoute><AddCustomer /></PrivateRoute>} />
|
||||||
|
<Route path="/employee/create-order" element={<CustomerList />} />
|
||||||
|
<Route path="/measurements" element={<CustomerMeasurements />} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
</AuthProvider>
|
||||||
|
</Content>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const PrivateRoute = ({ children }) => {
|
||||||
|
const { user } = useContext(AuthContext);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return <Navigate to="/" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
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 |
3
src/assets/thob-data/AddCustomerIcon.svg
Normal file
3
src/assets/thob-data/AddCustomerIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1.95833 19.25C1.68681 19.25 1.45936 19.15 1.276 18.95C1.09264 18.75 1.00064 18.5028 1 18.2083V17.6094C1 16.8628 1.35139 16.2552 2.05417 15.7865C2.75694 15.3177 3.68333 15.0833 4.83333 15.0833C5.04097 15.0833 5.24062 15.0878 5.43229 15.0969C5.62396 15.1059 5.80764 15.1274 5.98333 15.1615C5.75972 15.526 5.59201 15.908 5.48021 16.3073C5.3684 16.7066 5.3125 17.1233 5.3125 17.5573V19.25H1.95833ZM7.70833 19.25C7.43681 19.25 7.20936 19.15 7.026 18.95C6.84264 18.75 6.75064 18.5028 6.75 18.2083V17.5573C6.75 17.0017 6.88992 16.4937 7.16975 16.0333C7.44958 15.5729 7.84474 15.1694 8.35521 14.8229C8.86568 14.4764 9.47678 14.216 10.1885 14.0417C10.9002 13.8674 11.6707 13.7806 12.5 13.7812C13.3465 13.7812 14.1253 13.8681 14.8364 14.0417C15.5475 14.2153 16.1583 14.4757 16.6687 14.8229C17.1792 15.1701 17.5705 15.574 17.8427 16.0344C18.1149 16.4948 18.2506 17.0024 18.25 17.5573V18.2083C18.25 18.5035 18.1583 18.751 17.975 18.951C17.7916 19.151 17.5638 19.2507 17.2917 19.25H7.70833ZM19.6875 19.25V17.5573C19.6875 17.1059 19.6357 16.6806 19.5322 16.2812C19.4287 15.8819 19.2729 15.5087 19.0646 15.1615C19.2403 15.1267 19.4201 15.1052 19.6041 15.0969C19.7881 15.0885 19.9756 15.084 20.1667 15.0833C21.3167 15.0833 22.2431 15.3135 22.9458 15.774C23.6486 16.2344 24 16.8462 24 17.6094V18.2083C24 18.5035 23.908 18.751 23.724 18.951C23.54 19.151 23.3126 19.2507 23.0417 19.25H19.6875ZM4.83333 14.0417C4.30625 14.0417 3.85519 13.8378 3.48017 13.4302C3.10514 13.0226 2.91731 12.5319 2.91667 11.9583C2.91667 11.3681 3.1045 10.8733 3.48017 10.474C3.85583 10.0747 4.30689 9.875 4.83333 9.875C5.37639 9.875 5.8316 10.0747 6.19896 10.474C6.56632 10.8733 6.75 11.3681 6.75 11.9583C6.75 12.5312 6.56632 13.0219 6.19896 13.4302C5.8316 13.8385 5.37639 14.0424 4.83333 14.0417ZM20.1667 14.0417C19.6396 14.0417 19.1885 13.8378 18.8135 13.4302C18.4385 13.0226 18.2506 12.5319 18.25 11.9583C18.25 11.3681 18.4378 10.8733 18.8135 10.474C19.1892 10.0747 19.6402 9.875 20.1667 9.875C20.7097 9.875 21.1649 10.0747 21.5323 10.474C21.8997 10.8733 22.0833 11.3681 22.0833 11.9583C22.0833 12.5312 21.8997 13.0219 21.5323 13.4302C21.1649 13.8385 20.7097 14.0424 20.1667 14.0417ZM12.5 13C11.7014 13 11.0226 12.6962 10.4635 12.0885C9.90451 11.4809 9.625 10.7431 9.625 9.875C9.625 8.98958 9.90451 8.24757 10.4635 7.64896C11.0226 7.05035 11.7014 6.75069 12.5 6.75C13.3146 6.75 13.9976 7.04965 14.5489 7.64896C15.1003 8.24826 15.3756 8.99028 15.375 9.875C15.375 10.7431 15.0996 11.4809 14.5489 12.0885C13.9982 12.6962 13.3152 13 12.5 13Z" fill="#B3B3B3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
9
src/assets/thob-data/Brandloog.svg
Normal file
9
src/assets/thob-data/Brandloog.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
4
src/assets/thob-data/Brookslogo.svg
Normal file
4
src/assets/thob-data/Brookslogo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.2 KiB |
3
src/assets/thob-data/CatalogIcon.svg
Normal file
3
src/assets/thob-data/CatalogIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.5 2.4375V12.5H22.5625V24H1V2.4375H12.5ZM11.0625 22.5625V13.9375H2.4375V22.5625H11.0625ZM11.0625 12.5V3.875H2.4375V12.5H11.0625ZM21.125 13.9375H12.5V22.5625H21.125V13.9375ZM19.6875 5.3125H24V6.75H19.6875V11.0625H18.25V6.75H13.9375V5.3125H18.25V1H19.6875V5.3125Z" fill="#B3B3B3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 395 B |
3
src/assets/thob-data/CategoriesIcon.svg
Normal file
3
src/assets/thob-data/CategoriesIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.16602 4.66675H10.416V10.9167H4.16602V4.66675ZM14.5827 4.66675H20.8327V10.9167H14.5827V4.66675ZM4.16602 15.0834H10.416V21.3334H4.16602V15.0834ZM14.5827 18.2084C14.5827 19.0372 14.9119 19.8321 15.498 20.4181C16.084 21.0042 16.8789 21.3334 17.7077 21.3334C18.5365 21.3334 19.3313 21.0042 19.9174 20.4181C20.5034 19.8321 20.8327 19.0372 20.8327 18.2084C20.8327 17.3796 20.5034 16.5848 19.9174 15.9987C19.3313 15.4127 18.5365 15.0834 17.7077 15.0834C16.8789 15.0834 16.084 15.4127 15.498 15.9987C14.9119 16.5848 14.5827 17.3796 14.5827 18.2084Z" stroke="#B3B3B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 739 B |
3
src/assets/thob-data/EmployeeIcon.svg
Normal file
3
src/assets/thob-data/EmployeeIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.55303 6.90733V5.68858C7.55318 5.25214 7.7099 4.83024 7.99471 4.49955C8.27952 4.16887 8.67353 3.95133 9.10512 3.88649L10.376 3.69587C11.7847 3.48452 13.2172 3.48452 14.6259 3.69587L15.8968 3.88649C16.3284 3.95133 16.7224 4.16887 17.0072 4.49955C17.292 4.83024 17.4487 5.25214 17.4489 5.68858V6.90733L19.2343 7.05108C19.8986 7.10474 20.5257 7.37958 21.0153 7.83166C21.505 8.28374 21.8289 8.88694 21.9353 9.54483C22.4199 12.5371 22.4199 15.5879 21.9353 18.5802C21.8289 19.2381 21.505 19.8413 21.0153 20.2934C20.5257 20.7455 19.8986 21.0203 19.2343 21.074L17.2843 21.2302C14.1006 21.4872 10.9013 21.4872 7.71762 21.2302L5.76762 21.074C5.10334 21.0203 4.47625 20.7455 3.98659 20.2934C3.49694 19.8413 3.173 19.2381 3.06658 18.5802C2.58197 15.5879 2.58197 12.5371 3.06658 9.54483C3.17321 8.88713 3.49724 8.28417 3.98688 7.83229C4.47651 7.38042 5.10349 7.10573 5.76762 7.05212L7.55303 6.90733ZM10.6082 5.24066C11.863 5.05246 13.1389 5.05246 14.3937 5.24066L15.6645 5.43128C15.7261 5.44051 15.7825 5.47155 15.8232 5.51876C15.8639 5.56598 15.8863 5.62623 15.8864 5.68858V6.79795C13.6313 6.66934 11.3706 6.66934 9.11553 6.79795V5.68753C9.1156 5.62519 9.13802 5.56494 9.17874 5.51772C9.21945 5.47051 9.27575 5.43947 9.33741 5.43024L10.6082 5.24066ZM7.84366 8.45107C10.9437 8.20107 14.0582 8.20107 17.1582 8.45107L19.1082 8.60941C19.4242 8.63469 19.7226 8.76523 19.9557 8.98014C20.1887 9.19505 20.3429 9.48191 20.3937 9.79482C20.4582 10.1959 20.5134 10.5969 20.5603 11.0011C18.053 12.2355 15.2956 12.8774 12.5009 12.8774C9.70625 12.8774 6.9489 12.2355 4.44158 11.0011C4.48741 10.5979 4.54366 10.1959 4.60824 9.79482C4.65898 9.48191 4.8132 9.19505 5.04624 8.98014C5.27928 8.76523 5.57766 8.63469 5.89366 8.60941L7.84366 8.45107ZM4.30199 12.6636C6.87683 13.8342 9.6725 14.4399 12.5009 14.4399C15.3294 14.4399 18.1251 13.8342 20.6999 12.6636C20.7995 14.558 20.6968 16.4576 20.3937 18.3302C20.3431 18.6434 20.189 18.9304 19.9559 19.1456C19.7229 19.3607 19.4244 19.4914 19.1082 19.5167L17.1582 19.6729C14.0582 19.9229 10.9437 19.9229 7.84366 19.6729L5.89366 19.5167C5.57751 19.4914 5.27901 19.3607 5.04596 19.1456C4.8129 18.9304 4.65877 18.6434 4.60824 18.3302C4.30512 16.4552 4.20199 14.5552 4.30199 12.6636Z" fill="#B3B3B3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
3
src/assets/thob-data/HelpIcon.svg
Normal file
3
src/assets/thob-data/HelpIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.459 18.7499H13.5423V16.6666H11.459V18.7499ZM12.5007 2.08325C11.1327 2.08325 9.77817 2.35269 8.51437 2.87617C7.25056 3.39966 6.10223 4.16695 5.13496 5.13422C3.18145 7.08773 2.08398 9.73725 2.08398 12.4999C2.08398 15.2626 3.18145 17.9121 5.13496 19.8656C6.10223 20.8329 7.25056 21.6002 8.51437 22.1237C9.77817 22.6472 11.1327 22.9166 12.5007 22.9166C15.2633 22.9166 17.9128 21.8191 19.8663 19.8656C21.8199 17.9121 22.9173 15.2626 22.9173 12.4999C22.9173 11.132 22.6479 9.77744 22.1244 8.51363C21.6009 7.24982 20.8336 6.1015 19.8663 5.13422C18.8991 4.16695 17.7507 3.39966 16.4869 2.87617C15.2231 2.35269 13.8686 2.08325 12.5007 2.08325ZM12.5007 20.8333C7.9069 20.8333 4.16732 17.0937 4.16732 12.4999C4.16732 7.90617 7.9069 4.16659 12.5007 4.16659C17.0944 4.16659 20.834 7.90617 20.834 12.4999C20.834 17.0937 17.0944 20.8333 12.5007 20.8333ZM12.5007 6.24992C11.3956 6.24992 10.3358 6.68891 9.55437 7.47031C8.77297 8.25171 8.33398 9.31152 8.33398 10.4166H10.4173C10.4173 9.86405 10.6368 9.33415 11.0275 8.94345C11.4182 8.55275 11.9481 8.33325 12.5007 8.33325C13.0532 8.33325 13.5831 8.55275 13.9738 8.94345C14.3645 9.33415 14.584 9.86405 14.584 10.4166C14.584 12.4999 11.459 12.2395 11.459 15.6249H13.5423C13.5423 13.2812 16.6673 13.0208 16.6673 10.4166C16.6673 9.31152 16.2283 8.25171 15.4469 7.47031C14.6655 6.68891 13.6057 6.24992 12.5007 6.24992Z" fill="#B3B3B3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
4
src/assets/thob-data/HomeIcon.svg
Normal file
4
src/assets/thob-data/HomeIcon.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3.20833 11.085H1.125L10.5 1.70996L19.875 11.085H17.7917M3.20833 11.085V18.3766C3.20833 18.9292 3.42783 19.4591 3.81853 19.8498C4.20923 20.2405 4.73913 20.46 5.29167 20.46H15.7083C16.2609 20.46 16.7908 20.2405 17.1815 19.8498C17.5722 19.4591 17.7917 18.9292 17.7917 18.3766V11.085" stroke="#B3B3B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M7.375 20.46V14.21C7.375 13.6575 7.59449 13.1276 7.98519 12.7369C8.3759 12.3462 8.9058 12.1267 9.45833 12.1267H11.5417C12.0942 12.1267 12.6241 12.3462 13.0148 12.7369C13.4055 13.1276 13.625 13.6575 13.625 14.21V20.46" stroke="#B3B3B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 787 B |
3
src/assets/thob-data/LogoutIcon.svg
Normal file
3
src/assets/thob-data/LogoutIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5 21C4.45 21 3.97933 20.8043 3.588 20.413C3.19667 20.0217 3.00067 19.5507 3 19V5C3 4.45 3.196 3.97933 3.588 3.588C3.98 3.19667 4.45067 3.00067 5 3H12V5H5V19H12V21H5ZM16 17L14.625 15.55L17.175 13H9V11H17.175L14.625 8.45L16 7L21 12L16 17Z" fill="#B3B3B3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 368 B |
4
src/assets/thob-data/MeasurmentsIcon.svg
Normal file
4
src/assets/thob-data/MeasurmentsIcon.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.92893 9.87335C8.67372 9.97804 8.99663 10.1609 9.17528 10.1619C9.25654 10.1726 9.33919 10.1634 9.41609 10.135C9.493 10.1067 9.56185 10.06 9.6167 9.99913C9.67155 9.93822 9.71077 9.86489 9.73095 9.78545C9.75114 9.70601 9.7517 9.62285 9.73257 9.54314C9.57268 9.09262 8.81747 8.91137 8.22893 9.05356C7.38049 9.25929 7.05341 9.95981 7.3758 10.5114C7.79872 11.2364 9.06799 11.5093 10.0659 11.2046C11.3076 10.826 11.7669 9.76606 11.2117 8.93533C10.5451 7.93898 8.75861 7.57492 7.3633 8.04054C5.73309 8.58481 5.14195 10.0025 5.9284 11.1062C6.83049 12.3707 9.13153 12.826 10.9164 12.2004C12.9321 11.4947 13.6534 9.72127 12.6373 8.34992C11.5044 6.81919 8.69403 6.27387 6.52372 7.05721C4.12684 7.92231 3.27632 10.0473 4.51851 11.6853C5.87945 13.4791 9.19559 14.1135 11.7477 13.1739C14.5222 12.1515 15.5013 9.677 14.0341 7.77596C12.4472 5.72075 8.62893 4.99679 5.69924 6.09262C2.5482 7.27075 1.44143 10.0926 3.13257 12.2546C4.20809 13.6301 6.25445 14.553 8.49507 14.7067" stroke="#B3B3B3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M8.49414 14.7068H22.6556V19.4167H8.45768C5.01081 19.4167 2.3457 17.1198 2.3457 14.1183V9.99744M4.99466 18.4157V17.2386M6.76081 19.1224V16.7672M8.52695 19.4167V18.2396M10.2931 19.4167V17.0615M12.0587 19.4167V18.2396M13.8254 19.4167V17.0615M15.591 19.4167V18.2396M19.1233 19.4167V18.2396M17.3577 19.4167V17.0615M20.8895 19.4167V17.0615M14.7082 14.648V9.52661" stroke="#B3B3B3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
4
src/assets/thob-data/OrdersIcon.svg
Normal file
4
src/assets/thob-data/OrdersIcon.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.3841 4.75146H5.84245C5.26715 4.75146 4.80078 5.21783 4.80078 5.79313V22.4598C4.80078 23.0351 5.26715 23.5015 5.84245 23.5015H19.3841C19.9594 23.5015 20.4258 23.0351 20.4258 22.4598V5.79313C20.4258 5.21783 19.9594 4.75146 19.3841 4.75146Z" stroke="#B3B3B3" stroke-width="1.5" stroke-linejoin="round"/>
|
||||||
|
<path d="M9.48893 2.66821V5.79321M15.7389 2.66821V5.79321M8.44727 10.4807H16.7806M8.44727 14.6474H14.6973M8.44727 18.814H12.6139" stroke="#B3B3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 632 B |
3
src/assets/thob-data/ProfileIcon.svg
Normal file
3
src/assets/thob-data/ProfileIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.5007 2.58325C11.1327 2.58325 9.77817 2.85269 8.51437 3.37617C7.25056 3.89966 6.10223 4.66695 5.13496 5.63422C3.18145 7.58773 2.08398 10.2372 2.08398 12.9999C2.08398 15.7626 3.18145 18.4121 5.13496 20.3656C6.10223 21.3329 7.25056 22.1002 8.51437 22.6237C9.77817 23.1472 11.1327 23.4166 12.5007 23.4166C15.2633 23.4166 17.9128 22.3191 19.8663 20.3656C21.8199 18.4121 22.9173 15.7626 22.9173 12.9999C22.9173 11.632 22.6479 10.2774 22.1244 9.01363C21.6009 7.74982 20.8336 6.6015 19.8663 5.63422C18.8991 4.66695 17.7507 3.89966 16.4869 3.37617C15.2231 2.85269 13.8686 2.58325 12.5007 2.58325ZM7.36523 19.5416C7.81315 18.6041 10.5423 17.6874 12.5007 17.6874C14.459 17.6874 17.1882 18.6041 17.6361 19.5416C16.1768 20.7036 14.366 21.3353 12.5007 21.3333C10.5632 21.3333 8.7819 20.6666 7.36523 19.5416ZM19.1257 18.0312C17.6361 16.2187 14.0215 15.6041 12.5007 15.6041C10.9798 15.6041 7.36523 16.2187 5.87565 18.0312C4.76765 16.588 4.16713 14.8194 4.16732 12.9999C4.16732 8.40617 7.9069 4.66659 12.5007 4.66659C17.0944 4.66659 20.834 8.40617 20.834 12.9999C20.834 14.8958 20.1882 16.6458 19.1257 18.0312ZM12.5007 6.74992C10.4798 6.74992 8.85482 8.37492 8.85482 10.3958C8.85482 12.4166 10.4798 14.0416 12.5007 14.0416C14.5215 14.0416 16.1465 12.4166 16.1465 10.3958C16.1465 8.37492 14.5215 6.74992 12.5007 6.74992ZM12.5007 11.9583C12.0863 11.9583 11.6888 11.7936 11.3958 11.5006C11.1028 11.2076 10.9382 10.8102 10.9382 10.3958C10.9382 9.98135 11.1028 9.58392 11.3958 9.2909C11.6888 8.99787 12.0863 8.83325 12.5007 8.83325C12.9151 8.83325 13.3125 8.99787 13.6055 9.2909C13.8985 9.58392 14.0632 9.98135 14.0632 10.3958C14.0632 10.8102 13.8985 11.2076 13.6055 11.5006C13.3125 11.7936 12.9151 11.9583 12.5007 11.9583Z" fill="#B3B3B3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
103
src/components/Auth/LoginPage.css
Normal file
103
src/components/Auth/LoginPage.css
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;600;800&display=swap');
|
||||||
|
|
||||||
|
|
||||||
|
.login-page {
|
||||||
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
|
background-color: #09090B;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.login-page h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #F97316;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-page p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ccc; /* Lighter gray for text */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 1px solid #B3B3B3; /* Darker border */
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: #09090B; /* Dark background for input fields */
|
||||||
|
color: #fff; /* White text for input fields */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page input:focus {
|
||||||
|
border-color: #F97316; /* Orange border on focus */
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page a {
|
||||||
|
color: #B3B3B3;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
padding: 15px 30px;
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: #F97316;
|
||||||
|
color: #09090B;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button:hover {
|
||||||
|
background-color: #f26502;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password-container {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
62
src/components/Auth/LoginPage.jsx
Normal file
62
src/components/Auth/LoginPage.jsx
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import React, { useState, useContext } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { AuthContext } from '../../contexts/AuthContext';
|
||||||
|
import './LoginPage.css';
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const { login } = useContext(AuthContext);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleLogin = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const role = await login(email, password);
|
||||||
|
if (role === 'admin') {
|
||||||
|
navigate('/admin');
|
||||||
|
} else if (role === 'employee') {
|
||||||
|
navigate('/employee');
|
||||||
|
} else {
|
||||||
|
alert('Invalid credentials');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="login-page">
|
||||||
|
<div className="login-container">
|
||||||
|
<div className="form-container">
|
||||||
|
<h2>Welcome Back</h2>
|
||||||
|
<p>Be among the first to experience 3D magic! Register for private alpha.</p>
|
||||||
|
<form onSubmit={handleLogin}>
|
||||||
|
<label htmlFor="email"></label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="john123@domain.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label htmlFor="password"></label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div className="forgot-password-container">
|
||||||
|
<a href="#">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
<button type="submit" className="login-button">Login</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
21
src/components/admin/AdminDashboard.jsx
Normal file
21
src/components/admin/AdminDashboard.jsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import './Dashboard.css';
|
||||||
|
|
||||||
|
const AdminDashboard = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="dashboard">
|
||||||
|
<h1 className="dashboard-title">Admin Dashboard</h1>
|
||||||
|
<div className="dashboard-content">
|
||||||
|
<Button type="primary" onClick={() => navigate('/admin/create-order')}>Create Order</Button>
|
||||||
|
<Button type="primary" onClick={() => navigate('/admin/view-orders')}>View Orders</Button>
|
||||||
|
<Button type="primary" onClick={() => navigate('/admin/view-customers')}>View Customers</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AdminDashboard;
|
||||||
88
src/components/admin/Dashboard.css
Normal file
88
src/components/admin/Dashboard.css
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
/* Importing Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;600;800&display=swap');
|
||||||
|
|
||||||
|
/* General styles */
|
||||||
|
/* body {
|
||||||
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
|
background-color: #09090B;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.dashboard {
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #09090B;
|
||||||
|
color: #F97316;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 150px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-button {
|
||||||
|
background-color: #F97316;
|
||||||
|
border-color: #F97316;
|
||||||
|
width: 300px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-link {
|
||||||
|
color: #09090B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-button:hover {
|
||||||
|
background-color: #f26502;
|
||||||
|
border-color: #f26502;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Styles */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.dashboard-title {
|
||||||
|
font-size: 20px;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
top: 120px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
68
src/components/customer/AddCustomer.jsx
Normal file
68
src/components/customer/AddCustomer.jsx
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const AddCustomer = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900 text-gray-300 p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
|
||||||
|
<Link to="/" className="text-orange-500">skip for now</Link>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="inline-block relative">
|
||||||
|
<div className="bg-gray-700 w-24 h-24 rounded-full mx-auto"></div>
|
||||||
|
<button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs px-2 py-1 rounded-full">
|
||||||
|
{/* Add Customer Image */}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Link to="/">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-400">Customer Information</h2>
|
||||||
|
</Link>
|
||||||
|
<Link to="/measurements">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-400">Measurements</h2>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Form */}
|
||||||
|
<div className="md:col-span-2 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-400">Customer Name :</label>
|
||||||
|
<input type="text" className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-400">Age :</label>
|
||||||
|
<input type="number" className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-400">Gender :</label>
|
||||||
|
<input type="text" className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-400">Email :</label>
|
||||||
|
<input type="email" className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-400">Address :</label>
|
||||||
|
<input type="text" className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-400">Mobile No :</label>
|
||||||
|
<input type="text" className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<button className="bg-orange-500 text-white px-4 py-2 rounded-md text-sm">
|
||||||
|
Save Information
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddCustomer;
|
||||||
0
src/components/customer/CustomerDetails.jsx
Normal file
0
src/components/customer/CustomerDetails.jsx
Normal file
77
src/components/customer/CustomerList.css
Normal file
77
src/components/customer/CustomerList.css
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
.customer-list {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #1d1f21;
|
||||||
|
color: #f0f0f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-list h1 {
|
||||||
|
color: #F97316;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-customer-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #F97316;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-customer-button:hover {
|
||||||
|
background-color: #F26502;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-table th,
|
||||||
|
.customer-table td {
|
||||||
|
border: 1px solid #09090B;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-table th {
|
||||||
|
background-color: #09090B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-table tbody tr:nth-child(odd) {
|
||||||
|
background-color: #242424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-table tbody tr:nth-child(even) {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-table tbody tr:hover {
|
||||||
|
background-color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
58
src/components/customer/CustomerList.jsx
Normal file
58
src/components/customer/CustomerList.jsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const CustomerList = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const customers = [
|
||||||
|
{ id: '12d22', name: 'jane cooper' },
|
||||||
|
{ id: '5d255', name: 'esther howard' },
|
||||||
|
{ id: '147r7', name: 'guy hawkins' },
|
||||||
|
{ id: '124fd', name: 'savannah nguyen' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleAddCustomer = () => {
|
||||||
|
navigate('/add-customer');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-900 text-gray-300 p-6 rounded-lg">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h1 className="text-xl font-semibold text-orange-500">customers list</h1>
|
||||||
|
<button
|
||||||
|
className="bg-orange-500 text-white px-4 py-2 rounded-md text-sm"
|
||||||
|
onClick={handleAddCustomer}
|
||||||
|
>
|
||||||
|
add new customer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm">filter </span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm mb-4">total customers ({customers.length})</p>
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="text-left text-xs uppercase">
|
||||||
|
<th className="py-2">#</th>
|
||||||
|
<th className="py-2">customer id</th>
|
||||||
|
<th className="py-2">customer name</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{customers.map((customer, index) => (
|
||||||
|
<tr key={customer.id} className="border-t border-gray-700">
|
||||||
|
<td className="py-2">{index + 1}</td>
|
||||||
|
<td className="py-2">{customer.id}</td>
|
||||||
|
<td className="py-2">{customer.name}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomerList;
|
||||||
63
src/components/customer/CustomerMeasurements.jsx
Normal file
63
src/components/customer/CustomerMeasurements.jsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button, Input, Form } from 'antd';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const CustomerMeasurements = () => {
|
||||||
|
const onFinish = (values) => {
|
||||||
|
console.log('Measurements:', values);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900 text-gray-300 p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
|
||||||
|
<Link to="/" className="text-orange-500">skip for now</Link>
|
||||||
|
</div>
|
||||||
|
<Form onFinish={onFinish} className="space-y-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>
|
||||||
|
<Form.Item name="neck" label="Neck Circumference (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="chest" label="Chest Circumference (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="waist" label="Waist Circumference (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="shoulder" label="Shoulder Width (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="arm" label="Arm Length (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="sleeve" label="Sleeve Length (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<h2 className="text-lg font-semibold text-gray-400">Lower Body Measurements</h2>
|
||||||
|
<Form.Item name="hip" label="Hip Circumference (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="inseam" label="Inseam (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="outseam" label="Out Seam (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="thigh" label="Thigh Circumference (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="ankle" label="Ankle Circumference (in inch)">
|
||||||
|
<Input className="bg-gray-800 text-white border border-gray-700 rounded w-full py-2 px-3" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit" className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400">
|
||||||
|
Save Measurements
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomerMeasurements;
|
||||||
19
src/components/employee/Dashboard.css
Normal file
19
src/components/employee/Dashboard.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.dashboard {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content .ant-btn {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
42
src/components/employee/EmployeeDashboard.jsx
Normal file
42
src/components/employee/EmployeeDashboard.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const handleClick = () => {
|
||||||
|
navigate('/customers'); // Redirects to the '/customers' route
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
|
||||||
|
<header className="w-full p-4 flex justify-between items-center bg-gray-900">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<h1 className="text-orange-500 text-2xl font-bold">home</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400">welcome back (ester howard)</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main className="flex-1 flex flex-col items-center justify-center p-6">
|
||||||
|
<div className="w-full max-w-3xl text-center">
|
||||||
|
<img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
|
||||||
|
<button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
|
||||||
|
onClick={handleClick}>
|
||||||
|
create a new order
|
||||||
|
</button>
|
||||||
|
<button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
|
||||||
|
onClick={handleClick}>
|
||||||
|
view orders
|
||||||
|
</button>
|
||||||
|
<button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
|
||||||
|
onClick={handleClick}>
|
||||||
|
view customers
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
17
src/components/order/ViewCustomer.jsx
Normal file
17
src/components/order/ViewCustomer.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const ViewCustomers = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Customers List</h1>
|
||||||
|
<Button type="primary" onClick={() => navigate('/add-customer')}>Add New Customer</Button>
|
||||||
|
{/* Table of customers can be added here */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ViewCustomers;
|
||||||
7
src/components/order/ViewOrders.jsx
Normal file
7
src/components/order/ViewOrders.jsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const ViewOrders = () => {
|
||||||
|
return <div>View Orders Page</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ViewOrders;
|
||||||
56
src/components/sidebar/AdminSidebar.jsx
Normal file
56
src/components/sidebar/AdminSidebar.jsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout, Button } from 'antd';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './Sidebar.css';
|
||||||
|
|
||||||
|
const { Sider } = Layout;
|
||||||
|
|
||||||
|
|
||||||
|
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
||||||
|
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
|
||||||
|
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
|
||||||
|
import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
|
||||||
|
import CatalogIcon from '../../assets/thob-data/CatalogIcon.svg';
|
||||||
|
import EmployeeIcon from '../../assets/thob-data/EmployeeIcon.svg';
|
||||||
|
import MeasurmentsIcon from '../../assets/thob-data/MeasurmentsIcon.svg';
|
||||||
|
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
|
||||||
|
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
||||||
|
|
||||||
|
const AdminSidebar = () => {
|
||||||
|
return (
|
||||||
|
<Sider width={60} className="sidebar">
|
||||||
|
<div className="logo">t.</div>
|
||||||
|
<div className="menu">
|
||||||
|
<Link to="/admin-dashboard">
|
||||||
|
<Button type="link" icon={<HomeIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/manage-customers">
|
||||||
|
<Button type="link" icon={<AddCustomerIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/orders">
|
||||||
|
<Button type="link" icon={<OrdersIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/categories">
|
||||||
|
<Button type="link" icon={<CategoriesIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/catalog">
|
||||||
|
<Button type="link" icon={<CatalogIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/employees">
|
||||||
|
<Button type="link" icon={<EmployeeIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/measurements">
|
||||||
|
<Button type="link" icon={<MeasurmentsIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/profile">
|
||||||
|
<Button type="link" icon={<ProfileIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/logout">
|
||||||
|
<Button type="link" icon={<LogoutIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Sider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AdminSidebar;
|
||||||
44
src/components/sidebar/EmployeeSidebar.jsx
Normal file
44
src/components/sidebar/EmployeeSidebar.jsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout, Button } from 'antd';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './Sidebar.css';
|
||||||
|
|
||||||
|
|
||||||
|
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
||||||
|
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
|
||||||
|
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
|
||||||
|
import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
|
||||||
|
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
|
||||||
|
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
||||||
|
|
||||||
|
const { Sider } = Layout;
|
||||||
|
|
||||||
|
const EmployeeSidebar = () => {
|
||||||
|
return (
|
||||||
|
<Sider width={60} className="sidebar">
|
||||||
|
<div className="logo">t.</div>
|
||||||
|
<div className="menu">
|
||||||
|
<Link to="/admin-dashboard">
|
||||||
|
<Button type="link" icon={<HomeIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/categories">
|
||||||
|
<Button type="link" icon={<CategoriesIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/manage-customers">
|
||||||
|
<Button type="link" icon={<AddCustomerIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/orders">
|
||||||
|
<Button type="link" icon={<OrdersIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/profile">
|
||||||
|
<Button type="link" icon={<ProfileIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/logout">
|
||||||
|
<Button type="link" icon={<LogoutIcon />} className="menu-item" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Sider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EmployeeSidebar;
|
||||||
59
src/components/sidebar/Sidebar.css
Normal file
59
src/components/sidebar/Sidebar.css
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;600;800&display=swap');
|
||||||
|
|
||||||
|
/* General styles */
|
||||||
|
/* body {
|
||||||
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #F97316;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
color: #F97316;
|
||||||
|
margin: 10px 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Responsive Styles */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
flex-direction: row;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
12
src/components/sidebar/Sidebar.jsx
Normal file
12
src/components/sidebar/Sidebar.jsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React, { useContext } from 'react';
|
||||||
|
import AdminSidebar from './AdminSidebar';
|
||||||
|
import EmployeeSidebar from './EmployeeSidebar';
|
||||||
|
import { AuthContext } from '../../contexts/AuthContext';
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
|
const { user } = useContext(AuthContext);
|
||||||
|
if (!user) return null;
|
||||||
|
return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
32
src/contexts/AuthContext.jsx
Normal file
32
src/contexts/AuthContext.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React, { createContext, useState, useEffect } from 'react';
|
||||||
|
import authService from '../services/authService'; // Ensure correct import
|
||||||
|
|
||||||
|
export const AuthContext = createContext();
|
||||||
|
|
||||||
|
export const AuthProvider = ({ children }) => {
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const savedUser = authService.getCurrentUser();
|
||||||
|
if (savedUser) {
|
||||||
|
setUser(savedUser);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const login = async (username, password) => {
|
||||||
|
const userData = await authService.login(username, password);
|
||||||
|
setUser(userData);
|
||||||
|
return userData.role;
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
authService.logout();
|
||||||
|
setUser(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={{ user, login, logout }}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
77
src/index.css
Normal file
77
src/index.css
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #09090B;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F26502;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #F26502;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #09090B;
|
||||||
|
} */
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #09090B;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #F26502;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #09090B;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #F26502;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
12
src/main.jsx
Normal file
12
src/main.jsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import 'antd/dist/reset.css';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
||||||
21
src/router.jsx
Normal file
21
src/router.jsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
|
||||||
|
import LoginPage from './components/Auth/LoginPage';
|
||||||
|
import AdminDashboard from './components/admin/AdminDashboard';
|
||||||
|
import EmployeeDashboard from './components/employee/EmployeeDashboard';
|
||||||
|
import AuthProvider from './contexts/AuthContext';
|
||||||
|
|
||||||
|
const AppRouter = () => {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<AuthProvider>
|
||||||
|
<Routes>
|
||||||
|
|
||||||
|
|
||||||
|
</Routes>
|
||||||
|
</AuthProvider>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AppRouter;
|
||||||
17
src/services/authService.js
Normal file
17
src/services/authService.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const authService = {
|
||||||
|
login: async (username, password) => {
|
||||||
|
// Simulate login process
|
||||||
|
const userData = { username, role: username === 'admin' ? 'admin' : 'employee' };
|
||||||
|
localStorage.setItem('user', JSON.stringify(userData));
|
||||||
|
return userData;
|
||||||
|
},
|
||||||
|
logout: () => {
|
||||||
|
localStorage.removeItem('user');
|
||||||
|
},
|
||||||
|
getCurrentUser: () => {
|
||||||
|
return JSON.parse(localStorage.getItem('user'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default authService;
|
||||||
|
|
||||||
20
src/services/customerService.js
Normal file
20
src/services/customerService.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
const customerService = {
|
||||||
|
addCustomer: async (customer) => {
|
||||||
|
// Simulate a POST request to add a customer
|
||||||
|
// Replace with actual API call
|
||||||
|
const response = await new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve({ status: 200, data: customer });
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status !== 200) {
|
||||||
|
throw new Error('Failed to add customer');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default customerService;
|
||||||
|
|
||||||
0
src/services/orderService.js
Normal file
0
src/services/orderService.js
Normal file
0
src/styles/styles.css
Normal file
0
src/styles/styles.css
Normal file
0
src/utils/constants.js
Normal file
0
src/utils/constants.js
Normal file
0
src/utils/helpers.js
Normal file
0
src/utils/helpers.js
Normal file
10
tailwind.config.js
Normal file
10
tailwind.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,jsx,ts,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user