@allbluecn/admin-app 0.3.2 → 0.3.3

package/src/routes/_nav/licenses/new/route.lazy.tsx

@@ -22,11 +22,11 @@ import { useState } from 'react'
 import { useForm } from '@tanstack/react-form'
 import { useServerFn } from '@tanstack/react-start'
 import { Check, Copy } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@allbluecn/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@allbluecn/ui/card'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Alert, AlertDescription, AlertTitle } from '@allbluecn/ui/alert'
 import { issueLicenseFn } from '@/server/serverFns/licenses'
 import { FeatureRegistry } from '@allbluecn/kernel'
 

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

@@ -18,7 +18,7 @@
 import { createLazyFileRoute, Link } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import type React from 'react'
-import { Button } from '@/components/ui/button'
+import { Button } from '@allbluecn/ui/button'
 
 export const Route = createLazyFileRoute('/_nav/licenses')({
   pendingComponent: () => (

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

@@ -8,8 +8,8 @@ import { tooltip } from '@tanstack/charts/tooltip'
 import { Chart } from '@tanstack/charts/react'
 import { BarChart3, AlertCircle, AlertTriangle, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Card, CardContent, CardHeader, CardTitle } from '@allbluecn/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@allbluecn/ui/table'
 import { getAiUsageOverviewFn } from '@/server/serverFns/monitoring/get-ai-usage-overview'
 import { checkAiAlertsFn } from '@/server/serverFns/monitoring/check-ai-alerts'
 import type { AiUsageOverview } from '@/server/admin-ai-usage'

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

@@ -17,37 +17,37 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { AlertTriangle, RefreshCw, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { ErrorList } from '@/components/monitoring/error-list'
+import { ErrorItem } from '@/components/monitoring/error-list'
 import { getErrors } from '@/server/serverFns/monitoring/get-errors'
 import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
-import { toast } from '@/components/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
+import { toast } from '@allbluecn/ui/toast'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/errors')({
   component: MonitoringErrors,
 })
 
 function MonitoringErrors() {
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<any>(null)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(initial)
 
   const loadData = async () => {
     setLoading(true)
     try {
       const result = await getErrors()
-      setData(result)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setData(jsonify(result))
     } catch {
       // ignore
     }
     setLoading(false)
   }
 
-  useEffect(() => {
-    loadData()
-  }, [])
-
   const handleReset = async () => {
     try {
       await resetMonitoring({ data: { type: 'errors' } })
@@ -101,7 +101,7 @@ function MonitoringErrors() {
           <RefreshCw className="size-5 animate-spin text-muted-foreground" />
         </div>
       ) : data?.errors?.length > 0 ? (
-        <ErrorList errors={data.errors} />
+        <ErrorList errors={data.errors as ErrorItem[]} />
       ) : (
         <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">{m.common_monitoring_errors_empty()}</div>
       )}

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

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getErrors } from '@/server/serverFns/monitoring/get-errors'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/errors')({
+  loader: async () => jsonify(await getErrors()),
+})

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

@@ -18,32 +18,29 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
 import { useState, useEffect, useRef } from 'react'
-import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
+import { formatTimestamp } from '@allbluecn/ui/lib/datetime'
 import { HeartPulse, Play, Square, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { HealthCards } from '@/components/monitoring/health-cards'
-import { DataTable } from '@/components/data-table/data-table'
+import { DataTable } from '@allbluecn/ui/data-table'
 import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
 import { getHealthCheckSettings, updateHealthCheckSettings } from '@/server/serverFns/monitoring/get-health-settings'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/health')({
   component: MonitoringHealth,
 })
 
 function MonitoringHealth() {
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<any>(null)
-  const [autoEnabled, setAutoEnabled] = useState(true)
-  const [autoLoading, setAutoLoading] = useState(true)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(initial.data)
+  const [autoEnabled, setAutoEnabled] = useState(initial.settings.enabled)
+  const [autoLoading, setAutoLoading] = useState(false)
   const [countdown, setCountdown] = useState(30)
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
-  useEffect(() => {
-    loadHealth()
-    loadSettings()
-  }, [])
-
   useEffect(() => {
     if (timerRef.current) clearInterval(timerRef.current)
     if (autoEnabled) {
@@ -64,7 +61,8 @@ function MonitoringHealth() {
     setLoading(true)
     try {
       const result = await getHealthStatus()
-      setData(result)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setData(jsonify(result))
     } catch {
       // ignore
     }
@@ -158,7 +156,7 @@ function MonitoringHealth() {
               <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'
-                  ? m.common_monitoring_health_database_connected({ latency: data.current.checks.database.latency })
+                  ? 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>
@@ -178,7 +176,7 @@ function MonitoringHealth() {
             <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} />
+            <HistoryTable data={data.recent as HealthHistoryRow[]} />
           </div>
         </div>
       )}

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

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
+import { getHealthCheckSettings } from '@/server/serverFns/monitoring/get-health-settings'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/health')({
+  loader: async () => {
+    const [data, settings] = await Promise.all([
+      getHealthStatus(),
+      getHealthCheckSettings(),
+    ])
+    return jsonify({ data, settings })
+  },
+})

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

@@ -17,24 +17,28 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Activity, Filter, RefreshCw, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { RequestLogTable } from '@/components/monitoring/request-log-table'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Checkbox } from '@allbluecn/ui/checkbox'
 import { getRequestLogs } from '@/server/serverFns/monitoring/get-request-logs'
 import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
-import { DataTablePagination } from '@/components/data-table/data-table-pagination'
-import { toast } from '@/components/ui/toast'
+import { DataTablePagination } from '@allbluecn/ui/data-table/pagination'
+import { toast } from '@allbluecn/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
+import { RequestLogEntry } from '@/components/monitoring/request-log-table'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/logs')({
   component: MonitoringLogs,
 })
 
 function MonitoringLogs() {
-  const [loading, setLoading] = useState(true)
-  const [logs, setLogs] = useState<any[]>([])
-  const [total, setTotal] = useState(0)
+  const initial = Route.useLoaderData()
+  const skipFirstLoadRef = useRef(true)
+  const [loading, setLoading] = useState(false)
+  const [logs, setLogs] = useState(initial.logs)
+  const [total, setTotal] = useState(initial.total)
   const [page, setPage] = useState(1)
   const [method, setMethod] = useState('')
   const [status, setStatus] = useState('')
@@ -55,7 +59,8 @@ function MonitoringLogs() {
           excludeMonitoring: filterMonitoring,
         },
       })
-      setLogs(result.logs)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setLogs(jsonify(result.logs))
       setTotal(result.total)
     } catch {
       // ignore
@@ -64,6 +69,11 @@ function MonitoringLogs() {
   }
 
   useEffect(() => {
+    // 初始数据已由 route.tsx loader 预取（与 loader 同参），跳过挂载即重复请求
+    if (skipFirstLoadRef.current) {
+      skipFirstLoadRef.current = false
+      return
+    }
     loadLogs()
   }, [page, method, status, path, filterMonitoring])
 
@@ -145,13 +155,18 @@ function MonitoringLogs() {
       ) : logs.length > 0 ? (
         <div className="flex-1 min-h-0 flex flex-col">
           <RequestLogTable
-            logs={logs}
+            logs={logs as RequestLogEntry[]}
             actions={
               <DataTablePagination
                 page={page}
                 totalPages={Math.ceil(total / limit)}
                 total={total}
                 onPageChange={setPage}
+                labels={{
+                  total: m.common_pagination_total({ total, page, totalPages: Math.ceil(total / limit) }),
+                  previous: m.common_pagination_prev(),
+                  next: m.common_pagination_next(),
+                }}
               />
             }
           />

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

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getRequestLogs } from '@/server/serverFns/monitoring/get-request-logs'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/logs')({
+  loader: async () => {
+    const result = await getRequestLogs({
+      data: { limit: 50, offset: 0, excludeMonitoring: false },
+    })
+    // Date → ISO 字符串：与客户端 RPC 返回形态对齐（组件按 string 时间戳渲染）
+    return jsonify(result)
+  },
+})

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

@@ -15,20 +15,20 @@
 // You should have received a copy of the GNU Affero General Public License
 // 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 { formatTimestamp } from '@allbluecn/ui/lib/datetime'
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { BarChart3, RefreshCw, Trash2, MemoryStick } from 'lucide-react'
 import { ArrowDown, ArrowUp } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { MetricsStats } from '@/components/monitoring/metrics-stats'
 import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
 import { resetMonitoring } from '@/server/serverFns/monitoring/reset'
-import { DataTable } from '@/components/data-table/data-table'
-import { toast } from '@/components/ui/toast'
+import { jsonify } from '@/lib/loader-serial'
+import { DataTable } from '@allbluecn/ui/data-table'
+import { toast } from '@allbluecn/ui/toast'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/metrics')({
   component: MonitoringMetrics,
@@ -41,24 +41,22 @@ function formatBytes(bytes: number): string {
 }
 
 function MonitoringMetrics() {
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<any>(null)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState(initial)
 
   const loadData = async () => {
     setLoading(true)
     try {
       const result = await getMetrics()
-      setData(result)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      setData(jsonify(result))
     } catch {
       // ignore
     }
     setLoading(false)
   }
 
-  useEffect(() => {
-    loadData()
-  }, [])
-
   const handleReset = async () => {
     try {
       await resetMonitoring({ data: { type: 'metrics' } })
@@ -133,7 +131,7 @@ function MonitoringMetrics() {
             <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} />
+            <MetricsHistoryTable data={data.history as MetricsHistoryRow[]} />
           </div>
         </div>
       )}
@@ -141,7 +139,7 @@ function MonitoringMetrics() {
   )
 }
 
-interface MetricsHistoryRow {
+export interface MetricsHistoryRow {
   metricName: string
   count: number
   avg: number

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

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/metrics')({
+  loader: async () => jsonify(await getMetrics()),
+})

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

@@ -17,7 +17,7 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { Activity, RefreshCw } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { HealthCards } from '@/components/monitoring/health-cards'
@@ -26,16 +26,19 @@ import { MetricsStats } from '@/components/monitoring/metrics-stats'
 import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
 import { getErrors } from '@/server/serverFns/monitoring/get-errors'
 import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
+import { jsonify } from '@/lib/loader-serial'
+import { ErrorItem } from '@/components/monitoring/error-list'
 
 export const Route = createLazyFileRoute('/_nav/monitoring/overview')({
   component: MonitoringOverview,
 })
 
 function MonitoringOverview() {
-  const [loading, setLoading] = useState(true)
-  const [health, setHealth] = useState<any>(null)
-  const [errors, setErrors] = useState<any>(null)
-  const [metrics, setMetrics] = useState<any>(null)
+  const initial = Route.useLoaderData()
+  const [loading, setLoading] = useState(false)
+  const [health, setHealth] = useState(initial.health)
+  const [errors, setErrors] = useState(initial.errors)
+  const [metrics, setMetrics] = useState(initial.metrics)
 
   const loadData = async () => {
     setLoading(true)
@@ -45,19 +48,17 @@ function MonitoringOverview() {
         getErrors(),
         getMetrics(),
       ])
-      setHealth(h)
-      setErrors(e)
-      setMetrics(m)
+      // Date → ISO 字符串，与 loader 预取形态对齐
+      const j = jsonify({ h, e, m })
+      setHealth(j.h)
+      setErrors(j.e)
+      setMetrics(j.m)
     } catch {
       // ignore
     }
     setLoading(false)
   }
 
-  useEffect(() => {
-    loadData()
-  }, [])
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -112,7 +113,7 @@ function MonitoringOverview() {
           </div>
           <div className="p-4">
             {errors?.errors?.slice(0, 5).length > 0 ? (
-              <ErrorList errors={errors.errors.slice(0, 5)} />
+              <ErrorList errors={errors.errors.slice(0, 5) as ErrorItem[]} />
             ) : (
               <p className="text-sm text-muted-foreground text-center py-4">{m.common_monitoring_overview_recentErrors_empty()}</p>
             )}

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

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getHealthStatus } from '@/server/serverFns/monitoring/get-health'
+import { getErrors } from '@/server/serverFns/monitoring/get-errors'
+import { getMetrics } from '@/server/serverFns/monitoring/get-metrics'
+import { jsonify } from '@/lib/loader-serial'
+
+export const Route = createFileRoute('/_nav/monitoring/overview')({
+  loader: async () => {
+    const [health, errors, metrics] = await Promise.all([
+      getHealthStatus(),
+      getErrors(),
+      getMetrics(),
+    ])
+    // Date → ISO 字符串：与客户端 RPC 返回形态对齐（组件按 string 时间戳渲染）
+    return jsonify({ health, errors, metrics })
+  },
+})

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

@@ -15,10 +15,10 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { createLazyFileRoute, Outlet, useLocation } from '@tanstack/react-router'
+import { createLazyFileRoute, Link, Outlet, useLocation } from '@tanstack/react-router'
 import { m } from '@/paraglide/messages.js'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@allbluecn/ui/sidebar'
+import { Separator } from '@allbluecn/ui/separator'
 
 export const Route = createLazyFileRoute('/_nav/monitoring')({
   component: MonitoringLayout,
@@ -46,16 +46,16 @@ function MonitoringLayout() {
         <Separator orientation="vertical" className="mr-2 h-4" />
         <nav className="flex gap-1">
           {subNavItems.map((item) => (
-            <a
+            <Link
               key={item.id}
-              href={item.path}
+              to={item.path}
               className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${currentId === item.id
                 ? 'bg-accent text-accent-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
                 }`}
             >
               {item.label}
-            </a>
+            </Link>
           ))}
         </nav>
       </header>

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

@@ -18,10 +18,10 @@
 import { createLazyFileRoute, useRouter } from '@tanstack/react-router'
 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 { BugPlay, ExternalLink, Bug, Activity, Eye, EyeOff, Save, CheckCircle2, XCircle, RefreshCw, ShieldCheck } from 'lucide-react'
 import { IconBrandSentry } from '@tabler/icons-react';
 import { useEffect, useState } from 'react'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { getSentryConfig, saveSentryConfig, reconfigureSentryServer } from '@/server/serverFns/sentry/config'
 import type { SentryConfig } from '@/server/serverFns/sentry/config'