@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/pages/AdminShowcase/AdminDetailShowcase.tsx

@@ -0,0 +1,385 @@
+import React, { useState } from 'react';
+import { AdminDetailTemplate } from '../../templates/admin';
+import type { FieldSection, ActionConfig, AuditEntry, RelatedData } from '../../templates/admin';
+import { Edit, Trash2, Lock, Mail, Phone, Calendar } from 'lucide-react';
+
+// Mock user data
+const mockUserData = {
+  id: '1',
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  phone: '+1 (555) 123-4567',
+  role: 'Administrator',
+  department: 'Engineering',
+  location: 'San Francisco, CA',
+  isActive: true,
+  lastLogin: '2024-01-15T10:30:00Z',
+  createdAt: '2023-06-15T08:00:00Z',
+  updatedAt: '2024-01-15T10:30:00Z',
+  avatar: 'https://api.dicebear.com/7.x/initials/svg?seed=John Doe',
+  bio: 'Senior software engineer with 8 years of experience in full-stack development.',
+  permissions: ['read', 'write', 'admin'],
+  preferences: {
+    theme: 'dark',
+    notifications: true,
+    language: 'en'
+  }
+};
+
+const fieldSections: FieldSection[] = [
+  {
+    title: 'Basic Information',
+    description: 'Primary user details and contact information',
+    category: 1,
+    fields: [
+      {
+        key: 'name',
+        label: 'Full Name',
+        type: 'text',
+        editable: true,
+        copyable: true
+      },
+      {
+        key: 'email',
+        label: 'Email Address',
+        type: 'email',
+        editable: true,
+        copyable: true
+      },
+      {
+        key: 'phone',
+        label: 'Phone Number',
+        type: 'phone',
+        editable: true,
+        copyable: true
+      },
+      {
+        key: 'location',
+        label: 'Location',
+        type: 'text',
+        editable: true
+      }
+    ]
+  },
+  {
+    title: 'Role & Permissions',
+    description: 'User role and system access permissions',
+    category: 2,
+    fields: [
+      {
+        key: 'role',
+        label: 'Role',
+        type: 'badge',
+        editable: true
+      },
+      {
+        key: 'department',
+        label: 'Department',
+        type: 'text',
+        editable: true
+      },
+      {
+        key: 'isActive',
+        label: 'Account Status',
+        type: 'boolean',
+        editable: true
+      },
+      {
+        key: 'permissions',
+        label: 'Permissions',
+        type: 'custom',
+        render: (value) => (
+          <div className="flex gap-1 flex-wrap">
+            {(value as string[]).map((permission) => (
+              <span
+                key={permission}
+                className="px-2 py-1 text-xs bg-category-2/10 text-category-2 rounded-md"
+              >
+                {permission}
+              </span>
+            ))}
+          </div>
+        )
+      }
+    ]
+  },
+  {
+    title: 'Activity & Timestamps',
+    description: 'Account activity and important dates',
+    category: 3,
+    fields: [
+      {
+        key: 'lastLogin',
+        label: 'Last Login',
+        type: 'datetime'
+      },
+      {
+        key: 'createdAt',
+        label: 'Account Created',
+        type: 'datetime'
+      },
+      {
+        key: 'updatedAt',
+        label: 'Last Updated',
+        type: 'datetime'
+      }
+    ]
+  },
+  {
+    title: 'Preferences',
+    description: 'User preferences and settings',
+    category: 4,
+    fields: [
+      {
+        key: 'preferences',
+        label: 'User Preferences',
+        type: 'json'
+      },
+      {
+        key: 'bio',
+        label: 'Biography',
+        type: 'text',
+        editable: true
+      }
+    ]
+  }
+];
+
+const actions: ActionConfig[] = [
+  {
+    id: 'edit',
+    label: 'Edit User',
+    icon: <Edit className="w-4 h-4 mr-2" />,
+    variant: 'default',
+    onClick: () => console.log('Edit user')
+  },
+  {
+    id: 'reset-password',
+    label: 'Reset Password',
+    icon: <Lock className="w-4 h-4 mr-2" />,
+    variant: 'outline',
+    onClick: () => console.log('Reset password')
+  },
+  {
+    id: 'send-email',
+    label: 'Send Email',
+    icon: <Mail className="w-4 h-4 mr-2" />,
+    variant: 'outline',
+    onClick: () => console.log('Send email')
+  },
+  {
+    id: 'delete',
+    label: 'Delete User',
+    icon: <Trash2 className="w-4 h-4 mr-2" />,
+    variant: 'destructive',
+    onClick: () => console.log('Delete user')
+  }
+];
+
+const auditTrail: AuditEntry[] = [
+  {
+    id: '1',
+    action: 'User profile updated',
+    user: 'admin.user',
+    timestamp: new Date(Date.now() - 60 * 60 * 1000),
+    changes: [
+      { field: 'phone', oldValue: '+1 (555) 123-4566', newValue: '+1 (555) 123-4567' },
+      { field: 'location', oldValue: 'New York, NY', newValue: 'San Francisco, CA' }
+    ]
+  },
+  {
+    id: '2',
+    action: 'Password reset requested',
+    user: 'john.doe',
+    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
+  },
+  {
+    id: '3',
+    action: 'Role changed from Editor to Administrator',
+    user: 'admin.user',
+    timestamp: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+    changes: [
+      { field: 'role', oldValue: 'Editor', newValue: 'Administrator' }
+    ]
+  },
+  {
+    id: '4',
+    action: 'Account created',
+    user: 'system',
+    timestamp: new Date('2023-06-15T08:00:00Z')
+  }
+];
+
+const relatedData: RelatedData[] = [
+  {
+    title: 'Recent Projects',
+    description: 'Projects the user has been involved with',
+    data: [
+      {
+        id: '1',
+        name: 'E-commerce Platform',
+        role: 'Lead Developer',
+        status: 'Active',
+        lastActivity: '2024-01-15'
+      },
+      {
+        id: '2', 
+        name: 'Mobile App Redesign',
+        role: 'Technical Lead',
+        status: 'Completed',
+        lastActivity: '2024-01-10'
+      },
+      {
+        id: '3',
+        name: 'API Migration',
+        role: 'Senior Developer',
+        status: 'In Progress',
+        lastActivity: '2024-01-14'
+      }
+    ],
+    columns: [
+      { key: 'name', header: 'Project Name' },
+      { key: 'role', header: 'Role' },
+      { key: 'status', header: 'Status', cell: (item) => (
+        <span className={`px-2 py-1 text-xs rounded-md ${
+          item.status === 'Active' ? 'bg-category-2/10 text-category-2' :
+          item.status === 'Completed' ? 'bg-category-3/10 text-category-3' :
+          'bg-category-1/10 text-category-1'
+        }`}>
+          {item.status as string}
+        </span>
+      )},
+      { key: 'lastActivity', header: 'Last Activity', cell: (item) => 
+        new Date(item.lastActivity as string).toLocaleDateString()
+      }
+    ],
+    actions: [
+      {
+        id: 'view-project',
+        label: 'View All Projects',
+        variant: 'outline',
+        onClick: () => console.log('View all projects')
+      }
+    ],
+    category: 1
+  },
+  {
+    title: 'Team Members',
+    description: 'Other team members in the same department',
+    data: [
+      {
+        id: '2',
+        name: 'Sarah Wilson',
+        role: 'Product Manager',
+        email: 'sarah.wilson@example.com'
+      },
+      {
+        id: '3',
+        name: 'Mike Johnson',
+        role: 'Designer',
+        email: 'mike.johnson@example.com'
+      },
+      {
+        id: '4',
+        name: 'Emily Davis',
+        role: 'QA Engineer',
+        email: 'emily.davis@example.com'
+      }
+    ],
+    columns: [
+      { key: 'name', header: 'Name' },
+      { key: 'role', header: 'Role' },
+      { key: 'email', header: 'Email', cell: (item) => (
+        <a href={`mailto:${item.email}`} className="text-category-1 hover:underline">
+          {item.email as string}
+        </a>
+      )}
+    ],
+    category: 2
+  }
+];
+
+export const AdminDetailShowcase: React.FC = () => {
+  const [userData, setUserData] = useState(mockUserData);
+
+  const handleUpdate = async (field: string, value: unknown) => {
+    console.log('Updating field:', field, 'with value:', value);
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    setUserData(prev => ({
+      ...prev,
+      [field]: value,
+      updatedAt: new Date().toISOString()
+    }));
+  };
+
+  const handleBack = () => {
+    console.log('Navigate back to users list');
+  };
+
+  const sidebar = (
+    <div className="space-y-6">
+      {/* Quick Actions */}
+      <div className="bg-muted/30 rounded-lg p-4">
+        <h4 className="font-medium text-sm mb-3 text-foreground">Quick Actions</h4>
+        <div className="space-y-2">
+          <button className="w-full text-left text-sm p-2 rounded-md hover:bg-muted flex items-center">
+            <Mail className="w-4 h-4 mr-2" />
+            Send Message
+          </button>
+          <button className="w-full text-left text-sm p-2 rounded-md hover:bg-muted flex items-center">
+            <Phone className="w-4 h-4 mr-2" />
+            Schedule Call
+          </button>
+          <button className="w-full text-left text-sm p-2 rounded-md hover:bg-muted flex items-center">
+            <Calendar className="w-4 h-4 mr-2" />
+            View Calendar
+          </button>
+        </div>
+      </div>
+
+      {/* User Stats */}
+      <div className="bg-muted/30 rounded-lg p-4">
+        <h4 className="font-medium text-sm mb-3 text-foreground">Statistics</h4>
+        <div className="space-y-3">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Projects</span>
+            <span className="font-medium">12</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Tasks Completed</span>
+            <span className="font-medium">147</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Hours Logged</span>
+            <span className="font-medium">1,248</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Team Rating</span>
+            <span className="font-medium">4.8/5</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <AdminDetailTemplate
+      title={userData.name}
+      subtitle={`${userData.role} • ${userData.department}`}
+      resourceType="Users"
+      data={userData}
+      sections={fieldSections}
+      actions={actions}
+      relatedData={relatedData}
+      auditTrail={auditTrail}
+      onBack={handleBack}
+      onUpdate={handleUpdate}
+      category={1}
+      sidebar={sidebar}
+      showAuditTrail={true}
+    />
+  );
+};

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

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