create-cedro-app 1.0.2 → 1.0.3

package/templates/invoice-service-management-system/client/src/components/Customer.jsx

@@ -0,0 +1,326 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
+function Customers() {
+
+  const token = localStorage.getItem("token");
+
+  const navigate = useNavigate();
+
+ 
+  useEffect(() => {
+
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      navigate("/");
+    }
+
+  }, []);
+
+
+  const [customers, setCustomers] = useState([]);
+
+  const [values, setValues] = useState({
+    FirstName: "",
+    LastName: "",
+    Address: "",
+    Telephone: "",
+    VehiclePlateNumber: "",
+    VehicleType: "",
+    ServiceDate: ""
+  });
+
+ 
+  const fetchCustomers = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectcustomers",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setCustomers(res.data || []);
+
+    } catch (error) {
+
+      console.log(error);
+
+      toast.error("Failed to load customers");
+    }
+  };
+
+  useEffect(() => {
+
+    fetchCustomers();
+
+  }, []);
+
+  // =========================
+  // INSERT CUSTOMER
+  // =========================
+  const handleSubmit = async (e) => {
+
+    e.preventDefault();
+
+    try {
+
+      await axios.post(
+        "http://localhost:3000/addcustomer",
+        values,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      toast.success("Customer added successfully");
+
+      // RESET FORM
+      setValues({
+        FirstName: "",
+        LastName: "",
+        Address: "",
+        Telephone: "",
+        VehiclePlateNumber: "",
+        VehicleType: "",
+        ServiceDate: ""
+      });
+
+      fetchCustomers();
+
+    } catch (error) {
+
+      toast.error(
+        error.response?.data?.Error ||
+        "Error inserting customer"
+      );
+    }
+  };
+
+  return (
+
+    <div className="p-6">
+
+      {/* FORM */}
+      <div className="bg-white p-6 rounded-xl shadow-md mb-6">
+
+        <h2 className="text-2xl font-bold mb-4 text-indigo-600">
+          Customer Registration
+        </h2>
+
+        <form
+          onSubmit={handleSubmit}
+          className="grid grid-cols-1 md:grid-cols-2 gap-4"
+        >
+
+         
+          <input
+            type="text"
+            placeholder="First Name"
+            className="border p-3 rounded"
+            value={values.FirstName}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                FirstName: e.target.value
+              })
+            }
+          />
+
+       
+          <input
+            type="text"
+            placeholder="Last Name"
+            className="border p-3 rounded"
+            value={values.LastName}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                LastName: e.target.value
+              })
+            }
+          />
+
+          
+          <input
+            type="text"
+            placeholder="Address"
+            className="border p-3 rounded"
+            value={values.Address}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Address: e.target.value
+              })
+            }
+          />
+
+      
+          <input
+            type="text"
+            placeholder="Telephone"
+            className="border p-3 rounded"
+            value={values.Telephone}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Telephone: e.target.value
+              })
+            }
+          />
+
+        
+          <input
+            type="text"
+            placeholder="Vehicle Plate Number"
+            className="border p-3 rounded"
+            value={values.VehiclePlateNumber}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                VehiclePlateNumber: e.target.value
+              })
+            }
+          />
+
+       
+          <input
+            type="text"
+            placeholder="Vehicle Type"
+            className="border p-3 rounded"
+            value={values.VehicleType}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                VehicleType: e.target.value
+              })
+            }
+          />
+
+         
+          <input
+            type="date"
+            className="border p-3 rounded"
+            value={values.ServiceDate}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                ServiceDate: e.target.value
+              })
+            }
+          />
+
+        
+          <button
+            className="bg-indigo-600 text-white p-3 rounded hover:bg-indigo-700 md:col-span-2"
+          >
+            Save Customer
+          </button>
+
+        </form>
+
+      </div>
+
+   
+      <div className="bg-white p-6 rounded-xl shadow-md">
+
+        <h2 className="text-xl font-bold mb-4">
+          Customer List
+        </h2>
+
+        <table className="w-full border">
+
+          <thead className="bg-gray-100">
+
+            <tr>
+
+              <th className="p-2">First Name</th>
+
+              <th className="p-2">Last Name</th>
+
+              <th className="p-2">Telephone</th>
+
+              <th className="p-2">Plate Number</th>
+
+              <th className="p-2">Vehicle Type</th>
+
+              <th className="p-2">Service Date</th>
+
+            </tr>
+
+          </thead>
+
+          <tbody>
+
+            {customers.length > 0 ? (
+
+              customers.map((customer) => (
+
+                <tr
+                  key={customer.CustomerId}
+                  className="text-center border-t"
+                >
+
+                  <td className="p-2">
+                    {customer.FirstName}
+                  </td>
+
+                  <td className="p-2">
+                    {customer.LastName}
+                  </td>
+
+                  <td className="p-2">
+                    {customer.Telephone}
+                  </td>
+
+                  <td className="p-2">
+                    {customer.VehiclePlateNumber}
+                  </td>
+
+                  <td className="p-2">
+                    {customer.VehicleType}
+                  </td>
+
+                  <td className="p-2">
+                    {customer.ServiceDate}
+                  </td>
+
+                </tr>
+
+              ))
+
+            ) : (
+
+              <tr>
+
+                <td
+                  colSpan="6"
+                  className="text-center p-4 text-gray-500"
+                >
+                  No customers found
+                </td>
+
+              </tr>
+
+            )}
+
+          </tbody>
+
+        </table>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Customers;