i18n-dashboard 0.6.1 → 0.6.3

package/assets/locales/en.json

@@ -313,9 +313,13 @@
   "profile.edit_modal_title": "Edit account",
   "profile.name_label": "Full name",
   "profile.name_placeholder": "John Doe",
+  "profile.stats_title": "Activity",
   "profile.total_translations": "Total translations",
-  "profile.this_month": "This month",
-  "profile.this_week": "This week",
+  "profile.period_1d": "Last 24 hours",
+  "profile.period_7d": "Last 7 days",
+  "profile.period_30d": "Last 30 days",
+  "profile.period_365d": "Last year",
+  "profile.period_all": "Since account creation",
   "profile.general": "General",
   "profile.name_email_required": "Name and email are required",
   "dashboard.title": "Dashboard",

package/composables/useProfile.ts

@@ -1,6 +1,7 @@
 import { profileService } from '../services/profile.service'
 import { authService } from '../services/auth.service'
 import { userService } from '../services/user.service'
+import type { ProfilePeriod } from '../server/interfaces/profile.interface'
 
 export function useProfile(userId?: MaybeRefOrGetter<number | string>) {
   const toast = useToast()
@@ -8,16 +9,15 @@ export function useProfile(userId?: MaybeRefOrGetter<number | string>) {
   const { fetchMe } = useAuth()
 
   // ── Profile data ─────────────────────────────────────────────────────────
-  // Load the target user's profile (or own profile if no userId provided)
-
   const targetId = computed(() => userId ? toValue(userId) : null)
+  const period = ref<ProfilePeriod>('all')
 
   const { data: profile, pending, refresh } = useAsyncData(
-    () => targetId.value ? `user-profile-${targetId.value}` : 'user-profile',
+    () => targetId.value ? `user-profile-${targetId.value}-${period.value}` : `user-profile-${period.value}`,
     () => targetId.value
-      ? profileService.getUserProfile(targetId.value)
-      : profileService.getProfile(),
-    { watch: [targetId] },
+      ? profileService.getUserProfile(targetId.value, period.value)
+      : profileService.getProfile(period.value),
+    { watch: [targetId, period] },
   )
 
   // ── Own account editing (current logged-in user) ─────────────────────────
@@ -66,6 +66,7 @@ export function useProfile(userId?: MaybeRefOrGetter<number | string>) {
 
   return {
     profile,
+    period,
     pending,
     refresh,
     editSaving,

package/package.json

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

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

@@ -4,8 +4,14 @@
     <!-- Loading -->
     <div v-if="pending" class="space-y-4">
       <USkeleton class="h-24" />
-      <div class="grid grid-cols-3 gap-4">
-        <USkeleton v-for="i in 3" :key="i" class="h-20" />
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <USkeleton class="h-4 w-16" />
+          <USkeleton class="h-8 w-52" />
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <USkeleton v-for="i in 2" :key="i" class="h-20" />
+        </div>
       </div>
     </div>
 
@@ -51,18 +57,30 @@
       </div>
 
       <!-- Stats -->
-      <div class="grid grid-cols-3 gap-4">
-        <UCard v-for="stat in statCards" :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">{{ stat.value }}</p>
+      <div class="space-y-3">
+        <div class="flex items-center justify-between gap-4">
+          <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">{{ t('profile.stats_title', 'Activity') }}</p>
+          <USelect
+            v-model="period"
+            :items="periodOptions"
+            class="w-52"
+            value-key="value"
+            label-key="label"
+          />
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <UCard v-for="stat in statCards" :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">{{ stat.value }}</p>
+              </div>
             </div>
-          </div>
-        </UCard>
+          </UCard>
+        </div>
       </div>
 
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
@@ -258,7 +276,7 @@ const { projects } = useProject()
 const { t } = useT()
 
 const userId = computed(() => Number(route.params.id))
-const { profile, pending, refresh, editSaving: selfEditSaving, editError, updateProfile, rolesSaving, saveRoles } = useProfile(userId)
+const { profile, period, pending, refresh, editSaving: selfEditSaving, editError, updateProfile, rolesSaving, saveRoles } = useProfile(userId)
 
 const isSelf = computed(() => currentUser.value?.id === userId.value)
 
@@ -355,6 +373,16 @@ async function doSaveRoles() {
 }
 
 // ── Stats ──────────────────────────────────────────────────────────────────────
+const periodOptions = computed(() => [
+  { label: t('profile.period_1d', 'Last 24 hours'), value: '1d' },
+  { label: t('profile.period_7d', 'Last 7 days'), value: '7d' },
+  { label: t('profile.period_30d', 'Last 30 days'), value: '30d' },
+  { label: t('profile.period_365d', 'Last year'), value: '365d' },
+  { label: t('profile.period_all', 'Since account creation'), value: 'all' },
+])
+
+const periodLabel = computed(() => periodOptions.value.find(o => o.value === period.value)?.label ?? '')
+
 const statCards = computed(() => [
   {
     label: t('profile.total_translations', 'Total translations'),
@@ -364,19 +392,12 @@ const statCards = computed(() => [
     bg: 'bg-primary-50 dark:bg-primary-900/20',
   },
   {
-    label: t('profile.this_month', 'This month'),
-    value: profile.value?.stats.thisMonth ?? 0,
+    label: periodLabel.value,
+    value: profile.value?.stats.periodCount ?? 0,
     icon: 'i-heroicons-calendar-days',
     color: 'text-blue-600',
     bg: 'bg-blue-50 dark:bg-blue-900/20',
   },
-  {
-    label: t('profile.this_week', 'This week'),
-    value: profile.value?.stats.thisWeek ?? 0,
-    icon: 'i-heroicons-bolt',
-    color: 'text-green-600',
-    bg: 'bg-green-50 dark:bg-green-900/20',
-  },
 ])
 
 // ── Languages grouped by project ───────────────────────────────────────────────

package/server/api/profile.get.ts

@@ -1,8 +1,18 @@
 import { getDb } from '../db/index'
-import type { UserProfile } from '../interfaces/profile.interface'
+import type { UserProfile, ProfilePeriod } from '../interfaces/profile.interface'
+
+const PERIOD_MS: Record<ProfilePeriod, number | null> = {
+  '1d': 24 * 60 * 60 * 1000,
+  '7d': 7 * 24 * 60 * 60 * 1000,
+  '30d': 30 * 24 * 60 * 60 * 1000,
+  '365d': 365 * 24 * 60 * 60 * 1000,
+  'all': null,
+}
 
 export default defineEventHandler(async (event): Promise<UserProfile> => {
   const user = event.context.user
+  const query = getQuery(event)
+  const period = (query.period as ProfilePeriod) || 'all'
   const db = getDb()
 
   // ── Roles with project info ───────────────────────────────────────────────
@@ -31,13 +41,15 @@ export default defineEventHandler(async (event): Promise<UserProfile> => {
   }
 
   // ── Stats ─────────────────────────────────────────────────────────────────
-  const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()
-  const monthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
+  const ms = PERIOD_MS[period] ?? null
+  const since = ms ? new Date(Date.now() - ms).toISOString() : null
+
+  const baseQ = db('translation_history').where('changed_by', user.name)
+  const periodQ = since ? db('translation_history').where('changed_by', user.name).where('changed_at', '>=', since) : baseQ.clone()
 
-  const [countTotal, countWeek, countMonth] = await Promise.all([
+  const [countTotal, countPeriod] = await Promise.all([
     db('translation_history').where('changed_by', user.name).count('id as n').first(),
-    db('translation_history').where('changed_by', user.name).where('changed_at', '>=', weekAgo).count('id as n').first(),
-    db('translation_history').where('changed_by', user.name).where('changed_at', '>=', monthAgo).count('id as n').first(),
+    periodQ.count('id as n').first(),
   ])
 
   // ── Recent translations ───────────────────────────────────────────────────
@@ -72,8 +84,8 @@ export default defineEventHandler(async (event): Promise<UserProfile> => {
     roles,
     stats: {
       total: Number(countTotal?.n ?? 0),
-      thisWeek: Number(countWeek?.n ?? 0),
-      thisMonth: Number(countMonth?.n ?? 0),
+      periodCount: Number(countPeriod?.n ?? 0),
+      period,
     },
     languages,
     recentTranslations,

package/server/api/translations/index.post.ts

@@ -35,7 +35,7 @@ export default defineEventHandler(async (event) => {
         translation_id: existing.id,
         old_value: oldValue,
         new_value: value,
-        changed_by: 'user',
+        changed_by: event.context.user?.name ?? 'user',
       })
     }
 

package/server/api/users/[id]/profile.get.ts

@@ -1,10 +1,20 @@
 import { getDb } from '../../../db/index'
 import { getUserRole } from '../../../utils/auth.util'
-import type { UserProfile } from '../../../interfaces/profile.interface'
+import type { UserProfile, ProfilePeriod } from '../../../interfaces/profile.interface'
+
+const PERIOD_MS: Record<ProfilePeriod, number | null> = {
+  '1d': 24 * 60 * 60 * 1000,
+  '7d': 7 * 24 * 60 * 60 * 1000,
+  '30d': 30 * 24 * 60 * 60 * 1000,
+  '365d': 365 * 24 * 60 * 60 * 1000,
+  'all': null,
+}
 
 export default defineEventHandler(async (event): Promise<UserProfile> => {
   const currentUser = event.context.user
   const targetId = Number(getRouterParam(event, 'id'))
+  const query = getQuery(event)
+  const period = (query.period as ProfilePeriod) || 'all'
   const db = getDb()
 
   const target = await db('users')
@@ -56,13 +66,16 @@ export default defineEventHandler(async (event): Promise<UserProfile> => {
   }
 
   // ── Stats ──────────────────────────────────────────────────────────────────
-  const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()
-  const monthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
+  const ms = PERIOD_MS[period] ?? null
+  const since = ms ? new Date(Date.now() - ms).toISOString() : null
+
+  const periodQ = since
+    ? db('translation_history').where('changed_by', target.name).where('changed_at', '>=', since)
+    : db('translation_history').where('changed_by', target.name)
 
-  const [countTotal, countWeek, countMonth] = await Promise.all([
+  const [countTotal, countPeriod] = await Promise.all([
     db('translation_history').where('changed_by', target.name).count('id as n').first(),
-    db('translation_history').where('changed_by', target.name).where('changed_at', '>=', weekAgo).count('id as n').first(),
-    db('translation_history').where('changed_by', target.name).where('changed_at', '>=', monthAgo).count('id as n').first(),
+    periodQ.count('id as n').first(),
   ])
 
   // ── Recent translations ────────────────────────────────────────────────────
@@ -98,8 +111,8 @@ export default defineEventHandler(async (event): Promise<UserProfile> => {
     roles,
     stats: {
       total: Number(countTotal?.n ?? 0),
-      thisWeek: Number(countWeek?.n ?? 0),
-      thisMonth: Number(countMonth?.n ?? 0),
+      periodCount: Number(countPeriod?.n ?? 0),
+      period,
     },
     languages,
     recentTranslations,

package/server/interfaces/profile.interface.ts

@@ -1,7 +1,9 @@
+export type ProfilePeriod = '1d' | '7d' | '30d' | '365d' | 'all'
+
 export interface ProfileStats {
   total: number
-  thisWeek: number
-  thisMonth: number
+  periodCount: number
+  period: ProfilePeriod
 }
 
 export interface ProfileRole {

package/services/profile.service.ts

@@ -1,13 +1,13 @@
 import { BaseService } from './base.service'
-import type { UserProfile } from '../server/interfaces/profile.interface'
+import type { UserProfile, ProfilePeriod } from '../server/interfaces/profile.interface'
 
 class ProfileService extends BaseService {
-  async getProfile(): Promise<UserProfile> {
-    return this.get<UserProfile>('/api/profile')
+  async getProfile(period: ProfilePeriod = 'all'): Promise<UserProfile> {
+    return this.get<UserProfile>('/api/profile', { query: { period } })
   }
 
-  async getUserProfile(id: number | string): Promise<UserProfile> {
-    return this.get<UserProfile>(`/api/users/${id}/profile`)
+  async getUserProfile(id: number | string, period: ProfilePeriod = 'all'): Promise<UserProfile> {
+    return this.get<UserProfile>(`/api/users/${id}/profile`, { query: { period } })
   }
 }