@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/src/templates/entity/EntityPerformanceDashboardTemplate.tsx

@@ -0,0 +1,277 @@
+import React from 'react';
+import { AppLayout } from '../../molecules/layout/AppLayout';
+import { PageTemplate } from '../../molecules/layout/PageTemplate';
+import { SectionHeader } from '../../molecules/layout/SectionHeader';
+import { 
+  MetricsOverviewPanel, 
+  MetricsOverviewWithInsightsPanel,
+  TrendAnalysisPanel,
+  CategoryBreakdownPanel 
+} from '../../organisms/entity';
+import type { EntityTemplateConfig, EntityData, MetricValue, ActionConfig, MetricConfig } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+
+export interface EntityPerformanceDashboardTemplateProps<T extends EntityData> {
+  config: EntityTemplateConfig<T>;
+  data: T[];
+  previousData?: T[];
+  isLoading?: boolean;
+  className?: string;
+  
+  // Layout configuration
+  layout?: 'standard' | 'compact' | 'detailed';
+  showInsights?: boolean;
+  showTrends?: boolean;
+  showCategories?: boolean;
+  
+  // Extension points - Render Props
+  renderCustomActions?: () => React.ReactNode;
+  renderAdditionalMetrics?: () => React.ReactNode;
+  renderCustomTrendChart?: (config: EntityTemplateConfig<T>, data: T[]) => React.ReactNode;
+  renderCustomCategoryView?: (config: EntityTemplateConfig<T>, data: T[]) => React.ReactNode;
+  
+  // Extension points - Slots
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  metricsHeaderSlot?: React.ReactNode;
+  metricsFooterSlot?: React.ReactNode;
+  trendsHeaderSlot?: React.ReactNode;
+  trendsFooterSlot?: React.ReactNode;
+  categoriesHeaderSlot?: React.ReactNode;
+  categoriesFooterSlot?: React.ReactNode;
+  
+  // Event handlers
+  onMetricClick?: (metric: MetricConfig, value: MetricValue) => void;
+  onCategoryClick?: (category: unknown) => void;
+  onTrendPeriodChange?: (period: string) => void;
+  onActionClick?: (action: ActionConfig, context: T[]) => void;
+  onRefresh?: () => void;
+  onExport?: (type: 'metrics' | 'trends' | 'categories', data: unknown) => void;
+}
+
+export const EntityPerformanceDashboardTemplate = <T extends EntityData>({
+  config,
+  data,
+  previousData,
+  isLoading = false,
+  className,
+  layout = 'standard',
+  showInsights = true,
+  showTrends = true,
+  showCategories = true,
+  renderCustomActions,
+  renderAdditionalMetrics,
+  renderCustomTrendChart,
+  renderCustomCategoryView,
+  headerSlot,
+  footerSlot,
+  metricsHeaderSlot,
+  metricsFooterSlot,
+  trendsHeaderSlot,
+  trendsFooterSlot,
+  categoriesHeaderSlot,
+  categoriesFooterSlot,
+  onMetricClick,
+  onCategoryClick,
+  onTrendPeriodChange,
+  onExport
+}: EntityPerformanceDashboardTemplateProps<T>) => {
+  
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case 'compact':
+        return 'space-y-4';
+      case 'detailed':
+        return 'space-y-8';
+      case 'standard':
+      default:
+        return 'space-y-6';
+    }
+  };
+
+  const renderPageHeader = () => {
+    return (
+      <SectionHeader
+        title={config.display.title}
+        description={config.display.description}
+        category={config.display.category}
+        actions={renderCustomActions ? renderCustomActions() : undefined}
+      />
+    );
+  };
+
+  const renderMetricsSection = () => {
+    if (!config.metrics.length) return null;
+
+    const MetricsComponent = showInsights ? MetricsOverviewWithInsightsPanel : MetricsOverviewPanel;
+
+    return (
+      <section className="space-y-4">
+        {metricsHeaderSlot}
+        <MetricsComponent
+          metrics={config.metrics}
+          data={data}
+          previousData={previousData}
+          isLoading={isLoading}
+          onMetricClick={onMetricClick}
+          category={config.display.category}
+          columns={layout === 'compact' ? 2 : layout === 'detailed' ? 4 : 3}
+          headerSlot={renderAdditionalMetrics ? renderAdditionalMetrics() : undefined}
+        />
+        {metricsFooterSlot}
+      </section>
+    );
+  };
+
+  const renderTrendsSection = () => {
+    if (!showTrends || !config.temporal || !config.metrics.length) return null;
+
+    if (renderCustomTrendChart) {
+      const customChart = renderCustomTrendChart(config, data);
+      if (customChart) {
+        return (
+          <section className="space-y-4">
+            {trendsHeaderSlot}
+            {customChart}
+            {trendsFooterSlot}
+          </section>
+        );
+      }
+    }
+
+    return (
+      <section className="space-y-4">
+        {trendsHeaderSlot}
+        <TrendAnalysisPanel
+          metrics={config.metrics}
+          data={data}
+          temporal={config.temporal}
+          isLoading={isLoading}
+          category={config.display.category}
+          enablePeriodSelection={true}
+          enableChartTypeSelection={layout === 'detailed'}
+          showComparisons={layout !== 'compact'}
+          onPeriodChange={onTrendPeriodChange}
+          onExport={(chartData, metric) => onExport?.('trends', { chartData, metric })}
+        />
+        {trendsFooterSlot}
+      </section>
+    );
+  };
+
+  const renderCategoriesSection = () => {
+    if (!showCategories || !config.categories || !data.length) return null;
+
+    // Find a suitable value field from metrics or use first numeric field
+    const valueField = config.metrics.find(m => m.type === 'currency' || m.type === 'count')?.key || 
+                     Object.keys(data[0]).find(key => typeof data[0][key] === 'number') || 
+                     'value';
+
+    if (renderCustomCategoryView) {
+      const customView = renderCustomCategoryView(config, data);
+      if (customView) {
+        return (
+          <section className="space-y-4">
+            {categoriesHeaderSlot}
+            {customView}
+            {categoriesFooterSlot}
+          </section>
+        );
+      }
+    }
+
+    return (
+      <section className="space-y-4">
+        {categoriesHeaderSlot}
+        <CategoryBreakdownPanel
+          data={data}
+          categoryConfig={config.categories}
+          valueField={valueField}
+          isLoading={isLoading}
+          category={config.display.category}
+          title={`${config.display.title} by ${config.categories.defaultGroupBy}`}
+          defaultView={layout === 'compact' ? 'list' : 'both'}
+          enableDrillDown={config.categories.enableDrillDown}
+          onCategoryClick={onCategoryClick}
+          onExport={(categoryData) => onExport?.('categories', categoryData)}
+        />
+        {categoriesFooterSlot}
+      </section>
+    );
+  };
+
+  const renderLayoutContent = () => {
+    const sections = [
+      renderMetricsSection(),
+      renderTrendsSection(),
+      renderCategoriesSection()
+    ].filter(Boolean);
+
+    if (layout === 'detailed' && sections.length > 1) {
+      // For detailed layout, use a grid for trends and categories
+      const [metricsSection, ...otherSections] = sections;
+      
+      return (
+        <div className={getLayoutClasses()}>
+          {metricsSection}
+          
+          {otherSections.length > 0 && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {otherSections}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className={getLayoutClasses()}>
+        {sections}
+      </div>
+    );
+  };
+
+  return (
+    <AppLayout>
+      <PageTemplate
+        className={cn('container mx-auto px-4 py-6', className)}
+        data-component-name="EntityPerformanceDashboardTemplate"
+      >
+        {headerSlot}
+        {renderPageHeader()}
+        {renderLayoutContent()}
+        {footerSlot}
+      </PageTemplate>
+    </AppLayout>
+  );
+};
+
+// Enhanced version with real-time updates
+export interface EntityPerformanceDashboardTemplateWithRealTimeProps<T extends EntityData> 
+  extends EntityPerformanceDashboardTemplateProps<T> {
+  enableRealTime?: boolean;
+  refreshInterval?: number;
+  onDataUpdate?: (newData: T[]) => void;
+}
+
+export const EntityPerformanceDashboardTemplateWithRealTime = <T extends EntityData>({
+  enableRealTime = false,
+  refreshInterval = 30000, // 30 seconds
+  onDataUpdate,
+  ...props
+}: EntityPerformanceDashboardTemplateWithRealTimeProps<T>) => {
+  React.useEffect(() => {
+    if (!enableRealTime) return;
+
+    const interval = setInterval(() => {
+      if (onDataUpdate) {
+        // This would typically fetch new data from an API
+        onDataUpdate(props.data);
+      }
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [enableRealTime, refreshInterval, onDataUpdate, props.data]);
+
+  return <EntityPerformanceDashboardTemplate {...props} />;
+};

package/src/templates/entity/configs/financial-config.ts

@@ -0,0 +1,141 @@
+import type { EntityTemplateConfig, EntityData } from '../../../atoms/types';
+import { DollarSign, Target, TrendingUp, Wallet } from 'lucide-react';
+
+export interface FinancialTransaction extends EntityData {
+  id: string;
+  amount: number;
+  category: string;
+  account: string;
+  date: string;
+  description: string;
+  type: 'income' | 'expense' | 'transfer';
+  status: 'completed' | 'pending' | 'failed';
+}
+
+export const financialConfig: EntityTemplateConfig<FinancialTransaction> = {
+  entityType: 'transactional',
+  display: {
+    title: 'Financial Dashboard',
+    description: 'Personal finance overview and transaction management',
+    category: 2 // Green theme for financial success
+  },
+  metrics: [
+    {
+      key: 'totalBalance',
+      label: 'Total Balance',
+      type: 'currency',
+      trend: true,
+      icon: DollarSign,
+      aggregation: 'sum'
+    },
+    {
+      key: 'monthlyIncome',
+      label: 'Monthly Income',
+      type: 'currency',
+      trend: true,
+      icon: TrendingUp,
+      aggregation: 'sum'
+    },
+    {
+      key: 'monthlyExpenses',
+      label: 'Monthly Expenses', 
+      type: 'currency',
+      trend: true,
+      icon: Wallet,
+      aggregation: 'sum'
+    },
+    {
+      key: 'savingsRate',
+      label: 'Savings Rate',
+      type: 'percentage',
+      target: 20,
+      icon: Target
+    }
+  ],
+  temporal: {
+    cycles: ['monthly', 'quarterly', 'yearly'],
+    defaultCycle: 'monthly',
+    enableComparisons: true,
+    forecasting: {
+      enabled: true,
+      periods: 3,
+      algorithm: 'seasonal'
+    }
+  },
+  categories: {
+    hierarchy: ['account', 'category', 'type'],
+    defaultGroupBy: 'category',
+    enableDrillDown: true,
+    colorCoding: true
+  },
+  actions: [
+    {
+      label: 'Add Transaction',
+      type: 'primary',
+      onClick: ({ data, config }) => {
+        console.log('Adding new transaction', { data, config });
+      }
+    },
+    {
+      label: 'Generate Report',
+      type: 'secondary', 
+      onClick: ({ selectedItems, data, config }) => {
+        console.log('Generating report', { selectedItems, data, config });
+      }
+    }
+  ]
+};
+
+// Sample financial data for testing
+export const sampleFinancialData: FinancialTransaction[] = [
+  {
+    id: '1',
+    amount: 5000,
+    category: 'Salary',
+    account: 'Checking',
+    date: '2024-01-15',
+    description: 'Monthly salary',
+    type: 'income',
+    status: 'completed'
+  },
+  {
+    id: '2', 
+    amount: -1200,
+    category: 'Rent',
+    account: 'Checking',
+    date: '2024-01-01',
+    description: 'Monthly rent payment',
+    type: 'expense',
+    status: 'completed'
+  },
+  {
+    id: '3',
+    amount: -300,
+    category: 'Groceries',
+    account: 'Checking', 
+    date: '2024-01-10',
+    description: 'Weekly groceries',
+    type: 'expense',
+    status: 'completed'
+  },
+  {
+    id: '4',
+    amount: -80,
+    category: 'Utilities',
+    account: 'Checking',
+    date: '2024-01-05',
+    description: 'Electric bill',
+    type: 'expense', 
+    status: 'completed'
+  },
+  {
+    id: '5',
+    amount: -45,
+    category: 'Entertainment',
+    account: 'Checking',
+    date: '2024-01-12',
+    description: 'Movie tickets',
+    type: 'expense',
+    status: 'completed'
+  }
+];

package/src/templates/entity/configs/index.ts

@@ -0,0 +1 @@
+export * from './financial-config';

package/src/templates/entity/index.ts

@@ -0,0 +1,3 @@
+export * from './EntityPerformanceDashboardTemplate';
+export * from './EntityManagementTemplate';
+export * from './configs';

package/src/templates/factory.tsx

@@ -2,13 +2,12 @@ import React from 'react'
 import type { ReactNode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { AuthProvider } from '../features/auth'
-import { SidebarProvider } from '../molecules/layout'
+import { SidebarProvider, NavigationProvider } from '../molecules/layout'
 import { AppLayout } from '../molecules/layout'
 import { DashboardTemplate } from './DashboardTemplate'
-import type { AuthConfig } from '../atoms/types'
+import type { AuthConfig, NavigationConfig } from '../atoms/types'
 
 // App configuration interface
 export interface AppConfig {
@@ -24,6 +23,7 @@ export interface AppConfig {
   theme?: string
   darkMode?: boolean
   auth?: AuthConfig
+  navigation?: NavigationConfig
   customProviders?: React.ComponentType<{ children: ReactNode }>[]
 }
 
@@ -50,6 +50,7 @@ export function createReactApp(config: AppConfig | string): AppInstance {
     enableQuery = true,
     enableRouting = true,
     auth,
+    navigation,
     customProviders = []
   } = appConfig
 
@@ -94,9 +95,11 @@ export function createReactApp(config: AppConfig | string): AppInstance {
     // Wrap with layout providers
     if (enableRouting) {
       tree = (
-        <SidebarProvider>
-          {tree}
-        </SidebarProvider>
+        <NavigationProvider initialNavigation={navigation}>
+          <SidebarProvider>
+            {tree}
+          </SidebarProvider>
+        </NavigationProvider>
       )
     }
 
@@ -110,7 +113,11 @@ export function createReactApp(config: AppConfig | string): AppInstance {
       tree = (
         <QueryClientProvider client={queryClient}>
           {tree}
-          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+          {import.meta.env.DEV && (
+            import('@tanstack/react-query-devtools').then(({ ReactQueryDevtools }) => (
+              <ReactQueryDevtools initialIsOpen={false} />
+            ))
+          )}
         </QueryClientProvider>
       )
     }