flfeders/FEDEO
2
1
Fork 0
Code Issues 116 Pull Requests Actions Packages Projects 23 Releases 20 Wiki Activity

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

Browse Source
This commit is contained in:
Florian Federspiel
2026-10-13 19:06:33 +02:00
parent 5463106938
commit 6eea3c0687
5 changed files with 114 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/pages/customer-portal.vue
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>

62
frontend/pages/settings/tenant.vue
View File

@@ -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">

32
frontend/utils/portalTheme.ts Normal file
View File

@@ -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
}