create-cedro-app 1.0.2 → 1.0.4

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

@@ -0,0 +1,629 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+import {
+  LayoutDashboard,
+  Car,
+  SquareParking,
+  CreditCard,
+  FileBarChart,
+  LogOut,
+  Search,
+  UserCircle,
+  ClipboardList,
+} from "lucide-react";
+
+import { useNavigate } from "react-router-dom";
+
+import ParkingSlot from "./ParkingSlot";
+import ParkingRecord from "./ParkingRecord";
+import Report from "./Report";  
+import Payment from "./Payment";
+import Cars from "./Cars";
+
+function Dashboard() {
+
+  const token = localStorage.getItem("token");
+
+  const navigate = useNavigate();
+
+
+
+  // =========================
+  // CHECK TOKEN
+  // =========================
+  useEffect(() => {
+
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      navigate("/");
+    }
+
+  }, [navigate]);
+
+
+
+  // =========================
+  // STATES
+  // =========================
+  const [stats, setStats] = useState({
+    cars: 0,
+    slots: 0,
+    records: 0,
+    payments: 0
+  });
+
+  const [activeTab, setActiveTab] =
+    useState("Dashboard");
+
+
+
+  // =========================
+  // FETCH DASHBOARD STATS
+  // =========================
+  const fetchStats = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/dashboard-stats",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setStats(res.data);
+
+    } catch (error) {
+
+      console.log(error);
+    }
+  };
+
+
+
+  useEffect(() => {
+
+    fetchStats();
+
+  }, []);
+
+
+
+
+  // =========================
+  // LOGOUT
+  // =========================
+  const handleLogout = () => {
+
+    localStorage.clear();
+
+    navigate("/");
+  };
+
+
+
+  return (
+
+    <div className="min-h-screen bg-gray-100 flex">
+
+      {/* SIDEBAR */}
+      <aside className="w-72 bg-slate-900 text-white flex flex-col shadow-2xl">
+
+        {/* LOGO */}
+        <div className="p-6 border-b border-slate-700">
+
+          <h1 className="text-3xl font-bold text-indigo-400">
+            SmartPark
+          </h1>
+
+          <p className="text-gray-400 text-sm mt-2">
+            Parking Space Sales Management System
+          </p>
+
+        </div>
+
+
+
+        {/* MENU */}
+        <nav className="flex-1 px-4 py-6 space-y-3">
+
+          {/* DASHBOARD */}
+          <button
+            onClick={() => setActiveTab("Dashboard")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Dashboard"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <LayoutDashboard size={22} />
+
+            Dashboard
+
+          </button>
+
+
+
+          {/* CARS */}
+          <button
+            onClick={() => setActiveTab("Cars")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Cars"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <Car size={22} />
+
+            Cars
+
+          </button>
+
+
+
+          {/* PARKING SLOT */}
+          <button
+            onClick={() => setActiveTab("ParkingSlot")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "ParkingSlot"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <SquareParking size={22} />
+
+            Parking Slots
+
+          </button>
+
+
+
+          {/* PARKING RECORD */}
+          <button
+            onClick={() => setActiveTab("ParkingRecord")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "ParkingRecord"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <ClipboardList size={22} />
+
+            Parking Records
+
+          </button>
+
+
+
+          {/* PAYMENT */}
+          <button
+            onClick={() => setActiveTab("Payment")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Payment"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <CreditCard size={22} />
+
+            Payments
+
+          </button>
+
+
+
+          {/* REPORT */}
+          <button
+            onClick={() => setActiveTab("Report")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Report"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <FileBarChart size={22} />
+
+            Reports
+
+          </button>
+
+        </nav>
+
+
+
+        {/* LOGOUT */}
+        <div className="p-4 border-t border-slate-700">
+
+          <button
+            onClick={handleLogout}
+            className="w-full flex items-center justify-center gap-3 bg-red-500 hover:bg-red-600 py-3 rounded-xl font-semibold transition"
+          >
+
+            <LogOut size={20} />
+
+            Logout
+
+          </button>
+
+        </div>
+
+      </aside>
+
+
+
+      {/* MAIN CONTENT */}
+      <div className="flex-1 flex flex-col">
+
+        {/* HEADER */}
+        <header className="bg-white shadow-md px-8 py-5 flex items-center justify-between">
+
+          <div>
+
+            <h2 className="text-3xl font-bold text-gray-800">
+              SmartPark Dashboard
+            </h2>
+
+            <p className="text-gray-500">
+              Welcome to Parking Management System
+            </p>
+
+          </div>
+
+
+
+          {/* SEARCH + USER */}
+          <div className="flex items-center gap-6">
+
+            {/* SEARCH */}
+            <div className="flex items-center bg-gray-100 px-4 py-2 rounded-xl">
+
+              <Search
+                size={18}
+                className="text-gray-500"
+              />
+
+              <input
+                placeholder="Search..."
+                className="bg-transparent outline-none px-2"
+              />
+
+            </div>
+
+
+
+            {/* USER */}
+            <div className="flex items-center gap-3">
+
+              <UserCircle
+                size={40}
+                className="text-indigo-600"
+              />
+
+              <div>
+
+                <p className="font-semibold">
+                  Parking Manager
+                </p>
+
+                <p className="text-sm text-gray-500">
+                  SmartPark User
+                </p>
+
+              </div>
+
+            </div>
+
+          </div>
+
+        </header>
+
+
+
+        {/* MAIN */}
+        <main className="flex-1 p-8 overflow-y-auto bg-gray-100">
+
+          {/* DASHBOARD */}
+          {activeTab === "Dashboard" && (
+
+            <div>
+
+              {/* TITLE */}
+              <div className="mb-10">
+
+                <h1 className="text-4xl font-bold text-gray-800">
+                  Parking System Overview
+                </h1>
+
+                <p className="text-gray-500 mt-2 text-lg">
+                  SmartPark Parking Space Sales Management
+                </p>
+
+              </div>
+
+
+
+              {/* CARDS */}
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8">
+
+                {/* CARS */}
+                <div className="bg-white rounded-3xl p-8 shadow-md border-l-[8px] border-blue-600">
+
+                  <div className="flex items-center justify-between">
+
+                    <div>
+
+                      <h2 className="text-gray-500 text-lg">
+                        Total Cars
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-blue-600 mt-4">
+                        {stats.cars}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-blue-100 p-5 rounded-full">
+
+                      <Car
+                        size={40}
+                        className="text-blue-600"
+                      />
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+
+
+                {/* SLOTS */}
+                <div className="bg-white rounded-3xl p-8 shadow-md border-l-[8px] border-green-600">
+
+                  <div className="flex items-center justify-between">
+
+                    <div>
+
+                      <h2 className="text-gray-500 text-lg">
+                        Parking Slots
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-green-600 mt-4">
+                        {stats.slots}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-green-100 p-5 rounded-full">
+
+                      <SquareParking
+                        size={40}
+                        className="text-green-600"
+                      />
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+
+
+                {/* RECORDS */}
+                <div className="bg-white rounded-3xl p-8 shadow-md border-l-[8px] border-orange-500">
+
+                  <div className="flex items-center justify-between">
+
+                    <div>
+
+                      <h2 className="text-gray-500 text-lg">
+                        Parking Records
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-orange-500 mt-4">
+                        {stats.records}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-orange-100 p-5 rounded-full">
+
+                      <ClipboardList
+                        size={40}
+                        className="text-orange-500"
+                      />
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+
+
+                {/* PAYMENTS */}
+                <div className="bg-white rounded-3xl p-8 shadow-md border-l-[8px] border-red-500">
+
+                  <div className="flex items-center justify-between">
+
+                    <div>
+
+                      <h2 className="text-gray-500 text-lg">
+                        Payments
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-red-500 mt-4">
+                        {stats.payments}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-red-100 p-5 rounded-full">
+
+                      <CreditCard
+                        size={40}
+                        className="text-red-500"
+                      />
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+              </div>
+
+
+
+              {/* INFO SECTION */}
+              <div className="mt-12 bg-white rounded-3xl shadow-md overflow-hidden">
+
+                <div className="p-6 border-b border-gray-200">
+
+                  <h2 className="text-2xl font-bold text-gray-800">
+                    SmartPark System Information
+                  </h2>
+
+                  <p className="text-gray-500 mt-1">
+                    Parking Space Sales Management System
+                  </p>
+
+                </div>
+
+
+
+                <div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8">
+
+                  {/* FEATURES */}
+                  <div className="bg-indigo-50 rounded-2xl p-6">
+
+                    <h3 className="text-xl font-bold text-indigo-700 mb-4">
+                      System Features
+                    </h3>
+
+                    <ul className="space-y-3 text-gray-700">
+
+                      <li>• Car Registration</li>
+
+                      <li>• Parking Slot Management</li>
+
+                      <li>• Parking Records</li>
+
+                      <li>• Payment Processing</li>
+
+                      <li>• Daily Reports</li>
+
+                    </ul>
+
+                  </div>
+
+
+
+                  {/* STATISTICS */}
+                  <div className="bg-green-50 rounded-2xl p-6">
+
+                    <h3 className="text-xl font-bold text-green-700 mb-4">
+                      Parking Statistics
+                    </h3>
+
+                    <div className="space-y-4">
+
+                      <div className="flex justify-between">
+
+                        <span>Registered Cars</span>
+
+                        <span className="font-bold text-blue-600">
+                          {stats.cars}
+                        </span>
+
+                      </div>
+
+
+
+                      <div className="flex justify-between">
+
+                        <span>Parking Slots</span>
+
+                        <span className="font-bold text-green-600">
+                          {stats.slots}
+                        </span>
+
+                      </div>
+
+
+
+                      <div className="flex justify-between">
+
+                        <span>Parking Records</span>
+
+                        <span className="font-bold text-orange-500">
+                          {stats.records}
+                        </span>
+
+                      </div>
+
+
+
+                      <div className="flex justify-between">
+
+                        <span>Payments</span>
+
+                        <span className="font-bold text-red-500">
+                          {stats.payments}
+                        </span>
+
+                      </div>
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+              </div>
+
+            </div>
+
+          )}
+
+
+
+          {/* OTHER PAGES */}
+          {activeTab === "Cars" && <Cars />}
+
+          {activeTab === "ParkingSlot" && <ParkingSlot />}
+
+          {activeTab === "ParkingRecord" && <ParkingRecord />}
+
+          {activeTab === "Payment" && <Payment />}
+
+          {activeTab === "Report" && <Report />}
+
+        </main>
+
+
+
+        {/* FOOTER */}
+        <footer className="bg-white border-t py-4 px-8 text-sm text-gray-500">
+
+          © 2026 SmartPark - Parking Space Sales Management System
+
+        </footer>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Dashboard;