desgin implementation
This commit is contained in:
parent
7a8a31c482
commit
caf8d4abc0
@ -1,11 +1,32 @@
|
||||
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 Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
import { styles } from '../../styles/classNames';
|
||||
import '../../styles/AddEmployee.css';
|
||||
|
||||
const CLASSES = {
|
||||
container: 'flex flex-row',
|
||||
mainContent: 'w-full flex flex-col min-h-screen text-black',
|
||||
innerContent: 'min-h-screen text-gray-800 p-6',
|
||||
header: 'flex justify-between items-center',
|
||||
headerTitle: 'flex items-center',
|
||||
backButton: 'text-[#0e355b] text-xl',
|
||||
title: 'text-2xl font-semibold text-[#0e355b]',
|
||||
formGrid: 'grid grid-cols-1 md:grid-cols-3 gap-6',
|
||||
imageSection: 'space-y-6',
|
||||
imageWrapper: 'text-center',
|
||||
imageContainer: 'inline-block relative',
|
||||
imagePreview: 'bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden',
|
||||
noImage: 'w-full h-full flex items-center justify-center text-gray-500',
|
||||
hiddenInput: 'hidden',
|
||||
uploadButton: 'absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full',
|
||||
formSection: 'md:col-span-2 space-y-4',
|
||||
formGroup: 'text-gray-800 font-medium',
|
||||
formInput: 'p-2 border-b border-gray-400 focus:border-gray-700',
|
||||
formSelect: 'p-2 border-b border-gray-400 focus:border-gray-700',
|
||||
submitButton: 'bg-[#0e355b] text-white py-2 px-4 rounded-md',
|
||||
};
|
||||
|
||||
const AddEmployee = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -15,6 +36,7 @@ const AddEmployee = () => {
|
||||
age: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
mobile: '',
|
||||
address: {
|
||||
address_line_1: '',
|
||||
address_line_2: '',
|
||||
@ -22,36 +44,34 @@ const AddEmployee = () => {
|
||||
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 {
|
||||
// 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);
|
||||
// }
|
||||
// };
|
||||
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.response.data : error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// fetchCities();
|
||||
// }, []);
|
||||
fetchCities();
|
||||
}, []);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setEmployeeData({
|
||||
...employeeData,
|
||||
setEmployeeData((prevData) => ({
|
||||
...prevData,
|
||||
[name]: value,
|
||||
});
|
||||
}));
|
||||
};
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
@ -73,7 +93,7 @@ const AddEmployee = () => {
|
||||
});
|
||||
|
||||
try {
|
||||
await axiosInstance.post('http://localhost:5000/employees', formData, {
|
||||
await axiosInstance.post('/employees', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
@ -85,209 +105,165 @@ const AddEmployee = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={CLASSES.container}>
|
||||
<Sidebar />
|
||||
<div className={styles.content}>
|
||||
<div className={styles.header}>
|
||||
<div className="flex items-center ">
|
||||
<Link to="/employees" className={styles.backButton}>
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className={styles.title}>
|
||||
create employee account
|
||||
</h1>
|
||||
<div className={CLASSES.mainContent}>
|
||||
<div className={CLASSES.innerContent}>
|
||||
<div className={CLASSES.header}>
|
||||
<div className={CLASSES.headerTitle}>
|
||||
<Link to="/employees" className={CLASSES.backButton}>
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className={CLASSES.title}>create employee account</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div className={`${styles.centerText} space-y-6 w-full max-w-4xl`}>
|
||||
<div className={styles.centerText}>
|
||||
<div className="inline-block relative">
|
||||
<div className={styles.imageWrapper}>
|
||||
<div className={CLASSES.formGrid}>
|
||||
<div className={CLASSES.imageSection}>
|
||||
<div className={CLASSES.imageWrapper}>
|
||||
<div className={CLASSES.imageContainer}>
|
||||
<div className={CLASSES.imagePreview}>
|
||||
{imagePreview ? (
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Employee"
|
||||
className={styles.imagePreview}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.noImageText}>
|
||||
No image
|
||||
</div>
|
||||
<div className={CLASSES.noImage}>no image</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
className={CLASSES.hiddenInput}
|
||||
id="imageUpload"
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => document.getElementById('imageUpload').click()}
|
||||
className={styles.imageUploadButton}
|
||||
className={CLASSES.uploadButton}
|
||||
>
|
||||
Upload
|
||||
upload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleAddEmployeeSubmit} className={styles.form}>
|
||||
<div className={styles.formGroup}>
|
||||
<div>
|
||||
<label className="block text-secondary font-medium">
|
||||
employee firstname:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
value={employeeData.firstname}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-secondary font-medium">
|
||||
employee lastname:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={employeeData.lastname}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-secondary font-medium">
|
||||
age:
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={employeeData.age}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-secondary font-medium">
|
||||
gender:
|
||||
</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={employeeData.gender}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
>
|
||||
<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-secondary font-medium">
|
||||
mobile:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobile"
|
||||
value={employeeData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<label className="block text-secondary font-medium">
|
||||
address line 1:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_1"
|
||||
value={employeeData.address_line_1}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<label className="block text-secondary font-medium">
|
||||
address line 2:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_2"
|
||||
value={employeeData.address_line_2}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<label className="block text-secondary font-medium">
|
||||
nearby landmark:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nearby_landmark"
|
||||
value={employeeData.nearby_landmark}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<label className="block text-secondary font-medium">
|
||||
pincode:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pincode"
|
||||
value={employeeData.pincode}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<label className="block text-secondary font-medium">
|
||||
city:
|
||||
</label>
|
||||
<select
|
||||
name="city_id"
|
||||
value={employeeData.city_id}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
>
|
||||
<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-secondary font-medium">
|
||||
email:
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={employeeData.email}
|
||||
onChange={handleInputChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={CLASSES.formSection}>
|
||||
<form onSubmit={handleAddEmployeeSubmit}>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>first name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
value={employeeData.firstname}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.centerText} mt-6`}>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles.button}
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>last name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={employeeData.lastname}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={employeeData.age}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>gender:</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={employeeData.gender}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formSelect}
|
||||
>
|
||||
create account
|
||||
</button>
|
||||
<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={CLASSES.formGroup}>mobile:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobile"
|
||||
value={employeeData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>address line 1:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_1"
|
||||
value={employeeData.address.address_line_1}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>address line 2:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_2"
|
||||
value={employeeData.address.address_line_2}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>nearby landmark:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nearby_landmark"
|
||||
value={employeeData.address.nearby_landmark}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>pincode:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pincode"
|
||||
value={employeeData.address.pincode}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>city:</label>
|
||||
<select
|
||||
name="city_id"
|
||||
value={employeeData.address.city_id}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formSelect}
|
||||
>
|
||||
<option value="" disabled>select city</option>
|
||||
{cities.map((city) => (
|
||||
<option key={city.id} value={city.id}>
|
||||
{city.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" className={CLASSES.submitButton}>
|
||||
add employee
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -296,4 +272,5 @@ const AddEmployee = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddEmployee;
|
||||
|
||||
@ -122,10 +122,10 @@ const AddCustomer = () => {
|
||||
<Link to="/customers" className={CLASSES.backButton}>
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className={CLASSES.title}>Add Customer</h1>
|
||||
<h1 className={CLASSES.title}>add customer</h1>
|
||||
</div>
|
||||
<Link to="/CategoryList" className={CLASSES.skipLink}>
|
||||
Skip for now
|
||||
skip for now
|
||||
</Link>
|
||||
</div>
|
||||
<div className={CLASSES.formGrid}>
|
||||
@ -140,7 +140,7 @@ const AddCustomer = () => {
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className={CLASSES.noImage}>No Image</div>
|
||||
<div className={CLASSES.noImage}>no image</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
@ -163,17 +163,17 @@ const AddCustomer = () => {
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/add-customer">
|
||||
<h2 className={CLASSES.linkTitle}>Customer Information</h2>
|
||||
<h2 className={CLASSES.linkTitle}>customer information</h2>
|
||||
</Link>
|
||||
<Link to="/measurements">
|
||||
<h2 className={CLASSES.linkTitle}>Measurements</h2>
|
||||
<h2 className={CLASSES.linkTitle}>measurements</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={CLASSES.formSection}>
|
||||
<form onSubmit={handleAddCustomerSubmit}>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>First Name:</label>
|
||||
<label className={CLASSES.formGroup}>first name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
@ -183,7 +183,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Last Name:</label>
|
||||
<label className={CLASSES.formGroup}>last name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastname"
|
||||
@ -193,7 +193,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Age:</label>
|
||||
<label className={CLASSES.formGroup}>age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
@ -203,21 +203,21 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Gender:</label>
|
||||
<label className={CLASSES.formGroup}>gender:</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={customerData.gender}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formSelect}
|
||||
>
|
||||
<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={CLASSES.formGroup}>Email:</label>
|
||||
<label className={CLASSES.formGroup}>email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
@ -227,7 +227,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Address Line 1:</label>
|
||||
<label className={CLASSES.formGroup}>address line 1:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_1"
|
||||
@ -237,7 +237,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Address Line 2:</label>
|
||||
<label className={CLASSES.formGroup}>address line 2:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_2"
|
||||
@ -247,7 +247,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Nearby Landmark:</label>
|
||||
<label className={CLASSES.formGroup}>nearby landmark:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nearby_landmark"
|
||||
@ -257,7 +257,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Pincode:</label>
|
||||
<label className={CLASSES.formGroup}>pincode:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pincode"
|
||||
@ -267,14 +267,14 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>City:</label>
|
||||
<label className={CLASSES.formGroup}>city:</label>
|
||||
<select
|
||||
name="city_id"
|
||||
value={customerData.city_id}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formSelect}
|
||||
>
|
||||
<option value="" disabled>Select City</option>
|
||||
<option value="" disabled>select city</option>
|
||||
{cities.map((city) => (
|
||||
<option key={city.id} value={city.id}>
|
||||
{city.name}
|
||||
@ -283,7 +283,7 @@ const AddCustomer = () => {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Mobile:</label>
|
||||
<label className={CLASSES.formGroup}>mobile:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobile"
|
||||
@ -293,7 +293,7 @@ const AddCustomer = () => {
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className={CLASSES.submitButton}>
|
||||
Add Customer
|
||||
add customer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user