create-cedro-app 1.0.2 → 1.0.3

package/templates/slot-car-management-system/client/src/components/Login.jsx

@@ -0,0 +1,170 @@
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { Wrench, Mail, Lock } from "lucide-react";
+
+function Login() {
+
+  const navigate = useNavigate();
+
+  const [error, setError] = useState("");
+
+  const [values, setValues] = useState({
+    Email: "",
+    Password: ""
+  });
+
+  // =========================
+  // LOGIN HANDLER
+  // =========================
+  const HandleLogin = async (e) => {
+
+    e.preventDefault();
+
+    
+
+       await axios.post(
+        "http://localhost:3000/login",
+        values
+      )
+      .then((res)=>{
+            // SAVE TOKEN
+      localStorage.setItem(
+        "token",
+        res.data.token
+      );
+
+      console.log(res.data);
+
+      toast.success(res.data.Message);
+
+      navigate("/dashboard");
+      })
+
+     
+
+     .catch((error)=>{
+setError(error.response?.data?.Error);
+
+      toast.error(
+        error.response?.data?.Error
+      );
+    })
+
+      
+  }
+  
+
+
+  return (
+
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+
+      <form
+        onSubmit={HandleLogin}
+        className="w-[420px] bg-white rounded-3xl shadow-2xl p-10 border-t-[6px] border-indigo-600"
+      >
+
+        <div className="text-center mb-8">
+
+          <div className="flex justify-center mb-3">
+            <Wrench
+              size={45}
+              className="text-indigo-600"
+            />
+          </div>
+
+          <h2 className="text-3xl font-bold text-gray-800">
+            SmartPark Login
+          </h2>
+
+          <p className="text-gray-500 mt-2">
+            Car Repair Payment Management System
+          </p>
+
+        </div>
+
+
+        {/* ERROR */}
+        {
+          error &&
+          <p className="text-red-500 mb-4">
+            {error}
+          </p>
+        }
+
+
+        {/* EMAIL */}
+        <div className="mb-4 relative">
+
+          <Mail className="absolute top-3 left-3 text-gray-400" />
+
+          <input
+            type="email"
+            placeholder="Enter Email"
+            className="w-full border pl-10 p-3 rounded-xl"
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Email: e.target.value
+              })
+            }
+            required
+          />
+
+        </div>
+
+
+        {/* PASSWORD */}
+        <div className="mb-6 relative">
+
+          <Lock className="absolute top-3 left-3 text-gray-400" />
+
+          <input
+            type="password"
+            placeholder="Enter Password"
+            className="w-full border pl-10 p-3 rounded-xl"
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Password: e.target.value
+              })
+            }
+            required
+          />
+
+        </div>
+
+
+        {/* BUTTON */}
+        <button
+          type="submit"
+          className="w-full bg-indigo-600 text-white p-3 rounded-xl"
+        >
+          Login to System
+        </button>
+
+
+        {/* REGISTER */}
+        <p className="mt-6 text-center text-gray-600">
+
+          No account?
+
+          <Link
+            to="/register"
+            className="text-indigo-600 font-semibold ml-2"
+          >
+            Register
+          </Link>
+
+        </p>
+
+      </form>
+
+    </div>
+  );
+}
+
+export default Login;

package/templates/slot-car-management-system/client/src/components/PageNotFound.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function PageNotFound() {
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-gray-200'>
+      <h2 className='text-red-700 text-[90px]'>Page Not Found  <span>404</span></h2>
+    </div>
+  )
+}
+
+export default PageNotFound

package/templates/slot-car-management-system/client/src/components/ParkingRecord.jsx

@@ -0,0 +1,553 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import {
+  Trash2,
+  Pencil,
+  CarFront,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+function ParkingRecord() {
+
+  const token = localStorage.getItem("token");
+
+  const navigate = useNavigate();
+
+  // =========================
+  // CHECK TOKEN
+  // =========================
+  useEffect(() => {
+
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      navigate("/");
+    }
+
+  }, [navigate]);
+
+
+
+  // =========================
+  // STATES
+  // =========================
+  const [cars, setCars] = useState([]);
+
+  const [slots, setSlots] = useState([]);
+
+  const [records, setRecords] = useState([]);
+
+  const [editId, setEditId] = useState(null);
+
+  const [values, setValues] = useState({
+    PlateNumber: "",
+    SlotNumber: "",
+    EntryTime: "",
+    ExitTime: ""
+  });
+
+
+
+  // =========================
+  // FETCH CARS
+  // =========================
+  const fetchCars = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectcars",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setCars(res.data || []);
+
+    } catch (error) {
+
+      toast.error("Failed to load cars");
+    }
+  };
+
+
+
+  // =========================
+  // FETCH SLOTS
+  // =========================
+  const fetchSlots = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectservices",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setSlots(res.data || []);
+
+    } catch (error) {
+
+      toast.error("Failed to load parking slots");
+    }
+  };
+
+
+
+  // =========================
+  // FETCH RECORDS
+  // =========================
+  const fetchRecords = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectparkingrecords",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setRecords(res.data || []);
+
+    } catch (error) {
+
+      toast.error("Failed to load parking records");
+    }
+  };
+
+
+
+  // =========================
+  // LOAD DATA
+  // =========================
+  useEffect(() => {
+
+    fetchCars();
+
+    fetchSlots();
+
+    fetchRecords();
+
+  }, []);
+
+
+
+  // =========================
+  // INSERT / UPDATE
+  // =========================
+  const handleSubmit = async (e) => {
+
+    e.preventDefault();
+
+    try {
+
+      // UPDATE
+      if (editId) {
+
+        await axios.put(
+          `http://localhost:3000/updateparkingrecords/${editId}`,
+          values,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          }
+        );
+
+        toast.success("Parking record updated");
+
+        setEditId(null);
+
+      } else {
+
+        // INSERT
+        await axios.post(
+          "http://localhost:3000/insertparkingrecords",
+          values,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          }
+        );
+
+        toast.success("Parking record created");
+      }
+
+      // RESET FORM
+      setValues({
+        PlateNumber: "",
+        SlotNumber: "",
+        EntryTime: "",
+        ExitTime: ""
+      });
+
+      fetchRecords();
+
+    } catch (error) {
+
+      toast.error(
+        error.response?.data?.Error ||
+        "Error saving parking record"
+      );
+    }
+  };
+
+
+
+  // =========================
+  // DELETE
+  // =========================
+  const deleteRecord = async (id) => {
+
+    try {
+
+      await axios.delete(
+        `http://localhost:3000/deleteparkingrecords/${id}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      toast.success("Parking record deleted");
+
+      fetchRecords();
+
+    } catch (error) {
+
+      toast.error("Delete failed");
+    }
+  };
+
+
+
+  // =========================
+  // EDIT
+  // =========================
+  const editRecord = (rec) => {
+
+    setValues({
+      PlateNumber: rec.PlateNumber,
+      SlotNumber: rec.SlotNumber,
+      EntryTime: rec.EntryTime,
+      ExitTime: rec.ExitTime
+    });
+
+    setEditId(rec.recordNumber);
+  };
+
+
+
+  return (
+
+    <div className="p-6">
+
+      {/* HEADER */}
+      <div className="mb-6">
+
+        <h1 className="text-3xl font-bold text-gray-800">
+          Parking Records
+        </h1>
+
+        <p className="text-gray-500 mt-1">
+          Manage car parking entry and exit records
+        </p>
+
+      </div>
+
+
+
+      {/* FORM */}
+      <div className="bg-white p-8 rounded-2xl shadow-lg mb-8 border">
+
+        <div className="flex items-center gap-3 mb-6">
+
+          <CarFront
+            className="text-indigo-600"
+            size={30}
+          />
+
+          <h2 className="text-2xl font-bold text-indigo-600">
+
+            {editId
+              ? "Update Parking Record"
+              : "Add Parking Record"}
+
+          </h2>
+
+        </div>
+
+
+
+        <form
+          onSubmit={handleSubmit}
+          className="grid grid-cols-1 md:grid-cols-2 gap-5"
+        >
+
+          {/* CAR */}
+          <select
+            className="border p-3 rounded-xl"
+            value={values.PlateNumber}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                PlateNumber: e.target.value
+              })
+            }
+            required
+          >
+
+            <option value="">
+              Select Car
+            </option>
+
+            {cars.map((car) => (
+
+              <option
+                key={car.PlateNumber}
+                value={car.PlateNumber}
+              >
+
+                {car.PlateNumber}
+
+              </option>
+
+            ))}
+
+          </select>
+
+
+
+          {/* SLOT */}
+          <select
+            className="border p-3 rounded-xl"
+            value={values.SlotNumber}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                SlotNumber: e.target.value
+              })
+            }
+            required
+          >
+
+            <option value="">
+              Select Parking Slot
+            </option>
+
+            {slots.map((slot) => (
+
+              <option
+                key={slot.SlotNumber}
+                value={slot.SlotNumber}
+              >
+
+                {slot.SlotNumber}
+
+              </option>
+
+            ))}
+
+          </select>
+
+
+
+          {/* ENTRY TIME */}
+          <input
+            type="datetime-local"
+            className="border p-3 rounded-xl"
+            value={values.EntryTime}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                EntryTime: e.target.value
+              })
+            }
+            required
+          />
+
+
+
+          {/* EXIT TIME */}
+          <input
+            type="datetime-local"
+            className="border p-3 rounded-xl"
+            value={values.ExitTime}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                ExitTime: e.target.value
+              })
+            }
+            required
+          />
+
+
+
+          {/* BUTTON */}
+          <button
+            className={`text-white p-3 rounded-xl font-semibold ${
+              editId
+                ? "bg-green-600 hover:bg-green-700"
+                : "bg-indigo-600 hover:bg-indigo-700"
+            }`}
+          >
+
+            {editId
+              ? "Update Record"
+              : "Save Record"}
+
+          </button>
+
+        </form>
+
+      </div>
+
+
+
+      {/* TABLE */}
+      <div className="bg-white rounded-2xl shadow-lg overflow-hidden border">
+
+        <div className="p-6 border-b">
+
+          <h2 className="text-2xl font-bold">
+            Parking Records List
+          </h2>
+
+        </div>
+
+
+
+        <table className="w-full">
+
+          <thead className="bg-gray-100">
+
+            <tr>
+
+              <th className="p-3">
+                Plate Number
+              </th>
+
+              <th className="p-3">
+                Slot Number
+              </th>
+
+              <th className="p-3">
+                Entry Time
+              </th>
+
+              <th className="p-3">
+                Exit Time
+              </th>
+
+              <th className="p-3">
+                Duration
+              </th>
+
+              <th className="p-3 text-center">
+                Actions
+              </th>
+
+            </tr>
+
+          </thead>
+
+
+
+          <tbody>
+
+            {records.length > 0 ? (
+
+              records.map((rec) => (
+
+                <tr
+                  key={rec.recordNumber}
+                  className="text-center border-t"
+                >
+
+                  <td className="p-3">
+                    {rec.PlateNumber}
+                  </td>
+
+                  <td className="p-3">
+                    {rec.SlotNumber}
+                  </td>
+
+                  <td className="p-3">
+                    {rec.EntryTime}
+                  </td>
+
+                  <td className="p-3">
+                    {rec.ExitTime}
+                  </td>
+
+                  <td className="p-3">
+                    {rec.Duration} Hours
+                  </td>
+
+                  <td className="p-3">
+
+                    <div className="flex justify-center gap-3">
+
+                      <button
+                        onClick={() => editRecord(rec)}
+                        className="bg-blue-500 text-white p-2 rounded"
+                      >
+                        <Pencil size={18} />
+                      </button>
+
+                      <button
+                        onClick={() =>
+                          deleteRecord(rec.recordNumber)
+                        }
+                        className="bg-red-500 text-white p-2 rounded"
+                      >
+                        <Trash2 size={18} />
+                      </button>
+
+                    </div>
+
+                  </td>
+
+                </tr>
+
+              ))
+
+            ) : (
+
+              <tr>
+
+                <td
+                  colSpan="6"
+                  className="text-center p-4 text-gray-500"
+                >
+                  No parking records found
+                </td>
+
+              </tr>
+
+            )}
+
+          </tbody>
+
+        </table>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default ParkingRecord;