css and layout implementation
This commit is contained in:
parent
f3eeefe551
commit
cb7ab37eb0
@ -44,8 +44,8 @@ const LoginPage = () => {
|
||||
<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="w-full">
|
||||
<h1>Welcome Back</h1>
|
||||
<p>Be among the first to experience 3D magic! Register for private alpha.</p>
|
||||
<h1>welcome back</h1>
|
||||
<p>be among the first to experience 3D magic! register for private alpha.</p>
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<label htmlFor="email" className="block"></label>
|
||||
@ -74,7 +74,7 @@ const LoginPage = () => {
|
||||
<a href="#">Forgot password?</a>
|
||||
</div>
|
||||
<button type="submit" className="login-button">
|
||||
Login
|
||||
login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
18
src/components/admin/AddEmployee.css
Normal file
18
src/components/admin/AddEmployee.css
Normal 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 */
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
|
||||
const AddEmployee = () => {
|
||||
@ -17,25 +19,28 @@ const AddEmployee = () => {
|
||||
pincode: '',
|
||||
city_id: '',
|
||||
mobile: '',
|
||||
image: null,
|
||||
});
|
||||
const [cities, setCities] = useState([]);
|
||||
const [imagePreview, setImagePreview] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCities = async () => {
|
||||
try {
|
||||
const response = await axiosInstance.get('/cities');
|
||||
if (Array.isArray(response.data)) {
|
||||
setCities(response.data);
|
||||
} else {
|
||||
console.error('Error: Data is not an array', response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching cities:', error.response || error.message);
|
||||
}
|
||||
};
|
||||
// Uncomment to fetch cities data from backend
|
||||
// useEffect(() => {
|
||||
// const fetchCities = async () => {
|
||||
// try {
|
||||
// const response = await axiosInstance.get('/cities');
|
||||
// if (Array.isArray(response.data)) {
|
||||
// setCities(response.data);
|
||||
// } else {
|
||||
// console.error('Error: Data is not an array', response.data);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('Error fetching cities:', error.response || error.message);
|
||||
// }
|
||||
// };
|
||||
|
||||
fetchCities();
|
||||
}, []);
|
||||
// fetchCities();
|
||||
// }, []);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
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) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
Object.keys(employeeData).forEach((key) => {
|
||||
formData.append(key, employeeData[key]);
|
||||
});
|
||||
|
||||
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');
|
||||
} catch (error) {
|
||||
console.error('Error adding employee:', error.response || error.message);
|
||||
@ -60,144 +85,202 @@ const AddEmployee = () => {
|
||||
<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 className="flex items-center mb-6">
|
||||
<Link to="/employees" className="text-#0e355b text-xl mr-4">
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className="text-2xl font-semibold text-#0e355b">
|
||||
create employee account
|
||||
</h1>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-center">
|
||||
<div className="space-y-6 w-full max-w-4xl">
|
||||
<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
|
||||
<div className="bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden">
|
||||
{imagePreview ? (
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<form onSubmit={handleAddEmployeeSubmit}>
|
||||
<form onSubmit={handleAddEmployeeSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">employee firstname:</label>
|
||||
<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"
|
||||
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>
|
||||
<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"
|
||||
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>
|
||||
<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"
|
||||
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>
|
||||
<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"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
>
|
||||
<option value="" disabled>select gender</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-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>
|
||||
<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-#4b5563"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div className="text-center">
|
||||
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold">
|
||||
<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 className="text-center mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-#0e355b text-white px-4 py-2 rounded-md font-semibold"
|
||||
>
|
||||
create account
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -25,10 +25,10 @@ const AdminDashboard = () => {
|
||||
<div className="w-full flex flex-col min-h-screen text-white">
|
||||
<header className="w-full p-4 flex justify-between 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>
|
||||
<p className="text-#4b5563">Welcome back {userName}</p>
|
||||
<p className="text-#4b5563">welcome back {userName}</p>
|
||||
</div>
|
||||
</header>
|
||||
<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"
|
||||
onClick={() => handleClick('')}
|
||||
>
|
||||
View Orders
|
||||
view orders
|
||||
</button>
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('/employees')}
|
||||
>
|
||||
View Employees
|
||||
view employees
|
||||
</button>
|
||||
<button
|
||||
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>
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm text-gray-600">Filter</span>
|
||||
<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">
|
||||
|
||||
@ -19,9 +19,12 @@ const AddCustomer = () => {
|
||||
pincode: '',
|
||||
city_id: '',
|
||||
mobile: '',
|
||||
image: null,
|
||||
});
|
||||
const [cities, setCities] = useState([]);
|
||||
const [imagePreview, setImagePreview] = useState(null);
|
||||
|
||||
// Uncomment to fetch cities data from backend
|
||||
// useEffect(() => {
|
||||
// const fetchCities = async () => {
|
||||
// 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) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
Object.keys(customerData).forEach((key) => {
|
||||
formData.append(key, customerData[key]);
|
||||
});
|
||||
|
||||
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');
|
||||
} catch (error) {
|
||||
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="min-h-screen text-gray-800 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span
|
||||
onClick={() => navigate(-1)}
|
||||
className="text-#0e355b cursor-pointer hover:text-#d1d5db transition font-bold"
|
||||
>
|
||||
<FontAwesomeIcon icon={faChevronLeft} /> Add Customer
|
||||
</span>
|
||||
<Link to="/CategoryList" className="text-blue-900">Skip for now</Link>
|
||||
<div className="flex items-center mb-6">
|
||||
<Link to="/customers" className="text-#0e355b text-xl mr-4">
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className="text-2xl font-semibold text-#0e355b">
|
||||
add customer
|
||||
</h1>
|
||||
</div>
|
||||
<Link to="/CategoryList" 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-gray-700 text-white text-xs px-2 py-1 rounded-full">
|
||||
Add Customer Image
|
||||
<div className="bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden">
|
||||
{imagePreview ? (
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/add-customer">
|
||||
<h2 className="text-lg font-semibold">Customer Information</h2>
|
||||
<h2 className="text-lg font-semibold">customer information</h2>
|
||||
</Link>
|
||||
<Link to="/measurements">
|
||||
<h2 className="text-lg font-semibold">Measurements</h2>
|
||||
<h2 className="text-lg font-semibold">measurements</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<form onSubmit={handleAddCustomerSubmit}>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Customer Firstname:</label>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
customer firstname:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
@ -103,7 +153,9 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</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
|
||||
type="text"
|
||||
name="lastname"
|
||||
@ -113,7 +165,9 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Age:</label>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
age:
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
@ -123,21 +177,27 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Gender:</label>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
gender:
|
||||
</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={customerData.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>
|
||||
<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>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
email:
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
@ -147,7 +207,9 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</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
|
||||
type="text"
|
||||
name="address_line_1"
|
||||
@ -157,7 +219,9 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</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
|
||||
type="text"
|
||||
name="address_line_2"
|
||||
@ -167,7 +231,9 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</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
|
||||
type="text"
|
||||
name="nearby_landmark"
|
||||
@ -177,7 +243,9 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Pincode:</label>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
pincode:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pincode"
|
||||
@ -187,33 +255,44 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">City:</label>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
city:
|
||||
</label>
|
||||
<select
|
||||
name="city_id"
|
||||
value={customerData.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>
|
||||
<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>
|
||||
<label className="block text-gray-800 font-medium">
|
||||
mobile:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
type="tel"
|
||||
name="mobile"
|
||||
value={customerData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div className="text-center">
|
||||
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm">
|
||||
Save Information
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-#0e355b text-white py-2 px-4 rounded-md"
|
||||
>
|
||||
add customer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -46,15 +46,15 @@
|
||||
}
|
||||
|
||||
.customer-table th {
|
||||
background-color: #09090B;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.customer-table tbody tr:nth-child(odd) {
|
||||
background-color: #09090B;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.customer-table tbody tr:nth-child(even) {
|
||||
background-color: #09090B;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.customer-table tbody tr:hover {
|
||||
|
||||
@ -32,12 +32,12 @@ const CustomerList = () => {
|
||||
<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>
|
||||
<h1 className="text-2xl font-semibold text-gray-800">customers list</h1>
|
||||
<button
|
||||
className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm"
|
||||
onClick={handleAddCustomer}
|
||||
>
|
||||
Add New Customer
|
||||
add new customer
|
||||
</button>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm text-gray-600">Filter</span>
|
||||
<span className="text-sm text-gray-600">filter</span>
|
||||
</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">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase text-gray-600 border-b">
|
||||
|
||||
@ -27,45 +27,45 @@ const CustomerMeasurements = () => {
|
||||
<div className="w-full flex flex-col min-h-screen text-white">
|
||||
<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>
|
||||
<h1 className="text-2xl font-semibold text-#0e355b">customer measurements</h1>
|
||||
<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-#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" />
|
||||
<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="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="chest" label={<span className="text-#0e355b">chest circumference (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="waist" label={<span className="text-#0e355b">waist circumference (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="shoulder" label={<span className="text-#0e355b">shoulder width (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="arm" label={<span className="text-#0e355b">arm length (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="sleeve" label={<span className="text-#0e355b">sleeve length (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
|
||||
<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" />
|
||||
<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="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<Form.Item name="inseam" label={<span className="text-#0e355b">Inseam (in inch)</span>}>
|
||||
<Input className="block text-sm font-medium text-#4b5563" />
|
||||
<Form.Item name="inseam" label={<span className="text-#0e355b">inseam (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="outseam" label={<span className="text-#0e355b">out seam (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="thigh" label={<span className="text-#0e355b">thigh circumference (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
|
||||
</Form.Item>
|
||||
<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 name="ankle" label={<span className="text-#0e355b">ankle circumference (in inch)</span>}>
|
||||
<Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 " />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<div className="text-center">
|
||||
|
||||
@ -24,10 +24,10 @@ const HomePage = () => {
|
||||
<div className="w-full flex flex-col min-h-screen text-white">
|
||||
<header className="w-full p-4 flex justify-between 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>
|
||||
<p className="text-#4b5563">Welcome back, {userName}</p>
|
||||
<p className="text-#4b5563">welcome back, {userName}</p>
|
||||
</div>
|
||||
</header>
|
||||
<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"
|
||||
onClick={() => handleClick('/customers')}
|
||||
>
|
||||
Create a New Order
|
||||
create a new order
|
||||
</button>
|
||||
<button
|
||||
className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
|
||||
onClick={() => handleClick('')}
|
||||
>
|
||||
View Orders
|
||||
view orders
|
||||
</button>
|
||||
<button
|
||||
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>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Layout, Drawer, Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Layout } 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';
|
||||
@ -16,32 +12,21 @@ import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
||||
const { Sider } = Layout;
|
||||
|
||||
const EmployeeSidebar = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const showDrawer = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const closeDrawer = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Sider
|
||||
className="desktop-sidebar"
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
width={70}
|
||||
style={{ height: '100vh' }}
|
||||
style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
|
||||
>
|
||||
<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="/employee" className="my-6">
|
||||
<img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
||||
<div className="flex flex-col items-center mt-4">
|
||||
<div className="flex items-center justify-center h-16 w-16 mb-5 bg-white">
|
||||
<Link to="">
|
||||
<img src={BrookslogoIcon} alt="Brooks Bingham Logo" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex flex-col items-center flex-grow">
|
||||
<Link to="/employee/home" className="my-6">
|
||||
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
@ -57,17 +42,15 @@ const EmployeeSidebar = () => {
|
||||
<Link to="/employee/profile" className="my-6">
|
||||
<img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/employee/logout" className="my-6">
|
||||
</div>
|
||||
</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;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user