i18n-dashboard 0.6.5 → 0.7.0

package/README.md

@@ -54,6 +54,8 @@
 
 ### Users & Authentication
 - **Role-based access** — `Super Admin`, `Admin`, `Moderator`, `Translator` — per-project assignments
+- **User search when adding to a project** — search existing users by name or email, select one and choose their role directly; or switch to the creation form for a brand new account
+- **User activity profile** — view translation statistics per user with a configurable time period (last 24h, 7d, 30d, 1 year, or since account creation)
 - **Onboarding wizard** — guided setup on first launch
 - **Multi-language UI** — the dashboard interface itself is translatable
 
@@ -62,6 +64,7 @@
 - **Auto-migration** — schema is created and updated automatically on startup
 - **REST API** — full API for all operations, consume locale JSON from your Vue app
 - **CORS auto-detection** — multiple app URLs per project; all are checked for CORS on `/locale/[lang].json`
+- **Global loading overlay** — a full-page loading screen prevents interaction before data is ready, including on direct page load (F5) for any route
 - **Dark mode** — system preference + manual toggle
 
 ---
@@ -615,6 +618,19 @@ DELETE /api/formats/modifiers/:id
 GET  /api/formats/snippet?project_id=1   # Generate createI18n() config snippet
 ```
 
+### Users
+
+```http
+GET  /api/users                           # All users (super admin / global admin)
+GET  /api/users?project_id=1              # Members of a project
+GET  /api/users?exclude_project_id=1      # Users not yet in a project (for the add picker)
+POST /api/users                           # Create user
+PUT  /api/users/:id                       # Update user (name, is_active, role)
+PUT  /api/users/:id/roles                 # Bulk-update role assignments across projects
+DELETE /api/users/:id?project_id=1        # Remove user from project (or globally if super admin)
+GET  /api/users/:id/profile?period=30d    # Full user profile with activity stats
+```
+
 ### Settings
 
 ```http

package/assets/locales/en.json

@@ -201,6 +201,13 @@
   "users.project_members": "Project members",
   "users.none_in_project": "No members in this project",
   "users.add_user_title": "Add a user",
+  "users.add_to_project_title": "Add a user to the project",
+  "users.add_to_project": "Add to project",
+  "users.create_new_user": "Create a new user",
+  "users.back_to_select": "Back",
+  "users.search_placeholder": "Search by name or email…",
+  "users.no_match": "No user matches your search",
+  "users.all_already_members": "All users are already members of this project",
   "users.full_name": "Full name",
   "users.role_label": "Role",
   "users.project_label": "Project",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-dashboard",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "A web dashboard to manage vue-i18n translation keys with database persistence",
   "type": "module",
   "bin": {

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

@@ -61,9 +61,81 @@
     </UCard>
 
     <!-- Add user modal -->
-    <UModal v-model:open="showModal" :title="t('users.add_user_title', 'Add a user')">
+    <UModal v-model:open="showModal" :title="addModalTitle">
       <template #body>
-        <div class="space-y-4">
+
+        <!-- ── Mode: select existing ──────────────────────────────────────── -->
+        <div v-if="addMode === 'select'" class="space-y-4">
+          <!-- Search -->
+          <UInput
+            v-model="search"
+            :placeholder="t('users.search_placeholder', 'Search by name or email…')"
+            icon="i-heroicons-magnifying-glass"
+            class="w-full"
+          />
+
+          <!-- User list -->
+          <div class="max-h-64 overflow-y-auto rounded-lg border border-gray-200 dark:border-gray-700">
+            <div v-if="loadingAvailable" class="flex items-center justify-center py-8">
+              <UIcon name="i-heroicons-arrow-path" class="animate-spin text-primary-500 text-xl" />
+            </div>
+            <div v-else-if="!filteredAvailable.length" class="py-8 text-center text-sm text-gray-400">
+              <UIcon name="i-heroicons-users" class="text-2xl mb-1 block mx-auto text-gray-300" />
+              {{ search ? t('users.no_match', 'No user matches your search') : t('users.all_already_members', 'All users are already members of this project') }}
+            </div>
+            <div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
+              <button
+                v-for="u in filteredAvailable"
+                :key="u.id"
+                type="button"
+                class="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors text-left"
+                :class="selectedUser?.id === u.id ? 'bg-primary-50 dark:bg-primary-900/20' : ''"
+                @click="selectUser(u)"
+              >
+                <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center shrink-0">
+                  <span class="text-xs font-bold text-primary-600 dark:text-primary-400">{{ u.name.charAt(0).toUpperCase() }}</span>
+                </div>
+                <div class="min-w-0 flex-1">
+                  <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ u.name }}</p>
+                  <p class="text-xs text-gray-400 truncate">{{ u.email }}</p>
+                </div>
+                <UIcon v-if="selectedUser?.id === u.id" name="i-heroicons-check-circle" class="text-primary-500 shrink-0" />
+              </button>
+            </div>
+          </div>
+
+          <!-- Role picker (shown when a user is selected) -->
+          <Transition name="slide-down">
+            <div v-if="selectedUser" class="rounded-lg border border-primary-200 dark:border-primary-800 bg-primary-50 dark:bg-primary-900/20 p-4 space-y-3">
+              <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center shrink-0">
+                  <span class="text-xs font-bold text-primary-600">{{ selectedUser.name.charAt(0).toUpperCase() }}</span>
+                </div>
+                <div class="min-w-0">
+                  <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedUser.name }}</p>
+                  <p class="text-xs text-gray-400">{{ selectedUser.email }}</p>
+                </div>
+              </div>
+              <UFormField :label="t('users.role_label', 'Role')" required>
+                <USelect v-model="selectRole" :items="roleOptions" class="w-full" />
+              </UFormField>
+            </div>
+          </Transition>
+
+          <!-- Divider + create new -->
+          <div class="flex items-center gap-3">
+            <div class="flex-1 border-t border-gray-200 dark:border-gray-700" />
+            <span class="text-xs text-gray-400">{{ t('common.or', 'or') }}</span>
+            <div class="flex-1 border-t border-gray-200 dark:border-gray-700" />
+          </div>
+
+          <UButton block color="neutral" variant="outline" icon="i-heroicons-user-plus" @click="switchToCreate">
+            {{ t('users.create_new_user', 'Create a new user') }}
+          </UButton>
+        </div>
+
+        <!-- ── Mode: create new ───────────────────────────────────────────── -->
+        <div v-else 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" />
@@ -100,12 +172,39 @@
           </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') }}
+        <div class="flex items-center justify-between gap-3">
+          <!-- Back button in create mode -->
+          <UButton
+            v-if="addMode === 'create' && !createdTempPassword"
+            color="neutral"
+            variant="ghost"
+            icon="i-heroicons-arrow-left"
+            @click="addMode = 'select'"
+          >
+            {{ t('users.back_to_select', 'Back') }}
           </UButton>
-          <UButton v-if="!createdTempPassword" :loading="saving" @click="saveUser">{{ t('common.create', 'Create') }}</UButton>
+          <div v-else class="flex-1" />
+
+          <div class="flex gap-3">
+            <UButton color="neutral" variant="ghost" @click="closeModal">
+              {{ createdTempPassword ? t('common.close', 'Close') : t('common.cancel', 'Cancel') }}
+            </UButton>
+            <!-- Select mode: add existing user -->
+            <UButton
+              v-if="addMode === 'select'"
+              :disabled="!selectedUser"
+              :loading="rolesSaving"
+              @click="addExistingUser"
+            >
+              {{ t('users.add_to_project', 'Add to project') }}
+            </UButton>
+            <!-- Create mode: create new user -->
+            <UButton v-else-if="!createdTempPassword" :loading="saving" @click="saveUser">
+              {{ t('common.create', 'Create') }}
+            </UButton>
+          </div>
         </div>
       </template>
     </UModal>
@@ -157,6 +256,9 @@
 </template>
 
 <script setup lang="ts">
+import { userService } from '~/services/user.service'
+import type { UserItem } from '~/interfaces/user.interface'
+
 const toast = useToast()
 const { currentUser } = useAuth()
 const { currentProject } = useProject()
@@ -165,6 +267,7 @@ const { t } = useT()
 // Guard: requires project context
 watch(currentProject, (p) => { if (!p) navigateTo('/projects') }, { immediate: true })
 
+// ── Modal state ────────────────────────────────────────────────────────────────
 const showModal = ref(false)
 const showDeleteConfirm = ref(false)
 const showRoleModal = ref(false)
@@ -173,8 +276,57 @@ const createdTempPassword = ref('')
 const roleModalUser = ref<any>(null)
 const roleModalValue = ref('translator')
 
+// ── Add modal modes ────────────────────────────────────────────────────────────
+const addMode = ref<'select' | 'create'>('select')
+
+const addModalTitle = computed(() => {
+  if (addMode.value === 'create') return t('users.add_user_title', 'Add a user')
+  return t('users.add_to_project_title', 'Add a user to the project')
+})
+
+// ── Select mode: existing users ────────────────────────────────────────────────
+const search = ref('')
+const availableUsers = ref<UserItem[]>([])
+const loadingAvailable = ref(false)
+const selectedUser = ref<UserItem | null>(null)
+const selectRole = ref('translator')
+
+const filteredAvailable = computed(() => {
+  const q = search.value.toLowerCase().trim()
+  if (!q) return availableUsers.value
+  return availableUsers.value.filter(u =>
+    u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q),
+  )
+})
+
+async function loadAvailableUsers() {
+  if (!currentProject.value) return
+  loadingAvailable.value = true
+  try {
+    availableUsers.value = await userService.getAvailableUsers(currentProject.value.id)
+  }
+  catch {
+    availableUsers.value = []
+  }
+  finally {
+    loadingAvailable.value = false
+  }
+}
+
+function selectUser(u: UserItem) {
+  selectedUser.value = selectedUser.value?.id === u.id ? null : u
+}
+
+function switchToCreate() {
+  addMode.value = 'create'
+  form.value = { name: '', email: '', role: 'translator' }
+  createdTempPassword.value = ''
+}
+
+// ── Create mode: new user form ─────────────────────────────────────────────────
 const form = ref({ name: '', email: '', role: 'translator' })
 
+// ── Shared ─────────────────────────────────────────────────────────────────────
 const roleOptions = computed(() => [
   { label: t('users.role_translator', 'Translator'), value: 'translator' },
   { label: t('users.role_moderator', 'Moderator'), value: 'moderator' },
@@ -228,9 +380,14 @@ function userActions(user: any) {
 }
 
 function openAdd() {
+  addMode.value = 'select'
+  search.value = ''
+  selectedUser.value = null
+  selectRole.value = 'translator'
   createdTempPassword.value = ''
   form.value = { name: '', email: '', role: 'translator' }
   showModal.value = true
+  loadAvailableUsers()
 }
 
 function openRoleModal(user: any) {
@@ -242,6 +399,15 @@ function openRoleModal(user: any) {
 function closeModal() {
   showModal.value = false
   createdTempPassword.value = ''
+  selectedUser.value = null
+}
+
+async function addExistingUser() {
+  if (!selectedUser.value || !currentProject.value) return
+  const ok = await updateRoles(selectedUser.value.id, [
+    { project_id: currentProject.value.id, role: selectRole.value },
+  ])
+  if (ok) closeModal()
 }
 
 async function saveUser() {
@@ -274,3 +440,15 @@ async function copyTemp() {
   toast.add({ title: t('common.copied', 'Copied!'), color: 'success' })
 }
 </script>
+
+<style scoped>
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.2s ease;
+}
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

package/server/api/users/index.get.ts

@@ -3,7 +3,7 @@ import { getUserRole, canManageUsers } from '../../utils/auth.util'
 
 export default defineEventHandler(async (event) => {
   const currentUser = event.context.user
-  const { project_id } = getQuery(event)
+  const { project_id, exclude_project_id } = getQuery(event)
   const db = getDb()
 
   // ── Project-scoped view ────────────────────────────────────────────────────
@@ -25,6 +25,28 @@ export default defineEventHandler(async (event) => {
     return projectRoles
   }
 
+  // ── Users not yet in a given project (for "add existing user" picker) ──────
+  if (exclude_project_id) {
+    const pid = Number(exclude_project_id)
+
+    if (!currentUser.is_super_admin) {
+      const role = await getUserRole(currentUser.id, pid)
+      if (!canManageUsers(role, false)) {
+        throw createError({ statusCode: 403, message: 'Accès refusé' })
+      }
+    }
+
+    const alreadyIn = await db('user_project_roles').where('project_id', pid).pluck('user_id')
+
+    const query = db('users')
+      .select('id', 'email', 'name', 'is_active', 'last_login_at')
+      .orderBy('name')
+
+    if (alreadyIn.length) query.whereNotIn('id', alreadyIn)
+
+    return query
+  }
+
   // ── Global view (super admin or global admins only) ────────────────────────
   if (!currentUser.is_super_admin) {
     const globalAdminRole = await db('user_project_roles')

package/services/user.service.ts

@@ -6,6 +6,10 @@ class UserService extends BaseService {
     return this.get<UserItem[]>('/api/users', { query })
   }
 
+  async getAvailableUsers(excludeProjectId: number): Promise<UserItem[]> {
+    return this.get<UserItem[]>('/api/users', { query: { exclude_project_id: excludeProjectId }, skipErrorToast: true })
+  }
+
   async create(data: CreateUserPayload): Promise<{ id: number; tempPassword: string; email: string; name: string }> {
     return this.post('/api/users', { body: data, skipDedup: true })
   }