Waseel: driver capture, chat/calls, dispatch, and session fixes

Driver onboarding now photographs the licence, ID card and vehicle
registration and reads the credential fields off them, plus a camera-only
profile selfie riders check the arriving driver against. Adds in-app chat
and WebRTC calls, push-backed ride offers, ratings, cancellation and
payment sheets, settlement, and the owner dashboard endpoints behind them.

Camera permission on Android:
  - Declare CAMERA and READ_MEDIA_IMAGES in the manifest. expo-image-picker's
    own plugin never declares CAMERA, and Android denies a request for an
    undeclared permission instantly and silently — no dialog is ever shown,
    which is indistinguishable from the app not asking at all.
  - Handle canAskAgain: once Android stops showing the dialog, repeating why
    we need it is a dead end, so offer Open Settings instead (lib/capture-
    permission.ts), matching what the location flow already did.

Session: a 401 on a request that carried a token now ends the session
instead of being reinterpreted per-screen — driver-home had been reading it
as "this user has no driver profile" and showing an onboarding form to an
already-onboarded driver. Requests without a token are exempt so a failed
sign-in doesn't sign you out, and the notification is latched per token so
concurrent polls tear the session down once. (root) gains the auth guard
that turns that into the sign-in screen; app/index.tsx only guarded the way
in, leaving a session that ended mid-screen with nowhere to go.

Also ignore .uploads/ — it holds driver licence, ID and vehicle scans plus
profile photos, which are personal data and must not be committed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

components/ride-card.tsx

@@ -5,6 +5,29 @@ import { tr } from "@/lib/i18n";
 import { formatDate, formatTime } from "@/lib/utils";
 import type { Ride } from "@/types/type";
 
+// How a finished ride ended. The history list used to render every ride
+// identically — a cancelled trip showed the same driver, the same fare and, on
+// a card ride, the same green "Paid by card" as one that actually happened, so
+// a rider scrolling their history saw cancellations as completed journeys.
+// The outcome is now the first thing on the card.
+const OUTCOME = {
+  completed: {
+    labelKey: "components.rideCard.outcomeCompleted",
+    text: "text-emerald-600 dark:text-emerald-400",
+    chip: "bg-emerald-500/10",
+  },
+  cancelled: {
+    labelKey: "components.rideCard.outcomeCancelled",
+    text: "text-rose-500",
+    chip: "bg-rose-500/10",
+  },
+  expired: {
+    labelKey: "components.rideCard.outcomeExpired",
+    text: "text-amber-600 dark:text-amber-400",
+    chip: "bg-amber-500/10",
+  },
+} as const;
+
 export const RideCard = ({ ride }: { ride: Ride }) => {
   const {
     destination_latitude,
@@ -15,11 +38,54 @@ export const RideCard = ({ ride }: { ride: Ride }) => {
     ride_time,
     driver,
     payment_status,
+    status,
+    cancelled_by,
+    cancellation_reason,
   } = ride;
 
+  const outcome = OUTCOME[status as keyof typeof OUTCOME] ?? null;
+  const didNotHappen = status === "cancelled" || status === "expired";
+
+  // A cancelled or expired ride never had a driver assigned in most cases, and
+  // the LEFT JOIN hands back an object of nulls — which rendered as an empty
+  // gap where a name should be.
+  const driverName = [driver?.first_name, driver?.last_name]
+    .filter(Boolean)
+    .join(" ");
+
   return (
     <View className="flex flex-row items-center justify-center bg-white dark:bg-neutral-900 rounded-lg shadow-sm shadow-neutral-300 dark:shadow-neutral-950/40 mb-3">
       <View className="flex flex-col items-center justify-center p-3">
+        {outcome ? (
+          <View className="flex flex-row items-center justify-between w-full mb-3">
+            <View className={`rounded-full px-3 py-1 ${outcome.chip}`}>
+              <Text className={`text-xs font-JakartaBold ${outcome.text}`}>
+                {tr(outcome.labelKey)}
+              </Text>
+            </View>
+
+            {/* Who ended it, and why — the two things a rider looking back at
+                a cancelled trip actually wants to know. */}
+            {didNotHappen && cancelled_by ? (
+              <Text
+                className="text-[11px] font-JakartaMedium text-gray-500 dark:text-neutral-400 flex-1 text-right ml-2"
+                numberOfLines={1}
+              >
+                {cancelled_by === "system"
+                  ? tr("components.rideCard.cancelledBySystem")
+                  : tr(
+                      cancelled_by === "driver"
+                        ? "components.rideCard.cancelledByDriver"
+                        : "components.rideCard.cancelledByYou",
+                    )}
+                {cancellation_reason
+                  ? ` · ${tr(`cancelSheet.reasons.${cancellation_reason}`)}`
+                  : ""}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+
         <View className="flex flex-row items-center justify-between">
           <Image
             source={{
@@ -69,7 +135,7 @@ export const RideCard = ({ ride }: { ride: Ride }) => {
             </Text>
 
             <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
-              {driver.first_name} {driver.last_name}
+              {driverName || tr("components.rideCard.noDriver")}
             </Text>
           </View>
 
@@ -98,14 +164,35 @@ export const RideCard = ({ ride }: { ride: Ride }) => {
               {tr("components.rideCard.paymentStatus")}
             </Text>
 
+            {/* A ride that never happened has no payment worth reporting as
+                successful. A cash ride simply wasn't collected; a card ride
+                that was charged before cancellation is called out as owed a
+                refund rather than shown as a cheerful green "Paid". */}
             <Text
-              className={`font-JakartaMedium capitalize text-xs ${payment_status === "paid" ? "text-emerald-500 dark:text-emerald-400" : "text-gray-500 dark:text-neutral-400"}`}
+              className={`font-JakartaMedium capitalize text-xs ${
+                didNotHappen
+                  ? payment_status === "paid"
+                    ? "text-amber-600 dark:text-amber-400"
+                    : "text-gray-500 dark:text-neutral-400"
+                  : payment_status === "paid" ||
+                      payment_status === "cash_collected"
+                    ? "text-emerald-500 dark:text-emerald-400"
+                    : "text-gray-500 dark:text-neutral-400"
+              }`}
             >
-              {payment_status === "cash"
-                ? tr("components.rideCard.paymentCash")
-                : payment_status === "paid"
-                  ? tr("components.rideCard.paymentPaid")
-                  : tr("components.rideCard.paymentOther", { status: payment_status })}
+              {didNotHappen
+                ? payment_status === "paid"
+                  ? tr("components.rideCard.paymentRefundDue")
+                  : tr("components.rideCard.paymentNotCharged")
+                : payment_status === "cash"
+                  ? tr("components.rideCard.paymentCash")
+                  : payment_status === "cash_collected"
+                    ? tr("components.rideCard.paymentCashCollected")
+                    : payment_status === "paid"
+                      ? tr("components.rideCard.paymentPaid")
+                      : tr("components.rideCard.paymentOther", {
+                          status: payment_status,
+                        })}
             </Text>
           </View>
         </View>