@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/src/templates/financial/FinancialDashboardTemplate.tsx

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

package/src/templates/index.ts

@@ -28,6 +28,10 @@ export {
 // Admin templates for administrative interfaces
 export * from './admin';
 
+// Entity templates for cross-domain configurable layouts
+// TODO: Fix TypeScript errors in entity templates before uncommenting
+// export * from './entity';
+
 // React App Factory
 export { 
   createReactApp,