frontend-refactor-1

frontend/src/components/dashboard/ModuleMetricsFooter.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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>
+  );
+}
+