summaryrefslogtreecommitdiff
path: root/driver/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'driver/src/pages')
-rw-r--r--driver/src/pages/Home.tsx150
-rw-r--r--driver/src/pages/LandingPage.tsx45
-rw-r--r--driver/src/pages/Login.tsx92
-rw-r--r--driver/src/pages/SignUp.tsx184
4 files changed, 383 insertions, 88 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>
+ )
+ )
+}
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
+ id="email"
+ type="email"
+ placeholder="email@eng.asu.edu.eg"
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="password">
+ Password
+ </Label>
+ <Input
+ id="password"
+ type="password"
+ placeholder="********"
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="name">
+ Name
+ </Label>
+ <Input
+ id="name"
+ placeholder="Hamza Omar"
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="Phone number">
+ Phone number
+ </Label>
+ <Input
+ id="Phone number"
+ placeholder="01086319130"
+ value={phoneNumber}
+ onChange={(e) => setPhoneNumber(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="brand">
+ Car Brand
+ </Label>
+ <Input
+ id="brand"
+ placeholder="Toyota"
+ value={carBrand}
+ onChange={(e) => setCarBrand(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="model">
+ Car Model
+ </Label>
+ <Input
+ id="Model"
+ placeholder="Corolla"
+ value={carModel}
+ onChange={(e) => setCarModel(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="color">
+ Car Color
+ </Label>
+ <Input
+ id="Color"
+ placeholder="Silver"
+ value={carColor}
+ onChange={(e) => setCarColor(e.target.value)}
+ />
+ </div>
+ <div className="mb-6">
+ <Label htmlFor="plate">
+ Licencse Plate
+ </Label>
+ <Input
+ id="plate"
+ placeholder="ABC-123"
+ value={plateNumber}
+ onChange={(e) => setPlateNumber(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>)
);
};
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 07:06:53 +0000