Adding api call function to add-customer

db.json

@@ -66,6 +66,33 @@
       "name": "Customer 2",
       "email": "customer2@example.com",
       "phone": "0987654321"
+    },
+    {
+      "name": "Suraj Birewar",
+      "age": "24",
+      "gender": "Male",
+      "email": "surajbirewar001@gmail.com",
+      "address": "Bavdhan, Pune",
+      "mobile": "07559393995",
+      "id": 3
+    },
+    {
+      "name": "rahul",
+      "age": "21",
+      "gender": "male",
+      "email": "rahul001@gmail.com",
+      "address": "Bavdhan, Pune",
+      "mobile": "7559393995",
+      "id": 4
+    },
+    {
+      "name": "atharv",
+      "age": "19",
+      "gender": "male",
+      "email": "atharv@gmail.com",
+      "address": "baner pune ",
+      "mobile": "784365873",
+      "id": 5
     }
   ]
 }

src/components/categories/CategoryList.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import axiosInstance from '../../api/axiosConfig'; 
+import Sidebar from '../sidebar/Sidebar';
+
+const CategoryList = () => {
+  const [categories, setCategories] = useState([]);
+
+  useEffect(() => {
+    axios.get('http://localhost:3001/categories')
+      .then(response => {
+        setCategories(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching categories:', error);
+      });
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-10">
+      <h1 className="text-4xl font-bold mb-8">Categories</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-6">
+        {categories.map(category => (
+          <Link key={category.id} to={`/products/${category.name}`}>
+            <div className="bg-gray-800 rounded-lg p-6 flex flex-col items-center hover:bg-gray-700 transition">
+              <img src={`/images/${category.name}.png`} alt={category.name} className="w-32 h-32 mb-4" />
+              <h2 className="text-2xl font-semibold">{category.name}</h2>
+              <p className="text-gray-400">click to view products</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoryList;

src/components/categories/ProductList.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+
+const ProductList = () => {
+  const { category } = useParams();
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    axios.get(`http://localhost:3001/products?category=${category}`)
+      .then(response => {
+        setProducts(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching products:', error);
+      });
+  }, [category]);
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-10">
+      <h1 className="text-4xl font-bold mb-8">Products in {category}</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {products.map(product => (
+          <div key={product.id} className="bg-gray-800 rounded-lg p-6 flex flex-col items-center">
+            <h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
+            <p className="text-gray-400">Price: ${product.price}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProductList;

src/components/customer/AddCustomer.jsx

@@ -1,36 +1,36 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import axiosInstance from '../../api/axiosConfig';  
-
 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({
     name: '',
     age: '',
     gender: '',
     email: '',
     address: '',
-    mobileNo: ''
+    mobile: '',
   });
 
-  const handleChange = (e) => {
+  const handleInputChange = (e) => {
     const { name, value } = e.target;
     setCustomerData({
       ...customerData,
-      [name]: value
+      [name]: value,
     });
   };
 
-  const handleSubmit = async (e) => {
+  const handleAddCustomerSubmit = async (e) => {
     e.preventDefault();
     try {
-      const response = await axiosInstance.post('/api/customers', customerData);
+      const response = await axiosInstance.post('http://localhost:5000/customers', customerData);
-      console.log('Customer data saved:', response.data);
+      navigate('/customers');
-      
     } catch (error) {
-      console.error('Error saving customer data:', error);
+      console.error(error);
-      
     }
   };
 
@@ -41,10 +41,9 @@ const AddCustomer = () => {
         <div className="min-h-screen text-gray-300 p-6">
           <div className="flex justify-between items-center mb-6">
             <h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
-            <Link to="/" className="text-orange-500">skip for now</Link>
+            <Link to="/" className="text-orange-500">Skip for now</Link>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {/* Sidebar */}
             <div className="space-y-6">
               <div className="text-center">
                 <div className="inline-block relative">
@@ -63,18 +62,16 @@ const AddCustomer = () => {
                 </Link>
               </div>
             </div>
-            {/* Form */}
             <div className="md:col-span-2 space-y-4">
-              <form onSubmit={handleSubmit}>
+              <form onSubmit={handleAddCustomerSubmit}>
                 <div>
                   <label className="block text-sm font-medium text-black-700">Customer Name:</label>
                   <input
                     type="text"
                     name="name"
                     value={customerData.name}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     className="input-underline"
-                    required
                   />
                 </div>
                 <div>
@@ -83,21 +80,23 @@ const AddCustomer = () => {
                     type="number"
                     name="age"
                     value={customerData.age}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     className="input-underline"
-                    required
                   />
                 </div>
                 <div>
                   <label className="block text-sm font-medium text-black-700">Gender:</label>
-                  <input
+                  <select
-                    type="text"
                     name="gender"
                     value={customerData.gender}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     className="input-underline"
-                    required
+                  >
-                  />
+                    <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-sm font-medium text-black-700">Email:</label>
@@ -105,9 +104,8 @@ const AddCustomer = () => {
                     type="email"
                     name="email"
                     value={customerData.email}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     className="input-underline"
-                    required
                   />
                 </div>
                 <div>
@@ -116,25 +114,23 @@ const AddCustomer = () => {
                     type="text"
                     name="address"
                     value={customerData.address}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     className="input-underline"
-                    required
                   />
                 </div>
                 <div>
                   <label className="block text-sm font-medium text-black-700">Mobile No:</label>
                   <input
                     type="text"
-                    name="mobileNo"
+                    name="mobile"
-                    value={customerData.mobileNo}
+                    value={customerData.mobile}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     className="input-underline"
-                    required
                   />
-                </div> <br/>
+                </div>
+                <br />
                 <div className="text-center">
                   <button type="submit" className="bg-orange-500 text-black px-4 py-2 rounded-md font-semibold text-sm">
-                   
                     Save Information
                   </button>
                 </div>

src/components/customer/CustomerList.jsx

@@ -1,19 +1,27 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Sidebar from '../sidebar/Sidebar';
-
+import axiosInstance from '../../api/axiosConfig'; 
 const CustomerList = () => {
   const [customers, setCustomers] = useState([]);
   const navigate = useNavigate();
 
   useEffect(() => {
     // Fetch the customers data from the JSON file
-    fetch('/customers.json')
+    getCustomers()
-      .then((response) => response.json())
-      .then((data) => setCustomers(data))
-      .catch((error) => console.error('Error fetching customers:', error));
   }, []);
 
+  const getCustomers = async () => {
+    try {
+      const response = await axiosInstance.get('http://localhost:5000/customers');
+      let customers_data = response.data; // List of customers
+      setCustomers(customers_data)
+    } catch (error) {
+      throw error;
+    }
+  };
+  
+
   const handleAddCustomer = () => {
     navigate('/add-customer');
   };

src/components/customer/CustomerMeasurements.jsx

@@ -28,7 +28,7 @@ const CustomerMeasurements = () => {
         <div className="min-h-screen text-gray-300 p-6">
           <div className="flex justify-between items-center mb-6">
             <h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
-            <Link to="/" className="text-orange-500">skip for now</Link>
+            <Link to="/CategoryList" className="text-orange-500">skip for now</Link>
           </div>
           <Form onFinish={onFinish} className="space-y-4">
             <h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>

src/components/sidebar/AdminSidebar.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import { Layout, Button } from 'antd';
+import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
-import './Sidebar.css';
-
-const { Sider } = Layout;
-
 
+// Import your SVG icons
 import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
 import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
 import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
@@ -16,41 +12,49 @@ import MeasurmentsIcon from '../../assets/thob-data/MeasurmentsIcon.svg';
 import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
 import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
 
-const AdminSidebar = () => {
+const Sidebar = () => {
+  const navigate = useNavigate();
+
+  const handleNavigation = (link) => {
+    navigate(link);
+  };
+
   return (
-    <Sider width={60} className="sidebar">
+    <div className="flex">
-      <div className="logo">t.</div>
+      <div className="w-16 min-h-screen bg-black flex flex-col items-center py-4">
-      <div className="menu">
+        <div className="text-orange-500 text-4xl mb-10">t.</div>
-        <Link to="/admin-dashboard">
+        <nav className="flex flex-col items-center space-y-4">
-          <Button type="link" icon={<HomeIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin-dashboard')} className="cursor-pointer">
-        </Link>
+            <img src={HomeIcon} alt="Home" className="w-8 h-8" />
-        <Link to="/admin/manage-customers">
+          </div>
-          <Button type="link" icon={<AddCustomerIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/manage-customers')} className="cursor-pointer">
-        </Link>
+            <img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
-        <Link to="/admin/orders">
+          </div>
-          <Button type="link" icon={<OrdersIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/orders')} className="cursor-pointer">
-        </Link>
+            <img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
-        <Link to="/admin/categories">
+          </div>
-          <Button type="link" icon={<CategoriesIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/categories')} className="cursor-pointer">
-        </Link>
+            <img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
-        <Link to="/admin/catalog">
+          </div>
-          <Button type="link" icon={<CatalogIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/catalog')} className="cursor-pointer">
-        </Link>
+            <img src={CatalogIcon} alt="Catalog" className="w-8 h-8" />
-        <Link to="/admin/employees">
+          </div>
-          <Button type="link" icon={<EmployeeIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/employee')} className="cursor-pointer">
-        </Link>
+            <img src={EmployeeIcon} alt="employee" className="w-8 h-8" />
-        <Link to="/admin/measurements">
+          </div>
-          <Button type="link" icon={<MeasurmentsIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/measurements')} className="cursor-pointer">
-        </Link>
+            <img src={MeasurmentsIcon} alt="measurements" className="w-8 h-8" />
-        <Link to="/admin/profile">
+          </div>
-          <Button type="link" icon={<ProfileIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/profile')} className="cursor-pointer">
-        </Link>
+            <img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
-        <Link to="/admin/logout">
+          </div>
-          <Button type="link" icon={<LogoutIcon />} className="menu-item" />
+          <div onClick={() => handleNavigation('/admin/logout')} className="cursor-pointer mt-auto mb-4">
-        </Link>
+            <img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
+          </div>
+        </nav>
+      </div>
     </div>
-    </Sider>
   );
 };
 
-export default AdminSidebar;
+export default Sidebar;

src/components/sidebar/EmployeeSidebar.jsx

@@ -12,7 +12,6 @@ import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
 import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
 import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
 
-
 const { Sider } = Layout;
 
 const EmployeeSidebar = () => {
@@ -28,46 +27,12 @@ const EmployeeSidebar = () => {
 
   return (
     <>
-      <Button
+      
-        className="menu-button"
-        type="primary"
-        onClick={showDrawer}
-        icon={visible ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-      />
-      <Drawer
-        title="Menu"
-        placement="left"
-        onClose={closeDrawer}
-        visible={visible}
-        bodyStyle={{ padding: 0 }}
-        width={200}
-      >
-        <div className="drawer-menu">
-          <Link to="/employee-dashboard" className="drawer-link">
-            <img src={HomeIcon} alt="Home" className="drawer-icon" />
-          </Link>
-          <Link to="/employee/categories" className="drawer-link">
-            <img src={CategoriesIcon} alt="Categories" className="drawer-icon" />
-          </Link>
-          <Link to="/employee/manage-customers" className="drawer-link">
-            <img src={AddCustomerIcon} alt="Add Customer" className="drawer-icon" />
-          </Link>
-          <Link to="/employee/orders" className="drawer-link">
-            <img src={OrdersIcon} alt="Orders" className="drawer-icon" />
-          </Link>
-          <Link to="/employee/profile" className="drawer-link">
-            <img src={ProfileIcon} alt="Profile" className="drawer-icon" />
-          </Link>
-          <Link to="/employee/logout" className="drawer-link">
-            <img src={LogoutIcon} alt="Logout" className="drawer-icon" />
-          </Link>
-        </div>
-      </Drawer>
       <Sider
         className="desktop-sidebar"
         breakpoint="lg"
         collapsedWidth="0"
-        width={200}
+        width={80}
         style={{ height: '100vh' }}
       >
         <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
@@ -99,3 +64,7 @@ const EmployeeSidebar = () => {
 };
 
 export default EmployeeSidebar;
+
+
+
+

src/components/sidebar/Sidebar.jsx

@@ -2,51 +2,13 @@ import React, { useContext } from 'react';
 import AdminSidebar from './AdminSidebar';
 import EmployeeSidebar from './EmployeeSidebar';
 import { AuthContext } from '../../contexts/AuthContext';
-import { useNavigate } from 'react-router-dom';
 
-// Import your SVG icons
-import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
-import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
-import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
-import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
-import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
-import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
-
-  const handleNavigation = async (e, link) => {
-    e.preventDefault();
-    window.location = link
-  };
 const Sidebar = () => {
-  //const { user } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
-  //if (!user) return null;
+
-  // return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
+  if (!user) return null;
-  return (
+
-    <div className="flex">
+  return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
-      <div className=" w-16 min-h-screen flex flex-col items-center">
-        <div className="text-white text-4xl mt-4">t.</div>
-        <nav className="mt-10">
-          <div onClick={() => handleNavigation("/admin-dashboard")} className="block mb-4">
-            <img src={HomeIcon} alt="Home" className="w-8 h-8" />
-          </div>
-          <div onClick={() => handleNavigation("/admin/categories")} className="block mb-4">
-            <img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
-          </div>
-          <div onClick={() => handleNavigation("/admin/manage-customers")} className="block mb-4">
-            <img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
-          </div>
-          <div onClick={() => handleNavigation("/admin/orders")} className="block mb-4">
-            <img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
-          </div>
-          <div onClick={() => handleNavigation("/admin/profile")} className="block mb-4">
-            <img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
-          </div>
-          <div onClick={() => handleNavigation("/admin/logout")} className="block mb-4">
-            <img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
-          </div>
-        </nav>
-      </div>
-    </div>
-  );
 };
 
 export default Sidebar;

src/index.css

@@ -64,3 +64,10 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.input-underline {
+  @apply w-full border-b-2 border-gray-300 focus:border-orange-500 outline-none;
+  max-width: 300px; /* Set a fixed max-width for uniformity */
+  padding: 0.5rem;
+}
+