fix ui style

app/admin/bookings/[id]/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
+import { ArrowLeft, CalendarDays, CircleAlert, MapPin } from "lucide-react";
 import { authOptions } from "@/lib/auth";
 import { isAdminEmail } from "@/lib/admin";
 import { bookingRepo } from "@/server/repositories/booking.repo";
@@ -69,8 +70,12 @@ export default async function AdminBookingDetailPage({ params }: PageProps) {
   return (
     <div className="mx-auto max-w-4xl px-4 py-8 sm:py-12">
       <div className="mb-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-neutral-500">
-        <Link href="/admin" className="hover:text-primary-600">
-          ← Dashboard
+        <Link
+          href="/admin"
+          className="inline-flex items-center gap-1 hover:text-primary-600"
+        >
+          <ArrowLeft size={14} strokeWidth={2} aria-hidden />
+          Dashboard
         </Link>
         <Link
           href={`/admin/trips/${booking.tripId}`}
@@ -87,9 +92,22 @@ export default async function AdminBookingDetailPage({ params }: PageProps) {
         <h1 className="mt-0.5 text-xl font-bold text-neutral-900 sm:text-2xl">
           {booking.trip.title}
         </h1>
-        <p className="mt-1 text-sm text-neutral-500">
-          📅 {formatTripCalendarDateRangeLong(booking.trip.date, booking.trip.endDate)}{" "}
-          · 📍 {booking.trip.destination}, {booking.trip.location}
+        <p className="mt-1 flex flex-wrap items-center gap-1 text-sm text-neutral-500">
+          <CalendarDays
+            size={14}
+            strokeWidth={1.75}
+            aria-hidden
+            className="shrink-0"
+          />
+          {formatTripCalendarDateRangeLong(booking.trip.date, booking.trip.endDate)}
+          <span aria-hidden>·</span>
+          <MapPin
+            size={14}
+            strokeWidth={1.75}
+            aria-hidden
+            className="shrink-0"
+          />
+          {booking.trip.destination}, {booking.trip.location}
         </p>
 
         <div className="mt-4 grid gap-3 sm:grid-cols-2">
@@ -300,8 +318,14 @@ function PaymentEventCard({
               </p>
             )}
             {payment.rejectionReason && (
-              <p className="text-red-700">
-                ⚠️ {payment.rejectionReason}
+              <p className="flex items-center gap-1 text-red-700">
+                <CircleAlert
+                  size={14}
+                  strokeWidth={2}
+                  aria-hidden
+                  className="shrink-0"
+                />
+                {payment.rejectionReason}
               </p>
             )}
           </div>