From 6eea3c068721a4379ee8dd7a60a38b7e506b0a12 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Tue, 13 Oct 2026 19:06:33 +0200
Subject: [PATCH] feat(portal): configure customer portal accent color in
 company settings

---
 backend/src/routes/auth/me.ts      |  1 +
 backend/src/routes/tenant.ts       | 10 +++++
 frontend/pages/customer-portal.vue | 14 ++++---
 frontend/pages/settings/tenant.vue | 62 ++++++++++++++++++++++++++++++
 frontend/utils/portalTheme.ts      | 32 +++++++++++++++
 5 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 frontend/utils/portalTheme.ts

diff --git a/backend/src/routes/auth/me.ts b/backend/src/routes/auth/me.ts
index ad013c7f..5af4fe53 100644
--- a/backend/src/routes/auth/me.ts
+++ b/backend/src/routes/auth/me.ts
@@ -58,6 +58,7 @@ export default async function meRoutes(server: FastifyInstance) {
                     features: tenants.features,
                     extraModules: tenants.extraModules,
                     businessInfo: tenants.businessInfo,
+                    portalConfig: tenants.portalConfig,
                     numberRanges: tenants.numberRanges,
                     accountChart: tenants.accountChart,
                     taxEvaluationPeriod: tenants.taxEvaluationPeriod,
diff --git a/backend/src/routes/tenant.ts b/backend/src/routes/tenant.ts
index b67fb3a4..d9b913a5 100644
--- a/backend/src/routes/tenant.ts
+++ b/backend/src/routes/tenant.ts
@@ -271,6 +271,16 @@ export default async function tenantRoutes(server: FastifyInstance) {
 
             if (!data) return reply.code(400).send({ error: "data required" })
 
+            if (Object.prototype.hasOwnProperty.call(data, "portalConfig")) {
+                const config = data.portalConfig
+                if (!config || typeof config !== "object" || Array.isArray(config)
+                    || typeof config.primaryColor !== "string" || !/^#[0-9a-f]{6}$/i.test(config.primaryColor.trim())) {
+                    return reply.code(400).send({ error: "Die Portal-Akzentfarbe muss ein Hex-Farbwert wie #69c350 sein." })
+                }
+                data.portalConfig = { ...config, primaryColor: config.primaryColor.trim().toLowerCase() }
+                delete data.portalConfig.primayColor
+            }
+
             const updated = await server.db
                 .update(tenants)
                 .set(data)
diff --git a/frontend/pages/customer-portal.vue b/frontend/pages/customer-portal.vue
index e5a00083..47d81525 100644
--- a/frontend/pages/customer-portal.vue
+++ b/frontend/pages/customer-portal.vue
@@ -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>
diff --git a/frontend/pages/settings/tenant.vue b/frontend/pages/settings/tenant.vue
index d6dc10fd..b620b7a5 100644
--- a/frontend/pages/settings/tenant.vue
+++ b/frontend/pages/settings/tenant.vue
@@ -3,6 +3,7 @@ import {
   TAX_EVALUATION_PERIOD_OPTIONS,
   normalizeTaxEvaluationPeriod
 } from "~/composables/useTaxEvaluation"
+import { DEFAULT_PORTAL_COLOR, getPortalColor, normalizePortalColor, portalThemeStyle } from "~/utils/portalTheme"
 
 const auth = useAuthStore()
 const toast = useToast()
@@ -260,6 +261,16 @@ const setupPage = async () => {
 
 const features = ref({ ...defaultFeatures, ...(auth.activeTenantData?.features || {}) })
 const businessInfo = ref(normalizeBusinessInfo(auth.activeTenantData?.businessInfo))
+const portalColor = ref(getPortalColor(auth.activeTenantData?.portalConfig))
+const portalColorSaving = ref(false)
+const validPortalColor = computed(() => normalizePortalColor(portalColor.value))
+const portalPreviewStyle = computed(() => portalThemeStyle(portalColor.value))
+watch(() => auth.activeTenant, () => {
+  portalColor.value = getPortalColor(auth.activeTenantData?.portalConfig)
+})
+watch(() => auth.activeTenantData?.portalConfig, (config) => {
+  portalColor.value = getPortalColor(config)
+})
 const accountChart = ref(auth.activeTenantData.accountChart || "skr03")
 const taxEvaluationPeriod = ref(normalizeTaxEvaluationPeriod(auth.activeTenantData.taxEvaluationPeriod))
 const accountChartOptions = [
@@ -288,6 +299,18 @@ const saveFeatures = async () => {
   await updateTenant({features: features.value})
 }
 
+const savePortalColor = async () => {
+  if (!validPortalColor.value || portalColorSaving.value) return
+  portalColorSaving.value = true
+  try {
+    const { primayColor, ...portalConfig } = auth.activeTenantData?.portalConfig || {}
+    await updateTenant({ portalConfig: { ...portalConfig, primaryColor: validPortalColor.value } })
+    toast.add({ title: "Akzentfarbe für das Kundenportal gespeichert", color: "success" })
+  } finally {
+    portalColorSaving.value = false
+  }
+}
+
 const formatMcpTokenDate = (value) => {
   if (!value) return "Nie"
 
@@ -614,6 +637,8 @@ onMounted(() => {
             label: 'Dokubox'
           },{
             label: 'Rechnung & Kontakt'
+          },{
+            label: 'Kundenportal'
           },{
             label: 'Plantafel'
           },{
@@ -755,6 +780,43 @@ onMounted(() => {
         </UCard>
 
       </div>
+      <div v-else-if="item.label === 'Kundenportal'">
+        <UCard class="mt-5">
+          <div class="max-w-xl space-y-6">
+            <div>
+              <h2 class="text-lg font-semibold">Akzentfarbe im Kundenportal</h2>
+              <p class="mt-1 text-sm text-muted">Wähle die Farbe für Schaltflächen, Reiter und Hervorhebungen im Kundenportal deiner Firma.</p>
+            </div>
+            <UFormField
+                label="Akzentfarbe"
+                help="Hex-Farbwert mit sechs Zeichen, zum Beispiel #69c350."
+                :error="!validPortalColor ? 'Bitte einen gültigen Hex-Farbwert eingeben.' : undefined"
+            >
+              <div class="flex items-center gap-3">
+                <input
+                    type="color"
+                    :value="validPortalColor || DEFAULT_PORTAL_COLOR"
+                    aria-label="Akzentfarbe auswählen"
+                    class="h-10 w-14 shrink-0 cursor-pointer rounded border border-default bg-default p-1"
+                    @input="portalColor = $event.target.value"
+                >
+                <UInput v-model="portalColor" aria-label="Akzentfarbe als Hex-Wert" placeholder="#69c350" class="w-40" maxlength="7" />
+              </div>
+            </UFormField>
+            <div :style="portalPreviewStyle" class="rounded-xl border border-default p-5" aria-label="Vorschau der Portal-Akzentfarbe">
+              <p class="mb-3 text-sm font-medium text-primary-600">Vorschau Kundenportal</p>
+              <div class="flex flex-wrap items-center gap-3">
+                <UButton class="text-[var(--portal-accent-contrast)]" tabindex="-1">Kundendaten speichern</UButton>
+                <UBadge color="primary" variant="subtle">Rechnung</UBadge>
+              </div>
+            </div>
+            <div class="flex flex-wrap gap-3">
+              <UButton :loading="portalColorSaving" :disabled="!validPortalColor" @click="savePortalColor">Akzentfarbe speichern</UButton>
+              <UButton color="neutral" variant="outline" :disabled="portalColorSaving" @click="portalColor = DEFAULT_PORTAL_COLOR">FEDEO-Grün verwenden</UButton>
+            </div>
+          </div>
+        </UCard>
+      </div>
       <div v-else-if="item.label === 'Plantafel'">
         <UCard class="mt-5">
           <UForm class="w-1/2">
diff --git a/frontend/utils/portalTheme.ts b/frontend/utils/portalTheme.ts
new file mode 100644
index 00000000..802fa6a8
--- /dev/null
+++ b/frontend/utils/portalTheme.ts
@@ -0,0 +1,32 @@
+export const DEFAULT_PORTAL_COLOR = "#69c350"
+
+export function normalizePortalColor(value: unknown): string | null {
+  if (typeof value !== "string") return null
+  const color = value.trim().toLowerCase()
+  return /^#[0-9a-f]{6}$/.test(color) ? color : null
+}
+
+export function getPortalColor(config: any): string {
+  // Older tenant records contain the misspelled key from the original schema.
+  return normalizePortalColor(config?.primaryColor)
+    || normalizePortalColor(config?.primayColor)
+    || DEFAULT_PORTAL_COLOR
+}
+
+export function portalThemeStyle(value: unknown): Record<string, string> {
+  const color = normalizePortalColor(value) || DEFAULT_PORTAL_COLOR
+  const rgb = [1, 3, 5].map(offset => parseInt(color.slice(offset, offset + 2), 16) / 255)
+  const linear = rgb.map(channel => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4)
+  const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722
+  const style: Record<string, string> = {
+    "--ui-primary": color,
+    "--portal-accent-contrast": luminance > 0.179 ? "#000000" : "#ffffff",
+  }
+  const shades = { 50: 5, 100: 10, 200: 25, 300: 45, 400: 70, 500: 100, 600: 80, 700: 65, 800: 50, 900: 35, 950: 20 }
+  for (const [shade, percent] of Object.entries(shades)) {
+    style[`--ui-color-primary-${shade}`] = Number(shade) === 500
+      ? color
+      : `color-mix(in srgb, ${color} ${percent}%, ${Number(shade) < 500 ? "white" : "black"})`
+  }
+  return style
+}