- ✅

- ✅
- ✅
- ✅

features/trip/components/image-url-input.tsx

@@ -1,24 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { LIMITS } from "@/lib/limits";
 
-export function ImageUrlInput() {
-  const [urls, setUrls] = useState<string[]>([""]);
+interface ImageUrlInputProps {
+  value: string[];
+  onChange: (urls: string[]) => void;
+}
+
+export function ImageUrlInput({ value, onChange }: ImageUrlInputProps) {
+  const urls = value.length > 0 ? value : [""];
+  const max = LIMITS.MAX_IMAGE_URLS;
 
   function addField() {
-    if (urls.length < 5) {
-      setUrls([...urls, ""]);
+    if (urls.length < max) {
+      onChange([...urls, ""]);
     }
   }
 
   function removeField(index: number) {
-    setUrls(urls.filter((_, i) => i !== index));
+    const next = urls.filter((_, i) => i !== index);
+    onChange(next.length > 0 ? next : [""]);
   }
 
-  function updateField(index: number, value: string) {
+  function updateField(index: number, next: string) {
     const updated = [...urls];
-    updated[index] = value;
-    setUrls(updated);
+    updated[index] = next;
+    onChange(updated);
   }
 
   return (
@@ -27,13 +34,14 @@ export function ImageUrlInput() {
         <span className="text-sm font-semibold text-neutral-700">
           Foto Trip (URL)
         </span>
-        <span className="text-xs text-neutral-400">{urls.length}/5</span>
+        <span className="text-xs text-neutral-400">
+          {urls.length}/{max}
+        </span>
       </label>
       <div className="space-y-2">
         {urls.map((url, i) => (
           <div key={i} className="flex gap-2">
             <input
-              name="imageUrls"
               type="url"
               value={url}
               onChange={(e) => updateField(i, e.target.value)}
@@ -48,6 +56,7 @@ export function ImageUrlInput() {
               <button
                 type="button"
                 onClick={() => removeField(i)}
+                aria-label={`Hapus foto ${i + 1}`}
                 className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-neutral-200 text-neutral-400 hover:bg-red-50 hover:text-red-500"
               >
                 ✕
@@ -56,7 +65,7 @@ export function ImageUrlInput() {
           </div>
         ))}
       </div>
-      {urls.length < 5 && (
+      {urls.length < max && (
         <button
           type="button"
           onClick={addField}
@@ -66,7 +75,7 @@ export function ImageUrlInput() {
         </button>
       )}
       <p className="mt-1.5 text-xs text-neutral-400">
-        Upload foto ke hosting (imgur, imgbb, dll) lalu paste URL-nya di sini
+        Upload foto ke hosting (imgur, imgbb, dll) lalu paste URL-nya di sini.
       </p>
     </div>
   );

features/trip/components/join-trip-button.tsx

@@ -5,6 +5,15 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { joinTripAction, cancelJoinAction } from "@/features/trip/actions";
 
+type BookingStatus =
+  | "PENDING"
+  | "AWAITING_PAY"
+  | "PAID"
+  | "CANCELLED"
+  | "REFUNDED"
+  | "PARTIALLY_REFUNDED"
+  | "EXPIRED";
+
 interface JoinTripButtonProps {
   tripId: string;
   isLoggedIn: boolean;
@@ -14,11 +23,8 @@ interface JoinTripButtonProps {
   isFree: boolean;
   /** Status partisipasi user saat isJoined (bukan organizer) */
   participationStatus?: "PENDING" | "CONFIRMED" | null;
-  /** Status pembayaran manual (peserta). Hanya relevan untuk trip berbayar. */
-  participantPayment?: {
-    markedPaidAt: string | Date | null;
-    paymentConfirmedAt: string | Date | null;
-  } | null;
+  /** Status booking peserta (hanya relevan untuk trip berbayar). */
+  bookingStatus?: BookingStatus | null;
   isFull: boolean;
   tripStatus: string;
   /** Tanggal berangkat trip sudah lewat */
@@ -35,7 +41,7 @@ export function JoinTripButton({
   isJoined,
   isFree,
   participationStatus,
-  participantPayment,
+  bookingStatus,
   isFull,
   tripStatus,
   isDeparturePast,
@@ -114,11 +120,9 @@ export function JoinTripButton({
     }
   }
 
-  const pay = participantPayment;
-  const showPaymentLink = !isFree && isJoined && !isDeparturePast;
-  const waitingPaymentConfirm =
-    !isFree && isJoined && pay && pay.markedPaidAt && !pay.paymentConfirmedAt;
-  const paymentDone = !isFree && isJoined && pay && pay.paymentConfirmedAt;
+  const needsPayment = !isFree && isJoined && bookingStatus === "AWAITING_PAY";
+  const paymentDone = !isFree && isJoined && bookingStatus === "PAID";
+  const showPaymentLink = (needsPayment || paymentDone) && !isDeparturePast;
 
   return (
     <div>
@@ -142,16 +146,17 @@ export function JoinTripButton({
           {isFree && <span> — trip gratis, tidak ada pembayaran 🎉</span>}.
         </div>
       )}
-      {waitingPaymentConfirm && (
-        <div className="mb-3 rounded-xl border border-primary-200 bg-primary-50 px-4 py-3 text-sm font-medium leading-relaxed text-primary-950">
-          Kamu sudah menandai <span className="font-semibold">sudah bayar</span>.
-          Tunggu organizer mengonfirmasi pembayaran.
+      {needsPayment && (
+        <div className="mb-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium leading-relaxed text-amber-900">
+          Selesaikan pembayaran lewat{" "}
+          <span className="font-semibold">Midtrans</span> untuk mengamankan slot
+          kamu.
         </div>
       )}
       {paymentDone && (
         <div className="mb-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-900">
           Pembayaran kamu sudah{" "}
-          <span className="font-semibold">dikonfirmasi organizer</span>.
+          <span className="font-semibold">terkonfirmasi</span>.
         </div>
       )}
       {showPaymentLink && (
@@ -159,11 +164,7 @@ export function JoinTripButton({
           href={`/trips/${tripId}/payment`}
           className="mb-3 block w-full rounded-xl border-2 border-primary-500 bg-white py-3 text-center text-sm font-bold text-primary-700 transition-colors hover:bg-primary-50"
         >
-          {paymentDone
-            ? "Lihat detail pembayaran"
-            : pay?.markedPaidAt
-              ? "Lihat status pembayaran"
-              : "Buka detail pembayaran"}
+          {paymentDone ? "Lihat detail pembayaran" : "Bayar sekarang"}
         </Link>
       )}
       {isJoined ? (

features/trip/components/organizer-join-requests.tsx

@@ -11,8 +11,6 @@ import {
 export interface PendingJoinRequest {
   id: string;
   user: { name: string; image: string | null };
-  /** Peserta sudah menekan "Saya sudah bayar" */
-  markedPaidAt?: string | Date | null;
 }
 
 interface OrganizerJoinRequestsProps {
@@ -83,14 +81,7 @@ export function OrganizerJoinRequests({
                 <p className="truncate text-sm font-semibold text-neutral-800">
                   {p.user.name}
                 </p>
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <p className="text-xs text-amber-800/80">Menunggu persetujuan</p>
-                  {p.markedPaidAt ? (
-                    <span className="rounded-full bg-primary-100 px-2 py-0.5 text-[10px] font-bold text-primary-800">
-                      Sudah tandai bayar
-                    </span>
-                  ) : null}
-                </div>
+                <p className="text-xs text-amber-800/80">Menunggu persetujuan</p>
               </div>
             </div>
             <div className="flex shrink-0 gap-2">

features/trip/components/trip-program-block.tsx

@@ -1,6 +1,17 @@
+import { groupItineraryByDay } from "@/lib/itinerary";
+
+interface ItineraryItem {
+  day: number;
+  startTime: string;
+  endTime: string | null;
+  activity: string;
+  order: number;
+}
+
 interface TripProgramBlockProps {
   meetingPoint: string | null;
   itinerary: string | null;
+  itineraryItems: ItineraryItem[];
   whatsIncluded: string | null;
   whatsExcluded: string | null;
 }
@@ -8,13 +19,24 @@ interface TripProgramBlockProps {
 export function TripProgramBlock({
   meetingPoint,
   itinerary,
+  itineraryItems,
   whatsIncluded,
   whatsExcluded,
 }: TripProgramBlockProps) {
+  const hasStructuredItinerary = itineraryItems.length > 0;
+  const hasLegacyItinerary = !hasStructuredItinerary && !!itinerary;
   const hasAny =
-    meetingPoint || itinerary || whatsIncluded || whatsExcluded;
+    meetingPoint ||
+    hasStructuredItinerary ||
+    hasLegacyItinerary ||
+    whatsIncluded ||
+    whatsExcluded;
   if (!hasAny) return null;
 
+  const grouped = hasStructuredItinerary
+    ? groupItineraryByDay(itineraryItems)
+    : null;
+
   return (
     <div className="space-y-4 rounded-xl border border-neutral-200 bg-neutral-50/50 p-4 sm:p-5">
       <h2 className="text-xs font-bold text-neutral-800 sm:text-sm">
@@ -32,7 +54,41 @@ export function TripProgramBlock({
         </div>
       )}
 
-      {itinerary && (
+      {grouped && (
+        <div>
+          <h3 className="mb-2 text-[11px] font-bold uppercase tracking-wide text-primary-700 sm:text-xs">
+            Itinerary
+          </h3>
+          <div className="space-y-3">
+            {[...grouped.entries()].map(([day, items]) => (
+              <div
+                key={day}
+                className="rounded-lg border border-primary-100 bg-white p-3 sm:p-4"
+              >
+                <p className="mb-2 text-xs font-bold text-primary-800 sm:text-sm">
+                  Hari {day}
+                </p>
+                <ol className="space-y-2">
+                  {items.map((item) => (
+                    <li
+                      key={item.order}
+                      className="flex gap-3 text-xs leading-relaxed text-neutral-700 sm:text-sm"
+                    >
+                      <span className="shrink-0 font-mono text-[11px] font-semibold text-primary-700 sm:text-xs">
+                        {item.startTime}
+                        {item.endTime ? `–${item.endTime}` : ""}
+                      </span>
+                      <span className="min-w-0 flex-1">{item.activity}</span>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {hasLegacyItinerary && (
         <div>
           <h3 className="mb-1 text-[11px] font-bold uppercase tracking-wide text-primary-700 sm:text-xs">
             Itinerary