primus-saas-react 1.0.3 → 1.0.5

package/src/components/dashboard/PrimusDashboard.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-
-export interface StatCardProps {
-    title: string;
-    value: string | number;
-    change?: {
-        value: number;
-        type: 'increase' | 'decrease' | 'neutral';
-    };
-    icon?: React.ReactNode;
-    description?: string;
-    trend?: number[]; // Values for sparkline
-}
-
-export const PrimusStatCard: React.FC<StatCardProps> = ({
-    title,
-    value,
-    change,
-    icon,
-    description,
-    trend = [40, 35, 50, 45, 60, 55, 70] // Default dummy data
-}) => {
-    const changeColors = {
-        increase: 'text-emerald-400 bg-emerald-400/10',
-        decrease: 'text-rose-400 bg-rose-400/10',
-        neutral: 'text-gray-400 bg-gray-400/10',
-    };
-
-    const changeIcons = {
-        increase: '↑',
-        decrease: '↓',
-        neutral: '→',
-    };
-
-    // Render Sparkline
-    const renderSparkline = () => {
-        // Sparkline implementation simplified for visual effect
-        // In a real app, 'trend' would be normalized to SVG coordinates
-        return (
-            <svg className="w-full h-12 opacity-50 absolute bottom-0 left-0" preserveAspectRatio="none" data-trend={trend.join(',')}>
-                <path d="M0 40 Q 20 20 40 40 T 80 40 T 120 40 T 160 30 V 50 H 0 Z" fill={`url(#gradient-${title.replace(/\s/g, '')})`} stroke="none" />
-                <defs>
-                    <linearGradient id={`gradient-${title.replace(/\s/g, '')}`} x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="0%" stopColor="currentColor" stopOpacity="0.2" />
-                        <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
-                    </linearGradient>
-                </defs>
-            </svg>
-        );
-    };
-
-    return (
-        <div className="relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group">
-            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-
-            <div className="p-6 relative z-10">
-                <div className="flex items-start justify-between mb-4">
-                    <div className="p-2.5 rounded-lg bg-white/5 text-gray-300 ring-1 ring-white/10 group-hover:bg-purple-500/20 group-hover:text-purple-300 transition-colors">
-                        {icon || <div className="w-5 h-5 bg-current opacity-20" />}
-                    </div>
-                    {change && (
-                        <span className={`px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 ${changeColors[change.type]}`}>
-                            {changeIcons[change.type]} {Math.abs(change.value)}%
-                        </span>
-                    )}
-                </div>
-
-                <div>
-                    <h3 className="text-sm font-medium text-gray-400 tracking-wide">{title}</h3>
-                    <div className="mt-1 flex items-baseline gap-2">
-                        <span className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400">
-                            {value}
-                        </span>
-                    </div>
-                    {description && (
-                        <p className="text-xs text-gray-500 mt-2 font-medium">{description}</p>
-                    )}
-                </div>
-            </div>
-
-            {renderSparkline()}
-
-            {/* Sparkline Decor (abstract) */}
-            <div className={`absolute -bottom-2 -right-4 w-32 h-32 blur-2xl opacity-20 rounded-full transition-colors duration-500 ${change?.type === 'increase' ? 'bg-emerald-500' :
-                change?.type === 'decrease' ? 'bg-rose-500' : 'bg-blue-500'
-                }`} />
-        </div>
-    );
-};
-
-export interface PrimusDashboardProps {
-    children: React.ReactNode;
-    title?: string;
-    subtitle?: string;
-    actions?: React.ReactNode;
-}
-
-export const PrimusDashboard: React.FC<PrimusDashboardProps> = ({
-    children,
-    title,
-    subtitle,
-    actions,
-}) => {
-    return (
-        <div className="space-y-8 animate-enter">
-            {(title || actions) && (
-                <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-white/5 pb-6">
-                    <div>
-                        {title && (
-                            <h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 tracking-tight">
-                                {title}
-                            </h1>
-                        )}
-                        {subtitle && <p className="text-gray-400 mt-2 text-lg font-light leading-relaxed">{subtitle}</p>}
-                    </div>
-                    {actions && <div className="flex items-center gap-3">{actions}</div>}
-                </div>
-            )}
-            {children}
-        </div>
-    );
-};
-
-export interface DashboardGridProps {
-    children: React.ReactNode;
-    columns?: 1 | 2 | 3 | 4;
-}
-
-export const DashboardGrid: React.FC<DashboardGridProps> = ({
-    children,
-    columns = 4,
-}) => {
-    const colClasses = {
-        1: 'grid-cols-1',
-        2: 'grid-cols-1 md:grid-cols-2',
-        3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-        4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-    };
-
-    return (
-        <div className={`grid gap-6 ${colClasses[columns]}`}>
-            {children}
-        </div>
-    );
-};

package/src/components/documents/DocumentViewer.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { Button } from '../shared/Button';
-import {
-    DocumentArrowDownIcon,
-    // EyeIcon,
-    PrinterIcon,
-    XMarkIcon
-} from '@heroicons/react/24/outline';
-
-export interface Document {
-    id: string;
-    name: string;
-    type: 'pdf' | 'image' | 'text';
-    url: string;
-    size?: string;
-    date?: string;
-}
-
-export interface DocumentViewerProps {
-    document: Document;
-    onClose?: () => void;
-    onDownload?: () => void;
-}
-
-export const DocumentViewer: React.FC<DocumentViewerProps> = ({
-    document,
-    onClose,
-    onDownload
-}) => {
-    // const [isFullscreen, setIsFullscreen] = useState(false);
-
-    // Mock content display based on type
-    const renderContent = () => {
-        switch (document.type) {
-            case 'image':
-                return (
-                    <img
-                        src={document.url}
-                        alt={document.name}
-                        className="max-w-full max-h-[80vh] object-contain mx-auto shadow-lg rounded"
-                    />
-                );
-            case 'pdf':
-                return (
-                    <div className="bg-gray-100 p-8 rounded-lg text-center h-[600px] flex items-center justify-center border-2 border-dashed border-gray-300">
-                        <div className="text-gray-500">
-                            <DocumentArrowDownIcon className="h-16 w-16 mx-auto mb-4 text-gray-400" />
-                            <p className="font-medium">PDF Preview</p>
-                            <p className="text-sm mt-2">{document.name}</p>
-                            <Button variant="outline" size="sm" className="mt-4" onClick={onDownload}>
-                                Download to view
-                            </Button>
-                        </div>
-                    </div>
-                );
-            default:
-                return (
-                    <div className="bg-white p-8 rounded shadow border border-gray-200 h-[600px] overflow-auto font-mono text-sm leading-relaxed">
-                        {/* Mock text content */}
-                        <p>Document Content: {document.name}</p>
-                        <p className="mt-4 text-gray-500">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </p>
-                    </div>
-                );
-        }
-    };
-
-    return (
-        <div className="flex flex-col h-full bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
-            {/* Header */}
-            <div className="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm">
-                <div className="flex items-center gap-3">
-                    <div className="h-8 w-8 bg-primus-100 rounded flex items-center justify-center text-primus-700">
-                        <span className="uppercase text-xs font-bold">{document.type}</span>
-                    </div>
-                    <div>
-                        <h3 className="text-sm font-semibold text-gray-900">{document.name}</h3>
-                        {document.size && <p className="text-xs text-gray-500">{document.size} • {document.date}</p>}
-                    </div>
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Button variant="ghost" size="sm" onClick={() => window.print()}>
-                        <PrinterIcon className="h-4 w-4" />
-                    </Button>
-                    <Button variant="ghost" size="sm" onClick={onDownload}>
-                        <DocumentArrowDownIcon className="h-4 w-4" />
-                    </Button>
-                    {onClose && (
-                        <div className="h-6 w-px bg-gray-200 mx-1" />
-                    )}
-                    {onClose && (
-                        <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-red-500">
-                            <XMarkIcon className="h-5 w-5" />
-                        </Button>
-                    )}
-                </div>
-            </div>
-
-            {/* Content Area */}
-            <div className="flex-1 overflow-auto p-6 flex flex-col items-center justify-center">
-                {renderContent()}
-            </div>
-        </div>
-    );
-};

package/src/components/featureflags/FeatureFlagToggle.tsx

@@ -1,64 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-export interface FeatureFlag {
-    name: string;
-    enabled: boolean;
-    description: string;
-    rolloutPercentage?: number;
-}
-
-export const FeatureFlagToggle: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [flags, setFlags] = useState<FeatureFlag[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchFlags();
-    }, []);
-
-    const fetchFlags = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/featureflags`);
-            if (response.ok) {
-                const data = await response.json();
-                setFlags(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch feature flags:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (loading) {
-        return <div className="p-4">Loading feature flags...</div>;
-    }
-
-    return (
-        <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Feature Flags</h3>
-            <div className="space-y-4">
-                {flags.map((flag) => (
-                    <div key={flag.name} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
-                        <div className="flex-1">
-                            <h4 className="font-medium text-gray-900">{flag.name}</h4>
-                            <p className="text-sm text-gray-500">{flag.description}</p>
-                            {flag.rolloutPercentage !== undefined && (
-                                <p className="text-xs text-gray-400 mt-1">
-                                    Rollout: {flag.rolloutPercentage}%
-                                </p>
-                            )}
-                        </div>
-                        <div className={`px-3 py-1 rounded-full text-sm font-medium ${flag.enabled
-                                ? 'bg-green-100 text-green-800'
-                                : 'bg-gray-100 text-gray-800'
-                            }`}>
-                            {flag.enabled ? 'Enabled' : 'Disabled'}
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/insurance/agents/AgentDirectory.tsx

@@ -1,72 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface Agent {
-    id: string;
-    name: string;
-    email: string;
-    phone: string;
-    specialty: string;
-    rating: number;
-    yearsExperience: number;
-}
-
-export const AgentDirectory: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [agents, setAgents] = useState<Agent[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchAgents();
-    }, []);
-
-    const fetchAgents = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/insurance/agents`);
-            if (response.ok) {
-                const data = await response.json();
-                setAgents(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch agents:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (loading) return <div className="p-4">Loading agents...</div>;
-
-    return (
-        <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Insurance Agents</h3>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {agents.map((agent) => (
-                    <div key={agent.id} className="p-4 border border-gray-200 rounded-lg">
-                        <div className="flex items-start gap-3">
-                            <div className="w-12 h-12 bg-primus-100 rounded-full flex items-center justify-center text-primus-600 font-bold text-lg">
-                                {agent.name.split(' ').map(n => n[0]).join('')}
-                            </div>
-                            <div className="flex-1">
-                                <h4 className="font-medium text-gray-900">{agent.name}</h4>
-                                <p className="text-sm text-gray-600">{agent.specialty}</p>
-                                <div className="flex items-center gap-2 mt-1">
-                                    <div className="flex items-center">
-                                        {'⭐'.repeat(Math.floor(agent.rating))}
-                                        <span className="text-xs text-gray-500 ml-1">{agent.rating}</span>
-                                    </div>
-                                    <span className="text-xs text-gray-400">•</span>
-                                    <span className="text-xs text-gray-500">{agent.yearsExperience} years</span>
-                                </div>
-                                <div className="mt-2 space-y-1">
-                                    <p className="text-xs text-gray-600">{agent.email}</p>
-                                    <p className="text-xs text-gray-600">{agent.phone}</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/insurance/claims/ClaimStatusTracker.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { CheckIcon } from '@heroicons/react/24/solid';
-
-export interface ClaimStep {
-    id: string;
-    label: string;
-    status: 'completed' | 'current' | 'upcoming';
-    date?: string;
-}
-
-export interface ClaimStatusTrackerProps {
-    claimId: string;
-    steps: ClaimStep[];
-}
-
-export const ClaimStatusTracker: React.FC<ClaimStatusTrackerProps> = ({
-    claimId,
-    steps
-}) => {
-    return (
-        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
-            <div className="mb-8">
-                <h3 className="text-lg font-semibold text-gray-900">Claim Status</h3>
-                <p className="text-sm text-gray-500">Claim ID: #{claimId}</p>
-            </div>
-
-            <nav aria-label="Progress">
-                <ol role="list" className="overflow-hidden">
-                    {steps.map((step, stepIdx) => (
-                        <li key={step.label} className={clsx(
-                            "relative pb-10",
-                            stepIdx === steps.length - 1 ? "pb-0" : ""
-                        )}>
-                            {stepIdx !== steps.length - 1 ? (
-                                <div
-                                    className={clsx(
-                                        "absolute top-4 left-4 -ml-px h-full w-0.5",
-                                        step.status === 'completed' ? "bg-primus-600" : "bg-gray-200"
-                                    )}
-                                    aria-hidden="true"
-                                />
-                            ) : null}
-
-                            <div className="relative flex items-start group">
-                                <span className="h-9 flex items-center">
-                                    <span className={clsx(
-                                        "relative z-10 w-8 h-8 flex items-center justify-center rounded-full ring-1 ring-white",
-                                        step.status === 'completed' ? "bg-primus-600" :
-                                            step.status === 'current' ? "bg-white border-2 border-primus-600" :
-                                                "bg-white border-2 border-gray-300"
-                                    )}>
-                                        {step.status === 'completed' ? (
-                                            <CheckIcon className="w-5 h-5 text-white" aria-hidden="true" />
-                                        ) : step.status === 'current' ? (
-                                            <span className="h-2.5 w-2.5 bg-primus-600 rounded-full" />
-                                        ) : null}
-                                    </span>
-                                </span>
-                                <span className="ml-4 min-w-0 flex flex-col">
-                                    <span className={clsx(
-                                        "text-sm font-medium",
-                                        step.status === 'upcoming' ? "text-gray-500" : "text-gray-900"
-                                    )}>
-                                        {step.label}
-                                    </span>
-                                    {step.date && (
-                                        <span className="text-xs text-gray-500 mt-1">{step.date}</span>
-                                    )}
-                                </span>
-                            </div>
-                        </li>
-                    ))}
-                </ol>
-            </nav>
-        </div>
-    );
-};

package/src/components/insurance/fraud/FraudDetectionDashboard.tsx

@@ -1,68 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-export const FraudDetectionDashboard: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [alerts, setAlerts] = useState<any[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchAlerts();
-    }, []);
-
-    const fetchAlerts = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/insurance/fraud/alerts`);
-            if (response.ok) {
-                const data = await response.json();
-                setAlerts(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch fraud alerts:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const getSeverityColor = (severity: string) => {
-        switch (severity.toLowerCase()) {
-            case 'high': return 'bg-red-100 text-red-800 border-red-200';
-            case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
-            case 'low': return 'bg-blue-100 text-blue-800 border-blue-200';
-            default: return 'bg-gray-100 text-gray-800 border-gray-200';
-        }
-    };
-
-    if (loading) return <div className="p-4">Loading fraud alerts...</div>;
-
-    return (
-        <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
-            <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-medium text-gray-900">Fraud Detection</h3>
-                <span className="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">
-                    {alerts.length} Active Alerts
-                </span>
-            </div>
-
-            <div className="space-y-3">
-                {alerts.map((alert) => (
-                    <div key={alert.id} className={`p-4 border-2 rounded-lg ${getSeverityColor(alert.severity)}`}>
-                        <div className="flex justify-between items-start mb-2">
-                            <div>
-                                <h4 className="font-medium">{alert.type.replace(/_/g, ' ').toUpperCase()}</h4>
-                                <p className="text-sm mt-1">{alert.description}</p>
-                            </div>
-                            <span className="px-2 py-1 bg-white rounded text-xs font-medium">
-                                {alert.severity}
-                            </span>
-                        </div>
-                        <div className="flex justify-between items-center mt-3 text-xs">
-                            <span>Claim: {alert.claimId}</span>
-                            <span>{new Date(alert.detectedDate).toLocaleString()}</span>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/insurance/policies/PolicyCard.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { Button } from '../../shared/Button';
-import { clsx } from "clsx";
-import { ShieldCheckIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
-
-export interface PolicyProps {
-    policyNumber: string;
-    type: string;
-    status: 'active' | 'expired' | 'pending';
-    coverageAmount: number;
-    nextPaymentDate: string;
-    premiumAmount: number;
-}
-
-export const PolicyCard: React.FC<PolicyProps> = ({
-    policyNumber,
-    type,
-    status,
-    coverageAmount,
-    nextPaymentDate,
-    premiumAmount
-}) => {
-    return (
-        <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
-            <div className="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                    <ShieldCheckIcon className="h-5 w-5 text-primus-600" />
-                    <span className="font-semibold text-gray-900">{type} Insurance</span>
-                </div>
-                <span className={clsx(
-                    "px-2.5 py-0.5 rounded-full text-xs font-medium uppercase tracking-wide",
-                    status === 'active' ? "bg-green-100 text-green-800" :
-                        status === 'pending' ? "bg-yellow-100 text-yellow-800" :
-                            "bg-gray-100 text-gray-800"
-                )}>
-                    {status}
-                </span>
-            </div>
-
-            <div className="p-6">
-                <div className="mb-6">
-                    <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Policy Number</p>
-                    <p className="font-mono text-lg font-medium text-gray-900">{policyNumber}</p>
-                </div>
-
-                <div className="grid grid-cols-2 gap-6 mb-6">
-                    <div>
-                        <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Coverage</p>
-                        <p className="text-xl font-bold text-gray-900">
-                            {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(coverageAmount)}
-                        </p>
-                    </div>
-                    <div>
-                        <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Premium</p>
-                        <p className="text-gray-900 font-medium">
-                            {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(premiumAmount)}
-                            <span className="text-xs text-gray-500 font-normal"> / month</span>
-                        </p>
-                    </div>
-                </div>
-
-                <div className="bg-blue-50 rounded-lg p-3 flex items-start gap-3 mb-6">
-                    <DocumentTextIcon className="h-5 w-5 text-blue-600 mt-0.5" />
-                    <div>
-                        <p className="text-sm font-medium text-blue-900">Next Payment due</p>
-                        <p className="text-sm text-blue-700">{nextPaymentDate}</p>
-                    </div>
-                </div>
-
-                <div className="flex gap-3">
-                    <Button variant="outline" className="flex-1">View Details</Button>
-                    <Button className="flex-1">File Claim</Button>
-                </div>
-            </div>
-        </div>
-    );
-};