@revenexx/cover 0.1.0

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

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import type { ApprovalLimitType } from "../../../interfaces/b2b";
+import type { AuthRole } from "../../../interfaces/auth";
+
+/**
+ * Create modal for user approval limits: limit type, threshold or budget,
+ * the affected user and the approval rule.
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+const emit = defineEmits<{
+	(e: "saved"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+
+interface DevPersona { id: string; name: string; role: AuthRole }
+const { data: personas } = useFetch<DevPersona[]>("/api/auth/personas", {
+	key: "governance-personas",
+	default: () => [],
+});
+
+// Limits apply to buyers/admins only — requesters never order directly.
+const userItems = computed(() =>
+	(personas.value ?? [])
+		.filter(p => p.role !== "requester")
+		.map(p => ({ value: p.id, label: `${p.name} (${p.role})` })),
+);
+const approverItems = userItems;
+
+const TYPES: ApprovalLimitType[] = ["order-value", "unit-price", "budget", "non-catalog"];
+
+const type = ref<ApprovalLimitType>("order-value");
+const userId = ref<string | null>(null);
+const label = ref("");
+const amount = ref<number | undefined>(undefined);
+const approverId = ref<string | null>(null);
+const approvalRequired = ref(true);
+const saving = ref(false);
+
+watch(open, (isOpen) => {
+	if (isOpen) {
+		type.value = "order-value";
+		userId.value = null;
+		label.value = "";
+		amount.value = undefined;
+		approverId.value = null;
+		approvalRequired.value = true;
+	}
+});
+
+const needsAmount = computed(() => type.value !== "non-catalog");
+
+const valid = computed(() =>
+	Boolean(userId.value)
+	&& label.value.trim().length > 0
+	&& (!needsAmount.value || (typeof amount.value === "number" && amount.value > 0)),
+);
+
+async function save(): Promise<void> {
+	saving.value = true;
+	try {
+		const approverName = (personas.value ?? []).find(p => p.id === approverId.value)?.name;
+		await $fetch("/api/account/governance/approval-limits", {
+			method: "POST",
+			body: {
+				type: type.value,
+				userId: userId.value,
+				label: label.value.trim(),
+				...(needsAmount.value
+					? (type.value === "budget" ? { totalBudget: amount.value } : { maxAmount: amount.value })
+					: {}),
+				approval: {
+					required: approvalRequired.value,
+					...(approverId.value
+						? { approverId: approverId.value, approverName, timeLimitHours: 48 }
+						: {}),
+				},
+			},
+		});
+		toast.add({ title: t("governance.approvals.saved"), color: "success", icon: icon("success"), duration: 1500 });
+		open.value = false;
+		emit("saved");
+	}
+	catch {
+		toast.add({ title: t("governance.saveError"), color: "error", icon: icon("error") });
+	}
+	finally {
+		saving.value = false;
+	}
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('governance.approvals.addTitle')"
+	>
+		<template #body>
+			<div class="space-y-4">
+				<UFormField
+					:label="t('governance.approvals.columns.type')"
+					required
+				>
+					<USelect
+						v-model="type"
+						:items="TYPES.map(value => ({ value, label: t(`governance.approvals.types.${value}`) }))"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('governance.approvals.forUser')"
+					required
+				>
+					<USelect
+						v-model="userId"
+						:items="userItems"
+						class="w-full"
+						:placeholder="t('governance.selectUser')"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('governance.approvals.columns.label')"
+					required
+				>
+					<UInput
+						v-model="label"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					v-if="needsAmount"
+					:label="type === 'budget'
+						? t('governance.costCenters.columns.budget')
+						: t('governance.approvals.columns.threshold')"
+					required
+				>
+					<UInput
+						v-model.number="amount"
+						type="number"
+						min="1"
+						class="w-full"
+					>
+						<template #trailing>
+							<span class="text-xs text-dimmed">€</span>
+						</template>
+					</UInput>
+				</UFormField>
+				<UFormField :label="t('governance.approvals.columns.approval')">
+					<USelect
+						v-model="approverId"
+						:items="approverItems"
+						class="w-full"
+						:placeholder="t('governance.selectApprover')"
+					/>
+				</UFormField>
+				<UCheckbox
+					v-model="approvalRequired"
+					:label="t('governance.approvalRequired')"
+				/>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="!valid"
+				:loading="saving"
+				:label="t('governance.save')"
+				@click="save"
+			/>
+		</template>
+	</UModal>
+</template>

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

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { CostCenter } from "../../../interfaces/b2b";
+import type { AuthRole } from "../../../interfaces/auth";
+
+/** Create/edit modal for cost centers, with an optional budget rule. */
+const open = defineModel<boolean>("open", { default: false });
+
+const props = defineProps<{
+	costCenter?: CostCenter | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "saved"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+
+interface DevPersona { id: string; name: string; role: AuthRole }
+const { data: personas } = useFetch<DevPersona[]>("/api/auth/personas", {
+	key: "governance-personas",
+	default: () => [],
+});
+const approverItems = computed(() =>
+	(personas.value ?? [])
+		.filter(p => p.role !== "requester")
+		.map(p => ({ value: p.id, label: p.name })),
+);
+
+const code = ref("");
+const label = ref("");
+const withBudget = ref(false);
+const totalBudget = ref<number | undefined>(undefined);
+const approverId = ref<string | null>(null);
+const approvalRequired = ref(true);
+const saving = ref(false);
+
+const isEdit = computed(() => Boolean(props.costCenter));
+
+watch(open, (isOpen) => {
+	if (!isOpen) {
+		return;
+	}
+	code.value = props.costCenter?.code ?? "";
+	label.value = props.costCenter?.label ?? "";
+	withBudget.value = Boolean(props.costCenter?.limit);
+	totalBudget.value = props.costCenter?.limit?.totalBudget;
+	approverId.value = props.costCenter?.limit?.approval.approverId ?? null;
+	approvalRequired.value = props.costCenter?.limit?.approval.required ?? true;
+});
+
+const valid = computed(() =>
+	code.value.trim().length > 0 && label.value.trim().length > 0
+	&& (!withBudget.value || (typeof totalBudget.value === "number" && totalBudget.value > 0)),
+);
+
+async function save(): Promise<void> {
+	saving.value = true;
+	try {
+		if (isEdit.value) {
+			await $fetch(`/api/account/governance/cost-centers/${props.costCenter!.id}`, {
+				method: "PUT",
+				body: { code: code.value.trim(), label: label.value.trim() },
+			});
+		}
+		else {
+			const approverName = (personas.value ?? []).find(p => p.id === approverId.value)?.name;
+			await $fetch("/api/account/governance/cost-centers", {
+				method: "POST",
+				body: {
+					code: code.value.trim(),
+					label: label.value.trim(),
+					...(withBudget.value
+						? {
+								totalBudget: totalBudget.value,
+								approval: {
+									required: approvalRequired.value,
+									...(approverId.value
+										? { approverId: approverId.value, approverName, timeLimitHours: 48 }
+										: {}),
+								},
+							}
+						: {}),
+				},
+			});
+		}
+		toast.add({ title: t("governance.costCenters.saved"), color: "success", icon: icon("success"), duration: 1500 });
+		open.value = false;
+		emit("saved");
+	}
+	catch {
+		toast.add({ title: t("governance.saveError"), color: "error", icon: icon("error") });
+	}
+	finally {
+		saving.value = false;
+	}
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="isEdit ? t('governance.costCenters.editTitle') : t('governance.costCenters.addTitle')"
+	>
+		<template #body>
+			<div class="space-y-4">
+				<div class="grid grid-cols-2 gap-4">
+					<UFormField
+						:label="t('governance.costCenters.columns.code')"
+						required
+					>
+						<UInput
+							v-model="code"
+							class="w-full"
+							placeholder="CC-400"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('governance.costCenters.columns.label')"
+						required
+					>
+						<UInput
+							v-model="label"
+							class="w-full"
+						/>
+					</UFormField>
+				</div>
+
+				<template v-if="!isEdit">
+					<UCheckbox
+						v-model="withBudget"
+						:label="t('governance.costCenters.withBudget')"
+					/>
+					<div
+						v-if="withBudget"
+						class="space-y-4"
+					>
+						<UFormField
+							:label="t('governance.costCenters.columns.budget')"
+							required
+						>
+							<UInput
+								v-model.number="totalBudget"
+								type="number"
+								min="1"
+								class="w-full"
+							>
+								<template #trailing>
+									<span class="text-xs text-dimmed">€</span>
+								</template>
+							</UInput>
+						</UFormField>
+						<UFormField :label="t('governance.approvals.columns.approval')">
+							<USelect
+								v-model="approverId"
+								:items="approverItems"
+								class="w-full"
+								:placeholder="t('governance.selectApprover')"
+							/>
+						</UFormField>
+						<UCheckbox
+							v-model="approvalRequired"
+							:label="t('governance.approvalRequired')"
+						/>
+					</div>
+				</template>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="!valid"
+				:loading="saving"
+				:label="t('governance.save')"
+				@click="save"
+			/>
+		</template>
+	</UModal>
+</template>

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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { ApprovalWorkflow, ApprovalWorkflowStep } from "../../../interfaces/b2b";
+import type { AuthRole } from "../../../interfaces/auth";
+
+/**
+ * Create/edit modal for approval workflows (account pattern): name plus an
+ * ordered step list — request steps handing on, a final order step.
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+const props = defineProps<{
+	/** Record to edit; null creates a new workflow. */
+	workflow?: ApprovalWorkflow | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "saved"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+
+interface DevPersona {
+	id: string;
+	name: string;
+	role: AuthRole;
+}
+
+const { data: personas } = useFetch<DevPersona[]>("/api/auth/personas", {
+	key: "governance-personas",
+	default: () => [],
+});
+
+const personaItems = computed(() =>
+	(personas.value ?? []).map(p => ({ value: p.id, label: `${p.name} (${p.role})` })),
+);
+
+const name = ref("");
+const steps = ref<{ type: "request" | "order"; userIds: string[] }[]>([]);
+const saving = ref(false);
+
+watch(open, (isOpen) => {
+	if (!isOpen) {
+		return;
+	}
+	name.value = props.workflow?.name ?? "";
+	steps.value = props.workflow
+		? props.workflow.steps.map(step => ({
+				type: step.type,
+				userIds: step.users.map(u => u.id),
+			}))
+		: [
+				{ type: "request", userIds: [] },
+				{ type: "order", userIds: [] },
+			];
+});
+
+function addStep(): void {
+	// New request steps slot in before the final order step.
+	steps.value.splice(steps.value.length - 1, 0, { type: "request", userIds: [] });
+}
+
+function removeStep(index: number): void {
+	if (steps.value.length > 2) {
+		steps.value.splice(index, 1);
+	}
+}
+
+const valid = computed(() =>
+	name.value.trim().length > 0
+	&& steps.value.length >= 2
+	&& steps.value.every(step => step.userIds.length > 0),
+);
+
+function toApiSteps(): ApprovalWorkflowStep[] {
+	const byId = new Map((personas.value ?? []).map(p => [p.id, p.name]));
+	return steps.value.map(step => ({
+		type: step.type,
+		users: step.userIds.map(id => ({ id, name: byId.get(id) ?? id })),
+	}));
+}
+
+async function save(): Promise<void> {
+	saving.value = true;
+	try {
+		if (props.workflow) {
+			await $fetch(`/api/account/governance/workflows/${props.workflow.id}`, {
+				method: "PUT",
+				body: { name: name.value.trim(), steps: toApiSteps() },
+			});
+		}
+		else {
+			await $fetch("/api/account/governance/workflows", {
+				method: "POST",
+				body: { name: name.value.trim(), steps: toApiSteps() },
+			});
+		}
+		toast.add({ title: t("governance.workflows.saved"), color: "success", icon: icon("success"), duration: 1500 });
+		open.value = false;
+		emit("saved");
+	}
+	catch {
+		toast.add({ title: t("governance.saveError"), color: "error", icon: icon("error") });
+	}
+	finally {
+		saving.value = false;
+	}
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="workflow ? t('governance.workflows.editTitle') : t('governance.workflows.addTitle')"
+	>
+		<template #body>
+			<div class="space-y-4">
+				<UFormField
+					:label="t('governance.workflows.name')"
+					required
+				>
+					<UInput
+						v-model="name"
+						class="w-full"
+						:placeholder="t('governance.workflows.namePlaceholder')"
+					/>
+				</UFormField>
+
+				<div class="space-y-3">
+					<div
+						v-for="(step, index) in steps"
+						:key="index"
+						class="rounded-lg border border-(--ui-border) p-3 space-y-2"
+					>
+						<div class="flex items-center justify-between gap-2">
+							<span class="text-sm font-medium text-highlighted">
+								{{ t('governance.requisitions.step', { step: index + 1 }) }}
+								·
+								{{ t(`governance.workflows.stepTypes.${step.type}`) }}
+							</span>
+							<UButton
+								v-if="step.type === 'request' && steps.length > 2"
+								:icon="icon('delete')"
+								color="neutral"
+								variant="ghost"
+								size="xs"
+								tabindex="0"
+								:aria-label="t('governance.workflows.removeStep')"
+								@click="removeStep(index)"
+							/>
+						</div>
+						<USelect
+							v-model="step.userIds"
+							:items="personaItems"
+							multiple
+							class="w-full"
+							:placeholder="t('governance.workflows.usersPlaceholder')"
+						/>
+					</div>
+					<UButton
+						color="neutral"
+						variant="outline"
+						size="xs"
+						tabindex="0"
+						:icon="icon('plus')"
+						:label="t('governance.workflows.addStep')"
+						@click="addStep"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="!valid"
+				:loading="saving"
+				:label="t('governance.save')"
+				@click="save"
+			/>
+		</template>
+	</UModal>
+</template>