create-cedro-app 1.0.2 → 1.0.3

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

@@ -0,0 +1,512 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+import {
+  LayoutDashboard,
+  Users,
+  Wrench,
+  Receipt,
+  FileBarChart,
+  LogOut,
+  Search,
+  UserCircle
+} from "lucide-react";
+
+import { useNavigate } from "react-router-dom";
+import Customers from "./Customer";
+import Services from "./Service";
+import Invoices from "./Invoice";
+import Report from "./Report";
+
+// COMPONENTS
+
+
+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({
+    customers: 0,
+    services: 0,
+    invoices: 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({
+      customers: res.data.customers || 0,
+      services: res.data.services || 0,
+      invoices: res.data.invoices || 0
+    });
+
+  } 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">
+            VSBMS
+          </h1>
+
+          <p className="text-gray-400 text-sm mt-2">
+            Vehicle Service Billing 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>
+
+          {/* CUSTOMERS */}
+          <button
+            onClick={() => setActiveTab("Customers")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Customers"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <Users size={22} />
+
+            Customers
+
+          </button>
+
+          {/* SERVICES */}
+          <button
+            onClick={() => setActiveTab("Services")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Services"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <Wrench size={22} />
+
+            Services
+
+          </button>
+
+          {/* INVOICES */}
+          <button
+            onClick={() => setActiveTab("Invoices")}
+            className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition ${
+              activeTab === "Invoices"
+                ? "bg-indigo-600"
+                : "hover:bg-slate-800"
+            }`}
+          >
+
+            <Receipt size={22} />
+
+            Invoices
+
+          </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">
+              VSBMS Dashboard
+            </h2>
+
+            <p className="text-gray-500">
+              Welcome to Vehicle Service Billing 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">
+                  System Admin
+                </p>
+
+                <p className="text-sm text-gray-500">
+                  VSBMS 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">
+                  Vehicle Service Overview
+                </h1>
+
+                <p className="text-gray-500 mt-2 text-lg">
+                  Vehicle Service Billing Management System
+                </p>
+
+              </div>
+
+              {/* CARDS */}
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
+
+                {/* CUSTOMERS */}
+                <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">
+                        Customers
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-blue-600 mt-4">
+                        {stats.customers}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-blue-100 p-5 rounded-full">
+
+                      <Users
+                        size={40}
+                        className="text-blue-600"
+                      />
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+                {/* SERVICES */}
+                <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">
+                        Services
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-green-600 mt-4">
+                        {stats.services}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-green-100 p-5 rounded-full">
+
+                      <Wrench
+                        size={40}
+                        className="text-green-600"
+                      />
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+                {/* INVOICES */}
+                <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">
+                        Invoices
+                      </h2>
+
+                      <h1 className="text-5xl font-bold text-orange-500 mt-4">
+                        {stats.invoices}
+                      </h1>
+
+                    </div>
+
+                    <div className="bg-orange-100 p-5 rounded-full">
+
+                      <Receipt
+                        size={40}
+                        className="text-orange-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">
+                    System Information
+                  </h2>
+
+                  <p className="text-gray-500 mt-1">
+                    Vehicle Service Billing 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>• Customer Registration</li>
+
+                      <li>• Service Management</li>
+
+                      <li>• Invoice Generation</li>
+
+                      <li>• Payment Tracking</li>
+
+                      <li>• Reporting System</li>
+
+                    </ul>
+
+                  </div>
+
+                  {/* STATISTICS */}
+                  <div className="bg-green-50 rounded-2xl p-6">
+
+                    <h3 className="text-xl font-bold text-green-700 mb-4">
+                      System Statistics
+                    </h3>
+
+                    <div className="space-y-4">
+
+                      <div className="flex justify-between">
+
+                        <span>Total Customers</span>
+
+                        <span className="font-bold text-blue-600">
+                          {stats.customers}
+                        </span>
+
+                      </div>
+
+                      <div className="flex justify-between">
+
+                        <span>Total Services</span>
+
+                        <span className="font-bold text-green-600">
+                          {stats.services}
+                        </span>
+
+                      </div>
+
+                      <div className="flex justify-between">
+
+                        <span>Total Invoices</span>
+
+                        <span className="font-bold text-orange-500">
+                          {stats.invoices}
+                        </span>
+
+                      </div>
+
+                    </div>
+
+                  </div>
+
+                </div>
+
+              </div>
+
+            </div>
+
+          )}
+
+          {/* OTHER PAGES */}
+          {activeTab === "Customers" && <Customers />}
+
+          {activeTab === "Services" && <Services />}
+
+          {activeTab === "Invoices" && <Invoices />}
+
+          {activeTab === "Report" && <Report />}
+
+        </main>
+
+        {/* FOOTER */}
+        <footer className="bg-white border-t py-4 px-8 text-sm text-gray-500">
+
+          © 2026 VSBMS - Vehicle Service Billing Management System
+
+        </footer>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Dashboard;