@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/templates/admin/AdminDashboardTemplate.tsx

@@ -0,0 +1,351 @@
+import React from 'react';
+import { cn } from '../../atoms/utils/utils';
+import { StatCard } from '../../atoms/composed/StatCard';
+import { Chart } from '../../atoms/composed/Chart';
+import { Card } from '../../atoms/ui/card';
+import { DashboardGrid } from '../DashboardTemplate';
+import { DataBadge } from '../../atoms/composed/DataBadge';
+import { IconBadge } from '../../atoms/composed/IconBadge';
+import { Button } from '../../atoms/ui/button';
+import { getContainerHeightClass } from '../../atoms/shared/config/dashboard-sizes';
+import { Activity, AlertTriangle, TrendingUp, Users, Settings, RefreshCw } from 'lucide-react';
+
+export interface MetricCard {
+  /** Metric title */
+  title: string;
+  /** Main value to display */
+  value: string | number;
+  /** Change percentage */
+  change?: number;
+  /** Change period description */
+  changePeriod?: string;
+  /** Metric category for styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Custom icon */
+  icon?: React.ReactNode;
+  /** Click handler */
+  onClick?: () => void;
+}
+
+export interface ChartConfig {
+  /** Chart title */
+  title: string;
+  /** Chart type */
+  type: 'line' | 'bar' | 'pie' | 'area';
+  /** Chart data */
+  data: Array<{ label: string; value: number; category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 }>;
+  /** Chart configuration */
+  config?: Record<string, unknown>;
+  /** Chart category for styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export interface ActivityItem {
+  /** Activity ID */
+  id: string;
+  /** Activity type */
+  type: 'user' | 'system' | 'security' | 'content' | 'error';
+  /** Activity message */
+  message: string;
+  /** Activity timestamp */
+  timestamp: Date;
+  /** User who performed the activity */
+  user?: string;
+  /** Additional metadata */
+  metadata?: Record<string, unknown>;
+}
+
+export interface AlertItem {
+  /** Alert ID */
+  id: string;
+  /** Alert severity */
+  severity: 'low' | 'medium' | 'high' | 'critical';
+  /** Alert title */
+  title: string;
+  /** Alert description */
+  description: string;
+  /** Alert timestamp */
+  timestamp: Date;
+  /** Whether alert is resolved */
+  resolved?: boolean;
+  /** Action to resolve alert */
+  onResolve?: () => void;
+}
+
+export interface AdminDashboardTemplateProps {
+  /** Dashboard title */
+  title?: string;
+  /** Dashboard description */
+  description?: string;
+  /** Key metrics to display */
+  metrics: MetricCard[];
+  /** Charts configuration */
+  charts?: ChartConfig[];
+  /** Recent activities */
+  activities?: ActivityItem[];
+  /** System alerts */
+  alerts?: AlertItem[];
+  /** Additional actions in header */
+  actions?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Refresh handler */
+  onRefresh?: () => void;
+  /** Last updated timestamp */
+  lastUpdated?: Date;
+}
+
+export const AdminDashboardTemplate: React.FC<AdminDashboardTemplateProps> = ({
+  title = "Admin Dashboard",
+  description = "System overview and key metrics",
+  metrics,
+  charts = [],
+  activities = [],
+  alerts = [],
+  actions,
+  className,
+  isLoading = false,
+  onRefresh,
+  lastUpdated
+}) => {
+  const unreadAlerts = alerts.filter(alert => !alert.resolved);
+  const criticalAlerts = unreadAlerts.filter(alert => alert.severity === 'critical');
+
+  const getActivityIcon = (type: ActivityItem['type']) => {
+    switch (type) {
+      case 'user': return <Users className="w-4 h-4" />;
+      case 'system': return <Settings className="w-4 h-4" />;
+      case 'security': return <AlertTriangle className="w-4 h-4" />;
+      case 'content': return <Activity className="w-4 h-4" />;
+      case 'error': return <AlertTriangle className="w-4 h-4" />;
+      default: return <Activity className="w-4 h-4" />;
+    }
+  };
+
+  const getActivityColor = (type: ActivityItem['type']) => {
+    switch (type) {
+      case 'user': return 'text-category-1';
+      case 'system': return 'text-category-2';
+      case 'security': return 'text-category-3';
+      case 'content': return 'text-category-5';
+      case 'error': return 'text-category-8';
+      default: return 'text-muted-foreground';
+    }
+  };
+
+  const getAlertSeverityCategory = (severity: AlertItem['severity']): 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 => {
+    switch (severity) {
+      case 'low': return 6;
+      case 'medium': return 7;
+      case 'high': return 3;
+      case 'critical': return 8;
+      default: return 2;
+    }
+  };
+
+  return (
+    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
+      {/* Header Section */}
+      <div className="bg-gradient-to-br from-muted/50 via-muted/30 to-background border-b border-border/50">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center space-x-4">
+              <IconBadge 
+                variant="category" 
+                category={1} 
+                size="lg" 
+                icon={<Activity className="w-5 h-5" />}
+                tooltip="Dashboard Activity Overview"
+              />
+              <div>
+                <h1 className="text-4xl font-bold text-foreground">{title}</h1>
+                <p className="text-lg text-muted-foreground mt-2">{description}</p>
+              </div>
+            </div>
+            
+            <div className="ml-6 flex-shrink-0">
+              {/* Action buttons */}
+              <div className="flex items-center gap-2 mb-2">
+                {onRefresh && (
+                  <Button
+                    variant="outline"
+                    onClick={onRefresh}
+                    disabled={isLoading}
+                    tooltip={isLoading ? "Refreshing..." : "Refresh data"}
+                  >
+                    <RefreshCw className={cn("w-4 h-4 mr-2", isLoading && "animate-spin")} />
+                    Refresh
+                  </Button>
+                )}
+                {actions}
+              </div>
+              
+              {/* Status indicators positioned under buttons */}
+              <div className="flex items-center gap-4 justify-end">
+                {criticalAlerts.length > 0 && (
+                  <DataBadge 
+                    variant="status"
+                    status="error"
+                    size="sm"
+                  >
+                    <AlertTriangle className="w-3 h-3 mr-1" />
+                    {criticalAlerts.length} Critical Alert{criticalAlerts.length !== 1 ? 's' : ''}
+                  </DataBadge>
+                )}
+                
+                {lastUpdated && (
+                  <span className="text-sm text-muted-foreground">
+                    Last updated: {lastUpdated.toLocaleTimeString()}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 min-h-0 overflow-auto">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+          
+          {/* Key Metrics Grid */}
+          <DashboardGrid columns={4} gap="md">
+            {metrics.map((metric, index) => (
+              <StatCard
+                key={index}
+                title={metric.title}
+                value={metric.value}
+                trend={metric.change ? { value: metric.change, label: metric.changePeriod } : undefined}
+                category={metric.category || 1}
+                icon={metric.icon || <TrendingUp className="w-5 h-5" />}
+                onClick={metric.onClick}
+                className="cursor-pointer transition-shadow"
+              />
+            ))}
+          </DashboardGrid>
+
+          {/* Charts and Activities Row */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            
+            {/* Charts Section */}
+            <div className="lg:col-span-2 space-y-6">
+              {charts.map((chart, index) => (
+                <Card key={index} className="p-6 overflow-hidden">
+                  <div className="mb-4">
+                    <h3 className="text-lg font-semibold text-foreground">
+                      {chart.title}
+                    </h3>
+                  </div>
+                  <div className={getContainerHeightClass('container-small-chart')}>
+                    <Chart
+                      title={chart.title}
+                      type={chart.type}
+                      data={chart.data}
+                      category={chart.category}
+                      height="small"
+                      variant="minimal"
+                      noWrapper={true}
+                    />
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            {/* Right Sidebar */}
+            <div className="space-y-6">
+              
+              {/* System Alerts */}
+              {unreadAlerts.length > 0 && (
+                <Card className="p-4">
+                  <div className="mb-4">
+                    <h3 className="text-lg font-semibold text-foreground flex items-center">
+                      <AlertTriangle className="w-5 h-5 mr-2 text-category-8" />
+                      System Alerts
+                    </h3>
+                  </div>
+                  <div className="space-y-3">
+                    {unreadAlerts.slice(0, 5).map((alert) => (
+                      <div 
+                        key={alert.id}
+                        className="flex items-start space-x-3 p-3 rounded-md border border-border"
+                      >
+                        <DataBadge 
+                          variant="category" 
+                          category={getAlertSeverityCategory(alert.severity)}
+                          size="sm"
+                          className="mt-0.5"
+                        >
+                          {alert.severity}
+                        </DataBadge>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-foreground">
+                            {alert.title}
+                          </p>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {alert.description}
+                          </p>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {alert.timestamp.toLocaleString()}
+                          </p>
+                          {alert.onResolve && (
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="mt-2"
+                              onClick={alert.onResolve}
+                            >
+                              Resolve
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </Card>
+              )}
+
+              {/* Recent Activity */}
+              <Card className="p-4">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold text-foreground flex items-center">
+                    <Activity className="w-5 h-5 mr-2 text-category-2" />
+                    Recent Activity
+                  </h3>
+                </div>
+                <div className="space-y-3">
+                  {activities.slice(0, 8).map((activity) => (
+                    <div key={activity.id} className="flex items-start space-x-3">
+                      <div className={cn(
+                        "mt-1 flex-shrink-0",
+                        getActivityColor(activity.type)
+                      )}>
+                        {getActivityIcon(activity.type)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm text-foreground">
+                          {activity.message}
+                        </p>
+                        <div className="flex items-center gap-2 mt-1">
+                          {activity.user && (
+                            <span className="text-xs text-muted-foreground">
+                              by {activity.user}
+                            </span>
+                          )}
+                          <span className="text-xs text-muted-foreground">
+                            {activity.timestamp.toLocaleString()}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};