From dddd1b7ea2466f74c7b738391a0e0d226fd483e5 Mon Sep 17 00:00:00 2001
From: surajb <surajbirewar001@gmail.com>
Date: Thu, 18 Jul 2024 15:14:17 +0530
Subject: [PATCH] changes done in Addemployee page and AddCustomer page

---
 db.json                                  |  28 +++++
 src/components/admin/AddEmployee.jsx     | 102 +++++++++++++---
 src/components/customer/AddCustomer.jsx  | 142 ++++++++++++++++-------
 src/components/customer/CustomerList.jsx |   2 +-
 src/components/sidebar/AdminSidebar.jsx  |   4 +-
 5 files changed, 218 insertions(+), 60 deletions(-)

diff --git a/db.json b/db.json
index 873cc9b..643c579 100644
--- a/db.json
+++ b/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"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/components/admin/AddEmployee.jsx b/src/components/admin/AddEmployee.jsx
index 0a0444a..d5be7f3 100644
--- a/src/components/admin/AddEmployee.jsx
+++ b/src/components/admin/AddEmployee.jsx
@@ -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>
diff --git a/src/components/customer/AddCustomer.jsx b/src/components/customer/AddCustomer.jsx
index 945b1ae..763281b 100644
--- a/src/components/customer/AddCustomer.jsx
+++ b/src/components/customer/AddCustomer.jsx
@@ -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>
diff --git a/src/components/customer/CustomerList.jsx b/src/components/customer/CustomerList.jsx
index 7d12b5e..30929d1 100644
--- a/src/components/customer/CustomerList.jsx
+++ b/src/components/customer/CustomerList.jsx
@@ -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
diff --git a/src/components/sidebar/AdminSidebar.jsx b/src/components/sidebar/AdminSidebar.jsx
index aafcd6b..4d604b5 100644
--- a/src/components/sidebar/AdminSidebar.jsx
+++ b/src/components/sidebar/AdminSidebar.jsx
@@ -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">