changes done in Addemployee page and AddCustomer page
This commit is contained in:
parent
8bde35342c
commit
dddd1b7ea2
28
db.json
28
db.json
@ -28,6 +28,20 @@
|
||||
"id": "1",
|
||||
"name": "Employee User",
|
||||
"email": "employeeuser@example.com"
|
||||
},
|
||||
{
|
||||
"id": "8d54",
|
||||
"firstname": "first",
|
||||
"lastname": "last",
|
||||
"age": "12",
|
||||
"gender": "male",
|
||||
"email": "firstlast001@gmail.com",
|
||||
"address_line_1": " Bavdhan, Pune",
|
||||
"address_line_2": "LOCAL :,Bavdhan",
|
||||
"nearby_landmark": "sbi bank",
|
||||
"pincode": "411021",
|
||||
"city_id": "",
|
||||
"mobile": "07559393995"
|
||||
}
|
||||
],
|
||||
"products": [
|
||||
@ -122,6 +136,20 @@
|
||||
"email": "aaaa@gmail.com",
|
||||
"address": "pune",
|
||||
"mobile": "7559393995"
|
||||
},
|
||||
{
|
||||
"id": "88a4",
|
||||
"firstname": "first",
|
||||
"lastname": "last",
|
||||
"age": "8",
|
||||
"gender": "male",
|
||||
"email": "firstlast001@gmail.com",
|
||||
"address_line_1": "Bavdhan, Pune",
|
||||
"address_line_2": "LOCAL :,Bavdhan",
|
||||
"nearby_landmark": "sbi bank",
|
||||
"pincode": "411021",
|
||||
"city_id": "",
|
||||
"mobile": "07559393995"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
@ -11,9 +11,31 @@ const AddEmployee = () => {
|
||||
age: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
address: '',
|
||||
address_line_1: '',
|
||||
address_line_2: '',
|
||||
nearby_landmark: '',
|
||||
pincode: '',
|
||||
city_id: '',
|
||||
mobile: '',
|
||||
});
|
||||
const [cities, setCities] = useState([]);
|
||||
|
||||
// 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();
|
||||
// }, []);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
@ -26,7 +48,7 @@ const AddEmployee = () => {
|
||||
const handleAddEmployeeSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await axiosInstance.post('/employees', employeeData);
|
||||
await axiosInstance.post('http://localhost:5000/employees', employeeData);
|
||||
navigate('/employees');
|
||||
} catch (error) {
|
||||
console.error('Error adding employee:', error.response || error.message);
|
||||
@ -39,7 +61,7 @@ const AddEmployee = () => {
|
||||
<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>
|
||||
<h1 className="text-2xl font-semibold text-blue-900">Creating Employee Account</h1>
|
||||
<Link to="/" className="text-blue-900">Skip for now</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
@ -48,7 +70,7 @@ const AddEmployee = () => {
|
||||
<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
|
||||
Add Employee Image
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,7 +78,7 @@ const AddEmployee = () => {
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<form onSubmit={handleAddEmployeeSubmit}>
|
||||
<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"
|
||||
@ -66,7 +88,7 @@ const AddEmployee = () => {
|
||||
/>
|
||||
</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"
|
||||
@ -76,7 +98,7 @@ const AddEmployee = () => {
|
||||
/>
|
||||
</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"
|
||||
@ -86,7 +108,7 @@ const AddEmployee = () => {
|
||||
/>
|
||||
</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}
|
||||
@ -94,13 +116,13 @@ const AddEmployee = () => {
|
||||
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>
|
||||
<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"
|
||||
@ -110,17 +132,61 @@ const AddEmployee = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">address:</label>
|
||||
<label className="block text-gray-800 font-medium">Address Line 1:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={employeeData.address}
|
||||
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">mobile no:</label>
|
||||
<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"
|
||||
@ -132,7 +198,7 @@ const AddEmployee = () => {
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,21 +1,41 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../sidebar/Sidebar';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
|
||||
const AddCustomer = () => {
|
||||
const navigate = useNavigate();
|
||||
const [customerData, setCustomerData] = useState({
|
||||
firstname: '',
|
||||
lastname:'',
|
||||
lastname: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
address: '',
|
||||
address_line_1: '',
|
||||
address_line_2: '',
|
||||
nearby_landmark: '',
|
||||
pincode: '',
|
||||
city_id: '',
|
||||
mobile: '',
|
||||
});
|
||||
const [cities, setCities] = useState([]);
|
||||
|
||||
// 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();
|
||||
// }, []);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
@ -28,121 +48,165 @@ const AddCustomer = () => {
|
||||
const handleAddCustomerSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await axiosInstance.post('http://localhost:5000/customers', customerData);
|
||||
await axiosInstance.post('http://localhost:5000/customers', customerData);
|
||||
navigate('/customers');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error('Error adding customer:', error.response || error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<Sidebar />
|
||||
<div className="w-full flex flex-col min-h-screen text-white">
|
||||
<div className="min-h-screen text-gray-300 p-6">
|
||||
<div className="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-#0e355b" > add customer</h1>
|
||||
<Link to="/CategoryList" className="text-#0e355b">skip for now</Link>
|
||||
<h1 className="text-2xl font-semibold text-blue-900">Add Customer</h1>
|
||||
<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-700 w-24 h-24 rounded-full mx-auto"></div>
|
||||
<button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-0e355b text-white text-xs px-2 py-1 rounded-full">
|
||||
{/* Add Customer Image */}
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/add-customer">
|
||||
<h2 className="text-lg font-semibold text-">customer information</h2>
|
||||
<h2 className="text-lg font-semibold">Customer Information</h2>
|
||||
</Link>
|
||||
<Link to="/measurements">
|
||||
<h2 className="text-lg font-semibold text-">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-d1d5db font-medium text-d1d5db">customer firstname:</label>
|
||||
<label className="block text-gray-800 font-medium">Customer Firstname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
value={customerData.firstname}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">customer lastname:</label>
|
||||
<label className="block text-gray-800 font-medium">Customer Lastname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={customerData.lastname}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">age:</label>
|
||||
<label className="block text-gray-800 font-medium">Age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={customerData.age}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">gender:</label>
|
||||
<label className="block text-gray-800 font-medium">Gender:</label>
|
||||
<select
|
||||
name="gender"
|
||||
value={customerData.gender}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
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-d1d5db font-medium text-d1d5db">email:</label>
|
||||
<label className="block text-gray-800 font-medium">Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={customerData.email}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">address:</label>
|
||||
<label className="block text-gray-800 font-medium">Address Line 1:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={customerData.address}
|
||||
name="address_line_1"
|
||||
value={customerData.address_line_1}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-d1d5db font-medium text-d1d5db">mobile no:</label>
|
||||
<label className="block text-gray-800 font-medium">Address Line 2:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_2"
|
||||
value={customerData.address_line_2}
|
||||
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">Nearby Landmark:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nearby_landmark"
|
||||
value={customerData.nearby_landmark}
|
||||
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">Pincode:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="pincode"
|
||||
value={customerData.pincode}
|
||||
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">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>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-800 font-medium">Mobile Number:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mobile"
|
||||
value={customerData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className="input-underline"
|
||||
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 text-sm">
|
||||
save information
|
||||
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm">
|
||||
Save Information
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -34,7 +34,7 @@ const CustomerList = () => {
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<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"
|
||||
className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm"
|
||||
onClick={handleAddCustomer}
|
||||
>
|
||||
Add New Customer
|
||||
|
||||
@ -44,7 +44,7 @@ const AdminSidebar = () => {
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<Link to="/admin/home" className="my-6">
|
||||
<Link to="/admin" className="my-6">
|
||||
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/categories" className="my-6">
|
||||
@ -59,7 +59,7 @@ const AdminSidebar = () => {
|
||||
<Link to="/admin/catalog" className="my-6">
|
||||
<img src={CatalogIcon} alt="Catalog" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/employee" className="my-6">
|
||||
<Link to="/employees" className="my-6">
|
||||
<img src={EmployeeIcon} alt="Employee" className="hover:opacity-75 sidebar-icon" />
|
||||
</Link>
|
||||
<Link to="/admin/measurements" className="my-6">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user