1 files changed, 150 insertions, 0 deletions
diff --git a/driver/src/pages/Home.tsx b/driver/src/pages/Home.tsx
new file mode 100644
index 0000000..81f1fb9
--- /dev/null
+++ b/driver/src/pages/Home.tsx
@@ -0,0 +1,150 @@
+import RideDialog from "@/components/RideDialog"
+import { Avatar } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card"
+import { auth, db } from "@/firebase/firebase_config"
+import { fetchUserDetails } from "@/utils/fetchUserDetails"
+import { DocumentData, collection, doc, getDoc, getDocs, query, where } from "firebase/firestore"
+import { useEffect, useState } from "react"
+import { Navigate } from "react-router-dom"
+
+interface IDriver {
+  uid: string,
+  name: string,
+  phoneNumber: string,
+  plateNumber: string,
+  carBrand: string,
+  carModel: string,
+  carColor: string,
+}
+
+interface IPassengerRequest {
+  passengerName: string,
+  pickUp: string,
+  dropOff: string,
+}
+
+interface ITrip {
+  pickUp: string,
+  dropOff: string,
+}
+
+function PassengerRequestCard({ passengerName, pickUp, dropOff }: IPassengerRequest) {
+  return (
+    <li className="py-2">
+      <p>
+        <strong>Passenger:</strong> {passengerName}
+      </p>
+      <p>
+        <strong>Pickup:</strong> {pickUp}
+      </p>
+      <p>
+        <strong>Dropoff:</strong> {dropOff}
+      </p>
+      <div className="flex justify-between mt-2">
+        <Button className="text-green-500 border-green-500" variant="outline">
+          Accept
+        </Button>
+        <Button className="border-red-500 text-red-500" variant="outline">
+          Reject
+        </Button>
+      </div>
+    </li>
+  )
+
+}
+
+export default function Home() {
+  const [driverData, setDriverData] = useState<IDriver | null | undefined>()
+  const [currentTrip, setCurrentTrip] = useState<ITrip>()
+
+
+  useEffect(() => {
+    async function fetchData() {
+      const data: IDriver | null | undefined = await fetchUserDetails();
+      setDriverData(data)
+    }
+    fetchData()
+  }, [auth.currentUser, db]);
+
+  return (
+    !auth.currentUser ? <Navigate to="/login" /> :
+      (
+        <main className="flex flex-col gap-6 p-6 bg-gray-900 text-white min-h-screen">
+          <header className="flex justify-between items-center">
+            <div className="flex items-center gap-4">
+              <h1 className="text-3xl font-bold">Driver Dashboard</h1>
+              <Avatar alt="Driver Avatar" className="w-10 h-10" src="/placeholder.svg?height=40&width=40" />
+              <h2 className="text-xl font-bold">{driverData?.name}</h2>
+              <Badge className="bg-white text-black" variant="secondary">
+                Active Driver
+              </Badge>
+            </div>
+            <div className="flex gap-4 items-center">
+              <Button className="text-black bg-white" variant="outline">
+                Log Out
+              </Button>
+            </div>
+          </header>
+          <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card className="bg-slate-950 text-white">
+              <CardHeader className="bg-slate-800">
+                <CardTitle className="text-lg font-semibold">Vehicle Details</CardTitle>
+              </CardHeader>
+              <CardContent className="mt-5">
+                <ul className="space-y-2">
+                  <li>
+                    <strong>Brand:</strong> {driverData?.carBrand}
+                  </li>
+                  <li>
+                    <strong>Model:</strong> {driverData?.carModel}
+                  </li>
+                  <li>
+                    <strong>License Plate:</strong> {driverData?.plateNumber}
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+            <Card className="bg-slate-950 text-white">
+              <CardHeader className="bg-slate-800">
+                <CardTitle className="text-lg font-semibold">Current Trip</CardTitle>
+              </CardHeader>
+              <CardContent className="mt-5">
+                <p>
+                  <strong>Pickup:</strong> {currentTrip?.pickUp}
+                </p>
+                <p>
+                  <strong>Dropoff:</strong> {currentTrip?.dropOff}
+                </p>
+                <Button className="w-full mt-4 border-blue-500 text-white" variant="outline">
+                  Start Trip
+                </Button>
+                <Button className="w-full mt-4 border-green-500 text-white" variant="outline">
+                  Finish Trip
+                </Button>
+                <Button className="w-full mt-4 border-red-500 text-white" variant="outline">
+                  Cancel Trip
+                </Button>
+              </CardContent>
+            </Card>
+            <Card className="bg-slate-950 text-white shadow-2xl transform transition hover:scale-105">
+              <CardHeader className="bg-slate-800">
+                <CardTitle className="text-lg font-semibold">Passenger Requests</CardTitle>
+              </CardHeader>
+              <CardContent className="mt-3">
+                <ul className="divide-y divide-gray-600">
+                  <PassengerRequestCard passengerName="Jane doe" pickUp="Gate 3/4" dropOff="5th Settelment" />
+                </ul>
+              </CardContent>
+            </Card>
+          </section>
+          <div className="flex justify-end items-center mt-6">
+            <RideDialog />
+          </div>
+          <footer className="mt-auto">
+          </footer>
+        </main>
+      )
+  )
+}