Krikorios
a0b297285a
- Replace Clerk with self-hosted JWT auth (register/login/verify, bcrypt passwords, Gmail OTP with console fallback) - Add lib/db.ts pg pool + transaction helpers; seed script migrates legacy Clerk-era schema (drop clerk_id, enforce UUID ids and unique email) - Add owner-gated admin API: stats, users, drivers CRUD, rides - Add dashboard/ Vite React owner dashboard (login, overview, users, fleet, rides) with dev-server proxy to avoid Expo CORS middleware - Add scripts/set-owner.mjs for role management
115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
import { Image, Text, View } from "react-native";
|
|
|
|
import { icons } from "@/constants";
|
|
import { formatDate, formatTime } from "@/lib/utils";
|
|
import type { Ride } from "@/types/type";
|
|
|
|
export const RideCard = ({ ride }: { ride: Ride }) => {
|
|
const {
|
|
destination_latitude,
|
|
destination_longitude,
|
|
origin_address,
|
|
destination_address,
|
|
created_at,
|
|
ride_time,
|
|
driver,
|
|
payment_status,
|
|
} = ride;
|
|
|
|
return (
|
|
<View className="flex flex-row items-center justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 mb-3">
|
|
<View className="flex flex-col items-center justify-center p-3">
|
|
<View className="flex flex-row items-center justify-between">
|
|
<Image
|
|
source={{
|
|
uri: `https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400¢er=lonlat:${destination_longitude},${destination_latitude}&zoom=14&apiKey=${process.env.EXPO_PUBLIC_GEOAPIFY_API_KEY}`,
|
|
}}
|
|
alt="Map"
|
|
className="w-[80px] h-[90px] rounded-lg"
|
|
/>
|
|
|
|
<View className="flex flex-col mx-5 gap-y-5 flex-1">
|
|
<View className="flex flex-row items-center gap-x-2">
|
|
<Image source={icons.to} alt="Origin" className="w-5 h-5" />
|
|
|
|
<Text className="font-JakartaMedium" numberOfLines={1}>
|
|
{origin_address}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center gap-x-2">
|
|
<Image
|
|
source={icons.point}
|
|
alt="Destination"
|
|
className="w-5 h-5"
|
|
/>
|
|
|
|
<Text className="font-JakartaMedium" numberOfLines={1}>
|
|
{destination_address}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex flex-col w-full mt-5 bg-general-500 rounded-lg p-3 items-start justify-center">
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
Date & Time
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
{formatDate(created_at)}, {formatTime(ride_time)}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
Driver
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
{driver.first_name} {driver.last_name}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
Car Seats
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
{driver.car_seats}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
Fare
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
${(ride.fare_price / 100).toFixed(2)}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 text-xs">
|
|
Payment Status
|
|
</Text>
|
|
|
|
<Text
|
|
className={`font-JakartaMedium capitalize text-xs ${payment_status === "paid" ? "text-emerald-500" : "text-gray-500"}`}
|
|
>
|
|
{payment_status === "cash"
|
|
? "Cash · Pay to driver"
|
|
: payment_status === "paid"
|
|
? "Paid by card"
|
|
: payment_status}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|