@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/src/pages/AdminShowcase/SalesPerformanceDashboard.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { DashboardWithSidePanel } from '../../molecules/layout';
+import { SalesPanel } from '../../atoms/composed/SalesPanel';
+import { DataTable, StatCard, Chart } from '../../atoms/composed';
+import { Card } from '../../atoms/ui/card';
+import { mockSalesData } from '../../atoms/composed/SalesPanel/mockSalesData';
+import { Button } from '../../atoms/ui/button';
+import { Eye, Filter, Calendar, TrendingUp, Users, Target, DollarSign } from 'lucide-react';
+
+
+// Mock data for main dashboard
+const salesMetrics = [
+  { title: 'Total Revenue', value: '$1.2M', trend: { value: 15.3, label: 'from last month' }, icon: <DollarSign className="w-5 h-5" />, category: 2 as const },
+  { title: 'Deals Closed', value: '47', trend: { value: 12.8, label: 'from last month' }, icon: <Target className="w-5 h-5" />, category: 3 as const },
+  { title: 'Conversion Rate', value: '24.5%', trend: { value: -2.1, label: 'from last month' }, icon: <TrendingUp className="w-5 h-5" />, category: 1 as const },
+  { title: 'Active Prospects', value: '156', trend: { value: 8.7, label: 'from last month' }, icon: <Users className="w-5 h-5" />, category: 4 as const }
+];
+
+const salesTrendData = [
+  { label: 'Jan', value: 85000 },
+  { label: 'Feb', value: 92000 },
+  { label: 'Mar', value: 108000 },
+  { label: 'Apr', value: 125000 },
+  { label: 'May', value: 118000 },
+  { label: 'Jun', value: 135000 }
+];
+
+const allSalesColumns = [
+  { key: 'customer', header: 'Customer', render: (value: string) => <div className="font-medium">{value}</div> },
+  { key: 'product', header: 'Product', render: (value: string) => <div className="text-sm">{value}</div> },
+  { key: 'amount', header: 'Value', render: (value: number) => <div className="font-semibold text-green-600">${value.toLocaleString()}</div> },
+  { key: 'stage', header: 'Stage', render: (value: string) => <span className="text-sm">{value}</span> },
+  { key: 'salesperson', header: 'Sales Rep', render: (value: string) => <div className="text-sm">{value}</div> },
+  { key: 'region', header: 'Region', render: (value: string) => <div className="text-sm">{value}</div> }
+];
+
+export const SalesPerformanceDashboard: React.FC = () => {
+  const [showSidePanel, setShowSidePanel] = useState(true);
+
+  const handleSaleClick = (sale: any) => {
+    console.log('Deal selected:', sale);
+  };
+
+  return (
+    <DashboardWithSidePanel
+      showSidePanel={showSidePanel}
+      sidePanel={
+        <SalesPanel
+          sales={mockSalesData}
+          onSaleClick={handleSaleClick}
+          onClose={() => setShowSidePanel(false)}
+        />
+      }
+    >
+      <div className="p-6 space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">Sales Performance</h1>
+            <p className="text-muted-foreground">Monitor sales metrics, team performance, and revenue trends</p>
+          </div>
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => setShowSidePanel(!showSidePanel)}
+            >
+              <Eye className="w-4 h-4 mr-2" />
+              {showSidePanel ? 'Hide' : 'Show'} Pipeline
+            </Button>
+            <Button variant="outline" size="sm">
+              <Filter className="w-4 h-4 mr-2" />
+              Filter by Region
+            </Button>
+            <Button variant="outline" size="sm">
+              <Calendar className="w-4 h-4 mr-2" />
+              Date Range
+            </Button>
+          </div>
+        </div>
+
+        {/* Metrics */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {salesMetrics.map((metric, index) => (
+            <StatCard
+              key={index}
+              title={metric.title}
+              value={metric.value}
+              trend={metric.trend}
+              icon={metric.icon}
+              category={metric.category}
+            />
+          ))}
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card className="p-6">
+            <Chart
+              title="Revenue Trend"
+              type="line"
+              data={salesTrendData}
+              category={2}
+              noWrapper={true}
+            />
+          </Card>
+          
+          <Card className="p-6">
+            <h3 className="font-semibold mb-4">Sales by Region</h3>
+            <div className="space-y-3">
+              <div className="flex justify-between items-center">
+                <span>North America</span>
+                <div className="flex items-center gap-2">
+                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
+                    <div className="w-3/5 h-full bg-category-2 rounded-full"></div>
+                  </div>
+                  <span className="text-sm font-medium">$750K</span>
+                </div>
+              </div>
+              <div className="flex justify-between items-center">
+                <span>Europe</span>
+                <div className="flex items-center gap-2">
+                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
+                    <div className="w-2/5 h-full bg-category-1 rounded-full"></div>
+                  </div>
+                  <span className="text-sm font-medium">$320K</span>
+                </div>
+              </div>
+              <div className="flex justify-between items-center">
+                <span>Asia Pacific</span>
+                <div className="flex items-center gap-2">
+                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
+                    <div className="w-1/4 h-full bg-category-3 rounded-full"></div>
+                  </div>
+                  <span className="text-sm font-medium">$130K</span>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Detailed Sales Table */}
+        <Card className="p-6">
+          <h3 className="font-semibold mb-4">All Sales Opportunities</h3>
+          <DataTable
+            data={mockSalesData}
+            columns={allSalesColumns}
+            showSearch={true}
+            searchPlaceholder="Search deals, customers, or products..."
+            onRowClick={handleSaleClick}
+          />
+        </Card>
+      </div>
+    </DashboardWithSidePanel>
+  );
+};
+
+export default SalesPerformanceDashboard;

package/src/pages/AdminShowcase/index.tsx

@@ -1,3 +1,4 @@
 export { AdminDashboardShowcase } from './AdminDashboardShowcase';
 export { AdminCRUDShowcase } from './AdminCRUDShowcase';
-export { AdminDetailShowcase } from './AdminDetailShowcase';
+export { AdminDetailShowcase } from './AdminDetailShowcase';
+export { SalesPerformanceDashboard } from './SalesPerformanceDashboard';

package/src/pages/EntityShowcase/EntityManagementShowcase.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { EntityListPanel } from '../../organisms/entity';
+import { financialConfig, sampleFinancialData, type FinancialTransaction } from '../../templates/entity/configs/financial-config';
+import { ShowcaseSection } from '../../molecules/layout/ShowcaseSection';
+import { IconBadge } from '../../atoms/composed/IconBadge';
+import { Switch } from '../../atoms/ui/Switch';
+import { Button } from '../../atoms/ui/button';
+import { Database, Filter, Search, Download, Plus, Layers } from 'lucide-react';
+
+export const EntityManagementShowcase: React.FC = () => {
+  const [enableSearch, setEnableSearch] = useState(true);
+  const [enableFiltering, setEnableFiltering] = useState(true);
+  const [enableBulkActions, setEnableBulkActions] = useState(true);
+  const [enableExport, setEnableExport] = useState(true);
+  
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+        <div className="flex items-center justify-between mb-12">
+          <div className="flex items-center space-x-4">
+            <IconBadge 
+              variant="category" 
+              category={7} 
+              size="lg" 
+              icon={<Database className="w-6 h-6" />}
+            />
+            <div>
+              <h1 className="text-4xl font-bold text-foreground">Entity Management</h1>
+              <p className="text-lg text-muted-foreground mt-2">
+                Cross-domain template for CRUD operations with intelligent search, filtering, and bulk actions
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <Button variant="outline" size="sm">
+              <Plus className="w-4 h-4 mr-2" />
+              Add Transaction
+            </Button>
+            <div className="flex items-center gap-3 bg-card/80 backdrop-blur-sm border border-border/50 rounded px-3 py-2">
+              <Layers className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Demo Mode</span>
+              <Switch checked={true} disabled />
+            </div>
+          </div>
+        </div>
+
+        {/* Feature Toggles */}
+        <div className="mb-8">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Search className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Search</span>
+              <Switch
+                checked={enableSearch}
+                onCheckedChange={setEnableSearch}
+              />
+            </div>
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Filter className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Filters</span>
+              <Switch
+                checked={enableFiltering}
+                onCheckedChange={setEnableFiltering}
+              />
+            </div>
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Database className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Bulk Actions</span>
+              <Switch
+                checked={enableBulkActions}
+                onCheckedChange={setEnableBulkActions}
+              />
+            </div>
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Download className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Export</span>
+              <Switch
+                checked={enableExport}
+                onCheckedChange={setEnableExport}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-12">
+          <ShowcaseSection
+            title="Entity List with Advanced Features"
+            description="Smart data table with domain-aware column rendering, search, filtering, and bulk operations"
+            badge={{
+              text: "Full Featured",
+              variant: "category",
+              category: 3
+            }}
+          >
+            <EntityListPanel
+              config={financialConfig}
+              data={sampleFinancialData}
+              isLoading={false}
+              enableSearch={enableSearch}
+              enableFiltering={enableFiltering}
+              enableBulkActions={enableBulkActions}
+              enableExport={enableExport}
+              onItemClick={(item: FinancialTransaction) => {
+                console.log('Item clicked:', item);
+              }}
+              onItemEdit={(item: FinancialTransaction) => {
+                console.log('Item edit:', item);
+              }}
+              onItemDelete={(item: FinancialTransaction) => {
+                console.log('Item delete:', item);
+              }}
+              onBulkAction={(action: string, items: FinancialTransaction[]) => {
+                console.log('Bulk action:', action, items);
+              }}
+              onSearch={(query: string) => {
+                console.log('Search:', query);
+              }}
+              onFilter={(filters: Record<string, any>) => {
+                console.log('Filter:', filters);
+              }}
+              onSort={(field: string, direction: 'asc' | 'desc') => {
+                console.log('Sort:', field, direction);
+              }}
+              onExport={(format: 'csv' | 'json' | 'xlsx') => {
+                console.log('Export:', format);
+                return Promise.resolve();
+              }}
+            />
+          </ShowcaseSection>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EntityManagementShowcase;

package/src/pages/EntityShowcase/EntityPerformanceShowcase.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { 
+  MetricsOverviewWithInsightsPanel,
+  TrendAnalysisPanel,
+  CategoryBreakdownPanel 
+} from '../../organisms/entity';
+import { financialConfig, sampleFinancialData } from '../../templates/entity/configs/financial-config';
+import { ShowcaseSection } from '../../molecules/layout/ShowcaseSection';
+import { IconBadge } from '../../atoms/composed/IconBadge';
+import { Switch } from '../../atoms/ui/Switch';
+import { BarChart3, TrendingUp, PieChart, Layers } from 'lucide-react';
+
+export const EntityPerformanceShowcase: React.FC = () => {
+  const [showInsights, setShowInsights] = useState(true);
+  const [showTrends, setShowTrends] = useState(true);
+  const [showCategories, setShowCategories] = useState(true);
+  
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+        <div className="flex items-center justify-between mb-12">
+          <div className="flex items-center space-x-4">
+            <IconBadge 
+              variant="category" 
+              category={6} 
+              size="lg" 
+              icon={<BarChart3 className="w-6 h-6" />}
+            />
+            <div>
+              <h1 className="text-4xl font-bold text-foreground">Performance Dashboard</h1>
+              <p className="text-lg text-muted-foreground mt-2">
+                Cross-domain entity template showcasing configurable performance metrics and analytics
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <div className="flex items-center gap-3 bg-card/80 backdrop-blur-sm border border-border/50 rounded px-3 py-2">
+              <Layers className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Live Data</span>
+              <Switch checked={true} disabled />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-12">
+          {showInsights && (
+            <ShowcaseSection
+              title="Metrics Overview with Insights"
+              description="Configurable KPI displays with automated insights and trend indicators"
+              badge={{
+                text: "Interactive",
+                variant: "category",
+                category: 2
+              }}
+            >
+              <MetricsOverviewWithInsightsPanel
+                metrics={financialConfig.metrics}
+                data={sampleFinancialData}
+                isLoading={false}
+                showInsights={true}
+                onMetricClick={(metric, value) => {
+                  console.log('Metric clicked:', metric.label, value);
+                }}
+              />
+            </ShowcaseSection>
+          )}
+          
+          {showTrends && (
+            <ShowcaseSection
+              title="Trend Analysis"
+              description="Time-series visualizations with forecasting and period comparison"
+              badge={{
+                text: "Dynamic",
+                variant: "category", 
+                category: 4
+              }}
+            >
+              <TrendAnalysisPanel
+                metrics={financialConfig.metrics}
+                data={sampleFinancialData}
+                isLoading={false}
+                onTrendPeriodChange={(period) => {
+                  console.log('Trend period changed:', period);
+                }}
+              />
+            </ShowcaseSection>
+          )}
+          
+          {showCategories && (
+            <ShowcaseSection
+              title="Category Breakdown"
+              description="Hierarchical data visualization with drill-down capabilities"
+              badge={{
+                text: "Explorable",
+                variant: "category",
+                category: 7
+              }}
+            >
+              <CategoryBreakdownPanel
+                categoryConfig={financialConfig.categories}
+                valueField="amount"
+                data={sampleFinancialData}
+                isLoading={false}
+                onCategoryClick={(category) => {
+                  console.log('Category clicked:', category);
+                }}
+              />
+            </ShowcaseSection>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EntityPerformanceShowcase;

package/src/pages/EntityShowcase/index.ts

@@ -0,0 +1,2 @@
+export { EntityPerformanceShowcase } from './EntityPerformanceShowcase';
+export { EntityManagementShowcase } from './EntityManagementShowcase';

package/src/pages/EntityTemplateExample.tsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import { EntityPerformanceDashboardTemplate } from '../templates/entity';
+import { DashboardWithSidePanel } from '../molecules/layout';
+import { financialConfig, sampleFinancialData } from '../templates/entity/configs/financial-config';
+import { DataTable } from '../atoms/composed/DataTable';
+import { DataBadge } from '../atoms/composed/DataBadge';
+import { Card } from '../atoms/ui/card';
+import { Button } from '../atoms/ui/button';
+import { DollarSign, TrendingUp, TrendingDown, Eye, Filter } from 'lucide-react';
+
+// Enhanced transaction data for side panel
+const recentTransactions = [
+  {
+    id: 'TXN-001',
+    description: 'Product Sale - Premium Package',
+    amount: 2499.99,
+    type: 'income',
+    category: 'Sales',
+    date: '2024-06-08',
+    status: 'completed',
+    customer: 'Acme Corp'
+  },
+  {
+    id: 'TXN-002',
+    description: 'Subscription Revenue',
+    amount: 149.99,
+    type: 'income',
+    category: 'Recurring',
+    date: '2024-06-08',
+    status: 'completed',
+    customer: 'TechStart Inc'
+  },
+  {
+    id: 'TXN-003',
+    description: 'Refund - Service Cancellation',
+    amount: -299.99,
+    type: 'expense',
+    category: 'Refunds',
+    date: '2024-06-07',
+    status: 'processed',
+    customer: 'Beta Solutions'
+  },
+  {
+    id: 'TXN-004',
+    description: 'Consulting Services',
+    amount: 1200.00,
+    type: 'income',
+    category: 'Services',
+    date: '2024-06-07',
+    status: 'completed',
+    customer: 'Global Enterprises'
+  },
+  {
+    id: 'TXN-005',
+    description: 'Platform License',
+    amount: 599.99,
+    type: 'income',
+    category: 'Licenses',
+    date: '2024-06-06',
+    status: 'pending',
+    customer: 'StartupXYZ'
+  }
+];
+
+const transactionColumns = [
+  {
+    key: 'id',
+    header: 'Transaction ID',
+    render: (value: string) => (
+      <code className="text-xs bg-muted px-2 py-1 rounded">{value}</code>
+    )
+  },
+  {
+    key: 'description',
+    header: 'Description',
+    render: (value: string) => (
+      <div className="max-w-[200px] truncate" title={value}>
+        {value}
+      </div>
+    )
+  },
+  {
+    key: 'amount',
+    header: 'Amount',
+    render: (value: number) => (
+      <div className={`font-medium ${value >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+        {value >= 0 ? '+' : ''}${Math.abs(value).toLocaleString()}
+      </div>
+    )
+  },
+  {
+    key: 'category',
+    header: 'Category',
+    render: (value: string) => (
+      <DataBadge variant="category" category={1}>
+        {value}
+      </DataBadge>
+    )
+  },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (value: string) => (
+      <DataBadge variant="status" status={value === 'completed' ? 'success' : value === 'pending' ? 'warning' : 'info'}>
+        {value}
+      </DataBadge>
+    )
+  }
+];
+
+export const EntityTemplateExample: React.FC = () => {
+  const [showSidePanel, setShowSidePanel] = useState(true);
+
+  const handleTransactionClick = (transaction: any) => {
+    console.log('Transaction selected:', transaction);
+  };
+
+  return (
+    <DashboardWithSidePanel
+      showSidePanel={showSidePanel}
+      sidePanelWidth={80}
+      sidePanel={
+        <div className="fixed right-0 top-16 h-[calc(100vh-4rem)] w-80 bg-background border-l border-border shadow-lg flex flex-col z-30">
+          {/* Side Panel Header */}
+          <div className="p-4 border-b border-border bg-muted/30">
+            <div className="flex items-center justify-between">
+              <h3 className="font-semibold">Recent Transactions</h3>
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={() => setShowSidePanel(false)}
+              >
+                ×
+              </Button>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">
+              Latest financial activity
+            </p>
+          </div>
+
+          {/* Transaction Summary Cards */}
+          <div className="p-4 space-y-3 border-b border-border">
+            <Card className="p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <TrendingUp className="w-4 h-4 text-green-600" />
+                  <span className="text-sm font-medium">Today's Income</span>
+                </div>
+                <span className="text-green-600 font-semibold">+$2,649.98</span>
+              </div>
+            </Card>
+            
+            <Card className="p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <TrendingDown className="w-4 h-4 text-red-600" />
+                  <span className="text-sm font-medium">Today's Expenses</span>
+                </div>
+                <span className="text-red-600 font-semibold">-$299.99</span>
+              </div>
+            </Card>
+          </div>
+
+          {/* Transaction List */}
+          <div className="flex-1 overflow-auto p-4">
+            <DataTable
+              data={recentTransactions}
+              columns={transactionColumns}
+              showSearch={true}
+              searchPlaceholder="Search transactions..."
+              showPagination={false}
+              onRowClick={handleTransactionClick}
+              className="text-xs"
+              compact={true}
+            />
+          </div>
+
+          {/* Side Panel Footer */}
+          <div className="p-4 border-t border-border bg-muted/30">
+            <Button variant="outline" size="sm" className="w-full">
+              <DollarSign className="w-4 h-4 mr-2" />
+              View All Transactions
+            </Button>
+          </div>
+        </div>
+      }
+    >
+      <EntityPerformanceDashboardTemplate
+        config={financialConfig}
+        data={sampleFinancialData}
+        isLoading={false}
+        layout="standard"
+        showInsights={true}
+        showTrends={true}
+        showCategories={true}
+        onMetricClick={(metric, value) => {
+          console.log('Metric clicked:', metric.label, value);
+        }}
+        onCategoryClick={(category) => {
+          console.log('Category clicked:', category);
+        }}
+        onTrendPeriodChange={(period) => {
+          console.log('Trend period changed:', period);
+        }}
+        onExport={(type, data) => {
+          console.log('Export requested:', type, data);
+        }}
+        headerSlot={
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => setShowSidePanel(!showSidePanel)}
+            >
+              <Eye className="w-4 h-4 mr-2" />
+              {showSidePanel ? 'Hide' : 'Show'} Transactions
+            </Button>
+            <Button variant="outline" size="sm">
+              <Filter className="w-4 h-4 mr-2" />
+              Filter Data
+            </Button>
+          </div>
+        }
+      />
+    </DashboardWithSidePanel>
+  );
+};
+
+export default EntityTemplateExample;