create-cedro-app 1.0.2 → 1.0.3

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

@@ -0,0 +1,171 @@
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { Wrench, User, Mail, Lock } from "lucide-react";
+
+function Register() {
+
+  const navigate = useNavigate();
+
+  const [values, setValues] = useState({
+    Name: "",
+    Email: "",
+    Password: ""
+  });
+
+  // =========================
+  // REGISTER HANDLER
+  // =========================
+  const HandleRegister = async (e) => {
+
+    e.preventDefault();
+
+     axios.post(
+        "http://localhost:3000/register",
+        values
+      )
+
+      .then((res)=>{
+         toast.success(res.data.Message);
+
+      navigate("/");
+
+      })
+
+      
+    .catch((error)=>{
+  toast.error(
+        error.response?.data?.Error 
+      );
+
+      console.log(error);
+    })
+
+    
+    }
+  
+
+
+  return (
+
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+
+      {/* CARD */}
+      <form
+        onSubmit={HandleRegister}
+        className="w-[420px] bg-white rounded-3xl shadow-2xl p-10 border-t-[6px] border-indigo-600"
+      >
+
+        {/* HEADER */}
+        <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 Register
+          </h2>
+
+          <p className="text-gray-500 mt-2">
+            Create new account for CRPMS system
+          </p>
+
+        </div>
+
+
+        {/* NAME */}
+        <div className="mb-4 relative">
+
+          <User className="absolute top-3 left-3 text-gray-400" />
+
+          <input
+            type="text"
+            placeholder="Full Name"
+            className="w-full border pl-10 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Name: e.target.value
+              })
+            }
+            required
+          />
+
+        </div>
+
+
+        {/* EMAIL */}
+        <div className="mb-4 relative">
+
+          <Mail className="absolute top-3 left-3 text-gray-400" />
+
+          <input
+            type="email"
+            placeholder="Email Address"
+            className="w-full border pl-10 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            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="Password"
+            className="w-full border pl-10 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Password: e.target.value
+              })
+            }
+            required
+          />
+
+        </div>
+
+
+        {/* BUTTON */}
+        <button
+          type="submit"
+          className="w-full bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-xl font-semibold transition"
+        >
+          Create Account
+        </button>
+
+
+        {/* LOGIN LINK */}
+        <p className="mt-6 text-center text-gray-600">
+
+          Already have an account?
+
+          <Link
+            to="/"
+            className="text-indigo-600 font-semibold ml-2"
+          >
+            Login
+          </Link>
+
+        </p>
+
+      </form>
+
+    </div>
+  );
+}
+
+export default Register;

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

@@ -0,0 +1,407 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import {
+  FileBarChart,
+  Car,
+  DollarSign,
+  Wrench
+} from "lucide-react";
+
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+
+function Report() {
+
+    const token=localStorage.getItem("token")
+    const navigate=useNavigate()
+    useEffect(()=>{
+      const token=localStorage.getItem("token");
+      if(!token) {
+        navigate('/')
+      }
+    })
+
+  // =========================
+  // STATE
+  // =========================
+  const [report, setReport] = useState([]);
+
+
+
+  // =========================
+  // FETCH REPORT
+  // =========================
+  const fetchReport = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/report",
+        {
+          headers:{
+            Authorization:`Bearer ${token}`
+          }
+        }
+      );
+
+      // IMPORTANT
+      setReport(res.data.data);
+
+    } catch (error) {
+
+      console.log(error);
+
+    }
+  };
+
+
+
+  useEffect(() => {
+
+    fetchReport();
+
+  }, []);
+
+
+
+
+  // =========================
+  // TOTAL AMOUNT
+  // =========================
+  const totalAmount = report.reduce(
+
+    (total, item) =>
+
+      total + Number(item.AmountPaid),
+
+    0
+  );
+
+
+
+  // =========================
+  // GENERATE PDF
+  // =========================
+  const generatePDF = () => {
+
+    const doc = new jsPDF();
+
+    // TITLE
+    doc.setFontSize(18);
+
+    doc.text(
+      "SmartPark Daily Report",
+      14,
+      20
+    );
+
+
+
+    // TABLE
+    autoTable(doc, {
+
+      startY: 30,
+
+      head: [[
+        "Plate Number",
+        "Amount Paid",
+        "Payment Date"
+      ]],
+
+      body: report.map((r) => [
+
+        r.PlateNumber,
+        r.AmountPaid + " RWF",
+        r.PaymentDate
+
+      ])
+
+    });
+
+    // SAVE PDF
+    doc.save("Daily_Report.pdf");
+  };
+
+
+
+
+  return (
+
+    <div className="p-6 bg-gray-100 min-h-screen">
+
+      {/* HEADER */}
+      <div className="mb-8">
+
+        <div className="flex items-center gap-3">
+
+          <FileBarChart
+            className="text-indigo-600"
+            size={35}
+          />
+
+          <div>
+
+            <h1 className="text-3xl font-bold text-gray-800">
+              SmartPark Daily Report
+            </h1>
+
+            <p className="text-gray-500 mt-1">
+              Car Slot Payment Summary
+            </p>
+
+          </div>
+
+        </div>
+
+      </div>
+
+
+
+
+      {/* SUMMARY CARDS */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+
+        {/* TOTAL CARS */}
+        <div className="bg-white p-6 rounded-2xl shadow-md">
+
+          <div className="flex items-center justify-between">
+
+            <div>
+
+              <p className="text-gray-500">
+                Total Cars
+              </p>
+
+              <h1 className="text-4xl font-bold text-indigo-600 mt-2">
+                {report.length}
+              </h1>
+
+            </div>
+
+            <div className="bg-indigo-100 p-4 rounded-full">
+
+              <Car
+                className="text-indigo-600"
+                size={30}
+              />
+
+            </div>
+
+          </div>
+
+        </div>
+
+
+
+
+        {/* TOTAL PAYMENTS */}
+        <div className="bg-white p-6 rounded-2xl shadow-md">
+
+          <div className="flex items-center justify-between">
+
+            <div>
+
+              <p className="text-gray-500">
+                Total Payments
+              </p>
+
+              <h1 className="text-3xl font-bold text-green-600 mt-2">
+                {totalAmount.toLocaleString()} RWF
+              </h1>
+
+            </div>
+
+            <div className="bg-green-100 p-4 rounded-full">
+
+              <DollarSign
+                className="text-green-600"
+                size={30}
+              />
+
+            </div>
+
+          </div>
+
+        </div>
+
+
+
+
+        {/* SERVICES */}
+        <div className="bg-white p-6 rounded-2xl shadow-md">
+
+          <div className="flex items-center justify-between">
+
+            <div>
+
+              <p className="text-gray-500">
+                Services Offered
+              </p>
+
+              <h1 className="text-4xl font-bold text-orange-500 mt-2">
+
+                {
+                  [...new Set(
+                    report.map(
+                      (r) => r.SlotStatus
+                    )
+                  )].length
+                }
+
+              </h1>
+
+            </div>
+
+            <div className="bg-orange-100 p-4 rounded-full">
+
+              <Wrench
+                className="text-orange-500"
+                size={30}
+              />
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+
+
+
+
+      {/* REPORT TABLE */}
+      <div className="bg-white rounded-3xl shadow-lg overflow-hidden border border-gray-200">
+
+        {/* HEADER */}
+        <div className="p-6 border-b border-gray-200 flex items-center justify-between">
+
+          <div>
+
+            <h2 className="text-2xl font-bold text-gray-800">
+              Daily Payment Records
+            </h2>
+
+            <p className="text-gray-500 mt-1">
+              SmartPark garage report
+            </p>
+
+          </div>
+
+
+          <button
+            onClick={generatePDF}
+            className="
+              bg-indigo-600
+              hover:bg-indigo-700
+              text-white
+              px-5
+              py-2
+              rounded-xl
+            "
+          >
+            Generate PDF
+          </button>
+
+        </div>
+
+
+
+
+        {/* TABLE */}
+        <div className="overflow-x-auto">
+
+          <table className="w-full">
+
+            <thead className="bg-gray-100">
+
+              <tr>
+
+                <th className="text-left py-4 px-6">
+                  Plate Number
+                </th>
+
+                <th className="text-left py-4 px-6">
+                  Amount Paid
+                </th>
+
+                <th className="text-left py-4 px-6">
+                  Payment Date
+                </th>
+
+              </tr>
+
+            </thead>
+
+
+
+
+            <tbody>
+
+              {report.length > 0 ? (
+
+                report.map((r, i) => (
+
+                  <tr
+                    key={i}
+                    className="border-b hover:bg-gray-50"
+                  >
+
+                    <td className="py-4 px-6 font-medium">
+                      {r.PlateNumber}
+                    </td>
+
+                    <td className="py-4 px-6 text-green-600 font-bold">
+                      {Number(
+                        r.AmountPaid
+                      ).toLocaleString()} RWF
+                    </td>
+
+                    <td className="py-4 px-6">
+                      {r.PaymentDate}
+                    </td>
+
+                  </tr>
+
+                ))
+
+              ) : (
+
+                <tr>
+
+                  <td
+                    colSpan="7"
+                    className="text-center py-8 text-gray-500"
+                  >
+                    No report records found
+                  </td>
+
+                </tr>
+
+              )}
+
+            </tbody>
+
+          </table>
+
+        </div>
+
+      </div>
+
+
+
+
+      {/* FOOTER */}
+      <div className="mt-6 text-center text-gray-500 text-sm">
+
+        © 2026 CRPMS - SmartPark Garage System
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Report;

package/templates/slot-car-management-system/client/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

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

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/slot-car-management-system/client/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(),
+    tailwindcss()
+  ],
+})