From 345bfde3064b9d13c2ee7283c00ab54723d278e0 Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Fri, 10 Apr 2026 21:30:00 +0200
Subject: [PATCH] feat(modules): translated display names and inline settings
 modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../Modules/CompanyModulesController.php      |  26 +++-
 .../Modules/ModuleSettingsController.php      |  27 +++-
 .../modules/components/CompanyModuleCard.vue  |  13 +-
 .../components/ModuleSettingsModal.vue        | 136 ++++++++++++++++++
 .../scripts/features/company/modules/store.ts |   1 +
 5 files changed, 193 insertions(+), 10 deletions(-)
 create mode 100644 resources/scripts/features/company/modules/components/ModuleSettingsModal.vue

diff --git a/app/Http/Controllers/Company/Modules/CompanyModulesController.php b/app/Http/Controllers/Company/Modules/CompanyModulesController.php
index 48dedae1..2154d4de 100644
--- a/app/Http/Controllers/Company/Modules/CompanyModulesController.php
+++ b/app/Http/Controllers/Company/Modules/CompanyModulesController.php
@@ -36,17 +36,41 @@ class CompanyModulesController extends Controller
             ->get()
             ->map(function (Module $module) {
                 $slug = Str::kebab($module->name);
+                $menu = ModuleRegistry::menuFor($slug);
+                $translatedMenuTitle = $this->translateMenuTitle($menu['title'] ?? null);
+                $displayName = $translatedMenuTitle ?? Str::headline($module->name);
 
                 return [
                     'slug' => $slug,
                     'name' => $module->name,
+                    'display_name' => $displayName,
                     'version' => $module->version,
                     'has_settings' => ModuleRegistry::settingsFor($slug) !== null,
-                    'menu' => ModuleRegistry::menuFor($slug),
+                    'menu' => $menu === null
+                        ? null
+                        : [
+                            ...$menu,
+                            'title' => $translatedMenuTitle ?? $menu['title'],
+                        ],
                 ];
             })
             ->values();
 
         return response()->json(['data' => $modules]);
     }
+
+    private function translateMenuTitle(?string $title): ?string
+    {
+        if ($title === null) {
+            return null;
+        }
+
+        $translatedTitle = __($title);
+
+        if (! is_string($translatedTitle) || $translatedTitle === $title) {
+            return null;
+        }
+
+        return $translatedTitle;
+    }
 }
diff --git a/app/Http/Controllers/Company/Modules/ModuleSettingsController.php b/app/Http/Controllers/Company/Modules/ModuleSettingsController.php
index d3a6612b..0b8723c8 100644
--- a/app/Http/Controllers/Company/Modules/ModuleSettingsController.php
+++ b/app/Http/Controllers/Company/Modules/ModuleSettingsController.php
@@ -43,7 +43,7 @@ class ModuleSettingsController extends Controller
             ->all();
 
         return response()->json([
-            'schema' => $schema->toArray(),
+            'schema' => $this->translateSchema($schema->toArray()),
             'values' => $values,
         ]);
     }
@@ -136,6 +136,31 @@ class ModuleSettingsController extends Controller
      * without losing information. Reads happen in show() above and naturally
      * return strings; the frontend handles re-coercion in BaseSchemaForm.vue.
      */
+    /**
+     * Translate section titles and field labels in the schema so the
+     * frontend receives ready-to-display strings instead of Laravel
+     * translation keys it cannot resolve (e.g. `helloworld::settings.greeting`).
+     *
+     * @param  array{sections: list<array<string, mixed>>}  $schema
+     * @return array{sections: list<array<string, mixed>>}
+     */
+    private function translateSchema(array $schema): array
+    {
+        foreach ($schema['sections'] as &$section) {
+            if (isset($section['title'])) {
+                $section['title'] = __($section['title']);
+            }
+
+            foreach ($section['fields'] as &$field) {
+                if (isset($field['label'])) {
+                    $field['label'] = __($field['label']);
+                }
+            }
+        }
+
+        return $schema;
+    }
+
     private function normalizeForStorage(mixed $value): string
     {
         if (is_bool($value)) {
diff --git a/resources/scripts/features/company/modules/components/CompanyModuleCard.vue b/resources/scripts/features/company/modules/components/CompanyModuleCard.vue
index 9364d6ad..ba92d69a 100644
--- a/resources/scripts/features/company/modules/components/CompanyModuleCard.vue
+++ b/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>
diff --git a/resources/scripts/features/company/modules/components/ModuleSettingsModal.vue b/resources/scripts/features/company/modules/components/ModuleSettingsModal.vue
new file mode 100644
index 00000000..29534698
--- /dev/null
+++ b/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>
diff --git a/resources/scripts/features/company/modules/store.ts b/resources/scripts/features/company/modules/store.ts
index 0cdbe730..12c15aff 100644
--- a/resources/scripts/features/company/modules/store.ts
+++ b/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