518 lines
22 KiB
TypeScript
518 lines
22 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import {
|
|
Rocket,
|
|
AlertTriangle,
|
|
ArrowRight,
|
|
Cloud,
|
|
Shield,
|
|
Clock3,
|
|
Globe,
|
|
Database,
|
|
Server,
|
|
Monitor,
|
|
Activity,
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import type { AlertEventRecord, CertExpiryRecord } from '@/types';
|
|
|
|
/** 仪表盘卡片数据类型 — 与 Dashboard API 响应对齐 */
|
|
export interface DashboardRelease {
|
|
id: number | string;
|
|
status: string;
|
|
app_name: string;
|
|
version: string;
|
|
environment?: string;
|
|
commit_id?: string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
export interface DashboardCluster {
|
|
id: number | string;
|
|
code?: string;
|
|
name: string;
|
|
status: string;
|
|
cpu_usage?: number;
|
|
memory_usage?: number;
|
|
node_count?: number;
|
|
pod_count?: number;
|
|
ingress_count?: number;
|
|
deployment_count?: number;
|
|
service_count?: number;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
export interface DashboardAutomationStats {
|
|
cron_job_count?: number;
|
|
script_count?: number;
|
|
today_executions?: number;
|
|
success_rate?: number;
|
|
}
|
|
|
|
export interface DashboardOpsStats {
|
|
domain_count?: number;
|
|
site_task_count?: number;
|
|
middleware_count?: number;
|
|
snmp_device_count?: number;
|
|
monitor_target_count?: number;
|
|
}
|
|
|
|
export interface DashboardPipelineStats {
|
|
today_count?: number;
|
|
success?: number;
|
|
failed?: number;
|
|
running?: number;
|
|
}
|
|
|
|
/**
|
|
* DashboardRecent - 优化后的仪表盘底部卡片组件
|
|
*
|
|
* 优化点：
|
|
* 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
|
|
* 2. 统一的状态指示器样式
|
|
* 3. 更好的 hover 效果和过渡动画
|
|
* 4. ScrollArea 使用 scrollbar-thin 类
|
|
* 5. 空状态显示更友好
|
|
*/
|
|
|
|
// Status dot component
|
|
function StatusDot({ severity }: { severity: string }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
|
|
severity === 'critical' && 'bg-[var(--dg-red)]',
|
|
severity === 'warning' && 'bg-[var(--dg-yellow)]',
|
|
severity === 'info' && 'bg-[var(--dg-blue)]',
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Severity badge
|
|
function SeverityBadge({ severity }: { severity: string }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className={cn(
|
|
'text-xs font-medium',
|
|
severity === 'critical' && 'dg-badge-red border',
|
|
severity === 'warning' && 'dg-badge-yellow border',
|
|
severity === 'info' && 'dg-badge-blue border',
|
|
)}
|
|
>
|
|
{severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
|
|
|
|
return (
|
|
<Card className="dg-card dg-card-hover">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
|
|
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="dg-btn-ghost text-xs"
|
|
onClick={() => navigate('/alerts')}
|
|
>
|
|
{t('dashboard.alerts.viewAll')}
|
|
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[320px] scrollbar-thin">
|
|
{recentAlerts.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
|
|
<AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
|
|
<p className="text-sm">{t('dashboard.alerts.empty')}</p>
|
|
<p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1.5 pr-2">
|
|
{recentAlerts.map((alert) => (
|
|
<div
|
|
key={alert.id}
|
|
className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
|
|
onClick={() => navigate('/alert-center')}
|
|
>
|
|
<StatusDot severity={alert.severity || 'info'} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
|
|
{alert.rule_name}
|
|
</span>
|
|
<SeverityBadge severity={alert.severity || 'info'} />
|
|
</div>
|
|
<p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
|
|
</div>
|
|
<span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
|
|
{alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
|
|
const { t } = useTranslation();
|
|
const expiringDomains = (expCerts ?? [])
|
|
.map((d) => ({
|
|
...d,
|
|
daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
|
|
}))
|
|
.sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);
|
|
|
|
const criticalCount = expiringDomains.filter((d) => d.daysUntilExpiry < 30).length;
|
|
const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
|
|
|
|
return (
|
|
<Card className="dg-card dg-card-hover">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
|
<div>
|
|
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
|
|
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{criticalCount > 0 && (
|
|
<Badge className="dg-badge-red border">
|
|
<AlertTriangle className="h-3 w-3 mr-1" />
|
|
{criticalCount} {t('dashboard.certificates.expiringSoon')}
|
|
</Badge>
|
|
)}
|
|
{warningCount > 0 && (
|
|
<Badge className="dg-badge-yellow border">
|
|
{warningCount} {t('dashboard.certificates.expiringIn30Days')}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[280px] scrollbar-thin">
|
|
{expiringDomains.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
|
<Shield className="h-10 w-10 mb-3 opacity-30" />
|
|
<p className="text-sm">{t('dashboard.certificates.empty')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1.5 pr-2">
|
|
{expiringDomains.map((domain) => (
|
|
<div
|
|
key={domain.id}
|
|
className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div
|
|
className={cn(
|
|
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
|
domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
|
|
domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
|
|
'bg-[var(--dg-green)]/10'
|
|
)}
|
|
>
|
|
<Shield className={cn(
|
|
'h-4 w-4',
|
|
domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
|
|
domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
|
|
'text-[var(--dg-green)]'
|
|
)} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
|
|
</div>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={cn(
|
|
'text-xs flex-shrink-0',
|
|
domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
|
|
domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
|
|
'dg-badge-green border'
|
|
)}
|
|
>
|
|
{domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const releaseList = releases?.slice(0, 5) ?? [];
|
|
|
|
return (
|
|
<Card className="dg-card dg-card-hover">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
|
|
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="dg-btn-ghost text-xs"
|
|
onClick={() => navigate('/pipelines')}
|
|
>
|
|
{t('dashboard.releases.viewAll')}
|
|
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{releaseList.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
|
<Rocket className="h-10 w-10 mb-3 opacity-30" />
|
|
<p className="text-sm">{t('dashboard.releases.empty')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{releaseList.map((release) => (
|
|
<div
|
|
key={release.id}
|
|
className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
|
>
|
|
<div
|
|
className={cn(
|
|
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
|
release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
|
|
release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
|
|
release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
|
|
'bg-[var(--dg-yellow)]/10'
|
|
)}
|
|
>
|
|
<Rocket className={cn(
|
|
'h-4 w-4',
|
|
release.status === 'success' ? 'text-[var(--dg-green)]' :
|
|
release.status === 'failed' ? 'text-[var(--dg-red)]' :
|
|
release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
|
|
'text-[var(--dg-yellow)]'
|
|
)} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
|
|
<Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
|
|
{release.version}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
<span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
|
|
<span className="text-xs text-[var(--dg-border)]">·</span>
|
|
<span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
|
|
</div>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={cn(
|
|
'text-xs flex-shrink-0',
|
|
release.status === 'success' ? 'dg-badge-green border' :
|
|
release.status === 'failed' ? 'dg-badge-red border' :
|
|
release.status === 'deploying' ? 'dg-badge-blue border' :
|
|
'dg-badge-yellow border'
|
|
)}
|
|
>
|
|
{release.status === 'success' ? t('dashboard.releases.success') :
|
|
release.status === 'failed' ? t('dashboard.releases.failed') :
|
|
release.status === 'deploying' ? t('dashboard.releases.deploying') :
|
|
release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
/** 运维概览 — 资产 / 监控 / 任务快捷入口 // Logan.Li */
|
|
export function OpsOverviewCard({
|
|
automation,
|
|
ops,
|
|
serverCount,
|
|
hostMonitorCount,
|
|
firingAlerts,
|
|
}: {
|
|
automation?: DashboardAutomationStats;
|
|
ops?: DashboardOpsStats;
|
|
serverCount?: number;
|
|
hostMonitorCount?: number;
|
|
firingAlerts?: number;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const tiles = [
|
|
{ key: 'servers', label: t('dashboard.ops.servers'), value: serverCount ?? 0, icon: Server, path: '/servers', color: 'text-[var(--dg-blue)]' },
|
|
{ key: 'domains', label: t('dashboard.ops.domains'), value: ops?.domain_count ?? 0, icon: Globe, path: '/domains', color: 'text-[var(--dg-cyan)]' },
|
|
{ key: 'host', label: t('dashboard.ops.hostMonitor'), value: hostMonitorCount ?? serverCount ?? 0, icon: Monitor, path: '/host-monitor', color: 'text-[var(--dg-green)]' },
|
|
{ key: 'mw', label: t('dashboard.ops.middleware'), value: ops?.middleware_count ?? 0, icon: Database, path: '/monitor-center?tab=middleware', color: 'text-[var(--dg-red)]' },
|
|
{ key: 'site', label: t('dashboard.ops.siteProbes'), value: ops?.site_task_count ?? 0, icon: Activity, path: '/monitor-center?tab=site', color: 'text-[var(--dg-yellow)]' },
|
|
{ key: 'cron', label: t('dashboard.ops.cronJobs'), value: automation?.cron_job_count ?? 0, icon: Clock3, path: '/cronjobs', color: 'text-[var(--dg-purple)]' },
|
|
];
|
|
|
|
return (
|
|
<Card className="dg-card dg-card-hover">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
|
|
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
|
|
{t('menu.aiAgentCli')}
|
|
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
|
|
{tiles.map((tile) => (
|
|
<button
|
|
key={tile.key}
|
|
type="button"
|
|
onClick={() => navigate(tile.path)}
|
|
className="flex items-center gap-2.5 p-2.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all text-left"
|
|
>
|
|
<tile.icon className={cn('h-4 w-4 shrink-0', tile.color)} />
|
|
<div className="min-w-0">
|
|
<div className="text-base font-bold text-[var(--dg-text-primary)] leading-none">{tile.value}</div>
|
|
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 truncate">{tile.label}</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center justify-between text-xs px-1 pt-1 border-t border-[var(--dg-border)]">
|
|
<span className="text-[var(--dg-text-muted)]">
|
|
{t('dashboard.ops.todayExecutions')}: <span className="text-[var(--dg-text-primary)] font-medium">{automation?.today_executions ?? 0}</span>
|
|
</span>
|
|
<button type="button" className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate('/alert-center')}>
|
|
{t('dashboard.ops.firingAlerts')}: <span className={cn('font-medium', (firingAlerts ?? 0) > 0 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]')}>{firingAlerts ?? 0}</span>
|
|
</button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Card className="dg-card dg-card-hover">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
|
|
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="dg-btn-ghost text-xs"
|
|
onClick={() => navigate('/kubernetes')}
|
|
>
|
|
{t('dashboard.clusters.viewAll')}
|
|
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{clusters.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
|
<Cloud className="h-10 w-10 mb-3 opacity-30" />
|
|
<p className="text-sm">{t('dashboard.clusters.empty')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{clusters.map((cluster) => {
|
|
const cpuUsage = Number(cluster.cpu_usage ?? 0);
|
|
const memoryUsage = Number(cluster.memory_usage ?? 0);
|
|
const hasUsage = cpuUsage > 0 || memoryUsage > 0;
|
|
const metrics = hasUsage
|
|
? [
|
|
{ label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
|
|
{ label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
|
|
{ label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
|
|
{ label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
|
|
]
|
|
: [
|
|
{ label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
|
|
{ label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
|
|
{ label: t('dashboard.clusters.ingress'), value: cluster.ingress_count ?? 0 },
|
|
{ label: t('dashboard.clusters.deployments'), value: cluster.deployment_count ?? 0 },
|
|
];
|
|
return (
|
|
<div
|
|
key={cluster.id}
|
|
className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
|
|
onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2.5">
|
|
<Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
|
|
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={cn(
|
|
'text-xs',
|
|
cluster.status === 'healthy' ? 'dg-badge-green border' :
|
|
cluster.status === 'warning' ? 'dg-badge-yellow border' :
|
|
'dg-badge-red border'
|
|
)}
|
|
>
|
|
{cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
|
|
</Badge>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-2 text-center">
|
|
{metrics.map((item) => (
|
|
<div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
|
|
<div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
|
|
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|