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

desgin implementation

Browse Source
This commit is contained in:
surajb 2024-07-26 14:53:06 +05:30
parent 7a8a31c482
commit caf8d4abc0
2 changed files with 200 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,32 @@
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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import Sidebar from '../sidebar/Sidebar';
import axiosInstance from '../../api/axiosConfig'; 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 AddEmployee = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -15,6 +36,7 @@ const AddEmployee = () => {
age: '', age: '',
gender: '', gender: '',
email: '', email: '',
mobile: '',
address: { address: {
address_line_1: '', address_line_1: '',
address_line_2: '', address_line_2: '',
@ -22,36 +44,34 @@ const AddEmployee = () => {
pincode: '', pincode: '',
city_id: '', city_id: '',
}, },
mobile: '',
image: null, image: null,
}); });
const [cities, setCities] = useState([]); const [cities, setCities] = useState([]);
const [imagePreview, setImagePreview] = useState(null); const [imagePreview, setImagePreview] = useState(null);
// Uncomment to fetch cities data from backend useEffect(() => {
// useEffect(() => { const fetchCities = async () => {
// const fetchCities = async () => { try {
// try { const response = await axiosInstance.get('/cities');
// const response = await axiosInstance.get('/cities'); if (Array.isArray(response.data)) {
// if (Array.isArray(response.data)) { setCities(response.data);
// setCities(response.data); } else {
// } else { console.error('Error: Data is not an array', response.data);
// console.error('Error: Data is not an array', response.data); }
// } } catch (error) {
// } catch (error) { console.error('Error fetching cities:', error.response ? error.response.data : error.message);
// 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;
setEmployeeData({ setEmployeeData((prevData) => ({
...employeeData, ...prevData,
[name]: value, [name]: value,
}); }));
}; };
const handleImageChange = (e) => { const handleImageChange = (e) => {
@ -73,7 +93,7 @@ const AddEmployee = () => {
}); });
try { try {
await axiosInstance.post('http://localhost:5000/employees', formData, { await axiosInstance.post('/employees', formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
}, },
@ -85,209 +105,165 @@ const AddEmployee = () => {
}; };
return ( return (
<div className={styles.container}> <div className={CLASSES.container}>
<Sidebar /> <Sidebar />
<div className={styles.content}> <div className={CLASSES.mainContent}>
<div className={styles.header}> <div className={CLASSES.innerContent}>
<div className="flex items-center "> <div className={CLASSES.header}>
<Link to="/employees" className={styles.backButton}> <div className={CLASSES.headerTitle}>
<Link to="/employees" className={CLASSES.backButton}>
<FontAwesomeIcon icon={faChevronLeft} /> <FontAwesomeIcon icon={faChevronLeft} />
</Link> </Link>
<h1 className={styles.title}> <h1 className={CLASSES.title}>create employee account</h1>
create employee account
</h1>
</div> </div>
<div className="flex justify-center"> </div>
<div className={`${styles.centerText} space-y-6 w-full max-w-4xl`}> <div className={CLASSES.formGrid}>
<div className={styles.centerText}> <div className={CLASSES.imageSection}>
<div className="inline-block relative"> <div className={CLASSES.imageWrapper}>
<div className={styles.imageWrapper}> <div className={CLASSES.imageContainer}>
<div className={CLASSES.imagePreview}>
{imagePreview ? ( {imagePreview ? (
<img <img
src={imagePreview} src={imagePreview}
alt="Employee" alt="Employee"
className={styles.imagePreview} className="w-full h-full object-cover"
/> />
) : ( ) : (
<div className={styles.noImageText}> <div className={CLASSES.noImage}>no image</div>
No image
</div>
)} )}
</div> </div>
<input <input
type="file" type="file"
accept="image/*" accept="image/*"
className="hidden" className={CLASSES.hiddenInput}
id="imageUpload" id="imageUpload"
onChange={handleImageChange} onChange={handleImageChange}
/> />
<button <button
type="button" type="button"
onClick={() => document.getElementById('imageUpload').click()} onClick={() => document.getElementById('imageUpload').click()}
className={styles.imageUploadButton} className={CLASSES.uploadButton}
> >
Upload upload
</button> </button>
</div> </div>
</div> </div>
<form onSubmit={handleAddEmployeeSubmit} className={styles.form}> </div>
<div className={styles.formGroup}> <div className={CLASSES.formSection}>
<form onSubmit={handleAddEmployeeSubmit}>
<div> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>first name:</label>
employee firstname:
</label>
<input <input
type="text" type="text"
name="firstname" name="firstname"
value={employeeData.firstname} value={employeeData.firstname}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>last name:</label>
employee lastname:
</label>
<input <input
type="text" type="text"
name="lastname" name="lastname"
value={employeeData.lastname} value={employeeData.lastname}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>age:</label>
age:
</label>
<input <input
type="number" type="number"
name="age" name="age"
value={employeeData.age} value={employeeData.age}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>gender:</label>
gender:
</label>
<select <select
name="gender" name="gender"
value={employeeData.gender} value={employeeData.gender}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formSelect}
> >
<option value="" disabled> <option value="" disabled>select gender</option>
select gender
</option>
<option value="male">male</option> <option value="male">male</option>
<option value="female">female</option> <option value="female">female</option>
<option value="other">other</option> <option value="other">other</option>
</select> </select>
</div> </div>
<div> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>mobile:</label>
mobile:
</label>
<input <input
type="text" type="text"
name="mobile" name="mobile"
value={employeeData.mobile} value={employeeData.mobile}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div className="md:col-span-2 lg:col-span-3"> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>address line 1:</label>
address line 1:
</label>
<input <input
type="text" type="text"
name="address_line_1" name="address_line_1"
value={employeeData.address_line_1} value={employeeData.address.address_line_1}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div className="md:col-span-2 lg:col-span-3"> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>address line 2:</label>
address line 2:
</label>
<input <input
type="text" type="text"
name="address_line_2" name="address_line_2"
value={employeeData.address_line_2} value={employeeData.address.address_line_2}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div className="md:col-span-2 lg:col-span-3"> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>nearby landmark:</label>
nearby landmark:
</label>
<input <input
type="text" type="text"
name="nearby_landmark" name="nearby_landmark"
value={employeeData.nearby_landmark} value={employeeData.address.nearby_landmark}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div className="md:col-span-2 lg:col-span-3"> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>pincode:</label>
pincode:
</label>
<input <input
type="text" type="text"
name="pincode" name="pincode"
value={employeeData.pincode} value={employeeData.address.pincode}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formInput}
/> />
</div> </div>
<div className="md:col-span-2 lg:col-span-3"> <div>
<label className="block text-secondary font-medium"> <label className={CLASSES.formGroup}>city:</label>
city:
</label>
<select <select
name="city_id" name="city_id"
value={employeeData.city_id} value={employeeData.address.city_id}
onChange={handleInputChange} onChange={handleInputChange}
className={styles.input} className={CLASSES.formSelect}
> >
<option value="" disabled> <option value="" disabled>select city</option>
select city {cities.map((city) => (
</option>
{Array.isArray(cities) &&
cities.map((city) => (
<option key={city.id} value={city.id}> <option key={city.id} value={city.id}>
{city.name} {city.name}
</option> </option>
))} ))}
</select> </select>
</div> </div>
<div className="md:col-span-2 lg:col-span-3"> <button type="submit" className={CLASSES.submitButton}>
<label className="block text-secondary font-medium"> add employee
email:
</label>
<input
type="email"
name="email"
value={employeeData.email}
onChange={handleInputChange}
className={styles.input}
/>
</div>
</div>
<div className={`${styles.centerText} mt-6`}>
<button
type="submit"
className={styles.button}
>
create account
</button> </button>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -296,4 +272,5 @@ const AddEmployee = () => {
</div> </div>
); );
}; };
export default AddEmployee; export default AddEmployee;

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

@ -122,10 +122,10 @@ const AddCustomer = () => {
<Link to="/customers" className={CLASSES.backButton}> <Link to="/customers" className={CLASSES.backButton}>
<FontAwesomeIcon icon={faChevronLeft} /> <FontAwesomeIcon icon={faChevronLeft} />
</Link> </Link>
<h1 className={CLASSES.title}>Add Customer</h1> <h1 className={CLASSES.title}>add customer</h1>
</div> </div>
<Link to="/CategoryList" className={CLASSES.skipLink}> <Link to="/CategoryList" className={CLASSES.skipLink}>
Skip for now skip for now
</Link> </Link>
</div> </div>
<div className={CLASSES.formGrid}> <div className={CLASSES.formGrid}>
@ -140,7 +140,7 @@ const AddCustomer = () => {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
<div className={CLASSES.noImage}>No Image</div> <div className={CLASSES.noImage}>no image</div>
)} )}
</div> </div>
<input <input
@ -163,17 +163,17 @@ const AddCustomer = () => {
</div> </div>
<div> <div>
<Link to="/add-customer"> <Link to="/add-customer">
<h2 className={CLASSES.linkTitle}>Customer Information</h2> <h2 className={CLASSES.linkTitle}>customer information</h2>
</Link> </Link>
<Link to="/measurements"> <Link to="/measurements">
<h2 className={CLASSES.linkTitle}>Measurements</h2> <h2 className={CLASSES.linkTitle}>measurements</h2>
</Link> </Link>
</div> </div>
</div> </div>
<div className={CLASSES.formSection}> <div className={CLASSES.formSection}>
<form onSubmit={handleAddCustomerSubmit}> <form onSubmit={handleAddCustomerSubmit}>
<div> <div>
<label className={CLASSES.formGroup}>First Name:</label> <label className={CLASSES.formGroup}>first name:</label>
<input <input
type="text" type="text"
name="firstname" name="firstname"
@ -183,7 +183,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Last Name:</label> <label className={CLASSES.formGroup}>last name:</label>
<input <input
type="text" type="text"
name="lastname" name="lastname"
@ -193,7 +193,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Age:</label> <label className={CLASSES.formGroup}>age:</label>
<input <input
type="number" type="number"
name="age" name="age"
@ -203,21 +203,21 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Gender:</label> <label className={CLASSES.formGroup}>gender:</label>
<select <select
name="gender" name="gender"
value={customerData.gender} value={customerData.gender}
onChange={handleInputChange} onChange={handleInputChange}
className={CLASSES.formSelect} className={CLASSES.formSelect}
> >
<option value="" disabled>Select Gender</option> <option value="" disabled>select gender</option>
<option value="male">Male</option> <option value="male">male</option>
<option value="female">Female</option> <option value="female">female</option>
<option value="other">Other</option> <option value="other">other</option>
</select> </select>
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Email:</label> <label className={CLASSES.formGroup}>email:</label>
<input <input
type="email" type="email"
name="email" name="email"
@ -227,7 +227,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Address Line 1:</label> <label className={CLASSES.formGroup}>address line 1:</label>
<input <input
type="text" type="text"
name="address_line_1" name="address_line_1"
@ -237,7 +237,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Address Line 2:</label> <label className={CLASSES.formGroup}>address line 2:</label>
<input <input
type="text" type="text"
name="address_line_2" name="address_line_2"
@ -247,7 +247,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Nearby Landmark:</label> <label className={CLASSES.formGroup}>nearby landmark:</label>
<input <input
type="text" type="text"
name="nearby_landmark" name="nearby_landmark"
@ -257,7 +257,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Pincode:</label> <label className={CLASSES.formGroup}>pincode:</label>
<input <input
type="text" type="text"
name="pincode" name="pincode"
@ -267,14 +267,14 @@ const AddCustomer = () => {
/> />
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>City:</label> <label className={CLASSES.formGroup}>city:</label>
<select <select
name="city_id" name="city_id"
value={customerData.city_id} value={customerData.city_id}
onChange={handleInputChange} onChange={handleInputChange}
className={CLASSES.formSelect} className={CLASSES.formSelect}
> >
<option value="" disabled>Select City</option> <option value="" disabled>select city</option>
{cities.map((city) => ( {cities.map((city) => (
<option key={city.id} value={city.id}> <option key={city.id} value={city.id}>
{city.name} {city.name}
@ -283,7 +283,7 @@ const AddCustomer = () => {
</select> </select>
</div> </div>
<div> <div>
<label className={CLASSES.formGroup}>Mobile:</label> <label className={CLASSES.formGroup}>mobile:</label>
<input <input
type="text" type="text"
name="mobile" name="mobile"
@ -293,7 +293,7 @@ const AddCustomer = () => {
/> />
</div> </div>
<button type="submit" className={CLASSES.submitButton}> <button type="submit" className={CLASSES.submitButton}>
Add Customer add customer
</button> </button>
</form> </form>
</div> </div>