@revenexx/cover 0.1.0

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

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import type { TableColumn } from "@nuxt/ui";
+
+import type { Requisition, RequisitionStatus } from "../../../interfaces/b2b";
+
+/**
+ * Requisitions overview as a data table (datatable-ux reference
+ * implementation): wide search, status filter pills with counts and
+ * sortable columns. The detail (positions + audit trail) lives on its
+ * own page; open requisitions load straight into the cart (orderers).
+ */
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const { role } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+const { tableUi } = useDataTable();
+
+const { data: requisitions, status } = useFetch<Requisition[]>("/api/account/requisitions", {
+	key: "account-requisitions",
+	default: () => [],
+});
+
+/* ---- search + status filter ---------------------------------------- */
+const search = ref("");
+const statusFilter = ref<string>("all");
+
+const searched = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return requisitions.value;
+	}
+	return requisitions.value.filter(requisition =>
+		[requisition.id, requisition.workflowName, requisition.requestedBy.name]
+			.some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+const filtered = computed(() =>
+	statusFilter.value === "all"
+		? searched.value
+		: searched.value.filter(requisition => requisition.status === statusFilter.value),
+);
+
+const REQUISITION_STATUSES: RequisitionStatus[] = ["open", "ordered", "cancelled"];
+
+const filterItems = computed(() => [
+	{ value: "all", label: t("table.filterAll"), count: searched.value.length },
+	...REQUISITION_STATUSES.map(value => ({
+		value,
+		label: t(`governance.requisitions.status.${value}`),
+		count: searched.value.filter(requisition => requisition.status === value).length,
+	})),
+]);
+
+/* ---- columns + sorting ---------------------------------------------- */
+const sorting = ref([{ id: "requestedAt", desc: true }]);
+
+const columns = computed<TableColumn<Requisition>[]>(() => [
+	{ accessorKey: "id", header: t("governance.requisitions.columns.id") },
+	{ accessorKey: "workflowName", header: t("governance.requisitions.columns.workflow") },
+	{
+		id: "requestedBy",
+		accessorFn: row => row.requestedBy.name,
+		header: t("governance.requisitions.columns.requestedBy"),
+	},
+	{ accessorKey: "requestedAt", header: t("governance.requisitions.columns.requestedAt") },
+	{
+		id: "positions",
+		accessorFn: row => row.items.length,
+		header: t("governance.requisitions.columns.positions"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{
+		accessorKey: "totalValue",
+		header: t("governance.requisitions.columns.totalValue"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{
+		accessorKey: "status",
+		header: t("governance.requisitions.columns.status"),
+		enableSorting: false,
+	},
+	{ id: "actions", header: "", enableSorting: false },
+]);
+
+const statusColors: Record<RequisitionStatus, "warning" | "success" | "error"> = {
+	open: "warning",
+	ordered: "success",
+	cancelled: "error",
+};
+
+/* ---- row actions ----------------------------------------------------- */
+const canLoad = computed(() => role.value !== null && role.value !== "requester");
+
+const isLoaded = (requisition: Requisition): boolean =>
+	cart.requisitions.some(r => r.id === requisition.id);
+
+async function loadIntoCart(requisition: Requisition): Promise<void> {
+	const added = cart.addRequisition(requisition);
+	if (!added) {
+		toast.add({
+			title: t("cart.requisition.mergeRejected"),
+			description: t("cart.requisition.mergeRejectedDescription"),
+			color: "warning",
+			icon: icon("warning"),
+		});
+		return;
+	}
+	await navigateTo(to("/cart"));
+}
+
+const formatDate = (value: string) => d(new Date(value), { dateStyle: "medium" });
+</script>
+
+<template>
+	<div>
+		<UiTableToolbar
+			v-model:search="search"
+			v-model:filter="statusFilter"
+			:search-placeholder="t('governance.requisitions.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('governance.requisitions.columns.id')"
+				/>
+			</template>
+			<template #workflowName-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.requisitions.columns.workflow')"
+				/>
+			</template>
+			<template #requestedBy-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.requisitions.columns.requestedBy')"
+				/>
+			</template>
+			<template #requestedAt-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.requisitions.columns.requestedAt')"
+				/>
+			</template>
+			<template #positions-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.requisitions.columns.positions')"
+				/>
+			</template>
+			<template #totalValue-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.requisitions.columns.totalValue')"
+				/>
+			</template>
+
+			<template #id-cell="{ row }">
+				<ULink
+					class="font-semibold text-highlighted hover:text-primary transition-colors"
+					:to="localePath(`/account/requisitions/${row.original.id}`)"
+				>
+					{{ row.original.id }}
+				</ULink>
+			</template>
+			<template #requestedBy-cell="{ row }">
+				{{ row.original.requestedBy.name }}
+			</template>
+			<template #requestedAt-cell="{ row }">
+				{{ formatDate(row.original.requestedAt) }}
+			</template>
+			<template #positions-cell="{ row }">
+				<span class="tabular-nums">{{ row.original.items.length }}</span>
+			</template>
+			<template #totalValue-cell="{ row }">
+				<span class="tabular-nums text-highlighted">{{ formatCurrency(row.original.totalValue) }}</span>
+			</template>
+			<template #status-cell="{ row }">
+				<UBadge
+					:color="statusColors[row.original.status]"
+					variant="subtle"
+					size="sm"
+					:label="t(`governance.requisitions.status.${row.original.status}`)"
+				/>
+			</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/requisitions/${row.original.id}`)"
+						/>
+					</UTooltip>
+					<UTooltip
+						v-if="canLoad && row.original.status === 'open' && !isLoaded(row.original)"
+						:text="t('cart.requisition.load')"
+					>
+						<UButton
+							color="primary"
+							variant="soft"
+							size="sm"
+							tabindex="0"
+							:icon="icon('cart')"
+							:aria-label="t('cart.requisition.load')"
+							@click="loadIntoCart(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('empty')"
+					:title="t('governance.requisitions.empty.title')"
+					:description="t('governance.requisitions.empty.description')"
+				/>
+			</template>
+		</UTable>
+	</div>
+</template>

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

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import GovernanceWorkflowModal from "./GovernanceWorkflowModal.vue";
+
+import type { Requisition, RequisitionStatus } from "../../../interfaces/b2b";
+
+/**
+ * Detail page content of one workflow: the connected step chain plus the
+ * requisitions currently traveling through it; editing via modal.
+ */
+const props = defineProps<{
+	workflowId: string;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { context, role, refresh, status } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const workflow = computed(() =>
+	context.value?.workflows.find(wf => wf.id === props.workflowId) ?? null,
+);
+const canManage = computed(() => role.value !== null && role.value !== "requester");
+
+const participantCount = computed(() => {
+	const ids = new Set(workflow.value?.steps.flatMap(step => step.users.map(u => u.id)) ?? []);
+	return ids.size;
+});
+
+const stepIcon = (type: "request" | "order"): string =>
+	icon(type === "order" ? "cart" : "check");
+
+/* ---- requisitions in this workflow ------------------------------------ */
+const { data: requisitions } = useFetch<Requisition[]>("/api/account/requisitions", {
+	key: "account-requisitions",
+	default: () => [],
+});
+
+const workflowRequisitions = computed(() =>
+	requisitions.value.filter(requisition => requisition.workflowId === props.workflowId).slice(0, 6));
+
+const statusColors: Record<RequisitionStatus, "warning" | "success" | "error"> = {
+	open: "warning",
+	ordered: "success",
+	cancelled: "error",
+};
+
+const formatDate = (value: string) => d(new Date(value), { dateStyle: "medium" });
+
+const editOpen = ref(false);
+</script>
+
+<template>
+	<div>
+		<USkeleton
+			v-if="status === 'pending'"
+			class="h-48 w-full rounded-xl"
+		/>
+
+		<UiFeedbackErrorBoundary
+			v-else-if="!workflow"
+			:title="t('governance.workflows.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.workflows.columns.name') }}
+					</p>
+					<p class="text-sm font-semibold text-highlighted">
+						{{ workflow.name }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('governance.workflows.columns.steps') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted tabular-nums">
+						{{ workflow.steps.length }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('governance.workflows.participants') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted tabular-nums">
+						{{ participantCount }}
+					</p>
+				</div>
+				<UButton
+					v-if="canManage"
+					class="ms-auto"
+					color="neutral"
+					variant="outline"
+					size="sm"
+					tabindex="0"
+					:icon="icon('edit')"
+					:label="t('governance.edit')"
+					@click="editOpen = true"
+				/>
+			</div>
+
+			<!-- Step chain -->
+			<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.workflows.columns.steps') }}
+				</h2>
+				<ol class="p-4 sm:p-5">
+					<li
+						v-for="(step, index) in workflow.steps"
+						:key="index"
+						class="relative flex items-start gap-4 pb-6 last:pb-0"
+					>
+						<span
+							v-if="index < workflow.steps.length - 1"
+							aria-hidden="true"
+							class="absolute left-4 top-9 -bottom-1 w-px bg-(--ui-border)"
+						/>
+						<span
+							class="relative flex size-8 shrink-0 items-center justify-center rounded-full
+							bg-primary/10 text-(--ui-primary) text-sm font-semibold tabular-nums ring-4 ring-default"
+						>{{ index + 1 }}</span>
+						<div class="min-w-0 pt-1">
+							<p class="flex items-center gap-1.5 text-sm font-medium text-highlighted">
+								<UIcon
+									:name="stepIcon(step.type)"
+									class="size-4 text-primary"
+								/>
+								{{ t(`governance.workflows.stepTypes.${step.type}`) }}
+							</p>
+							<div class="mt-1.5 flex flex-wrap gap-1.5">
+								<UBadge
+									v-for="user in step.users"
+									:key="user.id"
+									color="neutral"
+									variant="subtle"
+									size="sm"
+									:icon="icon('user')"
+									:label="user.name"
+								/>
+							</div>
+						</div>
+					</li>
+				</ol>
+			</section>
+
+			<!-- Requisitions in this workflow -->
+			<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('governance.workflows.requisitionsTitle') }}
+					</h2>
+					<ULink
+						class="text-xs font-medium text-primary hover:underline"
+						:to="localePath('/account/requisitions')"
+					>
+						{{ t('account.dashboard.viewAll') }} →
+					</ULink>
+				</header>
+				<ul
+					v-if="workflowRequisitions.length"
+					class="divide-y divide-(--ui-border)"
+				>
+					<li
+						v-for="requisition in workflowRequisitions"
+						: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 }} · {{ formatDate(requisition.requestedAt) }}
+							</span>
+							<span class="flex items-center gap-3 ms-auto">
+								<UBadge
+									:color="statusColors[requisition.status]"
+									variant="subtle"
+									size="sm"
+									:label="t(`governance.requisitions.status.${requisition.status}`)"
+								/>
+								<span class="text-sm tabular-nums text-highlighted min-w-20 text-right">
+									{{ formatCurrency(requisition.totalValue) }}
+								</span>
+							</span>
+						</NuxtLink>
+					</li>
+				</ul>
+				<p
+					v-else
+					class="px-4 sm:px-5 py-6 text-sm text-muted"
+				>
+					{{ t('governance.workflows.noRequisitions') }}
+				</p>
+			</section>
+		</div>
+
+		<GovernanceWorkflowModal
+			v-model:open="editOpen"
+			:workflow="workflow"
+			@saved="refresh"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import GovernanceWorkflowModal from "./GovernanceWorkflowModal.vue";
+import type { TableColumn } from "@nuxt/ui";
+
+import type { ApprovalWorkflow } from "../../../interfaces/b2b";
+
+/**
+ * Approval workflows overview (account pattern): data table with the Add
+ * modal; the step-chain detail and editing live on the detail page.
+ * Search and sortable columns per the datatable-ux baseline.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const localePath = useLocalePath();
+const { context, role, refresh, status } = useB2BContext();
+const { tableUi } = useDataTable();
+
+const workflows = computed(() => context.value?.workflows ?? []);
+const canManage = computed(() => role.value !== null && role.value !== "requester");
+
+const names = (workflow: ApprovalWorkflow, type: "request" | "order") =>
+	workflow.steps
+		.filter(step => step.type === type)
+		.flatMap(step => step.users.map(u => u.name))
+		.join(", ");
+
+/* ---- search ---------------------------------------------------------- */
+const search = ref("");
+
+const filtered = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return workflows.value;
+	}
+	return workflows.value.filter(workflow =>
+		[workflow.name, ...workflow.steps.flatMap(step => step.users.map(u => u.name))]
+			.some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+/* ---- columns + sorting ------------------------------------------------ */
+const sorting = ref([{ id: "name", desc: false }]);
+
+const columns = computed<TableColumn<ApprovalWorkflow>[]>(() => [
+	{ accessorKey: "name", header: t("governance.workflows.columns.name") },
+	{
+		id: "steps",
+		accessorFn: row => row.steps.length,
+		header: t("governance.workflows.columns.steps"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{ id: "requesters", header: t("governance.workflows.columns.requesters"), enableSorting: false },
+	{ id: "orderers", header: t("governance.workflows.columns.orderers"), enableSorting: false },
+	{ id: "actions", header: "", enableSorting: false },
+]);
+
+const modalOpen = ref(false);
+
+async function onSaved(): Promise<void> {
+	await refresh();
+}
+</script>
+
+<template>
+	<div>
+		<UiTableToolbar
+			v-model:search="search"
+			:search-placeholder="t('governance.workflows.searchPlaceholder')"
+		>
+			<template
+				v-if="canManage"
+				#actions
+			>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('plus')"
+					:label="t('governance.workflows.add')"
+					@click="modalOpen = true"
+				/>
+			</template>
+		</UiTableToolbar>
+
+		<UTable
+			v-model:sorting="sorting"
+			:data="filtered"
+			:columns="columns"
+			:loading="status === 'pending'"
+			:ui="tableUi"
+		>
+			<template #name-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.workflows.columns.name')"
+				/>
+			</template>
+			<template #steps-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.workflows.columns.steps')"
+				/>
+			</template>
+
+			<template #name-cell="{ row }">
+				<ULink
+					class="font-semibold text-highlighted hover:text-primary transition-colors"
+					:to="localePath(`/account/workflows/${row.original.id}`)"
+				>
+					{{ row.original.name }}
+				</ULink>
+			</template>
+			<template #steps-cell="{ row }">
+				<span class="tabular-nums">{{ row.original.steps.length }}</span>
+			</template>
+			<template #requesters-cell="{ row }">
+				{{ names(row.original, 'request') || '—' }}
+			</template>
+			<template #orderers-cell="{ row }">
+				{{ names(row.original, 'order') || '—' }}
+			</template>
+			<template #actions-cell="{ row }">
+				<div class="flex justify-end">
+					<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/workflows/${row.original.id}`)"
+						/>
+					</UTooltip>
+				</div>
+			</template>
+
+			<template #loading>
+				<div class="space-y-3 py-2">
+					<USkeleton
+						v-for="index in 3"
+						: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.workflows.empty.title')"
+					:description="t('governance.workflows.empty.description')"
+				/>
+			</template>
+		</UTable>
+
+		<GovernanceWorkflowModal
+			v-model:open="modalOpen"
+			:workflow="null"
+			@saved="onSaved"
+		/>
+	</div>
+</template>