i18n-dashboard 0.15.4 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-dashboard",
-  "version": "0.15.4",
+  "version": "0.16.1",
   "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/assets/locales/en.json

@@ -112,6 +112,7 @@
   "review.awaiting_approval": "Awaiting approval",
   "review.translations_approved": "translation(s) approved",
   "languages.deleted": "Language deleted",
+  "languages.translate_missing": "Translate missing",
   "languages.translating": "Translating",
   "languages.translate_done": "Translation complete",
   "languages.with_errors": "with errors",

package/src/components/dashboard/ProjectWidgetGrid.vue

@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import type { TWidgetType } from '../../types/dashboard.type'
+import { WIDGET_REGISTRY, WIDGET_SIZE_CLASSES } from '../../consts/dashboard.const'
+
+const props = defineProps<{
+  projectId: number
+}>()
+
+const { t } = useT()
+const {
+  layout,
+  editing,
+  localLayout,
+  saving,
+  startEditing,
+  cancelEditing,
+  saveLayout,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  removeWidget,
+  addWidget,
+  resizeWidget,
+  updateWidgetConfig,
+} = useProjectDashboard(props.projectId)
+
+const showPicker = ref(false)
+const configIndex = ref(-1)
+
+const activeLayout = computed(() => editing.value ? localLayout.value : layout.value)
+
+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) {
+  switch (type) {
+    case 'stat-keys':
+    case 'stat-coverage':
+    case 'stat-languages':
+    case 'stat-unused':
+      return resolveComponent('DashboardWidgetsStatWidget')
+    case 'projects':
+      return resolveComponent('DashboardWidgetsProjectsWidget')
+    case 'languages-coverage':
+      return resolveComponent('DashboardWidgetsLanguagesCoverageWidget')
+    case 'last-activity':
+      return resolveComponent('DashboardWidgetsActivityWidget')
+    case 'review-queue':
+      return resolveComponent('DashboardWidgetsReviewWidget')
+    default:
+      return 'div'
+  }
+}
+
+function onSaveConfig(patch: { dataSource?: any; title?: string | undefined }) {
+  updateWidgetConfig(configIndex.value, patch)
+  configIndex.value = -1
+}
+</script>
+
+<template>
+  <div>
+    <!-- Toolbar -->
+    <div class="flex items-center justify-end mb-6 gap-2">
+      <template v-if="!editing">
+        <UButton
+          variant="ghost"
+          color="neutral"
+          icon="i-heroicons-pencil-square"
+          @click="startEditing"
+        >
+          {{ t('dashboard.edit', 'Edit') }}
+        </UButton>
+      </template>
+      <template v-else>
+        <UButton
+          variant="ghost"
+          color="neutral"
+          @click="cancelEditing"
+        >
+          {{ t('common.cancel', 'Cancel') }}
+        </UButton>
+        <UButton
+          icon="i-heroicons-plus"
+          variant="outline"
+          color="neutral"
+          @click="showPicker = true"
+        >
+          {{ t('common.add', 'Add') }}
+        </UButton>
+        <UButton
+          :loading="saving"
+          icon="i-heroicons-check"
+          @click="saveLayout"
+        >
+          {{ t('dashboard.done', 'Done') }}
+        </UButton>
+      </template>
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-if="activeLayout.length === 0"
+      class="border border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-16 text-center"
+    >
+      <UIcon
+        name="i-heroicons-squares-2x2"
+        class="text-5xl text-gray-300 dark:text-gray-600 mb-3"
+      />
+      <p class="text-gray-400 font-medium">
+        {{ t('dashboard.no_widgets', 'No widgets') }}
+      </p>
+      <UButton
+        v-if="editing"
+        class="mt-4"
+        icon="i-heroicons-plus"
+        @click="showPicker = true"
+      >
+        {{ t('dashboard.add_widget', 'Add a widget') }}
+      </UButton>
+    </div>
+
+    <!-- Widget grid -->
+    <div
+      v-else
+      class="grid grid-cols-4 gap-4 auto-rows-[minmax(140px,auto)]"
+    >
+      <div
+        v-for="(widget, index) in activeLayout"
+        :key="widget.id"
+        :class="[sizeClass(widget.size), 'relative', editing ? 'cursor-grab' : '']"
+        :draggable="editing"
+        @dragstart="onDragStart(index)"
+        @dragover="onDragOver($event, index)"
+        @dragend="onDragEnd"
+      >
+        <!-- Remove button -->
+        <button
+          v-if="editing"
+          class="absolute -top-2 -left-2 z-10 w-5 h-5 bg-red-500 rounded-full text-white flex items-center justify-center text-xs shadow-sm hover:bg-red-600 transition-colors"
+          @click.stop="removeWidget(index)"
+        >
+          ×
+        </button>
+
+        <!-- Size buttons -->
+        <div
+          v-if="editing"
+          class="absolute -top-2 right-0 z-10 flex gap-0.5"
+        >
+          <button
+            v-for="s in WIDGET_REGISTRY[widget.type].sizes"
+            :key="s"
+            class="px-1 py-0.5 text-xs rounded shadow-sm transition-colors"
+            :class="widget.size === s
+              ? 'bg-primary-500 text-white'
+              : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'"
+            @click.stop="resizeWidget(index, s)"
+          >
+            {{ s }}
+          </button>
+        </div>
+
+        <!-- Config button -->
+        <button
+          v-if="editing && WIDGET_REGISTRY[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"
+        >
+          <UIcon
+            name="i-heroicons-cog-6-tooth"
+            class="text-xs"
+          />
+        </button>
+
+        <div :class="editing ? 'animate-wiggle h-full' : 'h-full'">
+          <component
+            :is="widgetComponent(widget.type)"
+            :id="widget.id"
+            :type="widget.type"
+            :size="widget.size"
+            :editing="editing"
+            :data-source="widget.dataSource"
+            :title="widget.title"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Widget picker (exclude 'projects' widget — not relevant in project context) -->
+    <DashboardWidgetPicker
+      v-model="showPicker"
+      :exclude-types="['projects']"
+      @add="addWidget"
+    />
+
+    <!-- Widget config modal -->
+    <DashboardWidgetConfigModal
+      :open="configIndex !== -1"
+      :widget="configIndex !== -1 ? activeLayout[configIndex] : null"
+      :index="configIndex"
+      @update:open="val => { if (!val) configIndex = -1 }"
+      @save="onSaveConfig"
+    />
+  </div>
+</template>
+
+<style scoped>
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-0.5deg); }
+  50% { transform: rotate(0.5deg); }
+}
+.animate-wiggle {
+  animation: wiggle 0.4s ease-in-out infinite;
+}
+</style>

package/src/components/dashboard/WidgetPicker.vue

@@ -7,6 +7,7 @@ const { t } = useT()
 
 const props = defineProps<{
   modelValue: boolean
+  excludeTypes?: string[]
 }>()
 
 const emit = defineEmits<{
@@ -19,6 +20,10 @@ const open = computed({
   set: (v) => emit('update:modelValue', v),
 })
 
+const availableWidgets = computed(() =>
+  Object.entries(WIDGET_REGISTRY).filter(([type]) => !props.excludeTypes?.includes(type)),
+)
+
 const selectedSizes = ref<Record<string, TWidgetSize>>({})
 
 function getSelectedSize(type: string): TWidgetSize {
@@ -42,7 +47,7 @@ function addWidget(type: string) {
     <template #body>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 p-1">
         <div
-          v-for="(config, type) in WIDGET_REGISTRY"
+          v-for="[type, config] in availableWidgets"
           :key="type"
           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"
         >

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

@@ -122,7 +122,7 @@ function coverageColor(coverage: number) {
             class="font-semibold"
             :class="lang.coverage >= 90 ? 'text-green-600' : lang.coverage >= 60 ? 'text-yellow-500' : 'text-red-500'"
           >
-            {{ lang.coverage }}%
+            {{ lang.coverage.toFixed(2) }}%
           </span>
         </div>
         <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-1.5">

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

@@ -78,14 +78,14 @@ const coverage = computed(() => {
   const langs = stats.value?.languages
   if (!langs?.length) return 0
   const total = langs.reduce((sum: number, l: any) => sum + l.coverage, 0)
-  return Math.round(total / langs.length)
+  return parseFloat((total / langs.length).toFixed(2))
 })
 
 const displayValue = computed(() => {
   if (!stats.value) return '—'
   switch (props.type) {
     case 'stat-keys': return stats.value.totalKeys ?? '—'
-    case 'stat-coverage': return `${coverage.value}%`
+    case 'stat-coverage': return `${coverage.value.toFixed(2)}%`
     case 'stat-languages': return stats.value.languages?.length ?? '—'
     case 'stat-unused': return stats.value.unusedKeys ?? '—'
     default: return '—'

package/src/composables/useProjectDashboard.ts

@@ -0,0 +1,101 @@
+import type { IWidgetConfig, IWidgetDataSource } from '../interfaces/dashboard.interface'
+import type { TWidgetSize } from '../types/dashboard.type'
+import { DEFAULT_PROJECT_LAYOUT } from '../consts/dashboard.const'
+
+export function useProjectDashboard(projectId: number) {
+  const { data, refresh } = useAsyncData(
+    `project-dashboard-layout-${projectId}`,
+    () => $fetch(`/api/dashboard/project-layout?project_id=${projectId}`),
+    { server: false },
+  )
+
+  const layout = computed<IWidgetConfig[]>(() => (data.value as IWidgetConfig[]) ?? DEFAULT_PROJECT_LAYOUT(projectId))
+
+  const editing = ref(false)
+  const localLayout = ref<IWidgetConfig[]>([])
+
+  function startEditing() {
+    localLayout.value = [...layout.value]
+    editing.value = true
+  }
+
+  const draggingIndex = ref<number | null>(null)
+
+  function onDragStart(index: number) {
+    draggingIndex.value = index
+  }
+
+  function onDragOver(e: DragEvent, index: number) {
+    e.preventDefault()
+    if (draggingIndex.value === null || draggingIndex.value === index) return
+    const arr = [...localLayout.value]
+    const [item] = arr.splice(draggingIndex.value, 1)
+    arr.splice(index, 0, item)
+    localLayout.value = arr
+    draggingIndex.value = index
+  }
+
+  function onDragEnd() {
+    draggingIndex.value = null
+  }
+
+  function removeWidget(index: number) {
+    localLayout.value.splice(index, 1)
+  }
+
+  function addWidget(widget: IWidgetConfig) {
+    // Force data source to this project when not explicitly set
+    const withSource: IWidgetConfig = widget.dataSource
+      ? widget
+      : { ...widget, dataSource: { type: 'project', projectId } }
+    localLayout.value.push(withSource)
+  }
+
+  function resizeWidget(index: number, size: TWidgetSize) {
+    localLayout.value[index].size = size
+  }
+
+  function updateWidgetConfig(index: number, patch: { dataSource?: IWidgetDataSource | undefined; title?: string | undefined }) {
+    if (index < 0 || index >= localLayout.value.length) return
+    localLayout.value[index] = { ...localLayout.value[index], ...patch }
+  }
+
+  const saving = ref(false)
+
+  async function saveLayout() {
+    saving.value = true
+    try {
+      await $fetch('/api/dashboard/project-layout', {
+        method: 'POST',
+        body: { project_id: projectId, widgets: localLayout.value },
+      })
+      await refresh()
+      editing.value = false
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function cancelEditing() {
+    editing.value = false
+    localLayout.value = []
+  }
+
+  return {
+    layout,
+    editing,
+    localLayout,
+    saving,
+    draggingIndex,
+    startEditing,
+    cancelEditing,
+    saveLayout,
+    onDragStart,
+    onDragOver,
+    onDragEnd,
+    removeWidget,
+    addWidget,
+    resizeWidget,
+    updateWidgetConfig,
+  }
+}

package/src/consts/dashboard.const.ts

@@ -84,6 +84,19 @@ export const WIDGET_REGISTRY: Record<TWidgetType, { label: string; description:
   },
 }
 
+export function DEFAULT_PROJECT_LAYOUT(projectId: number): IWidgetConfig[] {
+  const ds = { type: 'project' as const, projectId }
+  return [
+    { id: 'proj-default-1', type: 'stat-keys', size: 'sm', dataSource: ds },
+    { id: 'proj-default-2', type: 'stat-coverage', size: 'sm', dataSource: ds },
+    { id: 'proj-default-3', type: 'stat-languages', size: 'sm', dataSource: ds },
+    { id: 'proj-default-4', type: 'stat-unused', size: 'sm', dataSource: ds },
+    { id: 'proj-default-5', type: 'languages-coverage', size: 'wide', dataSource: ds },
+    { id: 'proj-default-6', type: 'last-activity', size: 'md', dataSource: ds },
+    { id: 'proj-default-7', type: 'review-queue', size: 'md', dataSource: ds },
+  ]
+}
+
 export const DEFAULT_LAYOUT: IWidgetConfig[] = [
   { id: 'default-1', type: 'stat-keys', size: 'sm' },
   { id: 'default-2', type: 'stat-coverage', size: 'sm' },

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

@@ -1,343 +1,10 @@
 <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 class="p-6">
+    <DashboardProjectWidgetGrid :project-id="projectId" />
   </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`
-}
+const projectId = computed(() => Number(route.params.id))
 </script>

package/src/pages/projects/[id]/languages.vue

@@ -95,7 +95,7 @@
               :data-cy="'lang-coverage-' + lang.code"
               class="font-medium text-gray-700 dark:text-gray-300"
             >
-              {{ getCoverage(lang.code) }}%
+              {{ getCoverage(lang.code).toFixed(2) }}%
             </span>
           </div>
           <div class="mt-2 h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
@@ -109,6 +109,25 @@
             {{ getTranslatedCount(lang.code) }} / {{ totalKeys }} {{ t('languages.keys_translated', 'keys translated') }}
           </p>
 
+          <!-- Translate missing shortcut -->
+          <div
+            v-if="!lang.is_default && getMissingCount(lang.code) > 0"
+            class="mt-2"
+          >
+            <UButton
+              size="xs"
+              variant="ghost"
+              color="warning"
+              icon="i-heroicons-sparkles"
+              :loading="translatingLang === lang.code"
+              :disabled="showProgress || (translatingLang !== null && translatingLang !== lang.code)"
+              @click="translateMissing(lang)"
+            >
+              {{ t('languages.translate_missing', 'Translate missing') }}
+              <span class="opacity-60">({{ getMissingCount(lang.code) }})</span>
+            </UButton>
+          </div>
+
           <!-- Fallback indicator -->
           <div class="mt-3 pt-2 border-t border-gray-100 dark:border-gray-800">
             <button
@@ -398,7 +417,7 @@
                     {{ findLanguage(l.code)?.nativeName || l.name }}
                     <code class="font-mono text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded ml-1">{{ l.code }}</code>
                   </p>
-                  <p class="text-xs text-gray-400">{{ getCoverage(l.code) }}% {{ t('languages.translated', 'translated') }}</p>
+                  <p class="text-xs text-gray-400">{{ getCoverage(l.code).toFixed(2) }}% {{ t('languages.translated', 'translated') }}</p>
                 </div>
                 <UBadge
                   v-if="l.is_default"
@@ -725,6 +744,24 @@ function sendToBackground() {
   })
 }
 
+const translatingLang = ref<string | null>(null)
+
+function getMissingCount(code: string): number {
+  return Math.max(0, totalKeys.value - getTranslatedCount(code))
+}
+
+async function translateMissing(lang: any) {
+  if (translatingLang.value) return
+  translatingLang.value = lang.code
+  try {
+    const langName = findLanguage(lang.code)?.nativeName || lang.name
+    const jobId = await startTranslateAll(lang.code, lang.name)
+    if (jobId) startPolling(jobId, langName)
+  } finally {
+    translatingLang.value = null
+  }
+}
+
 // ── Add language ─────────────────────────────────────────────────────────
 async function addLanguage() {
   if (!newLang.value.code || !newLang.value.name || !currentProject.value) return

package/src/server/api/dashboard/project-layout.get.ts

@@ -0,0 +1,22 @@
+import { requireAuth } from '../../utils/auth.util'
+import { getDb } from '../../db/index'
+
+export default defineEventHandler(async (event) => {
+  const user = await requireAuth(event)
+  const query = getQuery(event)
+  const projectId = Number(query.project_id)
+
+  if (!projectId) throw createError({ statusCode: 400, message: 'project_id is required' })
+
+  const db = getDb()
+  const settingKey = `dashboard_project_layout_${user.id}_${projectId}`
+  const row = await db('settings').where({ key: settingKey }).first()
+
+  if (!row || !row.value) return null
+
+  try {
+    return JSON.parse(row.value)
+  } catch {
+    return null
+  }
+})

package/src/server/api/dashboard/project-layout.post.ts

@@ -0,0 +1,21 @@
+import { requireAuth } from '../../utils/auth.util'
+import { getDb } from '../../db/index'
+
+export default defineEventHandler(async (event) => {
+  const user = await requireAuth(event)
+  const body = await readBody(event)
+  const { project_id, widgets } = body
+
+  if (!project_id) throw createError({ statusCode: 400, message: 'project_id is required' })
+
+  const db = getDb()
+  const settingKey = `dashboard_project_layout_${user.id}_${project_id}`
+  const value = JSON.stringify(widgets)
+
+  await db('settings')
+    .insert({ key: settingKey, value, updated_at: db.fn.now() })
+    .onConflict('key')
+    .merge()
+
+  return { ok: true }
+})

package/src/server/api/stats/global.get.ts

@@ -105,7 +105,7 @@ export default defineEventHandler(async (event) => {
   const langStats = Array.from(langMap.values()).map(l => ({
     ...l,
     missing: l.total - l.translated,
-    coverage: l.total > 0 ? Math.round((l.translated / l.total) * 100) : 0,
+    coverage: l.total > 0 ? parseFloat(((l.translated / l.total) * 100).toFixed(2)) : 0,
   }))
 
   // Recent activity across all accessible projects

package/src/server/api/stats.get.ts

@@ -48,7 +48,7 @@ export default defineEventHandler(async (event) => {
         draft: statusMap.draft,
         reviewed: statusMap.reviewed,
         approved: statusMap.approved,
-        coverage: total > 0 ? Math.round((translatedCount / total) * 100) : 0,
+        coverage: total > 0 ? parseFloat(((translatedCount / total) * 100).toFixed(2)) : 0,
       }
     }),
   )