@allbluecn/admin-app 0.2.0 → 0.2.1

package/src/routes/_nav/monitoring/overview/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, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { HealthCards } from '@/components/monitoring/health-cards'
@@ -32,7 +32,6 @@ export const Route = createLazyFileRoute('/_nav/monitoring/overview')({
 })
 
 function MonitoringOverview() {
-  const { t } = useTranslation('common')
   const [loading, setLoading] = useState(true)
   const [health, setHealth] = useState<any>(null)
   const [errors, setErrors] = useState<any>(null)
@@ -70,13 +69,13 @@ function MonitoringOverview() {
   return (
     <div className="space-y-4 my-4">
       <div className="flex items-center justify-between">
-        <PageHeader title={t('monitoring.overview.title')} description={t('monitoring.overview.description')} icon={Activity} />
+        <PageHeader title={m.common_monitoring_overview_title()} description={m.common_monitoring_overview_description()} icon={Activity} />
         <button
           onClick={loadData}
           className="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium hover:bg-accent transition-colors"
         >
           <RefreshCw className="size-4" />
-          {t('common.refresh')}
+          {m.common_common_refresh()}
         </button>
       </div>
 
@@ -85,23 +84,23 @@ function MonitoringOverview() {
       <div className="grid gap-4 md:grid-cols-2">
         <div className="rounded-lg border bg-card">
           <div className="border-b px-4 py-3">
-            <h3 className="text-sm font-medium">{t('monitoring.overview.requestStats.title')}</h3>
+            <h3 className="text-sm font-medium">{m.common_monitoring_overview_requestStats_title()}</h3>
           </div>
           <div className="p-4 grid grid-cols-2 gap-3">
             <div>
-              <p className="text-xs text-muted-foreground">{t('monitoring.overview.requestStats.totalRequests')}</p>
+              <p className="text-xs text-muted-foreground">{m.common_monitoring_overview_requestStats_totalRequests()}</p>
               <p className="text-lg font-semibold">{health?.requestStats?.total || 0}</p>
             </div>
             <div>
-              <p className="text-xs text-muted-foreground">{t('monitoring.overview.requestStats.avgDuration')}</p>
+              <p className="text-xs text-muted-foreground">{m.common_monitoring_overview_requestStats_avgDuration()}</p>
               <p className="text-lg font-semibold">{health?.requestStats?.avgDuration?.toFixed(1) || 0}ms</p>
             </div>
             <div>
-              <p className="text-xs text-muted-foreground">{t('monitoring.overview.requestStats.maxDuration')}</p>
+              <p className="text-xs text-muted-foreground">{m.common_monitoring_overview_requestStats_maxDuration()}</p>
               <p className="text-lg font-semibold">{health?.requestStats?.maxDuration || 0}ms</p>
             </div>
             <div>
-              <p className="text-xs text-muted-foreground">{t('monitoring.overview.requestStats.errorTypes')}</p>
+              <p className="text-xs text-muted-foreground">{m.common_monitoring_overview_requestStats_errorTypes()}</p>
               <p className="text-lg font-semibold">{health?.errorCount || 0}</p>
             </div>
           </div>
@@ -109,13 +108,13 @@ function MonitoringOverview() {
 
         <div className="rounded-lg border bg-card">
           <div className="border-b px-4 py-3">
-            <h3 className="text-sm font-medium">{t('monitoring.overview.recentErrors.title')}</h3>
+            <h3 className="text-sm font-medium">{m.common_monitoring_overview_recentErrors_title()}</h3>
           </div>
           <div className="p-4">
             {errors?.errors?.slice(0, 5).length > 0 ? (
               <ErrorList errors={errors.errors.slice(0, 5)} />
             ) : (
-              <p className="text-sm text-muted-foreground text-center py-4">{t('monitoring.overview.recentErrors.empty')}</p>
+              <p className="text-sm text-muted-foreground text-center py-4">{m.common_monitoring_overview_recentErrors_empty()}</p>
             )}
           </div>
         </div>
@@ -123,13 +122,13 @@ function MonitoringOverview() {
 
       <div className="rounded-lg border bg-card">
         <div className="border-b px-4 py-3">
-          <h3 className="text-sm font-medium">{t('monitoring.overview.metricsSnapshot.title')}</h3>
+          <h3 className="text-sm font-medium">{m.common_monitoring_overview_metricsSnapshot_title()}</h3>
         </div>
         <div className="p-4">
           {metrics?.current && Object.keys(metrics.current).length > 0 ? (
             <MetricsStats data={metrics.current} />
           ) : (
-            <p className="text-sm text-muted-foreground text-center py-4">{t('monitoring.overview.metricsSnapshot.empty')}</p>
+            <p className="text-sm text-muted-foreground text-center py-4">{m.common_monitoring_overview_metricsSnapshot_empty()}</p>
           )}
         </div>
       </div>

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

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, Outlet, useLocation } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { SidebarTrigger } from '@/components/ui/sidebar'
 import { Separator } from '@/components/ui/separator'
 
@@ -25,17 +25,16 @@ export const Route = createLazyFileRoute('/_nav/monitoring')({
 })
 
 function MonitoringLayout() {
-  const { t } = useTranslation('common')
   const location = useLocation()
 
   const subNavItems = [
-    { id: 'overview', label: t('monitoring.nav.overview'), path: '/monitoring/overview' },
-    { id: 'logs', label: t('monitoring.nav.logs'), path: '/monitoring/logs' },
-    { id: 'errors', label: t('monitoring.nav.errors'), path: '/monitoring/errors' },
-    { id: 'metrics', label: t('monitoring.nav.metrics'), path: '/monitoring/metrics' },
-    { id: 'health', label: t('monitoring.nav.health'), path: '/monitoring/health' },
-    { id: 'sentry', label: t('monitoring.nav.sentry'), path: '/monitoring/sentry' },
-    { id: 'ai-usage', label: t('monitoring.nav.aiUsage'), path: '/monitoring/ai-usage' },
+    { id: 'overview', label: m.common_monitoring_nav_overview(), path: '/monitoring/overview' },
+    { id: 'logs', label: m.common_monitoring_nav_logs(), path: '/monitoring/logs' },
+    { id: 'errors', label: m.common_monitoring_nav_errors(), path: '/monitoring/errors' },
+    { id: 'metrics', label: m.common_monitoring_nav_metrics(), path: '/monitoring/metrics' },
+    { id: 'health', label: m.common_monitoring_nav_health(), path: '/monitoring/health' },
+    { id: 'sentry', label: m.common_monitoring_nav_sentry(), path: '/monitoring/sentry' },
+    { id: 'ai-usage', label: m.common_monitoring_nav_aiUsage(), path: '/monitoring/ai-usage' },
   ]
 
   const currentId = subNavItems.find((item) => location.pathname.startsWith(item.path))?.id || 'overview'

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

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, useRouter } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import * as Sentry from '@sentry/tanstackstart-react'
 import { BugPlay, ExternalLink, Bug, Activity, AlertTriangle, Eye, EyeOff, Save, RotateCcw, CheckCircle2, XCircle, RefreshCw, ShieldCheck } from 'lucide-react'
 import { IconBrandSentry } from '@tabler/icons-react';
@@ -38,7 +38,6 @@ type ConfigField = {
 }
 
 function SentryPage() {
-  const { t } = useTranslation('common')
   const router = useRouter()
   const [config, setConfig] = useState<SentryConfig>({ dsn: '', org: '', project: '', authToken: '' })
   const [loading, setLoading] = useState(true)
@@ -55,32 +54,32 @@ function SentryPage() {
       placeholder: 'https://<key>@o<orgId>.ingest.sentry.io/<projectId>',
       secret: false,
       instruction: [
-        t('monitoring.sentry.fields.dsn.instruction.step1'),
-        t('monitoring.sentry.fields.dsn.instruction.step2'),
-        t('monitoring.sentry.fields.dsn.instruction.step3'),
-        t('monitoring.sentry.fields.dsn.instruction.step4'),
+        m.common_monitoring_sentry_fields_dsn_instruction_step1(),
+        m.common_monitoring_sentry_fields_dsn_instruction_step2(),
+        m.common_monitoring_sentry_fields_dsn_instruction_step3(),
+        m.common_monitoring_sentry_fields_dsn_instruction_step4(),
       ],
     },
     {
       key: 'org',
-      label: t('monitoring.sentry.fields.org.label'),
+      label: m.common_monitoring_sentry_fields_org_label(),
       placeholder: 'my-organization',
       secret: false,
       instruction: [
-        t('monitoring.sentry.fields.org.instruction.step1'),
-        t('monitoring.sentry.fields.org.instruction.step2'),
-        t('monitoring.sentry.fields.org.instruction.step3'),
+        m.common_monitoring_sentry_fields_org_instruction_step1(),
+        m.common_monitoring_sentry_fields_org_instruction_step2(),
+        m.common_monitoring_sentry_fields_org_instruction_step3(),
       ],
     },
     {
       key: 'project',
-      label: t('monitoring.sentry.fields.project.label'),
+      label: m.common_monitoring_sentry_fields_project_label(),
       placeholder: 'my-project',
       secret: false,
       instruction: [
-        t('monitoring.sentry.fields.project.instruction.step1'),
-        t('monitoring.sentry.fields.project.instruction.step2'),
-        t('monitoring.sentry.fields.project.instruction.step3'),
+        m.common_monitoring_sentry_fields_project_instruction_step1(),
+        m.common_monitoring_sentry_fields_project_instruction_step2(),
+        m.common_monitoring_sentry_fields_project_instruction_step3(),
       ],
     },
     {
@@ -89,11 +88,11 @@ function SentryPage() {
       placeholder: 'sntrys_********************',
       secret: true,
       instruction: [
-        t('monitoring.sentry.fields.authToken.instruction.step1'),
-        t('monitoring.sentry.fields.authToken.instruction.step2'),
-        t('monitoring.sentry.fields.authToken.instruction.step3'),
-        t('monitoring.sentry.fields.authToken.instruction.step4'),
-        t('monitoring.sentry.fields.authToken.instruction.step5'),
+        m.common_monitoring_sentry_fields_authToken_instruction_step1(),
+        m.common_monitoring_sentry_fields_authToken_instruction_step2(),
+        m.common_monitoring_sentry_fields_authToken_instruction_step3(),
+        m.common_monitoring_sentry_fields_authToken_instruction_step4(),
+        m.common_monitoring_sentry_fields_authToken_instruction_step5(),
       ],
     },
   ]
@@ -104,7 +103,7 @@ function SentryPage() {
       const cfg = await getSentryConfig()
       setConfig(cfg)
     } catch {
-      toast.error(t('monitoring.sentry.loadFailed'))
+      toast.error(m.common_monitoring_sentry_loadFailed())
     }
     setLoading(false)
   }
@@ -116,7 +115,7 @@ function SentryPage() {
   const dsnConfigured = !!config.dsn || !!import.meta.env.VITE_SENTRY_DSN
 
   const updateField = (key: keyof SentryConfig, value: string) => {
-    setConfig((prev) => ({ ...prev, [key]: value }))
+    setConfig((prev: any) => ({ ...prev, [key]: value }))
     setChanged(true)
   }
 
@@ -148,23 +147,23 @@ function SentryPage() {
       await saveSentryConfig({ data: config })
       reconfigure(config.dsn)
       await reconfigureSentryServer({ data: { dsn: config.dsn } })
-      toast.success(t('monitoring.sentry.saveSuccess'))
+      toast.success(m.common_monitoring_sentry_saveSuccess())
       setChanged(false)
       router.invalidate()
     } catch {
-      toast.error(t('monitoring.sentry.saveFailed'))
+      toast.error(m.common_monitoring_sentry_saveFailed())
     }
     setSaving(false)
   }
 
   const validateDsn = (dsn: string) => {
-    if (!dsn) return { ok: false, detail: t('monitoring.sentry.validate.empty') }
-    if (!dsn.startsWith('https://')) return { ok: false, detail: t('monitoring.sentry.validate.httpsPrefix') }
-    if (!dsn.includes('.sentry.io')) return { ok: false, detail: t('monitoring.sentry.validate.notSentryIo') }
-    if (!dsn.includes('@')) return { ok: false, detail: t('monitoring.sentry.validate.missingAt') }
+    if (!dsn) return { ok: false, detail: m.common_monitoring_sentry_validate_empty() }
+    if (!dsn.startsWith('https://')) return { ok: false, detail: m.common_monitoring_sentry_validate_httpsPrefix() }
+    if (!dsn.includes('.sentry.io')) return { ok: false, detail: m.common_monitoring_sentry_validate_notSentryIo() }
+    if (!dsn.includes('@')) return { ok: false, detail: m.common_monitoring_sentry_validate_missingAt() }
     const projectId = dsn.split('/').pop()
-    if (!projectId || !/^\d+$/.test(projectId)) return { ok: false, detail: t('monitoring.sentry.validate.missingProjectId') }
-    return { ok: true, detail: t('monitoring.sentry.validate.valid') }
+    if (!projectId || !/^\d+$/.test(projectId)) return { ok: false, detail: m.common_monitoring_sentry_validate_missingProjectId() }
+    return { ok: true, detail: m.common_monitoring_sentry_validate_valid() }
   }
 
   const verifyConfig = async () => {
@@ -185,18 +184,18 @@ function SentryPage() {
 
       const eventId = Sentry.captureException(new Error('Sentry config validation - test error'))
       if (!eventId) {
-        setVerifyResult({ ok: false, detail: t('monitoring.sentry.verify.notInitialized') })
+        setVerifyResult({ ok: false, detail: m.common_monitoring_sentry_verify_notInitialized() })
         setVerifying(false)
         return
       }
       const flushed = await Sentry.flush(5000)
       if (flushed) {
-        setVerifyResult({ ok: true, detail: t('monitoring.sentry.verify.success', { eventId }) })
+        setVerifyResult({ ok: true, detail: m.common_monitoring_sentry_verify_success({ eventId }) })
       } else {
-        setVerifyResult({ ok: false, detail: t('monitoring.sentry.verify.timeout') })
+        setVerifyResult({ ok: false, detail: m.common_monitoring_sentry_verify_timeout() })
       }
     } catch (e) {
-      setVerifyResult({ ok: false, detail: t('monitoring.sentry.verify.error', { message: (e as Error).message }) })
+      setVerifyResult({ ok: false, detail: m.common_monitoring_sentry_verify_error({ message: (e as Error).message }) })
     }
     setVerifying(false)
   }
@@ -207,9 +206,9 @@ function SentryPage() {
         <div>
           <h2 className="text-2xl font-bold flex items-center gap-2">
             <IconBrandSentry stroke={2} />
-            {t('monitoring.sentry.title')}
+            {m.common_monitoring_sentry_title()}
           </h2>
-          <p className="mt-1 text-muted-foreground">{t('monitoring.sentry.subtitle')}</p>
+          <p className="mt-1 text-muted-foreground">{m.common_monitoring_sentry_subtitle()}</p>
         </div>
         <a
           href="https://sentry.io"
@@ -218,53 +217,53 @@ function SentryPage() {
           className="inline-flex items-center gap-1.5 rounded-lg border bg-card px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
         >
           <ExternalLink className="size-4" />
-          {t('monitoring.sentry.openSentry')}
+          {m.common_monitoring_sentry_openSentry()}
         </a>
       </div>
 
       <div className="grid gap-4 md:grid-cols-4">
         <StatusCard
-          title={t('monitoring.sentry.statusCards.dsn.title')}
+          title={m.common_monitoring_sentry_statusCards_dsn_title()}
           status={dsnConfigured ? 'active' : 'inactive'}
           icon={dsnConfigured ? CheckCircle2 : XCircle}
-          description={dsnConfigured ? t('monitoring.sentry.statusCards.dsn.configured') : t('monitoring.sentry.statusCards.dsn.notConfigured')}
+          description={dsnConfigured ? m.common_monitoring_sentry_statusCards_dsn_configured() : m.common_monitoring_sentry_statusCards_dsn_notConfigured()}
         />
         <StatusCard
-          title={t('monitoring.sentry.statusCards.errors.title')}
+          title={m.common_monitoring_sentry_statusCards_errors_title()}
           status={dsnConfigured ? 'active' : 'inactive'}
           icon={Bug}
-          description={dsnConfigured ? t('monitoring.sentry.statusCards.errors.enabled') : t('monitoring.sentry.statusCards.errors.disabled')}
+          description={dsnConfigured ? m.common_monitoring_sentry_statusCards_errors_enabled() : m.common_monitoring_sentry_statusCards_errors_disabled()}
         />
         <StatusCard
-          title={t('monitoring.sentry.statusCards.performance.title')}
+          title={m.common_monitoring_sentry_statusCards_performance_title()}
           status={dsnConfigured ? 'active' : 'inactive'}
           icon={Activity}
-          description={dsnConfigured ? t('monitoring.sentry.statusCards.performance.enabled') : t('monitoring.sentry.statusCards.performance.disabled')}
+          description={dsnConfigured ? m.common_monitoring_sentry_statusCards_performance_enabled() : m.common_monitoring_sentry_statusCards_performance_disabled()}
         />
         <StatusCard
           title="Session Replay"
           status={dsnConfigured ? 'active' : 'inactive'}
           icon={BugPlay}
-          description={dsnConfigured ? t('monitoring.sentry.statusCards.replay.enabled') : t('monitoring.sentry.statusCards.replay.disabled')}
+          description={dsnConfigured ? m.common_monitoring_sentry_statusCards_replay_enabled() : m.common_monitoring_sentry_statusCards_replay_disabled()}
         />
       </div>
 
       <div className="rounded-lg border bg-card">
         <div className="border-b px-6 py-4">
-          <h3 className="text-lg font-semibold">{t('monitoring.sentry.config.title')}</h3>
+          <h3 className="text-lg font-semibold">{m.common_monitoring_sentry_config_title()}</h3>
           <p className="text-sm text-muted-foreground mt-1">
-            {t('monitoring.sentry.config.description')}
+            {m.common_monitoring_sentry_config_description()}
           </p>
         </div>
         <div className="divide-y">
           {CONFIG_FIELDS.map((field) => (
             <ConfigFieldCard
-              key={field.key}
+              key={String(field.key)}
               field={field}
               value={config[field.key]}
-              visible={visibleFields.has(field.key)}
-              onChange={(v) => updateField(field.key, v)}
-              onToggleVisible={() => toggleVisible(field.key)}
+              visible={visibleFields.has(String(field.key))}
+              onChange={(v: string) => updateField(field.key as any, v)}
+              onToggleVisible={() => toggleVisible(String(field.key))}
             />
           ))}
         </div>
@@ -276,10 +275,10 @@ function SentryPage() {
             className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
           >
             {saving ? <RefreshCw className="size-4 animate-spin" /> : <Save className="size-4" />}
-            {t('monitoring.sentry.saveConfig')}
+            {m.common_monitoring_sentry_saveConfig()}
           </button>
           {changed && (
-            <span className="text-xs text-muted-foreground">{t('monitoring.sentry.unsaved')}</span>
+            <span className="text-xs text-muted-foreground">{m.common_monitoring_sentry_unsaved()}</span>
           )}
         </div>
       </div>
@@ -299,12 +298,12 @@ function SentryPage() {
       <div className="rounded-lg border bg-card p-6">
         <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
           <ShieldCheck className="size-5" />
-          {t('monitoring.sentry.verify.title')}
+          {m.common_monitoring_sentry_verify_title()}
         </h3>
         <p className="text-sm text-muted-foreground mb-4">
-          {t('monitoring.sentry.verify.description')}
+          {m.common_monitoring_sentry_verify_description()}
           <h4 className="text-xs text-muted-foreground mb-4">
-            {t('monitoring.sentry.verify.note')}
+            {m.common_monitoring_sentry_verify_note()}
           </h4>
         </p>
         <button
@@ -314,7 +313,7 @@ function SentryPage() {
           className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-40"
         >
           {verifying ? <RefreshCw className="size-4 animate-spin" /> : <ShieldCheck className="size-4" />}
-          {t('monitoring.sentry.verify.button')}
+          {m.common_monitoring_sentry_verify_button()}
         </button>
       </div>
     </div>
@@ -334,7 +333,6 @@ function ConfigFieldCard({
   onChange: (v: string) => void
   onToggleVisible: () => void
 }) {
-  const { t } = useTranslation('common')
   return (
     <div className="px-6 py-5 space-y-3">
       <div className="flex items-center justify-between">
@@ -361,7 +359,7 @@ function ConfigFieldCard({
       </div>
 
       <div className="rounded-lg bg-muted/50 p-3">
-        <p className="text-xs font-medium text-muted-foreground mb-1.5">{t('monitoring.sentry.fields.obtainMethod')}</p>
+        <p className="text-xs font-medium text-muted-foreground mb-1.5">{m.common_monitoring_sentry_fields_obtainMethod()}</p>
         <ol className="list-decimal list-inside space-y-0.5">
           {field.instruction.map((step, i) => (
             <li key={i} className="text-xs text-muted-foreground">{step}</li>