@revenexx/cover 0.1.0

package/app/components/account/governance/AccountCostCentersTable.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import GovernanceCostCenterModal from "./GovernanceCostCenterModal.vue";
+import type { TableColumn } from "@nuxt/ui";
+
+import type { CostCenter } from "../../../interfaces/b2b";
+
+/**
+ * Cost centers of the organization (account pattern): data table with an
+ * Add button opening the create modal; edit per row, again as a modal.
+ * Search and sortable columns per the datatable-ux baseline.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const localePath = useLocalePath();
+const { costCenters, role, status, refresh } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+const { tableUi } = useDataTable();
+
+const canManage = computed(() => role.value !== null && role.value !== "requester");
+const modalOpen = ref(false);
+const editing = ref<CostCenter | null>(null);
+
+function add(): void {
+	editing.value = null;
+	modalOpen.value = true;
+}
+
+function edit(costCenter: CostCenter): void {
+	editing.value = costCenter;
+	modalOpen.value = true;
+}
+
+/* ---- search ---------------------------------------------------------- */
+const search = ref("");
+
+const filtered = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return costCenters.value;
+	}
+	return costCenters.value.filter(costCenter =>
+		[costCenter.code, costCenter.label, costCenter.limit?.approval.approverName ?? ""]
+			.some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+/* ---- columns + sorting ------------------------------------------------ */
+const sorting = ref([{ id: "code", desc: false }]);
+
+const columns = computed<TableColumn<CostCenter>[]>(() => [
+	{ accessorKey: "code", header: t("governance.costCenters.columns.code") },
+	{ accessorKey: "label", header: t("governance.costCenters.columns.label") },
+	{
+		id: "budget",
+		accessorFn: row => row.limit?.totalBudget ?? -1,
+		header: t("governance.costCenters.columns.budget"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{
+		id: "available",
+		accessorFn: row => row.limit?.availableBudget ?? -1,
+		header: t("governance.costCenters.columns.available"),
+	},
+	{
+		id: "approver",
+		header: t("governance.costCenters.columns.approver"),
+		enableSorting: false,
+	},
+	{ id: "actions", header: "", enableSorting: false },
+]);
+
+function utilization(cc: CostCenter): number | null {
+	const limit = cc.limit;
+	if (!limit?.totalBudget || limit.availableBudget === undefined) {
+		return null;
+	}
+	return Math.min(100, Math.round(((limit.totalBudget - limit.availableBudget) / limit.totalBudget) * 100));
+}
+</script>
+
+<template>
+	<div>
+		<UiTableToolbar
+			v-model:search="search"
+			:search-placeholder="t('governance.costCenters.searchPlaceholder')"
+		>
+			<template
+				v-if="canManage"
+				#actions
+			>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('plus')"
+					:label="t('governance.costCenters.add')"
+					@click="add"
+				/>
+			</template>
+		</UiTableToolbar>
+
+		<UTable
+			v-model:sorting="sorting"
+			:data="filtered"
+			:columns="columns"
+			:loading="status === 'pending'"
+			:ui="tableUi"
+		>
+			<template #code-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.costCenters.columns.code')"
+				/>
+			</template>
+			<template #label-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.costCenters.columns.label')"
+				/>
+			</template>
+			<template #budget-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.costCenters.columns.budget')"
+				/>
+			</template>
+			<template #available-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.costCenters.columns.available')"
+				/>
+			</template>
+
+			<template #label-cell="{ row }">
+				<ULink
+					class="font-semibold text-highlighted hover:text-primary transition-colors"
+					:to="localePath(`/account/cost-centers/${row.original.id}`)"
+				>
+					{{ row.original.label }}
+				</ULink>
+			</template>
+			<template #budget-cell="{ row }">
+				<span
+					v-if="row.original.limit?.totalBudget !== undefined"
+					class="tabular-nums"
+				>
+					{{ formatCurrency(row.original.limit.totalBudget) }}
+				</span>
+				<span
+					v-else
+					class="text-dimmed"
+				>—</span>
+			</template>
+			<template #available-cell="{ row }">
+				<div
+					v-if="row.original.limit?.availableBudget !== undefined"
+					class="flex items-center gap-2 min-w-32"
+				>
+					<span class="tabular-nums shrink-0">
+						{{ formatCurrency(row.original.limit.availableBudget) }}
+					</span>
+					<div class="h-1.5 flex-1 rounded-full bg-elevated overflow-hidden">
+						<div
+							class="h-full rounded-full"
+							:class="(utilization(row.original) ?? 0) >= 90 ? 'bg-warning' : 'bg-primary'"
+							:style="{ width: `${utilization(row.original) ?? 0}%` }"
+						/>
+					</div>
+				</div>
+				<span
+					v-else
+					class="text-dimmed"
+				>—</span>
+			</template>
+			<template #approver-cell="{ row }">
+				<span v-if="row.original.limit?.approval.approverName">
+					{{ row.original.limit.approval.approverName }}
+					<UBadge
+						v-if="row.original.limit.approval.required"
+						color="warning"
+						variant="subtle"
+						size="sm"
+						class="ml-1.5"
+						:label="t('governance.approvalRequired')"
+					/>
+				</span>
+				<span
+					v-else
+					class="text-dimmed"
+				>—</span>
+			</template>
+			<template #actions-cell="{ row }">
+				<div class="flex items-center justify-end gap-1">
+					<UTooltip :text="t('governance.requisitions.details')">
+						<UButton
+							color="neutral"
+							variant="ghost"
+							size="sm"
+							tabindex="0"
+							:icon="icon('eye')"
+							:aria-label="t('governance.requisitions.details')"
+							:to="localePath(`/account/cost-centers/${row.original.id}`)"
+						/>
+					</UTooltip>
+					<UTooltip
+						v-if="canManage"
+						:text="t('governance.edit')"
+					>
+						<UButton
+							:icon="icon('edit')"
+							color="neutral"
+							variant="ghost"
+							size="sm"
+							tabindex="0"
+							:aria-label="t('governance.edit')"
+							@click="edit(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"
+					:icon="icon('no-results')"
+					:title="t('table.noResults.title')"
+					:description="t('table.noResults.description')"
+				/>
+				<UiFeedbackEmptyState
+					v-else
+					:icon="icon('empty')"
+					:title="t('governance.costCenters.empty.title')"
+					:description="t('governance.costCenters.empty.description')"
+				/>
+			</template>
+		</UTable>
+
+		<GovernanceCostCenterModal
+			v-model:open="modalOpen"
+			:cost-center="editing"
+			@saved="refresh"
+		/>
+	</div>
+</template>

package/app/components/account/governance/AccountRequisitionDetail.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import type { Requisition, RequisitionStatus, WorkflowHistoryAction } from "../../../interfaces/b2b";
+
+/**
+ * Detail page content of one requisition: head facts, positions with
+ * images and cost centers, delivery address and the workflow audit trail
+ * as a timeline — the full compliance picture of one order request.
+ */
+const props = defineProps<{
+	requisitionId: string;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const { role, costCenterById } = useB2BContext();
+const { getImage } = useProductImage();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const { data: requisition, status, error } = useFetch<Requisition>(
+	`/api/account/requisitions/${props.requisitionId}`,
+	{ key: `account-requisition:${props.requisitionId}` },
+);
+
+const statusColors: Record<RequisitionStatus, "warning" | "success" | "error"> = {
+	open: "warning",
+	ordered: "success",
+	cancelled: "error",
+};
+
+const actionColors: Record<WorkflowHistoryAction, "neutral" | "info" | "success" | "warning" | "error"> = {
+	submitted: "info",
+	forwarded: "info",
+	approved: "success",
+	escalated: "warning",
+	rejected: "error",
+	ordered: "success",
+	cancelled: "error",
+};
+
+/** Timeline dot colors matching the action badge palette. */
+const actionDots: Record<WorkflowHistoryAction, string> = {
+	submitted: "bg-info",
+	forwarded: "bg-info",
+	approved: "bg-success",
+	escalated: "bg-warning",
+	rejected: "bg-error",
+	ordered: "bg-success",
+	cancelled: "bg-error",
+};
+
+const canLoad = computed(() =>
+	role.value !== null && role.value !== "requester"
+	&& requisition.value?.status === "open"
+	&& !cart.requisitions.some(r => r.id === props.requisitionId),
+);
+
+const costCenterLabel = (id?: string): string | null =>
+	id ? (costCenterById.value.get(id)?.label ?? id) : null;
+
+const addressLines = computed(() => {
+	const address = requisition.value?.deliveryAddress;
+	if (!address) {
+		return [];
+	}
+	return [
+		address.company,
+		address.street,
+		`${address.postalCode} ${address.city}`.trim(),
+		address.country,
+	].filter(Boolean);
+});
+
+const formatDate = (value: string) =>
+	d(new Date(value), { dateStyle: "medium" });
+
+const formatDateTime = (value: string) =>
+	d(new Date(value), { dateStyle: "medium", timeStyle: "short" });
+
+async function loadIntoCart(): Promise<void> {
+	if (!requisition.value) {
+		return;
+	}
+	const added = cart.addRequisition(requisition.value);
+	if (!added) {
+		toast.add({
+			title: t("cart.requisition.mergeRejected"),
+			description: t("cart.requisition.mergeRejectedDescription"),
+			color: "warning",
+			icon: icon("warning"),
+		});
+		return;
+	}
+	await navigateTo(to("/cart"));
+}
+</script>
+
+<template>
+	<div>
+		<USkeleton
+			v-if="status === 'pending'"
+			class="h-64 w-full rounded-xl"
+		/>
+
+		<UiFeedbackErrorBoundary
+			v-else-if="error || !requisition"
+			:title="t('governance.requisitions.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('governance.requisitions.columns.workflow') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ requisition.workflowName }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('governance.requisitions.columns.requestedBy') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ requisition.requestedBy.name }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('governance.requisitions.requestedAtShort') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ formatDate(requisition.requestedAt) }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('governance.requisitions.columns.totalValue') }}
+					</p>
+					<p class="text-sm font-semibold text-highlighted tabular-nums">
+						{{ formatCurrency(requisition.totalValue) }}
+					</p>
+				</div>
+				<div class="flex items-center gap-3 ms-auto">
+					<UBadge
+						:color="statusColors[requisition.status]"
+						variant="subtle"
+						:label="t(`governance.requisitions.status.${requisition.status}`)"
+					/>
+					<UButton
+						v-if="canLoad"
+						color="primary"
+						size="sm"
+						tabindex="0"
+						:icon="icon('cart')"
+						:label="t('cart.requisition.load')"
+						@click="loadIntoCart"
+					/>
+				</div>
+			</div>
+
+			<!-- 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('governance.requisitions.positionsTitle') }}
+				</h2>
+				<ul class="divide-y divide-(--ui-border) px-4 sm:px-5">
+					<li
+						v-for="item in requisition.items"
+						:key="`${requisition.id}-${item.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="item.image"
+								:src="getImage(item.image)"
+								:alt="item.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">
+								{{ item.name }}
+							</p>
+							<p class="text-xs text-muted">
+								{{ item.sku }} · {{ item.quantity }}× {{ formatCurrency(item.price) }}
+								<template v-if="costCenterLabel(item.costCenterId)">
+									· {{ costCenterLabel(item.costCenterId) }}
+								</template>
+							</p>
+							<p
+								v-for="text in item.positionTexts ?? []"
+								:key="text"
+								class="text-xs text-muted italic truncate"
+							>
+								{{ text }}
+							</p>
+						</div>
+						<span class="text-sm tabular-nums text-highlighted shrink-0">
+							{{ formatCurrency(item.price * item.quantity) }}
+						</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('governance.requisitions.columns.totalValue') }}</span>
+					<span class="tabular-nums">{{ formatCurrency(requisition.totalValue) }}</span>
+				</div>
+			</section>
+
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+				<!-- Audit trail -->
+				<section
+					v-if="requisition.history?.length"
+					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('governance.requisitions.historyTitle') }}
+					</h2>
+					<ol class="p-4 sm:p-5">
+						<li
+							v-for="(entry, index) in requisition.history"
+							:key="entry.id"
+							class="relative flex gap-4 pb-6 last:pb-0"
+						>
+							<span
+								v-if="index < (requisition.history?.length ?? 0) - 1"
+								aria-hidden="true"
+								class="absolute left-1.5 top-4 -bottom-1 w-px bg-(--ui-border)"
+							/>
+							<span
+								aria-hidden="true"
+								class="relative mt-1.5 size-3 shrink-0 rounded-full ring-4 ring-default"
+								:class="actionDots[entry.action]"
+							/>
+							<div class="min-w-0 text-sm">
+								<div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+									<UBadge
+										:color="actionColors[entry.action]"
+										variant="subtle"
+										size="sm"
+										:label="t(`governance.requisitions.actions.${entry.action}`)"
+									/>
+									<span class="font-medium text-highlighted">{{ entry.actorName }}</span>
+								</div>
+								<p class="text-xs text-muted mt-1">
+									{{ t('governance.requisitions.step', { step: entry.stepSequence }) }}
+									· {{ formatDateTime(entry.actionDate) }}
+								</p>
+								<p
+									v-if="entry.comment"
+									class="text-xs text-muted italic mt-1 border-s-2 border-(--ui-border) ps-2"
+								>
+									{{ entry.comment }}
+								</p>
+							</div>
+						</li>
+					</ol>
+				</section>
+
+				<!-- Delivery address -->
+				<section
+					v-if="addressLines.length"
+					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.deliveryAddress') }}
+					</h2>
+					<address class="not-italic p-4 sm:p-5 text-sm text-muted">
+						<span
+							v-for="line in addressLines"
+							:key="line"
+							class="block"
+						>{{ line }}</span>
+					</address>
+				</section>
+			</div>
+		</div>
+	</div>
+</template>