@revenexx/cover 0.1.0

package/app/components/cart/view/CartView.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import CartExportModal from "../actions/CartExportModal.vue";
+import CartCostCenterModal from "../actions/CartCostCenterModal.vue";
+import CartPositionTextsModal from "../actions/CartPositionTextsModal.vue";
+import CartSaveToListModal from "../actions/CartSaveToListModal.vue";
+import AccountDirectOrder from "../../account/directorder/AccountDirectOrder.vue";
+import CartQuickAdd from "../quickadd/CartQuickAdd.vue";
+import CartCrossSell from "../recommend/CartCrossSell.vue";
+import CartReorderStrip from "../recommend/CartReorderStrip.vue";
+import CartRequisitionGroup from "../requisition/CartRequisitionGroup.vue";
+import CartListHeader from "./CartListHeader.vue";
+import CartPositionList from "./CartPositionList.vue";
+import CartSummaryPanel from "./CartSummaryPanel.vue";
+import type { Requisition } from "../../../interfaces/b2b";
+
+/**
+ * The Cart 2.0 page composition (spec: Warenkorb 2.0 Basis Layout):
+ * message box, sticky selection header with bulk actions, free positions,
+ * requisition groups, quick entry and the sticky calculated summary.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const selection = useCartSelection();
+const actions = useCartActions();
+const { role, workflows, settings } = useB2BContext();
+const { calculation, linesByKey } = useCartCalculation({ orchestrate: true });
+
+const hydrated = ref(false);
+onMounted(() => {
+	hydrated.value = true;
+});
+
+const { items, requisitions, isEmpty, itemCount } = storeToRefs(cart);
+
+const freeItems = computed(() => items.value.filter(i => !i.requisitionId));
+const itemsByRequisition = computed(() => {
+	const map = new Map<string, typeof items.value>();
+	for (const item of items.value) {
+		if (item.requisitionId) {
+			const list = map.get(item.requisitionId) ?? [];
+			list.push(item);
+			map.set(item.requisitionId, list);
+		}
+	}
+	return map;
+});
+
+// Keep the selection in sync when positions leave the cart.
+watch(items, () => selection.prune(), { deep: true });
+
+const cartItemCount = computed(() =>
+	t("cart.page.itemCount", itemCount.value, { count: itemCount.value }),
+);
+
+const quickAddOpen = ref(false);
+
+/* ---- loadable requisitions (orderer side, spec: hinzufügen) -------- */
+const canLoadRequisitions = computed(() =>
+	Boolean(role.value && role.value !== "requester" && workflows.value.length > 0
+		&& settings.value?.workflows.enabled),
+);
+
+const { data: openRequisitions } = useFetch<Requisition[]>(
+	"/api/account/requisitions",
+	{ query: { status: "open" }, key: "open-requisitions", server: false, lazy: true, default: () => [] },
+);
+
+const loadableRequisitions = computed(() =>
+	(openRequisitions.value ?? []).filter(r =>
+		!requisitions.value.some(loaded => loaded.id === r.id),
+	),
+);
+
+function loadRequisition(requisition: Requisition): 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"),
+		});
+	}
+}
+
+const messageColor = (severity: string) =>
+	severity === "error" ? "error" as const : severity === "warning" ? "warning" as const : "info" as const;
+</script>
+
+<template>
+	<UContainer class="py-6 lg:py-8">
+		<div class="flex flex-wrap items-center justify-between gap-4 mb-4">
+			<div class="flex items-center gap-4">
+				<h1 class="text-2xl font-semibold text-highlighted">
+					{{ t('cart.page.title') }}
+				</h1>
+				<CartSwitcher class="print:hidden" />
+			</div>
+			<UButton
+				v-if="!isEmpty"
+				:icon="icon('direct-order')"
+				color="neutral"
+				variant="outline"
+				size="sm"
+				tabindex="0"
+				class="print:hidden"
+				:label="t('cart.quickAdd.action')"
+				@click="quickAddOpen = true"
+			/>
+		</div>
+
+		<!-- Error / notice box (spec area 1) -->
+		<div
+			v-if="calculation?.messages.length"
+			class="space-y-2 mb-4"
+		>
+			<UAlert
+				v-for="message in calculation.messages"
+				:key="message.code"
+				:color="messageColor(message.severity)"
+				variant="soft"
+				:icon="icon(message.severity === 'error' ? 'error' : 'warning')"
+				:title="t(message.messageKey, message.params ?? {})"
+			/>
+		</div>
+
+		<!-- Loadable requisitions (orderer) -->
+		<div
+			v-if="canLoadRequisitions && loadableRequisitions.length"
+			class="mb-4 border border-(--ui-border) rounded-xl p-4 space-y-2 print:hidden"
+		>
+			<h2 class="text-sm font-semibold text-highlighted">
+				{{ t('cart.requisition.openTitle') }}
+			</h2>
+			<div
+				v-for="requisition in loadableRequisitions"
+				:key="requisition.id"
+				class="flex flex-wrap items-center justify-between gap-2 text-sm"
+			>
+				<span class="text-muted">
+					{{ requisition.workflowName }} ·
+					{{ t('cart.requisition.shortMeta', {
+						name: requisition.requestedBy.name,
+						count: requisition.items.length,
+					}) }}
+				</span>
+				<UButton
+					color="primary"
+					variant="soft"
+					size="xs"
+					tabindex="0"
+					:label="t('cart.requisition.load')"
+					@click="loadRequisition(requisition)"
+				/>
+			</div>
+		</div>
+
+		<!-- Skeleton until the client cart hydrates -->
+		<template v-if="!hydrated">
+			<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
+				<section class="lg:col-span-8 border border-(--ui-border) rounded-xl p-4 md:p-5">
+					<CartSkeleton />
+				</section>
+				<aside class="lg:col-span-4 space-y-4">
+					<div class="border border-(--ui-border) rounded-xl p-4 md:p-5 space-y-3">
+						<USkeleton class="h-5 w-40" />
+						<USkeleton class="h-4 w-full" />
+						<USkeleton class="h-4 w-5/6" />
+						<USkeleton class="h-9 w-full" />
+					</div>
+				</aside>
+			</div>
+		</template>
+
+		<!-- Empty cart (spec: Leerer Warenkorb) -->
+		<template v-else-if="isEmpty">
+			<UAlert
+				color="info"
+				variant="soft"
+				:icon="icon('info')"
+				:title="t('cart.emptyState.title')"
+				:description="t('cart.emptyState.description')"
+				class="mb-6"
+			/>
+			<div class="grid sm:grid-cols-2 gap-8 items-start">
+				<div class="border border-(--ui-border) rounded-xl p-4 md:p-5 space-y-3">
+					<h2 class="text-sm font-semibold text-highlighted">
+						{{ t('cart.quickAdd.title') }}
+					</h2>
+					<CartQuickAdd />
+				</div>
+				<div class="flex flex-col items-start gap-3">
+					<p class="text-sm text-muted">
+						{{ t('cart.emptyState.browseHint') }}
+					</p>
+					<div class="flex flex-wrap gap-2">
+						<UButton
+							color="primary"
+							variant="soft"
+							:to="to('/')"
+							:label="t('cart.emptyState.goToShop')"
+							tabindex="0"
+						/>
+						<UButton
+							color="neutral"
+							variant="outline"
+							:icon="icon('direct-order')"
+							:to="to('/account/direct-order')"
+							:label="t('cart.emptyState.directOrder')"
+							tabindex="0"
+						/>
+						<UButton
+							color="neutral"
+							variant="outline"
+							:icon="icon('order-list')"
+							:to="to('/account/order-lists')"
+							:label="t('cart.emptyState.orderLists')"
+							tabindex="0"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<!-- The fastest paths back to an order -->
+			<div class="mt-8 space-y-8">
+				<CartReorderStrip />
+				<CartCrossSell popular />
+			</div>
+		</template>
+
+		<template v-else>
+			<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-start">
+				<section class="lg:col-span-8 border border-(--ui-border) rounded-xl px-4 md:px-5 pb-2">
+					<CartListHeader class="print:hidden" />
+
+					<CartPositionList
+						v-if="freeItems.length"
+						:items="freeItems"
+						:lines-by-key="linesByKey"
+					/>
+
+					<div
+						v-if="requisitions.length"
+						class="space-y-4 py-4"
+					>
+						<CartRequisitionGroup
+							v-for="requisition in requisitions"
+							:key="requisition.id"
+							:requisition="requisition"
+							:items="itemsByRequisition.get(requisition.id) ?? []"
+							:lines-by-key="linesByKey"
+						/>
+					</div>
+				</section>
+
+				<aside class="lg:col-span-4 lg:sticky lg:top-24">
+					<p class="text-xs text-muted mb-2">
+						{{ cartItemCount }}
+					</p>
+					<CartSummaryPanel />
+				</aside>
+			</div>
+
+			<!-- Revenue strips: fast reorder + cross-sell -->
+			<div class="mt-8 space-y-8">
+				<CartReorderStrip />
+				<CartCrossSell />
+			</div>
+		</template>
+
+		<!-- Action modals (one instance each, driven by useCartActions) -->
+		<CartCostCenterModal
+			:open="actions.action.value.type === 'cost-center'"
+			:line-keys="actions.action.value.lineKeys"
+			@update:open="actions.close()"
+		/>
+		<CartPositionTextsModal
+			:open="actions.action.value.type === 'texts'"
+			:line-keys="actions.action.value.lineKeys"
+			@update:open="actions.close()"
+		/>
+		<CartSaveToListModal
+			:open="actions.action.value.type === 'save'"
+			:line-keys="actions.action.value.lineKeys"
+			@update:open="actions.close()"
+		/>
+		<CartExportModal
+			:open="actions.action.value.type === 'export'"
+			@update:open="actions.close()"
+		/>
+
+		<!-- Quick entry: the full direct-order toolset in a wide lightbox -->
+		<UModal
+			v-model:open="quickAddOpen"
+			:title="t('directOrder.title')"
+			:description="t('directOrder.description')"
+			:ui="{ content: 'sm:max-w-4xl' }"
+		>
+			<template #body>
+				<AccountDirectOrder
+					embedded
+					@added="quickAddOpen = false"
+				/>
+			</template>
+		</UModal>
+	</UContainer>
+</template>

package/app/components/category/info/CategoryPrice.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { getDisplayUnitPrice, getPriceTiers, getPriceWithOptionalTax } from "../../../composables/useProducts";
+import type { ProductList } from "../../../interfaces/product-list";
+
+const { t } = useI18n();
+const { public: { locale, currency, taxIncludedPrices } } = useRuntimeConfig();
+
+function formatPrice(price: number) {
+	return price.toLocaleString(locale, { style: "currency", currency });
+}
+
+const props = defineProps<{
+	product: ProductList;
+}>();
+
+const tiers = computed(() => getPriceTiers(props.product.prices ?? []));
+const hasTieredPricing = computed(() => tiers.value.length > 1);
+const displayPrice = computed<number | null>(() => {
+	const basePrice = getDisplayUnitPrice(props.product.prices ?? []);
+	if (basePrice === null) {
+		return null;
+	}
+
+	return getPriceWithOptionalTax(basePrice, props.product.tax.rate, taxIncludedPrices);
+});
+</script>
+
+<template>
+	<div>
+		<template v-if="displayPrice !== null">
+			<div v-if="hasTieredPricing">
+				<span class="text-sm text-muted mt-0.5">{{ t('product.price.from') }}</span>
+				{{ formatPrice(displayPrice) }}
+			</div>
+			<div v-else>
+				{{ formatPrice(displayPrice) }}
+			</div>
+		</template>
+		<!-- No price for this buyer context: on request — never €0. -->
+		<div
+			v-else
+			class="text-sm font-medium text-muted"
+		>
+			{{ t('product.price.onRequest') }}
+		</div>
+	</div>
+</template>

package/app/components/category/info/CategorySku.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { ProductList } from "../../../interfaces/product-list";
+
+defineProps<{
+	product: ProductList;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<div class="flex items-center justify-between gap-2 text-xs text-muted text-primary">
+		{{ t('product.sku') }}: {{ product.sku }}
+	</div>
+</template>

package/app/components/category/info/CategoryStock.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { ProductList } from "../../../interfaces/product-list";
+
+const { icon } = useIcons();
+
+const { t } = useI18n();
+
+defineProps<{
+	product: ProductList;
+	isOutOfStock: boolean;
+}>();
+</script>
+
+<template>
+	<div>
+		<span class="flex items-center gap-1 text-sm font-medium">
+			{{ !isOutOfStock ? t('product.stock.available') : t('product.stock.unavailable') }}
+			<UIcon
+				:name="!isOutOfStock ? icon('check') : icon('close')"
+				class="size-5 text-(--ui-primary)"
+				:style="{ color: !isOutOfStock ? 'green' : 'red' }"
+			/>
+		</span>
+	</div>
+</template>

package/app/components/category/list/CategoryItemCount.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+	page: number;
+	perPage: number;
+	total: number;
+}>();
+
+const { t } = useI18n();
+
+const from = computed(() => (props.page - 1) * props.perPage + 1);
+const to = computed(() => Math.min(props.page * props.perPage, props.total));
+const isSingle = computed(() => from.value === to.value);
+</script>
+
+<template>
+	<p
+		v-if="total > 0"
+		class="text-sm text-muted"
+	>
+		<template v-if="isSingle">
+			{{ t('product.list.count.single', { total }) }}
+		</template>
+		<template v-else>
+			{{ t('product.list.count.range', { from, to, total }) }}
+		</template>
+	</p>
+</template>

package/app/components/category/list/CategoryListPagination.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const page = defineModel<number>("page", { required: true });
+const props = defineProps<{
+	total: number;
+	itemsPerPage: number;
+}>();
+const { t } = useI18n();
+
+const pageCount = computed(() => Math.ceil(props.total / props.itemsPerPage));
+const isFirst = computed(() => page.value <= 1);
+const isLast = computed(() => page.value >= pageCount.value);
+</script>
+
+<template>
+	<UPagination
+		v-model:page="page"
+		:total="total"
+		:items-per-page="itemsPerPage"
+	>
+		<template #first>
+			<UTooltip :text="t('product.list.pagination.first')">
+				<UButton
+					:icon="icon('chevron-double-left')"
+					color="neutral"
+					variant="outline"
+					:disabled="isFirst"
+					:aria-label="t('product.list.pagination.first')"
+				/>
+			</UTooltip>
+		</template>
+
+		<template #prev>
+			<UTooltip :text="t('product.list.pagination.prev')">
+				<UButton
+					:icon="icon('chevron-left')"
+					color="neutral"
+					variant="outline"
+					:disabled="isFirst"
+					:aria-label="t('product.list.pagination.prev')"
+				/>
+			</UTooltip>
+		</template>
+
+		<template #next>
+			<UTooltip :text="t('product.list.pagination.next')">
+				<UButton
+					:icon="icon('chevron-right')"
+					color="neutral"
+					variant="outline"
+					:disabled="isLast"
+					:aria-label="t('product.list.pagination.next')"
+				/>
+			</UTooltip>
+		</template>
+
+		<template #last>
+			<UTooltip :text="t('product.list.pagination.last')">
+				<UButton
+					:icon="icon('chevron-double-right')"
+					color="neutral"
+					variant="outline"
+					:disabled="isLast"
+					:aria-label="t('product.list.pagination.last')"
+				/>
+			</UTooltip>
+		</template>
+
+		<template #item="{ item, page: currentPage }">
+			<UButton
+				:color="currentPage === item.value ? 'primary' : 'neutral'"
+				:variant="currentPage === item.value ? 'solid' : 'outline'"
+				:label="String(item.value)"
+				:ui="{ label: 'min-w-5 text-center' }"
+				:aria-label="t('product.list.pagination.page', { page: item.value })"
+				square
+			/>
+		</template>
+	</UPagination>
+</template>

package/app/components/category/skeleton/CategoryDetailSkeleton.vue

@@ -0,0 +1,12 @@
+<template>
+	<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8">
+		<USkeleton class="w-full aspect-square rounded-lg" />
+		<div class="flex flex-col gap-4">
+			<USkeleton class="h-8 w-3/4" />
+			<USkeleton class="h-3 w-1/4" />
+			<USkeleton class="h-3 w-1/3" />
+			<USkeleton class="h-5 w-1/2" />
+			<USkeleton class="h-10 w-full mt-4 rounded-md" />
+		</div>
+	</div>
+</template>

package/app/components/category/skeleton/CategoryListSkeleton.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const { viewMode } = useViewMode();
+</script>
+
+<template>
+	<!-- Grid skeleton -->
+	<div
+		v-if="viewMode !== 'list'"
+		class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
+	>
+		<UCard
+			v-for="i in 8"
+			:key="i"
+			class="flex flex-col overflow-hidden"
+			:ui="{ body: 'flex-1' }"
+		>
+			<template #header>
+				<div class="h-50 flex items-center justify-center">
+					<USkeleton class="w-full h-full" />
+				</div>
+			</template>
+			<div class="flex flex-col gap-2">
+				<USkeleton class="h-4 w-3/4" />
+				<USkeleton class="h-3 w-16" />
+				<USkeleton class="h-3 w-12" />
+				<USkeleton class="h-4 w-1/2" />
+			</div>
+			<template #footer>
+				<div class="flex gap-2">
+					<USkeleton class="h-8 flex-1 rounded-md" />
+					<USkeleton class="h-8 flex-1 rounded-md" />
+				</div>
+			</template>
+		</UCard>
+	</div>
+
+	<!-- List skeleton -->
+	<div
+		v-else
+		class="mt-6 flex flex-col gap-4"
+	>
+		<UCard
+			v-for="i in 8"
+			:key="i"
+			class="overflow-hidden"
+			:ui="{ body: 'p-0 sm:p-0' }"
+		>
+			<div class="flex flex-row items-center gap-4 p-4">
+				<USkeleton class="w-15 h-15 shrink-0 rounded-md" />
+				<div class="flex-1 min-w-0 flex flex-col gap-1.5">
+					<USkeleton class="h-4 w-3/4" />
+					<USkeleton class="h-3 w-16" />
+					<USkeleton class="h-3 w-12" />
+				</div>
+				<div class="shrink-0 flex flex-col items-end gap-2">
+					<USkeleton class="h-4 w-16" />
+					<div class="flex gap-2">
+						<USkeleton class="h-7 w-14 rounded-md" />
+						<USkeleton class="h-7 w-20 rounded-md" />
+					</div>
+				</div>
+			</div>
+		</UCard>
+	</div>
+</template>

package/app/components/category/view/CategoryViewToggle.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { viewMode } = useViewMode();
+const { t } = useI18n();
+</script>
+
+<template>
+	<div class="flex items-center gap-1">
+		<UTooltip :text="t('product.list.view.list')">
+			<UButton
+				:icon="icon('list')"
+				:variant="viewMode === 'list' ? 'soft' : 'ghost'"
+				:color="viewMode === 'list' ? 'primary' : 'neutral'"
+				size="sm"
+
+				:aria-label="t('product.list.view.list')"
+				@click="viewMode = 'list'"
+			/>
+		</UTooltip>
+		<UTooltip :text="t('product.list.view.grid')">
+			<UButton
+				:icon="icon('grid')"
+				:variant="viewMode === 'grid' ? 'soft' : 'ghost'"
+				:color="viewMode === 'grid' ? 'primary' : 'neutral'"
+				size="sm"
+
+				:aria-label="t('product.list.view.grid')"
+				@click="viewMode = 'grid'"
+			/>
+		</UTooltip>
+	</div>
+</template>