9daf1fd378
- Add comprehensive database migrations (001-024) for schema evolution - Enhance API schema with expanded type definitions and resolvers - Add new middleware: audit logging, rate limiting, MFA enforcement, security, tenant auth - Implement new services: AI optimization, billing, blockchain, compliance, marketplace - Add adapter layer for cloud integrations (Cloudflare, Kubernetes, Proxmox, storage) - Update Crossplane provider with enhanced VM management capabilities - Add comprehensive test suite for API endpoints and services - Update frontend components with improved GraphQL subscriptions and real-time updates - Enhance security configurations and headers (CSP, CORS, etc.) - Update documentation and configuration files - Add new CI/CD workflows and validation scripts - Implement design system improvements and UI enhancements
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { getHealthScoreColor } from '@/lib/design-system'
|
|
|
|
interface MetricsCardProps {
|
|
title: string
|
|
value: string | number
|
|
health?: number
|
|
trend?: 'up' | 'down' | 'stable'
|
|
description?: string
|
|
}
|
|
|
|
export default function MetricsCard({
|
|
title,
|
|
value,
|
|
health,
|
|
trend,
|
|
description
|
|
}: MetricsCardProps) {
|
|
const healthColor = health !== undefined ? getHealthScoreColor(health) : undefined
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium text-gray-400">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-3xl font-bold text-white">{value}</span>
|
|
{health !== undefined && (
|
|
<span
|
|
className="text-sm font-semibold"
|
|
data-health-color
|
|
style={{ '--health-color': healthColor } as React.CSSProperties}
|
|
>
|
|
{health}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
{description && (
|
|
<p className="mt-2 text-sm text-gray-400">{description}</p>
|
|
)}
|
|
{trend && (
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Trend: {trend}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|