Matt
67d7e6e3d5
Full CRM rebuild with Next.js 15, TypeScript, Tailwind, Drizzle ORM, PostgreSQL, Redis, BullMQ, MinIO, and Socket.io. Includes 461 source files covering clients, berths, interests/pipeline, documents/EOI, expenses/invoices, email, notifications, dashboard, admin, and client portal. CI/CD via Gitea Actions with Docker builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import type { ServiceStatus } from '@/lib/services/system-monitoring.service';
|
|
|
|
interface ServiceHealthCardProps {
|
|
service: ServiceStatus;
|
|
}
|
|
|
|
const statusConfig = {
|
|
healthy: {
|
|
dot: 'bg-green-500',
|
|
label: 'Healthy',
|
|
labelClass: 'text-green-700 dark:text-green-400',
|
|
},
|
|
degraded: {
|
|
dot: 'bg-yellow-500',
|
|
label: 'Degraded',
|
|
labelClass: 'text-yellow-700 dark:text-yellow-400',
|
|
},
|
|
down: {
|
|
dot: 'bg-red-500',
|
|
label: 'Down',
|
|
labelClass: 'text-red-700 dark:text-red-400',
|
|
},
|
|
} as const;
|
|
|
|
export function ServiceHealthCard({ service }: ServiceHealthCardProps) {
|
|
const config = statusConfig[service.status];
|
|
|
|
return (
|
|
<Card className="min-w-[160px]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span
|
|
className={cn('h-2.5 w-2.5 rounded-full flex-shrink-0', config.dot)}
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="font-medium text-sm truncate">{service.name}</span>
|
|
</div>
|
|
<p className={cn('text-xs font-semibold', config.labelClass)}>{config.label}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">{service.responseTimeMs}ms</p>
|
|
{service.details && (
|
|
<p className="text-xs text-muted-foreground mt-1 truncate" title={service.details}>
|
|
{service.details}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|