@revenexx/cover 0.1.0

package/app/components/account/orders/AccountOrderDetail.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import type { AccountOrder, AccountOrderStatus, AccountOrderPaymentStatus } from "../../../interfaces/account/order-list";
+
+/**
+ * Detail page content of one order (account pattern: detail = own page):
+ * head facts, fulfillment progress with carrier tracking, positions and
+ * the delivery/billing/payment block — everything a buyer needs to answer
+ * "where is my order?" without contacting support.
+ */
+const props = defineProps<{
+	orderId: string;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const { getImage } = useProductImage();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const { data: order, status, error } = useFetch<AccountOrder>(
+	`/api/account/orders/${props.orderId}`,
+	{ key: `account-order:${props.orderId}` },
+);
+
+const statusColors: Record<AccountOrderStatus, "info" | "warning" | "primary" | "success" | "error"> = {
+	"processing": "info",
+	"approval-pending": "warning",
+	"shipped": "primary",
+	"delivered": "success",
+	"cancelled": "error",
+};
+
+const paymentColors: Record<AccountOrderPaymentStatus, "warning" | "success" | "neutral"> = {
+	open: "warning",
+	paid: "success",
+	refunded: "neutral",
+};
+
+const formatDate = (value: string) => {
+	const parsed = new Date(value);
+	return Number.isNaN(parsed.getTime()) ? value : d(parsed, { dateStyle: "medium" });
+};
+
+/* ---- fulfillment progress -------------------------------------------- */
+const PROGRESS_STEPS = ["ordered", "processing", "shipped", "delivered"] as const;
+
+const showProgress = computed(() =>
+	!!order.value?.progress?.length && order.value.status !== "cancelled");
+
+const reachedIndex = computed(() => {
+	const milestones = order.value?.progress ?? [];
+	return milestones.reduce(
+		(max, milestone) => Math.max(max, PROGRESS_STEPS.indexOf(milestone.step)),
+		0,
+	);
+});
+
+/** Fill centered on the reached step; a delivered order fills the bar. */
+const progressWidth = computed(() => {
+	if (reachedIndex.value >= PROGRESS_STEPS.length - 1) {
+		return "100%";
+	}
+	return `${((reachedIndex.value * 2 + 1) / (PROGRESS_STEPS.length * 2)) * 100}%`;
+});
+
+const milestoneDate = (step: string): string | undefined => {
+	const milestone = order.value?.progress?.find(m => m.step === step);
+	return milestone?.date ? formatDate(milestone.date) : undefined;
+};
+
+/* ---- addresses (seeded as " · "-joined lines) ------------------------- */
+const addressLines = (value: string): string[] => value.split(" · ");
+
+async function copyTracking(): Promise<void> {
+	if (!order.value?.tracking) {
+		return;
+	}
+	await navigator.clipboard.writeText(order.value.tracking.trackingNumber);
+	toast.add({
+		title: t("orders.detail.copied"),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+}
+
+async function orderAgain(): Promise<void> {
+	if (!order.value) {
+		return;
+	}
+	let added = 0;
+	for (const position of order.value.positions) {
+		const ok = cart.addItem({
+			id: position.id,
+			name: position.name,
+			image: position.image ?? "",
+			sku: position.sku,
+			price: position.unitPrice,
+			categorySlug: position.categorySlug,
+			subcategorySlug: position.subcategorySlug,
+		});
+		if (ok && position.quantity > 1) {
+			const item = cart.items.find(i => i.id === position.id && !i.requisitionId);
+			if (item) {
+				cart.updateQuantityByKey(cart.keyOf(item), item.quantity + position.quantity - 1);
+			}
+		}
+		if (ok) {
+			added++;
+		}
+	}
+	toast.add({
+		title: t("orders.orderAgainSuccess", { count: added }),
+		color: "success",
+		icon: icon("success"),
+		duration: 2000,
+	});
+	await navigateTo(to("/cart"));
+}
+</script>
+
+<template>
+	<div>
+		<USkeleton
+			v-if="status === 'pending'"
+			class="h-64 w-full rounded-xl"
+		/>
+
+		<UiFeedbackErrorBoundary
+			v-else-if="error || !order"
+			:title="t('orders.notFound')"
+			:show-retry="false"
+		/>
+
+		<div
+			v-else
+			class="space-y-6"
+		>
+			<!-- Head -->
+			<div
+				class="border border-(--ui-border) rounded-xl p-4 sm:p-5
+				flex flex-wrap items-center gap-x-8 gap-y-3"
+			>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('orders.card.date') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ formatDate(order.date) }}
+					</p>
+				</div>
+				<div v-if="order.orderNumber">
+					<p class="text-xs text-muted">
+						{{ t('orders.card.yourOrderNumber') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ order.orderNumber }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('orders.card.total') }}
+					</p>
+					<p class="text-sm font-semibold text-highlighted tabular-nums">
+						{{ formatCurrency(order.total) }}
+					</p>
+				</div>
+				<div class="flex items-center gap-2 ms-auto">
+					<UBadge
+						:color="statusColors[order.status]"
+						variant="subtle"
+						:label="t(`orders.status.${order.status}`)"
+					/>
+					<UBadge
+						:color="paymentColors[order.paymentStatus]"
+						variant="outline"
+						:label="t(`orders.payment.${order.paymentStatus}`)"
+					/>
+				</div>
+			</div>
+
+			<UAlert
+				v-if="order.status === 'approval-pending' && order.approvers?.length"
+				color="warning"
+				variant="soft"
+				:icon="icon('warning')"
+				:title="t('orders.awaitingApproval', { names: order.approvers.join(', ') })"
+			/>
+
+			<!-- Fulfillment progress + tracking -->
+			<section
+				v-if="showProgress"
+				class="border border-(--ui-border) rounded-xl overflow-hidden"
+			>
+				<h2 class="px-4 sm:px-5 py-3 text-sm font-semibold text-highlighted bg-elevated/60 border-b border-(--ui-border)">
+					{{ t('orders.detail.progressTitle') }}
+				</h2>
+				<div class="p-4 sm:p-5">
+					<div
+						aria-hidden="true"
+						class="overflow-hidden rounded-full bg-elevated h-2"
+					>
+						<div
+							class="h-full rounded-full bg-primary w-(--order-progress) transition-all"
+							:style="{ '--order-progress': progressWidth }"
+						/>
+					</div>
+					<div class="mt-4 grid grid-cols-4 gap-2 text-xs sm:text-sm font-medium">
+						<div
+							v-for="(step, index) in PROGRESS_STEPS"
+							:key="step"
+							:class="[
+								index === 0 ? 'text-left' : index === PROGRESS_STEPS.length - 1 ? 'text-right' : 'text-center',
+								index <= reachedIndex ? 'text-primary' : 'text-muted',
+							]"
+						>
+							<p>{{ t(`orders.detail.steps.${step}`) }}</p>
+							<p
+								v-if="milestoneDate(step)"
+								class="text-xs text-muted font-normal mt-0.5 max-sm:hidden"
+							>
+								{{ milestoneDate(step) }}
+							</p>
+						</div>
+					</div>
+
+					<div
+						v-if="order.tracking"
+						class="mt-5 pt-4 border-t border-(--ui-border) flex flex-wrap items-center gap-x-4 gap-y-2"
+					>
+						<span class="flex items-center gap-2 text-sm text-highlighted font-medium">
+							<UIcon
+								:name="icon('delivery')"
+								class="size-5 text-primary"
+							/>
+							{{ t('orders.detail.trackingVia', { carrier: order.tracking.carrier }) }}
+						</span>
+						<span class="text-sm text-muted tabular-nums">
+							{{ order.tracking.trackingNumber }}
+						</span>
+						<UTooltip :text="t('orders.detail.copyTracking')">
+							<UButton
+								color="neutral"
+								variant="ghost"
+								size="xs"
+								tabindex="0"
+								:icon="icon('copy')"
+								:aria-label="t('orders.detail.copyTracking')"
+								@click="copyTracking"
+							/>
+						</UTooltip>
+					</div>
+					<p
+						v-else
+						class="mt-5 pt-4 border-t border-(--ui-border) text-sm text-muted"
+					>
+						{{ t('orders.detail.noTracking') }}
+					</p>
+				</div>
+			</section>
+
+			<!-- Positions -->
+			<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+				<h2 class="px-4 sm:px-5 py-3 text-sm font-semibold text-highlighted bg-elevated/60 border-b border-(--ui-border)">
+					{{ t('orders.positionsTitle') }}
+				</h2>
+				<ul class="divide-y divide-(--ui-border) px-4 sm:px-5">
+					<li
+						v-for="position in order.positions"
+						:key="position.id"
+						class="flex items-center gap-3 py-3"
+					>
+						<span
+							class="w-14 h-14 shrink-0 flex items-center justify-center rounded-lg
+							bg-elevated/60 ring-1 ring-(--ui-border) p-1.5"
+						>
+							<img
+								v-if="position.image"
+								:src="getImage(position.image)"
+								:alt="position.name"
+								class="max-h-full max-w-full object-contain"
+							>
+						</span>
+						<div class="min-w-0 flex-1">
+							<p class="text-sm font-medium text-highlighted truncate">
+								{{ position.name }}
+							</p>
+							<p class="text-xs text-muted">
+								{{ position.sku }} · {{ position.quantity }}× {{ formatCurrency(position.unitPrice) }}
+							</p>
+						</div>
+						<span class="text-sm tabular-nums text-highlighted shrink-0">
+							{{ formatCurrency(position.lineTotal) }}
+						</span>
+					</li>
+				</ul>
+				<div
+					class="flex justify-between px-4 sm:px-5 py-3 border-t border-(--ui-border)
+					text-sm font-semibold text-highlighted"
+				>
+					<span>{{ t('orders.card.total') }}</span>
+					<span class="tabular-nums">{{ formatCurrency(order.total) }}</span>
+				</div>
+			</section>
+
+			<!-- Delivery & payment -->
+			<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+				<h2 class="px-4 sm:px-5 py-3 text-sm font-semibold text-highlighted bg-elevated/60 border-b border-(--ui-border)">
+					{{ t('orders.detail.infoTitle') }}
+				</h2>
+				<dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-6 p-4 sm:p-5 text-sm">
+					<div v-if="order.deliveryAddress">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.deliveryAddress') }}
+						</dt>
+						<dd class="mt-2 text-muted">
+							<span
+								v-for="line in addressLines(order.deliveryAddress)"
+								:key="line"
+								class="block"
+							>{{ line }}</span>
+						</dd>
+					</div>
+					<div v-if="order.billingAddress">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.detail.billingAddress') }}
+						</dt>
+						<dd class="mt-2 text-muted">
+							<span
+								v-for="line in addressLines(order.billingAddress)"
+								:key="line"
+								class="block"
+							>{{ line }}</span>
+						</dd>
+					</div>
+					<div v-if="order.paymentMethod">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.detail.paymentMethodLabel') }}
+						</dt>
+						<dd class="mt-2 text-muted flex items-center gap-2">
+							<UIcon
+								:name="icon('payment')"
+								class="size-4 text-dimmed"
+							/>
+							{{ t(`paymentMethods.${order.paymentMethod}`) }}
+						</dd>
+					</div>
+					<div v-if="order.tracking">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.detail.trackingTitle') }}
+						</dt>
+						<dd class="mt-2 text-muted">
+							<span class="block">{{ order.tracking.carrier }}</span>
+							<span class="block tabular-nums">{{ order.tracking.trackingNumber }}</span>
+						</dd>
+					</div>
+				</dl>
+			</section>
+
+			<!-- Actions -->
+			<div class="flex justify-end">
+				<UButton
+					v-if="order.status !== 'cancelled'"
+					color="primary"
+					variant="soft"
+					tabindex="0"
+					:icon="icon('reset')"
+					:label="t('orders.orderAgain')"
+					@click="orderAgain"
+				/>
+			</div>
+		</div>
+	</div>
+</template>

package/app/components/account/orders/AccountOrdersTable.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { TableColumn } from "@nuxt/ui";
+
+import type { AccountOrder, AccountOrderStatus, AccountOrderPaymentStatus } from "../../../interfaces/account/order-list";
+
+/**
+ * Order history overview as a data table (datatable-ux): search, status
+ * filter pills with counts and sortable columns; details live on their
+ * own page. "Order again" puts all positions back into the cart.
+ */
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const { orders, status, error } = useAccountOrders();
+const { formatCurrency } = useCartSummaryFormatting();
+const { tableUi } = useDataTable();
+
+const statusColors: Record<AccountOrderStatus, "info" | "warning" | "primary" | "success" | "error"> = {
+	"processing": "info",
+	"approval-pending": "warning",
+	"shipped": "primary",
+	"delivered": "success",
+	"cancelled": "error",
+};
+
+const paymentColors: Record<AccountOrderPaymentStatus, "warning" | "success" | "neutral"> = {
+	open: "warning",
+	paid: "success",
+	refunded: "neutral",
+};
+
+/* ---- search + status filter ------------------------------------------- */
+const search = ref("");
+const statusFilter = ref<string>("all");
+
+const searched = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return orders.value;
+	}
+	return orders.value.filter(order =>
+		[order.id, order.orderNumber ?? "", ...order.positions.map(p => `${p.name} ${p.sku}`)]
+			.some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+const filtered = computed(() =>
+	statusFilter.value === "all"
+		? searched.value
+		: searched.value.filter(order => order.status === statusFilter.value),
+);
+
+const ORDER_STATUSES: AccountOrderStatus[] = [
+	"approval-pending",
+	"processing",
+	"shipped",
+	"delivered",
+	"cancelled",
+];
+
+const filterItems = computed(() => [
+	{ value: "all", label: t("table.filterAll"), count: searched.value.length },
+	...ORDER_STATUSES
+		.map(value => ({
+			value,
+			label: t(`orders.status.${value}`),
+			count: searched.value.filter(order => order.status === value).length,
+		}))
+		.filter(item => item.count > 0),
+]);
+
+/* ---- columns + sorting -------------------------------------------------- */
+const sorting = ref([{ id: "date", desc: true }]);
+
+const columns = computed<TableColumn<AccountOrder>[]>(() => [
+	{ accessorKey: "id", header: t("orders.columns.id") },
+	{ accessorKey: "date", header: t("orders.columns.date") },
+	{
+		id: "positions",
+		accessorFn: row => row.positions.length,
+		header: t("orders.columns.positions"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{
+		accessorKey: "total",
+		header: t("orders.columns.total"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{ accessorKey: "status", header: t("orders.columns.status"), enableSorting: false },
+	{ id: "payment", header: t("orders.columns.payment"), enableSorting: false },
+	{ id: "actions", header: "", enableSorting: false },
+]);
+
+const formatDate = (value: string) => {
+	const parsed = new Date(value);
+	return Number.isNaN(parsed.getTime()) ? value : d(parsed, { dateStyle: "medium" });
+};
+
+/* ---- order again --------------------------------------------------------- */
+async function orderAgain(order: AccountOrder): Promise<void> {
+	let added = 0;
+	for (const position of order.positions) {
+		const ok = cart.addItem({
+			id: position.id,
+			name: position.name,
+			image: position.image ?? "",
+			sku: position.sku,
+			price: position.unitPrice,
+			categorySlug: position.categorySlug,
+			subcategorySlug: position.subcategorySlug,
+		});
+		if (ok && position.quantity > 1) {
+			const item = cart.items.find(i => i.id === position.id && !i.requisitionId);
+			if (item) {
+				cart.updateQuantityByKey(cart.keyOf(item), item.quantity + position.quantity - 1);
+			}
+		}
+		if (ok) {
+			added++;
+		}
+	}
+	toast.add({
+		title: t("orders.orderAgainSuccess", { count: added }),
+		color: "success",
+		icon: icon("success"),
+		duration: 2000,
+	});
+	await navigateTo(to("/cart"));
+}
+</script>
+
+<template>
+	<div>
+		<UiFeedbackErrorBoundary
+			v-if="error"
+			:title="t('orders.errorTitle')"
+			:description="t('orders.errorDescription')"
+			:show-retry="false"
+		/>
+
+		<template v-else>
+			<UiTableToolbar
+				v-model:search="search"
+				v-model:filter="statusFilter"
+				:search-placeholder="t('orders.searchPlaceholder')"
+				:filter-items="filterItems"
+			/>
+
+			<UTable
+				v-model:sorting="sorting"
+				:data="filtered"
+				:columns="columns"
+				:loading="status === 'pending'"
+				:ui="tableUi"
+			>
+				<template #id-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('orders.columns.id')"
+					/>
+				</template>
+				<template #date-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('orders.columns.date')"
+					/>
+				</template>
+				<template #positions-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('orders.columns.positions')"
+					/>
+				</template>
+				<template #total-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('orders.columns.total')"
+					/>
+				</template>
+
+				<template #id-cell="{ row }">
+					<div class="min-w-0">
+						<ULink
+							class="font-semibold text-highlighted hover:text-primary transition-colors"
+							:to="localePath(`/account/orders/${row.original.id}`)"
+						>
+							{{ row.original.id }}
+						</ULink>
+						<p
+							v-if="row.original.orderNumber"
+							class="text-xs text-muted truncate"
+						>
+							{{ row.original.orderNumber }}
+						</p>
+					</div>
+				</template>
+				<template #date-cell="{ row }">
+					{{ formatDate(row.original.date) }}
+				</template>
+				<template #positions-cell="{ row }">
+					<span class="tabular-nums">{{ row.original.positions.length }}</span>
+				</template>
+				<template #total-cell="{ row }">
+					<span class="tabular-nums text-highlighted">{{ formatCurrency(row.original.total) }}</span>
+				</template>
+				<template #status-cell="{ row }">
+					<UBadge
+						:color="statusColors[row.original.status]"
+						variant="subtle"
+						size="sm"
+						:label="t(`orders.status.${row.original.status}`)"
+					/>
+				</template>
+				<template #payment-cell="{ row }">
+					<UBadge
+						:color="paymentColors[row.original.paymentStatus]"
+						variant="outline"
+						size="sm"
+						:label="t(`orders.payment.${row.original.paymentStatus}`)"
+					/>
+				</template>
+				<template #actions-cell="{ row }">
+					<div class="flex items-center justify-end gap-1">
+						<UTooltip :text="t('orders.details')">
+							<UButton
+								color="neutral"
+								variant="ghost"
+								size="sm"
+								tabindex="0"
+								:icon="icon('eye')"
+								:aria-label="t('orders.details')"
+								:to="localePath(`/account/orders/${row.original.id}`)"
+							/>
+						</UTooltip>
+						<UTooltip
+							v-if="row.original.status !== 'cancelled'"
+							:text="t('orders.orderAgain')"
+						>
+							<UButton
+								color="primary"
+								variant="soft"
+								size="sm"
+								tabindex="0"
+								:icon="icon('reset')"
+								:aria-label="t('orders.orderAgain')"
+								@click="orderAgain(row.original)"
+							/>
+						</UTooltip>
+					</div>
+				</template>
+
+				<template #loading>
+					<div class="space-y-3 py-2">
+						<USkeleton
+							v-for="index in 5"
+							:key="index"
+							class="h-9 w-full"
+						/>
+					</div>
+				</template>
+				<template #empty>
+					<UiFeedbackEmptyState
+						v-if="search || statusFilter !== 'all'"
+						:icon="icon('no-results')"
+						:title="t('table.noResults.title')"
+						:description="t('table.noResults.description')"
+					/>
+					<UiFeedbackEmptyState
+						v-else
+						:icon="icon('orders-empty')"
+						:title="t('orders.empty.title')"
+						:description="t('orders.empty.description')"
+					/>
+				</template>
+			</UTable>
+		</template>
+	</div>
+</template>

package/app/components/account/preferences/AccountPreferences.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * Personal ordering preferences. Currently: the target-cart behavior of
+ * the multiple-carts feature — mirror of the "always use the active
+ * cart" option offered by the add-to-cart dialog.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+const { settings } = useB2BContext();
+
+const multiCartEnabled = computed(() => settings.value?.cart.multipleCarts === true);
+
+function onToggle(value: boolean): void {
+	cart.setAlwaysActiveCart(value);
+	toast.add({
+		title: t("preferences.saved"),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+}
+</script>
+
+<template>
+	<div class="space-y-6">
+		<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+			<h2 class="px-4 sm:px-5 py-3 text-sm font-semibold text-highlighted bg-elevated/60 border-b border-(--ui-border)">
+				{{ t('preferences.cartSection') }}
+			</h2>
+			<div class="p-4 sm:p-5 space-y-4">
+				<UAlert
+					v-if="!multiCartEnabled"
+					color="neutral"
+					variant="subtle"
+					:icon="icon('info')"
+					:title="t('cart.multi.page.disabled')"
+				/>
+				<USwitch
+					:model-value="cart.alwaysActiveCart"
+					:disabled="!multiCartEnabled"
+					:label="t('preferences.alwaysActive')"
+					:description="t('preferences.alwaysActiveHint')"
+					@update:model-value="onToggle"
+				/>
+			</div>
+		</section>
+	</div>
+</template>