i18n-dashboard 0.1.0

package/components/dashboard/widgets/ReviewWidget.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { WidgetSize, WidgetDataSource } from '~/types/dashboard.type'
+import { TRANSLATION_STATUS } from '~/server/enums/translation.enum'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String as PropType<WidgetSize>,
+    required: true,
+  },
+  editing: {
+    type: Boolean,
+    required: true,
+  },
+  dataSource: {
+    type: Object as PropType<WidgetDataSource | undefined>,
+    default: undefined,
+  },
+  title: {
+    type: String as PropType<string | undefined>,
+    default: undefined,
+  },
+})
+
+const { t } = useT()
+
+const { effectiveSource, sourceLabel, hasProject } = useWidgetData(
+  props.id,
+  computed(() => props.dataSource),
+)
+
+const effectiveProjectId = computed(() => {
+  const src = effectiveSource.value
+  if (src.type === 'project') return src.projectId
+  return undefined // global = unsupported for review queue
+})
+
+const fetchKey = computed(() => `widget-review-${props.id}-${effectiveProjectId.value ?? 'none'}`)
+
+const { data: reviewData, pending, refresh } = useAsyncData(
+  () => fetchKey.value,
+  async () => {
+    if (!effectiveProjectId.value) return null
+    return await $fetch<any>('/api/keys', {
+      query: {
+        project_id: effectiveProjectId.value,
+        status: TRANSLATION_STATUS.DRAFT,
+        limit: 200,
+      },
+    })
+  },
+  { server: false, watch: [fetchKey] },
+)
+
+const reviewItems = computed(() => {
+  const keys = reviewData.value?.data ?? []
+  const result: Array<{ id: number; key: string; key_description?: string; language_code: string; value: string }> = []
+  for (const k of keys) {
+    for (const [lang, tr] of Object.entries(k.translations as Record<string, any>)) {
+      if (tr?.status === TRANSLATION_STATUS.DRAFT && tr?.value) {
+        result.push({ id: tr.id, key: k.key, key_description: k.description, language_code: lang, value: tr.value })
+      }
+    }
+  }
+  return result
+})
+
+const maxItems = computed(() => {
+  if (props.size === 'lg') return 8
+  return 4
+})
+
+const displayedItems = computed(() => reviewItems.value.slice(0, maxItems.value))
+
+const displayTitle = computed(() => props.title || t('review.title', 'Review queue'))
+
+const processingId = ref<number | null>(null)
+const processingAction = ref('')
+
+async function setStatus(item: { id: number }, status: string): Promise<void> {
+  processingId.value = item.id
+  processingAction.value = status
+  try {
+    await $fetch('/api/translations/bulk-status', {
+      method: 'POST',
+      body: { ids: [item.id], status },
+    })
+    await refresh()
+  } catch {} finally {
+    processingId.value = null
+    processingAction.value = ''
+  }
+}
+</script>
+
+<template>
+  <UCard class="h-full overflow-hidden">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-clipboard-document-check" class="text-gray-400" />
+        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ displayTitle }}</span>
+        <UBadge v-if="reviewItems.length" :label="String(reviewItems.length)" color="warning" variant="soft" size="xs" class="ml-auto" />
+        <span v-else-if="sourceLabel" class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ sourceLabel }}</span>
+      </div>
+    </template>
+
+    <div v-if="pending" class="space-y-2">
+      <USkeleton v-for="i in 3" :key="i" class="h-12 w-full" />
+    </div>
+
+    <div v-else-if="!hasProject" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-clipboard-document-check" class="text-3xl text-gray-300 dark:text-gray-600 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('dashboard.select_project', 'Select a project') }}</p>
+    </div>
+
+    <div v-else-if="!displayedItems.length" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-check-circle" class="text-3xl text-green-400 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('review.empty_title', 'No translations pending') }}</p>
+    </div>
+
+    <div v-else class="overflow-y-auto space-y-2">
+      <div
+        v-for="item in displayedItems"
+        :key="item.id"
+        class="flex items-center gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-800"
+      >
+        <div class="min-w-0 flex-1">
+          <p class="text-xs font-mono text-gray-700 dark:text-gray-300 truncate">{{ item.key }}</p>
+          <div class="flex items-center gap-1.5 mt-0.5">
+            <UBadge :label="item.language_code.toUpperCase()" color="neutral" variant="soft" size="xs" />
+            <p class="text-xs text-gray-500 truncate">{{ item.value }}</p>
+          </div>
+        </div>
+        <UButton
+          v-if="!editing"
+          icon="i-heroicons-check"
+          size="xs"
+          color="success"
+          variant="soft"
+          :loading="processingId === item.id && processingAction === TRANSLATION_STATUS.REVIEWED"
+          @click="setStatus(item, TRANSLATION_STATUS.REVIEWED)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/components/dashboard/widgets/StatWidget.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { WidgetType, WidgetSize, WidgetDataSource } from '~/types/dashboard.type'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String as PropType<WidgetType>,
+    required: true,
+  },
+  size: {
+    type: String as PropType<WidgetSize>,
+    required: true,
+  },
+  editing: {
+    type: Boolean,
+    required: true,
+  },
+  dataSource: {
+    type: Object as PropType<WidgetDataSource | undefined>,
+    default: undefined,
+  },
+  title: {
+    type: String as PropType<string | undefined>,
+    default: undefined,
+  },
+})
+
+const { t } = useT()
+
+const { stats, pending, sourceLabel, hasProject } = useWidgetData(
+  props.id,
+  computed(() => props.dataSource),
+)
+
+const config = computed(() => {
+  switch (props.type) {
+    case 'stat-keys':
+      return {
+        label: t('dashboard.stat_total_keys', 'Total keys'),
+        icon: 'i-heroicons-key',
+        iconColor: 'text-blue-600',
+        bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+      }
+    case 'stat-coverage':
+      return {
+        label: t('dashboard.stat_coverage', 'Coverage'),
+        icon: 'i-heroicons-chart-bar',
+        iconColor: 'text-green-600',
+        bgColor: 'bg-green-50 dark:bg-green-900/20',
+      }
+    case 'stat-languages':
+      return {
+        label: t('dashboard.stat_languages', 'Languages'),
+        icon: 'i-heroicons-language',
+        iconColor: 'text-purple-600',
+        bgColor: 'bg-purple-50 dark:bg-purple-900/20',
+      }
+    case 'stat-unused':
+      return {
+        label: t('dashboard.stat_unused', 'Unused'),
+        icon: 'i-heroicons-exclamation-triangle',
+        iconColor: 'text-orange-500',
+        bgColor: 'bg-orange-50 dark:bg-orange-900/20',
+      }
+    default:
+      return { label: '', icon: '', iconColor: '', bgColor: '' }
+  }
+})
+
+const displayLabel = computed(() => props.title || config.value.label)
+
+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)
+})
+
+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-languages': return stats.value.languages?.length ?? '—'
+    case 'stat-unused': return stats.value.unusedKeys ?? '—'
+    default: return '—'
+  }
+})
+</script>
+
+<template>
+  <UCard class="h-full overflow-hidden">
+    <div class="flex flex-col h-full justify-between">
+      <div v-if="pending" class="space-y-2">
+        <USkeleton class="h-8 w-16" />
+        <USkeleton class="h-4 w-24" />
+      </div>
+
+      <div v-else class="flex flex-col h-full">
+        <div class="flex items-start justify-between">
+          <div
+            class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+            :class="config.bgColor"
+          >
+            <UIcon :name="config.icon" class="text-xl" :class="config.iconColor" />
+          </div>
+        </div>
+
+        <div class="mt-auto">
+          <p class="text-3xl font-bold text-gray-900 dark:text-white mt-3">
+            {{ hasProject ? displayValue : '—' }}
+          </p>
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ displayLabel }}</p>
+          <p v-if="!hasProject" class="text-xs text-gray-400 dark:text-gray-600 mt-1">{{ t('dashboard.select_project', 'Select a project') }}</p>
+          <p v-else-if="sourceLabel" class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ sourceLabel }}</p>
+        </div>
+
+        <div v-if="size === 'md' && type === 'stat-coverage' && stats && hasProject" class="mt-3">
+          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div
+              class="bg-green-500 h-1.5 rounded-full transition-all"
+              :style="{ width: `${coverage}%` }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/composables/useAuth.ts

@@ -0,0 +1,72 @@
+import { authService } from '../services/auth.service'
+
+export interface AuthUser {
+  id: number
+  email: string
+  name: string
+  is_super_admin: boolean
+  is_active: boolean
+  roles: Array<{ role: string; project_id: number | null; project_name?: string }>
+}
+
+const _currentUser = ref<AuthUser | null>(null)
+
+export function useAuth() {
+  const currentUser = _currentUser
+
+  const fetchMe = async () => {
+    try {
+      const user = await authService.me()
+      _currentUser.value = user
+      return user
+    } catch {
+      _currentUser.value = null
+      return null
+    }
+  }
+
+  const login = async (email: string, password: string) => {
+    const user = await authService.login(email, password)
+    _currentUser.value = user
+    return user
+  }
+
+  const logout = async () => {
+    await authService.logout()
+    _currentUser.value = null
+    return null
+  }
+
+  const changePassword = async (currentPassword: string, newPassword: string) => {
+    await authService.changePassword(currentPassword, newPassword)
+  }
+
+  const getRoleForProject = (projectId: number): string | null => {
+    if (!_currentUser.value) return null
+    if (_currentUser.value.is_super_admin) return 'super_admin'
+    const specific = _currentUser.value.roles.find((r) => r.project_id === projectId)
+    if (specific) return specific.role
+    const global_ = _currentUser.value.roles.find((r) => r.project_id === null)
+    return global_?.role || null
+  }
+
+  const canApprove = (projectId: number): boolean => {
+    const role = getRoleForProject(projectId)
+    return role === 'super_admin' || role === 'admin' || role === 'moderator'
+  }
+
+  const canManageProject = (projectId: number): boolean => {
+    const role = getRoleForProject(projectId)
+    return role === 'super_admin' || role === 'admin'
+  }
+
+  const canManageUsers = (projectId?: number): boolean => {
+    if (!_currentUser.value) return false
+    if (_currentUser.value.is_super_admin) return true
+    if (!projectId) return false
+    const role = getRoleForProject(projectId)
+    return role === 'admin'
+  }
+
+  return { currentUser, fetchMe, login, logout, changePassword, getRoleForProject, canApprove, canManageProject, canManageUsers }
+}

package/composables/useConfig.ts

@@ -0,0 +1,14 @@
+import { buildEnv, loadUserConfig } from '../utils/config.util'
+
+export function useConfig () {
+	const config = ref(null)
+
+	onMounted(async () => {
+		const userConfig = await loadUserConfig()
+		config.value = buildEnv(userConfig)
+	})
+
+	return {
+		config
+	}
+}

package/composables/useDashboard.ts

@@ -0,0 +1,89 @@
+import type { WidgetConfig, WidgetDataSource } from '../types/dashboard.type'
+import type { WidgetSize } from '../types/dashboard.type'
+import { DEFAULT_LAYOUT } from '../consts/dashboard.const'
+
+export function useDashboard() {
+  const { data, refresh } = useAsyncData('dashboard-layout', () => $fetch('/api/dashboard/layout'), { server: false })
+  const layout = computed<WidgetConfig[]>(() => (data.value as WidgetConfig[]) ?? DEFAULT_LAYOUT)
+
+  const editing = ref(false)
+  const localLayout = ref<WidgetConfig[]>([])
+
+  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: WidgetConfig) {
+    localLayout.value.push(widget)
+  }
+
+  function resizeWidget(index: number, size: WidgetSize) {
+    localLayout.value[index].size = size
+  }
+
+  function updateWidgetConfig(index: number, patch: { dataSource?: WidgetDataSource | 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/layout', { method: 'POST', body: 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/composables/useFormats.ts

@@ -0,0 +1,100 @@
+export function useFormats() {
+  const { currentProject } = useProject()
+  const projectId = computed(() => currentProject.value?.id)
+
+  // Number formats
+  const { data: numberFormats, refresh: refreshNumber } = useFetch<any[]>('/api/formats/number', {
+    query: computed(() => ({ project_id: projectId.value })),
+    default: () => [],
+  })
+
+  // Datetime formats
+  const { data: datetimeFormats, refresh: refreshDatetime } = useFetch<any[]>('/api/formats/datetime', {
+    query: computed(() => ({ project_id: projectId.value })),
+    default: () => [],
+  })
+
+  // Modifiers
+  const { data: modifiers, refresh: refreshModifiers } = useFetch<any[]>('/api/formats/modifiers', {
+    query: computed(() => ({ project_id: projectId.value })),
+    default: () => [],
+  })
+
+  async function createNumberFormat(locale: string, name: string, options: Record<string, any>) {
+    await $fetch('/api/formats/number', {
+      method: 'POST',
+      body: { project_id: projectId.value, locale, name, options },
+    })
+    await refreshNumber()
+  }
+
+  async function updateNumberFormat(id: number, locale: string, name: string, options: Record<string, any>) {
+    await $fetch(`/api/formats/number/${id}`, {
+      method: 'PUT',
+      body: { locale, name, options },
+    })
+    await refreshNumber()
+  }
+
+  async function deleteNumberFormat(id: number) {
+    await $fetch(`/api/formats/number/${id}`, { method: 'DELETE' })
+    await refreshNumber()
+  }
+
+  async function createDatetimeFormat(locale: string, name: string, options: Record<string, any>) {
+    await $fetch('/api/formats/datetime', {
+      method: 'POST',
+      body: { project_id: projectId.value, locale, name, options },
+    })
+    await refreshDatetime()
+  }
+
+  async function updateDatetimeFormat(id: number, locale: string, name: string, options: Record<string, any>) {
+    await $fetch(`/api/formats/datetime/${id}`, {
+      method: 'PUT',
+      body: { locale, name, options },
+    })
+    await refreshDatetime()
+  }
+
+  async function deleteDatetimeFormat(id: number) {
+    await $fetch(`/api/formats/datetime/${id}`, { method: 'DELETE' })
+    await refreshDatetime()
+  }
+
+  async function createModifier(name: string, body: string) {
+    await $fetch('/api/formats/modifiers', {
+      method: 'POST',
+      body: { project_id: projectId.value, name, body },
+    })
+    await refreshModifiers()
+  }
+
+  async function updateModifier(id: number, name: string, body: string) {
+    await $fetch(`/api/formats/modifiers/${id}`, {
+      method: 'PUT',
+      body: { name, body },
+    })
+    await refreshModifiers()
+  }
+
+  async function deleteModifier(id: number) {
+    await $fetch(`/api/formats/modifiers/${id}`, { method: 'DELETE' })
+    await refreshModifiers()
+  }
+
+  return {
+    numberFormats,
+    datetimeFormats,
+    modifiers,
+    createNumberFormat,
+    updateNumberFormat,
+    deleteNumberFormat,
+    createDatetimeFormat,
+    updateDatetimeFormat,
+    deleteDatetimeFormat,
+    createModifier,
+    updateModifier,
+    deleteModifier,
+  }
+}