@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/src/atoms/composed/SalesPanel/SalesPanel.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { DataBadge } from '../DataBadge';
+import { Button } from '../../ui/button';
+import { 
+  Target,
+  ExternalLink
+} from 'lucide-react';
+
+interface SalesPanelProps {
+  sales: Array<{
+    id: string;
+    customer: string;
+    product: string;
+    amount: number;
+    stage: string;
+    salesperson: string;
+    region: string;
+    closeDate: string;
+    dealSize: string;
+  }>;
+  onSaleClick?: (sale: any) => void;
+  onClose?: () => void;
+}
+
+const getStageStatus = (stage: string) => {
+  switch (stage) {
+    case 'Closed Won': return 'success';
+    case 'Negotiation': return 'warning'; 
+    case 'Proposal Sent': return 'info';
+    case 'Qualified': return 'info';
+    case 'Discovery': return 'neutral';
+    default: return 'neutral';
+  }
+};
+
+export const SalesPanel: React.FC<SalesPanelProps> = ({
+  sales,
+  onSaleClick,
+  onClose
+}) => {
+  const topDeals = sales.slice(0, 5); // Show only top 5 recent deals
+  const totalValue = sales.reduce((sum, sale) => sum + sale.amount, 0);
+
+  return (
+    <div className="fixed right-0 top-16 h-[calc(100vh-4rem)] w-72 bg-background border-l border-border shadow-lg flex flex-col z-30">
+      {/* Header */}
+      <div className="p-3 border-b border-border">
+        <div className="flex items-center justify-between">
+          <h3 className="font-medium flex items-center gap-2">
+            <Target className="w-4 h-4" />
+            Pipeline
+          </h3>
+          {onClose && (
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              ×
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Quick Stats */}
+      <div className="p-3 border-b border-border">
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <span className="text-sm text-muted-foreground">Total Value</span>
+            <span className="font-semibold text-green-600">${totalValue.toLocaleString()}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-sm text-muted-foreground">Active Deals</span>
+            <span className="font-semibold">{sales.length}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Recent Deals */}
+      <div className="flex-1 overflow-auto p-3">
+        <h4 className="text-sm font-medium mb-3">Recent Opportunities</h4>
+        <div className="space-y-2">
+          {topDeals.map((sale) => (
+            <div 
+              key={sale.id}
+              className="p-2 border border-border rounded-md hover:bg-muted/50 cursor-pointer transition-colors"
+              onClick={() => onSaleClick?.(sale)}
+            >
+              <div className="flex justify-between items-start mb-1">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{sale.customer}</p>
+                  <p className="text-xs text-muted-foreground truncate">{sale.product}</p>
+                </div>
+                <div className="text-right ml-2">
+                  <p className="text-sm font-semibold text-green-600">
+                    ${sale.amount.toLocaleString()}
+                  </p>
+                </div>
+              </div>
+              <div className="flex justify-between items-center">
+                <DataBadge variant="status" status={getStageStatus(sale.stage)}>
+                  {sale.stage}
+                </DataBadge>
+                <span className="text-xs text-muted-foreground">{sale.salesperson}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="p-3 border-t border-border">
+        <Button variant="outline" size="sm" className="w-full">
+          <ExternalLink className="w-4 h-4 mr-2" />
+          View All Deals
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/atoms/composed/SalesPanel/index.ts

@@ -0,0 +1 @@
+export { SalesPanel } from './SalesPanel';

package/src/atoms/composed/SalesPanel/mockSalesData.ts

@@ -0,0 +1,151 @@
+// Mock sales data for demonstrations
+export const mockSalesData = [
+  {
+    id: 'SALE-2024-001',
+    customer: 'TechCorp Industries',
+    product: 'Enterprise License',
+    amount: 45000,
+    stage: 'Closed Won',
+    salesperson: 'Sarah Chen',
+    region: 'North America',
+    closeDate: '2024-06-08',
+    dealSize: 'Large'
+  },
+  {
+    id: 'SALE-2024-002',
+    customer: 'StartupXYZ',
+    product: 'Professional Plan',
+    amount: 12000,
+    stage: 'Proposal Sent',
+    salesperson: 'Mike Johnson',
+    region: 'North America',
+    closeDate: '2024-06-15',
+    dealSize: 'Medium'
+  },
+  {
+    id: 'SALE-2024-003',
+    customer: 'Global Enterprises Ltd',
+    product: 'Enterprise Suite',
+    amount: 78000,
+    stage: 'Negotiation',
+    salesperson: 'Lisa Wang',
+    region: 'Europe',
+    closeDate: '2024-06-20',
+    dealSize: 'Large'
+  },
+  {
+    id: 'SALE-2024-004',
+    customer: 'Innovation Labs',
+    product: 'Starter Package',
+    amount: 5000,
+    stage: 'Qualified',
+    salesperson: 'David Kim',
+    region: 'Asia Pacific',
+    closeDate: '2024-06-25',
+    dealSize: 'Small'
+  },
+  {
+    id: 'SALE-2024-005',
+    customer: 'FutureTech Solutions',
+    product: 'Custom Integration',
+    amount: 95000,
+    stage: 'Discovery',
+    salesperson: 'Sarah Chen',
+    region: 'North America',
+    closeDate: '2024-07-01',
+    dealSize: 'Large'
+  }
+];
+
+// Sales configuration for entity template
+export const salesConfig = {
+  entityType: 'performance' as const,
+  display: {
+    title: 'Sales Performance',
+    subtitle: 'Monitor sales metrics, team performance, and revenue trends',
+    category: 3 as const
+  },
+  metrics: [
+    {
+      key: 'revenue',
+      label: 'Total Revenue',
+      type: 'currency' as const,
+      aggregate: 'sum',
+      showTrend: true,
+      category: 2
+    },
+    {
+      key: 'deals',
+      label: 'Deals Closed',
+      type: 'number' as const,
+      aggregate: 'count',
+      showTrend: true,
+      category: 3
+    },
+    {
+      key: 'conversion',
+      label: 'Conversion Rate',
+      type: 'percentage' as const,
+      aggregate: 'average',
+      showTrend: true,
+      category: 1
+    },
+    {
+      key: 'pipeline',
+      label: 'Pipeline Value',
+      type: 'currency' as const,
+      aggregate: 'sum',
+      showTrend: true,
+      category: 4
+    }
+  ],
+  categories: [
+    { key: 'region', label: 'By Region', type: 'categorical' },
+    { key: 'product', label: 'By Product', type: 'categorical' },
+    { key: 'stage', label: 'By Stage', type: 'categorical' }
+  ],
+  trends: {
+    periods: ['7d', '30d', '90d', '1y'],
+    defaultPeriod: '30d'
+  }
+};
+
+// Sample sales performance data
+export const salesPerformanceData = [
+  {
+    id: 'sale-1',
+    revenue: 45000,
+    deals: 12,
+    conversion: 0.24,
+    pipeline: 125000,
+    region: 'North America',
+    product: 'Enterprise',
+    stage: 'Closed Won',
+    date: '2024-06-01',
+    salesperson: 'Sarah Chen'
+  },
+  {
+    id: 'sale-2',
+    revenue: 32000,
+    deals: 8,
+    conversion: 0.18,
+    pipeline: 89000,
+    region: 'Europe',
+    product: 'Professional',
+    stage: 'Negotiation',
+    date: '2024-06-02',
+    salesperson: 'Mike Johnson'
+  },
+  {
+    id: 'sale-3',
+    revenue: 67000,
+    deals: 15,
+    conversion: 0.31,
+    pipeline: 156000,
+    region: 'Asia Pacific',
+    product: 'Enterprise',
+    stage: 'Closed Won',
+    date: '2024-06-03',
+    salesperson: 'Lisa Wang'
+  }
+];

package/src/atoms/composed/index.ts

@@ -1,5 +1,6 @@
 // Business-specific shared components
 export { DataBadge } from './DataBadge';
+export { SalesPanel } from './SalesPanel';
 export { StatCard } from './StatCard';
 export { DetailedCard } from './DetailedCard';
 export { EmptyState } from './EmptyState';

package/src/atoms/types/entity-config.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+
+export type EntityType = 'transactional' | 'categorical' | 'temporal';
+
+export type MetricType = 'currency' | 'percentage' | 'count' | 'duration' | 'ratio';
+
+export type AggregationType = 'sum' | 'avg' | 'count' | 'min' | 'max';
+
+export type TemporalCycle = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly';
+
+export type ForecastingAlgorithm = 'linear' | 'seasonal' | 'ml';
+
+export type ActionType = 'primary' | 'secondary' | 'danger';
+
+export interface FormatConfig {
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+  thousands?: boolean;
+}
+
+export interface MetricConfig {
+  key: string;
+  label: string;
+  type: MetricType;
+  format?: FormatConfig;
+  trend?: boolean;
+  target?: number | ((data: EntityData[]) => number);
+  aggregation?: AggregationType;
+  icon?: React.ComponentType;
+}
+
+export interface TemporalConfig {
+  cycles: TemporalCycle[];
+  defaultCycle: TemporalCycle;
+  enableComparisons: boolean;
+  forecasting?: {
+    enabled: boolean;
+    periods: number;
+    algorithm: ForecastingAlgorithm;
+  };
+}
+
+export interface CategoryConfig {
+  hierarchy: string[];
+  defaultGroupBy: string;
+  enableDrillDown: boolean;
+  colorCoding?: boolean;
+}
+
+export interface ActionConfig {
+  label: string;
+  type: ActionType;
+  onClick: (context: { selectedItems?: EntityData[]; data?: EntityData[]; config?: EntityTemplateConfig }) => void | Promise<void>;
+  icon?: React.ComponentType;
+  permissions?: string[];
+  validation?: (context: { selectedItems?: EntityData[]; data?: EntityData[]; config?: EntityTemplateConfig }) => boolean;
+}
+
+export interface BusinessRulesConfig<T> {
+  validation?: (item: T) => string[];
+  constraints?: {
+    [key: string]: {
+      min?: number;
+      max?: number;
+      required?: boolean;
+      pattern?: RegExp;
+    };
+  };
+  workflows?: {
+    [status: string]: string[];
+  };
+}
+
+export interface EntityDisplayConfig {
+  title: string;
+  description?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export interface EntityTemplateConfig<T = EntityData> {
+  entityType: EntityType;
+  display: EntityDisplayConfig;
+  metrics: MetricConfig[];
+  temporal?: TemporalConfig;
+  categories?: CategoryConfig;
+  businessRules?: BusinessRulesConfig<T>;
+  actions?: ActionConfig[];
+}
+
+export interface EntityData {
+  id: string | number;
+  [key: string]: unknown;
+}
+
+export interface MetricValue {
+  current: number;
+  previous?: number;
+  trend?: 'up' | 'down' | 'neutral';
+  target?: number;
+  formattedValue: string;
+}
+
+export interface CategoryBreakdown {
+  category: string;
+  value: number;
+  percentage: number;
+  color?: string;
+  subcategories?: CategoryBreakdown[];
+}
+
+export interface TrendDataPoint {
+  date: string;
+  value: number;
+  label?: string;
+}
+
+export interface EntityAnalyticsData {
+  metrics: Record<string, MetricValue>;
+  categories: CategoryBreakdown[];
+  trends: Record<string, TrendDataPoint[]>;
+  insights?: {
+    type: 'positive' | 'negative' | 'neutral';
+    message: string;
+    value?: number;
+  }[];
+}

package/src/atoms/types/index.ts

@@ -1,4 +1,6 @@
 // Export all type definitions
 export * from './generated';
 export * from './loading';
-export * from './auth';
+export * from './auth';
+export * from './navigation';
+export * from './entity-config';

package/src/atoms/types/navigation.ts

@@ -0,0 +1,43 @@
+// Navigation configuration types for createReactApp factory
+
+export type IconName = 
+  | 'Palette' | 'Menu' | 'X' | 'Shield' | 'Users' | 'BarChart3' 
+  | 'Database' | 'TrendingUp' | 'Layout' | 'Home' | 'Settings'
+  | 'Bell' | 'Search' | 'Plus' | 'Edit' | 'Trash2' | 'Eye'
+  | 'Download' | 'Upload' | 'Share' | 'Lock' | 'Unlock'
+  | 'Mail' | 'Phone' | 'Calendar' | 'Clock' | 'MapPin'
+  | 'Star' | 'Heart' | 'Bookmark' | 'Tag' | 'Flag'
+  | 'File' | 'Folder' | 'Image' | 'Video' | 'Music'
+  | 'ChevronRight' | 'ChevronDown' | 'ChevronLeft' | 'ChevronUp'
+  | 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown'
+  | 'Check' | 'AlertCircle' | 'Info' | 'HelpCircle'
+
+export interface NavigationItem {
+  /** Unique identifier for the navigation item */
+  value: string
+  /** Display label for the navigation item */
+  label: string
+  /** Path to navigate to when clicked */
+  path: string
+  /** Icon name from Lucide React icons */
+  icon: IconName
+  /** Optional category for color theming (1-8) */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+  /** Optional badge text/count to display */
+  badge?: string | number
+  /** Whether this item is disabled */
+  disabled?: boolean
+  /** Child navigation items for nested menus */
+  children?: NavigationItem[]
+}
+
+export interface NavigationConfig {
+  /** Main navigation items */
+  items: NavigationItem[]
+  /** Whether to show the default showcase navigation as fallback */
+  showDefaultNavigation?: boolean
+  /** Custom logo or title for the sidebar header */
+  logo?: string
+  /** Whether the sidebar starts expanded */
+  defaultExpanded?: boolean
+}

package/src/atoms/utils/icon-resolver.tsx

@@ -0,0 +1,54 @@
+import {
+  Palette, Menu, X, Shield, Users, BarChart3, Database, TrendingUp, Layout,
+  Home, Settings, Bell, Search, Plus, Edit, Trash2, Eye, Download, Upload,
+  Share, Lock, Unlock, Mail, Phone, Calendar, Clock, MapPin, Star, Heart,
+  Bookmark, Tag, Flag, File, Folder, Image, Video, Music, ChevronRight,
+  ChevronDown, ChevronLeft, ChevronUp, ArrowRight, ArrowLeft, ArrowUp,
+  ArrowDown, Check, AlertCircle, Info, HelpCircle
+} from 'lucide-react'
+import type { IconName } from '../types'
+
+// Map of icon names to Lucide React components
+export const iconMap = {
+  Palette, Menu, X, Shield, Users, BarChart3, Database, TrendingUp, Layout,
+  Home, Settings, Bell, Search, Plus, Edit, Trash2, Eye, Download, Upload,
+  Share, Lock, Unlock, Mail, Phone, Calendar, Clock, MapPin, Star, Heart,
+  Bookmark, Tag, Flag, File, Folder, Image, Video, Music, ChevronRight,
+  ChevronDown, ChevronLeft, ChevronUp, ArrowRight, ArrowLeft, ArrowUp,
+  ArrowDown, Check, AlertCircle, Info, HelpCircle
+}
+
+interface IconProps {
+  name: IconName
+  className?: string
+  size?: number
+  [key: string]: any // Allow any additional props to be passed through
+}
+
+/**
+ * Resolves an icon name to the corresponding Lucide React component
+ */
+export const Icon = ({ name, className = "w-5 h-5", size, ...props }: IconProps) => {
+  const IconComponent = iconMap[name]
+  
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found. Using default Menu icon.`)
+    return <Menu className={className} size={size} {...props} />
+  }
+  
+  return <IconComponent className={className} size={size} {...props} />
+}
+
+/**
+ * Get the icon component directly for custom rendering
+ */
+export const getIcon = (name: IconName) => {
+  return iconMap[name] || Menu
+}
+
+/**
+ * Check if an icon name is valid
+ */
+export const isValidIcon = (name: string): name is IconName => {
+  return name in iconMap
+}