@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/templates/admin/AdminDashboardTemplate.tsx

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