letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(mobile): swap admin page headers to PageHeader

Browse Source 
Mechanical sweep replacing the plain h1+p header markup with the
mobile-aware PageHeader primitive across 12 admin pages: index,
backup, branding, documenso, email, import, invitations, monitoring,
onboarding, reminders, reports, webhooks. Webhooks "Add Webhook"
button preserved via the actions slot.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-01 12:57:52 +02:00
parent c405124bc3
commit 71da6e8fdc
12 changed files with 101 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/admin/system-monitoring-dashboard.tsx
View File

@@ -7,6 +7,7 @@ import { apiFetch } from '@/lib/api/client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ServiceHealthCard } from './service-health-card';
import { QueueOverview } from './queue-overview';
import { PageHeader } from '@/components/shared/page-header';
import type {
HealthStatus,
QueueStatus,
@@ -17,16 +18,14 @@ import type {
export function SystemMonitoringDashboard() {
const { data: healthData } = useQuery({
queryKey: ['system', 'health'],
queryFn: () =>
apiFetch<{ data: HealthStatus }>('/api/v1/admin/health').then((r) => r.data),
queryFn: () => apiFetch<{ data: HealthStatus }>('/api/v1/admin/health').then((r) => r.data),
staleTime: 30_000,
refetchInterval: 30_000,
});
const { data: queuesData } = useQuery({
queryKey: ['system', 'queues'],
queryFn: () =>
apiFetch<{ data: QueueStatus[] }>('/api/v1/admin/queues').then((r) => r.data),
queryFn: () => apiFetch<{ data: QueueStatus[] }>('/api/v1/admin/queues').then((r) => r.data),
staleTime: 10_000,
refetchInterval: 10_000,
});
@@ -47,11 +46,10 @@ export function SystemMonitoringDashboard() {
return (
<div className="space-y-8">
{/* Page header */}
<div>
<h1 className="text-2xl font-bold text-foreground">System Monitoring</h1>
<p className="text-muted-foreground">Real-time health, queue status and connection tracking</p>
</div>
<PageHeader
title="System Monitoring"
description="Real-time health, queue status and connection tracking"
/>
{/* Service health */}
<section className="space-y-3">
@@ -79,10 +77,7 @@ export function SystemMonitoringDashboard() {
) : (
<div className="flex gap-3">
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="h-[88px] w-[160px] rounded-xl border bg-card animate-pulse"
/>
<div key={i} className="h-[88px] w-[160px] rounded-xl border bg-card animate-pulse" />
))}
</div>
)}
@@ -124,9 +119,7 @@ export function SystemMonitoringDashboard() {
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-3xl font-bold">
{queues.reduce((sum, q) => sum + q.active, 0)}
</p>
<p className="text-3xl font-bold">{queues.reduce((sum, q) => sum + q.active, 0)}</p>
</CardContent>
</Card>
</section>
@@ -141,10 +134,7 @@ export function SystemMonitoringDashboard() {
) : (
<div className="grid grid-cols-5 gap-3">
{[1, 2, 3, 4, 5].map((i) => (
<div
key={i}
className="h-[110px] rounded-xl border bg-card animate-pulse"
/>
<div key={i} className="h-[110px] rounded-xl border bg-card animate-pulse" />
))}
</div>
)}
@@ -159,8 +149,7 @@ export function SystemMonitoringDashboard() {
function RecentErrorsPanel() {
const { data: errorsData } = useQuery({
queryKey: ['system', 'errors'],
queryFn: () =>
apiFetch<{ data: RecentError[] }>('/api/v1/admin/errors').then((r) => r.data),
queryFn: () => apiFetch<{ data: RecentError[] }>('/api/v1/admin/errors').then((r) => r.data),
staleTime: 30_000,
refetchInterval: 30_000,
});