@pattern-stack/frontend-patterns 0.0.6 → 0.1.1

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

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

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

package/src/templates/entity/index.ts

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

package/src/templates/financial/FinancialDashboardTemplate.tsx

@@ -1,326 +0,0 @@
-import React from 'react';
-import { cn } from '../../atoms/utils/utils';
-import { SectionHeader } from '../../molecules/layout/SectionHeader';
-import { Card } from '../../atoms/ui/card';
-import { StatCard } from '../../atoms/composed/StatCard';
-import { DashboardGrid } from '../DashboardTemplate';
-import { DataBadge } from '../../atoms/composed/DataBadge';
-import { TrendingUp, TrendingDown, DollarSign, PiggyBank, Target, AlertTriangle } from 'lucide-react';
-
-export interface FinancialOverviewProps {
-  /** Total account balance */
-  totalBalance: number;
-  /** Monthly income */
-  monthlyIncome?: number;
-  /** Monthly expenses */
-  monthlyExpenses?: number;
-  /** Net worth change */
-  netWorthChange?: {
-    amount: number;
-    percentage: number;
-    period: string;
-  };
-  /** Savings rate */
-  savingsRate?: number;
-  /** Budget utilization */
-  budgetUtilization?: number;
-}
-
-export interface AccountSummary {
-  id: string;
-  name: string;
-  type: 'checking' | 'savings' | 'credit' | 'investment' | 'loan';
-  balance: number;
-  change?: {
-    amount: number;
-    percentage: number;
-  };
-  status?: 'healthy' | 'warning' | 'critical';
-}
-
-export interface BudgetAlert {
-  id: string;
-  category: string;
-  spent: number;
-  budget: number;
-  severity: 'warning' | 'critical';
-}
-
-export interface FinancialGoal {
-  id: string;
-  name: string;
-  target: number;
-  current: number;
-  deadline?: string;
-  status: 'on-track' | 'behind' | 'achieved';
-}
-
-export interface FinancialDashboardTemplateProps {
-  /** Page title */
-  title?: string;
-  /** Page description */
-  description?: string;
-  /** Financial overview metrics */
-  overview: FinancialOverviewProps;
-  /** Account summaries */
-  accounts?: AccountSummary[];
-  /** Budget alerts */
-  budgetAlerts?: BudgetAlert[];
-  /** Financial goals */
-  goals?: FinancialGoal[];
-  /** Recent transactions preview */
-  recentTransactions?: Array<{
-    id: string;
-    description: string;
-    amount: number;
-    category: string;
-    date: string;
-  }>;
-  /** Header actions */
-  actions?: React.ReactNode;
-  /** Additional content */
-  children?: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-  /** Category-based styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Loading state */
-  isLoading?: boolean;
-}
-
-export const FinancialDashboardTemplate: React.FC<FinancialDashboardTemplateProps> = ({
-  title = "Financial Dashboard",
-  description = "Your complete financial overview",
-  overview,
-  accounts = [],
-  budgetAlerts = [],
-  goals = [],
-  recentTransactions = [],
-  actions,
-  children,
-  className,
-  category = 2, // Green theme for financial
-  isLoading = false
-}) => {
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(amount);
-  };
-
-  const getAccountIcon = (type: AccountSummary['type']) => {
-    switch (type) {
-      case 'savings': return <PiggyBank className="w-4 h-4" />;
-      case 'investment': return <TrendingUp className="w-4 h-4" />;
-      case 'credit': return <AlertTriangle className="w-4 h-4" />;
-      default: return <DollarSign className="w-4 h-4" />;
-    }
-  };
-
-  const getAccountStatus = (account: AccountSummary) => {
-    if (account.type === 'credit' && account.balance > 0) return 'warning';
-    if (account.type === 'loan' && account.balance > 0) return 'error';
-    return account.status || 'success';
-  };
-
-  return (
-    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
-      {/* Header Section */}
-      <div className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container mx-auto px-6 py-6">
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              <SectionHeader
-                title={title}
-                description={description}
-                size="lg"
-                className="text-left"
-              />
-            </div>
-            
-            {actions && (
-              <div className="ml-6 flex-shrink-0">
-                {actions}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 min-h-0 overflow-auto">
-        <div className="container mx-auto px-6 py-6 space-y-6">
-          {/* Financial Overview */}
-          <div>
-            <h2 className="text-lg font-semibold mb-4">Financial Overview</h2>
-            <DashboardGrid columns={4} gap="md">
-              <StatCard
-                title="Total Balance"
-                value={formatCurrency(overview.totalBalance)}
-                icon={<DollarSign className="w-5 h-5" />}
-                category={category}
-                isLoading={isLoading}
-              />
-              
-              {overview.monthlyIncome && (
-                <StatCard
-                  title="Monthly Income"
-                  value={formatCurrency(overview.monthlyIncome)}
-                  icon={<TrendingUp className="w-5 h-5" />}
-                  category={category}
-                  isLoading={isLoading}
-                />
-              )}
-              
-              {overview.monthlyExpenses && (
-                <StatCard
-                  title="Monthly Expenses"
-                  value={formatCurrency(overview.monthlyExpenses)}
-                  icon={<TrendingDown className="w-5 h-5" />}
-                  category={category}
-                  isLoading={isLoading}
-                />
-              )}
-              
-              {overview.savingsRate && (
-                <StatCard
-                  title="Savings Rate"
-                  value={`${overview.savingsRate}%`}
-                  icon={<Target className="w-5 h-5" />}
-                  category={category}
-                  isLoading={isLoading}
-                />
-              )}
-            </DashboardGrid>
-          </div>
-
-          {/* Accounts Overview */}
-          {accounts.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold mb-4">Accounts</h2>
-              <DashboardGrid columns={2} gap="md">
-                {accounts.map((account) => (
-                  <Card key={account.id} category={category} className="p-4">
-                    <div className="flex items-start justify-between">
-                      <div className="flex items-center gap-3">
-                        {getAccountIcon(account.type)}
-                        <div>
-                          <h3 className="font-medium">{account.name}</h3>
-                          <p className="text-sm text-muted-foreground capitalize">{account.type}</p>
-                        </div>
-                      </div>
-                      <div className="text-right">
-                        <p className="font-semibold">{formatCurrency(account.balance)}</p>
-                        {account.change && (
-                          <div className="flex items-center gap-1 text-sm">
-                            {account.change.amount > 0 ? (
-                              <TrendingUp className="w-3 h-3 text-green-500" />
-                            ) : (
-                              <TrendingDown className="w-3 h-3 text-red-500" />
-                            )}
-                            <span className={account.change.amount > 0 ? 'text-green-500' : 'text-red-500'}>
-                              {Math.abs(account.change.percentage)}%
-                            </span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <div className="mt-3">
-                      <DataBadge 
-                        variant="status" 
-                        status={getAccountStatus(account)}
-                      >
-                        {account.status || 'healthy'}
-                      </DataBadge>
-                    </div>
-                  </Card>
-                ))}
-              </DashboardGrid>
-            </div>
-          )}
-
-          {/* Budget Alerts */}
-          {budgetAlerts.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold mb-4">Budget Alerts</h2>
-              <div className="space-y-3">
-                {budgetAlerts.map((alert) => (
-                  <Card key={alert.id} className="p-4">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <AlertTriangle className={cn(
-                          "w-5 h-5",
-                          alert.severity === 'critical' ? 'text-red-500' : 'text-yellow-500'
-                        )} />
-                        <div>
-                          <h3 className="font-medium">{alert.category}</h3>
-                          <p className="text-sm text-muted-foreground">
-                            {formatCurrency(alert.spent)} of {formatCurrency(alert.budget)} spent
-                          </p>
-                        </div>
-                      </div>
-                      <div className="text-right">
-                        <DataBadge 
-                          variant="status" 
-                          status={alert.severity === 'critical' ? 'error' : 'warning'}
-                        >
-                          {Math.round((alert.spent / alert.budget) * 100)}% used
-                        </DataBadge>
-                      </div>
-                    </div>
-                  </Card>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Financial Goals */}
-          {goals.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold mb-4">Financial Goals</h2>
-              <DashboardGrid columns={1} gap="md">
-                {goals.map((goal) => {
-                  const progress = (goal.current / goal.target) * 100;
-                  return (
-                    <Card key={goal.id} category={category} className="p-4">
-                      <div className="flex items-start justify-between mb-3">
-                        <div>
-                          <h3 className="font-medium">{goal.name}</h3>
-                          <p className="text-sm text-muted-foreground">
-                            {formatCurrency(goal.current)} of {formatCurrency(goal.target)}
-                          </p>
-                        </div>
-                        <DataBadge 
-                          variant="status" 
-                          status={goal.status === 'achieved' ? 'success' : goal.status === 'behind' ? 'warning' : 'info'}
-                        >
-                          {goal.status}
-                        </DataBadge>
-                      </div>
-                      <div className="w-full bg-muted rounded-full h-2">
-                        <div 
-                          className={cn(
-                            'h-2 rounded-full transition-all',
-                            `bg-category-${category}`
-                          )}
-                          style={{ width: `${Math.min(progress, 100)}%` }}
-                        />
-                      </div>
-                      <p className="text-sm text-muted-foreground mt-2">
-                        {Math.round(progress)}% complete
-                      </p>
-                    </Card>
-                  );
-                })}
-              </DashboardGrid>
-            </div>
-          )}
-
-          {/* Additional Content */}
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};