@allbluecn/admin-app 0.2.0 → 0.2.1

package/src/routes/_nav/monitoring/ai-usage/route.lazy.tsx

@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState, useEffect, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
 import { defineChart, lineY } from '@tanstack/charts'
 import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { scalePoint } from '@tanstack/charts/scales/point'
@@ -61,7 +61,6 @@ function OverviewCard({ title, value, sub }: { title: string; value: string; sub
 }
 
 function AiUsagePage() {
-  const { t } = useTranslation('common')
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState<AiUsageOverview | null>(null)
   const [wsPage, setWsPage] = useState(1)
@@ -107,7 +106,7 @@ function AiUsagePage() {
   if (loading && !data) {
     return (
       <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
-        <PageHeader title={t('monitoring.aiUsage.title')} description={t('monitoring.aiUsage.description')} icon={BarChart3} />
+        <PageHeader title={m.common_monitoring_aiUsage_title()} description={m.common_monitoring_aiUsage_description()} icon={BarChart3} />
         <div className="flex items-center justify-center h-32">
           <RefreshCw className="size-5 animate-spin text-muted-foreground" />
         </div>
@@ -118,26 +117,26 @@ function AiUsagePage() {
   return (
     <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
       <div className="flex items-center justify-between">
-        <PageHeader title={t('monitoring.aiUsage.title')} description={t('monitoring.aiUsage.description')} icon={BarChart3} />
+        <PageHeader title={m.common_monitoring_aiUsage_title()} description={m.common_monitoring_aiUsage_description()} icon={BarChart3} />
         <button
           onClick={loadData}
           disabled={loading}
           className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
         >
           <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
-          {t('common.refresh')}
+          {m.common_common_refresh()}
         </button>
       </div>
 
       <div className="grid gap-4 md:grid-cols-3">
-        <OverviewCard title={t('monitoring.aiUsage.totalCalls')} value={data?.totalCalls?.toLocaleString('en-US') ?? '0'} />
+        <OverviewCard title={m.common_monitoring_aiUsage_totalCalls()} value={data?.totalCalls?.toLocaleString('en-US') ?? '0'} />
         <OverviewCard
-          title={t('monitoring.aiUsage.totalCost')}
+          title={m.common_monitoring_aiUsage_totalCost()}
           value={data?.totalCostUsd != null ? `$${data.totalCostUsd.toFixed(2)}` : '—'}
         />
         <OverviewCard
-          title={t('monitoring.aiUsage.byokVsManaged')}
-          value={data?.bySource.map((s) => `${s.source}: ${s.count}`).join(' / ') || '—'}
+          title={m.common_monitoring_aiUsage_byokVsManaged()}
+          value={data?.bySource.map((s: any) => `${s.source}: ${s.count}`).join(' / ') || '—'}
         />
       </div>
 
@@ -160,7 +159,7 @@ function AiUsagePage() {
               </CardHeader>
               <CardContent className="py-0 px-4">
                 <div className="text-xs text-muted-foreground">
-                  {alert.metric}: {alert.value} / {t('monitoring.aiUsage.alert.threshold', { threshold: alert.threshold })} · {t('monitoring.aiUsage.alert.affected', { count: alert.count })}
+                  {alert.metric}: {alert.value} / {m.common_monitoring_aiUsage_alert_threshold({ threshold: alert.threshold })} · {m.common_monitoring_aiUsage_alert_affected({ count: alert.count })}
                 </div>
               </CardContent>
             </Card>
@@ -170,34 +169,34 @@ function AiUsagePage() {
 
       <Card>
         <CardHeader>
-          <CardTitle>{t('monitoring.aiUsage.dailyTrend')}</CardTitle>
+          <CardTitle>{m.common_monitoring_aiUsage_dailyTrend()}</CardTitle>
         </CardHeader>
         <CardContent>
           {data?.trend?.length ? (
             <div className="grid gap-6 md:grid-cols-2">
               <div>
-                <div className="text-sm font-medium text-muted-foreground mb-2">{t('monitoring.aiUsage.trend.calls')}</div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">{m.common_monitoring_aiUsage_trend_calls()}</div>
                 <TrendChart
                   data={data.trend.slice(-14)}
                   y="calls"
                   stroke="var(--primary)"
-                  ariaLabel={t('monitoring.aiUsage.trend.callsAria')}
+                  ariaLabel={m.common_monitoring_aiUsage_trend_callsAria()}
                 />
               </div>
               <div>
-                <div className="text-sm font-medium text-muted-foreground mb-2">{t('monitoring.aiUsage.trend.cost')}</div>
+                <div className="text-sm font-medium text-muted-foreground mb-2">{m.common_monitoring_aiUsage_trend_cost()}</div>
                 <TrendChart
                   data={data.trend.slice(-14)}
                   y="cost"
                   stroke="var(--muted-foreground)"
                   strokeDasharray="4 2"
-                  ariaLabel={t('monitoring.aiUsage.trend.costAria')}
+                  ariaLabel={m.common_monitoring_aiUsage_trend_costAria()}
                 />
               </div>
             </div>
           ) : (
             <div className="flex items-center justify-center h-[200px] text-muted-foreground text-sm">
-              {t('common.empty')}
+              {m.common_common_empty()}
             </div>
           )}
         </CardContent>
@@ -206,19 +205,19 @@ function AiUsagePage() {
       <div className="grid gap-4 md:grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle>{t('monitoring.aiUsage.top10Workspaces')}</CardTitle>
+            <CardTitle>{m.common_monitoring_aiUsage_top10Workspaces()}</CardTitle>
           </CardHeader>
           <CardContent>
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>{t('monitoring.aiUsage.workspace')}</TableHead>
-                  <TableHead className="text-right">{t('monitoring.aiUsage.count')}</TableHead>
-                  <TableHead className="text-right">{t('monitoring.aiUsage.cost')}</TableHead>
+                  <TableHead>{m.common_monitoring_aiUsage_workspace()}</TableHead>
+                  <TableHead className="text-right">{m.common_monitoring_aiUsage_count()}</TableHead>
+                  <TableHead className="text-right">{m.common_monitoring_aiUsage_cost()}</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {data?.topWorkspaces.map((w) => (
+                {data?.topWorkspaces.map((w: any) => (
                     <TableRow key={w.workspaceId}>
                       <TableCell>{w.workspaceName ?? w.workspaceId.slice(0, 8)}</TableCell>
                       <TableCell className="text-right">{w.count}</TableCell>
@@ -230,7 +229,7 @@ function AiUsagePage() {
                 </TableBody>
               </Table>
               <div className="flex items-center justify-between mt-3">
-                <span className="text-xs text-muted-foreground">{t('monitoring.aiUsage.totalItems', { total: data?.topWorkspacesTotal ?? 0 })}</span>
+                <span className="text-xs text-muted-foreground">{m.common_monitoring_aiUsage_totalItems({ total: data?.topWorkspacesTotal ?? 0 })}</span>
                 <div className="flex items-center gap-1">
                   <button
                     onClick={() => setWsPage(Math.max(1, wsPage - 1))}
@@ -254,18 +253,18 @@ function AiUsagePage() {
 
           <Card>
             <CardHeader>
-              <CardTitle>{t('monitoring.aiUsage.top10Users')}</CardTitle>
+              <CardTitle>{m.common_monitoring_aiUsage_top10Users()}</CardTitle>
             </CardHeader>
             <CardContent>
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>{t('monitoring.aiUsage.user')}</TableHead>
-                    <TableHead className="text-right">{t('monitoring.aiUsage.count')}</TableHead>
+                    <TableHead>{m.common_monitoring_aiUsage_user()}</TableHead>
+                    <TableHead className="text-right">{m.common_monitoring_aiUsage_count()}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {data?.topUsers.map((u) => (
+                  {data?.topUsers.map((u: any) => (
                     <TableRow key={u.userId}>
                       <TableCell>{u.userName ?? u.userId.slice(0, 8)}</TableCell>
                       <TableCell className="text-right">{u.count}</TableCell>
@@ -274,7 +273,7 @@ function AiUsagePage() {
                 </TableBody>
               </Table>
               <div className="flex items-center justify-between mt-3">
-                <span className="text-xs text-muted-foreground">{t('monitoring.aiUsage.totalItems', { total: data?.topUsersTotal ?? 0 })}</span>
+                <span className="text-xs text-muted-foreground">{m.common_monitoring_aiUsage_totalItems({ total: data?.topUsersTotal ?? 0 })}</span>
                 <div className="flex items-center gap-1">
                   <button
                     onClick={() => setUsrPage(Math.max(1, usrPage - 1))}

package/src/routes/_nav/monitoring/errors/route.lazy.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { AlertTriangle, RefreshCw, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { ErrorList } from '@/components/monitoring/error-list'
@@ -30,7 +30,6 @@ export const Route = createLazyFileRoute('/_nav/monitoring/errors')({
 })
 
 function MonitoringErrors() {
-  const { t } = useTranslation('common')
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState<any>(null)
 
@@ -52,17 +51,17 @@ function MonitoringErrors() {
   const handleReset = async () => {
     try {
       await resetMonitoring({ data: { type: 'errors' } })
-      toast.success(t('monitoring.errors.clearSuccess'))
+      toast.success(m.common_monitoring_errors_clearSuccess())
       loadData()
     } catch {
-      toast.error(t('monitoring.errors.clearFailed'))
+      toast.error(m.common_monitoring_errors_clearFailed())
     }
   }
 
   return (
     <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
       <div className="flex items-center justify-between">
-        <PageHeader title={t('monitoring.errors.title')} description={t('monitoring.errors.description')} icon={AlertTriangle} />
+        <PageHeader title={m.common_monitoring_errors_title()} description={m.common_monitoring_errors_description()} icon={AlertTriangle} />
         <div className="flex items-center gap-2">
           <button
             onClick={loadData}
@@ -70,30 +69,30 @@ function MonitoringErrors() {
             className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
           >
             <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
-            {t('common.refresh')}
+            {m.common_common_refresh()}
           </button>
           <button
             onClick={handleReset}
             className="inline-flex items-center gap-1 rounded-md border border-red-200 text-red-600 px-3 py-1.5 text-sm font-medium hover:bg-red-50 transition-colors dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950"
           >
             <Trash2 className="size-4" />
-            {t('monitoring.errors.clearData')}
+            {m.common_monitoring_errors_clearData()}
           </button>
         </div>
       </div>
 
       <div className="grid gap-4 md:grid-cols-3">
         <div className="rounded-lg border p-4 bg-card">
-          <p className="text-xs text-muted-foreground">{t('monitoring.errors.stats.errorTypes')}</p>
+          <p className="text-xs text-muted-foreground">{m.common_monitoring_errors_stats_errorTypes()}</p>
           <p className="text-2xl font-bold mt-1">{data?.summary?.uniqueErrors || 0}</p>
         </div>
         <div className="rounded-lg border p-4 bg-card">
-          <p className="text-xs text-muted-foreground">{t('monitoring.errors.stats.totalOccurrences')}</p>
+          <p className="text-xs text-muted-foreground">{m.common_monitoring_errors_stats_totalOccurrences()}</p>
           <p className="text-2xl font-bold mt-1">{data?.summary?.totalOccurrences || 0}</p>
         </div>
         <div className="rounded-lg border p-4 bg-card">
-          <p className="text-xs text-muted-foreground">{t('monitoring.errors.stats.recentError')}</p>
-          <p className="text-sm font-medium mt-1">{data?.errors?.[0]?.errorName || t('common.none')}</p>
+          <p className="text-xs text-muted-foreground">{m.common_monitoring_errors_stats_recentError()}</p>
+          <p className="text-sm font-medium mt-1">{data?.errors?.[0]?.errorName || m.common_common_none()}</p>
         </div>
       </div>
 
@@ -104,7 +103,7 @@ function MonitoringErrors() {
       ) : data?.errors?.length > 0 ? (
         <ErrorList errors={data.errors} />
       ) : (
-        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{t('monitoring.errors.empty')}</div>
+        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{m.common_monitoring_errors_empty()}</div>
       )}
     </div>
   )

package/src/routes/_nav/monitoring/health/route.lazy.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
 import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
 import { HeartPulse, Play, Square, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
@@ -32,7 +32,6 @@ export const Route = createLazyFileRoute('/_nav/monitoring/health')({
 })
 
 function MonitoringHealth() {
-  const { t } = useTranslation('common')
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState<any>(null)
   const [autoEnabled, setAutoEnabled] = useState(true)
@@ -87,9 +86,9 @@ function MonitoringHealth() {
     try {
       await updateHealthCheckSettings({ data: { enabled } })
       setAutoEnabled(enabled)
-      toast.success(enabled ? t('monitoring.health.autoEnabled') : t('monitoring.health.autoDisabled'))
+      toast.success(enabled ? m.common_monitoring_health_autoEnabled() : m.common_monitoring_health_autoDisabled())
     } catch {
-      toast.error(t('monitoring.health.operationFailed'))
+      toast.error(m.common_monitoring_health_operationFailed())
     }
   }
 
@@ -100,7 +99,7 @@ function MonitoringHealth() {
   return (
     <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden min-h-0">
       <div className="flex items-center justify-between">
-        <PageHeader title={t('monitoring.health.title')} description={t('monitoring.health.description')} icon={HeartPulse} />
+        <PageHeader title={m.common_monitoring_health_title()} description={m.common_monitoring_health_description()} icon={HeartPulse} />
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-2">
             {autoEnabled ? (
@@ -108,7 +107,7 @@ function MonitoringHealth() {
             ) : (
               <Play className="size-4 text-green-500" />
             )}
-            <span className="text-sm">{t('monitoring.health.autoCheck')}</span>
+            <span className="text-sm">{m.common_monitoring_health_autoCheck()}</span>
             <button
               onClick={() => handleToggleAuto(!autoEnabled)}
               disabled={autoLoading}
@@ -125,7 +124,7 @@ function MonitoringHealth() {
             className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
           >
             <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
-            {t('monitoring.health.checkNow')}
+            {m.common_monitoring_health_checkNow()}
           </button>
         </div>
       </div>
@@ -144,8 +143,8 @@ function MonitoringHealth() {
               {data.current.status === 'healthy' ? '🟢  HEALTHY' : '🔴  UNHEALTHY'}
             </p>
             <p className="text-sm text-muted-foreground mt-1">
-              {t('monitoring.health.runningTime', { hours: Math.floor(data.current.checks.uptime / 3600), minutes: Math.floor((data.current.checks.uptime % 3600) / 60) })}
-              {autoEnabled && ` · ${t('monitoring.health.nextCheck', { countdown })}`}
+              {m.common_monitoring_health_runningTime({ hours: Math.floor(data.current.checks.uptime / 3600), minutes: Math.floor((data.current.checks.uptime % 3600) / 60) })}
+              {autoEnabled && ` · ${m.common_monitoring_health_nextCheck({ countdown })}`}
             </p>
           </div>
 
@@ -156,15 +155,15 @@ function MonitoringHealth() {
               ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950'
               : 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950'
               }`}>
-              <p className="text-sm font-medium">{t('monitoring.health.database.title')}</p>
+              <p className="text-sm font-medium">{m.common_monitoring_health_database_title()}</p>
               <p className="text-xs text-muted-foreground mt-1">
                 {data.current.checks.database.status === 'connected'
-                  ? t('monitoring.health.database.connected', { latency: data.current.checks.database.latency })
-                  : `${t('monitoring.health.database.failed')}: ${data.current.checks.database.error || t('monitoring.health.database.unknownError')}`}
+                  ? m.common_monitoring_health_database_connected({ latency: data.current.checks.database.latency })
+                  : `${m.common_monitoring_health_database_failed()}: ${data.current.checks.database.error || m.common_monitoring_health_database_unknownError()}`}
               </p>
             </div>
             <div className="rounded-lg border p-4">
-              <p className="text-sm font-medium">{t('monitoring.health.memory.title')}</p>
+              <p className="text-sm font-medium">{m.common_monitoring_health_memory_title()}</p>
               <p className="text-xs text-muted-foreground mt-1">
                 RSS: {data.current.checks.memory.rss}B · Heap: {data.current.checks.memory.heapUsed}B / {data.current.checks.memory.heapTotal}B
               </p>
@@ -176,7 +175,7 @@ function MonitoringHealth() {
       {data?.recent?.length > 0 && (
         <div className="rounded-lg border bg-card flex-1 min-h-0 flex flex-col">
           <div className="border-b px-4 py-3 shrink-0">
-            <h3 className="text-sm font-medium">{t('monitoring.health.history')}</h3>
+            <h3 className="text-sm font-medium">{m.common_monitoring_health_history()}</h3>
           </div>
           <div className="p-4 flex-1 min-h-0">
             <HistoryTable data={data.recent} />
@@ -197,10 +196,9 @@ interface HealthHistoryRow {
 }
 
 function HistoryTable({ data }: { data: HealthHistoryRow[] }) {
-  const { t } = useTranslation('common')
   const columns = [
     {
-      header: t('monitoring.health.historyColumns.time'),
+      header: m.common_monitoring_health_historyColumns_time(),
       accessorKey: 'timestamp',
       meta: { style: { width: 105 } },
       cell: ({ row }: { row: { original: HealthHistoryRow } }) => (
@@ -210,14 +208,14 @@ function HistoryTable({ data }: { data: HealthHistoryRow[] }) {
       ),
     },
     {
-      header: t('monitoring.health.historyColumns.status'),
+      header: m.common_monitoring_health_historyColumns_status(),
       accessorKey: 'status',
       meta: { style: { width: 60 } },
       cell: ({ row }: { row: { original: HealthHistoryRow } }) => {
         const s = row.original.status
         return (
           <span className={s === 'healthy' ? 'text-green-600' : 'text-red-600'}>
-            {s === 'healthy' ? '🟢 ' + t('monitoring.health.status.normal') : '🔴 ' + t('monitoring.health.status.abnormal')}
+            {s === 'healthy' ? '🟢 ' + m.common_monitoring_health_status_normal() : '🔴 ' + m.common_monitoring_health_status_abnormal()}
           </span>
         )
       },
@@ -236,7 +234,7 @@ function HistoryTable({ data }: { data: HealthHistoryRow[] }) {
       },
     },
     {
-      header: t('monitoring.health.historyColumns.dbLatency'),
+      header: m.common_monitoring_health_historyColumns_dbLatency(),
       accessorKey: 'dbLatencyMs',
       meta: { style: { width: 65, textAlign: 'right' } },
       cell: ({ row }: { row: { original: HealthHistoryRow } }) => (
@@ -244,7 +242,7 @@ function HistoryTable({ data }: { data: HealthHistoryRow[] }) {
       ),
     },
     {
-      header: t('monitoring.health.historyColumns.uptime'),
+      header: m.common_monitoring_health_historyColumns_uptime(),
       accessorKey: 'uptimeSeconds',
       meta: { style: { width: 65, textAlign: 'right' } },
       cell: ({ row }: { row: { original: HealthHistoryRow } }) => {

package/src/routes/_nav/monitoring/logs/route.lazy.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages.js'
 import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Activity, Filter, RefreshCw, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { RequestLogTable } from '@/components/monitoring/request-log-table'
@@ -32,7 +32,6 @@ export const Route = createLazyFileRoute('/_nav/monitoring/logs')({
 })
 
 function MonitoringLogs() {
-  const { t } = useTranslation('common')
   const [loading, setLoading] = useState(true)
   const [logs, setLogs] = useState<any[]>([])
   const [total, setTotal] = useState(0)
@@ -71,16 +70,16 @@ function MonitoringLogs() {
   const handleClearOld = async () => {
     try {
       await resetMonitoring({ data: { type: 'request-logs', days: 7 } })
-      toast.success(t('monitoring.logs.clearSuccess'))
+      toast.success(m.common_monitoring_logs_clearSuccess())
       loadLogs()
     } catch {
-      toast.error(t('monitoring.logs.clearFailed'))
+      toast.error(m.common_monitoring_logs_clearFailed())
     }
   }
 
   return (
     <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
-      <PageHeader title={t('monitoring.logs.title')} description={t('monitoring.logs.description')} icon={Activity} />
+      <PageHeader title={m.common_monitoring_logs_title()} description={m.common_monitoring_logs_description()} icon={Activity} />
 
       <div className="flex items-center gap-3 rounded-lg border bg-card p-3 shrink-0">
         <Filter className="size-4 text-muted-foreground" />
@@ -89,7 +88,7 @@ function MonitoringLogs() {
           onChange={(e) => { setMethod(e.target.value); setPage(1) }}
           className="rounded-md border bg-background px-2 py-1 text-sm"
         >
-          <option value="">{t('monitoring.logs.filter.allMethods')}</option>
+          <option value="">{m.common_monitoring_logs_filter_allMethods()}</option>
           <option value="GET">GET</option>
           <option value="POST">POST</option>
           <option value="PUT">PUT</option>
@@ -100,7 +99,7 @@ function MonitoringLogs() {
           onChange={(e) => { setStatus(e.target.value); setPage(1) }}
           className="rounded-md border bg-background px-2 py-1 text-sm"
         >
-          <option value="">{t('monitoring.logs.filter.allStatus')}</option>
+          <option value="">{m.common_monitoring_logs_filter_allStatus()}</option>
           <option value="200">200</option>
           <option value="400">4xx</option>
           <option value="500">5xx</option>
@@ -109,7 +108,7 @@ function MonitoringLogs() {
           type="text"
           value={path}
           onChange={(e) => { setPath(e.target.value); setPage(1) }}
-          placeholder={t('monitoring.logs.filter.searchPath')}
+          placeholder={m.common_monitoring_logs_filter_searchPath()}
           className="flex-1 rounded-md border bg-background px-2 py-1 text-sm outline-none focus:ring-2 focus:ring-ring/50"
         />
         <button
@@ -118,24 +117,24 @@ function MonitoringLogs() {
           className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
         >
           <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
-          {t('monitoring.logs.query')}
+          {m.common_monitoring_logs_query()}
         </button>
         <button
           onClick={handleClearOld}
           className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors"
         >
           <Trash2 className="size-4" />
-          {t('monitoring.logs.clear7Days')}
+          {m.common_monitoring_logs_clear7Days()}
         </button>
         <label className="inline-flex items-center gap-1.5 text-sm shrink-0 cursor-pointer">
           <Checkbox
             checked={filterMonitoring}
-            onCheckedChange={(checked) => {
+            onCheckedChange={(checked: boolean) => {
               setFilterMonitoring(Boolean(checked))
               setPage(1)
             }}
           />
-          {t('monitoring.logs.filterMonitoring')}
+          {m.common_monitoring_logs_filterMonitoring()}
         </label>
       </div>
 
@@ -158,7 +157,7 @@ function MonitoringLogs() {
           />
         </div>
       ) : (
-        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground shrink-0">{t('monitoring.logs.empty')}</div>
+        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground shrink-0">{m.common_monitoring_logs_empty()}</div>
       )}
     </div>
   )

package/src/routes/_nav/monitoring/metrics/route.lazy.tsx

@@ -16,11 +16,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { describeMetric } from '@/lib/monitoring-descriptions'
+import { m } from '@/paraglide/messages.js'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
 import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { BarChart3, RefreshCw, Trash2, MemoryStick } from 'lucide-react'
 import { ArrowDown, ArrowUp } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
@@ -41,7 +41,6 @@ function formatBytes(bytes: number): string {
 }
 
 function MonitoringMetrics() {
-  const { t } = useTranslation('common')
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState<any>(null)
 
@@ -63,17 +62,17 @@ function MonitoringMetrics() {
   const handleReset = async () => {
     try {
       await resetMonitoring({ data: { type: 'metrics' } })
-      toast.success(t('monitoring.metrics.clearSuccess'))
+      toast.success(m.common_monitoring_metrics_clearSuccess())
       loadData()
     } catch {
-      toast.error(t('monitoring.metrics.clearFailed'))
+      toast.error(m.common_monitoring_metrics_clearFailed())
     }
   }
 
   return (
     <div className="flex flex-col flex-1 h-full space-y-4 my-4 overflow-hidden">
       <div className="flex items-center justify-between">
-        <PageHeader title={t('monitoring.metrics.title')} description={t('monitoring.metrics.description')} icon={BarChart3} />
+        <PageHeader title={m.common_monitoring_metrics_title()} description={m.common_monitoring_metrics_description()} icon={BarChart3} />
         <div className="flex items-center gap-2">
           <button
             onClick={loadData}
@@ -81,14 +80,14 @@ function MonitoringMetrics() {
             className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
           >
             <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />
-            {t('common.refresh')}
+            {m.common_common_refresh()}
           </button>
           <button
             onClick={handleReset}
             className="inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors"
           >
             <Trash2 className="size-4" />
-            {t('monitoring.metrics.clearData')}
+            {m.common_monitoring_metrics_clearData()}
           </button>
         </div>
       </div>
@@ -96,7 +95,7 @@ function MonitoringMetrics() {
       <div className="rounded-lg border bg-card p-4">
         <div className="flex items-center gap-2 mb-3">
           <MemoryStick className="size-4 text-muted-foreground" />
-          <h3 className="text-sm font-medium">{t('monitoring.metrics.memoryUsage')}</h3>
+          <h3 className="text-sm font-medium">{m.common_monitoring_metrics_memoryUsage()}</h3>
         </div>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
           <div>
@@ -125,13 +124,13 @@ function MonitoringMetrics() {
       ) : data?.current && Object.keys(data.current).length > 0 ? (
         <MetricsStats data={data.current} />
       ) : (
-        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{t('monitoring.metrics.empty')}</div>
+        <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{m.common_monitoring_metrics_empty()}</div>
       )}
 
       {data?.history?.length > 0 && (
         <div className="rounded-lg border bg-card flex-1 min-h-0 flex flex-col">
           <div className="border-b px-4 py-3 shrink-0">
-            <h3 className="text-sm font-medium">{t('monitoring.metrics.history')}</h3>
+            <h3 className="text-sm font-medium">{m.common_monitoring_metrics_history()}</h3>
           </div>
           <div className="p-4 flex-1 min-h-0">
             <MetricsHistoryTable data={data.history} />
@@ -183,10 +182,9 @@ function MetricsBenchmarkCell({ value, metricName }: { value: number; metricName
 }
 
 function MetricsHistoryTable({ data }: { data: MetricsHistoryRow[] }) {
-  const { t } = useTranslation('common')
   const columns = [
     {
-      header: t('monitoring.metrics.columns.time'),
+      header: m.common_monitoring_metrics_columns_time(),
       accessorKey: 'recordedAt',
       meta: { style: { width: 30 } },
       cell: ({ row }: { row: { original: MetricsHistoryRow } }) => (
@@ -196,7 +194,7 @@ function MetricsHistoryTable({ data }: { data: MetricsHistoryRow[] }) {
       ),
     },
     {
-      header: t('monitoring.metrics.columns.metricName'),
+      header: m.common_monitoring_metrics_columns_metricName(),
       accessorKey: 'metricName',
       meta: { style: { width: 150 } },
       cell: ({ row }: { row: { original: MetricsHistoryRow } }) => (
@@ -206,12 +204,12 @@ function MetricsHistoryTable({ data }: { data: MetricsHistoryRow[] }) {
       ),
     },
     {
-      header: t('monitoring.metrics.columns.count'),
+      header: m.common_monitoring_metrics_columns_count(),
       accessorKey: 'count',
       meta: { style: { width: 15, textAlign: 'right' } },
     },
     {
-      header: t('monitoring.metrics.columns.avg'),
+      header: m.common_monitoring_metrics_columns_avg(),
       accessorKey: 'avg',
       meta: { style: { width: 30, textAlign: 'right' } },
       cell: ({ row }: { row: { original: MetricsHistoryRow } }) => (