added employee list page and add employee page
This commit is contained in:
parent
4b243a5e1e
commit
f900881dd7
10
db.json
10
db.json
@ -102,6 +102,16 @@
|
||||
"email": "dikshant001@gmail.com",
|
||||
"address": "Bavdhan, Pune",
|
||||
"mobile": "45654665645"
|
||||
},
|
||||
{
|
||||
"id": "377d",
|
||||
"firstname": "tejas",
|
||||
"lastname": "chari",
|
||||
"age": "28",
|
||||
"gender": "male",
|
||||
"email": "tejas001@gmail.com",
|
||||
"address": " Baner, Pune",
|
||||
"mobile": "8675493099"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -8,10 +8,9 @@ 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';
|
||||
import EmployeeList from './components/admin/EmployeeList';
|
||||
import AddEmployee from './components/admin/AddEmployee';
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
@ -25,13 +24,15 @@ const App = () => {
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route exact path="/" element={<LoginPage />} />
|
||||
<Route path="/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
|
||||
<Route path="/employee/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
|
||||
<Route path="/admin" 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 />} />
|
||||
<Route path="employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
|
||||
<Route path="/add-employee" element={<PrivateRoute><AddEmployee /></PrivateRoute>} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</AuthProvider>
|
||||
|
||||
@ -21,7 +21,7 @@ body, html {
|
||||
/* background-color: #222; */
|
||||
border-radius: 8px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 10px #d1d5db;
|
||||
width: 310.4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
147
src/components/admin/AddEmployee.jsx
Normal file
147
src/components/admin/AddEmployee.jsx
Normal file
@ -0,0 +1,147 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
|
||||
const AddEmployee = () => {
|
||||
const navigate = useNavigate();
|
||||
const [employeeData, setEmployeeData] = useState({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
address: '',
|
||||
mobile: '',
|
||||
});
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setEmployeeData({
|
||||
...employeeData,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddEmployeeSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await axiosInstance.post('/employees', employeeData);
|
||||
navigate('/employees');
|
||||
} catch (error) {
|
||||
console.error('Error adding employee:', error.response || error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<Sidebar />
|
||||
<div className="w-full flex flex-col min-h-screen text-black">
|
||||
<div className="min-h-screen text-gray-800 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-blue-900">Creating Employee Account</h1>
|
||||
<Link to="/" className="text-blue-900">Skip for now</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<div className="inline-block relative">
|
||||
<div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></div>
|
||||
<button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-#4b5563 text-white text-xs px-2 py-1 rounded-full">
|
||||
Add Employee Image
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<form onSubmit={handleAddEmployeeSubmit}>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Employee Firstname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
value={employeeData.firstname}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Employee Lastname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={employeeData.lastname}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={employeeData.age}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Gender:</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={employeeData.gender}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
>
|
||||
<option value="" disabled>Select Gender</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={employeeData.email}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Address:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={employeeData.address}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Mobile No:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobile"
|
||||
value={employeeData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div className="text-center">
|
||||
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold">
|
||||
Create Account
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddEmployee;
|
||||
@ -26,22 +26,22 @@ const AdminDashboard = () => {
|
||||
<div className="w-full max-w-3xl text-center">
|
||||
<img src="path_to_image" alt="Dashboard Graphic" className="w-full rounded-md mb-6" />
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('/admin/create-order')}
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('')}
|
||||
>
|
||||
Create Order
|
||||
view orders
|
||||
</button>
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('/admin/view-orders')}
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('/employees')}
|
||||
>
|
||||
View Orders
|
||||
view employees
|
||||
</button>
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('/admin/view-customers')}
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('')}
|
||||
>
|
||||
View Customers
|
||||
view Customers
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
background-color: #0e355b;
|
||||
}
|
||||
|
||||
.dashboard-button {
|
||||
@ -64,7 +65,7 @@
|
||||
color: #0e355b;
|
||||
}
|
||||
|
||||
.dashboard-button:hover {
|
||||
.button:hover {
|
||||
background-color: #154676;
|
||||
border-color: #154676;
|
||||
}
|
||||
|
||||
104
src/components/admin/EmployeeList.jsx
Normal file
104
src/components/admin/EmployeeList.jsx
Normal file
@ -0,0 +1,104 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
// import EmployeeCards from './EmployeeCards';
|
||||
// import PropTypes from 'prop-types';
|
||||
|
||||
const EmployeeList = ({ className = '' }) => {
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch the employees data from the JSON file
|
||||
getEmployees();
|
||||
}, []);
|
||||
|
||||
const getEmployees = async () => {
|
||||
try {
|
||||
const response = await axiosInstance.get('http://localhost:5000/employees');
|
||||
let employees_data = response.data; // List of employees
|
||||
setEmployees(employees_data);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddEmployee = () => {
|
||||
navigate('/add-employee');
|
||||
};
|
||||
|
||||
// const onEmployeeCardsClick = useCallback(() => {
|
||||
// navigate('/employee-profile');
|
||||
// }, [navigate]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row min-h-screen">
|
||||
<Sidebar />
|
||||
<div className="flex-grow p-6 bg-gray-100">
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-800">Employees List</h1>
|
||||
<button
|
||||
className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
|
||||
onClick={handleAddEmployee}
|
||||
>
|
||||
Add New Employee
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<svg
|
||||
className="w-5 h-5 mr-2 text-gray-500"
|
||||
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 text-gray-600">Filter</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-4">Total Employees ({employees.length})</p>
|
||||
<table className="w-full bg-white">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase text-gray-600 border-b">
|
||||
<th className="py-2">#</th>
|
||||
<th className="py-2">Employee Name</th>
|
||||
<th className="py-2">Email Address</th>
|
||||
<th className="py-2">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{employees.map((employee, index) => (
|
||||
<tr key={employee.id} className="border-b last:border-none">
|
||||
<td className="py-2 text-gray-800">{index + 1}</td>
|
||||
<td className="py-2 text-gray-800">{employee.firstname} {employee.lastname}</td>
|
||||
<td className="py-2 text-gray-800">{employee.email}</td>
|
||||
<td className="py-2 text-gray-800">
|
||||
<button
|
||||
className="text-#4b5563 underline"
|
||||
// onClick={onEmployeeCardsClick}
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// EmployeeList.propTypes = {
|
||||
// className: PropTypes.string,
|
||||
// };
|
||||
|
||||
export default EmployeeList;
|
||||
@ -8,7 +8,8 @@ import { useNavigate } from 'react-router-dom';
|
||||
const AddCustomer = () => {
|
||||
const navigate = useNavigate();
|
||||
const [customerData, setCustomerData] = useState({
|
||||
name: '',
|
||||
firstname: '',
|
||||
lastname:'',
|
||||
age: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
@ -40,42 +41,52 @@ const AddCustomer = () => {
|
||||
<div className="w-full flex flex-col min-h-screen text-white">
|
||||
<div className="min-h-screen text-gray-300 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-#0e355b">Add Customer</h1>
|
||||
<Link to="/" className="text-#0e355b">Skip for now</Link>
|
||||
<h1 className="text-2xl font-semibold text-#0e355b">add customer</h1>
|
||||
<Link to="/" className="text-#0e355b">skip for now</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<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">
|
||||
<button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-0e355b 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-">Customer Information</h2>
|
||||
<h2 className="text-lg font-semibold text-">customer information</h2>
|
||||
</Link>
|
||||
<Link to="/measurements">
|
||||
<h2 className="text-lg font-semibold text-">Measurements</h2>
|
||||
<h2 className="text-lg font-semibold text-">measurements</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<form onSubmit={handleAddCustomerSubmit}>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Customer Name:</label>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">customer firstname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={customerData.name}
|
||||
name="firstname"
|
||||
value={customerData.firstname}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Age:</label>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">customer lastname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={customerData.lastname}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
@ -85,21 +96,21 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Gender:</label>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">gender:</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={customerData.gender}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
>
|
||||
<option value="" disabled>Select gender</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
<option value="other">Other</option>
|
||||
<option value="" disabled>select gender</option>
|
||||
<option value="male">male</option>
|
||||
<option value="female">female</option>
|
||||
<option value="other">other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Email:</label>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
@ -109,7 +120,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Address:</label>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">address:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
@ -119,7 +130,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-black-700">Mobile No:</label>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">mobile no:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobile"
|
||||
@ -130,8 +141,8 @@ const AddCustomer = () => {
|
||||
</div>
|
||||
<br />
|
||||
<div className="text-center">
|
||||
<button type="submit" className="bg-orange-500 text-black px-4 py-2 rounded-md font-semibold text-sm">
|
||||
Save Information
|
||||
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold text-sm">
|
||||
save information
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.customer-list {
|
||||
padding: 20px;
|
||||
background-color: #09090B;
|
||||
color: #09090B;
|
||||
background-color: #ffffff;
|
||||
/* color: #09090B; */
|
||||
border-radius: 8px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
@ -21,7 +21,7 @@
|
||||
.add-customer-button {
|
||||
padding: 10px 20px;
|
||||
background-color: #0e355b;
|
||||
color: #09090B;
|
||||
/* color: #09090B; */
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
@ -40,22 +40,22 @@
|
||||
|
||||
.customer-table th,
|
||||
.customer-table td {
|
||||
border: 1px solid #09090B;
|
||||
border: 1px solid #ffffff;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.customer-table th {
|
||||
.customer-table th {
|
||||
background-color: #09090B;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-table tbody tr:nth-child(odd) {
|
||||
.customer-table tbody tr:nth-child(odd) {
|
||||
background-color: #09090B;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-table tbody tr:nth-child(even) {
|
||||
.customer-table tbody tr:nth-child(even) {
|
||||
background-color: #09090B;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-table tbody tr:hover {
|
||||
background-color: #0e355b;
|
||||
@ -80,7 +80,7 @@
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid #b3b3b3;
|
||||
color: #b3b3b3;
|
||||
color: #e8e8e8;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 20px;
|
||||
@ -89,6 +89,6 @@
|
||||
}
|
||||
|
||||
.input-underline:focus {
|
||||
border-bottom-color: #F97316; /* Orange underline on focus */
|
||||
border-bottom-color: #4b5563; /* Orange underline on focus */
|
||||
}
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
|
||||
const CustomerList = () => {
|
||||
const [customers, setCustomers] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch the customers data from the JSON file
|
||||
getCustomers()
|
||||
getCustomers();
|
||||
}, []);
|
||||
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await axiosInstance.get('http://localhost:5000/customers');
|
||||
let customers_data = response.data; // List of customers
|
||||
setCustomers(customers_data)
|
||||
setCustomers(customers_data);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleAddCustomer = () => {
|
||||
navigate('/add-customer');
|
||||
@ -29,38 +29,50 @@ const CustomerList = () => {
|
||||
return (
|
||||
<div className="flex flex-row min-h-screen">
|
||||
<Sidebar />
|
||||
<div className="w-full flex flex-col bg-#090909B text-white">
|
||||
<div className="bg-[#090909B] text-gray-300 p-6 rounded-lg">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-semibold text-#0e355b">Customers List</h1>
|
||||
<div className="flex-grow p-6 bg-gray-100">
|
||||
<div className="bg-white p-6 rounded-lg shadow">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-800">Customers List</h1>
|
||||
<button
|
||||
className="bg-orange-500 text-black px-4 py-2 rounded-md text-sm"
|
||||
className="bg-#0e355b text-d1d5db 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
|
||||
className="w-5 h-5 mr-2 text-gray-500"
|
||||
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>
|
||||
<span className="text-sm text-gray-600">Filter</span>
|
||||
</div>
|
||||
<p className="text-sm mb-4">Total Customers ({customers.length})</p>
|
||||
<table className="w-full">
|
||||
<p className="text-sm text-gray-600 mb-4">Total Customers ({customers.length})</p>
|
||||
<table className="w-full bg-white">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase">
|
||||
<tr className="text-left text-xs uppercase text-gray-600 border-b">
|
||||
<th className="py-2">#</th>
|
||||
<th className="py-2">Customer ID</th>
|
||||
<th className="py-2">Customer Name</th>
|
||||
<th className="py-2">customer id</th>
|
||||
<th className="py-2">customer fullname</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 key={customer.id} className="border-b last:border-none">
|
||||
<td className="py-2 text-gray-800">{index + 1}</td>
|
||||
<td className="py-2 text-gray-800">{customer.id}</td>
|
||||
<td className="py-2 text-gray-800">{customer.firstname} {customer.lastname} </td>
|
||||
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@ -25,50 +25,50 @@ const CustomerMeasurements = () => {
|
||||
<div className="flex flex-row">
|
||||
<Sidebar />
|
||||
<div className="w-full flex flex-col min-h-screen text-white">
|
||||
<div className="min-h-screen text-gray-300 p-6">
|
||||
<div className="min-h-screen text-#4b5563 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-#0e355b">Customer Measurements</h1>
|
||||
<Link to="/CategoryList" className="text-0e355b">skip for now</Link>
|
||||
<Link to="/CategoryList" className="text-#0e355b">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={<span className="text-white">Neck Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<h2 className="text-lg font-semibold text-#0e355b">Upper Body Measurements</h2>
|
||||
<Form.Item name="neck" label={<span className="text-#0e355b">Neck Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="chest" label={<span className="text-white">Chest Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="chest" label={<span className="text-#0e355b">Chest Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="waist" label={<span className="text-white">Waist Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="waist" label={<span className="text-#0e355b">Waist Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="shoulder" label={<span className="text-white">Shoulder Width (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="shoulder" label={<span className="text-#0e355b">Shoulder Width (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="arm" label={<span className="text-white">Arm Length (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="arm" label={<span className="text-#0e355b">Arm Length (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="sleeve" label={<span className="text-white">Sleeve Length (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="sleeve" label={<span className="text-#0e355b">Sleeve Length (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
|
||||
<h2 className="text-lg font-semibold text-gray-400">Lower Body Measurements</h2>
|
||||
<Form.Item name="hip" label={<span className="text-white">Hip Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<h2 className="text-lg font-semibold text-#0e355b">Lower Body Measurements</h2>
|
||||
<Form.Item name="hip" label={<span className="text-#0e355b">Hip Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="inseam" label={<span className="text-white">Inseam (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="inseam" label={<span className="text-#0e355b">Inseam (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="outseam" label={<span className="text-white">Out Seam (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="outseam" label={<span className="text-#0e355b">Out Seam (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="thigh" label={<span className="text-white">Thigh Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="thigh" label={<span className="text-#0e355b">Thigh Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</Form.Item>
|
||||
<Form.Item name="ankle" label={<span className="text-white">Ankle Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-black-400" />
|
||||
<Form.Item name="ankle" label={<span className="text-#0e355b">Ankle Circumference (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
</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">
|
||||
<Button type="primary" htmlType="submit" className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676">
|
||||
Save Measurements
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
@ -22,19 +22,19 @@ const HomePage = () => {
|
||||
<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-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('/customers')}
|
||||
>
|
||||
create a new order
|
||||
</button>
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('')}
|
||||
>
|
||||
view orders
|
||||
</button>
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('')}
|
||||
>
|
||||
view customers
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
// Import your SVG icons
|
||||
import React, { useState } from 'react';
|
||||
import { Layout, Drawer, Button } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg';
|
||||
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
||||
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
|
||||
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
|
||||
@ -12,49 +16,65 @@ 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 Sidebar = () => {
|
||||
const navigate = useNavigate();
|
||||
const { Sider } = Layout;
|
||||
|
||||
const handleNavigation = (link) => {
|
||||
navigate(link);
|
||||
const AdminSidebar = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const showDrawer = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const closeDrawer = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="w-16 min-h-screen bg-black flex flex-col items-center py-4">
|
||||
<div className="text-orange-500 text-4xl mb-10">t.</div>
|
||||
<nav className="flex flex-col items-center space-y-4">
|
||||
<div onClick={() => handleNavigation('/admin-dashboard')} className="cursor-pointer">
|
||||
<img src={HomeIcon} alt="Home" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/manage-customers')} className="cursor-pointer">
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/orders')} className="cursor-pointer">
|
||||
<img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/categories')} className="cursor-pointer">
|
||||
<img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/catalog')} className="cursor-pointer">
|
||||
<img src={CatalogIcon} alt="Catalog" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/employee')} className="cursor-pointer">
|
||||
<img src={EmployeeIcon} alt="employee" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/measurements')} className="cursor-pointer">
|
||||
<img src={MeasurmentsIcon} alt="measurements" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/profile')} className="cursor-pointer">
|
||||
<img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
|
||||
</div>
|
||||
<div onClick={() => handleNavigation('/admin/logout')} className="cursor-pointer mt-auto mb-4">
|
||||
<img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<Sider
|
||||
className="desktop-sidebar"
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
width={80}
|
||||
style={{ height: '100vh' }}
|
||||
>
|
||||
<div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
|
||||
<Link to="/admin" className="my-6">
|
||||
<img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<Link to="/admin/home" className="my-6">
|
||||
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/categories" className="my-6">
|
||||
<img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/add-customer" className="my-6">
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/orders" className="my-6">
|
||||
<img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/catalog" className="my-6">
|
||||
<img src={CatalogIcon} alt="Catalog" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/employee" className="my-6">
|
||||
<img src={EmployeeIcon} alt="Employee" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/measurements" className="my-6">
|
||||
<img src={MeasurmentsIcon} alt="Measurements" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/profile" className="my-6">
|
||||
<img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/logout" className="my-6">
|
||||
<img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
</Sider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
export default AdminSidebar;
|
||||
|
||||
@ -33,7 +33,7 @@ const EmployeeSidebar = () => {
|
||||
className="desktop-sidebar"
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
width={80}
|
||||
width={70}
|
||||
style={{ height: '100vh' }}
|
||||
>
|
||||
<div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
|
||||
@ -42,22 +42,22 @@ const EmployeeSidebar = () => {
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<Link to="/employee" className="my-6">
|
||||
<Link to="/employee/home" className="my-6">
|
||||
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/categories" className="my-6">
|
||||
<Link to="/employee/categories" className="my-6">
|
||||
<img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/customers" className="my-6">
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/orders" className="my-6">
|
||||
<Link to="/employee/orders" className="my-6">
|
||||
<img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/profile" className="my-6">
|
||||
<Link to="/employee/profile" className="my-6">
|
||||
<img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/logout" className="my-6">
|
||||
<Link to="/employee/logout" className="my-6">
|
||||
<img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -61,13 +61,13 @@ button:focus-visible {
|
||||
color: #154676;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
background-color: #0e355b;
|
||||
}
|
||||
}
|
||||
|
||||
.input-underline {
|
||||
@apply w-full border-b-2 border-gray-300 focus:border-orange-500 outline-none;
|
||||
max-width: 300px; /* Set a fixed max-width for uniformity */
|
||||
.input-underline {
|
||||
@apply w-full border-b-2 border-gray-300 outline-none;
|
||||
max-width: 300px; /* Set a fixed max-width for uniformity */
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user