It17134804 w.w.s.bhagya

src/App.jsx

@@ -1,35 +1,13 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import FertilizerAppRoutes from "./routes/FertilizerAppRoutes";
+import './App.css';
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+    <div>
+        <FertilizerAppRoutes/>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/Navbar.css

@@ -0,0 +1,104 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #008CBA;
+    height: 60px;
+    padding: 0 20px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    font-family: 'Montserrat', sans-serif;
+  }
+
+  .navbar__left {
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar__logo {
+    font-size: 24px;
+    font-weight: bold;
+    color: #fff;
+    text-decoration: none;
+  }
+
+  .navbar__right {
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar__item {
+    margin-left: 20px;
+  }
+
+  .navbar__link {
+    font-size: 16px;
+    color: #fff;
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  .navbar__link:hover {
+    background-color: #fff;
+    color: #008CBA;
+  }
+
+
+
+
+
+  .navbar__item:hover .dropdown-menu {
+    display: block;
+  }
+
+  .dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  }
+
+  .dropdown-menu li:hover {
+    background-color: #f5f5f5;
+  }
+
+  .dropdown-menu li a:hover {
+    color: #333;
+    text-decoration: none;
+  }
+
+  .dropdown-menu {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+    padding: 10px;
+    min-width: 150px;
+  }
+
+  .dropdown-menu li {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .dropdown-menu li a {
+    color: #333;
+    text-decoration: none;
+  }
+
+  .dropdown-menu li a:hover {
+    color: #007bff;
+  }
+

src/components/Navbar.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import "./Navbar.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+
+
+function Navbar() {
+  return (
+    <nav className="navbar">
+
+  <div className="navbar__left">
+    <Link to="/" className="navbar__logo">Green Store</Link>
+  </div>
+  <ul className="navbar__right">
+    <li className="navbar__item">
+      <Link to="/" className="navbar__link">Home</Link>
+    </li>
+    <li className="navbar__item dropdown">
+      <a href="#" className="navbar__link dropdown-toggle" data-toggle="dropdown">Seeds<span className="caret"></span></a>
+      <ul className="dropdown-menu">
+        <li><Link to="/seeds">View Seeds</Link></li>
+        <li><Link to="/add-seeds">Add Seeds</Link></li>
+      </ul>
+    </li>
+    <li className="navbar__item dropdown">
+      <a href="#" className="navbar__link dropdown-toggle" data-toggle="dropdown">Vegetables<span className="caret"></span></a>
+      <ul className="dropdown-menu">
+        <li><Link to="/vegetables">View Vegetables</Link></li>
+        <li><Link to="/add-vegetables">Add Vegetables</Link></li>
+      </ul>
+    </li>
+    <li className="navbar__item dropdown">
+      <a href="#" className="navbar__link dropdown-toggle" data-toggle="dropdown">Fertilizers<span className="caret"></span></a>
+      <ul className="dropdown-menu">
+        <li><Link to="/view">View Fertilizers</Link></li>
+        <li><Link to="/add">Add Fertilizers</Link></li>
+        <li><Link to="/report">Generate Fertilizer</Link></li>
+      </ul>
+    </li>
+    <li className="navbar__item">
+      <Link to="/login" className="navbar__link">Login</Link>
+    </li>
+    <li className="navbar__item">
+      <Link to="/register" className="navbar__link">Register</Link>
+    </li>
+  </ul>
+</nav>
+
+  );
+}
+
+export default Navbar;

src/components/customer/CustomerEdit.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import "../../styles/customer/CustomerRegistrationForm.css";
+import axios from 'axios';
+import { Link, useParams } from 'react-router-dom';
+
+export default function CustomerEditForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [city, setCity] = useState('');
+  const [state, setState] = useState('');
+  const [zipCode, setZipCode] = useState('');
+
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const response = await axios.get(`http://localhost:8070/customers/${id}`);
+        const userData = response.data;
+        setName(userData.name);
+        setEmail(userData.email);
+        setPassword(userData.password);
+        setCity(userData.city);
+        setState(userData.state);
+        setZipCode(userData.zipCode);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    fetchUserData();
+  }, [id]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const updatedCustomer = { name, email, password, city, state, zipCode };
+      const response = await axios.patch(`http://localhost:8070/customers/${id}`, updatedCustomer);
+      console.log(response);
+      alert(`${updatedCustomer.name} Updated`);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+
+  return (
+    <div>
+      <Link className="nav-navbar__link" to="/customers">View Customers</Link>
+
+      <h1>Update Data</h1>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Name:
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+        <label>
+          Email:
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required/>
+        </label>
+        <label>
+          Password:
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required/>
+        </label>
+        <label>
+          City:
+          <input type="text" value={city} onChange={(e) => setCity(e.target.value)} required/>
+        </label>
+        <label>
+          State:
+          <input type="text" value={state} onChange={(e) => setState(e.target.value)} required/>
+        </label>
+        <label>
+          Zip Code:
+          <input type="text" value={zipCode} onChange={(e) => setZipCode(e.target.value)} required/>
+        </label>
+        <button type="submit">Submit</button>
+
+      </form>
+    </div>
+  );
+}

src/components/customer/CustomerList.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+function CustomerList() {
+  const [customers, setCustomers] = useState([]);
+
+  useEffect(() => {
+    axios.get('http://localhost:8070/customers/')
+      .then(response => {
+        setCustomers(response.data);
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }, []);
+
+  const handleDelete = (id) => {
+    axios.delete(`http://localhost:8070/customers/${id}`)
+      .then(() => {
+        setCustomers(customers => customers.filter(customer => customer._id !== id));
+        alert("Customer deleted successfully");
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+
+  return (
+    <div className="container">
+      <h1>Customers</h1>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>City</th>
+            <th>State</th>
+            <th>Zip Code</th>
+            <th>Action</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {customers.map(customer => {
+            return (
+              <tr key={customer._id}>
+                <td>{customer.name}</td>
+                <td>{customer.email}</td>
+                <td>{customer.city}</td>
+                <td>{customer.state}</td>
+                <td>{customer.zipCode}</td>
+                <td>
+                  <Link to={`/customers/${customer._id}`}>Show Details</Link>   
+                </td>
+                <td>
+                <button onClick={() => handleDelete(customer._id)}>Delete</button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default CustomerList;