feat(modules): company-context module surfaces and schema-driven settings

Adds the read-only company "Active Modules" index page (lists every
instance-activated module with a Settings shortcut) and the schema-driven
settings framework (generic BaseSchemaForm.vue renderer + per-company
persistence in CompanySetting). Bundled because they share the same
routes/api.php edit and the index page's Settings button targets the
settings page.

Backend:

- CompanyModulesController::index() returns every Module::enabled = true row
  with a kebab-case slug (via Str::kebab()) and a has_settings flag computed
  from \InvoiceShelf\Modules\Registry::settingsFor(). nwidart stores module
  names in PascalCase ("HelloWorld") but URLs and registry keys use kebab
  ("hello-world") — the controller normalizes so module authors can call
  Registry::registerSettings('hello-world') naturally without thinking
  about the storage format.

- ModuleSettingsController::show(\$slug) returns the registered Schema +
  per-company values from CompanySetting (defaults flow through when nothing
  has been saved yet). update(\$slug) builds Laravel validator rules from
  the Schema's per-field rules arrays — with type-rule fallbacks for
  switch -> boolean, number -> numeric, multiselect -> array — silently
  drops unknown keys, and persists via CompanySetting::setSettings() under
  the module.{slug}.{key} prefix. Activation is instance-global, but
  settings are per-company: two companies on the same instance can
  configure the same activated module differently.

- routes/api.php mounts GET /api/v1/company-modules at the root of the
  company API group and GET/PUT /api/v1/modules/{slug}/settings inside the
  existing modules prefix.

Frontend:

- BaseSchemaForm.vue is the central new component — a generic schema-driven
  form renderer that maps schema fields to BaseInput / BaseTextarea /
  BaseSwitch / BaseMultiselect by type, and builds Vuelidate rules
  dynamically from each field's rules array (supports required, email, url,
  numeric, min:N, max:N). New fields are added by extending the type ->
  component map.

- CompanyModulesIndexView.vue fetches /company-modules and renders a card
  grid (with empty/loading states); CompanyModuleCard.vue is the per-row
  component with the Settings button. ModuleSettingsView.vue fetches
  /modules/{slug}/settings, hands {schema, values} to BaseSchemaForm, and
  posts back on submit.

- Company-context routes.ts is rebuilt after the previous commit relocated
  the marketplace browser away. It now declares modules.index +
  modules.settings, both gated by manage-module ability.

- New api/services/{companyModules,moduleSettings}.service.ts thin clients.

- lang/en.json adds modules.index.{description,empty_title,empty_description},
  modules.settings.{title,open,saved,not_found,none}, and
  modules.sidebar.section_title. The sidebar key is added here even though
  the dynamic sidebar rendering lands in the next commit — keeping all i18n
  additions in one file edit avoids hunk-splitting lang/en.json.
This commit is contained in:
Darko Gjorgjijoski
2026-04-09 00:29:36 +02:00
parent 84725b2dfa
commit e6eeacb6d4
13 changed files with 781 additions and 182 deletions

View File

@@ -0,0 +1,61 @@
<template>
<div
class="
flex flex-col p-6 rounded-lg border border-line-default bg-surface-secondary
shadow-sm hover:shadow-md transition-shadow
"
>
<div class="flex items-start justify-between gap-3">
<div class="flex items-center gap-3">
<div class="
shrink-0 h-10 w-10 rounded-lg bg-primary-50 text-primary-600
flex items-center justify-center
">
<BaseIcon :name="iconName" class="h-5 w-5" />
</div>
<div>
<h3 class="text-base font-semibold text-heading">{{ data.name }}</h3>
<p class="text-xs text-muted">{{ $t('modules.version') }} {{ data.version }}</p>
</div>
</div>
</div>
<div class="mt-6 flex items-center justify-end">
<BaseButton
v-if="data.has_settings"
size="sm"
variant="primary-outline"
@click="goToSettings"
>
<template #left="slotProps">
<BaseIcon name="CogIcon" :class="slotProps.class" />
</template>
{{ $t('modules.settings.open') }}
</BaseButton>
<span v-else class="text-xs text-subtle italic">
{{ $t('modules.settings.none') }}
</span>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import type { CompanyModuleSummary } from '../store'
interface Props {
data: CompanyModuleSummary
}
const props = defineProps<Props>()
const router = useRouter()
const iconName = computed<string>(() => {
return props.data.menu?.icon ?? 'PuzzlePieceIcon'
})
function goToSettings(): void {
router.push({ name: 'modules.settings', params: { slug: props.data.slug } })
}
</script>