feat(modules): translated display names and inline settings modal

CompanyModulesController attaches a translated display_name to each module before returning the list. ModuleSettingsController gains a translateSchema() helper that resolves section titles and field labels against the host app's i18n store before sending the schema to the frontend, so module authors can keep their 'my_module::settings.field' keys and users still see localized strings.

Per-module settings now open in an inline ModuleSettingsModal rather than routing to a standalone page. The modal reuses BaseSchemaForm for rendering, so the whole interaction takes place in-context next to the module card the user clicked — no navigation, no loss of place.

CompanyModuleCard displays the translated display_name instead of the raw slug and emits open-settings with the module payload; the parent view hands that to the modal store.

resources/scripts/features/company/modules/components/CompanyModuleCard.vue

@@ -14,7 +14,7 @@
           <BaseIcon :name="iconName" class="h-5 w-5" />
         </div>
         <div>
-          <h3 class="text-base font-semibold text-heading">{{ data.name }}</h3>
+          <h3 class="text-base font-semibold text-heading">{{ data.display_name }}</h3>
           <p class="text-xs text-muted">{{ $t('modules.version') }} {{ data.version }}</p>
         </div>
       </div>
@@ -25,7 +25,7 @@
         v-if="data.has_settings"
         size="sm"
         variant="primary-outline"
-        @click="goToSettings"
+        @click="emit('open-settings', data)"
       >
         <template #left="slotProps">
           <BaseIcon name="CogIcon" :class="slotProps.class" />
@@ -41,7 +41,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
 import type { CompanyModuleSummary } from '../store'
 
 interface Props {
@@ -49,13 +48,11 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const router = useRouter()
+const emit = defineEmits<{
+  (e: 'open-settings', module: CompanyModuleSummary): void
+}>()
 
 const iconName = computed<string>(() => {
   return props.data.menu?.icon ?? 'PuzzlePieceIcon'
 })
-
-function goToSettings(): void {
-  router.push({ name: 'modules.settings', params: { slug: props.data.slug } })
-}
 </script>

resources/scripts/features/company/modules/components/ModuleSettingsModal.vue

@@ -0,0 +1,136 @@
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeModal"
+    @open="loadSettings"
+  >
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <div v-if="isFetching" class="p-8 sm:p-6 space-y-4">
+      <div class="h-6 bg-surface-tertiary rounded w-1/3 animate-pulse" />
+      <div class="h-12 bg-surface-tertiary rounded animate-pulse" />
+      <div class="h-12 bg-surface-tertiary rounded animate-pulse" />
+    </div>
+
+    <div v-else-if="schema" class="p-8 sm:p-6">
+      <BaseSchemaForm
+        :schema="schema"
+        :values="values"
+        :is-saving="isSaving"
+        @submit="onSubmit"
+      />
+    </div>
+
+    <div v-else class="p-8 sm:p-6 text-center">
+      <p class="text-muted">{{ $t('modules.settings.not_found') }}</p>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  moduleSettingsService,
+  type ModuleSettingsSchema,
+} from '@/scripts/api/services/moduleSettings.service'
+import { useModalStore } from '@/scripts/stores/modal.store'
+import { useNotificationStore } from '@/scripts/stores/notification.store'
+import { handleApiError } from '@/scripts/utils/error-handling'
+import type { CompanyModuleSummary } from '../store'
+
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const schema = ref<ModuleSettingsSchema | null>(null)
+const values = ref<Record<string, unknown>>({})
+const isFetching = ref<boolean>(false)
+const isSaving = ref<boolean>(false)
+const resetTimeoutId = ref<number | null>(null)
+
+const modalActive = computed<boolean>(
+  () => modalStore.active && modalStore.componentName === 'ModuleSettingsModal'
+)
+
+const currentModule = computed<CompanyModuleSummary | null>(() => {
+  if (!modalStore.data || typeof modalStore.data !== 'object') {
+    return null
+  }
+
+  return modalStore.data as CompanyModuleSummary
+})
+
+async function loadSettings(): Promise<void> {
+  if (!currentModule.value?.slug) {
+    return
+  }
+
+  clearResetTimeout()
+  isFetching.value = true
+
+  try {
+    const response = await moduleSettingsService.fetch(currentModule.value.slug)
+    schema.value = response.schema
+    values.value = response.values
+  } catch (err: unknown) {
+    schema.value = null
+    values.value = {}
+    handleApiError(err)
+  } finally {
+    isFetching.value = false
+  }
+}
+
+async function onSubmit(formValues: Record<string, unknown>): Promise<void> {
+  if (!currentModule.value?.slug) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    await moduleSettingsService.update(currentModule.value.slug, formValues)
+    values.value = formValues
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('modules.settings.saved'),
+    })
+    closeModal()
+  } catch (err: unknown) {
+    handleApiError(err)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+  clearResetTimeout()
+  resetTimeoutId.value = window.setTimeout(resetState, 300)
+}
+
+function resetState(): void {
+  schema.value = null
+  values.value = {}
+  isFetching.value = false
+  isSaving.value = false
+  resetTimeoutId.value = null
+}
+
+function clearResetTimeout(): void {
+  if (resetTimeoutId.value !== null) {
+    window.clearTimeout(resetTimeoutId.value)
+    resetTimeoutId.value = null
+  }
+}
+</script>

resources/scripts/features/company/modules/store.ts

@@ -4,6 +4,7 @@ import { companyModulesService } from '@/scripts/api/services/companyModules.ser
 export interface CompanyModuleSummary {
   slug: string
   name: string
+  display_name: string
   version: string
   has_settings: boolean
   menu: { title: string, link: string, icon: string } | null