surajb/bb-order-management-app
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css and layout implementation

Browse Source
This commit is contained in:
surajb 2024-07-22 12:12:41 +05:30
parent f3eeefe551
commit cb7ab37eb0
11 changed files with 438 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Auth/LoginPage.jsx
View File

@ -44,8 +44,8 @@ const LoginPage = () => {
<div className="flex flex-row min-h-screen justify-center items-center"> <div className="flex flex-row min-h-screen justify-center items-center">
<div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4"> <div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
<div className="w-full"> <div className="w-full">
<h1>Welcome Back</h1> <h1>welcome back</h1>
<p>Be among the first to experience 3D magic! Register for private alpha.</p> <p>be among the first to experience 3D magic! register for private alpha.</p>
{error && <p className="error-message">{error}</p>} {error && <p className="error-message">{error}</p>}
<form onSubmit={handleLogin} className="space-y-4"> <form onSubmit={handleLogin} className="space-y-4">
<label htmlFor="email" className="block"></label> <label htmlFor="email" className="block"></label>
@ -74,7 +74,7 @@ const LoginPage = () => {
<a href="#">Forgot password?</a> <a href="#">Forgot password?</a>
</div> </div>
<button type="submit" className="login-button"> <button type="submit" className="login-button">
Login login
</button> </button>
</form> </form>
</div> </div>

18
src/components/admin/AddEmployee.css Normal file
View File

@ -0,0 +1,18 @@
.employee-image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.employee-image-container button {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.input-underline:focus {
border-color: #4b5563; /* Adjust focus border color */
}

375
src/components/admin/AddEmployee.jsx
View File

@ -1,6 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar'; import Sidebar from '../sidebar/Sidebar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import axiosInstance from '../../api/axiosConfig'; import axiosInstance from '../../api/axiosConfig';
const AddEmployee = () => { const AddEmployee = () => {
@ -17,25 +19,28 @@ const AddEmployee = () => {
pincode: '', pincode: '',
city_id: '', city_id: '',
mobile: '', mobile: '',
image: null,
}); });
const [cities, setCities] = useState([]); const [cities, setCities] = useState([]);
const [imagePreview, setImagePreview] = useState(null);
useEffect(() => { // Uncomment to fetch cities data from backend
const fetchCities = async () => { // useEffect(() => {
try { // const fetchCities = async () => {
const response = await axiosInstance.get('/cities'); // try {
if (Array.isArray(response.data)) { // const response = await axiosInstance.get('/cities');
setCities(response.data); // if (Array.isArray(response.data)) {
} else { // setCities(response.data);
console.error('Error: Data is not an array', response.data); // } else {
} // console.error('Error: Data is not an array', response.data);
} catch (error) { // }
console.error('Error fetching cities:', error.response || error.message); // } catch (error) {
} // console.error('Error fetching cities:', error.response || error.message);
}; // }
// };
fetchCities(); // fetchCities();
}, []); // }, []);
const handleInputChange = (e) => { const handleInputChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
@ -45,10 +50,30 @@ const AddEmployee = () => {
}); });
}; };
const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
setEmployeeData({
...employeeData,
image: file,
});
setImagePreview(URL.createObjectURL(file));
}
};
const handleAddEmployeeSubmit = async (e) => { const handleAddEmployeeSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData();
Object.keys(employeeData).forEach((key) => {
formData.append(key, employeeData[key]);
});
try { try {
await axiosInstance.post('http://localhost:5000/employees', employeeData); await axiosInstance.post('http://localhost:5000/employees', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
navigate('/employees'); navigate('/employees');
} catch (error) { } catch (error) {
console.error('Error adding employee:', error.response || error.message); console.error('Error adding employee:', error.response || error.message);
@ -60,144 +85,202 @@ const AddEmployee = () => {
<Sidebar /> <Sidebar />
<div className="w-full flex flex-col min-h-screen text-black"> <div className="w-full flex flex-col min-h-screen text-black">
<div className="min-h-screen text-gray-800 p-6"> <div className="min-h-screen text-gray-800 p-6">
<div className="flex justify-between items-center mb-6"> <div className="flex items-center mb-6">
<h1 className="text-2xl font-semibold text-blue-900">creating employee account</h1> <Link to="/employees" className="text-#0e355b text-xl mr-4">
<Link to="/" className="text-blue-900">skip for now</Link> <FontAwesomeIcon icon={faChevronLeft} />
</Link>
<h1 className="text-2xl font-semibold text-#0e355b">
create employee account
</h1>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="flex justify-center">
<div className="space-y-6"> <div className="space-y-6 w-full max-w-4xl">
<div className="text-center"> <div className="text-center">
<div className="inline-block relative"> <div className="inline-block relative">
<div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></div> <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden">
<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"> {imagePreview ? (
add employee image <img
src={imagePreview}
alt="Employee"
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-500">
No image
</div>
)}
</div>
<input
type="file"
accept="image/*"
className="hidden"
id="imageUpload"
onChange={handleImageChange}
/>
<button
type="button"
onClick={() => document.getElementById('imageUpload').click()}
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full"
>
add customer image
</button> </button>
</div> </div>
</div> </div>
</div> <form onSubmit={handleAddEmployeeSubmit} className="space-y-4">
<div className="md:col-span-2 space-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<form onSubmit={handleAddEmployeeSubmit}> <div>
<div> <label className="block text-gray-800 font-medium">
<label className="block text-gray-800 font-medium">employee firstname:</label> employee firstname:
<input </label>
type="text" <input
name="firstname" type="text"
value={employeeData.firstname} name="firstname"
onChange={handleInputChange} value={employeeData.firstname}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563" onChange={handleInputChange}
/> className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/>
</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-gray-700"
/>
</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-gray-700"
/>
</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-gray-700"
>
<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">
mobile:
</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-gray-700"
/>
</div>
<div className="md:col-span-2 lg:col-span-3">
<label className="block text-gray-800 font-medium">
address line 1:
</label>
<input
type="text"
name="address_line_1"
value={employeeData.address_line_1}
onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/>
</div>
<div className="md:col-span-2 lg:col-span-3">
<label className="block text-gray-800 font-medium">
address line 2:
</label>
<input
type="text"
name="address_line_2"
value={employeeData.address_line_2}
onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/>
</div>
<div className="md:col-span-2 lg:col-span-3">
<label className="block text-gray-800 font-medium">
nearby landmark:
</label>
<input
type="text"
name="nearby_landmark"
value={employeeData.nearby_landmark}
onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/>
</div>
<div className="md:col-span-2 lg:col-span-3">
<label className="block text-gray-800 font-medium">
pincode:
</label>
<input
type="text"
name="pincode"
value={employeeData.pincode}
onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/>
</div>
<div className="md:col-span-2 lg:col-span-3">
<label className="block text-gray-800 font-medium">
city:
</label>
<select
name="city_id"
value={employeeData.city_id}
onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
>
<option value="" disabled>
select city
</option>
{Array.isArray(cities) &&
cities.map((city) => (
<option key={city.id} value={city.id}>
{city.name}
</option>
))}
</select>
</div>
<div className="md:col-span-2 lg:col-span-3">
<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-gray-700"
/>
</div>
</div> </div>
<div> <div className="text-center mt-6">
<label className="block text-gray-800 font-medium">employee lastname:</label> <button
<input type="submit"
type="text" className="bg-#0e355b text-white px-4 py-2 rounded-md font-semibold"
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 line 1:</label>
<input
type="text"
name="address_line_1"
value={employeeData.address_line_1}
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 line 2:</label>
<input
type="text"
name="address_line_2"
value={employeeData.address_line_2}
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">nearby landmark:</label>
<input
type="text"
name="nearby_landmark"
value={employeeData.nearby_landmark}
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">pincode:</label>
<input
type="text"
name="pincode"
value={employeeData.pincode}
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">city:</label>
<select
name="city_id"
value={employeeData.city_id}
onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
>
<option value="" disabled>select city</option>
{Array.isArray(cities) && cities.map(city => (
<option key={city.id} value={city.id}>{city.name}</option>
))}
</select>
</div>
<div>
<label className="block text-gray-800 font-medium">mobile number:</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 create account
</button> </button>
</div> </div>

10
src/components/admin/AdminDashboard.jsx
View File

@ -25,10 +25,10 @@ const AdminDashboard = () => {
<div className="w-full flex flex-col min-h-screen text-white"> <div className="w-full flex flex-col min-h-screen text-white">
<header className="w-full p-4 flex justify-between items-center"> <header className="w-full p-4 flex justify-between items-center">
<div className="flex items-center"> <div className="flex items-center">
<h1 className="text-#0e355b text-2xl font-bold">Admin Dashboard</h1> <h1 className="text-#0e355b text-2xl font-bold">admin dashboard</h1>
</div> </div>
<div> <div>
<p className="text-#4b5563">Welcome back {userName}</p> <p className="text-#4b5563">welcome back {userName}</p>
</div> </div>
</header> </header>
<main className="flex-1 flex flex-col items-center justify-center p-6"> <main className="flex-1 flex flex-col items-center justify-center p-6">
@ -38,19 +38,19 @@ const AdminDashboard = () => {
className="w-full py-4 bg-#0e355b text-#d1d5db 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('')} onClick={() => handleClick('')}
> >
View Orders view orders
</button> </button>
<button <button
className="w-full py-4 bg-#0e355b text-#d1d5db 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('/employees')} onClick={() => handleClick('/employees')}
> >
View Employees view employees
</button> </button>
<button <button
className="w-full py-4 bg-#0e355b text-#d1d5db 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('')} onClick={() => handleClick('')}
> >
View Customers view customers
</button> </button>
</div> </div>
</main> </main>

2
src/components/admin/EmployeeList.jsx
View File

@ -58,7 +58,7 @@ const EmployeeList = ({ className = '' }) => {
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" 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> </svg>
<span className="text-sm text-gray-600">Filter</span> <span className="text-sm text-gray-600">filter</span>
</div> </div>
<p className="text-sm text-gray-600 mb-4">total employees: ({employees.length})</p> <p className="text-sm text-gray-600 mb-4">total employees: ({employees.length})</p>
<table className="w-full bg-white"> <table className="w-full bg-white">

169
src/components/customer/AddCustomer.jsx
View File

@ -19,9 +19,12 @@ const AddCustomer = () => {
pincode: '', pincode: '',
city_id: '', city_id: '',
mobile: '', mobile: '',
image: null,
}); });
const [cities, setCities] = useState([]); const [cities, setCities] = useState([]);
const [imagePreview, setImagePreview] = useState(null);
// Uncomment to fetch cities data from backend
// useEffect(() => { // useEffect(() => {
// const fetchCities = async () => { // const fetchCities = async () => {
// try { // try {
@ -47,10 +50,30 @@ const AddCustomer = () => {
}); });
}; };
const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
setCustomerData({
...customerData,
image: file,
});
setImagePreview(URL.createObjectURL(file));
}
};
const handleAddCustomerSubmit = async (e) => { const handleAddCustomerSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData();
Object.keys(customerData).forEach((key) => {
formData.append(key, customerData[key]);
});
try { try {
await axiosInstance.post('http://localhost:5000/customers', customerData); await axiosInstance.post('http://localhost:5000/customers', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
navigate('/customers'); navigate('/customers');
} catch (error) { } catch (error) {
console.error('Error adding customer:', error.response || error.message); console.error('Error adding customer:', error.response || error.message);
@ -63,37 +86,64 @@ const AddCustomer = () => {
<div className="w-full flex flex-col min-h-screen text-black"> <div className="w-full flex flex-col min-h-screen text-black">
<div className="min-h-screen text-gray-800 p-6"> <div className="min-h-screen text-gray-800 p-6">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<span <div className="flex items-center mb-6">
onClick={() => navigate(-1)} <Link to="/customers" className="text-#0e355b text-xl mr-4">
className="text-#0e355b cursor-pointer hover:text-#d1d5db transition font-bold" <FontAwesomeIcon icon={faChevronLeft} />
> </Link>
<FontAwesomeIcon icon={faChevronLeft} /> Add Customer <h1 className="text-2xl font-semibold text-#0e355b">
</span> add customer
<Link to="/CategoryList" className="text-blue-900">Skip for now</Link> </h1>
</div>
<Link to="/CategoryList" className="text-blue-900">skip for now</Link>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-6"> <div className="space-y-6">
<div className="text-center"> <div className="text-center">
<div className="inline-block relative"> <div className="inline-block relative">
<div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></div> <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden">
<button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full"> {imagePreview ? (
Add Customer Image <img
src={imagePreview}
alt="Customer"
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-500">
no image
</div>
)}
</div>
<input
type="file"
accept="image/*"
className="hidden"
id="imageUpload"
onChange={handleImageChange}
/>
<button
type="button"
onClick={() => document.getElementById('imageUpload').click()}
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full"
>
</button> </button>
</div> </div>
</div> </div>
<div> <div>
<Link to="/add-customer"> <Link to="/add-customer">
<h2 className="text-lg font-semibold">Customer Information</h2> <h2 className="text-lg font-semibold">customer information</h2>
</Link> </Link>
<Link to="/measurements"> <Link to="/measurements">
<h2 className="text-lg font-semibold">Measurements</h2> <h2 className="text-lg font-semibold">measurements</h2>
</Link> </Link>
</div> </div>
</div> </div>
<div className="md:col-span-2 space-y-4"> <div className="md:col-span-2 space-y-4">
<form onSubmit={handleAddCustomerSubmit}> <form onSubmit={handleAddCustomerSubmit}>
<div> <div>
<label className="block text-gray-800 font-medium">Customer Firstname:</label> <label className="block text-gray-800 font-medium">
customer firstname:
</label>
<input <input
type="text" type="text"
name="firstname" name="firstname"
@ -103,7 +153,9 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Customer Lastname:</label> <label className="block text-gray-800 font-medium">
customer lastname:
</label>
<input <input
type="text" type="text"
name="lastname" name="lastname"
@ -113,7 +165,9 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Age:</label> <label className="block text-gray-800 font-medium">
age:
</label>
<input <input
type="number" type="number"
name="age" name="age"
@ -123,21 +177,27 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Gender:</label> <label className="block text-gray-800 font-medium">
<select gender:
name="gender" </label>
value={customerData.gender} <select
onChange={handleInputChange} name="gender"
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700" value={customerData.gender}
> onChange={handleInputChange}
<option value="" disabled>Select Gender</option> className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
<option value="male">Male</option> >
<option value="female">Female</option> <option value="" disabled>
<option value="other">Other</option> select gender
</select> </option>
</div> <option value="male">male</option>
<option value="female">female</option>
<option value="other">other</option>
</select>
</div>
<div> <div>
<label className="block text-gray-800 font-medium">Email:</label> <label className="block text-gray-800 font-medium">
email:
</label>
<input <input
type="email" type="email"
name="email" name="email"
@ -147,7 +207,9 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Address Line 1:</label> <label className="block text-gray-800 font-medium">
address line 1:
</label>
<input <input
type="text" type="text"
name="address_line_1" name="address_line_1"
@ -157,7 +219,9 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Address Line 2:</label> <label className="block text-gray-800 font-medium">
address line 2:
</label>
<input <input
type="text" type="text"
name="address_line_2" name="address_line_2"
@ -167,7 +231,9 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Nearby Landmark:</label> <label className="block text-gray-800 font-medium">
nearby landmark:
</label>
<input <input
type="text" type="text"
name="nearby_landmark" name="nearby_landmark"
@ -177,7 +243,9 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Pincode:</label> <label className="block text-gray-800 font-medium">
pincode:
</label>
<input <input
type="text" type="text"
name="pincode" name="pincode"
@ -187,33 +255,44 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">City:</label> <label className="block text-gray-800 font-medium">
city:
</label>
<select <select
name="city_id" name="city_id"
value={customerData.city_id} value={customerData.city_id}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
> >
<option value="" disabled>Select City</option> <option value="" disabled>
{Array.isArray(cities) && cities.map(city => ( select city
<option key={city.id} value={city.id}>{city.name}</option> </option>
))} {Array.isArray(cities) &&
cities.map((city) => (
<option key={city.id} value={city.id}>
{city.name}
</option>
))}
</select> </select>
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">Mobile Number:</label> <label className="block text-gray-800 font-medium">
mobile:
</label>
<input <input
type="text" type="tel"
name="mobile" name="mobile"
value={customerData.mobile} value={customerData.mobile}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<br /> <div className="flex justify-end">
<div className="text-center"> <button
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm"> type="submit"
Save Information className="bg-#0e355b text-white py-2 px-4 rounded-md"
>
add customer
</button> </button>
</div> </div>
</form> </form>

6
src/components/customer/CustomerList.css
View File

@ -46,15 +46,15 @@
} }
.customer-table th { .customer-table th {
background-color: #09090B; background-color: #ffffff;
} }
.customer-table tbody tr:nth-child(odd) { .customer-table tbody tr:nth-child(odd) {
background-color: #09090B; background-color: #ffffff;
} }
.customer-table tbody tr:nth-child(even) { .customer-table tbody tr:nth-child(even) {
background-color: #09090B; background-color: #ffffff;
} }
.customer-table tbody tr:hover { .customer-table tbody tr:hover {

8
src/components/customer/CustomerList.jsx
View File

@ -32,12 +32,12 @@ const CustomerList = () => {
<div className="flex-grow p-6 bg-gray-100"> <div className="flex-grow p-6 bg-gray-100">
<div className="bg-white p-6 rounded-lg shadow"> <div className="bg-white p-6 rounded-lg shadow">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-gray-800">Customers List</h1> <h1 className="text-2xl font-semibold text-gray-800">customers list</h1>
<button <button
className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm"
onClick={handleAddCustomer} onClick={handleAddCustomer}
> >
Add New Customer add new customer
</button> </button>
</div> </div>
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
@ -55,9 +55,9 @@ const CustomerList = () => {
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" 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> </svg>
<span className="text-sm text-gray-600">Filter</span> <span className="text-sm text-gray-600">filter</span>
</div> </div>
<p className="text-sm text-gray-600 mb-4">Total Customers ({customers.length})</p> <p className="text-sm text-gray-600 mb-4">total customers ({customers.length})</p>
<table className="w-full bg-white"> <table className="w-full bg-white">
<thead> <thead>
<tr className="text-left text-xs uppercase text-gray-600 border-b"> <tr className="text-left text-xs uppercase text-gray-600 border-b">

50
src/components/customer/CustomerMeasurements.jsx
View File

@ -27,45 +27,45 @@ const CustomerMeasurements = () => {
<div className="w-full flex flex-col min-h-screen text-white"> <div className="w-full flex flex-col min-h-screen text-white">
<div className="min-h-screen text-#4b5563 p-6"> <div className="min-h-screen text-#4b5563 p-6">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-#0e355b">Customer Measurements</h1> <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> </div>
<Form onFinish={onFinish} className="space-y-4"> <Form onFinish={onFinish} className="space-y-4">
<h2 className="text-lg font-semibold text-#0e355b">Upper Body Measurements</h2> <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>}> <Form.Item name="neck" label={<span className="text-#0e355b">neck circumference (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="chest" label={<span className="text-#0e355b">Chest Circumference (in inch)</span>}> <Form.Item name="chest" label={<span className="text-#0e355b">chest circumference (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="waist" label={<span className="text-#0e355b">Waist Circumference (in inch)</span>}> <Form.Item name="waist" label={<span className="text-#0e355b">waist circumference (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="shoulder" label={<span className="text-#0e355b">Shoulder Width (in inch)</span>}> <Form.Item name="shoulder" label={<span className="text-#0e355b">shoulder width (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="arm" label={<span className="text-#0e355b">Arm Length (in inch)</span>}> <Form.Item name="arm" label={<span className="text-#0e355b">arm length (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="sleeve" label={<span className="text-#0e355b">Sleeve Length (in inch)</span>}> <Form.Item name="sleeve" label={<span className="text-#0e355b">sleeve length (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<h2 className="text-lg font-semibold text-#0e355b">Lower Body Measurements</h2> <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>}> <Form.Item name="hip" label={<span className="text-#0e355b">hip circumference (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="inseam" label={<span className="text-#0e355b">Inseam (in inch)</span>}> <Form.Item name="inseam" label={<span className="text-#0e355b">inseam (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="outseam" label={<span className="text-#0e355b">Out Seam (in inch)</span>}> <Form.Item name="outseam" label={<span className="text-#0e355b">out seam (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="thigh" label={<span className="text-#0e355b">Thigh Circumference (in inch)</span>}> <Form.Item name="thigh" label={<span className="text-#0e355b">thigh circumference (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
</Form.Item> </Form.Item>
<Form.Item name="ankle" label={<span className="text-#0e355b">Ankle Circumference (in inch)</span>}> <Form.Item name="ankle" label={<span className="text-#0e355b">ankle circumference (in inch)</span>}>
<Input className="block text-sm font-medium text-#4b5563" /> <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 " />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<div className="text-center"> <div className="text-center">

10
src/components/employee/EmployeeDashboard.jsx
View File

@ -24,10 +24,10 @@ const HomePage = () => {
<div className="w-full flex flex-col min-h-screen text-white"> <div className="w-full flex flex-col min-h-screen text-white">
<header className="w-full p-4 flex justify-between items-center"> <header className="w-full p-4 flex justify-between items-center">
<div className="flex items-center"> <div className="flex items-center">
<h1 className="text-#0e355b text-2xl font-bold">Home</h1> <h1 className="text-#0e355b text-2xl font-bold">home</h1>
</div> </div>
<div> <div>
<p className="text-#4b5563">Welcome back, {userName}</p> <p className="text-#4b5563">welcome back, {userName}</p>
</div> </div>
</header> </header>
<main className="flex-1 flex flex-col items-center justify-center p-6"> <main className="flex-1 flex flex-col items-center justify-center p-6">
@ -37,19 +37,19 @@ const HomePage = () => {
className="w-full py-4 bg-#0e355b text-#d1d5db 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')} onClick={() => handleClick('/customers')}
> >
Create a New Order create a new order
</button> </button>
<button <button
className="w-full py-4 bg-#0e355b text-#d1d5db 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('')} onClick={() => handleClick('')}
> >
View Orders view orders
</button> </button>
<button <button
className="w-full py-4 bg-#0e355b text-#d1d5db 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('')} onClick={() => handleClick('')}
> >
View Customers view customers
</button> </button>
</div> </div>
</main> </main>

59
src/components/sidebar/EmployeeSidebar.jsx
View File

@ -1,10 +1,6 @@
import React, { useState } from 'react'; import React from 'react';
import { Layout, Drawer, Button } from 'antd'; import { Layout } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
} from '@ant-design/icons';
import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg'; import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg';
import HomeIcon from '../../assets/thob-data/HomeIcon.svg'; import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg'; import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
@ -16,32 +12,21 @@ import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
const { Sider } = Layout; const { Sider } = Layout;
const EmployeeSidebar = () => { const EmployeeSidebar = () => {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const closeDrawer = () => {
setVisible(false);
};
return ( return (
<> <Sider
className="desktop-sidebar"
<Sider breakpoint="lg"
className="desktop-sidebar" collapsedWidth="0"
breakpoint="lg" width={70}
collapsedWidth="0" style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
width={70} >
style={{ height: '100vh' }} <div className="flex flex-col items-center mt-4">
> <div className="flex items-center justify-center h-16 w-16 mb-5 bg-white">
<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="">
<Link to="/employee" className="my-6"> <img src={BrookslogoIcon} alt="Brooks Bingham Logo" className="hover:opacity-75 sidebar-icon" />
<img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center flex-grow">
<Link to="/employee/home" className="my-6"> <Link to="/employee/home" className="my-6">
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" /> <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
</Link> </Link>
@ -57,17 +42,15 @@ const EmployeeSidebar = () => {
<Link to="/employee/profile" className="my-6"> <Link to="/employee/profile" className="my-6">
<img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" /> <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
</Link> </Link>
<Link to="/employee/logout" className="my-6">
<img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
</Link>
</div> </div>
</Sider> </div>
</> <div className="flex items-center justify-center mb-4">
<Link to="/employee/logout">
<img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
</Link>
</div>
</Sider>
); );
}; };
export default EmployeeSidebar; export default EmployeeSidebar;