86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
/**
|
|
* ModuleMetricsFooter - Compact metrics footer for table pages
|
|
* Shows module-specific metrics at the bottom of table pages
|
|
* Uses standard EnhancedMetricCard and ProgressBar components
|
|
* Follows standard app design system and color scheme
|
|
*/
|
|
|
|
import React from 'react';
|
|
import EnhancedMetricCard, { MetricCardProps } from './EnhancedMetricCard';
|
|
import { ProgressBar } from '../ui/progress';
|
|
|
|
export interface MetricItem {
|
|
title: string;
|
|
value: string | number;
|
|
subtitle?: string;
|
|
icon: React.ReactNode;
|
|
accentColor: MetricCardProps['accentColor'];
|
|
href?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export interface ProgressMetric {
|
|
label: string;
|
|
value: number; // 0-100
|
|
color?: 'primary' | 'success' | 'warning' | 'purple';
|
|
}
|
|
|
|
interface ModuleMetricsFooterProps {
|
|
metrics: MetricItem[];
|
|
progress?: ProgressMetric;
|
|
className?: string;
|
|
}
|
|
|
|
export default function ModuleMetricsFooter({
|
|
metrics,
|
|
progress,
|
|
className = ''
|
|
}: ModuleMetricsFooterProps) {
|
|
if (metrics.length === 0 && !progress) return null;
|
|
|
|
const progressColors = {
|
|
primary: 'bg-[var(--color-primary)]',
|
|
success: 'bg-[var(--color-success)]',
|
|
warning: 'bg-[var(--color-warning)]',
|
|
purple: 'bg-[var(--color-purple)]',
|
|
};
|
|
|
|
return (
|
|
<div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 ${className}`}>
|
|
<div className="space-y-4">
|
|
{/* Metrics Grid */}
|
|
{metrics.length > 0 && (
|
|
<div className={`grid grid-cols-1 sm:grid-cols-2 ${metrics.length > 2 ? 'lg:grid-cols-3' : 'lg:grid-cols-2'} ${metrics.length > 3 ? 'xl:grid-cols-4' : ''} gap-4`}>
|
|
{metrics.map((metric, index) => (
|
|
<EnhancedMetricCard
|
|
key={index}
|
|
title={metric.title}
|
|
value={metric.value}
|
|
subtitle={metric.subtitle}
|
|
icon={metric.icon}
|
|
accentColor={metric.accentColor}
|
|
href={metric.href}
|
|
onClick={metric.onClick}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Progress Bar */}
|
|
{progress && (
|
|
<div className="space-y-2">
|
|
<ProgressBar
|
|
value={progress.value}
|
|
color={progress.color === 'success' ? 'success' : progress.color === 'warning' ? 'warning' : 'primary'}
|
|
size="md"
|
|
showLabel={true}
|
|
label={progress.label}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|