Fix SMTP delivery, add password reset and user deletion

SMTP:
- Add connection/greeting/socket timeouts so a stalled Gmail
  connection no longer hangs sign-up
- Wrap sendMail in try/catch and fall back to logging the code
- Derive secure from port (465 implicit TLS vs 587 STARTTLS)
- Strip whitespace from the Gmail app password
- Document SMTP_HOST/SMTP_PORT in .env.example and environment.d.ts

Password reset (new):
- POST /(api)/auth/forgot-password emails a 6-digit code and does
  not reveal whether the address is registered
- POST /(api)/auth/reset-password validates the code, sets the new
  password, verifies the email, and signs the user in
- password_reset_codes table added to seed-db.mjs
- "Forgot password?" flow on the mobile sign-in screen

User deletion (new):
- DELETE /(api)/admin/users/[id], owner-only, blocks self-deletion
- Delete button with confirmation on the dashboard Users page

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/(api)/admin/rides+api.ts

@@ -1,5 +1,28 @@
 import { requireOwner, withCors, preflight } from "@/lib/admin";
-import { sql } from "@/lib/db";
+import { query, type SqlValue } from "@/lib/db";
+
+const PAGE_SIZE = 25;
+
+const SELECT_RIDES = `
+  SELECT
+    r.ride_id,
+    r.origin_address,
+    r.destination_address,
+    r.ride_time,
+    r.fare_price,
+    r.payment_status,
+    r.created_at,
+    u.id AS user_id,
+    u.email AS user_email,
+    json_build_object(
+      'driver_id', d.id,
+      'name', d.first_name || ' ' || d.last_name,
+      'rating', d.rating
+    ) AS driver
+  FROM rides r
+  INNER JOIN drivers d ON d.id = r.driver_id
+  INNER JOIN users u ON u.id = r.user_id
+`;
 
 export async function OPTIONS() {
   return preflight();
@@ -12,55 +35,52 @@ export async function GET(request: Request) {
   try {
     const url = new URL(request.url);
     const status = url.searchParams.get("status")?.trim().toLowerCase() ?? "";
+    const q = url.searchParams.get("q")?.trim() ?? "";
+    const page = Math.max(1, Number(url.searchParams.get("page")) || 1);
 
-    const rows = status
-      ? await sql`
-        SELECT
-          r.ride_id,
-          r.origin_address,
-          r.destination_address,
-          r.ride_time,
-          r.fare_price,
-          r.payment_status,
-          r.created_at,
-          u.id AS user_id,
-          u.email AS user_email,
-          json_build_object(
-            'driver_id', d.id,
-            'name', d.first_name || ' ' || d.last_name,
-            'rating', d.rating
-          ) AS driver
-        FROM rides r
-        INNER JOIN drivers d ON d.id = r.driver_id
-        INNER JOIN users u ON u.id = r.user_id
-        WHERE LOWER(r.payment_status) = ${status}
-        ORDER BY r.created_at DESC
-        LIMIT 500
-      `
-      : await sql`
-        SELECT
-          r.ride_id,
-          r.origin_address,
-          r.destination_address,
-          r.ride_time,
-          r.fare_price,
-          r.payment_status,
-          r.created_at,
-          u.id AS user_id,
-          u.email AS user_email,
-          json_build_object(
-            'driver_id', d.id,
-            'name', d.first_name || ' ' || d.last_name,
-            'rating', d.rating
-          ) AS driver
-        FROM rides r
-        INNER JOIN drivers d ON d.id = r.driver_id
-        INNER JOIN users u ON u.id = r.user_id
-        ORDER BY r.created_at DESC
-        LIMIT 500
-      `;
+    const conds: string[] = [];
+    const params: SqlValue[] = [];
 
-    return withCors(Response.json({ data: rows }));
+    if (status) {
+      params.push(status);
+      conds.push(`LOWER(r.payment_status) = $${params.length}`);
+    }
+
+    if (q) {
+      params.push(`%${q}%`);
+      const n = params.length;
+      conds.push(
+        `(u.email ILIKE $${n} OR (d.first_name || ' ' || d.last_name) ILIKE $${n} OR ` +
+          `r.origin_address ILIKE $${n} OR r.destination_address ILIKE $${n})`,
+      );
+    }
+
+    const where = conds.length ? ` WHERE ${conds.join(" AND ")}` : "";
+
+    const [{ count }] = await query<{ count: number }>(
+      `SELECT COUNT(*)::int AS count
+       FROM rides r
+       INNER JOIN drivers d ON d.id = r.driver_id
+       INNER JOIN users u ON u.id = r.user_id${where}`,
+      params,
+    );
+
+    const rows = await query(
+      `${SELECT_RIDES}${where}
+       ORDER BY r.created_at DESC
+       LIMIT $${params.length + 1} OFFSET $${params.length + 2}`,
+      [...params, PAGE_SIZE, (page - 1) * PAGE_SIZE],
+    );
+
+    return withCors(
+      Response.json({
+        data: rows,
+        total: count,
+        page,
+        pageSize: PAGE_SIZE,
+        pages: Math.max(1, Math.ceil(count / PAGE_SIZE)),
+      }),
+    );
   } catch (error) {
     console.error("[ADMIN_RIDES]: ", error);
     return withCors(

app/(api)/admin/stats+api.ts

@@ -15,12 +15,22 @@ export async function GET(request: Request) {
       drivers: number;
       rides: number;
       revenue: number;
+      rides_today: number;
+      avg_fare: number;
+      pending_count: number;
+      pending_revenue: number;
+      new_users_7d: number;
     }>`
       SELECT
         (SELECT COUNT(*)::int FROM users) AS users,
         (SELECT COUNT(*)::int FROM drivers) AS drivers,
         (SELECT COUNT(*)::int FROM rides) AS rides,
-        (SELECT COALESCE(SUM(fare_price), 0)::int FROM rides WHERE payment_status = 'paid') AS revenue
+        (SELECT COALESCE(SUM(fare_price), 0)::int FROM rides WHERE payment_status = 'paid') AS revenue,
+        (SELECT COUNT(*)::int FROM rides WHERE created_at >= CURRENT_DATE) AS rides_today,
+        (SELECT COALESCE(ROUND(AVG(fare_price)), 0)::int FROM rides WHERE payment_status = 'paid') AS avg_fare,
+        (SELECT COUNT(*)::int FROM rides WHERE LOWER(payment_status) <> 'paid') AS pending_count,
+        (SELECT COALESCE(SUM(fare_price), 0)::int FROM rides WHERE LOWER(payment_status) <> 'paid') AS pending_revenue,
+        (SELECT COUNT(*)::int FROM users WHERE created_at >= CURRENT_DATE - INTERVAL '7 days') AS new_users_7d
     `;
 
     const trend = await sql<{ day: string; rides: number; revenue: number }>`

app/(api)/admin/users/[id]+api.ts

@@ -58,3 +58,37 @@ export async function PATCH(request: Request, { id }: { id: string }) {
     );
   }
 }
+
+export async function DELETE(request: Request, { id }: { id: string }) {
+  const auth = await requireOwner(request);
+  if ("error" in auth) return withCors(auth.error);
+
+  if (id === auth.userId) {
+    return withCors(
+      Response.json(
+        { error: "You cannot delete your own account." },
+        { status: 400 },
+      ),
+    );
+  }
+
+  try {
+    // rides.user_id is ON DELETE CASCADE, so a rider's rides go with them.
+    const rows = await sql<{ id: string }>`
+      DELETE FROM users WHERE id = ${id} RETURNING id
+    `;
+
+    if (!rows[0]) {
+      return withCors(
+        Response.json({ error: "User not found." }, { status: 404 }),
+      );
+    }
+
+    return withCors(Response.json({ data: rows[0] }));
+  } catch (error) {
+    console.error("[ADMIN_USER_DELETE]: ", error);
+    return withCors(
+      Response.json({ error: "Internal Server Error" }, { status: 500 }),
+    );
+  }
+}

app/(api)/auth/forgot-password+api.ts

@@ -0,0 +1,61 @@
+import { createHash, randomInt } from "crypto";
+
+import { sql } from "@/lib/db";
+import { sendEmail } from "@/lib/mailer";
+
+const hashCode = (email: string, code: string): string =>
+  createHash("sha256").update(`${email}:${code}`).digest("hex");
+
+export async function POST(req: Request) {
+  const { email } = await req.json();
+
+  if (!email?.trim()) {
+    return Response.json({ error: "Email is required." }, { status: 400 });
+  }
+
+  const normalized = email.trim().toLowerCase();
+
+  try {
+    const users = await sql<{ id: string }>`
+      SELECT id FROM users WHERE email = ${normalized}
+    `;
+
+    // Don't reveal whether the address is registered: always answer the same.
+    if (!users[0]) {
+      return Response.json({ data: { sent: false } });
+    }
+
+    const code = String(randomInt(0, 1_000_000)).padStart(6, "0");
+
+    await sql`
+      INSERT INTO password_reset_codes (email, code_hash, expires_at)
+      VALUES (
+        ${normalized},
+        ${hashCode(normalized, code)},
+        CURRENT_TIMESTAMP + INTERVAL '15 minutes'
+      )
+      ON CONFLICT (email) DO UPDATE SET
+        code_hash = EXCLUDED.code_hash,
+        expires_at = EXCLUDED.expires_at,
+        attempts = 0
+    `;
+
+    const delivered = await sendEmail(
+      normalized,
+      "Reset your Waseel password",
+      `We received a request to reset your Waseel password.\n\nYour reset code is: ${code}\n\nIt expires in 15 minutes. If you didn't ask for this, you can ignore this email.`,
+    );
+
+    return Response.json({
+      data: {
+        sent: delivered,
+        // Without SMTP configured there is nothing to receive, so surface the
+        // code to keep the reset flow usable on a self-hosted box.
+        ...(delivered ? {} : { devCode: code }),
+      },
+    });
+  } catch (error) {
+    console.error("[FORGOT_PASSWORD]: ", error);
+    return Response.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}

app/(api)/auth/register+api.ts

@@ -14,7 +14,7 @@ const hashCode = (email: string, code: string): string =>
   createHash("sha256").update(`${email}:${code}`).digest("hex");
 
 export async function POST(req: Request) {
-  const { name, email, phone, password } = await req.json();
+  const { name, email, phone, password, role } = await req.json();
 
   if (!name?.trim() || !email?.trim() || !password) {
     return Response.json(
@@ -23,6 +23,8 @@ export async function POST(req: Request) {
     );
   }
 
+  const normalizedRole = role === "driver" ? "driver" : "rider";
+
   if (typeof password !== "string" || password.length < 8) {
     return Response.json(
       { error: "Password must be at least 8 characters." },
@@ -44,18 +46,20 @@ export async function POST(req: Request) {
 
     // Unverified rows may be re-registered (e.g. the first mail never arrived).
     await sql`
-      INSERT INTO users (name, email, phone, password_hash, email_verified)
+      INSERT INTO users (name, email, phone, password_hash, email_verified, role)
       VALUES (
         ${name.trim()},
         ${email.trim().toLowerCase()},
         ${phone ? normalizePhone(phone) : null},
         ${hashPassword(password)},
-        FALSE
+        FALSE,
+        ${normalizedRole}
       )
       ON CONFLICT (email) DO UPDATE SET
         name = EXCLUDED.name,
         phone = COALESCE(EXCLUDED.phone, users.phone),
-        password_hash = EXCLUDED.password_hash
+        password_hash = EXCLUDED.password_hash,
+        role = EXCLUDED.role
     `;
 
     const code = String(randomInt(0, 1_000_000)).padStart(6, "0");
@@ -73,13 +77,23 @@ export async function POST(req: Request) {
         attempts = 0
     `;
 
-    await sendEmail(
+    const delivered = await sendEmail(
       email.trim().toLowerCase(),
       "Your Waseel verification code",
       `Welcome to Waseel!\n\nYour verification code is: ${code}\n\nIt expires in 15 minutes.`,
     );
 
-    return Response.json({ data: { sent: true } }, { status: 201 });
+    return Response.json(
+      {
+        data: {
+          sent: delivered,
+          // Without SMTP/Gmail configured there is nothing to receive, so
+          // surface the code to keep self-hosted sign-up usable.
+          ...(delivered ? {} : { devCode: code }),
+        },
+      },
+      { status: 201 },
+    );
   } catch (error) {
     console.error("[REGISTER]: ", error);
     return Response.json({ error: "Internal Server Error" }, { status: 500 });

app/(api)/auth/reset-password+api.ts

@@ -0,0 +1,79 @@
+import { createHash } from "crypto";
+
+import { sql } from "@/lib/db";
+import { hashPassword } from "@/lib/password";
+import { issueSession, toProfile } from "@/lib/users";
+
+const hashCode = (email: string, code: string): string =>
+  createHash("sha256").update(`${email}:${code}`).digest("hex");
+
+export async function POST(req: Request) {
+  const { email, code, password } = await req.json();
+
+  if (!email?.trim() || !/^\d{6}$/.test(code ?? "")) {
+    return Response.json(
+      { error: "Email and a 6-digit code are required." },
+      { status: 400 },
+    );
+  }
+
+  if (typeof password !== "string" || password.length < 8) {
+    return Response.json(
+      { error: "Password must be at least 8 characters." },
+      { status: 400 },
+    );
+  }
+
+  const normalized = email.trim().toLowerCase();
+
+  try {
+    const valid = await sql<{ email: string }>`
+      SELECT email FROM password_reset_codes
+      WHERE email = ${normalized}
+        AND code_hash = ${hashCode(normalized, code)}
+        AND expires_at > CURRENT_TIMESTAMP
+    `;
+
+    if (!valid[0]) {
+      await sql`
+        UPDATE password_reset_codes SET attempts = attempts + 1
+        WHERE email = ${normalized}
+      `;
+
+      return Response.json(
+        { error: "Invalid or expired reset code." },
+        { status: 400 },
+      );
+    }
+
+    // A successful reset also proves control of the mailbox, so verify it too.
+    const rows = await sql<{
+      id: string;
+      name: string;
+      email: string;
+      role: string | null;
+    }>`
+      UPDATE users
+      SET password_hash = ${hashPassword(password)}, email_verified = TRUE
+      WHERE email = ${normalized}
+      RETURNING id, name, email, role
+    `;
+
+    const user = rows[0];
+
+    if (!user) {
+      return Response.json({ error: "User not found." }, { status: 404 });
+    }
+
+    await sql`DELETE FROM password_reset_codes WHERE email = ${normalized}`;
+
+    const session = issueSession(user);
+
+    return Response.json({
+      data: { token: session.token, user: toProfile(user) },
+    });
+  } catch (error) {
+    console.error("[RESET_PASSWORD]: ", error);
+    return Response.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}

app/(auth)/sign-in.tsx

@@ -1,6 +1,16 @@
 import { Link, useRouter } from "expo-router";
 import { useCallback, useState } from "react";
-import { Alert, Image, ScrollView, Text, View } from "react-native";
+import {
+  Alert,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import ReactNativeModal from "react-native-modal";
 
 import { CustomButton } from "@/components/custom-button";
 import { InputField } from "@/components/input-field";
@@ -17,6 +27,101 @@ const SignIn = () => {
     password: "",
   });
 
+  // Forgot-password flow: "request" collects the email, "reset" collects the
+  // emailed code and a new password.
+  const [reset, setReset] = useState({
+    state: "closed" as "closed" | "request" | "reset",
+    email: "",
+    code: "",
+    password: "",
+    devCode: "",
+    error: "",
+    busy: false,
+  });
+
+  const openReset = () =>
+    setReset({
+      state: "request",
+      email: form.email,
+      code: "",
+      password: "",
+      devCode: "",
+      error: "",
+      busy: false,
+    });
+
+  const closeReset = () =>
+    setReset((prev) => ({ ...prev, state: "closed" }));
+
+  const onRequestReset = async () => {
+    if (!reset.email.trim()) {
+      setReset((prev) => ({ ...prev, error: "Enter your email address." }));
+      return;
+    }
+
+    setReset((prev) => ({ ...prev, busy: true, error: "" }));
+
+    try {
+      const response = await fetchAPI("/(api)/auth/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: reset.email.trim() }),
+      });
+
+      setReset((prev) => ({
+        ...prev,
+        state: "reset",
+        busy: false,
+        devCode:
+          (response as { data?: { devCode?: string } })?.data?.devCode ?? "",
+      }));
+    } catch {
+      // The endpoint hides whether the email exists, so move on regardless.
+      setReset((prev) => ({ ...prev, state: "reset", busy: false }));
+    }
+  };
+
+  const onSubmitReset = async () => {
+    if (!/^\d{6}$/.test(reset.code)) {
+      setReset((prev) => ({ ...prev, error: "Enter the 6-digit code." }));
+      return;
+    }
+
+    if (reset.password.length < 8) {
+      setReset((prev) => ({
+        ...prev,
+        error: "Password must be at least 8 characters.",
+      }));
+      return;
+    }
+
+    setReset((prev) => ({ ...prev, busy: true, error: "" }));
+
+    try {
+      const response = await fetchAPI("/(api)/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: reset.email.trim(),
+          code: reset.code,
+          password: reset.password,
+        }),
+      });
+
+      await setSession(response.data);
+      setReset((prev) => ({ ...prev, state: "closed", busy: false }));
+      router.replace("/");
+    } catch (err: any) {
+      setReset((prev) => ({
+        ...prev,
+        busy: false,
+        error: String(err?.message ?? "").includes("400")
+          ? "Invalid or expired reset code."
+          : "Could not reset your password. Please try again.",
+      }));
+    }
+  };
+
   const onSignInPress = useCallback(async () => {
     try {
       const response = await fetchAPI("/(api)/auth/login", {
@@ -47,7 +152,17 @@ const SignIn = () => {
   }, [isLoaded, form.email, form.password, setSession, router]);
 
   return (
-    <ScrollView className="flex-1 bg-white">
+    <KeyboardAvoidingView
+      className="flex-1 bg-white"
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
+    >
+    <ScrollView
+      className="flex-1 bg-white"
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={{ flexGrow: 1 }}
+      showsVerticalScrollIndicator={false}
+    >
       <View className="flex-1 bg-white">
         <View className="relative w-full h-[250px]">
           <Image
@@ -97,6 +212,12 @@ const SignIn = () => {
             className="mt-6"
           />
 
+          <TouchableOpacity onPress={openReset} className="mt-4">
+            <Text className="text-primary-500 text-center font-JakartaMedium">
+              Forgot password?
+            </Text>
+          </TouchableOpacity>
+
           <OAuth title="Sign in with Google" />
 
           <Link
@@ -107,8 +228,102 @@ const SignIn = () => {
             <Text className="text-primary-500">Sign up</Text>
           </Link>
         </View>
+
+        <ReactNativeModal
+          isVisible={reset.state === "request"}
+          onBackdropPress={closeReset}
+        >
+          <View className="bg-white px-7 py-9 rounded-2xl min-h-[280px]">
+            <Text className="text-2xl font-JakartaExtraBold mb-2">
+              Reset password
+            </Text>
+
+            <Text className="font-Jakarta mb-5">
+              Enter your email and we&apos;ll send you a 6-digit reset code.
+            </Text>
+
+            <InputField
+              label="Email"
+              placeholder="karim@email.com"
+              icon={icons.email}
+              value={reset.email}
+              keyboardType="email-address"
+              onChangeText={(email) =>
+                setReset((prev) => ({ ...prev, email }))
+              }
+            />
+
+            {reset.error ? (
+              <Text className="text-rose-500 text-sm mt-1">{reset.error}</Text>
+            ) : null}
+
+            <CustomButton
+              title={reset.busy ? "Sending…" : "Send Code"}
+              onPress={onRequestReset}
+              disabled={reset.busy}
+              className="mt-5"
+            />
+          </View>
+        </ReactNativeModal>
+
+        <ReactNativeModal
+          isVisible={reset.state === "reset"}
+          onBackdropPress={closeReset}
+        >
+          <View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
+            <Text className="text-2xl font-JakartaExtraBold mb-2">
+              Enter new password
+            </Text>
+
+            <Text className="font-Jakarta mb-5">
+              We&apos;ve sent a reset code to {reset.email}
+            </Text>
+
+            {reset.devCode ? (
+              <View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
+                <Text className="text-sm text-amber-700 font-Jakarta">
+                  Email delivery is not configured on this server. Your reset
+                  code is <Text className="font-JakartaBold">{reset.devCode}</Text>
+                </Text>
+              </View>
+            ) : null}
+
+            <InputField
+              label="Code"
+              icon={icons.lock}
+              placeholder="••••••"
+              value={reset.code}
+              maxLength={6}
+              keyboardType="numeric"
+              onChangeText={(code) => setReset((prev) => ({ ...prev, code }))}
+            />
+
+            <InputField
+              label="New password"
+              icon={icons.lock}
+              placeholder="••••••••"
+              secureTextEntry
+              value={reset.password}
+              onChangeText={(password) =>
+                setReset((prev) => ({ ...prev, password }))
+              }
+            />
+
+            {reset.error ? (
+              <Text className="text-rose-500 text-sm mt-1">{reset.error}</Text>
+            ) : null}
+
+            <CustomButton
+              title={reset.busy ? "Resetting…" : "Reset Password"}
+              onPress={onSubmitReset}
+              disabled={reset.busy}
+              className="mt-5 bg-emerald-500"
+            />
+          </View>
+        </ReactNativeModal>
       </View>
     </ScrollView>
+    </KeyboardAvoidingView>
   );
 };
 

app/(auth)/sign-up.tsx

@@ -1,6 +1,15 @@
 import { Link, router } from "expo-router";
 import { useState } from "react";
-import { Alert, Image, ScrollView, Text, View } from "react-native";
+import {
+  Alert,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import ReactNativeModal from "react-native-modal";
 
 import { CustomButton } from "@/components/custom-button";
@@ -10,9 +19,25 @@ import { icons, images } from "@/constants";
 import { fetchAPI } from "@/lib/fetch";
 import { useSession } from "@/lib/session";
 
+const ROLES = [
+  {
+    value: "rider",
+    title: "I need a ride",
+    description: "Book rides and get where you're going",
+  },
+  {
+    value: "driver",
+    title: "I want to drive",
+    description: "Offer rides and earn money with your car",
+  },
+] as const;
+
+type Role = (typeof ROLES)[number]["value"];
+
 const SignUp = () => {
   const { setSession } = useSession();
 
+  const [role, setRole] = useState<Role>("rider");
   const [form, setForm] = useState({
     name: "",
     email: "",
@@ -24,6 +49,7 @@ const SignUp = () => {
     state: "default",
     error: "",
     code: "",
+    devCode: "",
   });
 
   const onSignUpPress = async () => {
@@ -44,7 +70,7 @@ const SignUp = () => {
     }
 
     try {
-      await fetchAPI("/(api)/auth/register", {
+      const response = await fetchAPI("/(api)/auth/register", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -52,12 +78,15 @@ const SignUp = () => {
           email: form.email,
           phone: form.phone.trim(),
           password: form.password,
+          role,
         }),
       });
 
       setVerification((prevVerification) => ({
         ...prevVerification,
         state: "pending",
+        devCode:
+          (response as { data?: { devCode?: string } })?.data?.devCode ?? "",
       }));
 
       setForm((prevForm) => ({
@@ -98,7 +127,17 @@ const SignUp = () => {
   };
 
   return (
-    <ScrollView className="flex-1 bg-white">
+    <KeyboardAvoidingView
+      className="flex-1 bg-white"
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
+    >
+    <ScrollView
+      className="flex-1 bg-white"
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={{ flexGrow: 1 }}
+      showsVerticalScrollIndicator={false}
+    >
       <View className="flex-1 bg-white">
         <View className="relative w-full h-[250px]">
           <Image
@@ -114,6 +153,44 @@ const SignUp = () => {
         </View>
 
         <View className="p-5">
+          <Text className="text-lg font-JakartaSemiBold mb-3">
+            How will you use Waseel?
+          </Text>
+          <View className="flex-row gap-3 mb-4">
+            {ROLES.map((option) => {
+              const selected = role === option.value;
+              return (
+                <TouchableOpacity
+                  key={option.value}
+                  onPress={() => setRole(option.value)}
+                  activeOpacity={0.8}
+                  className={`flex-1 justify-center rounded-2xl border p-4 ${
+                    selected
+                      ? "border-primary-500 bg-primary-500/10"
+                      : "border-neutral-100 bg-neutral-100"
+                  }`}
+                >
+                  <Image
+                    source={option.value === "driver" ? icons.dollar : icons.map}
+                    alt={`${option.title} icon`}
+                    className="h-7 w-7 mb-2"
+                    resizeMode="contain"
+                  />
+                  <Text
+                    className={`text-[15px] font-JakartaBold ${
+                      selected ? "text-primary-500" : "text-black"
+                    }`}
+                  >
+                    {option.title}
+                  </Text>
+                  <Text className="text-xs text-neutral-400 font-Jakarta mt-1">
+                    {option.description}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+
           <InputField
             label="Name"
             placeholder="Karim Haddad"
@@ -205,6 +282,16 @@ const SignUp = () => {
               We&apos;ve sent a verification code to {form.email}
             </Text>
 
+            {verification.devCode ? (
+              <View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
+                <Text className="text-sm text-amber-700 font-Jakarta">
+                  Email delivery is not configured on this server. Your
+                  verification code is{" "}
+                  <Text className="font-JakartaBold">{verification.devCode}</Text>
+                </Text>
+              </View>
+            ) : null}
+
             <InputField
               label="Code"
               icon={icons.lock}
@@ -259,6 +346,7 @@ const SignUp = () => {
         </ReactNativeModal>
       </View>
     </ScrollView>
+    </KeyboardAvoidingView>
   );
 };