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

changes done in Addemployee page and AddCustomer page

Browse Source
This commit is contained in:
surajb 2024-07-18 15:14:17 +05:30
parent 8bde35342c
commit dddd1b7ea2
5 changed files with 218 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
db.json
View File

@ -28,6 +28,20 @@
"id": "1", "id": "1",
"name": "Employee User", "name": "Employee User",
"email": "employeeuser@example.com" "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": [ "products": [
@ -122,6 +136,20 @@
"email": "aaaa@gmail.com", "email": "aaaa@gmail.com",
"address": "pune", "address": "pune",
"mobile": "7559393995" "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"
} }
] ]
} }

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

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar'; import Sidebar from '../sidebar/Sidebar';
import axiosInstance from '../../api/axiosConfig'; import axiosInstance from '../../api/axiosConfig';
@ -11,9 +11,31 @@ const AddEmployee = () => {
age: '', age: '',
gender: '', gender: '',
email: '', email: '',
address: '', address_line_1: '',
address_line_2: '',
nearby_landmark: '',
pincode: '',
city_id: '',
mobile: '', 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 handleInputChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
@ -26,7 +48,7 @@ const AddEmployee = () => {
const handleAddEmployeeSubmit = async (e) => { const handleAddEmployeeSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
await axiosInstance.post('/employees', employeeData); await axiosInstance.post('http://localhost:5000/employees', employeeData);
navigate('/employees'); navigate('/employees');
} catch (error) { } catch (error) {
console.error('Error adding employee:', error.response || error.message); console.error('Error adding employee:', error.response || error.message);
@ -39,7 +61,7 @@ const AddEmployee = () => {
<div className="w-full flex flex-col min-h-screen text-black"> <div className="w-full flex flex-col min-h-screen text-black">
<div className="min-h-screen text-gray-800 p-6"> <div className="min-h-screen text-gray-800 p-6">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<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> <Link to="/" className="text-blue-900">Skip for now</Link>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@ -48,7 +70,7 @@ const AddEmployee = () => {
<div className="inline-block relative"> <div className="inline-block relative">
<div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></div> <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></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"> <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> </button>
</div> </div>
</div> </div>
@ -56,7 +78,7 @@ const AddEmployee = () => {
<div className="md:col-span-2 space-y-4"> <div className="md:col-span-2 space-y-4">
<form onSubmit={handleAddEmployeeSubmit}> <form onSubmit={handleAddEmployeeSubmit}>
<div> <div>
<label className="block text-gray-800 font-medium">employee firstname:</label> <label className="block text-gray-800 font-medium">Employee Firstname:</label>
<input <input
type="text" type="text"
name="firstname" name="firstname"
@ -66,7 +88,7 @@ const AddEmployee = () => {
/> />
</div> </div>
<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 <input
type="text" type="text"
name="lastname" name="lastname"
@ -76,7 +98,7 @@ const AddEmployee = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">age:</label> <label className="block text-gray-800 font-medium">Age:</label>
<input <input
type="number" type="number"
name="age" name="age"
@ -86,7 +108,7 @@ const AddEmployee = () => {
/> />
</div> </div>
<div> <div>
<label className="block text-gray-800 font-medium">gender:</label> <label className="block text-gray-800 font-medium">Gender:</label>
<select <select
name="gender" name="gender"
value={employeeData.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" className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
> >
<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="block text-gray-800 font-medium">email:</label> <label className="block text-gray-800 font-medium">Email:</label>
<input <input
type="email" type="email"
name="email" name="email"
@ -110,17 +132,61 @@ const AddEmployee = () => {
/> />
</div> </div>
<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 <input
type="text" type="text"
name="address" name="address_line_1"
value={employeeData.address} value={employeeData.address_line_1}
onChange={handleInputChange} 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-#4b5563"
/> />
</div> </div>
<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 <input
type="text" type="text"
name="mobile" name="mobile"
@ -132,7 +198,7 @@ const AddEmployee = () => {
<br /> <br />
<div className="text-center"> <div className="text-center">
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold"> <button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold">
create account Create Account
</button> </button>
</div> </div>
</form> </form>

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

@ -1,21 +1,41 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar'; import Sidebar from '../sidebar/Sidebar';
import axiosInstance from '../../api/axiosConfig'; import axiosInstance from '../../api/axiosConfig';
import { useNavigate } from 'react-router-dom';
const AddCustomer = () => { const AddCustomer = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [customerData, setCustomerData] = useState({ const [customerData, setCustomerData] = useState({
firstname: '', firstname: '',
lastname:'', lastname: '',
age: '', age: '',
gender: '', gender: '',
email: '', email: '',
address: '', address_line_1: '',
address_line_2: '',
nearby_landmark: '',
pincode: '',
city_id: '',
mobile: '', 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 handleInputChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
@ -28,121 +48,165 @@ const AddCustomer = () => {
const handleAddCustomerSubmit = async (e) => { const handleAddCustomerSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
const response = await axiosInstance.post('http://localhost:5000/customers', customerData); await axiosInstance.post('http://localhost:5000/customers', customerData);
navigate('/customers'); navigate('/customers');
} catch (error) { } catch (error) {
console.error(error); console.error('Error adding customer:', error.response || error.message);
} }
}; };
return ( return (
<div className="flex flex-row"> <div className="flex flex-row">
<Sidebar /> <Sidebar />
<div className="w-full flex flex-col min-h-screen text-white"> <div className="w-full flex flex-col min-h-screen text-black">
<div className="min-h-screen text-gray-300 p-6"> <div className="min-h-screen text-gray-800 p-6">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-#0e355b" > add customer</h1> <h1 className="text-2xl font-semibold text-blue-900">Add Customer</h1>
<Link to="/CategoryList" className="text-#0e355b">skip for now</Link> <Link to="/CategoryList" className="text-blue-900">Skip for now</Link>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-6"> <div className="space-y-6">
<div className="text-center"> <div className="text-center">
<div className="inline-block relative"> <div className="inline-block relative">
<div className="bg-gray-700 w-24 h-24 rounded-full mx-auto"></div> <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-0e355b text-white text-xs px-2 py-1 rounded-full"> <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 */} Add Customer Image
</button> </button>
</div> </div>
</div> </div>
<div> <div>
<Link to="/add-customer"> <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>
<Link to="/measurements"> <Link to="/measurements">
<h2 className="text-lg font-semibold text-">measurements</h2> <h2 className="text-lg font-semibold">Measurements</h2>
</Link> </Link>
</div> </div>
</div> </div>
<div className="md:col-span-2 space-y-4"> <div className="md:col-span-2 space-y-4">
<form onSubmit={handleAddCustomerSubmit}> <form onSubmit={handleAddCustomerSubmit}>
<div> <div>
<label className="block text-d1d5db font-medium text-d1d5db">customer firstname:</label> <label className="block text-gray-800 font-medium">Customer Firstname:</label>
<input <input
type="text" type="text"
name="firstname" name="firstname"
value={customerData.firstname} value={customerData.firstname}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<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 <input
type="text" type="text"
name="lastname" name="lastname"
value={customerData.lastname} value={customerData.lastname}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<div> <div>
<label className="block text-d1d5db font-medium text-d1d5db">age:</label> <label className="block text-gray-800 font-medium">Age:</label>
<input <input
type="number" type="number"
name="age" name="age"
value={customerData.age} value={customerData.age}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<div> <div>
<label className="block text-d1d5db font-medium text-d1d5db">gender:</label> <label className="block text-gray-800 font-medium">Gender:</label>
<select <select
name="gender" name="gender"
value={customerData.gender} value={customerData.gender}
onChange={handleInputChange} 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="" 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="block text-d1d5db font-medium text-d1d5db">email:</label> <label className="block text-gray-800 font-medium">Email:</label>
<input <input
type="email" type="email"
name="email" name="email"
value={customerData.email} value={customerData.email}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<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 <input
type="text" type="text"
name="address" name="address_line_1"
value={customerData.address} value={customerData.address_line_1}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<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 <input
type="text" type="text"
name="mobile" name="mobile"
value={customerData.mobile} value={customerData.mobile}
onChange={handleInputChange} onChange={handleInputChange}
className="input-underline" className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
/> />
</div> </div>
<br /> <br />
<div className="text-center"> <div className="text-center">
<button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold text-sm"> <button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm">
save information Save Information
</button> </button>
</div> </div>
</form> </form>

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

@ -34,7 +34,7 @@ const CustomerList = () => {
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-gray-800">Customers List</h1> <h1 className="text-2xl font-semibold text-gray-800">Customers List</h1>
<button <button
className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm"
onClick={handleAddCustomer} onClick={handleAddCustomer}
> >
Add New Customer Add New Customer

4
src/components/sidebar/AdminSidebar.jsx
View File

@ -44,7 +44,7 @@ const AdminSidebar = () => {
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center"> <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" /> <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
</Link> </Link>
<Link to="/admin/categories" className="my-6"> <Link to="/admin/categories" className="my-6">
@ -59,7 +59,7 @@ const AdminSidebar = () => {
<Link to="/admin/catalog" className="my-6"> <Link to="/admin/catalog" className="my-6">
<img src={CatalogIcon} alt="Catalog" className="hover:opacity-75 sidebar-icon" /> <img src={CatalogIcon} alt="Catalog" className="hover:opacity-75 sidebar-icon" />
</Link> </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" /> <img src={EmployeeIcon} alt="Employee" className="hover:opacity-75 sidebar-icon" />
</Link> </Link>
<Link to="/admin/measurements" className="my-6"> <Link to="/admin/measurements" className="my-6">