i18n-dashboard 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-dashboard",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "A web dashboard to manage vue-i18n translation keys with database persistence",
   "type": "module",
   "bin": {
@@ -30,7 +30,7 @@
     "bcryptjs": "^2.4.3",
     "commander": "^13.1.0",
     "knex": "^3.1.0",
-    "nodemailer": "^6.10.1",
+    "nodemailer": "^8.0.3",
     "nuxt": "^3.21.1",
     "vue": "^3.5.13"
   },
@@ -75,20 +75,23 @@
     "localization"
   ],
   "license": "MIT",
+  "overrides": {
+    "flatted": "^3.4.2"
+  },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
     "@types/node": "^25.3.5",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
-    "@vitest/coverage-v8": "^4.1.0",
-    "@vitest/ui": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.1",
+    "@vitest/ui": "^4.1.1",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^10.0.3",
     "eslint-plugin-vue": "^10.8.0",
     "happy-dom": "^20.8.4",
     "husky": "^9.1.7",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.1",
     "vue-eslint-parser": "^10.4.0"
   }
 }

package/src/app.vue

@@ -1,7 +1,30 @@
+<script setup lang="ts">
+/**
+ * Theme application: update appConfig.ui.colors so the @nuxt/ui colors plugin
+ * regenerates --ui-color-primary-* / --ui-color-neutral-* CSS variables.
+ * The plugin (node_modules/@nuxt/ui/dist/runtime/plugins/colors.js) is reactive —
+ * any change to appConfig.ui.colors triggers an automatic style tag update.
+ *
+ * useFetch is SSR-compatible, so the correct color is applied before the page
+ * reaches the browser (no flash of the default colour).
+ */
+const { theme } = useModuleConfig()
+const appConfig = useAppConfig()
+
+watch(
+  theme,
+  (t) => {
+    if (t?.primary) appConfig.ui.colors.primary = t.primary
+    if (t?.neutral) appConfig.ui.colors.neutral = t.neutral
+  },
+  { immediate: true },
+)
+</script>
+
 <template>
   <UApp>
     <NuxtLoadingIndicator
-      color="rgb(var(--ui-primary))"
+      color="var(--color-primary-500)"
       :height="3"
       :throttle="100"
     />

package/src/assets/locales/en.json

@@ -511,6 +511,7 @@
   "security.session_duration": "Session duration",
   "security.refresh_token_duration": "Refresh token duration",
   "security.reset_link_expiry": "Reset link expiry",
+  "security.nav_label": "Security",
 
   "logs.title": "System logs",
   "logs.description": "Error and warning logs generated by background processes",
@@ -558,5 +559,44 @@
   "smtp.gmail_step2": "If the page shows \"The setting you are looking for is not available\" → you must first enable 2-Step Verification on your Google account",
   "smtp.gmail_step3": "Type a name (e.g. \"i18n-dashboard\") and click Create",
   "smtp.gmail_step4": "Copy the 16-character code shown (e.g. abcd efgh ijkl mnop)",
-  "smtp.gmail_step5": "Paste it in the Password field below — use your Gmail address as Username"
+  "smtp.gmail_step5": "Paste it in the Password field below — use your Gmail address as Username",
+
+  "customization.title": "Customization",
+  "customization.description": "Configure branding, theme and custom widgets",
+  "customization.config_file_active": "Config file is active",
+  "customization.config_file_description": "Values in i18n-dashboard.config.json override these settings.",
+  "customization.branding": "Branding",
+  "customization.app_name": "App name",
+  "customization.app_name_placeholder": "i18n Dashboard",
+  "customization.subtitle": "Subtitle",
+  "customization.subtitle_placeholder": "vue-i18n manager",
+  "customization.logo_url": "Logo URL",
+  "customization.logo_url_placeholder": "https://example.com/logo.png",
+  "customization.logo_url_hint": "URL or base64 data URI. Replaces the default language icon.",
+  "customization.logo_alt": "logo",
+  "customization.default_app_name": "i18n Dashboard",
+  "customization.default_subtitle": "vue-i18n manager",
+  "customization.theme": "Theme",
+  "customization.primary_color": "Primary color",
+  "customization.neutral_color": "Neutral color",
+  "customization.default": "Default",
+  "customization.custom_widgets": "Custom widgets",
+  "customization.no_custom_widgets": "No custom widgets defined",
+  "customization.custom_widgets_hint": "Add iframe-based widgets that appear in the dashboard widget picker",
+  "customization.saved": "Customization saved",
+  "customization.add_widget": "Add custom widget",
+  "customization.edit_widget": "Edit custom widget",
+  "customization.widget_type": "Type ID",
+  "customization.widget_type_placeholder": "my-metrics",
+  "customization.widget_type_hint": "Unique identifier, no spaces",
+  "customization.widget_label": "Label",
+  "customization.widget_label_placeholder": "My Metrics",
+  "customization.widget_description": "Description",
+  "customization.widget_description_placeholder": "Short description shown in the widget picker",
+  "customization.widget_url": "iframe URL",
+  "customization.widget_icon": "Icon",
+  "customization.widget_icon_hint": "Heroicons name, e.g. i-heroicons-chart-bar",
+  "customization.widget_sizes": "Available sizes",
+  "customization.widget_default_size": "Default size",
+  "customization.nav_label": "Customization"
 }

package/src/components/dashboard/ProjectWidgetGrid.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { TWidgetType } from '../../types/dashboard.type'
-import { WIDGET_REGISTRY, WIDGET_SIZE_CLASSES } from '../../consts/dashboard.const'
+import { WIDGET_SIZE_CLASSES } from '../../consts/dashboard.const'
 
 const props = defineProps<{
   projectId: number
@@ -28,12 +27,13 @@ const showPicker = ref(false)
 const configIndex = ref(-1)
 
 const activeLayout = computed(() => editing.value ? localLayout.value : layout.value)
+const { registry: widgetRegistry, getEntry } = useWidgetRegistry()
 
 function sizeClass(size: string) {
   return WIDGET_SIZE_CLASSES[size as keyof typeof WIDGET_SIZE_CLASSES] ?? 'col-span-1 row-span-1'
 }
 
-function widgetComponent(type: TWidgetType) {
+function widgetComponent(type: string) {
   switch (type) {
     case 'stat-keys':
     case 'stat-coverage':
@@ -49,6 +49,9 @@ function widgetComponent(type: TWidgetType) {
     case 'review-queue':
       return resolveComponent('DashboardWidgetsReviewWidget')
     default:
+      if (getEntry(type)?.isCustom) {
+        return resolveComponent('DashboardWidgetsCustomIframeWidget')
+      }
       return 'div'
   }
 }
@@ -150,7 +153,7 @@ function onSaveConfig(patch: { dataSource?: any; title?: string | undefined }) {
           class="absolute -top-2 right-0 z-10 flex gap-0.5"
         >
           <button
-            v-for="s in WIDGET_REGISTRY[widget.type].sizes"
+            v-for="s in widgetRegistry[widget.type]?.sizes ?? []"
             :key="s"
             class="px-1 py-0.5 text-xs rounded shadow-sm transition-colors"
             :class="widget.size === s
@@ -164,7 +167,7 @@ function onSaveConfig(patch: { dataSource?: any; title?: string | undefined }) {
 
         <!-- Config button -->
         <button
-          v-if="editing && WIDGET_REGISTRY[widget.type].hasDataSource"
+          v-if="editing && widgetRegistry[widget.type]?.hasDataSource"
           class="absolute bottom-1 right-1 z-10 w-6 h-6 bg-gray-600/80 dark:bg-gray-400/80 rounded-full text-white flex items-center justify-center text-xs hover:bg-gray-700 transition-colors"
           @click.stop="configIndex = index"
         >

package/src/components/dashboard/WidgetGrid.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { TWidgetType } from '../../types/dashboard.type'
-import { WIDGET_REGISTRY, WIDGET_SIZE_CLASSES } from '../../consts/dashboard.const'
+import { WIDGET_SIZE_CLASSES } from '../../consts/dashboard.const'
 
 const { t } = useT()
 const { currentUser } = useAuth()
@@ -25,12 +24,13 @@ const showPicker = ref(false)
 const configIndex = ref(-1)
 
 const activeLayout = computed(() => editing.value ? localLayout.value : layout.value)
+const { registry: widgetRegistry, getEntry } = useWidgetRegistry()
 
 function sizeClass(size: string) {
   return WIDGET_SIZE_CLASSES[size as keyof typeof WIDGET_SIZE_CLASSES] ?? 'col-span-1 row-span-1'
 }
 
-function widgetComponent(type: TWidgetType) {
+function widgetComponent(type: string) {
   switch (type) {
     case 'stat-keys':
     case 'stat-coverage':
@@ -46,6 +46,9 @@ function widgetComponent(type: TWidgetType) {
     case 'review-queue':
       return resolveComponent('DashboardWidgetsReviewWidget')
     default:
+      if (getEntry(type)?.isCustom) {
+        return resolveComponent('DashboardWidgetsCustomIframeWidget')
+      }
       return 'div'
   }
 }
@@ -156,7 +159,7 @@ function onSaveConfig(patch: { dataSource?: any; title?: string | undefined }) {
           class="absolute -top-2 right-0 z-10 flex gap-0.5"
         >
           <button
-            v-for="s in WIDGET_REGISTRY[widget.type].sizes"
+            v-for="s in widgetRegistry[widget.type]?.sizes ?? []"
             :key="s"
             class="px-1 py-0.5 text-xs rounded shadow-sm transition-colors"
             :class="widget.size === s
@@ -169,7 +172,7 @@ function onSaveConfig(patch: { dataSource?: any; title?: string | undefined }) {
         </div>
 
         <button
-          v-if="editing && WIDGET_REGISTRY[widget.type].hasDataSource"
+          v-if="editing && widgetRegistry[widget.type]?.hasDataSource"
           class="absolute bottom-1 right-1 z-10 w-6 h-6 bg-gray-600/80 dark:bg-gray-400/80 rounded-full text-white flex items-center justify-center text-xs hover:bg-gray-700 transition-colors"
           @click.stop="configIndex = index"
         >

package/src/components/dashboard/WidgetPicker.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { TWidgetSize } from '../../types/dashboard.type'
 import type { IWidgetConfig } from '../../interfaces/dashboard.interface'
-import { WIDGET_REGISTRY } from '../../consts/dashboard.const'
 
 const { t } = useT()
 
@@ -20,20 +19,22 @@ const open = computed({
   set: (v) => emit('update:modelValue', v),
 })
 
+const { registry } = useWidgetRegistry()
+
 const availableWidgets = computed(() =>
-  Object.entries(WIDGET_REGISTRY).filter(([type]) => !props.excludeTypes?.includes(type)),
+  Object.entries(registry.value).filter(([type]) => !props.excludeTypes?.includes(type)),
 )
 
 const selectedSizes = ref<Record<string, TWidgetSize>>({})
 
 function getSelectedSize(type: string): TWidgetSize {
-  return selectedSizes.value[type] ?? WIDGET_REGISTRY[type as keyof typeof WIDGET_REGISTRY].defaultSize
+  return selectedSizes.value[type] ?? registry.value[type]?.defaultSize ?? 'md'
 }
 
 function addWidget(type: string) {
   const size = getSelectedSize(type)
   const id = Date.now().toString(36)
-  emit('add', { id, type: type as IWidgetConfig['type'], size })
+  emit('add', { id, type, size })
   open.value = false
 }
 </script>
@@ -52,16 +53,27 @@ function addWidget(type: string) {
           class="border border-gray-200 dark:border-gray-700 rounded-xl p-4 space-y-3 hover:border-primary-300 dark:hover:border-primary-600 transition-colors"
         >
           <div class="flex items-start gap-3">
-            <div class="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center shrink-0">
+            <div
+              class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
+              :class="config.isCustom ? 'bg-primary-50 dark:bg-primary-950' : 'bg-gray-100 dark:bg-gray-800'"
+            >
               <UIcon
                 :name="config.icon"
-                class="text-gray-600 dark:text-gray-400"
+                :class="config.isCustom ? 'text-primary-500' : 'text-gray-600 dark:text-gray-400'"
               />
             </div>
-            <div class="min-w-0">
-              <p class="text-sm font-semibold text-gray-900 dark:text-white">
-                {{ config.label }}
-              </p>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-1.5">
+                <p class="text-sm font-semibold text-gray-900 dark:text-white">
+                  {{ config.label }}
+                </p>
+                <span
+                  v-if="config.isCustom"
+                  class="text-[10px] px-1.5 py-0.5 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400 font-medium leading-none"
+                >
+                  {{ t('dashboard.custom', 'Custom') }}
+                </span>
+              </div>
               <p class="text-xs text-gray-400 mt-0.5">
                 {{ config.description }}
               </p>

package/src/components/dashboard/widgets/CustomIframeWidget.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { ICustomWidgetDef } from '../../../interfaces/project-config.interface'
+
+const props = defineProps<{
+  id: string
+  type: string
+  size: string
+  editing?: boolean
+  title?: string
+}>()
+
+const { customWidgets } = useModuleConfig()
+const def = computed<ICustomWidgetDef | undefined>(() =>
+  customWidgets.value.find(w => w.type === props.type),
+)
+const url = computed(() =>
+  def.value?.config?.kind === 'iframe' ? def.value.config.url : null,
+)
+const label = computed(() => props.title || def.value?.label || props.type)
+</script>
+
+<template>
+  <div class="w-full h-full relative rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+    <!-- Edit-mode overlay -->
+    <div
+      v-if="editing"
+      class="absolute inset-0 z-10 bg-gray-900/30 flex flex-col items-center justify-center gap-2 pointer-events-none"
+    >
+      <UIcon
+        name="i-heroicons-puzzle-piece"
+        class="text-white text-3xl"
+      />
+      <span class="text-white text-xs font-medium">{{ label }}</span>
+    </div>
+
+    <iframe
+      v-if="url"
+      :src="url"
+      :title="label"
+      class="w-full h-full border-0"
+      loading="lazy"
+      sandbox="allow-scripts"
+    />
+    <div
+      v-else
+      class="w-full h-full flex flex-col items-center justify-center text-gray-400 gap-2"
+    >
+      <UIcon
+        name="i-heroicons-puzzle-piece"
+        class="text-3xl"
+      />
+      <span class="text-xs">{{ label }}</span>
+      <span class="text-xs text-gray-300 dark:text-gray-600">No URL configured</span>
+    </div>
+  </div>
+</template>

package/src/composables/useModuleConfig.ts

@@ -0,0 +1,24 @@
+import type { IBrandingConfig, IThemeConfig, ICustomWidgetDef } from '../interfaces/project-config.interface'
+
+interface IAppConfigResponse {
+  branding: IBrandingConfig | null
+  theme: IThemeConfig | null
+  widgets: { custom?: ICustomWidgetDef[] } | null
+}
+
+/**
+ * Fetches branding / theme / custom-widget config from the server.
+ * useFetch deduplicates by key — all callers share the same cached response.
+ */
+export function useModuleConfig() {
+  const { data, refresh } = useFetch<IAppConfigResponse>('/api/app-config', {
+    key: 'module-config',
+    default: () => ({ branding: null, theme: null, widgets: null }),
+  })
+
+  const branding = computed(() => data.value?.branding ?? null)
+  const theme = computed(() => data.value?.theme ?? null)
+  const customWidgets = computed<ICustomWidgetDef[]>(() => data.value?.widgets?.custom ?? [])
+
+  return { branding, theme, customWidgets, refresh }
+}

package/src/composables/useWidgetRegistry.ts

@@ -0,0 +1,38 @@
+import { WIDGET_REGISTRY } from '../consts/dashboard.const'
+import type { TWidgetSize } from '../types/dashboard.type'
+
+export interface IWidgetRegistryEntry {
+  label: string
+  description: string
+  icon: string
+  sizes: TWidgetSize[]
+  defaultSize: TWidgetSize
+  hasDataSource: boolean
+  isCustom?: boolean
+}
+
+export function useWidgetRegistry() {
+  const { customWidgets } = useModuleConfig()
+
+  const registry = computed<Record<string, IWidgetRegistryEntry>>(() => {
+    const base: Record<string, IWidgetRegistryEntry> = { ...WIDGET_REGISTRY }
+    for (const w of customWidgets.value) {
+      base[w.type] = {
+        label: w.label,
+        description: w.description ?? '',
+        icon: w.icon ?? 'i-heroicons-puzzle-piece',
+        sizes: (w.sizes as TWidgetSize[]) ?? ['md', 'lg'],
+        defaultSize: (w.defaultSize as TWidgetSize) ?? 'md',
+        hasDataSource: false,
+        isCustom: true,
+      }
+    }
+    return base
+  })
+
+  function getEntry(type: string): IWidgetRegistryEntry | undefined {
+    return registry.value[type]
+  }
+
+  return { registry, getEntry }
+}

package/src/interfaces/dashboard.interface.ts

@@ -5,7 +5,7 @@ export interface IWidgetDataSource {
 
 export interface IWidgetConfig {
   id: string
-  type: 'stat-keys' | 'stat-coverage' | 'stat-languages' | 'stat-unused' | 'projects' | 'languages-coverage' | 'last-activity' | 'review-queue'
+  type: string  // built-in TWidgetType or any custom widget type defined in config
   size: 'sm' | 'md' | 'lg' | 'wide' | 'xl'
   dataSource?: IWidgetDataSource // default = 'global'
   title?: string // optional custom title override

package/src/interfaces/project-config.interface.ts

@@ -1,9 +1,40 @@
+export interface IBrandingConfig {
+  name?: string        // App name shown in sidebar (default: "i18n Dashboard")
+  subtitle?: string    // Subtitle below name (default: "vue-i18n manager")
+  logoUrl?: string     // URL or base64 data URI for the logo image
+}
+
+export interface IThemeConfig {
+  primary?: string     // Tailwind color name: 'blue' | 'violet' | 'green' | 'red' | 'orange' | 'teal' | 'cyan' | 'indigo' | 'purple' | 'pink' | 'rose' | 'sky' | 'emerald' | 'amber' | 'lime' | 'fuchsia' | 'yellow'
+  neutral?: string     // Tailwind neutral: 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
+}
+
+export interface ICustomWidgetDef {
+  type: string                  // Unique identifier (e.g. "my-metric")
+  label: string                 // Display label in widget picker
+  description?: string          // Short description
+  icon?: string                 // Heroicons name (e.g. "i-heroicons-chart-bar")
+  sizes: string[]               // Allowed sizes: sm | md | lg | wide | xl
+  defaultSize: string           // Default size when added
+  config: IIframeWidgetConfig
+}
+
+export interface IIframeWidgetConfig {
+  kind: 'iframe'
+  url: string                   // URL to embed in an iframe
+}
+
 export interface IDashboardConfig {
-	uiLanguages?: string[]        // e.g. ["fr", "en", "es"]
-	defaultUiLanguage?: string    // e.g. "fr"
-	project?: {
-		name?: string
-		localesPath?: string
-		keySeparator?: string
-	}
+  uiLanguages?: string[]        // e.g. ["fr", "en", "es"]
+  defaultUiLanguage?: string    // e.g. "fr"
+  project?: {
+    name?: string
+    localesPath?: string
+    keySeparator?: string
+  }
+  branding?: IBrandingConfig
+  theme?: IThemeConfig
+  widgets?: {
+    custom?: ICustomWidgetDef[]
+  }
 }

package/src/layouts/default.vue

@@ -24,18 +24,25 @@
           to="/"
           class="flex items-center gap-2.5"
         >
-          <div class="w-8 h-8 rounded-lg bg-primary-500 flex items-center justify-center shrink-0">
+          <div class="w-8 h-8 rounded-lg bg-primary-500 flex items-center justify-center shrink-0 overflow-hidden">
+            <img
+              v-if="logoUrl"
+              :src="logoUrl"
+              :alt="appName"
+              class="w-full h-full object-cover"
+            >
             <UIcon
+              v-else
               name="i-heroicons-language"
               class="text-white text-base"
             />
           </div>
           <div>
             <h1 class="text-sm font-bold text-gray-900 dark:text-white leading-tight">
-              i18n Dashboard
+              {{ appName }}
             </h1>
             <p class="text-xs text-gray-400">
-              vue-i18n manager
+              {{ appSubtitle }}
             </p>
           </div>
         </NuxtLink>
@@ -225,7 +232,20 @@
             name="i-heroicons-shield-check"
             class="text-base shrink-0"
           />
-          <span class="flex-1">Sécurité</span>
+          <span class="flex-1">{{ t('security.nav_label', 'Security') }}</span>
+        </NuxtLink>
+        <NuxtLink
+          to="/admin/customization"
+          class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"
+          :class="isActive('/admin/customization')
+            ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 font-medium'
+            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'"
+        >
+          <UIcon
+            name="i-heroicons-paint-brush"
+            class="text-base shrink-0"
+          />
+          <span class="flex-1">{{ t('customization.nav_label', 'Customization') }}</span>
         </NuxtLink>
         <NuxtLink
           to="/admin/smtp"
@@ -390,6 +410,10 @@ const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const colorMode = useColorMode()
+const { branding } = useModuleConfig()
+const appName = computed(() => branding.value?.name || 'i18n Dashboard')
+const appSubtitle = computed(() => branding.value?.subtitle || 'vue-i18n manager')
+const logoUrl = computed(() => branding.value?.logoUrl || null)
 const { currentProject, projects: projectsData, systemProject, fetchProjects, visibleProjects: userProjects, syncing, syncProject, pending } = useProject()
 
 const appReady = ref(false)