✅ admin side for now | 🔄 started FE

apps/frontend/src/lib/domains/checkout/payment-info-section/order-summary.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
+	import Icon from "$lib/components/atoms/icon.svelte";
+	import { capitalize } from "$lib/core/string.utils";
+	import BackpackIcon from "~icons/solar/backpack-linear";
+	import BagIcon from "~icons/lucide/briefcase";
+	import SuitcaseIcon from "~icons/bi/suitcase2";
+	import SeatIcon from "~icons/solar/armchair-2-linear";
+</script>
+
+<div class="flex flex-col gap-6">
+	{#each passengerInfoVM.passengerInfos as passenger, index}
+		<div class="flex flex-col gap-4">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold">
+					Passenger {index + 1} ({capitalize(passenger.passengerType)})
+				</span>
+			</div>
+
+			<!-- Personal Info -->
+			<div class="rounded-lg border bg-gray-50 p-4">
+				<div class="grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
+					<div>
+						<span class="text-gray-500">Name</span>
+						<p class="font-medium">
+							{passenger.passengerPii.firstName}
+							{passenger.passengerPii.lastName}
+						</p>
+					</div>
+					<div>
+						<span class="text-gray-500">Nationality</span>
+						<p class="font-medium">
+							{passenger.passengerPii.nationality}
+						</p>
+					</div>
+					<div>
+						<span class="text-gray-500">Date of Birth</span>
+						<p class="font-medium">{passenger.passengerPii.dob}</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Baggage Selection -->
+			<div class="flex flex-wrap gap-4 text-sm">
+				{#if passenger.bagSelection.personalBags > 0}
+					<div class="flex items-center gap-2">
+						<Icon icon={BackpackIcon} cls="h-5 w-5 text-gray-600" />
+						<span>Personal Item</span>
+					</div>
+				{/if}
+				{#if passenger.bagSelection.handBags > 0}
+					<div class="flex items-center gap-2">
+						<Icon icon={SuitcaseIcon} cls="h-5 w-5 text-gray-600" />
+						<span>{passenger.bagSelection.handBags} x Cabin Bag</span>
+					</div>
+				{/if}
+				{#if passenger.bagSelection.checkedBags > 0}
+					<div class="flex items-center gap-2">
+						<Icon icon={BagIcon} cls="h-5 w-5 text-gray-600" />
+						<span>
+							{passenger.bagSelection.checkedBags} x Checked Bag
+						</span>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Seat Selection -->
+			{#if passenger.seatSelection.number}
+				<div class="flex items-center gap-2 text-sm">
+					<Icon icon={SeatIcon} cls="h-5 w-5 text-gray-600" />
+					<span>Seat {passenger.seatSelection.number}</span>
+				</div>
+			{/if}
+		</div>
+
+		{#if index < passengerInfoVM.passengerInfos.length - 1}
+			<div class="border-b border-dashed"></div>
+		{/if}
+	{/each}
+</div>