feat(portal): configure customer portal accent color in company settings

This commit is contained in:
2026-10-13 19:06:33 +02:00
parent 5463106938
commit 6eea3c0687
5 changed files with 114 additions and 5 deletions

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import dayjs from "dayjs"
import { getPortalColor, portalThemeStyle } from "~/utils/portalTheme"
definePageMeta({
layout: "notLoggedIn"
@@ -7,6 +8,7 @@ definePageMeta({
const auth = useAuthStore()
const toast = useToast()
const portalTheme = computed(() => portalThemeStyle(getPortalColor(auth.activeTenantData?.portalConfig)))
const customer = ref<any | null>(null)
const contracts = ref<any[]>([])
@@ -337,7 +339,7 @@ onMounted(async () => {
</script>
<template>
<div class="min-h-screen bg-gradient-to-b from-neutral-50 via-white to-neutral-100">
<div :style="portalTheme" class="min-h-screen bg-gradient-to-b from-neutral-50 via-white to-neutral-100">
<UContainer class="py-8 lg:py-12">
<div class="flex flex-col gap-6">
<div class="rounded-3xl border border-neutral-200 bg-white/90 p-6 shadow-sm lg:p-8">
@@ -392,7 +394,7 @@ onMounted(async () => {
</div>
<UCard v-else :ui="{ body: 'p-4 sm:p-6' }">
<UTabs v-model="activeTab" :items="portalTabs" class="portal-tabs">
<UTabs v-model="activeTab" :items="portalTabs" :ui="{ trigger: 'data-[state=active]:text-[var(--portal-accent-contrast)]' }" class="portal-tabs">
<template #customer>
<div class="pt-4">
<div class="mb-4 flex items-center justify-between gap-4">
@@ -470,7 +472,7 @@ onMounted(async () => {
</div>
<div class="mt-6 flex justify-end">
<UButton icon="i-heroicons-check" :loading="saving" @click="saveCustomerData">
<UButton icon="i-heroicons-check" class="text-[var(--portal-accent-contrast)]" :loading="saving" @click="saveCustomerData">
Kundendaten speichern
</UButton>
</div>
@@ -770,7 +772,7 @@ onMounted(async () => {
</div>
</UContainer>
<UModal v-model:open="contractChangeModalOpen">
<UModal v-model:open="contractChangeModalOpen" :content="{ style: portalTheme }">
<template #content>
<div class="space-y-5 p-6">
<div>
@@ -787,6 +789,7 @@ onMounted(async () => {
<USelectMenu
v-model="contractChangeForm.contracttype"
:items="selectedContractAllowedContracttypes"
:content="{ style: portalTheme }"
value-key="id"
label-key="name"
class="w-full"
@@ -813,6 +816,7 @@ onMounted(async () => {
</UButton>
<UButton
color="primary"
class="text-[var(--portal-accent-contrast)]"
:loading="submittingContractRequest"
:disabled="!contractChangeForm.contracttype"
@click="submitContractChangeRequest"
@@ -824,7 +828,7 @@ onMounted(async () => {
</template>
</UModal>
<UModal v-model:open="cancellationModalOpen">
<UModal v-model:open="cancellationModalOpen" :content="{ style: portalTheme }">
<template #content>
<div class="space-y-5 p-6">
<div>