@motor-cms/ui-admin 4.0.5 → 4.0.7

package/app/components/client/FooterSlotCard.vue

@@ -22,6 +22,7 @@ const emit = defineEmits<{
 
 const client = useSanctumClient()
 const router = useRouter()
+const route = useRoute()
 const { t, locale } = useI18n()
 const { success, error: notifyError } = useNotify()
 
@@ -145,7 +146,7 @@ async function onCreateFooter(): Promise<void> {
 
     emit('linked', data.uuid, data.id)
     success(t('motor-admin.clients.global_components.footer_created'))
-    await router.push(`/motor-builder/builder-pages/${data.id}/edit`)
+    await router.push(`/motor-builder/builder-pages/${data.id}/edit?returnTo=${encodeURIComponent(route.fullPath)}`)
   } catch (err: unknown) {
     const message = err instanceof Error ? err.message : t('motor-core.errors.create_failed')
     notifyError(t('motor-admin.clients.global_components.footer'), message)
@@ -156,7 +157,7 @@ async function onCreateFooter(): Promise<void> {
 
 function onEditFooter(): void {
   if (pageInfo.value) {
-    router.push(`/motor-builder/builder-pages/${pageInfo.value.id}/edit`)
+    router.push(`/motor-builder/builder-pages/${pageInfo.value.id}/edit?returnTo=${encodeURIComponent(route.fullPath)}`)
   }
 }
 

package/app/composables/useClientFormExtensions.ts

@@ -0,0 +1,89 @@
+// app/composables/useClientFormExtensions.ts
+import type { Component, Ref } from 'vue'
+
+export interface ClientFormExtension {
+  key: string
+  order: number
+  component: Component
+}
+
+const registry: ClientFormExtension[] = reactive([])
+const validityState = reactive<Record<string, boolean>>({})
+
+const callbackRefs = new Map<string, {
+  validate: Ref<() => boolean | Promise<boolean>>
+  getSubmitData: Ref<() => Record<string, unknown>>
+}>()
+
+function ensureCallbackRefs(key: string) {
+  if (!callbackRefs.has(key)) {
+    callbackRefs.set(key, {
+      validate: ref(() => true),
+      getSubmitData: ref(() => ({})),
+    })
+  }
+  return callbackRefs.get(key)!
+}
+
+export function useClientFormExtensions() {
+  function register(ext: ClientFormExtension) {
+    if (registry.some(e => e.key === ext.key)) return
+    registry.push(ext)
+    registry.sort((a, b) => a.order - b.order)
+    validityState[ext.key] = false
+    ensureCallbackRefs(ext.key)
+  }
+
+  function setValidity(key: string, isValid: boolean) {
+    validityState[key] = isValid
+  }
+
+  async function validateAll(): Promise<boolean> {
+    for (const ext of registry) {
+      const refs = callbackRefs.get(ext.key)
+      if (refs) {
+        const result = await refs.validate.value()
+        if (!result) return false
+      }
+    }
+    return true
+  }
+
+  function getAllSubmitData(): Record<string, unknown> {
+    let merged: Record<string, unknown> = {}
+    for (const ext of registry) {
+      const refs = callbackRefs.get(ext.key)
+      if (refs) {
+        merged = { ...merged, ...refs.getSubmitData.value() }
+      }
+    }
+    return merged
+  }
+
+  const extensions = computed(() => [...registry])
+
+  const allExtensionsValid = computed(() =>
+    registry.length === 0 || registry.every(ext => validityState[ext.key] === true)
+  )
+
+  return { extensions, register, setValidity, allExtensionsValid, validateAll, getAllSubmitData }
+}
+
+export function useExtensionCallbacks(key: string) {
+  const refs = ensureCallbackRefs(key)
+
+  function setValidate(fn: () => boolean | Promise<boolean>) {
+    refs.validate.value = fn
+  }
+
+  function setGetSubmitData(fn: () => Record<string, unknown>) {
+    refs.getSubmitData.value = fn
+  }
+
+  onUnmounted(() => {
+    refs.validate.value = () => true
+    refs.getSubmitData.value = () => ({})
+  })
+
+  return { setValidate, setGetSubmitData }
+}

package/app/lang/de/motor-admin/clients.json

@@ -24,27 +24,7 @@
   "group_address": "Adresse",
   "group_contact": "Kontakt",
   "group_other": "Sonstiges",
-  "frontend_config": {
-    "group_brand": "Marke",
-    "group_contact": "Kontakt (Frontend)",
-    "group_features": "Funktionen",
-    "group_social": "Social Media",
-    "group_seo": "SEO",
-    "brand_name": "Markenname",
-    "brand_logo_alt": "Logo Alt-Text",
-    "color_scheme": "Farbschema",
-    "logo_slug": "Logo",
-    "contact_url": "Kontaktseiten-URL",
-    "contact_email": "Kontakt-E-Mail",
-    "contact_whatsapp_url": "WhatsApp-URL",
-    "features_order_line": "Bestellstrecke",
-    "features_appointments": "Terminbuchung",
-    "features_clickpath": "Clickpath",
-    "features_footer_menu": "Footer-Menü",
-    "social_instagram": "Instagram",
-    "social_facebook": "Facebook",
-    "seo_site_name": "Seitenname"
-  },
+  "frontend_config_title": "Frontend-Konfiguration",
   "global_components": {
     "title": "Globale Komponenten",
     "footer": "Footer",

package/app/lang/de/motor-admin/domains.json

@@ -15,6 +15,7 @@
   "path": "Pfad",
   "target": "Ziel",
   "parameters": "Parameter",
+  "is_preview_domain": "Vorschau-Domain",
   "group_connection": "Verbindung",
   "group_routing": "Routing"
 }

package/app/lang/en/motor-admin/clients.json

@@ -24,27 +24,7 @@
   "group_address": "Address",
   "group_contact": "Contact",
   "group_other": "Other",
-  "frontend_config": {
-    "group_brand": "Brand",
-    "group_contact": "Contact (Frontend)",
-    "group_features": "Features",
-    "group_social": "Social Media",
-    "group_seo": "SEO",
-    "brand_name": "Brand Name",
-    "brand_logo_alt": "Logo Alt Text",
-    "color_scheme": "Color Scheme",
-    "logo_slug": "Logo",
-    "contact_url": "Contact Page URL",
-    "contact_email": "Contact Email",
-    "contact_whatsapp_url": "WhatsApp URL",
-    "features_order_line": "Order Line",
-    "features_appointments": "Appointments",
-    "features_clickpath": "Clickpath",
-    "features_footer_menu": "Footer Menu",
-    "social_instagram": "Instagram",
-    "social_facebook": "Facebook",
-    "seo_site_name": "Site Name"
-  },
+  "frontend_config_title": "Frontend Configuration",
   "global_components": {
     "title": "Global Components",
     "footer": "Footer",

package/app/lang/en/motor-admin/domains.json

@@ -14,6 +14,7 @@
   "path": "Path",
   "target": "Target",
   "parameters": "Parameters",
+  "is_preview_domain": "Preview Domain",
   "group_connection": "Connection",
   "group_routing": "Routing"
 }

package/app/pages/motor-admin/clients/[id]/edit.vue

@@ -2,7 +2,6 @@
 <script setup lang="ts">
 import { clientFormMeta } from '../../../../types/generated/form-meta'
 import { clientFormConfig } from '@motor-cms/ui-core/app/types/config/client'
-import { useClientFrontendConfig } from '../../../../composables/useClientFrontendConfig'
 import { useClientLanguages } from '../../../../composables/useClientLanguages'
 
 definePageMeta({ layout: 'default', permission: 'clients.read' })
@@ -15,6 +14,8 @@ const clientId = route.params.id as string
 const isFrontendConfigEnabled
   = useRuntimeConfig().public.featureClientFrontendConfig === true
 
+const { extensions, allExtensionsValid, validateAll, getAllSubmitData } = useClientFormExtensions()
+
 const {
   fields,
   schema,
@@ -39,12 +40,17 @@ const {
   formConfig: clientFormConfig,
   mode: 'edit',
   id: clientId,
-  beforeSubmit: (data) => {
-    if (!isFrontendConfigEnabled) return
-    if (!validateFrontendConfig()) {
+  beforeSubmit: async (data) => {
+    if (!isFrontendConfigEnabled || extensions.value.length === 0) return
+    const valid = await validateAll()
+    if (!valid) {
       throw new Error(t('motor-core.global.validation_failed'))
     }
-    data.frontend_config = getFrontendConfigSubmitData()
+    data.frontend_config = {
+      ...getAllSubmitData(),
+      globalComponents: (data.frontend_config as Record<string, unknown>)?.globalComponents
+        ?? (clientRecord.value?.data?.frontend_config as Record<string, unknown>)?.globalComponents,
+    }
   }
 })
 
@@ -52,27 +58,6 @@ const { data: clientRecord } = useNuxtData<{ data: Record<string, unknown> }>(
   `entity-form-/api/v2/clients-${clientId}`
 )
 
-const {
-  state: frontendConfigState,
-  errors: frontendConfigErrors,
-  fields: frontendConfigFields,
-  groups: frontendConfigGroups,
-  validate: validateFrontendConfig,
-  getSubmitData: getFrontendConfigSubmitData
-} = useClientFrontendConfig({ clientRecord, fetching })
-
-const colorSchemeOptions = [
-  { label: 'energis', value: 'energis' },
-  { label: 'highspeed', value: 'highspeed' },
-  { label: 'jaeckel', value: 'jaeckel' }
-]
-
-const logoSlugOptions = [
-  { label: 'energis', value: 'energis' },
-  { label: 'highspeed', value: 'highspeed' },
-  { label: 'jaeckel', value: 'jaeckel' }
-]
-
 const clientIdRef = computed(() =>
   isFrontendConfigEnabled ? (route.params.id as string) : ''
 )
@@ -99,8 +84,7 @@ async function onFooterLinked(languageId: number, uuid: string, _pageId: number)
     await sanctumClient(`/api/v2/clients/${clientId}`, {
       method: 'PATCH',
       body: {
-        name: freshClient.data.name,
-        slug: freshClient.data.slug,
+        ...freshClient.data,
         frontend_config: {
           ...freshConfig,
           globalComponents: { ...freshGc, footer: freshFooter }
@@ -128,8 +112,7 @@ async function onFooterUnlinked(languageId: number) {
     await sanctumClient(`/api/v2/clients/${clientId}`, {
       method: 'PATCH',
       body: {
-        name: freshClient.data.name,
-        slug: freshClient.data.slug,
+        ...freshClient.data,
         frontend_config: {
           ...freshConfig,
           globalComponents: { ...freshGc, footer: freshFooter }
@@ -143,7 +126,6 @@ async function onFooterUnlinked(languageId: number) {
     notifyError(t('motor-admin.clients.edit_title'), message)
   }
 }
-
 </script>
 
 <template>
@@ -171,17 +153,20 @@ async function onFooterUnlinked(languageId: number) {
       @save-and-new="onSaveAndNew"
     >
       <template
-        v-if="isFrontendConfigEnabled"
+        v-if="isFrontendConfigEnabled && extensions.length > 0"
         #after-fields
       >
-        <ClientFrontendConfigSection
-          :state="frontendConfigState"
-          :fields="frontendConfigFields"
-          :groups="frontendConfigGroups"
-          :errors="frontendConfigErrors"
+        <h2 class="text-lg font-semibold text-highlighted mt-2">
+          {{ t('motor-admin.clients.frontend_config_title') }}
+        </h2>
+        <component
+          v-for="ext in extensions"
+          :key="ext.key"
+          :is="ext.component"
+          :client-id="clientId"
+          :client-record="clientRecord"
           :disabled="!canWrite"
-          :color-scheme-options="colorSchemeOptions"
-          :logo-slug-options="logoSlugOptions"
+          mode="edit"
         />
         <ClientGlobalComponentsSection
           :client-id="route.params.id"
@@ -190,7 +175,7 @@ async function onFooterUnlinked(languageId: number) {
           :languages="languages"
           :is-multi-language="isMultiLanguage"
           :languages-loading="languagesLoading"
-          :disabled="!canWrite"
+          :disabled="!canWrite || !allExtensionsValid"
           @footer-linked="onFooterLinked"
           @footer-unlinked="onFooterUnlinked"
         />

package/app/pages/motor-admin/clients/create.vue

@@ -6,13 +6,27 @@ import { clientFormConfig } from '@motor-cms/ui-core/app/types/config/client'
 definePageMeta({ layout: 'default', permission: 'clients.write' })
 
 const { t } = useI18n()
+
+const isFrontendConfigEnabled
+  = useRuntimeConfig().public.featureClientFrontendConfig === true
+
+const { extensions, validateAll, getAllSubmitData } = useClientFormExtensions()
+
 const { fields, schema, groups, state, loading, formRef, onSubmit, onSaveAndNew } = await useEntityForm({
   apiEndpoint: '/api/v2/clients',
   routePrefix: '/motor-admin/clients',
   translationPrefix: 'motor-admin.clients',
   formMeta: clientFormMeta,
   formConfig: clientFormConfig,
-  mode: 'create'
+  mode: 'create',
+  beforeSubmit: async (data) => {
+    if (!isFrontendConfigEnabled || extensions.value.length === 0) return
+    const valid = await validateAll()
+    if (!valid) {
+      throw new Error(t('motor-core.global.validation_failed'))
+    }
+    data.frontend_config = getAllSubmitData()
+  }
 })
 </script>
 
@@ -32,6 +46,24 @@ const { fields, schema, groups, state, loading, formRef, onSubmit, onSaveAndNew
       show-save-and-new
       @submit="onSubmit"
       @save-and-new="onSaveAndNew"
-    />
+    >
+      <template
+        v-if="isFrontendConfigEnabled && extensions.length > 0"
+        #after-fields
+      >
+        <h2 class="text-lg font-semibold text-highlighted mt-2">
+          {{ t('motor-admin.clients.frontend_config_title') }}
+        </h2>
+        <component
+          v-for="ext in extensions"
+          :key="ext.key"
+          :is="ext.component"
+          :client-id="undefined"
+          :client-record="null"
+          :disabled="false"
+          mode="create"
+        />
+      </template>
+    </FormBase>
   </FormPage>
 </template>

package/app/pages/motor-admin/email-templates/index.vue

@@ -10,6 +10,7 @@ definePageMeta({ permission: 'email-templates.read' })
 type EmailTemplate = components['schemas']['EmailTemplateResource']
 
 const { t } = useI18n()
+const client = useSanctumClient()
 
 const usageModalOpen = ref(false)
 const usageEndpoint = ref('')
@@ -28,6 +29,18 @@ const rowActions: RowActionDef<EmailTemplate>[] = [
       usageEndpoint.value = `/api/v2/email-templates/${row.id}/usage`
       usageModalOpen.value = true
     }
+  },
+  {
+    key: 'duplicate',
+    label: t('motor-core.grid.duplicate'),
+    icon: 'i-lucide-copy',
+    handler: async (row: EmailTemplate) => {
+      const response = await client<{ data: EmailTemplate }>(
+        `/api/v2/email-templates/${row.id}/duplicate`,
+        { method: 'POST' }
+      )
+      await navigateTo(`/motor-admin/email-templates/${response.data.id}/edit`)
+    }
   }
 ]
 

package/app/types/generated/form-meta.ts

@@ -92,7 +92,8 @@ export const domainFormMeta = {
       protocol: { input: 'text', required: true },
       host: { input: 'text', required: true },
       port: { input: 'number', required: true },
-      path: { input: 'text', required: true }
+      path: { input: 'text', required: true },
+      is_preview_domain: { input: 'toggle' }
     }
   },
   patch: {
@@ -104,7 +105,8 @@ export const domainFormMeta = {
       protocol: { input: 'text', required: true },
       host: { input: 'text', required: true },
       port: { input: 'number', required: true },
-      path: { input: 'text', required: true }
+      path: { input: 'text', required: true },
+      is_preview_domain: { input: 'toggle' }
     }
   }
 } as const

package/app/types/generated/grid-meta.ts

@@ -7,10 +7,12 @@ export const aISystemPromptMeta = {
   schemaName: 'AISystemPromptResource',
   fields: {
     id: { type: 'integer', renderer: 'number', hideable: false },
+    name: { type: 'string', sortable: true, hideable: false },
+    prompt: { type: 'string' },
     client: { type: 'ref', renderer: 'text', ref: 'ClientResource', labelKey: 'name' },
     client_id: { type: 'integer', renderer: 'number' },
-    name: { type: 'string', sortable: true, hideable: false },
-    prompt: { type: 'string' }
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -29,7 +31,10 @@ export const clientMeta = {
     is_active: { type: 'boolean', renderer: 'boolean' },
     contact_name: { type: 'string' },
     contact_phone: { type: 'string' },
-    contact_email: { type: 'string', renderer: 'link' }
+    contact_email: { type: 'string', renderer: 'link' },
+    frontend_config: { type: 'unknown' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -41,7 +46,9 @@ export const configVariableMeta = {
     group: { type: 'string' },
     name: { type: 'string', sortable: true, hideable: false },
     value: { type: 'string' },
-    is_invisible: { type: 'boolean', renderer: 'boolean' }
+    is_invisible: { type: 'boolean', renderer: 'boolean' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -49,14 +56,17 @@ export const domainMeta = {
   schemaName: 'DomainResource',
   fields: {
     id: { type: 'integer', renderer: 'number', hideable: false },
+    name: { type: 'string', sortable: true, hideable: false },
     client: { type: 'ref', renderer: 'text', ref: 'ClientResource', labelKey: 'name' },
     client_id: { type: 'integer', renderer: 'number' },
     is_active: { type: 'boolean', renderer: 'boolean' },
-    name: { type: 'string', sortable: true, hideable: false },
+    is_preview_domain: { type: 'boolean', renderer: 'boolean' },
     protocol: { type: 'string' },
     host: { type: 'string' },
     port: { type: 'integer', renderer: 'number' },
-    path: { type: 'string' }
+    path: { type: 'string' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -64,12 +74,12 @@ export const emailTemplateMeta = {
   schemaName: 'EmailTemplateResource',
   fields: {
     id: { type: 'integer', renderer: 'number', hideable: false },
+    name: { type: 'string', sortable: true, hideable: false },
+    slug: { type: 'string' },
     client: { type: 'ref', renderer: 'text', ref: 'ClientResource', labelKey: 'name' },
     client_id: { type: 'integer', renderer: 'number' },
     language: { type: 'ref', renderer: 'text', ref: 'LanguageResource', labelKey: 'name' },
     language_id: { type: 'integer', renderer: 'number' },
-    name: { type: 'string', sortable: true, hideable: false },
-    slug: { type: 'string' },
     subject: { type: 'string' },
     body_text: { type: 'string' },
     body_html: { type: 'string' },
@@ -105,7 +115,9 @@ export const languageMeta = {
     id: { type: 'integer', renderer: 'number', hideable: false },
     iso_639_1: { type: 'string' },
     english_name: { type: 'string' },
-    native_name: { type: 'string' }
+    native_name: { type: 'string' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -115,7 +127,10 @@ export const permissionGroupMeta = {
     id: { type: 'integer', renderer: 'number', hideable: false },
     name: { type: 'string', sortable: true, hideable: false },
     sort_position: { type: 'integer', renderer: 'number' },
-    permissions: { type: 'ref[]', renderer: 'list', ref: 'PermissionResource', labelKey: 'name' }
+    permission_names: { type: 'array' },
+    permissions: { type: 'ref[]', renderer: 'list', ref: 'PermissionResource', labelKey: 'name' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -125,7 +140,9 @@ export const permissionMeta = {
     id: { type: 'integer', renderer: 'number', hideable: false },
     name: { type: 'string', sortable: true, hideable: false },
     guard_name: { type: 'string' },
-    permission_group: { type: 'ref', renderer: 'text', ref: 'PermissionGroupResource', labelKey: 'name' }
+    permission_group: { type: 'ref', renderer: 'text', ref: 'PermissionGroupResource', labelKey: 'name' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -135,7 +152,9 @@ export const roleMeta = {
     id: { type: 'integer', renderer: 'number', hideable: false },
     name: { type: 'string', sortable: true, hideable: false },
     guard_name: { type: 'string' },
-    permissions: { type: 'ref[]', renderer: 'list', ref: 'PermissionResource', labelKey: 'name' }
+    permissions: { type: 'ref[]', renderer: 'list', ref: 'PermissionResource', labelKey: 'name' },
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const
 
@@ -143,12 +162,13 @@ export const userMeta = {
   schemaName: 'UserResource',
   fields: {
     id: { type: 'integer', renderer: 'number', hideable: false },
+    name: { type: 'string', sortable: true, hideable: false },
+    email: { type: 'string', renderer: 'link' },
+    avatar: { type: 'ref', renderer: 'avatar', ref: 'MediaResource' },
     clients: { type: 'ref[]', renderer: 'list', ref: 'ClientResource', labelKey: 'name' },
     roles: { type: 'ref[]', renderer: 'list', ref: 'RoleResource', labelKey: 'name' },
     permissions: { type: 'ref[]', renderer: 'list', ref: 'PermissionResource', labelKey: 'name' },
-    name: { type: 'string', sortable: true, hideable: false },
-    email: { type: 'string', renderer: 'link' },
-    show_onboarding: { type: 'boolean', renderer: 'boolean' },
-    avatar: { type: 'ref', renderer: 'avatar', ref: 'MediaResource' }
+    created_at: { type: 'string' },
+    updated_at: { type: 'string' }
   }
 } as const

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-cms/ui-admin",
-  "version": "4.0.5",
+  "version": "4.0.7",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [

package/app/components/client/FrontendConfigSection.vue

@@ -1,133 +0,0 @@
-<!-- app/components/client/FrontendConfigSection.vue -->
-<script setup lang="ts">
-import type { FormFieldConfig, FormGroupConfig } from '@motor-cms/ui-core/app/types/form'
-
-const props = defineProps<{
-  state: Record<string, unknown>
-  fields: FormFieldConfig[]
-  groups: FormGroupConfig[]
-  errors: Record<string, string>
-  disabled?: boolean
-  colorSchemeOptions: { label: string, value: string }[]
-  logoSlugOptions: { label: string, value: string }[]
-}>()
-
-const appSettings = useAppSettingsStore()
-const isCompact = computed(() => appSettings.formLayout === 'compact')
-
-const formFieldUi = computed(() => isCompact.value
-  ? { container: 'w-full' }
-  : { container: 'w-full max-w-2xl' }
-)
-
-const cardUi = computed(() => isCompact.value
-  ? { root: 'relative flex rounded-lg items-start', container: 'relative flex flex-col p-4 sm:p-6 gap-x-8 gap-y-4', wrapper: 'flex flex-col items-start', body: '' }
-  : undefined
-)
-
-// ============================================
-// Dot-path helpers
-// ============================================
-
-function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
-  return path.split('.').reduce<unknown>((current, key) => {
-    if (current != null && typeof current === 'object') {
-      return (current as Record<string, unknown>)[key]
-    }
-    return undefined
-  }, obj)
-}
-
-function setNestedValue(obj: Record<string, unknown>, path: string, value: unknown): void {
-  const keys = path.split('.')
-  let current: Record<string, unknown> = obj
-  for (let i = 0; i < keys.length - 1; i++) {
-    const key = keys[i]!
-    if (current[key] == null || typeof current[key] !== 'object') {
-      current[key] = {}
-    }
-    current = current[key] as Record<string, unknown>
-  }
-  const lastKey = keys[keys.length - 1]!
-  current[lastKey] = value
-}
-
-// ============================================
-// Grouped field helpers
-// ============================================
-
-function fieldsForGroup(groupKey: string): FormFieldConfig[] {
-  return props.fields.filter(f => f.group === groupKey)
-}
-
-// ============================================
-// Options resolver
-// ============================================
-
-function optionsForField(fieldKey: string): { label: string, value: string }[] {
-  if (fieldKey === 'colorScheme') return props.colorSchemeOptions
-  if (fieldKey === 'logoSlug') return props.logoSlugOptions
-  return []
-}
-</script>
-
-<template>
-  <div :class="isCompact ? 'grid grid-cols-2 gap-4' : 'flex flex-col gap-4'">
-    <UPageCard
-      v-for="(group, groupIdx) in groups"
-      :key="group.key"
-      :class="isCompact && groups.length % 2 === 1 && groupIdx === groups.length - 1 ? 'col-span-2' : ''"
-      :title="group.label"
-      :ui="cardUi"
-    >
-      <div :class="isCompact ? 'grid grid-cols-12 gap-x-4 gap-y-3' : 'space-y-4'">
-        <template
-          v-for="field in fieldsForGroup(group.key)"
-          :key="field.key"
-        >
-          <div :class="isCompact ? 'col-span-12' : ''">
-            <UFormField
-              :label="field.label"
-              :name="field.key"
-              :required="field.required"
-              :error="errors[field.key]"
-              :orientation="isCompact ? 'vertical' : 'horizontal'"
-              :ui="formFieldUi"
-            >
-              <!-- Toggle -->
-              <USwitch
-                v-if="field.input === 'toggle'"
-                :model-value="(getNestedValue(state, field.key) as boolean) ?? false"
-                :disabled="disabled"
-                @update:model-value="setNestedValue(state, field.key, $event)"
-              />
-
-              <!-- Select -->
-              <USelectMenu
-                v-else-if="field.input === 'select'"
-                :model-value="(getNestedValue(state, field.key) as string | undefined)"
-                :items="optionsForField(field.key)"
-                value-key="value"
-                label-key="label"
-                :placeholder="field.label"
-                :disabled="disabled"
-                class="w-full"
-                @update:model-value="setNestedValue(state, field.key, $event)"
-              />
-
-              <!-- Text / Email / URL -->
-              <UInput
-                v-else
-                :model-value="(getNestedValue(state, field.key) as string) ?? ''"
-                :type="field.input === 'email' ? 'email' : field.input === 'url' ? 'url' : 'text'"
-                :disabled="disabled"
-                class="w-full"
-                @update:model-value="setNestedValue(state, field.key, $event)"
-              />
-            </UFormField>
-          </div>
-        </template>
-      </div>
-    </UPageCard>
-  </div>
-</template>

package/app/composables/useClientFrontendConfig.ts

@@ -1,145 +0,0 @@
-import type { Ref, ComputedRef } from 'vue'
-import type { FormFieldConfig, FormGroupConfig } from '@motor-cms/ui-core/app/types/form'
-import {
-  type FrontendConfigFormState,
-  frontendConfigSchema,
-  emptyFrontendConfig,
-  frontendConfigFields,
-  frontendConfigGroups
-} from '../types/frontend-config'
-
-// ============================================
-// Types
-// ============================================
-
-export interface UseClientFrontendConfigOptions {
-  clientRecord: Ref<{ data: Record<string, unknown> } | null | undefined>
-  fetching: Ref<boolean>
-}
-
-export interface UseClientFrontendConfigReturn {
-  state: FrontendConfigFormState
-  errors: Ref<Record<string, string>>
-  fields: ComputedRef<FormFieldConfig[]>
-  groups: ComputedRef<FormGroupConfig[]>
-  validate(): boolean
-  getSubmitData(): Record<string, unknown>
-}
-
-// ============================================
-// Composable
-// ============================================
-
-export function useClientFrontendConfig(
-  options: UseClientFrontendConfigOptions
-): UseClientFrontendConfigReturn {
-  const { t } = useI18n()
-
-  // Reactive form state — starts empty, hydrated on load
-  const state = reactive<FrontendConfigFormState>(emptyFrontendConfig())
-
-  // Flat validation error map: dot-path → first message
-  const errors = ref<Record<string, string>>({})
-
-  // ============================================
-  // Hydration
-  // ============================================
-
-  watch(
-    () => options.fetching.value,
-    (isFetching) => {
-      // Hydrate when fetching completes (or data is already loaded)
-      if (!isFetching) {
-        const raw = options.clientRecord.value?.data?.frontend_config
-        if (!raw) return
-
-        const parsed = frontendConfigSchema(t).safeParse(raw)
-
-        if (parsed.success) {
-          Object.assign(state, parsed.data)
-        } else {
-          // Best-effort deep merge of whatever passed validation
-          const rawConfig = raw as Record<string, unknown>
-          for (const key of Object.keys(state) as Array<keyof FrontendConfigFormState>) {
-            const incoming = rawConfig[key]
-            if (incoming !== undefined && incoming !== null) {
-              if (typeof incoming === 'object' && !Array.isArray(incoming)) {
-                Object.assign(
-                  state[key] as Record<string, unknown>,
-                  incoming as Record<string, unknown>
-                )
-              } else {
-                // @ts-expect-error -- best-effort assignment for primitive fields
-                state[key] = incoming
-              }
-            }
-          }
-        }
-      }
-    },
-    { immediate: true }
-  )
-
-  // ============================================
-  // Validation
-  // ============================================
-
-  function validate(): boolean {
-    const result = frontendConfigSchema(t).safeParse(state)
-    if (result.success) {
-      errors.value = {}
-      return true
-    }
-
-    const flat: Record<string, string> = {}
-    for (const issue of result.error.issues) {
-      const path = issue.path.join('.')
-      if (!flat[path]) {
-        flat[path] = issue.message
-      }
-    }
-    errors.value = flat
-    return false
-  }
-
-  // ============================================
-  // Submit data
-  // ============================================
-
-  function getSubmitData(): Record<string, unknown> {
-    const clone = JSON.parse(JSON.stringify(state)) as Record<string, unknown>
-
-    // Preserve globalComponents from the raw API record — these are
-    // footer UUIDs managed separately (e.g. by GlobalComponentsSection) and
-    // must not be overwritten by the frontend config form.
-    const originalConfig = options.clientRecord.value?.data?.frontend_config as
-      | { globalComponents?: Record<string, unknown> }
-      | undefined
-
-    if (originalConfig?.globalComponents !== undefined) {
-      clone.globalComponents = originalConfig.globalComponents
-    }
-
-    return clone
-  }
-
-  // ============================================
-  // Field / group definitions (i18n-aware)
-  // ============================================
-
-  const fields = computed<FormFieldConfig[]>(() => frontendConfigFields(t))
-  const groups = computed<FormGroupConfig[]>(() => frontendConfigGroups(t))
-
-  // ============================================
-  // Return
-  // ============================================
-
-  return {
-    state,
-    errors,
-    fields,
-    groups,
-    validate,
-    getSubmitData
-  }
-}

package/app/types/frontend-config.ts

@@ -1,258 +0,0 @@
-import { z } from 'zod'
-import type { FormFieldConfig, FormGroupConfig } from '@motor-cms/ui-core/app/types/form'
-
-// ============================================
-// FrontendConfig Interface (full JSON column)
-// ============================================
-
-export interface FrontendConfig {
-  brand: {
-    name: string
-    logoAlt: string
-  }
-  colorScheme: string
-  logoSlug: string
-  contact: {
-    contactUrl: string
-    email: string
-    whatsappUrl: string | null
-  }
-  features: {
-    orderLine: boolean
-    appointments: boolean
-    clickpath: boolean
-    footerMenu: boolean
-  }
-  social: {
-    instagram: string | null
-    facebook: string | null
-  }
-  seo: {
-    siteName: string
-  }
-  globalComponents?: {
-    footer?: Record<string, string> // language_id -> builder_page_uuid
-  }
-}
-
-// ============================================
-// Zod Schema (editable fields only, no globalComponents)
-// ============================================
-
-type TranslateFunction = (key: string) => string
-
-function optionalUrlSchema(t: TranslateFunction) {
-  return z.string().refine(
-    (val) => val === '' || val === null || (() => { try { new URL(val); return true } catch { return false } })(),
-    { message: t('motor-core.global.validation_url') }
-  )
-}
-
-export function frontendConfigSchema(t: TranslateFunction) {
-  return z.object({
-    brand: z.object({
-      name: z.string().min(1, { message: t('motor-core.global.validation_required') }),
-      logoAlt: z.string().min(1, { message: t('motor-core.global.validation_required') })
-    }),
-    colorScheme: z.string().min(1, { message: t('motor-core.global.validation_required') }),
-    logoSlug: z.string().min(1, { message: t('motor-core.global.validation_required') }),
-    contact: z.object({
-      contactUrl: z.string().url({ message: t('motor-core.global.validation_url') }),
-      email: z.string().email({ message: t('motor-core.global.validation_email') }),
-      whatsappUrl: optionalUrlSchema(t).nullable().optional().transform((v) => v ?? null)
-    }),
-    features: z.object({
-      orderLine: z.boolean().default(false),
-      appointments: z.boolean().default(false),
-      clickpath: z.boolean().default(false),
-      footerMenu: z.boolean().default(false)
-    }),
-    social: z.object({
-      instagram: optionalUrlSchema(t).nullable().optional().transform((v) => v ?? null),
-      facebook: optionalUrlSchema(t).nullable().optional().transform((v) => v ?? null)
-    }),
-    seo: z.object({
-      siteName: z.string().min(1, { message: t('motor-core.global.validation_required') })
-    })
-  })
-}
-
-export type FrontendConfigFormState = z.infer<ReturnType<typeof frontendConfigSchema>>
-
-// ============================================
-// Form Field Definitions
-// ============================================
-
-export function frontendConfigFields(t: (key: string) => string): FormFieldConfig[] {
-  return [
-    // Brand group
-    {
-      key: 'brand.name',
-      label: t('motor-admin.clients.frontend_config.brand_name'),
-      input: 'text',
-      required: true,
-      group: 'fc_brand'
-    },
-    {
-      key: 'brand.logoAlt',
-      label: t('motor-admin.clients.frontend_config.brand_logo_alt'),
-      input: 'text',
-      required: true,
-      group: 'fc_brand'
-    },
-    {
-      key: 'colorScheme',
-      label: t('motor-admin.clients.frontend_config.color_scheme'),
-      input: 'select',
-      required: true,
-      group: 'fc_brand'
-    },
-    {
-      key: 'logoSlug',
-      label: t('motor-admin.clients.frontend_config.logo_slug'),
-      input: 'select',
-      required: true,
-      group: 'fc_brand'
-    },
-
-    // Contact group
-    {
-      key: 'contact.contactUrl',
-      label: t('motor-admin.clients.frontend_config.contact_url'),
-      input: 'url',
-      required: true,
-      group: 'fc_contact'
-    },
-    {
-      key: 'contact.email',
-      label: t('motor-admin.clients.frontend_config.contact_email'),
-      input: 'email',
-      required: true,
-      group: 'fc_contact'
-    },
-    {
-      key: 'contact.whatsappUrl',
-      label: t('motor-admin.clients.frontend_config.contact_whatsapp_url'),
-      input: 'url',
-      required: false,
-      group: 'fc_contact'
-    },
-
-    // Features group
-    {
-      key: 'features.orderLine',
-      label: t('motor-admin.clients.frontend_config.features_order_line'),
-      input: 'toggle',
-      required: false,
-      group: 'fc_features'
-    },
-    {
-      key: 'features.appointments',
-      label: t('motor-admin.clients.frontend_config.features_appointments'),
-      input: 'toggle',
-      required: false,
-      group: 'fc_features'
-    },
-    {
-      key: 'features.clickpath',
-      label: t('motor-admin.clients.frontend_config.features_clickpath'),
-      input: 'toggle',
-      required: false,
-      group: 'fc_features'
-    },
-    {
-      key: 'features.footerMenu',
-      label: t('motor-admin.clients.frontend_config.features_footer_menu'),
-      input: 'toggle',
-      required: false,
-      group: 'fc_features'
-    },
-
-    // Social group
-    {
-      key: 'social.instagram',
-      label: t('motor-admin.clients.frontend_config.social_instagram'),
-      input: 'url',
-      required: false,
-      group: 'fc_social'
-    },
-    {
-      key: 'social.facebook',
-      label: t('motor-admin.clients.frontend_config.social_facebook'),
-      input: 'url',
-      required: false,
-      group: 'fc_social'
-    },
-
-    // SEO group
-    {
-      key: 'seo.siteName',
-      label: t('motor-admin.clients.frontend_config.seo_site_name'),
-      input: 'text',
-      required: true,
-      group: 'fc_seo'
-    }
-  ]
-}
-
-// ============================================
-// Form Group Definitions
-// ============================================
-
-export function frontendConfigGroups(t: (key: string) => string): FormGroupConfig[] {
-  return [
-    {
-      key: 'fc_brand',
-      label: t('motor-admin.clients.frontend_config.group_brand')
-    },
-    {
-      key: 'fc_contact',
-      label: t('motor-admin.clients.frontend_config.group_contact')
-    },
-    {
-      key: 'fc_features',
-      label: t('motor-admin.clients.frontend_config.group_features')
-    },
-    {
-      key: 'fc_social',
-      label: t('motor-admin.clients.frontend_config.group_social')
-    },
-    {
-      key: 'fc_seo',
-      label: t('motor-admin.clients.frontend_config.group_seo')
-    }
-  ]
-}
-
-// ============================================
-// Default Empty State
-// ============================================
-
-export function emptyFrontendConfig(): FrontendConfigFormState {
-  return {
-    brand: {
-      name: '',
-      logoAlt: ''
-    },
-    colorScheme: '',
-    logoSlug: '',
-    contact: {
-      contactUrl: '',
-      email: '',
-      whatsappUrl: null
-    },
-    features: {
-      orderLine: false,
-      appointments: false,
-      clickpath: false,
-      footerMenu: false
-    },
-    social: {
-      instagram: null,
-      facebook: null
-    },
-    seo: {
-      siteName: ''
-    }
-  }
-}