@pattern-stack/frontend-patterns 0.0.4 → 0.0.5

package/src/organisms/entity/TrendAnalysisPanel.tsx

@@ -0,0 +1,337 @@
+import React, { useMemo, useState } from 'react';
+import { Chart } from '../../atoms/composed/Chart';
+import type { ChartDataPoint, ChartType } from '../../atoms/composed/Chart';
+import { Card } from '../../atoms/ui/card';
+import { Button } from '../../atoms/ui/button';
+import { Select } from '../../atoms/ui/Select';
+import { Badge } from '../../atoms/ui/Badge';
+import { MetricCalculationEngine } from '../../atoms/utils/metric-engine';
+import type { MetricConfig, EntityData, TemporalConfig, TemporalCycle } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+import { TrendingUp, BarChart3, LineChart, AreaChart, Download } from 'lucide-react';
+
+export interface TrendAnalysisPanelProps {
+  metrics: MetricConfig[];
+  data: EntityData[];
+  temporal?: TemporalConfig;
+  isLoading?: boolean;
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  
+  // Chart configuration
+  defaultChartType?: ChartType;
+  dateField?: string;
+  enablePeriodSelection?: boolean;
+  enableChartTypeSelection?: boolean;
+  enableMetricSelection?: boolean;
+  showComparisons?: boolean;
+  
+  // Extension points
+  renderHeader?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderCustomChart?: (metric: MetricConfig, chartData: ChartDataPoint[], chartType: ChartType) => React.ReactNode;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  
+  // Event handlers
+  onMetricChange?: (metric: MetricConfig) => void;
+  onPeriodChange?: (period: TemporalCycle) => void;
+  onChartTypeChange?: (chartType: ChartType) => void;
+  onExport?: (data: ChartDataPoint[], metric: MetricConfig) => void;
+}
+
+export const TrendAnalysisPanel: React.FC<TrendAnalysisPanelProps> = ({
+  metrics,
+  data,
+  temporal,
+  isLoading = false,
+  className,
+  category,
+  defaultChartType = 'line',
+  dateField = 'date',
+  enablePeriodSelection = true,
+  enableChartTypeSelection = true,
+  enableMetricSelection = true,
+  showComparisons = true,
+  renderHeader,
+  renderFooter,
+  renderCustomChart,
+  headerSlot,
+  footerSlot,
+  onMetricChange,
+  onPeriodChange,
+  onChartTypeChange,
+  onExport
+}) => {
+  const [selectedMetric, setSelectedMetric] = useState<MetricConfig>(metrics[0]);
+  const [selectedPeriod, setSelectedPeriod] = useState<TemporalCycle>(temporal?.defaultCycle || 'monthly');
+  const [selectedChartType, setSelectedChartType] = useState<ChartType>(defaultChartType);
+  const [showForecast, setShowForecast] = useState(false);
+
+  // Calculate trend data for selected metric
+  const trendData = useMemo(() => {
+    if (!selectedMetric || !data.length) return [];
+    
+    // Determine periods to show based on selected cycle
+    const periods = selectedPeriod === 'yearly' ? 5 :
+                   selectedPeriod === 'quarterly' ? 8 :
+                   selectedPeriod === 'monthly' ? 12 :
+                   selectedPeriod === 'weekly' ? 12 : 30;
+    
+    return MetricCalculationEngine.calculateTrendData(
+      selectedMetric,
+      data,
+      dateField,
+      periods
+    );
+  }, [selectedMetric, data, dateField, selectedPeriod]);
+
+  // Convert trend data to chart format
+  const chartData = useMemo((): ChartDataPoint[] => {
+    return trendData.map(point => ({
+      label: point.label || point.date,
+      value: point.value,
+      category: category
+    }));
+  }, [trendData, category]);
+
+  // Calculate trend percentage
+  const trendPercentage = useMemo(() => {
+    if (chartData.length < 2) return null;
+    
+    const first = chartData[0].value;
+    const last = chartData[chartData.length - 1].value;
+    
+    if (first === 0) return null;
+    
+    return ((last - first) / Math.abs(first)) * 100;
+  }, [chartData]);
+
+  // Generate forecast data if enabled
+  const forecastData = useMemo(() => {
+    if (!showForecast || !temporal?.forecasting?.enabled || chartData.length < 3) {
+      return [];
+    }
+
+    const periods = temporal?.forecasting?.periods || 3;
+    const lastValue = chartData[chartData.length - 1].value;
+    const trend = trendPercentage ? trendPercentage / 100 : 0;
+    
+    return Array.from({ length: periods }, (_, index) => ({
+      label: `Future ${index + 1}`,
+      value: lastValue * (1 + trend * (index + 1) / chartData.length),
+      category: 8 as const // Use category 8 for forecast
+    }));
+  }, [showForecast, temporal?.forecasting, chartData, trendPercentage]);
+
+  // Combined chart data with forecast
+  const combinedChartData = useMemo(() => {
+    if (forecastData.length === 0) return chartData;
+    return [...chartData, ...forecastData];
+  }, [chartData, forecastData]);
+
+  const handleMetricChange = (metricKey: string) => {
+    const metric = metrics.find(m => m.key === metricKey);
+    if (metric) {
+      setSelectedMetric(metric);
+      onMetricChange?.(metric);
+    }
+  };
+
+  const handlePeriodChange = (period: TemporalCycle) => {
+    setSelectedPeriod(period);
+    onPeriodChange?.(period);
+  };
+
+  const handleChartTypeChange = (chartType: ChartType) => {
+    setSelectedChartType(chartType);
+    onChartTypeChange?.(chartType);
+  };
+
+  const handleExport = () => {
+    if (onExport) {
+      onExport(combinedChartData, selectedMetric);
+    } else {
+      // Default CSV export
+      const csvContent = [
+        'Date,Value',
+        ...combinedChartData.map(point => `${point.label},${point.value}`)
+      ].join('\n');
+      
+      const blob = new Blob([csvContent], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${selectedMetric.label}-trend-data.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  const renderControls = () => {
+    return (
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="w-4 h-4 text-muted-foreground" />
+            <h3 className="text-lg font-semibold text-foreground">Trend Analysis</h3>
+          </div>
+          
+          {trendPercentage !== null && (
+            <Badge variant={trendPercentage > 0 ? 'default' : 'destructive'}>
+              {trendPercentage > 0 ? '+' : ''}{trendPercentage.toFixed(1)}%
+            </Badge>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {enableMetricSelection && metrics.length > 1 && (
+            <Select
+              value={selectedMetric.key}
+              onValueChange={handleMetricChange}
+            >
+              {metrics.map(metric => (
+                <option key={metric.key} value={metric.key}>
+                  {metric.label}
+                </option>
+              ))}
+            </Select>
+          )}
+          
+          {enablePeriodSelection && (
+            <Select
+              value={selectedPeriod}
+              onValueChange={(value) => handlePeriodChange(value as TemporalCycle)}
+            >
+              {(temporal?.cycles || ['daily', 'weekly', 'monthly', 'quarterly', 'yearly']).map(cycle => (
+                <option key={cycle} value={cycle}>
+                  {cycle.charAt(0).toUpperCase() + cycle.slice(1)}
+                </option>
+              ))}
+            </Select>
+          )}
+          
+          {enableChartTypeSelection && (
+            <div className="flex items-center border rounded">
+              <Button
+                variant={selectedChartType === 'line' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => handleChartTypeChange('line')}
+              >
+                <LineChart className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={selectedChartType === 'bar' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => handleChartTypeChange('bar')}
+              >
+                <BarChart3 className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={selectedChartType === 'area' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => handleChartTypeChange('area')}
+              >
+                <AreaChart className="w-4 h-4" />
+              </Button>
+            </div>
+          )}
+          
+          {temporal?.forecasting?.enabled && (
+            <Button
+              variant={showForecast ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setShowForecast(!showForecast)}
+            >
+              Forecast
+            </Button>
+          )}
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExport}
+            disabled={chartData.length === 0}
+          >
+            <Download className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderChart = () => {
+    if (renderCustomChart) {
+      const customChart = renderCustomChart(selectedMetric, combinedChartData, selectedChartType);
+      if (customChart) return customChart;
+    }
+
+    return (
+      <Chart
+        title={selectedMetric.label}
+        subtitle={`${selectedPeriod} trend analysis`}
+        data={combinedChartData}
+        type={selectedChartType}
+        category={category}
+        showTrend={true}
+        trend={trendPercentage !== null ? {
+          value: trendPercentage,
+          label: 'overall trend'
+        } : undefined}
+        height="large"
+        isLoading={isLoading}
+        noWrapper={true}
+        showLegend={forecastData.length > 0}
+      />
+    );
+  };
+
+  const renderComparisons = () => {
+    if (!showComparisons || !temporal?.enableComparisons || chartData.length === 0) {
+      return null;
+    }
+
+    const currentValue = chartData[chartData.length - 1]?.value || 0;
+    const previousValue = chartData[chartData.length - 2]?.value || 0;
+    const periodChange = previousValue !== 0 ? ((currentValue - previousValue) / Math.abs(previousValue)) * 100 : 0;
+
+    return (
+      <div className="border-t pt-4 mt-4">
+        <h4 className="text-sm font-semibold text-foreground mb-3">Period Comparisons</h4>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold">{currentValue.toFixed(0)}</div>
+            <div className="text-xs text-muted-foreground">Current</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold">{previousValue.toFixed(0)}</div>
+            <div className="text-xs text-muted-foreground">Previous</div>
+          </div>
+          <div className="text-center">
+            <div className={cn(
+              "text-2xl font-bold",
+              periodChange > 0 ? 'text-status-success' : periodChange < 0 ? 'text-status-error' : 'text-muted-foreground'
+            )}>
+              {periodChange > 0 ? '+' : ''}{periodChange.toFixed(1)}%
+            </div>
+            <div className="text-xs text-muted-foreground">Change</div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Card className={cn('p-6', className)} category={category} data-component-name="TrendAnalysisPanel">
+      {headerSlot}
+      {renderHeader && renderHeader()}
+      
+      {renderControls()}
+      {renderChart()}
+      {renderComparisons()}
+      
+      {renderFooter && renderFooter()}
+      {footerSlot}
+    </Card>
+  );
+};

package/src/organisms/entity/index.ts

@@ -0,0 +1,4 @@
+export * from './MetricsOverviewPanel';
+export * from './EntityListPanel';
+export * from './TrendAnalysisPanel';
+export * from './CategoryBreakdownPanel';

package/src/organisms/index.ts

@@ -2,4 +2,7 @@
 // These are complete, reusable component interfaces that compose molecules and atoms
 
 // Showcase components
-export { ComponentShowcasePage } from './showcase/ComponentShowcasePage';
+export { ComponentShowcasePage } from './showcase/ComponentShowcasePage';
+
+// Entity components - Cross-domain configurable panels
+export * from './entity';

package/src/pages/AdminShowcase/AdminDashboardShowcase.tsx

@@ -1,71 +1,71 @@
 import React from 'react';
 import { AdminDashboardTemplate } from '../../templates/admin';
 import type { MetricCard, ChartConfig, ActivityItem, AlertItem } from '../../templates/admin';
-import { Users, DollarSign, TrendingUp } from 'lucide-react';
+import { Users, DollarSign, TrendingUp, ShoppingCart, Calendar, CreditCard } from 'lucide-react';
 
 // Mock data for demonstration
 const mockMetrics: MetricCard[] = [
   {
-    title: 'Total Users',
-    value: '12,486',
-    change: 12.5,
-    changePeriod: 'from last month',
-    icon: <Users className="w-5 h-5" />,
-    category: 1,
-    onClick: () => console.log('Navigate to users')
-  },
-  {
-    title: 'Revenue',
-    value: '$89,432',
-    change: 8.2,
+    title: 'Total Revenue',
+    value: '$124,832',
+    change: 15.3,
     changePeriod: 'from last month',
     icon: <DollarSign className="w-5 h-5" />,
     category: 2,
     onClick: () => console.log('Navigate to revenue')
   },
   {
-    title: 'Growth Rate',
-    value: '23.8%',
-    change: -2.1,
-    changePeriod: 'from last quarter',
-    icon: <TrendingUp className="w-5 h-5" />,
-    category: 3,
-    onClick: () => console.log('Navigate to analytics')
+    title: 'Active Users',
+    value: '8,429',
+    change: 12.5,
+    changePeriod: 'from last week',
+    icon: <Users className="w-5 h-5" />,
+    category: 1,
+    onClick: () => console.log('Navigate to users')
   },
   {
-    title: 'Active Sessions',
-    value: '1,247',
-    change: 5.7,
+    title: 'Daily Orders',
+    value: '342',
+    change: 8.7,
     changePeriod: 'from yesterday',
-    icon: <Users className="w-5 h-5" />,
+    icon: <ShoppingCart className="w-5 h-5" />,
+    category: 3,
+    onClick: () => console.log('Navigate to orders')
+  },
+  {
+    title: 'Conversion Rate',
+    value: '4.2%',
+    change: -1.8,
+    changePeriod: 'from last month',
+    icon: <TrendingUp className="w-5 h-5" />,
     category: 4,
-    onClick: () => console.log('Navigate to sessions')
+    onClick: () => console.log('Navigate to analytics')
   }
 ];
 
 const mockCharts: ChartConfig[] = [
   {
-    title: 'User Growth',
+    title: 'Revenue Trends',
     type: 'line',
     data: [
-      { label: 'Jan', value: 1200 },
-      { label: 'Feb', value: 1400 },
-      { label: 'Mar', value: 1800 },
-      { label: 'Apr', value: 2200 },
-      { label: 'May', value: 2800 },
-      { label: 'Jun', value: 3200 }
+      { label: 'Jan', value: 89000 },
+      { label: 'Feb', value: 96000 },
+      { label: 'Mar', value: 108000 },
+      { label: 'Apr', value: 115000 },
+      { label: 'May', value: 118000 },
+      { label: 'Jun', value: 125000 }
     ],
-    category: 1
+    category: 2
   },
   {
-    title: 'Revenue Distribution',
+    title: 'Order Distribution',
     type: 'pie',
     data: [
-      { label: 'Subscriptions', value: 45000, category: 2 },
-      { label: 'One-time', value: 28000, category: 3 },
-      { label: 'Enterprise', value: 16000, category: 1 }
+      { label: 'Online', value: 65, category: 1 },
+      { label: 'Mobile App', value: 25, category: 3 },
+      { label: 'In-Store', value: 10, category: 4 }
     ],
-    category: 2
+    category: 3
   }
 ];
 
@@ -73,44 +73,44 @@ const mockActivities: ActivityItem[] = [
   {
     id: '1',
     type: 'user',
-    message: 'New user registered: john.doe@example.com',
-    timestamp: new Date(Date.now() - 5 * 60 * 1000),
-    user: 'System'
+    message: 'New customer order placed: $342.50',
+    timestamp: new Date(Date.now() - 2 * 60 * 1000),
+    user: 'Order System'
   },
   {
     id: '2',
-    type: 'security',
-    message: 'Failed login attempt detected',
-    timestamp: new Date(Date.now() - 15 * 60 * 1000),
-    user: 'Security Monitor'
+    type: 'content',
+    message: 'Product "Summer Collection 2024" launched',
+    timestamp: new Date(Date.now() - 8 * 60 * 1000),
+    user: 'Product Team'
   },
   {
     id: '3',
-    type: 'content',
-    message: 'Blog post published: "Getting Started Guide"',
-    timestamp: new Date(Date.now() - 30 * 60 * 1000),
-    user: 'content.manager'
+    type: 'user',
+    message: 'Premium subscription activated: emma.clark@example.com',
+    timestamp: new Date(Date.now() - 15 * 60 * 1000),
+    user: 'Billing System'
   },
   {
     id: '4',
     type: 'system',
-    message: 'Database backup completed successfully',
-    timestamp: new Date(Date.now() - 60 * 60 * 1000),
-    user: 'System'
+    message: 'Daily revenue report generated: $24,892',
+    timestamp: new Date(Date.now() - 25 * 60 * 1000),
+    user: 'Analytics Engine'
   },
   {
     id: '5',
     type: 'user',
-    message: 'User updated profile: sarah.wilson@example.com',
-    timestamp: new Date(Date.now() - 90 * 60 * 1000),
-    user: 'sarah.wilson'
+    message: 'Customer support ticket resolved #8429',
+    timestamp: new Date(Date.now() - 35 * 60 * 1000),
+    user: 'Support Team'
   },
   {
     id: '6',
-    type: 'error',
-    message: 'Payment processing error for order #12847',
-    timestamp: new Date(Date.now() - 120 * 60 * 1000),
-    user: 'Payment System'
+    type: 'security',
+    message: 'Weekly security scan completed - no issues found',
+    timestamp: new Date(Date.now() - 45 * 60 * 1000),
+    user: 'Security Monitor'
   }
 ];
 
@@ -118,26 +118,26 @@ const mockAlerts: AlertItem[] = [
   {
     id: '1',
     severity: 'critical',
-    title: 'High CPU Usage',
-    description: 'Server CPU usage has exceeded 90% for the last 5 minutes',
-    timestamp: new Date(Date.now() - 10 * 60 * 1000),
-    onResolve: () => console.log('Resolving CPU alert')
+    title: 'Payment Gateway Error',
+    description: 'Multiple payment failures detected in the last hour',
+    timestamp: new Date(Date.now() - 8 * 60 * 1000),
+    onResolve: () => console.log('Resolving payment gateway alert')
   },
   {
     id: '2',
     severity: 'medium',
-    title: 'Low Disk Space',
-    description: 'Database server disk usage is at 85%',
-    timestamp: new Date(Date.now() - 30 * 60 * 1000),
-    onResolve: () => console.log('Resolving disk space alert')
+    title: 'Inventory Low',
+    description: '5 products are running low on stock',
+    timestamp: new Date(Date.now() - 20 * 60 * 1000),
+    onResolve: () => console.log('Resolving inventory alert')
   },
   {
     id: '3',
     severity: 'low',
-    title: 'SSL Certificate Expiring',
-    description: 'SSL certificate will expire in 30 days',
-    timestamp: new Date(Date.now() - 60 * 60 * 1000),
-    onResolve: () => console.log('Resolving SSL alert')
+    title: 'API Rate Limit Warning',
+    description: 'Third-party API usage at 75% of daily limit',
+    timestamp: new Date(Date.now() - 40 * 60 * 1000),
+    onResolve: () => console.log('Resolving API rate limit alert')
   }
 ];
 
@@ -148,8 +148,8 @@ export const AdminDashboardShowcase: React.FC = () => {
 
   return (
     <AdminDashboardTemplate
-      title="System Overview"
-      description="Monitor key metrics, system health, and recent activity"
+      title="Business Dashboard"
+      description="Monitor revenue, orders, customers, and operational health"
       metrics={mockMetrics}
       charts={mockCharts}
       activities={mockActivities}
@@ -159,10 +159,12 @@ export const AdminDashboardShowcase: React.FC = () => {
       actions={
         <div className="flex gap-2">
           <button className="px-3 py-2 text-sm border border-input rounded-md hover:bg-muted">
+            <Calendar className="w-4 h-4 mr-2 inline" />
             Export Report
           </button>
-          <button className="px-3 py-2 text-sm bg-category-1 text-white rounded-md hover:bg-category-1/90">
-            View Analytics
+          <button className="px-3 py-2 text-sm bg-category-2 text-white rounded-md hover:bg-category-2/90">
+            <CreditCard className="w-4 h-4 mr-2 inline" />
+            View Transactions
           </button>
         </div>
       }