@pattern-stack/frontend-patterns 0.0.6 → 0.1.1

package/src/organisms/entity/TrendAnalysisPanel.tsx

@@ -1,337 +0,0 @@
-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

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

package/src/pages/AdminShowcase/SalesPerformanceDashboard.tsx

@@ -1,158 +0,0 @@
-import React, { useState } from 'react';
-import { DashboardWithSidePanel } from '../../molecules/layout';
-import { SalesPanel } from '../../atoms/composed/SalesPanel';
-import { DataTable, StatCard, Chart } from '../../atoms/composed';
-import { Card } from '../../atoms/ui/card';
-import { mockSalesData } from '../../atoms/composed/SalesPanel/mockSalesData';
-import { Button } from '../../atoms/ui/button';
-import { Eye, Filter, Calendar, TrendingUp, Users, Target, DollarSign } from 'lucide-react';
-
-
-// Mock data for main dashboard
-const salesMetrics = [
-  { title: 'Total Revenue', value: '$1.2M', trend: { value: 15.3, label: 'from last month' }, icon: <DollarSign className="w-5 h-5" />, category: 2 as const },
-  { title: 'Deals Closed', value: '47', trend: { value: 12.8, label: 'from last month' }, icon: <Target className="w-5 h-5" />, category: 3 as const },
-  { title: 'Conversion Rate', value: '24.5%', trend: { value: -2.1, label: 'from last month' }, icon: <TrendingUp className="w-5 h-5" />, category: 1 as const },
-  { title: 'Active Prospects', value: '156', trend: { value: 8.7, label: 'from last month' }, icon: <Users className="w-5 h-5" />, category: 4 as const }
-];
-
-const salesTrendData = [
-  { label: 'Jan', value: 85000 },
-  { label: 'Feb', value: 92000 },
-  { label: 'Mar', value: 108000 },
-  { label: 'Apr', value: 125000 },
-  { label: 'May', value: 118000 },
-  { label: 'Jun', value: 135000 }
-];
-
-const allSalesColumns = [
-  { key: 'customer', header: 'Customer', render: (value: string) => <div className="font-medium">{value}</div> },
-  { key: 'product', header: 'Product', render: (value: string) => <div className="text-sm">{value}</div> },
-  { key: 'amount', header: 'Value', render: (value: number) => <div className="font-semibold text-green-600">${value.toLocaleString()}</div> },
-  { key: 'stage', header: 'Stage', render: (value: string) => <span className="text-sm">{value}</span> },
-  { key: 'salesperson', header: 'Sales Rep', render: (value: string) => <div className="text-sm">{value}</div> },
-  { key: 'region', header: 'Region', render: (value: string) => <div className="text-sm">{value}</div> }
-];
-
-export const SalesPerformanceDashboard: React.FC = () => {
-  const [showSidePanel, setShowSidePanel] = useState(true);
-
-  const handleSaleClick = (sale: any) => {
-    console.log('Deal selected:', sale);
-  };
-
-  return (
-    <DashboardWithSidePanel
-      showSidePanel={showSidePanel}
-      sidePanel={
-        <SalesPanel
-          sales={mockSalesData}
-          onSaleClick={handleSaleClick}
-          onClose={() => setShowSidePanel(false)}
-        />
-      }
-    >
-      <div className="p-6 space-y-6">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold">Sales Performance</h1>
-            <p className="text-muted-foreground">Monitor sales metrics, team performance, and revenue trends</p>
-          </div>
-          <div className="flex gap-2">
-            <Button 
-              variant="outline" 
-              size="sm"
-              onClick={() => setShowSidePanel(!showSidePanel)}
-            >
-              <Eye className="w-4 h-4 mr-2" />
-              {showSidePanel ? 'Hide' : 'Show'} Pipeline
-            </Button>
-            <Button variant="outline" size="sm">
-              <Filter className="w-4 h-4 mr-2" />
-              Filter by Region
-            </Button>
-            <Button variant="outline" size="sm">
-              <Calendar className="w-4 h-4 mr-2" />
-              Date Range
-            </Button>
-          </div>
-        </div>
-
-        {/* Metrics */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {salesMetrics.map((metric, index) => (
-            <StatCard
-              key={index}
-              title={metric.title}
-              value={metric.value}
-              trend={metric.trend}
-              icon={metric.icon}
-              category={metric.category}
-            />
-          ))}
-        </div>
-
-        {/* Charts */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <Card className="p-6">
-            <Chart
-              title="Revenue Trend"
-              type="line"
-              data={salesTrendData}
-              category={2}
-              noWrapper={true}
-            />
-          </Card>
-          
-          <Card className="p-6">
-            <h3 className="font-semibold mb-4">Sales by Region</h3>
-            <div className="space-y-3">
-              <div className="flex justify-between items-center">
-                <span>North America</span>
-                <div className="flex items-center gap-2">
-                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
-                    <div className="w-3/5 h-full bg-category-2 rounded-full"></div>
-                  </div>
-                  <span className="text-sm font-medium">$750K</span>
-                </div>
-              </div>
-              <div className="flex justify-between items-center">
-                <span>Europe</span>
-                <div className="flex items-center gap-2">
-                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
-                    <div className="w-2/5 h-full bg-category-1 rounded-full"></div>
-                  </div>
-                  <span className="text-sm font-medium">$320K</span>
-                </div>
-              </div>
-              <div className="flex justify-between items-center">
-                <span>Asia Pacific</span>
-                <div className="flex items-center gap-2">
-                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
-                    <div className="w-1/4 h-full bg-category-3 rounded-full"></div>
-                  </div>
-                  <span className="text-sm font-medium">$130K</span>
-                </div>
-              </div>
-            </div>
-          </Card>
-        </div>
-
-        {/* Detailed Sales Table */}
-        <Card className="p-6">
-          <h3 className="font-semibold mb-4">All Sales Opportunities</h3>
-          <DataTable
-            data={mockSalesData}
-            columns={allSalesColumns}
-            showSearch={true}
-            searchPlaceholder="Search deals, customers, or products..."
-            onRowClick={handleSaleClick}
-          />
-        </Card>
-      </div>
-    </DashboardWithSidePanel>
-  );
-};
-
-export default SalesPerformanceDashboard;

package/src/pages/EntityShowcase/EntityManagementShowcase.tsx

@@ -1,137 +0,0 @@
-import React, { useState } from 'react';
-import { EntityListPanel } from '../../organisms/entity';
-import { financialConfig, sampleFinancialData, type FinancialTransaction } from '../../templates/entity/configs/financial-config';
-import { ShowcaseSection } from '../../molecules/layout/ShowcaseSection';
-import { IconBadge } from '../../atoms/composed/IconBadge';
-import { Switch } from '../../atoms/ui/Switch';
-import { Button } from '../../atoms/ui/button';
-import { Database, Filter, Search, Download, Plus, Layers } from 'lucide-react';
-
-export const EntityManagementShowcase: React.FC = () => {
-  const [enableSearch, setEnableSearch] = useState(true);
-  const [enableFiltering, setEnableFiltering] = useState(true);
-  const [enableBulkActions, setEnableBulkActions] = useState(true);
-  const [enableExport, setEnableExport] = useState(true);
-  
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
-        <div className="flex items-center justify-between mb-12">
-          <div className="flex items-center space-x-4">
-            <IconBadge 
-              variant="category" 
-              category={7} 
-              size="lg" 
-              icon={<Database className="w-6 h-6" />}
-            />
-            <div>
-              <h1 className="text-4xl font-bold text-foreground">Entity Management</h1>
-              <p className="text-lg text-muted-foreground mt-2">
-                Cross-domain template for CRUD operations with intelligent search, filtering, and bulk actions
-              </p>
-            </div>
-          </div>
-          
-          <div className="flex items-center space-x-3">
-            <Button variant="outline" size="sm">
-              <Plus className="w-4 h-4 mr-2" />
-              Add Transaction
-            </Button>
-            <div className="flex items-center gap-3 bg-card/80 backdrop-blur-sm border border-border/50 rounded px-3 py-2">
-              <Layers className="w-4 h-4 text-muted-foreground" />
-              <span className="text-sm font-medium text-foreground">Demo Mode</span>
-              <Switch checked={true} disabled />
-            </div>
-          </div>
-        </div>
-
-        {/* Feature Toggles */}
-        <div className="mb-8">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
-              <Search className="w-4 h-4 text-muted-foreground" />
-              <span className="text-sm font-medium text-foreground">Search</span>
-              <Switch
-                checked={enableSearch}
-                onCheckedChange={setEnableSearch}
-              />
-            </div>
-            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
-              <Filter className="w-4 h-4 text-muted-foreground" />
-              <span className="text-sm font-medium text-foreground">Filters</span>
-              <Switch
-                checked={enableFiltering}
-                onCheckedChange={setEnableFiltering}
-              />
-            </div>
-            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
-              <Database className="w-4 h-4 text-muted-foreground" />
-              <span className="text-sm font-medium text-foreground">Bulk Actions</span>
-              <Switch
-                checked={enableBulkActions}
-                onCheckedChange={setEnableBulkActions}
-              />
-            </div>
-            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
-              <Download className="w-4 h-4 text-muted-foreground" />
-              <span className="text-sm font-medium text-foreground">Export</span>
-              <Switch
-                checked={enableExport}
-                onCheckedChange={setEnableExport}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-12">
-          <ShowcaseSection
-            title="Entity List with Advanced Features"
-            description="Smart data table with domain-aware column rendering, search, filtering, and bulk operations"
-            badge={{
-              text: "Full Featured",
-              variant: "category",
-              category: 3
-            }}
-          >
-            <EntityListPanel
-              config={financialConfig}
-              data={sampleFinancialData}
-              isLoading={false}
-              enableSearch={enableSearch}
-              enableFiltering={enableFiltering}
-              enableBulkActions={enableBulkActions}
-              enableExport={enableExport}
-              onItemClick={(item: FinancialTransaction) => {
-                console.log('Item clicked:', item);
-              }}
-              onItemEdit={(item: FinancialTransaction) => {
-                console.log('Item edit:', item);
-              }}
-              onItemDelete={(item: FinancialTransaction) => {
-                console.log('Item delete:', item);
-              }}
-              onBulkAction={(action: string, items: FinancialTransaction[]) => {
-                console.log('Bulk action:', action, items);
-              }}
-              onSearch={(query: string) => {
-                console.log('Search:', query);
-              }}
-              onFilter={(filters: Record<string, any>) => {
-                console.log('Filter:', filters);
-              }}
-              onSort={(field: string, direction: 'asc' | 'desc') => {
-                console.log('Sort:', field, direction);
-              }}
-              onExport={(format: 'csv' | 'json' | 'xlsx') => {
-                console.log('Export:', format);
-                return Promise.resolve();
-              }}
-            />
-          </ShowcaseSection>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default EntityManagementShowcase;