From 4ae1957a88a644d42595563ea0dc695214f95965 Mon Sep 17 00:00:00 2001
From: user <admin@local.dev>
Date: Mon, 20 Oct 2025 22:39:00 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20cleanup:=20more=20order=20logic?=
 =?UTF-8?q?=20cleanup=20on=20the=20admin=20side=20mostly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../domains/order/view/order-details.svelte   |  77 ++++++-
 .../domains/order/view/order-main-info.svelte |  70 +++++--
 .../domains/order/view/order-misc-info.svelte | 189 +++++++++---------
 .../lib/domains/order/view/order.vm.svelte.ts |  27 +--
 .../order/view/orders-table-full.svelte       |  65 +++---
 .../domains/order/view/orders-table.svelte    |  90 +++++++--
 .../src/lib/domains/paymentinfo/repository.ts |   6 +-
 .../src/lib/domains/ckflow/data/repository.ts |   4 +-
 .../src/lib/domains/ckflow/domain/router.ts   |   8 +-
 .../src/lib/domains/ckflow/domain/usecases.ts |   4 +-
 .../domains/ckflow/view/ckflow.vm.svelte.ts   |   4 +-
 .../domains/paymentinfo/data/repository.ts    |  14 +-
 .../domains/paymentinfo/domain/usecases.ts    |   4 +-
 .../checkout/flight-checkout.vm.svelte.ts     |   4 +-
 .../logic/domains/ckflow/data/entities.ts     |   8 +-
 packages/logic/domains/order/data/entities.ts |   8 +-
 .../domains/passengerinfo/data/entities.ts    |   6 +-
 .../domains/paymentinfo/data/entities.ts      |   8 +-
 18 files changed, 375 insertions(+), 221 deletions(-)

diff --git a/apps/admin/src/lib/domains/order/view/order-details.svelte b/apps/admin/src/lib/domains/order/view/order-details.svelte
index bd3c5be..34898b0 100644
--- a/apps/admin/src/lib/domains/order/view/order-details.svelte
+++ b/apps/admin/src/lib/domains/order/view/order-details.svelte
@@ -1,5 +1,78 @@
 <script lang="ts">
-	let { order }: { order?: any } = $props();
+	import { Badge } from "$lib/components/ui/badge";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { FullOrderModel } from "$lib/domains/order/data/entities";
+	import { OrderStatus } from "$lib/domains/order/data/entities";
+	import OrderMainInfo from "./order-main-info.svelte";
+	import OrderMiscInfo from "./order-misc-info.svelte";
+
+	let { order }: { order?: FullOrderModel } = $props();
+
+	function getStatusVariant(status: OrderStatus) {
+		switch (status) {
+			case OrderStatus.FULFILLED:
+				return "success";
+			case OrderStatus.PARTIALLY_FULFILLED:
+				return "default";
+			case OrderStatus.PENDING_FULFILLMENT:
+				return "secondary";
+			case OrderStatus.CANCELLED:
+				return "destructive";
+			default:
+				return "outline";
+		}
+	}
+
+	function formatStatus(status: OrderStatus): string {
+		return status
+			.split("_")
+			.map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+			.join(" ");
+	}
 </script>
 
-<span>show the order details - todo</span>
+{#if order}
+	<div class="container mx-auto py-6">
+		<!-- Order Header -->
+		<div class="mb-6 flex items-center justify-between">
+			<div class="flex flex-col gap-2">
+				<h1 class="text-3xl font-bold">Order #{order.id}</h1>
+				<p class="text-gray-600">
+					Created on {new Date(order.createdAt).toLocaleDateString(
+						"en-US",
+						{
+							year: "numeric",
+							month: "long",
+							day: "numeric",
+						},
+					)}
+				</p>
+			</div>
+			<Badge
+				variant={getStatusVariant(order.status)}
+				class="px-4 py-2 text-base"
+			>
+				{formatStatus(order.status)}
+			</Badge>
+		</div>
+
+		<Separator class="my-6" />
+
+		<!-- Order Content Grid -->
+		<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+			<!-- Main Info Column -->
+			<div class="flex flex-col gap-6">
+				<OrderMainInfo {order} />
+			</div>
+
+			<!-- Misc Info Column -->
+			<div class="flex flex-col gap-6">
+				<OrderMiscInfo {order} />
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="container mx-auto py-12 text-center">
+		<p class="text-xl text-gray-500">Order not found</p>
+	</div>
+{/if}
diff --git a/apps/admin/src/lib/domains/order/view/order-main-info.svelte b/apps/admin/src/lib/domains/order/view/order-main-info.svelte
index 6946c60..d571fce 100644
--- a/apps/admin/src/lib/domains/order/view/order-main-info.svelte
+++ b/apps/admin/src/lib/domains/order/view/order-main-info.svelte
@@ -2,11 +2,11 @@
 	import Icon from "$lib/components/atoms/icon.svelte";
 	import Title from "$lib/components/atoms/title.svelte";
 	import { Badge } from "$lib/components/ui/badge";
+	import CustomerDetailsCard from "$lib/domains/customerinfo/view/customer-details-card.svelte";
 	import type { FullOrderModel } from "$lib/domains/order/data/entities";
-	import TicketLegsOverview from "$lib/domains/ticket/view/ticket/ticket-legs-overview.svelte";
+	import ProductIcon from "~icons/solar/box-broken";
 	import CreditCardIcon from "~icons/solar/card-broken";
 	import EmailIcon from "~icons/solar/letter-broken";
-	import TicketIcon from "~icons/solar/ticket-broken";
 
 	let { order }: { order: FullOrderModel } = $props();
 
@@ -17,38 +17,59 @@
 </script>
 
 <div class="flex flex-col gap-6">
-	{#if order.emailAccountId && order.emailAccount}
+	{#if order.emailAccountId}
 		<!-- Email Account Info -->
 		<div class={cardStyle}>
 			<div class="flex items-center gap-2">
 				<Icon icon={EmailIcon} cls="w-5 h-5" />
 				<Title size="h5" color="black">Account Information</Title>
 			</div>
-			<p class="text-gray-800">{order.emailAccount?.email}</p>
+			<p class="text-gray-800">Email Account ID: #{order.emailAccountId}</p>
 		</div>
 	{/if}
 
-	<!-- Flight Ticket Info -->
+	<!-- Product Info -->
 	<div class={cardStyle}>
 		<div class="flex items-center justify-between">
 			<div class="flex items-center gap-2">
-				<Icon icon={TicketIcon} cls="w-5 h-5" />
-				<Title size="h5" color="black">Flight Details</Title>
+				<Icon icon={ProductIcon} cls="w-5 h-5" />
+				<Title size="h5" color="black">Product Details</Title>
 			</div>
 
-			<div class="flex gap-2">
-				<Badge variant="outline">
-					{order.flightTicketInfo.flightType}
-				</Badge>
-				<Badge variant="secondary">
-					{order.flightTicketInfo.cabinClass}
-				</Badge>
-			</div>
+			{#if order.product.discountPrice > 0 && order.product.discountPrice < order.product.price}
+				<Badge variant="success">Discounted</Badge>
+			{/if}
 		</div>
 
-		<TicketLegsOverview data={order.flightTicketInfo} />
+		<div class="flex flex-col gap-3">
+			<div>
+				<span class="text-sm text-gray-500">Product Name</span>
+				<p class="font-medium">{order.product.title}</p>
+			</div>
+
+			<div>
+				<span class="text-sm text-gray-500">Description</span>
+				<p class="text-gray-700">{order.product.description}</p>
+			</div>
+
+			<div class="grid grid-cols-2 gap-4">
+				<div>
+					<span class="text-sm text-gray-500">Regular Price</span>
+					<p class="font-medium">${order.product.price.toFixed(2)}</p>
+				</div>
+				{#if order.product.discountPrice > 0}
+					<div>
+						<span class="text-sm text-gray-500">Discount Price</span>
+						<p class="font-medium text-green-600">
+							${order.product.discountPrice.toFixed(2)}
+						</p>
+					</div>
+				{/if}
+			</div>
+		</div>
 	</div>
 
+	<!-- Price Summary -->
 	<div class={cardStyle}>
 		<div class="flex items-center gap-2">
 			<Icon icon={CreditCardIcon} cls="w-5 h-5" />
@@ -58,6 +79,11 @@
 		<div class="flex flex-col gap-2">
 			<div class="flex items-center justify-between">
 				<span>Base Price</span>
+				<span>${order.basePrice.toFixed(2)}</span>
+			</div>
+
+			<div class="flex items-center justify-between">
+				<span>Display Price</span>
 				<span>${order.displayPrice.toFixed(2)}</span>
 			</div>
 
@@ -71,9 +97,19 @@
 			{/if}
 
 			<div class="mt-2 flex items-center justify-between border-t pt-2">
-				<span class="font-medium">Total Price</span>
+				<span class="font-medium">Order Price</span>
 				<span class="font-medium">${order.orderPrice.toFixed(2)}</span>
 			</div>
+
+			<div class="flex items-center justify-between">
+				<span class="text-sm text-gray-500">Fulfilled</span>
+				<span class="text-sm">${order.fullfilledPrice.toFixed(2)}</span>
+			</div>
 		</div>
 	</div>
+
+	{#if order.customerInfo}
+		<!-- Customer Information -->
+		<CustomerDetailsCard customerInfo={order.customerInfo} />
+	{/if}
 </div>
diff --git a/apps/admin/src/lib/domains/order/view/order-misc-info.svelte b/apps/admin/src/lib/domains/order/view/order-misc-info.svelte
index 4e1b099..87fb671 100644
--- a/apps/admin/src/lib/domains/order/view/order-misc-info.svelte
+++ b/apps/admin/src/lib/domains/order/view/order-misc-info.svelte
@@ -1,118 +1,115 @@
 <script lang="ts">
 	import Icon from "$lib/components/atoms/icon.svelte";
 	import Title from "$lib/components/atoms/title.svelte";
-	import { adminSiteNavMap } from "$lib/core/constants";
-	import { capitalize } from "$lib/core/string.utils";
-	import CinfoCard from "$lib/domains/customerinfo/view/cinfo-card.svelte";
+	import { Badge } from "$lib/components/ui/badge";
 	import type { FullOrderModel } from "$lib/domains/order/data/entities";
-	import SuitcaseIcon from "~icons/bi/suitcase2";
-	import BagIcon from "~icons/lucide/briefcase";
-	import BackpackIcon from "~icons/solar/backpack-linear";
-	import PackageIcon from "~icons/solar/box-broken";
-	import UsersIcon from "~icons/solar/users-group-rounded-broken";
+	import { OrderStatus } from "$lib/domains/order/data/entities";
+	import CalendarIcon from "~icons/solar/calendar-broken";
+	import InfoIcon from "~icons/solar/info-circle-broken";
 
 	let { order }: { order: FullOrderModel } = $props();
 
 	const cardStyle =
 		"flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 shadow-md";
+
+	function getStatusVariant(status: OrderStatus) {
+		switch (status) {
+			case OrderStatus.FULFILLED:
+				return "success";
+			case OrderStatus.PARTIALLY_FULFILLED:
+				return "default";
+			case OrderStatus.PENDING_FULFILLMENT:
+				return "secondary";
+			case OrderStatus.CANCELLED:
+				return "destructive";
+			default:
+				return "outline";
+		}
+	}
+
+	function formatStatus(status: OrderStatus): string {
+		return status
+			.split("_")
+			.map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+			.join(" ");
+	}
+
+	function formatDate(dateString: string): string {
+		const date = new Date(dateString);
+		return date.toLocaleDateString("en-US", {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+		});
+	}
 </script>
 
 <div class="flex flex-col gap-6">
-	<!-- Passenger Information -->
+	<!-- Order Status -->
 	<div class={cardStyle}>
 		<div class="flex items-center gap-2">
-			<Icon icon={UsersIcon} cls="w-5 h-5" />
-			<Title size="h5" color="black">Passengers</Title>
+			<Icon icon={InfoIcon} cls="w-5 h-5" />
+			<Title size="h5" color="black">Order Status</Title>
 		</div>
 
-		{#each order.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>
+		<div class="flex items-center justify-between">
+			<span class="text-gray-600">Current Status</span>
+			<Badge variant={getStatusVariant(order.status)}>
+				{formatStatus(order.status)}
+			</Badge>
+		</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.middleName}
-								{passenger.passengerPii.lastName}
-							</p>
-						</div>
-						<div>
-							<span class="text-gray-500">Nationality</span>
-							<p class="font-medium">
-								{capitalize(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 Info -->
-				<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
-								>{passenger.bagSelection.personalBags}x 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>
+		<div class="flex flex-col gap-2 text-sm">
+			<div class="flex items-center justify-between">
+				<span class="text-gray-600">Order ID</span>
+				<span class="font-medium">#{order.id}</span>
 			</div>
-
-			{#if index < order.passengerInfos.length - 1}
-				<div class="border-b border-dashed"></div>
-			{/if}
-		{/each}
+		</div>
 	</div>
 
-	{#if order.flightTicketInfo.refOIds}
-		{#each order.flightTicketInfo.refOIds as refOId}
-			<CinfoCard icon={PackageIcon} title="Order">
-				<a
-					href={`${adminSiteNavMap.orders}/${refOId}`}
-					class="mt-1 inline-block font-medium text-primary hover:underline"
-				>
-					Reference Order #{refOId}
-				</a>
-			</CinfoCard>
-		{/each}
+	<!-- Timestamps -->
+	<div class={cardStyle}>
+		<div class="flex items-center gap-2">
+			<Icon icon={CalendarIcon} cls="w-5 h-5" />
+			<Title size="h5" color="black">Timeline</Title>
+		</div>
+
+		<div class="flex flex-col gap-3">
+			<div>
+				<span class="text-sm text-gray-500">Created At</span>
+				<p class="font-medium">{formatDate(order.createdAt)}</p>
+			</div>
+
+			<div>
+				<span class="text-sm text-gray-500">Last Updated</span>
+				<p class="font-medium">{formatDate(order.updatedAt)}</p>
+			</div>
+		</div>
+	</div>
+
+	<!-- Additional Info -->
+	{#if order.emailAccountId}
+		<div class={cardStyle}>
+			<div class="flex items-center gap-2">
+				<Icon icon={InfoIcon} cls="w-5 h-5" />
+				<Title size="h5" color="black">Additional Information</Title>
+			</div>
+
+			<div class="flex flex-col gap-2 text-sm">
+				<div class="flex items-center justify-between">
+					<span class="text-gray-600">Email Account ID</span>
+					<span class="font-medium">#{order.emailAccountId}</span>
+				</div>
+
+				{#if order.paymentInfoId}
+					<div class="flex items-center justify-between">
+						<span class="text-gray-600">Payment Info ID</span>
+						<span class="font-medium">#{order.paymentInfoId}</span>
+					</div>
+				{/if}
+			</div>
+		</div>
 	{/if}
 </div>
diff --git a/apps/admin/src/lib/domains/order/view/order.vm.svelte.ts b/apps/admin/src/lib/domains/order/view/order.vm.svelte.ts
index 9d203d0..dcb7b5c 100644
--- a/apps/admin/src/lib/domains/order/view/order.vm.svelte.ts
+++ b/apps/admin/src/lib/domains/order/view/order.vm.svelte.ts
@@ -1,14 +1,14 @@
-import { get } from "svelte/store";
-import {
-	getDefaultOrderCursor,
-	type PaginatedOrderInfoModel,
-	type OrderCursorModel,
-	getDefaultPaginatedOrderInfoModel,
-} from "../data/entities";
+import { encodeCursor } from "$lib/core/string.utils";
 import { trpcApiStore } from "$lib/stores/api";
 import type { Result } from "@pkg/result";
 import { toast } from "svelte-sonner";
-import { encodeCursor } from "$lib/core/string.utils";
+import { get } from "svelte/store";
+import {
+	getDefaultOrderCursor,
+	getDefaultPaginatedOrderInfoModel,
+	type OrderCursorModel,
+	type PaginatedOrderInfoModel,
+} from "../data/entities";
 
 export class OrderViewModel {
 	orderInfo = $state<PaginatedOrderInfoModel>(
@@ -82,16 +82,7 @@ export class OrderViewModel {
 			this.resetOrderInfo();
 			return;
 		}
-		this.orderInfo = {
-			...res.data,
-			data: res.data.data.map((item) => {
-				return {
-					...item,
-					createdAt: new Date(item.createdAt),
-					updatedAt: new Date(item.updatedAt),
-				};
-			}),
-		};
+		this.orderInfo = { ...res.data, data: res.data.data };
 	}
 
 	async searchOrders() {
diff --git a/apps/admin/src/lib/domains/order/view/orders-table-full.svelte b/apps/admin/src/lib/domains/order/view/orders-table-full.svelte
index e72c332..8f78703 100644
--- a/apps/admin/src/lib/domains/order/view/orders-table-full.svelte
+++ b/apps/admin/src/lib/domains/order/view/orders-table-full.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-	import {
-		getCoreRowModel,
-		getPaginationRowModel,
-		getFilteredRowModel,
-		type ColumnDef,
-		type PaginationState,
-		type ColumnFiltersState,
-	} from "@tanstack/table-core";
+	import { goto } from "$app/navigation";
+	import Title from "$lib/components/atoms/title.svelte";
+	import DataTableActions from "$lib/components/molecules/data-table/data-table-actions.svelte";
+	import DataTable from "$lib/components/molecules/data-table/data-table.svelte";
 	import {
 		createSvelteTable,
 		renderComponent,
 	} from "$lib/components/ui/data-table";
-	import DataTable from "$lib/components/molecules/data-table/data-table.svelte";
-	import DataTableActions from "$lib/components/molecules/data-table/data-table-actions.svelte";
-	import Title from "$lib/components/atoms/title.svelte";
-	import { goto } from "$app/navigation";
 	import { adminBasePath } from "$lib/core/constants";
+	import { snakeToSpacedPascal } from "$lib/core/string.utils";
+	import {
+		getCoreRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		type ColumnDef,
+		type ColumnFiltersState,
+		type PaginationState,
+	} from "@tanstack/table-core";
 	import { useDebounce } from "runed";
 	import type { FullOrderModel } from "../data/entities";
 	import { orderVM } from "./order.vm.svelte";
-	import { capitalize, snakeToSpacedPascal } from "$lib/core/string.utils";
 
 	let { data }: { data: FullOrderModel[] } = $props();
 
@@ -33,34 +33,45 @@
 			},
 		},
 		{
-			header: "Places",
-			accessorKey: "direction",
+			header: "Order ID",
+			accessorKey: "orderId",
 			cell: ({ row }) => {
 				const r = row.original as FullOrderModel;
-				return `${r.flightTicketInfo.departure} - ${r.flightTicketInfo.arrival}`;
+				return `#${r.id}`;
 			},
 		},
 		{
-			header: "Type",
-			accessorKey: "type",
+			header: "Product",
+			accessorKey: "product",
 			cell: ({ row }) => {
 				const r = row.original as FullOrderModel;
-				return capitalize(r.flightTicketInfo.flightType.toLowerCase());
+				return r.product.title;
 			},
 		},
 		{
-			header: "Passenger(s)",
-			accessorKey: "passengers",
+			header: "Customer",
+			accessorKey: "customer",
 			cell: ({ row }) => {
-				const _o = (row.original as FullOrderModel).flightTicketInfo
-					.passengerCounts;
-				return `${_o.adults + _o.children}`;
+				const r = row.original as FullOrderModel;
+				if (!r.customerInfo) return "N/A";
+				return `${r.customerInfo.firstName} ${r.customerInfo.lastName}`;
+			},
+		},
+		{
+			header: "Customer Email",
+			accessorKey: "customerEmail",
+			cell: ({ row }) => {
+				const r = row.original as FullOrderModel;
+				return r.customerInfo?.email || "N/A";
 			},
 		},
 		{
 			header: "Price",
 			accessorKey: "orderPrice",
-			cell: ({ row }) => (row.original as FullOrderModel).orderPrice!,
+			cell: ({ row }) => {
+				const r = row.original as FullOrderModel;
+				return `$${r.orderPrice.toFixed(2)}`;
+			},
 		},
 		{
 			header: "Status",
@@ -141,7 +152,7 @@
 		() => debounceDuration,
 	);
 
-	let pageCount = $derived(2);
+	let pageCount = $derived(Math.ceil(data.length / pagination.pageSize) || 1);
 </script>
 
 {#if data.length > 0}
@@ -162,7 +173,7 @@
 			orderVM.query = q;
 			debouncedSearch();
 		}}
-		filterFieldPlaceholder="Search users..."
+		filterFieldPlaceholder="Search orders..."
 	/>
 {:else}
 	<div class="grid h-full place-items-center p-4 py-12 md:p-8 md:py-32">
diff --git a/apps/admin/src/lib/domains/order/view/orders-table.svelte b/apps/admin/src/lib/domains/order/view/orders-table.svelte
index f19c68a..6fc1eee 100644
--- a/apps/admin/src/lib/domains/order/view/orders-table.svelte
+++ b/apps/admin/src/lib/domains/order/view/orders-table.svelte
@@ -1,34 +1,80 @@
 <script lang="ts">
-	import {
-		getCoreRowModel,
-		getPaginationRowModel,
-		getFilteredRowModel,
-		type ColumnDef,
-		type PaginationState,
-		type ColumnFiltersState,
-	} from "@tanstack/table-core";
+	import { goto } from "$app/navigation";
+	import Title from "$lib/components/atoms/title.svelte";
+	import DataTableActions from "$lib/components/molecules/data-table/data-table-actions.svelte";
+	import DataTable from "$lib/components/molecules/data-table/data-table.svelte";
 	import {
 		createSvelteTable,
 		renderComponent,
 	} from "$lib/components/ui/data-table";
-	import DataTable from "$lib/components/molecules/data-table/data-table.svelte";
-	import DataTableActions from "$lib/components/molecules/data-table/data-table-actions.svelte";
-	import Title from "$lib/components/atoms/title.svelte";
-	import { goto } from "$app/navigation";
 	import { adminBasePath } from "$lib/core/constants";
-	import { orderVM } from "./order.vm.svelte";
+	import {
+		getCoreRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		type ColumnDef,
+		type ColumnFiltersState,
+		type PaginationState,
+	} from "@tanstack/table-core";
 	import { useDebounce } from "runed";
+	import { OrderStatus } from "../data/entities";
+	import { orderVM } from "./order.vm.svelte";
+
+	function getStatusVariant(status: OrderStatus) {
+		switch (status) {
+			case OrderStatus.FULFILLED:
+				return "success";
+			case OrderStatus.PARTIALLY_FULFILLED:
+				return "default";
+			case OrderStatus.PENDING_FULFILLMENT:
+				return "secondary";
+			case OrderStatus.CANCELLED:
+				return "destructive";
+			default:
+				return "outline";
+		}
+	}
+
+	function formatStatus(status: OrderStatus): string {
+		return status
+			.split("_")
+			.map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+			.join(" ");
+	}
 
 	// Define columns
 	const columns: ColumnDef<any>[] = [
 		{
-			header: "Username",
-			accessorKey: "username",
+			header: "Order ID",
+			accessorKey: "id",
+			cell: ({ row }) => `#${row.original.id}`,
 		},
 		{
-			header: "Email",
-			accessorKey: "email",
-			cell: ({ getValue }) => getValue<string>().toLowerCase(),
+			header: "Product",
+			id: "product",
+			cell: ({ row }) => {
+				return row.original.product.title;
+			},
+		},
+		{
+			header: "Price",
+			id: "price",
+			cell: ({ row }) => {
+				const basePrice = row.original.displayPrice;
+				const finalPrice = row.original.basePrice;
+				const hasDiscount = row.original.discountAmount > 0;
+
+				return hasDiscount
+					? `$${finalPrice.toFixed(2)} (was $${basePrice.toFixed(2)})`
+					: `$${finalPrice.toFixed(2)}`;
+			},
+		},
+		{
+			header: "Status",
+			accessorKey: "status",
+			cell: ({ row }) => {
+				return formatStatus(row.original.status);
+			},
 		},
 		{
 			header: "Action",
@@ -37,9 +83,11 @@
 				return renderComponent(DataTableActions, {
 					actions: [
 						{
-							title: "View agent",
+							title: "View Order",
 							action: () => {
-								goto(`${adminBasePath}/users/${row.original.id}`);
+								goto(
+									`${adminBasePath}/orders/${row.original.id}`,
+								);
 							},
 						},
 					],
@@ -113,7 +161,7 @@
 			orderVM.query = q;
 			debouncedSearch();
 		}}
-		filterFieldPlaceholder="Search users..."
+		filterFieldPlaceholder="Search orders..."
 	/>
 {:else}
 	<div class="grid place-items-center p-4 py-12 md:p-8 md:py-24">
diff --git a/apps/admin/src/lib/domains/paymentinfo/repository.ts b/apps/admin/src/lib/domains/paymentinfo/repository.ts
index 4b84da1..41d2eab 100644
--- a/apps/admin/src/lib/domains/paymentinfo/repository.ts
+++ b/apps/admin/src/lib/domains/paymentinfo/repository.ts
@@ -2,17 +2,17 @@ import { eq, type Database } from "@pkg/db";
 import { paymentInfo } from "@pkg/db/schema";
 import { Logger } from "@pkg/logger";
 import type { Result } from "@pkg/result";
-import { paymentDetailsModel, type PaymentDetails } from "./data";
+import { paymentInfoModel, type PaymentInfo } from "./data";
 
 export class PaymentInfoRepository {
 	constructor(private db: Database) {}
 
-	async getPaymentInfo(id: number): Promise<Result<PaymentDetails>> {
+	async getPaymentInfo(id: number): Promise<Result<PaymentInfo>> {
 		Logger.info(`Getting payment info with id ${id}`);
 		const out = await this.db.query.paymentInfo.findFirst({
 			where: eq(paymentInfo.id, id),
 		});
-		const parsed = paymentDetailsModel.safeParse(out);
+		const parsed = paymentInfoModel.safeParse(out);
 		if (parsed.error) {
 			Logger.error(parsed.error);
 			return {};
diff --git a/apps/frontend/src/lib/domains/ckflow/data/repository.ts b/apps/frontend/src/lib/domains/ckflow/data/repository.ts
index 349e37e..ac65cb1 100644
--- a/apps/frontend/src/lib/domains/ckflow/data/repository.ts
+++ b/apps/frontend/src/lib/domains/ckflow/data/repository.ts
@@ -1,5 +1,5 @@
 import type { CustomerInfo } from "$lib/domains/passengerinfo/data/entities";
-import type { PaymentDetailsPayload } from "$lib/domains/paymentinfo/data/entities";
+import type { PaymentInfoPayload } from "$lib/domains/paymentinfo/data/entities";
 import { CheckoutStep } from "$lib/domains/ticket/data/entities";
 import type { Database } from "@pkg/db";
 import { and, eq } from "@pkg/db";
@@ -254,7 +254,7 @@ export class CheckoutFlowRepository {
 
 	async syncPaymentInfo(
 		flowId: string,
-		paymentInfo: PaymentDetailsPayload,
+		paymentInfo: PaymentInfoPayload,
 	): Promise<Result<boolean>> {
 		try {
 			const existingSession = await this.db
diff --git a/apps/frontend/src/lib/domains/ckflow/domain/router.ts b/apps/frontend/src/lib/domains/ckflow/domain/router.ts
index 29f14f8..356c122 100644
--- a/apps/frontend/src/lib/domains/ckflow/domain/router.ts
+++ b/apps/frontend/src/lib/domains/ckflow/domain/router.ts
@@ -3,8 +3,8 @@ import {
 	type CustomerInfo,
 } from "$lib/domains/passengerinfo/data/entities";
 import {
-	paymentDetailsPayloadModel,
-	type PaymentDetailsPayload,
+	paymentInfoPayloadModel,
+	type PaymentInfoPayload,
 } from "$lib/domains/paymentinfo/data/entities";
 import { CheckoutStep } from "$lib/domains/ticket/data/entities";
 import { createTRPCRouter, publicProcedure } from "$lib/trpc/t";
@@ -86,7 +86,7 @@ export const ckflowRouter = createTRPCRouter({
 		.mutation(async ({ input }) => {
 			return getCKUseCases().syncPaymentInfo(
 				input.flowId,
-				input.paymentInfo as PaymentDetailsPayload,
+				input.paymentInfo as PaymentInfoPayload,
 			);
 		}),
 
@@ -119,7 +119,7 @@ export const ckflowRouter = createTRPCRouter({
 				flowId: z.string(),
 				payload: z.object({
 					personalInfo: customerInfoModel.optional(),
-					paymentInfo: paymentDetailsPayloadModel.optional(),
+					paymentInfo: paymentInfoPayloadModel.optional(),
 				}),
 			}),
 		)
diff --git a/apps/frontend/src/lib/domains/ckflow/domain/usecases.ts b/apps/frontend/src/lib/domains/ckflow/domain/usecases.ts
index 32832de..c229f76 100644
--- a/apps/frontend/src/lib/domains/ckflow/domain/usecases.ts
+++ b/apps/frontend/src/lib/domains/ckflow/domain/usecases.ts
@@ -1,5 +1,5 @@
 import type { CustomerInfo } from "$lib/domains/passengerinfo/data/entities";
-import type { PaymentDetailsPayload } from "$lib/domains/paymentinfo/data/entities";
+import type { PaymentInfoPayload } from "$lib/domains/paymentinfo/data/entities";
 import { db } from "@pkg/db";
 import { isTimestampMoreThan1MinAgo } from "@pkg/logic/core/date.utils";
 import type {
@@ -58,7 +58,7 @@ export class CheckoutFlowUseCases {
 		return this.repo.syncPersonalInfo(flowId, personalInfo);
 	}
 
-	async syncPaymentInfo(flowId: string, paymentInfo: PaymentDetailsPayload) {
+	async syncPaymentInfo(flowId: string, paymentInfo: PaymentInfoPayload) {
 		return this.repo.syncPaymentInfo(flowId, paymentInfo);
 	}
 
diff --git a/apps/frontend/src/lib/domains/ckflow/view/ckflow.vm.svelte.ts b/apps/frontend/src/lib/domains/ckflow/view/ckflow.vm.svelte.ts
index 305f2fb..3c33cf3 100644
--- a/apps/frontend/src/lib/domains/ckflow/view/ckflow.vm.svelte.ts
+++ b/apps/frontend/src/lib/domains/ckflow/view/ckflow.vm.svelte.ts
@@ -11,7 +11,7 @@ import {
 	type CustomerInfo,
 } from "$lib/domains/passengerinfo/data/entities";
 import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
-import type { PaymentDetailsPayload } from "$lib/domains/paymentinfo/data/entities";
+import type { PaymentInfoPayload } from "$lib/domains/paymentinfo/data/entities";
 import { PaymentMethod } from "$lib/domains/paymentinfo/data/entities";
 import {
 	CheckoutStep,
@@ -302,7 +302,7 @@ export class CKFlowViewModel {
 		}
 	}
 
-	async syncPaymentInfo(paymentInfo: PaymentDetailsPayload) {
+	async syncPaymentInfo(paymentInfo: PaymentInfoPayload) {
 		if (!this.flowId || !this.setupDone || !paymentInfo.cardDetails) {
 			return;
 		}
diff --git a/apps/frontend/src/lib/domains/paymentinfo/data/repository.ts b/apps/frontend/src/lib/domains/paymentinfo/data/repository.ts
index 75856da..825a3fa 100644
--- a/apps/frontend/src/lib/domains/paymentinfo/data/repository.ts
+++ b/apps/frontend/src/lib/domains/paymentinfo/data/repository.ts
@@ -3,9 +3,9 @@ import { paymentInfo } from "@pkg/db/schema";
 import { Logger } from "@pkg/logger";
 import type { Result } from "@pkg/result";
 import {
-	paymentDetailsModel,
-	type PaymentDetails,
-	type PaymentDetailsPayload,
+	paymentInfoModel,
+	type PaymentInfo,
+	type PaymentInfoPayload,
 } from "./entities";
 
 export class PaymentInfoRepository {
@@ -14,9 +14,7 @@ export class PaymentInfoRepository {
 		this.db = db;
 	}
 
-	async createPaymentInfo(
-		data: PaymentDetailsPayload,
-	): Promise<Result<number>> {
+	async createPaymentInfo(data: PaymentInfoPayload): Promise<Result<number>> {
 		const out = await this.db
 			.insert(paymentInfo)
 			.values({
@@ -34,12 +32,12 @@ export class PaymentInfoRepository {
 		return { data: out[0]?.id };
 	}
 
-	async getPaymentInfo(id: number): Promise<Result<PaymentDetails>> {
+	async getPaymentInfo(id: number): Promise<Result<PaymentInfo>> {
 		Logger.info(`Getting payment info with id ${id}`);
 		const out = await this.db.query.paymentInfo.findFirst({
 			where: eq(paymentInfo.id, id),
 		});
-		const parsed = paymentDetailsModel.safeParse(out);
+		const parsed = paymentInfoModel.safeParse(out);
 		if (parsed.error) {
 			Logger.error(parsed.error);
 			return {};
diff --git a/apps/frontend/src/lib/domains/paymentinfo/domain/usecases.ts b/apps/frontend/src/lib/domains/paymentinfo/domain/usecases.ts
index 0fe7632..8e58ed4 100644
--- a/apps/frontend/src/lib/domains/paymentinfo/domain/usecases.ts
+++ b/apps/frontend/src/lib/domains/paymentinfo/domain/usecases.ts
@@ -1,4 +1,4 @@
-import type { PaymentDetailsPayload } from "../data/entities";
+import type { PaymentInfoPayload } from "../data/entities";
 import type { PaymentInfoRepository } from "../data/repository";
 
 export class PaymentInfoUseCases {
@@ -8,7 +8,7 @@ export class PaymentInfoUseCases {
 		this.repo = repo;
 	}
 
-	async createPaymentInfo(payload: PaymentDetailsPayload) {
+	async createPaymentInfo(payload: PaymentInfoPayload) {
 		return this.repo.createPaymentInfo(payload);
 	}
 
diff --git a/apps/frontend/src/lib/domains/ticket/view/checkout/flight-checkout.vm.svelte.ts b/apps/frontend/src/lib/domains/ticket/view/checkout/flight-checkout.vm.svelte.ts
index 13ae49e..828fe33 100644
--- a/apps/frontend/src/lib/domains/ticket/view/checkout/flight-checkout.vm.svelte.ts
+++ b/apps/frontend/src/lib/domains/ticket/view/checkout/flight-checkout.vm.svelte.ts
@@ -2,7 +2,7 @@ import { ckFlowVM } from "$lib/domains/ckflow/view/ckflow.vm.svelte";
 import { newOrderModel } from "$lib/domains/order/data/entities";
 import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
 import {
-	paymentDetailsPayloadModel,
+	paymentInfoPayloadModel,
 	PaymentMethod,
 } from "$lib/domains/paymentinfo/data/entities";
 import { trpcApiStore } from "$lib/stores/api";
@@ -105,7 +105,7 @@ class TicketCheckoutViewModel {
 			return false;
 		}
 
-		const pInfoParsed = paymentDetailsPayloadModel.safeParse({
+		const pInfoParsed = paymentInfoPayloadModel.safeParse({
 			method: PaymentMethod.Card,
 			cardDetails: paymentInfoVM.cardDetails,
 			flightTicketInfoId: ticket.id,
diff --git a/packages/logic/domains/ckflow/data/entities.ts b/packages/logic/domains/ckflow/data/entities.ts
index 6240a45..bd59b75 100644
--- a/packages/logic/domains/ckflow/data/entities.ts
+++ b/packages/logic/domains/ckflow/data/entities.ts
@@ -5,8 +5,8 @@ import {
   customerInfoModel,
 } from "../../passengerinfo/data/entities";
 import {
-  PaymentDetailsPayload,
-  paymentDetailsPayloadModel,
+  PaymentInfoPayload,
+  paymentInfoPayloadModel,
 } from "../../paymentinfo/data/entities";
 import { productModel } from "../../product/data";
 
@@ -78,7 +78,7 @@ export const flowInfoModel = z.object({
 
   pendingActions: pendingActionsModel.default([]),
   personalInfo: z.custom<CustomerInfo>().optional(),
-  paymentInfo: z.custom<PaymentDetailsPayload>().optional(),
+  paymentInfo: z.custom<PaymentInfoPayload>().optional(),
   refOids: z.array(z.number()).optional(),
 
   otpCode: z.coerce.string().optional(),
@@ -134,7 +134,7 @@ export type PrePaymentFlowStepPayload = z.infer<
 
 export const paymentFlowStepPayloadModel = z.object({
   personalInfo: customerInfoModel.optional(),
-  paymentInfo: paymentDetailsPayloadModel.optional(),
+  paymentInfo: paymentInfoPayloadModel.optional(),
 });
 export type PaymentFlowStepPayload = z.infer<
   typeof paymentFlowStepPayloadModel
diff --git a/packages/logic/domains/order/data/entities.ts b/packages/logic/domains/order/data/entities.ts
index 9dda45d..1a9fc14 100644
--- a/packages/logic/domains/order/data/entities.ts
+++ b/packages/logic/domains/order/data/entities.ts
@@ -2,7 +2,7 @@ import { z } from "zod";
 import { paginationModel } from "../../../core/pagination.utils";
 import { encodeCursor } from "../../../core/string.utils";
 import { customerInfoModel } from "../../customerinfo/data";
-import { paymentDetailsPayloadModel } from "../../paymentinfo/data/entities";
+import { paymentInfoPayloadModel } from "../../paymentinfo/data/entities";
 import { productModel } from "../../product/data";
 
 export enum OrderCreationStep {
@@ -35,7 +35,7 @@ export const orderModel = z.object({
   productId: z.number(),
   customerInfoId: z.number().nullish().optional(),
   emailAccountId: z.number().nullish().optional(),
-  paymentDetailsId: z.number().nullish().optional(),
+  paymentInfoId: z.number().nullish().optional(),
 
   createdAt: z.coerce.string(),
   updatedAt: z.coerce.string(),
@@ -108,7 +108,7 @@ export const newOrderModel = orderModel.pick({
   fullfilledPrice: true,
   productId: true,
   customerInfoId: true,
-  paymentDetailsId: true,
+  paymentInfoId: true,
   emailAccountId: true,
 });
 export type NewOrderModel = z.infer<typeof newOrderModel>;
@@ -117,7 +117,7 @@ export const createOrderPayloadModel = z.object({
   product: productModel.optional(),
   productId: z.number().optional(),
   customerInfo: customerInfoModel,
-  paymentDetails: paymentDetailsPayloadModel.optional(),
+  paymentInfo: paymentInfoPayloadModel.optional(),
   orderModel: newOrderModel,
 });
 export type CreateOrderModel = z.infer<typeof createOrderPayloadModel>;
diff --git a/packages/logic/domains/passengerinfo/data/entities.ts b/packages/logic/domains/passengerinfo/data/entities.ts
index 2a10d5c..c7f7020 100644
--- a/packages/logic/domains/passengerinfo/data/entities.ts
+++ b/packages/logic/domains/passengerinfo/data/entities.ts
@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { paymentDetailsModel } from "../../paymentinfo/data/entities";
+import { paymentInfoModel } from "../../paymentinfo/data/entities";
 
 export enum Gender {
   Male = "male",
@@ -45,9 +45,9 @@ export const passengerInfoModel = z.object({
   id: z.number(),
   passengerType: z.enum([PassengerType.Adult, PassengerType.Child]),
   passengerPii: customerInfoModel,
-  paymentDetails: paymentDetailsModel.optional(),
+  paymentInfo: paymentInfoModel.optional(),
   passengerPiiId: z.number().optional(),
-  paymentDetailsId: z.number().optional(),
+  paymentInfoId: z.number().optional(),
   seatSelection: z.any(),
   bagSelection: z.any(),
 
diff --git a/packages/logic/domains/paymentinfo/data/entities.ts b/packages/logic/domains/paymentinfo/data/entities.ts
index bc9a5b9..d509b7a 100644
--- a/packages/logic/domains/paymentinfo/data/entities.ts
+++ b/packages/logic/domains/paymentinfo/data/entities.ts
@@ -74,15 +74,15 @@ export const cardInfoModel = z.object({
 });
 export type CardInfo = z.infer<typeof cardInfoModel>;
 
-export const paymentDetailsPayloadModel = z.object({
+export const paymentInfoPayloadModel = z.object({
   method: z.enum([PaymentMethod.Card]),
   cardDetails: cardInfoModel,
   productId: z.number().int(),
   orderId: z.number().int(),
 });
-export type PaymentDetailsPayload = z.infer<typeof paymentDetailsPayloadModel>;
+export type PaymentInfoPayload = z.infer<typeof paymentInfoPayloadModel>;
 
-export const paymentDetailsModel = cardInfoModel.merge(
+export const paymentInfoModel = cardInfoModel.merge(
   z.object({
     id: z.number().int(),
     productId: z.number().int(),
@@ -91,4 +91,4 @@ export const paymentDetailsModel = cardInfoModel.merge(
     updatedAt: z.string().datetime(),
   }),
 );
-export type PaymentDetails = z.infer<typeof paymentDetailsModel>;
+export type PaymentInfo = z.infer<typeof paymentInfoModel>;