- ✅

- ✅
- ✅
- ✅

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