@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/pages/AdminShowcase/AdminDetailShowcase.tsx

@@ -1,385 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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,4 +0,0 @@
-export { AdminDashboardShowcase } from './AdminDashboardShowcase';
-export { AdminCRUDShowcase } from './AdminCRUDShowcase';
-export { AdminDetailShowcase } from './AdminDetailShowcase';
-export { SalesPerformanceDashboard } from './SalesPerformanceDashboard';