i18n-dashboard 0.1.0

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

@@ -0,0 +1,250 @@
+<template>
+  <div class="p-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-5">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('translations.title', 'Translations') }}</h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">
+          {{ data?.total || 0 }} {{ t('translations.keys_count', 'keys') }} · {{ languages.length }} {{ t('translations.langs_count', 'languages') }}
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <UButton
+          v-if="filterStatus === 'missing' && filterLangs.length === 1"
+          icon="i-heroicons-sparkles"
+          color="warning"
+          variant="outline"
+          :loading="batchTranslating"
+          @click="batchTranslate"
+        >
+          {{ t('translations.translate_all', 'Translate all') }} ({{ filterLangs[0].toUpperCase() }})
+        </UButton>
+        <UButton v-if="userCanManage" icon="i-heroicons-plus" @click="showAddKey = true">{{ t('translations.add_key', 'New key') }}</UButton>
+      </div>
+    </div>
+
+    <!-- Filters bar -->
+    <div class="flex flex-col sm:flex-row gap-3 mb-5">
+      <UInput
+        v-model="search"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="t('translations.search', 'Search for a key...')"
+        class="flex-1"
+        @input="debouncedRefresh"
+      />
+      <USelectMenu
+        v-model="filterLangs"
+        :items="langOptions"
+        multiple
+        value-key="value"
+        :placeholder="filterLangs.length ? `${filterLangs.length} ${t('translations.language', 'language')}${filterLangs.length > 1 ? 's' : ''}` : t('translations.all_languages', 'All languages')"
+        class="w-48"
+        @update:model-value="refresh"
+      />
+    </div>
+
+    <!-- Status legend pills -->
+    <div class="flex gap-2 mb-4 flex-wrap">
+      <button
+        v-for="s in statusFilters"
+        :key="s.value"
+        class="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border transition-all"
+        :class="filterStatus === s.value
+          ? `${s.activeBg} ${s.activeText} border-transparent`
+          : 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-500 hover:border-gray-300'"
+        @click="filterStatus = s.value; refresh()"
+      >
+        <span class="w-2 h-2 rounded-full" :class="s.dot" />
+        {{ s.label }}
+      </button>
+    </div>
+
+    <!-- Empty state -->
+    <div v-if="!pending && !data?.data?.length" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 py-16 text-center">
+      <UIcon name="i-heroicons-inbox" class="text-5xl text-gray-300 dark:text-gray-600 mb-3" />
+      <p class="text-gray-500 font-medium">{{ t('translations.no_results', 'No keys found') }}</p>
+      <p class="text-gray-400 text-sm mt-1">
+        <template v-if="search || filterStatus !== 'all'">{{ t('translations.modify_filters', 'Modify your filters or') }} </template>
+        {{ t('translations.add_or_scan', 'add a key manually or scan your project.') }}
+      </p>
+      <div class="flex justify-center gap-3 mt-4">
+        <UButton size="sm" @click="showAddKey = true">{{ t('translations.add_key', 'New key') }}</UButton>
+        <UButton size="sm" variant="outline" color="neutral" :loading="scanning" @click="scanProject">{{ t('translations.scan', 'Scan') }}</UButton>
+        <UButton size="sm" variant="outline" color="neutral" :loading="syncing" @click="syncFiles">{{ t('translations.sync', 'Sync JSON') }}</UButton>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div v-else class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+      <!-- Table header -->
+      <div
+        class="grid border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50"
+        :style="gridStyle"
+      >
+        <div class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t('translations.key_label', 'Key') }}</div>
+        <div
+          v-for="lang in visibleLanguages"
+          :key="lang.code"
+          class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-1.5"
+        >
+          {{ findLanguage(lang.code)?.nativeName || lang.name }}
+          <UBadge size="xs" variant="outline" color="neutral">{{ lang.code }}</UBadge>
+        </div>
+        <div class="px-3 py-3" />
+      </div>
+
+      <!-- Loading -->
+      <div v-if="pending">
+        <div v-for="i in 6" :key="i" class="grid border-b border-gray-100 dark:border-gray-800 last:border-0" :style="gridStyle">
+          <div class="px-4 py-4"><USkeleton class="h-4 w-3/4" /></div>
+          <div v-for="j in visibleLanguages.length" :key="j" class="px-4 py-4"><USkeleton class="h-4" /></div>
+          <div class="px-3 py-4" />
+        </div>
+      </div>
+
+      <!-- Rows -->
+      <div v-else>
+        <TranslationRow
+          v-for="key in data.data"
+          :key="key.id"
+          :translation-key="key"
+          :languages="visibleLanguages"
+          :grid-style="gridStyle"
+          :project-id="currentProject?.id"
+          @updated="refresh"
+        />
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="(data?.total || 0) > limit" class="flex justify-center mt-5">
+      <UPagination
+        v-model:page="page"
+        :total="data?.total || 0"
+        :items-per-page="limit"
+        @update:page="refresh"
+      />
+    </div>
+
+    <!-- Add Key modal -->
+    <UModal v-model:open="showAddKey" :title="t('translations.add_key_title', 'New translation key')">
+      <template #body>
+        <div class="space-y-4">
+          <UFormField :label="t('translations.key_label', 'Key')" :hint="t('translations.key_hint', 'Example: home.title or nav.menu.about')" required>
+            <UInput v-model="newKey.key" placeholder="home.title" class="w-full font-mono" />
+          </UFormField>
+          <UFormField :label="t('translations.description_label', 'Description')" :hint="t('translations.description_hint', 'Context for translators')">
+            <UInput v-model="newKey.description" :placeholder="t('translations.description_placeholder', 'Home page title')" class="w-full" />
+          </UFormField>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton variant="ghost" color="neutral" @click="showAddKey = false">{{ t('common.cancel', 'Cancel') }}</UButton>
+          <UButton :loading="addingKey" @click="addKey">{{ t('common.create', 'Create') }}</UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TRANSLATION_STATUS } from '~/server/enums/translation.enum'
+
+const route = useRoute()
+const { currentProject } = useProject()
+const { canManageProject } = useAuth()
+const { findLanguage, projectLanguages: languages } = useLanguages()
+const { t } = useT()
+
+const userCanManage = computed(() =>
+  currentProject.value ? canManageProject(currentProject.value.id) : false,
+)
+
+const search = ref('')
+const filterLangs = ref<string[]>([])
+const filterStatus = ref((route.query.status as string) || 'all')
+const page = ref(1)
+const limit = 25
+const showAddKey = ref(false)
+const newKey = ref({ key: '', description: '' })
+
+const langOptions = computed(() =>
+  languages.value.map((l: any) => ({ label: findLanguage(l.code)?.nativeName || l.name, value: l.code }))
+)
+
+const visibleLanguages = computed(() =>
+  filterLangs.value.length
+    ? languages.value.filter((l: any) => filterLangs.value.includes(l.code))
+    : languages.value
+)
+
+const statusFilters = computed(() => [
+  { value: 'all', label: t('status.all', 'All'), dot: 'bg-gray-300', activeBg: 'bg-gray-100 dark:bg-gray-700', activeText: 'text-gray-700 dark:text-gray-200' },
+  { value: 'missing', label: t('status.missing', 'Missing'), dot: 'bg-red-400', activeBg: 'bg-red-50 dark:bg-red-900/20', activeText: 'text-red-700 dark:text-red-300' },
+  { value: TRANSLATION_STATUS.DRAFT, label: t('status.draft', 'Draft'), dot: 'bg-yellow-400', activeBg: 'bg-yellow-50 dark:bg-yellow-900/20', activeText: 'text-yellow-700 dark:text-yellow-300' },
+  { value: TRANSLATION_STATUS.REVIEWED, label: t('status.reviewed', 'Reviewed'), dot: 'bg-blue-400', activeBg: 'bg-blue-50 dark:bg-blue-900/20', activeText: 'text-blue-700 dark:text-blue-300' },
+  { value: TRANSLATION_STATUS.APPROVED, label: t('status.approved', 'Approved'), dot: 'bg-green-500', activeBg: 'bg-green-50 dark:bg-green-900/20', activeText: 'text-green-700 dark:text-green-300' },
+  { value: 'unused', label: t('status.unused', 'Unused'), dot: 'bg-orange-400', activeBg: 'bg-orange-50 dark:bg-orange-900/20', activeText: 'text-orange-700 dark:text-orange-300' },
+])
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `minmax(220px, 1.5fr) ${visibleLanguages.value.map(() => 'minmax(160px, 1fr)').join(' ')} 48px`,
+}))
+
+const queryParams = computed(() => ({
+  project_id: currentProject.value?.id,
+  search: search.value || undefined,
+  lang: filterLangs.value.length === 1 ? filterLangs.value[0] : undefined,
+  status: filterStatus.value !== 'all' ? filterStatus.value : undefined,
+  page: page.value,
+  limit,
+}))
+
+const {
+  data,
+  pending,
+  refresh,
+  addingKey,
+  createKey,
+  scanning,
+  scan,
+  syncing,
+  sync,
+  batchTranslating,
+  batchTranslate: doBatchTranslate,
+} = useKeys({ queryParams })
+
+let searchTimeout: ReturnType<typeof setTimeout>
+function debouncedRefresh() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    refresh()
+  }, 300)
+}
+
+async function addKey() {
+  if (!newKey.value.key.trim() || !currentProject.value) return
+  const ok = await createKey(currentProject.value.id, newKey.value.key, newKey.value.description)
+  if (ok) {
+    showAddKey.value = false
+    newKey.value = { key: '', description: '' }
+  }
+}
+
+async function scanProject() {
+  if (!currentProject.value) return
+  await scan(currentProject.value.id)
+}
+
+async function syncFiles() {
+  if (!currentProject.value) return
+  await sync(currentProject.value.id)
+}
+
+async function batchTranslate() {
+  if (!currentProject.value) return
+  await doBatchTranslate(currentProject.value.id, filterLangs.value[0])
+}
+</script>

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

@@ -0,0 +1,276 @@
+<template>
+  <div class="p-6">
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('users.title', 'Users') }}</h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">
+          {{ t('users.project_members', 'Members of project') }} <strong>{{ currentProject?.name }}</strong>
+        </p>
+      </div>
+      <UButton icon="i-heroicons-plus" @click="openAdd">{{ t('users.add', 'Add a user') }}</UButton>
+    </div>
+
+    <!-- Users table -->
+    <UCard>
+      <div v-if="pending" class="space-y-3">
+        <USkeleton v-for="i in 4" :key="i" class="h-12" />
+      </div>
+      <div v-else-if="!users.length" class="text-center py-12">
+        <UIcon name="i-heroicons-users" class="text-4xl text-gray-300 mb-2" />
+        <p class="text-gray-400">{{ t('users.none_in_project', 'No users in this project') }}</p>
+      </div>
+      <div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
+        <div
+          v-for="user in users"
+          :key="user.id"
+          class="flex items-center justify-between py-3 gap-4"
+        >
+          <div class="flex items-center gap-3 min-w-0">
+            <div class="w-9 h-9 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center shrink-0">
+              <span class="text-sm font-bold text-primary-600 dark:text-primary-400">
+                {{ user.name.charAt(0).toUpperCase() }}
+              </span>
+            </div>
+            <div class="min-w-0">
+              <div class="flex items-center gap-2">
+                <p class="font-medium text-gray-900 dark:text-white text-sm truncate">{{ user.name }}</p>
+                <UBadge v-if="!user.is_active" size="xs" color="neutral" variant="outline">{{ t('users.inactive', 'Inactive') }}</UBadge>
+              </div>
+              <p class="text-xs text-gray-400 truncate">{{ user.email }}</p>
+            </div>
+          </div>
+
+          <!-- Role badge -->
+          <div class="flex-1 flex justify-center">
+            <UBadge v-if="user.role" size="xs" :color="roleColor(user.role)" variant="soft">
+              {{ roleLabel(user.role) }}
+            </UBadge>
+            <span v-else class="text-xs text-gray-400 italic">{{ t('users.no_role', 'No role') }}</span>
+          </div>
+
+          <div class="flex items-center gap-2 shrink-0">
+            <span class="text-xs text-gray-400">
+              {{ user.last_login_at ? formatRelative(user.last_login_at) : t('users.never_connected', 'Never logged in') }}
+            </span>
+            <UDropdownMenu :items="userActions(user)">
+              <UButton icon="i-heroicons-ellipsis-vertical" color="neutral" variant="ghost" size="xs" />
+            </UDropdownMenu>
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Add user modal -->
+    <UModal v-model:open="showModal" :title="t('users.add_user_title', 'Add a user')">
+      <template #body>
+        <div class="space-y-4">
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField :label="t('users.full_name', 'Full name')" required>
+              <UInput v-model="form.name" placeholder="Marie Dupont" class="w-full" />
+            </UFormField>
+            <UFormField :label="t('login.email', 'Email')" required>
+              <UInput v-model="form.email" type="email" placeholder="marie@example.com" class="w-full" />
+            </UFormField>
+          </div>
+
+          <UFormField :label="t('users.role_label', 'Role')" required>
+            <USelect v-model="form.role" :items="roleOptions" class="w-full" />
+          </UFormField>
+
+          <UFormField :label="t('users.project_label', 'Project')">
+            <UInput :model-value="currentProject?.name" class="w-full" disabled />
+          </UFormField>
+
+          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
+            <p class="text-xs text-blue-600 dark:text-blue-400">
+              <UIcon name="i-heroicons-information-circle" class="inline mr-1" />
+              {{ t('users.temp_password_info', 'A temporary password will be generated and shown below.') }}
+            </p>
+          </div>
+
+          <div v-if="createdTempPassword" class="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
+            <p class="text-xs text-green-700 dark:text-green-300 font-medium mb-1">
+              <UIcon name="i-heroicons-key" class="inline mr-1" />
+              {{ t('users.temp_password_label', 'Temporary password (copy it now):') }}
+            </p>
+            <div class="flex items-center gap-2">
+              <code class="text-sm font-mono text-green-800 dark:text-green-200 flex-1">{{ createdTempPassword }}</code>
+              <UButton size="xs" icon="i-heroicons-clipboard" color="neutral" variant="ghost" @click="copyTemp" />
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton color="neutral" variant="ghost" @click="closeModal">
+            {{ createdTempPassword ? t('common.close', 'Close') : t('common.cancel', 'Cancel') }}
+          </UButton>
+          <UButton v-if="!createdTempPassword" :loading="saving" @click="saveUser">{{ t('common.create', 'Create') }}</UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Role modal -->
+    <UModal v-model:open="showRoleModal" :title="t('users.edit_role_title', 'Edit role')">
+      <template #body>
+        <div class="space-y-4">
+          <div class="flex items-center gap-3 pb-4 border-b border-gray-100 dark:border-gray-800">
+            <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center shrink-0">
+              <span class="font-bold text-primary-600 dark:text-primary-400">
+                {{ roleModalUser?.name.charAt(0).toUpperCase() }}
+              </span>
+            </div>
+            <div>
+              <p class="font-semibold text-gray-900 dark:text-white text-sm">{{ roleModalUser?.name }}</p>
+              <p class="text-xs text-gray-400">{{ roleModalUser?.email }}</p>
+            </div>
+          </div>
+          <UFormField :label="`${t('users.role_in_project', 'Role in')} ${currentProject?.name}`">
+            <USelect v-model="roleModalValue" :items="roleOptions" class="w-full" />
+          </UFormField>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton color="neutral" variant="ghost" @click="showRoleModal = false">{{ t('common.cancel', 'Cancel') }}</UButton>
+          <UButton :loading="rolesSaving" @click="saveRole">{{ t('common.save', 'Save') }}</UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Delete confirm -->
+    <UModal v-model:open="showDeleteConfirm" :title="t('users.remove_user_title', 'Remove user')">
+      <template #body>
+        <p class="text-gray-600 dark:text-gray-400">
+          {{ t('users.remove_confirm', 'Remove') }} <strong>{{ deletingUser?.name }}</strong> {{ t('users.remove_from_project', 'from project') }} <strong>{{ currentProject?.name }}</strong>?
+          {{ t('users.remove_account_kept', 'Their account will not be deleted.') }}
+        </p>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton color="neutral" variant="ghost" @click="showDeleteConfirm = false">{{ t('common.cancel', 'Cancel') }}</UButton>
+          <UButton color="error" :loading="deleting" @click="deleteUser">{{ t('users.remove_btn', 'Remove') }}</UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+const toast = useToast()
+const { currentUser } = useAuth()
+const { currentProject } = useProject()
+const { t } = useT()
+
+// Guard: requires project context
+watch(currentProject, (p) => { if (!p) navigateTo('/projects') }, { immediate: true })
+
+const showModal = ref(false)
+const showDeleteConfirm = ref(false)
+const showRoleModal = ref(false)
+const deletingUser = ref<any>(null)
+const createdTempPassword = ref('')
+const roleModalUser = ref<any>(null)
+const roleModalValue = ref('translator')
+
+const form = ref({ name: '', email: '', role: 'translator' })
+
+const roleOptions = computed(() => [
+  { label: t('users.role_translator', 'Translator'), value: 'translator' },
+  { label: t('users.role_moderator', 'Moderator'), value: 'moderator' },
+  { label: t('users.role_admin', 'Admin'), value: 'admin' },
+])
+
+const { users, pending, saving, createUser, rolesSaving, updateRoles, toggleActive, deleting, deleteUser: doDeleteUser } = useUsers('project')
+
+function roleLabel(role: string) {
+  return { translator: t('users.role_translator', 'Translator'), moderator: t('users.role_moderator', 'Moderator'), admin: t('users.role_admin', 'Admin') }[role] || role
+}
+
+function roleColor(role: string) {
+  return { translator: 'primary', moderator: 'warning', admin: 'success' }[role] || 'neutral'
+}
+
+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`
+}
+
+function userActions(user: any) {
+  const isSelf = user.id === currentUser.value?.id
+  return [
+    [
+      ...(!isSelf ? [{
+        label: t('users.edit_role', 'Edit role'),
+        icon: 'i-heroicons-shield-check',
+        onSelect: () => openRoleModal(user),
+      }] : []),
+      {
+        label: user.is_active ? t('users.deactivate', 'Deactivate') : t('users.reactivate', 'Reactivate'),
+        icon: user.is_active ? 'i-heroicons-pause' : 'i-heroicons-play',
+        onSelect: () => toggleActive(user),
+      },
+    ],
+    [
+      {
+        label: t('users.remove_from_project_action', 'Remove from project'),
+        icon: 'i-heroicons-user-minus',
+        color: 'error' as const,
+        onSelect: () => { deletingUser.value = user; showDeleteConfirm.value = true },
+      },
+    ],
+  ]
+}
+
+function openAdd() {
+  createdTempPassword.value = ''
+  form.value = { name: '', email: '', role: 'translator' }
+  showModal.value = true
+}
+
+function openRoleModal(user: any) {
+  roleModalUser.value = user
+  roleModalValue.value = user.role || 'translator'
+  showRoleModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  createdTempPassword.value = ''
+}
+
+async function saveUser() {
+  if (!form.value.name || !form.value.email || !currentProject.value) return
+  const tempPassword = await createUser({
+    ...form.value,
+    project_id: currentProject.value.id,
+    project_ids: [currentProject.value.id],
+    global_access: false,
+  })
+  if (tempPassword) createdTempPassword.value = tempPassword
+}
+
+async function saveRole() {
+  if (!roleModalUser.value || !currentProject.value) return
+  const ok = await updateRoles(roleModalUser.value.id, [
+    { project_id: currentProject.value.id, role: roleModalValue.value },
+  ])
+  if (ok) showRoleModal.value = false
+}
+
+async function deleteUser() {
+  if (!deletingUser.value) return
+  const ok = await doDeleteUser(deletingUser.value.id)
+  if (ok) showDeleteConfirm.value = false
+}
+
+async function copyTemp() {
+  await navigator.clipboard.writeText(createdTempPassword.value)
+  toast.add({ title: t('common.copied', 'Copied!'), color: 'success' })
+}
+</script>