@revenexx/cover 0.1.0

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

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import GovernanceApprovalLimitModal from "./GovernanceApprovalLimitModal.vue";
+import type { TableColumn } from "@nuxt/ui";
+
+import type { ApprovalLimit } from "../../../interfaces/b2b";
+
+/**
+ * The approval limits applying to the current user as a data table:
+ * type, threshold/budget, approver, deputy and escalation time frames.
+ * Search, type filter pills and sortable columns per datatable-ux.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const { context, role, status, refresh } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+const { tableUi } = useDataTable();
+
+const canManage = computed(() => role.value === "admin" || role.value === "approver" || role.value === "buyer");
+const modalOpen = ref(false);
+
+const limits = computed(() => context.value?.approvalLimits ?? []);
+
+/* ---- search + type filter -------------------------------------------- */
+const search = ref("");
+const typeFilter = ref<string>("all");
+
+const searched = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return limits.value;
+	}
+	return limits.value.filter(limit =>
+		[limit.label, limit.approval.approverName ?? "", limit.approval.deputyName ?? ""]
+			.some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+const filtered = computed(() =>
+	typeFilter.value === "all"
+		? searched.value
+		: searched.value.filter(limit => limit.type === typeFilter.value),
+);
+
+const LIMIT_TYPES: ApprovalLimit["type"][] = ["budget", "order-value", "unit-price", "non-catalog"];
+
+const filterItems = computed(() => [
+	{ value: "all", label: t("table.filterAll"), count: searched.value.length },
+	...LIMIT_TYPES
+		.map(value => ({
+			value,
+			label: t(`governance.approvals.types.${value}`),
+			count: searched.value.filter(limit => limit.type === value).length,
+		}))
+		.filter(item => item.count > 0),
+]);
+
+/* ---- columns + sorting ------------------------------------------------ */
+const sorting = ref([{ id: "label", desc: false }]);
+
+const columns = computed<TableColumn<ApprovalLimit>[]>(() => [
+	{ accessorKey: "label", header: t("governance.approvals.columns.label") },
+	{ id: "type", header: t("governance.approvals.columns.type"), enableSorting: false },
+	{
+		id: "threshold",
+		accessorFn: row => row.maxAmount ?? row.availableBudget ?? row.totalBudget ?? -1,
+		header: t("governance.approvals.columns.threshold"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{ id: "approval", header: t("governance.approvals.columns.approval"), enableSorting: false },
+	{ id: "deputy", header: t("governance.approvals.columns.deputy"), enableSorting: false },
+]);
+
+const typeColors: Record<ApprovalLimit["type"], "primary" | "info" | "warning" | "neutral"> = {
+	"budget": "primary",
+	"order-value": "info",
+	"unit-price": "warning",
+	"non-catalog": "neutral",
+};
+
+function thresholdLabel(limit: ApprovalLimit): string | null {
+	if (limit.type === "budget" && limit.totalBudget !== undefined) {
+		return t("governance.approvals.budgetOf", {
+			available: formatCurrency(limit.availableBudget ?? limit.totalBudget),
+			total: formatCurrency(limit.totalBudget),
+		});
+	}
+	if (limit.maxAmount !== undefined) {
+		return formatCurrency(limit.maxAmount);
+	}
+	return null;
+}
+</script>
+
+<template>
+	<div>
+		<UiTableToolbar
+			v-model:search="search"
+			v-model:filter="typeFilter"
+			:search-placeholder="t('governance.approvals.searchPlaceholder')"
+			:filter-items="filterItems"
+		>
+			<template
+				v-if="canManage"
+				#actions
+			>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('plus')"
+					:label="t('governance.approvals.add')"
+					@click="modalOpen = true"
+				/>
+			</template>
+		</UiTableToolbar>
+
+		<UTable
+			v-model:sorting="sorting"
+			:data="filtered"
+			:columns="columns"
+			:loading="status === 'pending'"
+			:ui="tableUi"
+		>
+			<template #label-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.approvals.columns.label')"
+				/>
+			</template>
+			<template #threshold-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('governance.approvals.columns.threshold')"
+				/>
+			</template>
+
+			<template #label-cell="{ row }">
+				<span class="font-semibold text-highlighted">{{ row.original.label }}</span>
+			</template>
+			<template #type-cell="{ row }">
+				<UBadge
+					:color="typeColors[row.original.type]"
+					variant="subtle"
+					size="sm"
+					:label="t(`governance.approvals.types.${row.original.type}`)"
+				/>
+			</template>
+			<template #threshold-cell="{ row }">
+				<span
+					v-if="thresholdLabel(row.original)"
+					class="tabular-nums"
+				>{{ thresholdLabel(row.original) }}</span>
+				<span
+					v-else
+					class="text-dimmed"
+				>—</span>
+			</template>
+			<template #approval-cell="{ row }">
+				<template v-if="row.original.approval.required">
+					{{ row.original.approval.approverName }}
+					<span
+						v-if="row.original.approval.timeLimitHours"
+						class="text-muted"
+					>
+						· {{ t('governance.approvals.timeFrame', { hours: row.original.approval.timeLimitHours }) }}
+					</span>
+				</template>
+				<UBadge
+					v-else
+					color="neutral"
+					variant="subtle"
+					size="sm"
+					:label="t('governance.approvals.infoOnly')"
+				/>
+			</template>
+			<template #deputy-cell="{ row }">
+				<span v-if="row.original.approval.deputyName">
+					{{ row.original.approval.deputyName }}
+					<span
+						v-if="row.original.approval.deputyTimeLimitHours"
+						class="text-muted"
+					>
+						· {{ t('governance.approvals.timeFrame', { hours: row.original.approval.deputyTimeLimitHours }) }}
+					</span>
+				</span>
+				<span
+					v-else
+					class="text-dimmed"
+				>—</span>
+			</template>
+
+			<template #loading>
+				<div class="space-y-3 py-2">
+					<USkeleton
+						v-for="index in 4"
+						:key="index"
+						class="h-9 w-full"
+					/>
+				</div>
+			</template>
+			<template #empty>
+				<UiFeedbackEmptyState
+					v-if="search || typeFilter !== 'all'"
+					:icon="icon('no-results')"
+					:title="t('table.noResults.title')"
+					:description="t('table.noResults.description')"
+				/>
+				<UiFeedbackEmptyState
+					v-else
+					:icon="icon('empty')"
+					:title="t('governance.approvals.empty.title')"
+					:description="t('governance.approvals.empty.description')"
+				/>
+			</template>
+		</UTable>
+
+		<GovernanceApprovalLimitModal
+			v-model:open="modalOpen"
+			@saved="refresh"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import GovernanceCostCenterModal from "./GovernanceCostCenterModal.vue";
+
+import type { Requisition, RequisitionStatus } from "../../../interfaces/b2b";
+
+/**
+ * Detail page content of one cost center: budget with utilization, the
+ * full approval rule (approver, deputy, escalation time frames) and the
+ * requisitions charged to it; editing via modal.
+ */
+const props = defineProps<{
+	costCenterId: string;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { costCenters, role, refresh, status } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const costCenter = computed(() =>
+	costCenters.value.find(cc => cc.id === props.costCenterId) ?? null,
+);
+const canManage = computed(() => role.value !== null && role.value !== "requester");
+
+const utilization = computed(() => {
+	const limit = costCenter.value?.limit;
+	if (!limit?.totalBudget || limit.availableBudget === undefined) {
+		return null;
+	}
+	return Math.min(100, Math.round(((limit.totalBudget - limit.availableBudget) / limit.totalBudget) * 100));
+});
+
+/* ---- requisitions charged to this cost center -------------------------- */
+const { data: requisitions } = useFetch<Requisition[]>("/api/account/requisitions", {
+	key: "account-requisitions",
+	default: () => [],
+});
+
+const chargedRequisitions = computed(() =>
+	requisitions.value
+		.filter(requisition => requisition.items.some(item => item.costCenterId === props.costCenterId))
+		.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="!costCenter"
+			:title="t('governance.costCenters.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.costCenters.columns.code') }}
+					</p>
+					<p class="text-sm font-semibold text-highlighted">
+						{{ costCenter.code }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('governance.costCenters.columns.label') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ costCenter.label }}
+					</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>
+
+			<!-- Budget + approval rule -->
+			<section
+				v-if="costCenter.limit"
+				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)">
+					{{ costCenter.limit.label }}
+				</h2>
+				<div class="p-4 sm:p-5 space-y-5">
+					<div class="grid grid-cols-2 gap-4 text-sm">
+						<div>
+							<p class="text-xs text-muted">
+								{{ t('governance.costCenters.columns.budget') }}
+							</p>
+							<p class="font-semibold text-highlighted tabular-nums text-lg">
+								{{ formatCurrency(costCenter.limit.totalBudget ?? 0) }}
+							</p>
+						</div>
+						<div>
+							<p class="text-xs text-muted">
+								{{ t('governance.costCenters.columns.available') }}
+							</p>
+							<p
+								class="font-semibold tabular-nums text-lg"
+								:class="(utilization ?? 0) >= 90 ? 'text-warning' : 'text-highlighted'"
+							>
+								{{ formatCurrency(costCenter.limit.availableBudget ?? 0) }}
+							</p>
+						</div>
+					</div>
+					<div
+						v-if="utilization !== null"
+						class="space-y-1.5"
+					>
+						<div class="h-2 rounded-full bg-elevated overflow-hidden">
+							<div
+								class="h-full rounded-full w-(--budget-used)"
+								:class="utilization >= 90 ? 'bg-warning' : 'bg-primary'"
+								:style="{ '--budget-used': `${utilization}%` }"
+							/>
+						</div>
+						<p class="text-xs text-muted">
+							{{ t('governance.costCenters.utilization', { percent: utilization }) }}
+						</p>
+					</div>
+
+					<!-- Approval rule: approver + deputy escalation chain -->
+					<div class="pt-4 border-t border-(--ui-border)">
+						<h3 class="text-xs font-semibold uppercase tracking-wide text-muted mb-3">
+							{{ t('governance.costCenters.ruleTitle') }}
+						</h3>
+						<dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
+							<div>
+								<dt class="font-medium text-highlighted flex items-center gap-1.5">
+									{{ t('governance.approvals.columns.approval') }}
+									<UBadge
+										v-if="costCenter.limit.approval.required"
+										color="warning"
+										variant="subtle"
+										size="sm"
+										:label="t('governance.approvalRequired')"
+									/>
+									<UBadge
+										v-else
+										color="neutral"
+										variant="subtle"
+										size="sm"
+										:label="t('governance.approvals.infoOnly')"
+									/>
+								</dt>
+								<dd class="mt-1.5 text-muted">
+									<template v-if="costCenter.limit.approval.approverName">
+										{{ costCenter.limit.approval.approverName }}
+										<span v-if="costCenter.limit.approval.timeLimitHours">
+											· {{ t('governance.approvals.timeFrame', { hours: costCenter.limit.approval.timeLimitHours }) }}
+										</span>
+									</template>
+									<template v-else>
+										—
+									</template>
+								</dd>
+							</div>
+							<div>
+								<dt class="font-medium text-highlighted">
+									{{ t('governance.approvals.columns.deputy') }}
+								</dt>
+								<dd class="mt-1.5 text-muted">
+									<template v-if="costCenter.limit.approval.deputyName">
+										{{ costCenter.limit.approval.deputyName }}
+										<span v-if="costCenter.limit.approval.deputyTimeLimitHours">
+											· {{ t('governance.approvals.timeFrame', { hours: costCenter.limit.approval.deputyTimeLimitHours }) }}
+										</span>
+									</template>
+									<template v-else>
+										—
+									</template>
+								</dd>
+							</div>
+						</dl>
+					</div>
+				</div>
+			</section>
+			<UAlert
+				v-else
+				color="neutral"
+				variant="subtle"
+				:icon="icon('info')"
+				:title="t('governance.costCenters.noBudget')"
+			/>
+
+			<!-- Requisitions charged to this cost center -->
+			<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.costCenters.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="chargedRequisitions.length"
+					class="divide-y divide-(--ui-border)"
+				>
+					<li
+						v-for="requisition in chargedRequisitions"
+						: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.costCenters.noRequisitions') }}
+				</p>
+			</section>
+		</div>
+
+		<GovernanceCostCenterModal
+			v-model:open="editOpen"
+			:cost-center="costCenter"
+			@saved="refresh"
+		/>
+	</div>
+</template>