From 5e883d6c340b09f0e75c11b55cab806de2305e2e Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 06:46:53 +0000 Subject: [PATCH 1/4] Update src/app/dashboard/page.tsx --- src/app/dashboard/page.tsx | 535 ++++++++++++++++++++++++++++--------- 1 file changed, 416 insertions(+), 119 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 05d7551..cf72218 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,141 +1,438 @@ "use client"; -import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; -import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; -import Link from 'next/link'; +import { useState, useEffect } from "react"; +import { useRouter } from "next/navigation"; +import Link from "next/link"; +import { LogOut, Plus, Download, Filter, ChevronDown, TrendingUp, Clock, AlertCircle } from "lucide-react"; + +interface TransportAction { + id: string; + vehicleId: string; + vehiclePlate: string; + driverName: string; + actionType: "entry" | "exit"; + timestamp: string; + location: string; + notes: string; +} export default function DashboardPage() { + const router = useRouter(); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [actions, setActions] = useState([]); + const [filteredActions, setFilteredActions] = useState([]); + const [filterType, setFilterType] = useState<"all" | "entry" | "exit">("all"); + const [searchTerm, setSearchTerm] = useState(""); + const [showEntryForm, setShowEntryForm] = useState(false); + const [showExitForm, setShowExitForm] = useState(false); + const [formData, setFormData] = useState({ + vehicleId: "", vehiclePlate: "", driverName: "", location: "", notes: "" + }); + + // Check authentication + useEffect(() => { + const user = localStorage.getItem("user"); + if (!user) { + router.push("/login"); + } else { + setIsLoggedIn(true); + setIsLoading(false); + loadActions(); + } + }, [router]); + + const loadActions = () => { + const savedActions = localStorage.getItem("transportActions"); + const parsed = savedActions ? JSON.parse(savedActions) : []; + setActions(parsed); + filterActions(parsed); + }; + + const filterActions = (acts: TransportAction[], type: "all" | "entry" | "exit" = filterType, search: string = searchTerm) => { + let filtered = acts; + + if (type !== "all") { + filtered = filtered.filter((a) => a.actionType === type); + } + + if (search) { + filtered = filtered.filter( + (a) => + a.vehiclePlate.toLowerCase().includes(search.toLowerCase()) || + a.driverName.toLowerCase().includes(search.toLowerCase()) || + a.vehicleId.toLowerCase().includes(search.toLowerCase()) + ); + } + + setFilteredActions(filtered); + }; + + const handleFilterChange = (type: "all" | "entry" | "exit") => { + setFilterType(type); + filterActions(actions, type, searchTerm); + }; + + const handleSearchChange = (term: string) => { + setSearchTerm(term); + filterActions(actions, filterType, term); + }; + + const handleAddEntry = () => { + if (!formData.vehiclePlate || !formData.driverName) { + alert("Please fill in vehicle plate and driver name"); + return; + } + + const newAction: TransportAction = { + id: Date.now().toString(), + vehicleId: formData.vehicleId, + vehiclePlate: formData.vehiclePlate, + driverName: formData.driverName, + actionType: "entry", timestamp: new Date().toISOString(), + location: formData.location, + notes: formData.notes + }; + + const updated = [newAction, ...actions]; + setActions(updated); + localStorage.setItem("transportActions", JSON.stringify(updated)); + filterActions(updated); + setFormData({ vehicleId: "", vehiclePlate: "", driverName: "", location: "", notes: "" }); + setShowEntryForm(false); + }; + + const handleAddExit = () => { + if (!formData.vehiclePlate || !formData.driverName) { + alert("Please fill in vehicle plate and driver name"); + return; + } + + const newAction: TransportAction = { + id: Date.now().toString(), + vehicleId: formData.vehicleId, + vehiclePlate: formData.vehiclePlate, + driverName: formData.driverName, + actionType: "exit", timestamp: new Date().toISOString(), + location: formData.location, + notes: formData.notes + }; + + const updated = [newAction, ...actions]; + setActions(updated); + localStorage.setItem("transportActions", JSON.stringify(updated)); + filterActions(updated); + setFormData({ vehicleId: "", vehiclePlate: "", driverName: "", location: "", notes: "" }); + setShowExitForm(false); + }; + + const downloadReport = () => { + if (filteredActions.length === 0) { + alert("No data to download"); + return; + } + + const csv = [ + ["ID", "Vehicle ID", "Vehicle Plate", "Driver Name", "Action Type", "Timestamp", "Location", "Notes"], + ...filteredActions.map((a) => [ + a.id, + a.vehicleId, + a.vehiclePlate, + a.driverName, + a.actionType, + new Date(a.timestamp).toLocaleString(), + a.location, + a.notes + ]) + ] + .map((row) => row.map((cell) => `"${cell}"`).join(",")) + .join("\n"); + + const blob = new Blob([csv], { type: "text/csv" }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `transport-log-${new Date().toISOString().split("T")[0]}.csv`; + a.click(); + window.URL.revokeObjectURL(url); + }; + + const handleLogout = () => { + localStorage.removeItem("user"); + router.push("/login"); + }; + + if (isLoading) { + return ( +
+
+
+

Loading dashboard...

+
+
+ ); + } + + if (!isLoggedIn) { + return null; + } + + const entryCount = actions.filter((a) => a.actionType === "entry").length; + const exitCount = actions.filter((a) => a.actionType === "exit").length; + return ( - - +
+ {/* Header */} +
+
+ +
TransportLog
+ + +
+
-
-
-

- Your Transport Dashboard -

-

- Real-time monitoring of all vehicle entries and exits. Track movements, access logs, and generate reports from a single unified dashboard. -

-
-
-

150+

-

Vehicles Tracked

+
+ {/* Stats */} +
+
+
+
+

Total Entries

+

{entryCount}

+
+
-
-

99.9%

-

System Uptime

+
+ +
+
+
+

Total Exits

+

{exitCount}

+
+
-
-

24/7

-

Real-Time Monitoring

+
+ +
+
+
+

Total Records

+

{actions.length}

+
+
-
-
-
-

- Dashboard Features -

-
-
-
📊
-

Live Vehicle Tracking

-

- See all vehicle movements in real-time. Know exactly when each vehicle enters and exits your facility with precise timestamps and location data. -

+ {/* Action Buttons */} +
+ + + + + +
+ + {/* Forms */} + {(showEntryForm || showExitForm) && ( +
+

+ {showEntryForm ? "Record Vehicle Entry" : "Record Vehicle Exit"} +

+
+ setFormData({ ...formData, vehicleId: e.target.value })} + className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" + /> + setFormData({ ...formData, vehiclePlate: e.target.value })} + className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" + /> + setFormData({ ...formData, driverName: e.target.value })} + className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" + /> + setFormData({ ...formData, location: e.target.value })} + className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" + />
-
-
📝
-

Complete Audit Trail

-

- Every action is logged with driver information, cargo details, and system metadata. Perfect for compliance and historical analysis. -

+