primus-saas-react 1.0.3 → 1.0.5

package/src/components/insurance/premium/PremiumCalculator.tsx

@@ -1,104 +0,0 @@
-import React, { useState } from 'react';
-
-export const PremiumCalculator: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [coverageAmount, setCoverageAmount] = useState(100000);
-    const [age, setAge] = useState(35);
-    const [riskScore, setRiskScore] = useState(30);
-    const [result, setResult] = useState<any>(null);
-    const [loading, setLoading] = useState(false);
-
-    const calculate = async () => {
-        setLoading(true);
-        try {
-            const response = await fetch(`${apiUrl}/api/insurance/premium/calculate`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ coverageAmount, age, riskScore })
-            });
-            if (response.ok) {
-                const data = await response.json();
-                setResult(data);
-            }
-        } catch (error) {
-            console.error('Failed to calculate premium:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    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">Premium Calculator</h3>
-
-            <div className="space-y-4 mb-6">
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                        Coverage Amount: ${coverageAmount.toLocaleString()}
-                    </label>
-                    <input
-                        type="range"
-                        min="10000"
-                        max="1000000"
-                        step="10000"
-                        value={coverageAmount}
-                        onChange={(e) => setCoverageAmount(Number(e.target.value))}
-                        className="w-full"
-                    />
-                </div>
-
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                        Age: {age}
-                    </label>
-                    <input
-                        type="range"
-                        min="18"
-                        max="80"
-                        value={age}
-                        onChange={(e) => setAge(Number(e.target.value))}
-                        className="w-full"
-                    />
-                </div>
-
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                        Risk Score: {riskScore}
-                    </label>
-                    <input
-                        type="range"
-                        min="0"
-                        max="100"
-                        value={riskScore}
-                        onChange={(e) => setRiskScore(Number(e.target.value))}
-                        className="w-full"
-                    />
-                </div>
-            </div>
-
-            <button
-                onClick={calculate}
-                disabled={loading}
-                className="w-full bg-primus-600 text-white py-2 px-4 rounded hover:bg-primus-700 disabled:opacity-50"
-            >
-                {loading ? 'Calculating...' : 'Calculate Premium'}
-            </button>
-
-            {result && (
-                <div className="mt-6 p-4 bg-gray-50 rounded-lg">
-                    <div className="grid grid-cols-2 gap-4">
-                        <div>
-                            <p className="text-sm text-gray-600">Monthly Premium</p>
-                            <p className="text-2xl font-bold text-gray-900">${result.monthlyPremium}</p>
-                        </div>
-                        <div>
-                            <p className="text-sm text-gray-600">Annual Premium</p>
-                            <p className="text-2xl font-bold text-gray-900">${result.annualPremium}</p>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/insurance/quotes/QuoteComparison.tsx

@@ -1,75 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface Quote {
-    id: string;
-    type: string;
-    monthlyPremium: number;
-    coverageAmount: number;
-    status: string;
-    validUntil: string;
-}
-
-export const QuoteComparison: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [quotes, setQuotes] = useState<Quote[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchQuotes();
-    }, []);
-
-    const fetchQuotes = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/insurance/quotes`);
-            if (response.ok) {
-                const data = await response.json();
-                setQuotes(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch quotes:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (loading) return <div className="p-4">Loading quotes...</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 Quotes</h3>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {quotes.map((quote) => (
-                    <div key={quote.id} className="p-4 border-2 border-gray-200 rounded-lg hover:border-primus-500 transition-colors">
-                        <div className="flex justify-between items-start mb-3">
-                            <h4 className="font-medium text-gray-900">{quote.type}</h4>
-                            <span className={`px-2 py-1 rounded text-xs font-medium ${quote.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'
-                                }`}>
-                                {quote.status}
-                            </span>
-                        </div>
-
-                        <div className="mb-3">
-                            <div className="text-3xl font-bold text-gray-900">
-                                ${quote.monthlyPremium}
-                                <span className="text-sm font-normal text-gray-500">/mo</span>
-                            </div>
-                            <div className="text-sm text-gray-600">
-                                Coverage: ${quote.coverageAmount.toLocaleString()}
-                            </div>
-                        </div>
-
-                        <div className="text-xs text-gray-500">
-                            Valid until: {new Date(quote.validUntil).toLocaleDateString()}
-                        </div>
-
-                        <button className="mt-3 w-full px-4 py-2 bg-primus-600 text-white rounded hover:bg-primus-700">
-                            Accept Quote
-                        </button>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/layout/PrimusHeader.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-export interface PrimusHeaderProps {
-    /** Page title */
-    title?: string;
-    /** Breadcrumb items */
-    breadcrumbs?: { label: string; href?: string }[];
-    /** Right side actions */
-    actions?: React.ReactNode;
-    /** User info/avatar */
-    user?: {
-        name: string;
-        email?: string;
-        avatar?: string;
-    };
-    /** On user click */
-    onUserClick?: () => void;
-}
-
-export const PrimusHeader: React.FC<PrimusHeaderProps> = ({
-    title,
-    breadcrumbs,
-    actions,
-    user,
-    onUserClick,
-}) => {
-    return (
-        <div className="flex items-center justify-between w-full">
-            {/* Left side */}
-            <div className="flex items-center gap-4">
-                {breadcrumbs && breadcrumbs.length > 0 && (
-                    <nav className="flex items-center gap-2 text-sm">
-                        {breadcrumbs.map((crumb, index) => (
-                            <React.Fragment key={index}>
-                                {index > 0 && <span className="text-gray-500">/</span>}
-                                <span className={index === breadcrumbs.length - 1 ? 'text-white' : 'text-gray-400 hover:text-white cursor-pointer'}>
-                                    {crumb.label}
-                                </span>
-                            </React.Fragment>
-                        ))}
-                    </nav>
-                )}
-                {title && !breadcrumbs && (
-                    <h1 className="text-xl font-semibold">{title}</h1>
-                )}
-            </div>
-
-            {/* Right side */}
-            <div className="flex items-center gap-4">
-                {actions}
-
-                {user && (
-                    <button
-                        onClick={onUserClick}
-                        className="flex items-center gap-3 px-3 py-1.5 rounded-lg hover:bg-gray-700/50 transition-colors"
-                    >
-                        <div className="text-right hidden sm:block">
-                            <p className="text-sm font-medium">{user.name}</p>
-                            {user.email && (
-                                <p className="text-xs text-gray-400">{user.email}</p>
-                            )}
-                        </div>
-                        {user.avatar ? (
-                            <img src={user.avatar} alt={user.name} className="w-8 h-8 rounded-full" />
-                        ) : (
-                            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-sm font-medium">
-                                {user.name.charAt(0).toUpperCase()}
-                            </div>
-                        )}
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/components/layout/PrimusLayout.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-export interface PrimusLayoutProps {
-    children: React.ReactNode;
-    sidebar?: React.ReactNode;
-    header?: React.ReactNode;
-    /** Dark mode */
-    darkMode?: boolean;
-}
-
-export const PrimusLayout: React.FC<PrimusLayoutProps> = ({
-    children,
-    sidebar,
-    header,
-}) => {
-    // We rely on the global body background (set in App.css) for the main texture/color.
-    // This layout provides structure and glass panels.
-
-    return (
-        <div className={`min-h-screen flex text-white relative`}>
-            {/* Sidebar Container */}
-            {sidebar && (
-                <aside className="w-72 flex-shrink-0 flex flex-col fixed inset-y-0 left-0 z-50">
-                    {sidebar}
-                </aside>
-            )}
-
-            {/* Main Content Area */}
-            <div className={`flex-1 flex flex-col min-h-screen ${sidebar ? 'pl-72' : ''}`}>
-
-                {/* Header - Floating Glass Bar */}
-                {header && (
-                    <header className="h-20 flex items-center px-8 fixed top-0 right-0 left-72 z-40 bg-slate-900/10 backdrop-blur-md border-b border-white/5 transition-all duration-300">
-                        {header}
-                    </header>
-                )}
-
-                {/* Content Scrollable Area */}
-                <main className="flex-1 p-8 pt-28 overflow-x-hidden">
-                    <div className="max-w-7xl mx-auto space-y-8 animate-enter">
-                        {children}
-                    </div>
-                </main>
-            </div>
-        </div>
-    );
-};

package/src/components/layout/PrimusSidebar.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-
-export interface SidebarItem {
-    id: string;
-    label: string;
-    icon?: React.ReactNode;
-    href?: string;
-    onClick?: () => void;
-    active?: boolean;
-    badge?: string | number;
-}
-
-export interface PrimusSidebarProps {
-    /** App logo or title */
-    logo?: React.ReactNode;
-    /** Navigation items */
-    items: SidebarItem[];
-    /** Footer content */
-    footer?: React.ReactNode;
-    /** Callback when item clicked */
-    onItemClick?: (item: SidebarItem) => void;
-    /** Currently active item id */
-    activeId?: string;
-}
-
-export const PrimusSidebar: React.FC<PrimusSidebarProps> = ({
-    logo,
-    items,
-    footer,
-    onItemClick,
-    activeId,
-}) => {
-    return (
-        <div className="flex flex-col h-full bg-slate-900/50 backdrop-blur-xl border-r border-white/10 relative overflow-hidden">
-            {/* Ambient Background Glow */}
-            <div className="absolute top-0 left-0 w-full h-64 bg-purple-500/10 blur-[60px] pointer-events-none" />
-
-            {/* Logo */}
-            {logo && (
-                <div className="h-20 flex items-center px-6 relative z-10 border-b border-white/5">
-                    {logo}
-                </div>
-            )}
-
-            {/* Navigation */}
-            <nav className="flex-1 py-6 px-3 overflow-y-auto relative z-10">
-                <ul className="space-y-1">
-                    {items.map((item) => {
-                        const isActive = activeId === item.id || item.active;
-                        return (
-                            <li key={item.id}>
-                                <button
-                                    onClick={() => {
-                                        item.onClick?.();
-                                        onItemClick?.(item);
-                                    }}
-                                    className={`group relative w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 ${isActive
-                                            ? 'text-white shadow-lg shadow-purple-500/20 ring-1 ring-white/10'
-                                            : 'text-gray-400 hover:text-white hover:bg-white/5'
-                                        }`}
-                                >
-                                    {/* Active State Background Gradient */}
-                                    {isActive && (
-                                        <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-purple-600/90 to-pink-600/90 opacity-100 transition-opacity" />
-                                    )}
-
-                                    {/* Content */}
-                                    <span className="relative z-10 w-5 h-5 flex items-center justify-center transition-transform group-hover:scale-110 duration-300">
-                                        {item.icon}
-                                    </span>
-                                    <span className="relative z-10 flex-1 text-left">{item.label}</span>
-
-                                    {/* Badge */}
-                                    {item.badge && (
-                                        <span className={`relative z-10 px-2 py-0.5 text-xs font-semibold rounded-full border ${isActive
-                                                ? 'bg-white/20 border-white/20 text-white'
-                                                : 'bg-gray-800 border-gray-700 text-gray-300 group-hover:bg-gray-700'
-                                            }`}>
-                                            {item.badge}
-                                        </span>
-                                    )}
-
-                                    {/* Active Indicator Dot */}
-                                    {isActive && (
-                                        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-white rounded-r-full shadow-[0_0_12px_rgba(255,255,255,0.6)] hidden" />
-                                    )}
-                                </button>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </nav>
-
-            {/* Footer */}
-            {footer && (
-                <div className="p-4 border-t border-white/5 bg-black/20 backdrop-blur-md relative z-10">
-                    {footer}
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/logging/LogViewer.tsx

@@ -1,90 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface LogEntry {
-    id: string;
-    timestamp: string;
-    level: string;
-    message: string;
-    source: string;
-}
-
-export const LogViewer: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [logs, setLogs] = useState<LogEntry[]>([]);
-    const [filter, setFilter] = useState<string>('');
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchLogs();
-        const interval = setInterval(fetchLogs, 10000); // Refresh every 10s
-        return () => clearInterval(interval);
-    }, [filter]);
-
-    const fetchLogs = async () => {
-        try {
-            const url = filter
-                ? `${apiUrl}/api/logs?level=${filter}`
-                : `${apiUrl}/api/logs`;
-            const response = await fetch(url);
-            if (response.ok) {
-                const data = await response.json();
-                setLogs(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch logs:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const getLevelColor = (level: string) => {
-        switch (level.toUpperCase()) {
-            case 'ERROR': return 'text-red-600 bg-red-50';
-            case 'WARNING': return 'text-yellow-600 bg-yellow-50';
-            case 'INFO': return 'text-blue-600 bg-blue-50';
-            default: return 'text-gray-600 bg-gray-50';
-        }
-    };
-
-    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">System Logs</h3>
-                <select
-                    value={filter}
-                    onChange={(e) => setFilter(e.target.value)}
-                    className="px-3 py-1 border border-gray-300 rounded-md text-sm"
-                >
-                    <option value="">All Levels</option>
-                    <option value="INFO">Info</option>
-                    <option value="WARNING">Warning</option>
-                    <option value="ERROR">Error</option>
-                </select>
-            </div>
-
-            {loading ? (
-                <div className="text-center py-8 text-gray-500">Loading logs...</div>
-            ) : (
-                <div className="space-y-2 max-h-96 overflow-y-auto">
-                    {logs.map((log) => (
-                        <div key={log.id} className="p-3 bg-gray-50 rounded border border-gray-200">
-                            <div className="flex items-start gap-3">
-                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${getLevelColor(log.level)}`}>
-                                    {log.level}
-                                </span>
-                                <div className="flex-1 min-w-0">
-                                    <p className="text-sm text-gray-900">{log.message}</p>
-                                    <div className="flex gap-4 mt-1 text-xs text-gray-500">
-                                        <span>{new Date(log.timestamp).toLocaleString()}</span>
-                                        <span>{log.source}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/notifications/NotificationFeed.tsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import { useNotifications, type Notification } from '../../hooks/useNotifications';
-// import { Button } from '../shared/Button';
-import { BellIcon, CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
-import { Popover, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
-import { clsx } from 'clsx';
-
-const NotificationIcon = ({ type }: { type: Notification['type'] }) => {
-    switch (type) {
-        case 'success': return <CheckCircleIcon className="h-6 w-6 text-green-500" />;
-        case 'warning': return <ExclamationTriangleIcon className="h-6 w-6 text-yellow-500" />;
-        case 'error': return <XCircleIcon className="h-6 w-6 text-red-500" />;
-        default: return <InformationCircleIcon className="h-6 w-6 text-blue-500" />;
-    }
-};
-
-export const NotificationFeed: React.FC = () => {
-    const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
-
-    return (
-        <Popover className="relative">
-            {({ open }) => (
-                <>
-                    <Popover.Button className={clsx(
-                        "relative p-2 rounded-full hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primus-500",
-                        open && "bg-gray-100"
-                    )}>
-                        <BellIcon className="h-6 w-6 text-gray-600" aria-hidden="true" />
-                        {unreadCount > 0 && (
-                            <span className="absolute top-1 right-1 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-white" />
-                        )}
-                    </Popover.Button>
-                    <Transition
-                        as={Fragment}
-                        enter="transition ease-out duration-200"
-                        enterFrom="opacity-0 translate-y-1"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-1"
-                    >
-                        <Popover.Panel className="absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:w-96">
-                            <div className="px-4 py-3 flex items-center justify-between border-b border-gray-100">
-                                <h3 className="text-sm font-semibold text-gray-900">Notifications</h3>
-                                {unreadCount > 0 && (
-                                    <button
-                                        onClick={() => markAllAsRead()}
-                                        className="text-xs font-medium text-primus-600 hover:text-primus-500"
-                                    >
-                                        Mark all as read
-                                    </button>
-                                )}
-                            </div>
-                            <div className="max-h-96 overflow-y-auto">
-                                {notifications.length === 0 ? (
-                                    <div className="px-4 py-6 text-center text-sm text-gray-500">
-                                        No new notifications
-                                    </div>
-                                ) : (
-                                    <div className="divide-y divide-gray-100">
-                                        {notifications.map((notification) => (
-                                            <div
-                                                key={notification.id}
-                                                className={clsx(
-                                                    "flex gap-3 px-4 py-4 hover:bg-gray-50 transition-colors cursor-pointer",
-                                                    !notification.read && "bg-blue-50/50"
-                                                )}
-                                                onClick={() => markAsRead(notification.id)}
-                                            >
-                                                <div className="flex-shrink-0 mt-0.5">
-                                                    <NotificationIcon type={notification.type} />
-                                                </div>
-                                                <div className="flex-1 min-w-0">
-                                                    <p className="text-sm font-medium text-gray-900">
-                                                        {notification.title}
-                                                    </p>
-                                                    <p className="text-sm text-gray-500 truncate">
-                                                        {notification.message}
-                                                    </p>
-                                                    <p className="mt-1 text-xs text-gray-400">
-                                                        {new Date(notification.timestamp).toLocaleDateString()}
-                                                    </p>
-                                                </div>
-                                                {!notification.read && (
-                                                    <div className="flex-shrink-0 self-center">
-                                                        <span className="block h-2 w-2 rounded-full bg-primus-500" />
-                                                    </div>
-                                                )}
-                                            </div>
-                                        ))}
-                                    </div>
-                                )}
-                            </div>
-                            <div className="border-t border-gray-100 px-4 py-2">
-                                <a href="#" className="block text-center text-sm font-medium text-primus-600 hover:text-primus-500">
-                                    View all notifications
-                                </a>
-                            </div>
-                        </Popover.Panel>
-                    </Transition>
-                </>
-            )}
-        </Popover>
-    );
-};