i18n-dashboard 0.1.0

package/pages/projects/[id]/formats/number.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="p-6 max-w-5xl mx-auto space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('formats.number_title', 'Number formats') }}</h1>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          {{ t('formats.number_subtitle', 'Configure') }} <code class="font-mono text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded">$n(value, 'currency')</code> {{ t('formats.per_locale', 'by locale.') }}
+        </p>
+      </div>
+      <UButton icon="i-heroicons-plus" @click="openCreate">{{ t('formats.add_number_format', 'Add a format') }}</UButton>
+    </div>
+
+    <!-- Info box -->
+    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg px-4 py-3 text-sm text-blue-700 dark:text-blue-300 flex gap-2">
+      <UIcon name="i-heroicons-information-circle" class="shrink-0 mt-0.5" />
+      <div>
+        {{ t('formats.number_info', 'Use') }} <code class="font-mono text-xs bg-blue-100 dark:bg-blue-900/40 px-1 rounded">$n(1234.56, 'currency')</code> {{ t('formats.number_info2', 'in your templates. Options correspond to') }} <strong>Intl.NumberFormat</strong> {{ t('formats.parameters', 'parameters.') }}
+        <NuxtLink to="https://vue-i18n.intlify.dev/guide/essentials/number.html" target="_blank" class="underline ml-1">{{ t('formats.documentation', 'Documentation vue-i18n') }} ↗</NuxtLink>
+      </div>
+    </div>
+
+    <!-- Empty -->
+    <div v-if="!numberFormats?.length" class="text-center py-16 text-gray-400">
+      <UIcon name="i-heroicons-calculator" class="text-4xl mb-3" />
+      <p class="font-medium">{{ t('formats.no_format', 'No format configured') }}</p>
+      <p class="text-sm mt-1">{{ t('formats.add_to_use', 'Add formats to use') }} <code class="font-mono text-xs">$n()</code> {{ t('formats.in_templates', 'in your templates.') }}</p>
+      <UButton class="mt-4" icon="i-heroicons-plus" @click="openCreate">{{ t('formats.add_number_format', 'Add a format') }}</UButton>
+    </div>
+
+    <!-- Grouped by locale -->
+    <div v-else class="space-y-6">
+      <div v-for="(formats, locale) in groupedByLocale" :key="locale">
+        <div class="flex items-center gap-2 mb-3">
+          <span class="text-xs font-mono font-bold bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded text-gray-500 dark:text-gray-400 uppercase">{{ locale }}</span>
+          <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ findLanguage(locale)?.nativeName || locale }}</span>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <UCard v-for="fmt in formats" :key="fmt.id">
+            <div class="flex items-start justify-between gap-2">
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <code class="text-sm font-mono font-semibold text-primary-600 dark:text-primary-400">'{{ fmt.name }}'</code>
+                  <UBadge size="xs" color="neutral" variant="soft">{{ fmt.options.style || 'decimal' }}</UBadge>
+                  <UBadge v-if="fmt.options.currency" size="xs" color="info" variant="soft">{{ fmt.options.currency }}</UBadge>
+                </div>
+                <!-- Live preview -->
+                <p class="text-xs text-gray-400 font-mono">
+                  {{ previewNumber(fmt.options) }}
+                </p>
+                <!-- Options summary -->
+                <div class="mt-2 flex flex-wrap gap-1">
+                  <span v-for="(v, k) in fmt.options" :key="k" class="text-xs bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded px-1.5 py-0.5 font-mono text-gray-500 dark:text-gray-400">
+                    {{ k }}: {{ v }}
+                  </span>
+                </div>
+              </div>
+              <div class="flex gap-1 shrink-0">
+                <UButton icon="i-heroicons-pencil" size="xs" color="neutral" variant="ghost" @click="openEdit(fmt)" />
+                <UButton icon="i-heroicons-trash" size="xs" color="error" variant="ghost" @click="remove(fmt.id)" />
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create/Edit modal -->
+    <UModal v-model:open="showModal" :title="editing ? t('formats.edit_format', 'Edit format') : t('formats.new_number_format', 'New number format')">
+      <template #body>
+        <div class="space-y-4">
+          <div class="grid grid-cols-2 gap-3">
+            <UFormField :label="t('formats.locale', 'Locale')" required>
+              <USelect v-model="form.locale" :items="localeOptions" class="w-full" />
+            </UFormField>
+            <UFormField :label="t('formats.format_name', 'Format name')" :hint="t('formats.format_name_hint', 'E.g.: currency, decimal, percent')" required>
+              <UInput v-model="form.name" placeholder="currency" class="w-full" />
+            </UFormField>
+          </div>
+
+          <UFormField :label="t('formats.style', 'Style')">
+            <div class="grid grid-cols-4 gap-1.5">
+              <button
+                v-for="s in ['decimal', 'currency', 'percent', 'unit']"
+                :key="s"
+                class="px-2 py-1.5 rounded border text-xs font-mono transition-colors"
+                :class="form.options.style === s
+                  ? 'bg-primary-50 dark:bg-primary-900/30 border-primary-300 dark:border-primary-700 text-primary-700 dark:text-primary-300'
+                  : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300'"
+                @click="form.options.style = s"
+              >{{ s }}</button>
+            </div>
+          </UFormField>
+
+          <!-- Currency options -->
+          <div v-if="form.options.style === 'currency'" class="grid grid-cols-2 gap-3">
+            <UFormField :label="t('formats.currency', 'Currency (ISO 4217)')">
+              <UInput v-model="form.options.currency" placeholder="EUR" class="w-full" />
+            </UFormField>
+            <UFormField :label="t('formats.currency_display', 'Currency display')">
+              <USelect v-model="form.options.currencyDisplay" :items="['symbol', 'narrowSymbol', 'code', 'name']" class="w-full" />
+            </UFormField>
+          </div>
+
+          <!-- Unit options -->
+          <div v-if="form.options.style === 'unit'" class="grid grid-cols-2 gap-3">
+            <UFormField :label="t('formats.unit', 'Unit')" :hint="t('formats.unit_hint', 'E.g.: kilometer, kilogram')">
+              <UInput v-model="form.options.unit" placeholder="kilometer" class="w-full" />
+            </UFormField>
+            <UFormField :label="t('formats.unit_display', 'Unit display')">
+              <USelect v-model="form.options.unitDisplay" :items="['short', 'long', 'narrow']" class="w-full" />
+            </UFormField>
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <UFormField :label="t('formats.notation', 'Notation')">
+              <USelect v-model="form.options.notation" :items="[{label: t('formats.standard_default', 'Standard (default)'), value: ''}, 'standard', 'scientific', 'engineering', 'compact']" class="w-full" />
+            </UFormField>
+            <UFormField :label="t('formats.grouping', 'Grouping')">
+              <USelect v-model="form.options.useGrouping" :items="[{label: t('formats.auto_default', 'Auto (default)'), value: ''}, {label: t('formats.enabled', 'Enabled'), value: true}, {label: t('formats.disabled', 'Disabled'), value: false}]" class="w-full" />
+            </UFormField>
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <UFormField :label="t('formats.min_fraction_digits', 'Min digits after decimal')">
+              <UInput v-model.number="form.options.minimumFractionDigits" type="number" min="0" max="20" placeholder="0" class="w-full" />
+            </UFormField>
+            <UFormField :label="t('formats.max_fraction_digits', 'Max digits after decimal')">
+              <UInput v-model.number="form.options.maximumFractionDigits" type="number" min="0" max="20" placeholder="3" class="w-full" />
+            </UFormField>
+          </div>
+
+          <!-- Live preview -->
+          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+            <p class="text-xs text-gray-400 mb-1">{{ t('formats.preview', 'Preview') }} (1234.56):</p>
+            <p class="text-sm font-mono font-semibold text-gray-700 dark:text-gray-300">{{ previewNumber(cleanOptions) }}</p>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" @click="showModal = false">{{ t('common.cancel', 'Cancel') }}</UButton>
+          <UButton :loading="saving" @click="save">{{ editing ? t('formats.update', 'Update') : t('common.create', 'Create') }}</UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { currentProject } = useProject()
+const { numberFormats, createNumberFormat, updateNumberFormat, deleteNumberFormat } = useFormats()
+const { findLanguage, projectLanguages } = useLanguages()
+const toast = useToast()
+const { t } = useT()
+
+const localeOptions = computed(() =>
+  (projectLanguages.value || []).map((l: any) => ({ label: `${l.code} — ${l.name}`, value: l.code }))
+)
+
+const groupedByLocale = computed(() => {
+  const groups: Record<string, any[]> = {}
+  for (const fmt of (numberFormats.value || [])) {
+    if (!groups[fmt.locale]) groups[fmt.locale] = []
+    groups[fmt.locale].push(fmt)
+  }
+  return groups
+})
+
+function previewNumber(opts: Record<string, any>) {
+  try {
+    const clean: any = {}
+    for (const [k, v] of Object.entries(opts)) {
+      if (v !== '' && v !== null && v !== undefined) clean[k] = v
+    }
+    return new Intl.NumberFormat('fr-FR', clean).format(1234.56)
+  } catch {
+    return '—'
+  }
+}
+
+const showModal = ref(false)
+const saving = ref(false)
+const editing = ref<any>(null)
+
+const defaultForm = () => ({
+  locale: (projectLanguages.value as any[])?.[0]?.code || 'fr',
+  name: '',
+  options: {
+    style: 'decimal',
+    currency: '',
+    currencyDisplay: 'symbol',
+    notation: '',
+    useGrouping: '',
+    minimumFractionDigits: '',
+    maximumFractionDigits: '',
+    unit: '',
+    unitDisplay: 'short',
+  } as Record<string, any>,
+})
+
+const form = ref(defaultForm())
+
+const cleanOptions = computed(() => {
+  const o: Record<string, any> = {}
+  for (const [k, v] of Object.entries(form.value.options)) {
+    if (v !== '' && v !== null && v !== undefined) o[k] = v
+  }
+  return o
+})
+
+function openCreate() {
+  editing.value = null
+  form.value = defaultForm()
+  showModal.value = true
+}
+
+function openEdit(fmt: any) {
+  editing.value = fmt
+  form.value = {
+    locale: fmt.locale,
+    name: fmt.name,
+    options: { style: 'decimal', currency: '', currencyDisplay: 'symbol', notation: '', useGrouping: '', minimumFractionDigits: '', maximumFractionDigits: '', unit: '', unitDisplay: 'short', ...fmt.options },
+  }
+  showModal.value = true
+}
+
+async function save() {
+  if (!form.value.locale || !form.value.name) return
+  saving.value = true
+  try {
+    if (editing.value) {
+      await updateNumberFormat(editing.value.id, form.value.locale, form.value.name, cleanOptions.value)
+      toast.add({ title: t('formats.format_updated', 'Format updated'), color: 'success' })
+    } else {
+      await createNumberFormat(form.value.locale, form.value.name, cleanOptions.value)
+      toast.add({ title: t('formats.format_created', 'Format created'), color: 'success' })
+    }
+    showModal.value = false
+  } catch (e: any) {
+    toast.add({ title: t('common.error', 'Error'), description: e.message, color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(id: number) {
+  await deleteNumberFormat(id)
+  toast.add({ title: t('formats.format_deleted', 'Format deleted'), color: 'success' })
+}
+</script>

package/pages/projects/[id]/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="p-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('dashboard.title', 'Dashboard') }}</h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">
+          {{ currentProject?.name }} · {{ currentProject?.root_path }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Stats row -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <UCard v-for="stat in topStats" :key="stat.label">
+        <div class="flex items-center gap-3">
+          <div class="p-2 rounded-lg" :class="stat.bg">
+            <UIcon :name="stat.icon" class="text-xl" :class="stat.color" />
+          </div>
+          <div>
+            <p class="text-xs text-gray-500 dark:text-gray-400">{{ stat.label }}</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">
+              <span v-if="pending">—</span>
+              <span v-else>{{ stat.value }}</span>
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- Coverage -->
+      <UCard class="lg:col-span-2">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h2 class="font-semibold text-gray-900 dark:text-white">{{ t('dashboard.coverage_by_language', 'Coverage by language') }}</h2>
+            <UButton :to="`/projects/${projectId}/translations`" variant="ghost" size="xs" trailing-icon="i-heroicons-arrow-right" color="neutral">{{ t('dashboard.see_all', 'See all') }}</UButton>
+          </div>
+        </template>
+        <div v-if="pending" class="space-y-4"><USkeleton v-for="i in 3" :key="i" class="h-14" /></div>
+        <div v-else-if="!stats?.languages?.length" class="text-center py-10">
+          <UIcon name="i-heroicons-flag" class="text-4xl text-gray-300 mb-2" />
+          <p class="text-gray-400 text-sm">{{ t('languages.none', 'No language configured') }}</p>
+          <UButton :to="`/projects/${projectId}/languages`" size="sm" class="mt-3">{{ t('languages.add', 'Add a language') }}</UButton>
+        </div>
+        <div v-else class="space-y-4">
+          <div v-for="lang in stats.languages" :key="lang.code">
+            <div class="flex items-center justify-between mb-1.5">
+              <div class="flex items-center gap-2">
+                <span class="font-medium text-sm text-gray-800 dark:text-gray-200">{{ findLanguage(lang.code)?.nativeName || lang.name }}</span>
+                <UBadge size="xs" variant="outline" color="neutral">{{ lang.code }}</UBadge>
+                <UBadge v-if="lang.is_default" size="xs" color="primary">{{ t('languages.default_badge', 'Default') }}</UBadge>
+              </div>
+              <span class="text-sm font-semibold" :class="lang.coverage >= 80 ? 'text-green-600' : lang.coverage >= 50 ? 'text-yellow-600' : 'text-red-500'">
+                {{ lang.coverage }}%
+              </span>
+            </div>
+            <div class="h-2.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden flex">
+              <div class="bg-green-500 transition-all duration-500" :style="{ width: `${pct(lang.approved, lang.total)}%` }" />
+              <div class="bg-blue-400 transition-all duration-500" :style="{ width: `${pct(lang.reviewed, lang.total)}%` }" />
+              <div class="bg-yellow-400 transition-all duration-500" :style="{ width: `${pct(lang.draft, lang.total)}%` }" />
+            </div>
+            <div class="flex gap-4 mt-1 text-xs text-gray-400">
+              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block" />{{ t('status.approved', 'Approved') }} ({{ lang.approved }})</span>
+              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-blue-400 inline-block" />{{ t('status.reviewed', 'Reviewed') }} ({{ lang.reviewed }})</span>
+              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-yellow-400 inline-block" />{{ t('status.draft', 'Draft') }} ({{ lang.draft }})</span>
+              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 inline-block" />{{ t('status.missing', 'Missing') }} ({{ lang.missing }})</span>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Activity -->
+      <UCard>
+        <template #header><h2 class="font-semibold text-gray-900 dark:text-white">{{ t('dashboard.recent_activity', 'Recent activity') }}</h2></template>
+        <div v-if="pending" class="space-y-3"><USkeleton v-for="i in 5" :key="i" class="h-10" /></div>
+        <div v-else-if="!stats?.recentActivity?.length" class="text-center py-8">
+          <UIcon name="i-heroicons-clock" class="text-4xl text-gray-300 mb-2" />
+          <p class="text-gray-400 text-sm">{{ t('dashboard.no_activity', 'No recent activity') }}</p>
+        </div>
+        <div v-else class="space-y-1 overflow-y-auto max-h-72">
+          <div v-for="activity in stats.recentActivity" :key="activity.id" class="flex gap-2 items-start p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+            <UIcon
+              :name="activity.changed_by === 'google-translate' ? 'i-heroicons-sparkles' : activity.changed_by === 'sync' ? 'i-heroicons-arrow-path' : 'i-heroicons-pencil'"
+              class="text-sm mt-0.5 shrink-0"
+              :class="activity.changed_by === 'google-translate' ? 'text-yellow-500' : activity.changed_by === 'sync' ? 'text-blue-500' : 'text-gray-400'"
+            />
+            <div class="min-w-0 flex-1">
+              <p class="text-xs font-mono font-medium text-gray-700 dark:text-gray-300 truncate">{{ activity.key }}</p>
+              <p class="text-xs text-gray-400">{{ activity.language_code }} · {{ formatRelative(activity.changed_at) }}</p>
+            </div>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <!-- Code snippet card (shown when advanced features are enabled) -->
+    <UCard v-if="currentProject && (currentProject.enable_number_formats || currentProject.enable_datetime_formats || currentProject.enable_modifiers)">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-code-bracket-square" class="text-purple-500" />
+            <h2 class="font-semibold text-gray-900 dark:text-white">{{ t('dashboard.generated_config', 'Generated vue-i18n configuration') }}</h2>
+          </div>
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            icon="i-heroicons-clipboard"
+            @click="copySnippet"
+          >{{ t('dashboard.copy', 'Copy') }}</UButton>
+        </div>
+      </template>
+      <div v-if="snippetPending" class="space-y-2">
+        <USkeleton class="h-4 w-full" />
+        <USkeleton class="h-4 w-3/4" />
+        <USkeleton class="h-4 w-5/6" />
+      </div>
+      <div v-else-if="snippetData?.snippet">
+        <pre class="text-xs font-mono text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 rounded-lg p-4 overflow-auto max-h-64">{{ snippetData.snippet }}</pre>
+      </div>
+      <div v-else class="text-sm text-gray-400 italic">{{ t('dashboard.no_config_generated', 'No configuration generated for this project.') }}</div>
+    </UCard>
+
+    <!-- Quick actions -->
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      <UButton block variant="outline" color="neutral" icon="i-heroicons-plus-circle" :to="`/projects/${projectId}/translations`">{{ t('dashboard.new_key', 'New key') }}</UButton>
+      <UButton block variant="outline" color="neutral" icon="i-heroicons-flag" :to="`/projects/${projectId}/languages`">{{ t('nav.languages', 'Languages') }}</UButton>
+      <UButton block variant="outline" color="neutral" icon="i-heroicons-exclamation-triangle" :to="`/projects/${projectId}/translations?status=unused`">
+        {{ t('nav.unused', 'Unused') }}
+        <UBadge v-if="stats?.unusedKeys" size="xs" color="warning" class="ml-1">{{ stats.unusedKeys }}</UBadge>
+      </UButton>
+      <UButton block variant="outline" color="neutral" icon="i-heroicons-rectangle-stack" to="/projects">{{ t('nav.projects', 'Projects') }}</UButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const projectId = computed(() => route.params.id)
+const { currentProject } = useProject()
+const { findLanguage } = useLanguages()
+const { stats, pending } = useStats()
+const toast = useToast()
+const { t } = useT()
+
+const { data: snippetData, pending: snippetPending } = useFetch<any>('/api/formats/snippet', {
+  query: computed(() => ({ project_id: projectId.value })),
+  default: () => null,
+})
+
+async function copySnippet() {
+  if (!snippetData.value?.snippet) return
+  await navigator.clipboard.writeText(snippetData.value.snippet)
+  toast.add({ title: t('common.copied', 'Copied!'), color: 'success' })
+}
+
+const topStats = computed(() => {
+  const s = stats.value as any
+  if (!s) return []
+  const totalT = (s.languages as any[]).reduce((sum: number, l: any) => sum + l.translated, 0)
+  const totalP = (s.languages as any[]).reduce((sum: number, l: any) => sum + l.total, 0)
+  const cov = totalP > 0 ? Math.round((totalT / totalP) * 100) : 0
+  return [
+    { label: t('dashboard.total_keys', 'total keys'), value: s.totalKeys, icon: 'i-heroicons-key', color: 'text-blue-600', bg: 'bg-blue-50 dark:bg-blue-900/20' },
+    { label: t('dashboard.languages', 'Languages'), value: s.languages.length, icon: 'i-heroicons-flag', color: 'text-purple-600', bg: 'bg-purple-50 dark:bg-purple-900/20' },
+    { label: t('dashboard.coverage', 'coverage'), value: `${cov}%`, icon: 'i-heroicons-check-badge', color: 'text-green-600', bg: 'bg-green-50 dark:bg-green-900/20' },
+    { label: t('dashboard.unused_keys', 'unused keys'), value: s.unusedKeys, icon: 'i-heroicons-exclamation-triangle', color: 'text-orange-500', bg: 'bg-orange-50 dark:bg-orange-900/20' },
+  ]
+})
+
+function pct(v: number, t: number) { return t > 0 ? Math.min(100, Math.round((v / t) * 100)) : 0 }
+
+function formatRelative(date: string) {
+  const diff = Date.now() - new Date(date).getTime()
+  const min = Math.floor(diff / 60000)
+  if (min < 1) return t('common.just_now', 'just now')
+  if (min < 60) return `${t('common.ago', 'ago')} ${min}min`
+  const h = Math.floor(min / 60)
+  if (h < 24) return `${t('common.ago', 'ago')} ${h}h`
+  return `${t('common.ago', 'ago')} ${Math.floor(h / 24)}d`
+}
+</script>