trust roadmap

app/trips/[id]/page.tsx

@@ -344,10 +344,22 @@ export default async function TripDetailPage({
 
           {/* Participant Progress */}
           <div className="rounded-xl border border-neutral-200 p-3 sm:p-4">
-            <div className="mb-2 flex items-center justify-between">
-              <span className="text-xs font-semibold text-neutral-700 sm:text-sm">
-                Peserta
-              </span>
+            <div className="mb-2 flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-semibold text-neutral-700 sm:text-sm">
+                  Peserta
+                </span>
+                {spotsLeft > 0 && spotsLeft <= 3 && (
+                  <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-800 sm:text-[11px]">
+                    ⚡ Tinggal {spotsLeft} spot!
+                  </span>
+                )}
+                {spotsLeft <= 0 && (
+                  <span className="rounded-full bg-neutral-200 px-2 py-0.5 text-[10px] font-bold text-neutral-700 sm:text-[11px]">
+                    Penuh
+                  </span>
+                )}
+              </div>
               <span className="text-xs font-bold text-neutral-800 sm:text-sm">
                 {participantCount}{" "}
                 <span className="font-normal text-neutral-400">
@@ -383,6 +395,23 @@ export default async function TripDetailPage({
                 </>
               )}
             </p>
+            {confirmedCount > 0 && (
+              <p className="mt-2 text-[11px] text-neutral-600 sm:text-xs">
+                <span aria-hidden>👥</span> Sudah join:{" "}
+                <span className="font-medium text-neutral-800">
+                  {confirmedParticipants
+                    .slice(0, 3)
+                    .map((p) => p.user.name.split(" ")[0])
+                    .join(", ")}
+                </span>
+                {confirmedCount > 3 && (
+                  <span className="text-neutral-500">
+                    {" "}
+                    +{confirmedCount - 3} lainnya
+                  </span>
+                )}
+              </p>
+            )}
           </div>
 
           <TripProgramBlock