@pattern-stack/frontend-patterns 0.0.4 → 0.0.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pattern-stack/frontend-patterns",
   "description": "Production-ready React frontend template with atomic architecture patterns. Build ultra-lean applications by importing shared UI foundation patterns.",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "keywords": [
     "react",
     "typescript",
@@ -44,7 +44,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "npm run clean && vite build --mode library && tsc -p tsconfig.lib.json",
+    "build:lib": "npm run clean && vite build --mode library",
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -102,9 +102,12 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.2.1",
     "autoprefixer": "^10.4.21",
+    "concurrently": "^9.1.2",
+    "cors": "^2.8.5",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "express": "^5.1.0",
     "globals": "^16.0.0",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
@@ -115,4 +118,4 @@
     "vite": "^6.3.5",
     "vitest": "^3.2.1"
   }
-}
+}

package/src/App.tsx

@@ -15,8 +15,12 @@ import {
   ComponentShowcase, 
   AdminDashboardShowcase, 
   AdminCRUDShowcase, 
-  AdminDetailShowcase 
+  AdminDetailShowcase,
+  SalesPerformanceDashboard,
+  EntityPerformanceShowcase,
+  EntityManagementShowcase
 } from './pages';
+import { EntityTemplateExample } from './pages/EntityTemplateExample';
 
 function App() {
   return (
@@ -41,6 +45,12 @@ function App() {
             <Route path="admin/dashboard" element={<ErrorBoundary><AdminDashboardShowcase /></ErrorBoundary>} />
             <Route path="admin/users" element={<ErrorBoundary><AdminCRUDShowcase /></ErrorBoundary>} />
             <Route path="admin/user/:id" element={<ErrorBoundary><AdminDetailShowcase /></ErrorBoundary>} />
+            <Route path="admin/sales" element={<ErrorBoundary><SalesPerformanceDashboard /></ErrorBoundary>} />
+            
+            {/* Entity Template Showcases */}
+            <Route path="entity/performance" element={<ErrorBoundary><EntityPerformanceShowcase /></ErrorBoundary>} />
+            <Route path="entity/management" element={<ErrorBoundary><EntityManagementShowcase /></ErrorBoundary>} />
+            <Route path="entity/template-example" element={<ErrorBoundary><EntityTemplateExample /></ErrorBoundary>} />
             
             {/* Fallback */}
             <Route path="*" element={<ErrorBoundary><ComponentShowcasePage /></ErrorBoundary>} />

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,5 @@
 // Export all type definitions
 export * from './generated';
 export * from './loading';
-export * from './auth';
+export * from './auth';
+export * from './entity-config';