@revenexx/cover 0.1.0

package/app/components/account/carts/AccountCartsTable.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import CartNameModal from "../../cart/manage/CartNameModal.vue";
+import type { TableColumn } from "@nuxt/ui";
+
+import type { CartSummaryEntry } from "../../../composables/useCartStore";
+
+/**
+ * All carts currently being filled (multiple-carts feature) as a data
+ * table: switch the active cart, create, rename and delete — the cart
+ * content itself is edited on the cart page.
+ */
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const { settings } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+const { tableUi } = useDataTable();
+
+const enabled = computed(() => settings.value?.cart.multipleCarts === true);
+
+/* ---- search ----------------------------------------------------------- */
+const search = ref("");
+
+const filtered = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return cart.cartSummaries;
+	}
+	return cart.cartSummaries.filter(summary => summary.name.toLowerCase().includes(query));
+});
+
+/* ---- columns + sorting -------------------------------------------------- */
+const sorting = ref([{ id: "updatedAt", desc: true }]);
+
+const columns = computed<TableColumn<CartSummaryEntry>[]>(() => [
+	{ accessorKey: "name", header: t("cart.multi.page.columns.name") },
+	{
+		accessorKey: "positions",
+		header: t("cart.multi.page.columns.positions"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{
+		accessorKey: "value",
+		header: t("cart.multi.page.columns.value"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{ accessorKey: "updatedAt", header: t("cart.multi.page.columns.updatedAt") },
+	{ id: "status", header: t("cart.multi.page.columns.status"), enableSorting: false },
+	{ id: "actions", header: "", enableSorting: false },
+]);
+
+const formatDate = (value: string) => d(new Date(value), { dateStyle: "medium", timeStyle: "short" });
+
+/* ---- actions ------------------------------------------------------------ */
+const createOpen = ref(false);
+const renameOpen = ref(false);
+const renameTarget = ref<CartSummaryEntry | null>(null);
+const deleteTarget = ref<CartSummaryEntry | null>(null);
+
+function onCreate(name: string): void {
+	cart.createCart(name, false);
+	toast.add({
+		title: t("cart.multi.created", { name }),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+}
+
+function openRename(summary: CartSummaryEntry): void {
+	renameTarget.value = summary;
+	renameOpen.value = true;
+}
+
+function onRename(name: string): void {
+	if (renameTarget.value) {
+		cart.renameCart(renameTarget.value.id, name);
+	}
+}
+
+async function activate(summary: CartSummaryEntry): Promise<void> {
+	cart.switchCart(summary.id);
+	toast.add({
+		title: t("cart.multi.switched", { name: summary.name }),
+		color: "primary",
+		icon: icon("cart"),
+		duration: 1500,
+	});
+	await navigateTo(to("/cart"));
+}
+
+function onDelete(): void {
+	if (!deleteTarget.value) {
+		return;
+	}
+	cart.deleteCart(deleteTarget.value.id);
+	deleteTarget.value = null;
+	toast.add({
+		title: t("cart.multi.deleted"),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+}
+</script>
+
+<template>
+	<div>
+		<UAlert
+			v-if="!enabled"
+			color="neutral"
+			variant="subtle"
+			:icon="icon('info')"
+			:title="t('cart.multi.page.disabled')"
+		/>
+
+		<template v-else>
+			<UiTableToolbar
+				v-model:search="search"
+				:search-placeholder="t('cart.multi.page.searchPlaceholder')"
+			>
+				<template #actions>
+					<UButton
+						color="primary"
+						tabindex="0"
+						:icon="icon('plus')"
+						:label="t('cart.multi.newCart')"
+						@click="createOpen = true"
+					/>
+				</template>
+			</UiTableToolbar>
+
+			<UTable
+				v-model:sorting="sorting"
+				:data="filtered"
+				:columns="columns"
+				:ui="tableUi"
+			>
+				<template #name-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('cart.multi.page.columns.name')"
+					/>
+				</template>
+				<template #positions-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('cart.multi.page.columns.positions')"
+					/>
+				</template>
+				<template #value-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('cart.multi.page.columns.value')"
+					/>
+				</template>
+				<template #updatedAt-header="{ column }">
+					<UiTableSortButton
+						:column="column"
+						:label="t('cart.multi.page.columns.updatedAt')"
+					/>
+				</template>
+
+				<template #name-cell="{ row }">
+					<span class="font-semibold text-highlighted">{{ row.original.name }}</span>
+				</template>
+				<template #positions-cell="{ row }">
+					<span class="tabular-nums">{{ row.original.positions }}</span>
+				</template>
+				<template #value-cell="{ row }">
+					<span class="tabular-nums text-highlighted">{{ formatCurrency(row.original.value) }}</span>
+				</template>
+				<template #updatedAt-cell="{ row }">
+					{{ formatDate(row.original.updatedAt) }}
+				</template>
+				<template #status-cell="{ row }">
+					<UBadge
+						v-if="row.original.active"
+						color="primary"
+						variant="subtle"
+						size="sm"
+						:label="t('cart.multi.activeBadge')"
+					/>
+					<span
+						v-else
+						class="text-dimmed"
+					>—</span>
+				</template>
+				<template #actions-cell="{ row }">
+					<div class="flex items-center justify-end gap-1">
+						<UTooltip
+							v-if="!row.original.active"
+							:text="t('cart.multi.activate')"
+						>
+							<UButton
+								color="primary"
+								variant="soft"
+								size="sm"
+								tabindex="0"
+								:icon="icon('cart')"
+								:aria-label="t('cart.multi.activate')"
+								@click="activate(row.original)"
+							/>
+						</UTooltip>
+						<UTooltip :text="t('cart.multi.rename')">
+							<UButton
+								color="neutral"
+								variant="ghost"
+								size="sm"
+								tabindex="0"
+								:icon="icon('edit')"
+								:aria-label="t('cart.multi.rename')"
+								@click="openRename(row.original)"
+							/>
+						</UTooltip>
+						<UTooltip :text="t('cart.multi.delete')">
+							<UButton
+								color="neutral"
+								variant="ghost"
+								size="sm"
+								tabindex="0"
+								:icon="icon('delete')"
+								:aria-label="t('cart.multi.delete')"
+								@click="deleteTarget = row.original"
+							/>
+						</UTooltip>
+					</div>
+				</template>
+
+				<template #empty>
+					<UiFeedbackEmptyState
+						:icon="icon('cart')"
+						:title="t('cart.multi.page.empty.title')"
+						:description="t('cart.multi.page.empty.description')"
+					/>
+				</template>
+			</UTable>
+
+			<CartNameModal
+				v-model:open="createOpen"
+				mode="create"
+				@save="onCreate"
+			/>
+			<CartNameModal
+				v-model:open="renameOpen"
+				mode="rename"
+				:initial-name="renameTarget?.name"
+				@save="onRename"
+			/>
+
+			<UModal
+				:open="deleteTarget !== null"
+				:title="t('cart.multi.deleteTitle')"
+				@update:open="(value: boolean) => { if (!value) deleteTarget = null; }"
+			>
+				<template #body>
+					<p class="text-sm text-muted">
+						{{ t('cart.multi.deleteDescription', {
+							name: deleteTarget?.name ?? '',
+							count: deleteTarget?.positions ?? 0,
+						}) }}
+					</p>
+				</template>
+				<template #footer>
+					<UButton
+						color="neutral"
+						variant="ghost"
+						tabindex="0"
+						:label="t('cart.item.cancel')"
+						@click="deleteTarget = null"
+					/>
+					<UButton
+						color="error"
+						tabindex="0"
+						:label="t('cart.multi.delete')"
+						@click="onDelete"
+					/>
+				</template>
+			</UModal>
+		</template>
+	</div>
+</template>

package/app/components/account/dashboard/AccountDashboard.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import type { Requisition } from "../../../interfaces/b2b";
+import type { AccountOrderStatus } from "../../../interfaces/account/order-list";
+
+/**
+ * The account dashboard: KPI band (open orders, awaiting approval, 30-day
+ * spend, budget utilization), recent orders, open requisitions, cost
+ * center budget bars and quick actions — the buyer's daily starting point.
+ */
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const auth = useAuthStore();
+const { orders, status: ordersStatus } = useAccountOrders();
+const { costCenters, status: contextStatus } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const { data: requisitions, status: requisitionsStatus } = useFetch<Requisition[]>(
+	"/api/account/requisitions",
+	{ key: "account-requisitions", default: () => [] },
+);
+
+const pending = computed(() =>
+	ordersStatus.value === "pending"
+	|| contextStatus.value === "pending"
+	|| requisitionsStatus.value === "pending");
+
+/* ---- KPIs ------------------------------------------------------------ */
+const OPEN_STATUSES: AccountOrderStatus[] = ["processing", "approval-pending", "shipped"];
+
+const openOrdersCount = computed(() =>
+	orders.value.filter(order => OPEN_STATUSES.includes(order.status)).length);
+
+const awaitingApprovalCount = computed(() =>
+	orders.value.filter(order => order.status === "approval-pending").length
+	+ requisitions.value.filter(requisition => requisition.status === "open").length);
+
+const spend30 = computed(() => {
+	const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
+	return orders.value
+		.filter(order => order.status !== "cancelled" && new Date(order.date).getTime() >= cutoff)
+		.reduce((sum, order) => sum + order.total, 0);
+});
+
+const budgetedCostCenters = computed(() =>
+	costCenters.value.filter(cc =>
+		cc.limit?.totalBudget !== undefined && cc.limit.availableBudget !== undefined));
+
+const budgetUtilization = computed(() => {
+	const total = budgetedCostCenters.value.reduce((sum, cc) => sum + (cc.limit?.totalBudget ?? 0), 0);
+	if (!total) {
+		return null;
+	}
+	const available = budgetedCostCenters.value.reduce((sum, cc) => sum + (cc.limit?.availableBudget ?? 0), 0);
+	return Math.round(((total - available) / total) * 100);
+});
+
+/* ---- lists ------------------------------------------------------------ */
+const recentOrders = computed(() => orders.value.slice(0, 5));
+
+const openRequisitions = computed(() =>
+	requisitions.value.filter(requisition => requisition.status === "open").slice(0, 4));
+
+const statusColors: Record<AccountOrderStatus, "info" | "warning" | "primary" | "success" | "error"> = {
+	"processing": "info",
+	"approval-pending": "warning",
+	"shipped": "primary",
+	"delivered": "success",
+	"cancelled": "error",
+};
+
+const utilization = (used: number, total: number): number =>
+	total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0;
+
+const budgetBars = computed(() =>
+	budgetedCostCenters.value.map((cc) => {
+		const total = cc.limit?.totalBudget ?? 0;
+		const available = cc.limit?.availableBudget ?? 0;
+		return { id: cc.id, label: cc.label, total, available, used: utilization(total - available, total) };
+	}));
+
+const formatDate = (value: string) => {
+	const parsed = new Date(value);
+	return Number.isNaN(parsed.getTime()) ? value : d(parsed, { dateStyle: "medium" });
+};
+
+/* ---- quick actions ----------------------------------------------------- */
+const quickActions = [
+	{ to: "/account/direct-order", labelKey: "directOrder.title", token: "direct-order" },
+	{ to: "/account/orders", labelKey: "account.nav.orders", token: "orders" },
+	{ to: "/account/order-lists", labelKey: "account.nav.orderLists", token: "order-list" },
+	{ to: "/account/requisitions", labelKey: "account.nav.requisitions", token: "check" },
+	{ to: "/account/cost-centers", labelKey: "account.nav.costCenters", token: "briefcase" },
+];
+
+/** Divider-separated KPI cells: 2-col grid on mobile, 4-col from lg. */
+const statCell = `p-4 sm:p-5 border-(--ui-border)
+	max-lg:nth-[n+3]:border-t max-lg:nth-[2n]:border-l lg:not-first:border-l`;
+</script>
+
+<template>
+	<div>
+		<!-- Greeting -->
+		<div class="mb-8">
+			<h1 class="text-2xl font-semibold text-highlighted">
+				{{ auth.user?.name
+					? t('account.dashboard.greeting', { name: auth.user.name })
+					: t('account.dashboard.title') }}
+			</h1>
+			<p class="text-sm text-muted mt-1">
+				{{ t('account.dashboard.description') }}
+			</p>
+		</div>
+
+		<div
+			v-if="pending"
+			class="space-y-6"
+		>
+			<USkeleton class="h-28 w-full rounded-xl" />
+			<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+				<USkeleton class="h-72 rounded-xl lg:col-span-2" />
+				<USkeleton class="h-72 rounded-xl" />
+			</div>
+		</div>
+
+		<div
+			v-else
+			class="space-y-6"
+		>
+			<!-- KPI band -->
+			<dl class="border border-(--ui-border) rounded-xl grid grid-cols-2 lg:grid-cols-4">
+				<div :class="statCell">
+					<dt class="text-sm text-muted truncate">
+						{{ t('account.dashboard.stats.openOrders') }}
+					</dt>
+					<dd class="mt-1 text-2xl font-semibold text-highlighted tabular-nums">
+						{{ openOrdersCount }}
+					</dd>
+				</div>
+				<div :class="statCell">
+					<dt class="text-sm text-muted truncate">
+						{{ t('account.dashboard.stats.awaitingApproval') }}
+					</dt>
+					<dd
+						class="mt-1 text-2xl font-semibold tabular-nums"
+						:class="awaitingApprovalCount > 0 ? 'text-warning' : 'text-highlighted'"
+					>
+						{{ awaitingApprovalCount }}
+					</dd>
+				</div>
+				<div :class="statCell">
+					<dt class="text-sm text-muted truncate">
+						{{ t('account.dashboard.stats.spend30') }}
+					</dt>
+					<dd class="mt-1 text-2xl font-semibold text-highlighted tabular-nums">
+						{{ formatCurrency(spend30) }}
+					</dd>
+				</div>
+				<div :class="statCell">
+					<dt class="text-sm text-muted truncate">
+						{{ t('account.dashboard.stats.budgetUsed') }}
+					</dt>
+					<dd
+						class="mt-1 text-2xl font-semibold tabular-nums"
+						:class="(budgetUtilization ?? 0) >= 90 ? 'text-warning' : 'text-highlighted'"
+					>
+						{{ budgetUtilization !== null ? `${budgetUtilization} %` : '—' }}
+					</dd>
+				</div>
+			</dl>
+
+			<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
+				<!-- Left column: recent orders + open requisitions -->
+				<div class="lg:col-span-2 space-y-6">
+					<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+						<header class="flex items-center justify-between px-4 sm:px-5 py-3 bg-elevated/60 border-b border-(--ui-border)">
+							<h2 class="text-sm font-semibold text-highlighted">
+								{{ t('account.dashboard.recentOrders') }}
+							</h2>
+							<ULink
+								class="text-xs font-medium text-primary hover:underline"
+								:to="localePath('/account/orders')"
+							>
+								{{ t('account.dashboard.viewAll') }} →
+							</ULink>
+						</header>
+						<ul
+							v-if="recentOrders.length"
+							class="divide-y divide-(--ui-border)"
+						>
+							<li
+								v-for="order in recentOrders"
+								:key="order.id"
+							>
+								<NuxtLink
+									:to="localePath(`/account/orders/${order.id}`)"
+									class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 sm:px-5 py-3
+									hover:bg-elevated/40 transition-colors"
+								>
+									<span class="text-sm font-semibold text-highlighted">{{ order.id }}</span>
+									<span class="text-xs text-muted">{{ formatDate(order.date) }}</span>
+									<span class="flex items-center gap-3 ms-auto">
+										<UBadge
+											:color="statusColors[order.status]"
+											variant="subtle"
+											size="sm"
+											:label="t(`orders.status.${order.status}`)"
+										/>
+										<span class="text-sm tabular-nums text-highlighted min-w-20 text-right">
+											{{ formatCurrency(order.total) }}
+										</span>
+									</span>
+								</NuxtLink>
+							</li>
+						</ul>
+						<p
+							v-else
+							class="px-4 sm:px-5 py-6 text-sm text-muted"
+						>
+							{{ t('account.dashboard.noOrders') }}
+						</p>
+					</section>
+
+					<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+						<header class="flex items-center justify-between px-4 sm:px-5 py-3 bg-elevated/60 border-b border-(--ui-border)">
+							<h2 class="text-sm font-semibold text-highlighted">
+								{{ t('account.dashboard.openRequisitions') }}
+							</h2>
+							<ULink
+								class="text-xs font-medium text-primary hover:underline"
+								:to="localePath('/account/requisitions')"
+							>
+								{{ t('account.dashboard.viewAll') }} →
+							</ULink>
+						</header>
+						<ul
+							v-if="openRequisitions.length"
+							class="divide-y divide-(--ui-border)"
+						>
+							<li
+								v-for="requisition in openRequisitions"
+								:key="requisition.id"
+							>
+								<NuxtLink
+									:to="localePath(`/account/requisitions/${requisition.id}`)"
+									class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 sm:px-5 py-3
+									hover:bg-elevated/40 transition-colors"
+								>
+									<span class="text-sm font-semibold text-highlighted">{{ requisition.id }}</span>
+									<span class="text-xs text-muted">{{ requisition.requestedBy.name }}</span>
+									<span class="text-sm tabular-nums text-highlighted ms-auto">
+										{{ formatCurrency(requisition.totalValue) }}
+									</span>
+								</NuxtLink>
+							</li>
+						</ul>
+						<p
+							v-else
+							class="px-4 sm:px-5 py-6 text-sm text-muted"
+						>
+							{{ t('account.dashboard.noRequisitions') }}
+						</p>
+					</section>
+				</div>
+
+				<!-- Right column: budgets + quick actions -->
+				<div class="space-y-6">
+					<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+						<header class="flex items-center justify-between px-4 sm:px-5 py-3 bg-elevated/60 border-b border-(--ui-border)">
+							<h2 class="text-sm font-semibold text-highlighted">
+								{{ t('account.dashboard.budgets') }}
+							</h2>
+							<ULink
+								class="text-xs font-medium text-primary hover:underline"
+								:to="localePath('/account/cost-centers')"
+							>
+								{{ t('account.dashboard.viewAll') }} →
+							</ULink>
+						</header>
+						<ul
+							v-if="budgetBars.length"
+							class="divide-y divide-(--ui-border)"
+						>
+							<li
+								v-for="bar in budgetBars"
+								:key="bar.id"
+								class="px-4 sm:px-5 py-3"
+							>
+								<div class="flex items-baseline justify-between gap-2">
+									<p class="text-sm font-medium text-highlighted truncate">
+										{{ bar.label }}
+									</p>
+									<p class="text-xs text-muted tabular-nums shrink-0">
+										{{ bar.used }} %
+									</p>
+								</div>
+								<div class="mt-2 h-1.5 rounded-full bg-elevated overflow-hidden">
+									<div
+										class="h-full rounded-full w-(--budget-used)"
+										:class="bar.used >= 90 ? 'bg-warning' : 'bg-primary'"
+										:style="{ '--budget-used': `${bar.used}%` }"
+									/>
+								</div>
+								<p class="mt-1.5 text-xs text-muted tabular-nums">
+									{{ t('account.dashboard.budgetAvailable', {
+										available: formatCurrency(bar.available),
+										total: formatCurrency(bar.total),
+									}) }}
+								</p>
+							</li>
+						</ul>
+						<p
+							v-else
+							class="px-4 sm:px-5 py-6 text-sm text-muted"
+						>
+							{{ t('account.dashboard.noBudgets') }}
+						</p>
+					</section>
+
+					<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('account.dashboard.quickAccess') }}
+						</h2>
+						<ul class="divide-y divide-(--ui-border)">
+							<li
+								v-for="action in quickActions"
+								:key="action.to"
+							>
+								<NuxtLink
+									:to="localePath(action.to)"
+									class="flex items-center gap-3 px-4 sm:px-5 py-3 text-sm text-highlighted
+									hover:bg-elevated/40 transition-colors"
+								>
+									<UIcon
+										:name="icon(action.token)"
+										class="size-4.5 text-primary shrink-0"
+									/>
+									<span class="truncate">{{ t(action.labelKey) }}</span>
+									<UIcon
+										:name="icon('chevron-right')"
+										class="size-4 text-dimmed ms-auto shrink-0"
+									/>
+								</NuxtLink>
+							</li>
+						</ul>
+					</section>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>