11 files changed, 694 insertions, 255 deletions
diff --git a/driver/src/App.tsx b/driver/src/App.tsx
index 233b96d..9b3bb03 100644
--- a/driver/src/App.tsx
+++ b/driver/src/App.tsx
@@ -1,176 +1,15 @@
-import { addDoc, collection } from "firebase/firestore"
-import { db } from "./firebase/firebase_config"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { useState } from "react"
-
-interface RideOrder {
-  driverName: string
-  carModel: string
-  carColor: string
-  plateNumber: string
-  status: string
-  orderTime: Date
-  fromLocation: string
-  toLocation: string
-}
+import RideDialog from "./components/RideDialog"
+import Home from "./pages/Home"
+import LandingPage from "./pages/LandingPage"
 
 
 function App() {
-
-  const [driverName, setDriverName] = useState<string>()
-  const [carModel, setCarModel] = useState<string>()
-  const [carColor, setCarColor] = useState<string>()
-  const [plateNumber, setPlateNumber] = useState<string>()
-  const [status, _setStatus] = useState<string>('Pending')
-  const [orderTime, _setOrderTime] = useState<Date>(new Date())
-  const [fromLocation, setFromLocation] = useState<string>()
-  const [toLocation, setToLocation] = useState<string>()
-
-  const [_rideOrder, _setRideOrder] = useState<RideOrder>({
-    driverName: "Mahmoud",
-    carModel: "Toyota Corolla",
-    carColor: "Red",
-    plateNumber: "ABC-123",
-    status: "Pending",
-    orderTime: new Date("2023-12-20"),
-    fromLocation: "Abdu-Basha",
-    toLocation: "5th Settlement",
-  })
-
-  const addRideOrderToFirestore = async () => {
-    try {
-      // Get a reference to the 'rideOrders' collection
-      const rideOrdersCollection = collection(db, 'Rides');
-
-      // Add a new document to the 'rideOrders' collection with the data from the RideOrder object
-      const newRideOrderRef = await addDoc(rideOrdersCollection, {
-        driverName: driverName,
-        carModel: carModel,
-        carColor: carColor,
-        plateNumber: plateNumber,
-        status: status,
-        orderTime: orderTime,
-        fromLocation: fromLocation,
-        toLocation: toLocation,
-      });
-
-      console.log('Ride order added with ID:', newRideOrderRef.id);
-      // 'newRideOrderRef.id' will give you the document ID of the added ride order
-    } catch (error) {
-      console.error('Error adding ride order:', error);
-    }
-  };
-
   return (
-    <div className="bg-white h-screen w-screen flex items-center justify-center">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button className="rounded-xl" variant="outline">Add Ride</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Ride details</DialogTitle>
-            <DialogDescription>
-              Please enter details about your ride and click submit for the ride to appear to other students!
-            </DialogDescription>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                Name
-              </Label>
-              <Input
-                id="Name"
-                defaultValue=""
-                className="col-span-3"
-                onChange={(e) => setDriverName(e.target.value)}
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="Car Model" className="text-right">
-                Car Model
-              </Label>
-              <Input
-                id="Car Model"
-                defaultValue=""
-                className="col-span-3"
-                onChange={(e) => setCarModel(e.target.value)}
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="To Location" className="text-right">
-                To Location
-              </Label>
-              <Input
-                id="To Location"
-                defaultValue=""
-                className="col-span-3"
-                onChange={(e) => setToLocation(e.target.value)}
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="From location" className="text-right">
-                From location
-              </Label>
-              <Input
-                id="From location"
-                defaultValue=""
-                className="col-span-3"
-                onChange={(e) => setFromLocation(e.target.value)}
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="Car color" className="text-right">
-                Car color
-              </Label>
-              <Input
-                id="Car color"
-                defaultValue=""
-                className="col-span-3"
-                onChange={(e) => setCarColor(e.target.value)}
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="Plate Number" className="text-right">
-                Plate Number
-              </Label>
-              <Input
-                id="Plate Number"
-                defaultValue=""
-                className="col-span-3"
-                onChange={(e) => setPlateNumber(e.target.value)}
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button type="submit" onClick={addRideOrderToFirestore}>Add Ride</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+    <LandingPage />
+    // <Home />
+    // <RideDialog />
   )
 }
 
-// interface RideOrder {
-//   driverName: string
-//   carModel: string
-//   carColor: string
-//   plateNumber: string
-//   status: string
-//   orderTime: Date
-//   fromLocation: string
-//   toLocation: string
-// }
 
 export default App
diff --git a/driver/src/components/RideDialog.tsx b/driver/src/components/RideDialog.tsx
new file mode 100644
index 0000000..da7767b
--- /dev/null
+++ b/driver/src/components/RideDialog.tsx
@@ -0,0 +1,110 @@
+import { addDoc, collection, doc, getDoc } from "firebase/firestore"
+import { db } from "../firebase/firebase_config"
+import { auth } from "../firebase/firebase_config"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useState } from "react"
+
+interface RideOrder {
+  driverName: string
+  carBrand: string
+  carModel: string
+  carColor: string
+  plateNumber: string
+  status: string
+  orderTime: Date
+  pickUpLocation: string
+  dropOffLocation: string
+}
+
+
+function RideDialog({ name, brand, model, color, plateNumber }: any) {
+
+  const [status, _setStatus] = useState<string>('Pending')
+  const [orderTime, _setOrderTime] = useState<Date>(new Date())
+  const [pickUpLocation, setPickUpLocation] = useState<string>()
+  const [dropOffLocation, setDropOffLocation] = useState<string>()
+
+
+  const addRideOrderToFirestore = async () => {
+    try {
+      // Get a reference to the 'rideOrders' collection
+      const rideOrdersCollection = collection(db, 'Rides');
+
+      // Add a new document to the 'rideOrders' collection with the data from the RideOrder object
+      const newRideOrderRef = await addDoc(rideOrdersCollection, {
+        driverName: name,
+        carModel: model,
+        carBrand: brand,
+        carColor: color,
+        plateNumber: plateNumber,
+        status: status,
+        orderTime: orderTime,
+        fromLocation: pickUpLocation,
+        toLocation: dropOffLocation,
+      });
+
+      console.log('Ride order added with ID:', newRideOrderRef.id);
+      // 'newRideOrderRef.id' will give you the document ID of the added ride order
+    } catch (error) {
+      console.error('Error adding ride order:', error);
+    }
+  };
+
+  return (
+    <div>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="bg-green-600 text-black text-xl">Add Ride</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Ride details</DialogTitle>
+            <DialogDescription>
+              Please enter details about your ride and click submit for the ride to appear to other students!
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="To Location" className="text-right">
+                Pickup
+              </Label>
+              <Input
+                id="To Location"
+                defaultValue=""
+                className="col-span-3"
+                onChange={(e) => setDropOffLocation(e.target.value)}
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="From location" className="text-right">
+                Drop off
+              </Label>
+              <Input
+                id="From location"
+                defaultValue=""
+                className="col-span-3"
+                onChange={(e) => setPickUpLocation(e.target.value)}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button className="bg-green-500 text-black" type="submit" onClick={addRideOrderToFirestore}>Submit</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default RideDialog;
diff --git a/driver/src/components/ui/avatar.tsx b/driver/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..991f56e
--- /dev/null
+++ b/driver/src/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/driver/src/components/ui/badge.tsx b/driver/src/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/driver/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/driver/src/components/ui/card.tsx b/driver/src/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/driver/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/driver/src/main.tsx b/driver/src/main.tsx
index 300ddc1..ab11de5 100644
--- a/driver/src/main.tsx
+++ b/driver/src/main.tsx
@@ -5,6 +5,7 @@ import App from './App.tsx'
 import './index.css'
 import Login from './pages/Login.tsx'
 import SignUp from './pages/SignUp.tsx'
+import Home from './pages/Home.tsx'
 
 
 
@@ -14,6 +15,10 @@ const router = createBrowserRouter([
     element: <App />
   },
   {
+    path: "/home",
+    element: <Home />
+  },
+  {
     path: "/signup",
     element: <SignUp />
   },
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>
+      )
+  )
+}
diff --git a/driver/src/pages/LandingPage.tsx b/driver/src/pages/LandingPage.tsx
new file mode 100644
index 0000000..ec8b364
--- /dev/null
+++ b/driver/src/pages/LandingPage.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/components/ui/button"
+import { CardTitle, CardDescription, CardHeader, CardContent, Card } from "@/components/ui/card"
+import { Navigate, redirect } from "react-router-dom";
+import { Badge } from "@/components/ui/badge"
+
+export default function LandingPage() {
+  if (true) {
+    return <Navigate to="/signup" />
+  }
+  return (
+    <main key="1" className="bg-black min-h-screen px-4 py-8 md:px-16 lg:px-24">
+      <header className="flex justify-between items-center mb-8">
+        <h1 className="text-4xl font-bold text-white">Carpool</h1>
+        <div className="space-x-4">
+          <Button className="text-white bg-gray-700" variant="outline">
+            <a href="/login">Login</a>
+          </Button>
+          <Button className="bg-blue-500 text-white">
+            <a href="/signup">Sign Up</a>
+          </Button>
+        </div>
+      </header>
+      <section className="max-w-2xl mx-auto space-y-8">
+        <Card className="bg-gray-950 text-white border-2 border-amber-400">
+          <CardHeader>
+            <CardTitle>Welcome to Carpool</CardTitle>
+            <CardDescription>Join our community and share your journey.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-gray-300">
+              Find or offer rides, Made by students for students ❤️ ❤️
+            </p>
+          </CardContent>
+        </Card>
+        <div className="flex justify-center">
+          <Badge className="text-lg font-bold text-black bg-yellow-500" />
+        </div>
+      </section>
+      <footer className="mt-16 text-center text-gray-500">
+        <p>© 2023 Carpool. All rights reserved.</p>
+      </footer>
+    </main>
+  )
+}
+
diff --git a/driver/src/pages/Login.tsx b/driver/src/pages/Login.tsx
index 0605dc8..1841d03 100644
--- a/driver/src/pages/Login.tsx
+++ b/driver/src/pages/Login.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { auth } from '../firebase/firebase_config';
 import { signInWithEmailAndPassword } from 'firebase/auth';
+import { Navigate, redirect } from "react-router-dom";
 
 const Login = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
@@ -10,7 +12,8 @@ const Login = () => {
     try {
       const userCredential = await signInWithEmailAndPassword(auth, email, password);
       console.log('User logged in:', userCredential.user);
-      // TODO: redirect the user to another page or perform some other action
+      setIsLoggedIn(true)
+
     } catch (error) {
       console.error('Error logging in:', error);
       // TODO: Handle error messages or display them to the user.
@@ -18,48 +21,53 @@ const Login = () => {
   };
 
   return (
-    <div className="flex justify-center items-center h-screen bg-gray-200">
-      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 className="text-2xl font-bold mb-4">Login</h2>
-        <form>
-          <div className="mb-4">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
-              Email
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              id="email"
-              type="email"
-              placeholder="Email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-          <div className="mb-6">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
-              Password
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="password"
-              type="password"
-              placeholder="********"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-              type="button"
-              onClick={handleLogin}
-            >
-              Login
-            </button>
+    isLoggedIn ? (
+      <Navigate to="/home" />
+    ) :
+      (
+        <div className="flex justify-center items-center h-screen bg-black">
+          <div className="bg-slate-900 shadow-md rounded px-8 pt-6 w-1/3 pb-8 mb-4">
+            <h2 className="text-2xl font-bold mb-4">Login</h2>
+            <form>
+              <div className="mb-4">
+                <label className="block text-white text-sm font-bold mb-2" htmlFor="email">
+                  Email
+                </label>
+                <input
+                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline placeholder-gray-800"
+                  id="email"
+                  type="email"
+                  placeholder="Email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              <div className="mb-6">
+                <label className="block text-white text-sm font-bold mb-2" htmlFor="password">
+                  Password
+                </label>
+                <input
+                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline placeholder-gray-800"
+                  id="password"
+                  type="password"
+                  placeholder="********"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <button
+                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                  type="button"
+                  onClick={handleLogin}
+                >
+                  Login
+                </button>
+              </div>
+            </form>
           </div>
-        </form>
-      </div>
-    </div>
+        </div>
+      )
   );
 };
 
diff --git a/driver/src/pages/SignUp.tsx b/driver/src/pages/SignUp.tsx
index 3ee09dc..b73d810 100644
--- a/driver/src/pages/SignUp.tsx
+++ b/driver/src/pages/SignUp.tsx
@@ -1,11 +1,24 @@
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
 import { useState, useEffect } from 'react';
-import { auth } from '../firebase/firebase_config';
+import { auth, db } from '../firebase/firebase_config';
 import { createUserWithEmailAndPassword } from 'firebase/auth';
-
+import { Navigate, redirect } from "react-router-dom";
+import { addDoc, collection } from "firebase/firestore";
 
 const SignUp = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+
+  const [isSignedUp, setIsSignedUp] = useState(false)
+
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [name, setName] = useState<string>('')
+  const [phoneNumber, setPhoneNumber] = useState<string>('')
+  const [carBrand, setCarBrand] = useState<string>('')
+  const [carModel, setCarModel] = useState<string>('')
+  const [carColor, setCarColor] = useState<string>('')
+  const [plateNumber, setPlateNumber] = useState<string>('')
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
@@ -28,7 +41,20 @@ const SignUp = () => {
     try {
       // The onAuthStateChanged listener will handle the signed-in user state.
       const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+      const usersCollection = collection(db, 'users');
+      const userUid = userCredential.user.uid; // Get the user's UID
+      console.log(userUid, name, phoneNumber, carBrand, carModel, carColor, plateNumber)
+      addDoc(usersCollection, {
+        uid: userUid,
+        name: name,
+        phoneNumber: phoneNumber,
+        carBrand: carBrand,
+        carModel: carModel,
+        carColor: carColor,
+        plateNumber: plateNumber,
+      })
       console.log('User signed up:', userCredential.user);
+      setIsSignedUp(true)
     } catch (error) {
       // TODO: Handle error messages or display them to the user.
       console.error('Error signing up:', error);
@@ -36,48 +62,114 @@ const SignUp = () => {
   };
 
   return (
-    <div className="flex justify-center items-center h-screen bg-gray-200">
-      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 className="text-2xl font-bold mb-4">Sign Up</h2>
-        <form>
-          <div className="mb-4">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
-              Email
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              id="email"
-              type="email"
-              placeholder="Email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-          <div className="mb-6">
-            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
-              Password
-            </label>
-            <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-              id="password"
-              type="password"
-              placeholder="********"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-              type="button"
-              onClick={handleSignUp}
-            >
-              Sign Up
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+    isSignedUp ?
+      (<Navigate to="/login" />) :
+      (<div className="flex justify-center items-center h-screen bg-black">
+        <div className="bg-gray-900 shadow-md rounded px-8 pt-6 w-1/3 pb-8 mb-4">
+          <h2 className="text-2xl font-bold mb-4">Sign Up</h2>
+          <form>
+            <div className="mb-4">
+              <Label htmlFor="email">
+                Email
+              </Label>
+              <Input