primus-saas-react 1.0.3 → 1.0.5

package/src/components/notifications/PrimusNotificationCenter.tsx

@@ -1,282 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { Bell, Send, X, Check, AlertTriangle, Info, AlertCircle } from 'lucide-react';
-import { usePrimusTheme, PrimusTheme, themeColors } from '../../context/PrimusThemeProvider';
-
-interface Notification {
-    id: string;
-    title: string;
-    message: string;
-    type: 'info' | 'success' | 'warning' | 'error';
-    timestamp: string;
-    read: boolean;
-}
-
-const API_URL = 'http://localhost:5222';
-
-interface PrimusNotificationCenterProps {
-    /** Override the theme from context (optional) */
-    theme?: PrimusTheme;
-    /** Custom API URL (optional) */
-    apiUrl?: string;
-}
-
-/**
- * PrimusNotificationCenter - Enterprise Notification Component
- * 
- * Features:
- * - Automatic theme inheritance from PrimusThemeProvider
- * - Bell icon with animated badge
- * - Admin panel for sending notifications
- * - Real-time polling (3 second intervals)
- * - Type-specific icons and colors
- * 
- * @example
- * ```tsx
- * // With theme provider (recommended)
- * <PrimusThemeProvider defaultTheme="dark">
- *   <PrimusNotificationCenter />
- * </PrimusThemeProvider>
- * 
- * // With manual override
- * <PrimusNotificationCenter theme="light" />
- * ```
- */
-export function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }: PrimusNotificationCenterProps) {
-    const themeContext = usePrimusTheme();
-    const theme = themeOverride || themeContext.theme;
-    const t = themeColors[theme];
-
-    const [notifications, setNotifications] = useState<Notification[]>([]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [showSendForm, setShowSendForm] = useState(false);
-    const [unreadCount, setUnreadCount] = useState(0);
-    const [newTitle, setNewTitle] = useState('');
-    const [newMessage, setNewMessage] = useState('');
-    const [newType, setNewType] = useState<'info' | 'success' | 'warning' | 'error'>('info');
-    const [sending, setSending] = useState(false);
-
-    const fetchNotifications = useCallback(async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/notifications`);
-            if (response.ok) {
-                const data = await response.json();
-                setNotifications(data);
-                setUnreadCount(data.filter((n: Notification) => !n.read).length);
-            }
-        } catch (error) {
-            // Silent fail - backend may not be connected
-        }
-    }, [apiUrl]);
-
-    useEffect(() => {
-        fetchNotifications();
-        const interval = setInterval(fetchNotifications, 3000);
-        return () => clearInterval(interval);
-    }, [fetchNotifications]);
-
-    const sendNotification = async () => {
-        if (!newTitle.trim() || !newMessage.trim()) return;
-        setSending(true);
-        try {
-            const response = await fetch(`${apiUrl}/api/notifications`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ title: newTitle, message: newMessage, type: newType })
-            });
-            if (response.ok) {
-                setNewTitle('');
-                setNewMessage('');
-                setNewType('info');
-                setShowSendForm(false);
-                await fetchNotifications();
-            }
-        } catch (error) {
-            console.error('Failed to send notification');
-        }
-        setSending(false);
-    };
-
-    const markAsRead = async (id: string) => {
-        try {
-            await fetch(`${apiUrl}/api/notifications/${id}/read`, { method: 'PUT' });
-            setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
-            setUnreadCount(prev => Math.max(0, prev - 1));
-        } catch {
-            // Silent fail
-        }
-    };
-
-    const getTypeIcon = (type: string) => {
-        const iconClass = "h-4 w-4";
-        switch (type) {
-            case 'success': return <Check className={`${iconClass} ${t.success}`} />;
-            case 'warning': return <AlertTriangle className={`${iconClass} ${t.warning}`} />;
-            case 'error': return <AlertCircle className={`${iconClass} ${t.error}`} />;
-            default: return <Info className={`${iconClass} ${t.info}`} />;
-        }
-    };
-
-    const getTypeBg = (type: string) => {
-        if (theme === 'light') {
-            switch (type) {
-                case 'success': return 'bg-emerald-50 border-emerald-200';
-                case 'warning': return 'bg-amber-50 border-amber-200';
-                case 'error': return 'bg-rose-50 border-rose-200';
-                default: return 'bg-blue-50 border-blue-200';
-            }
-        } else {
-            switch (type) {
-                case 'success': return 'bg-emerald-900/20 border-emerald-800';
-                case 'warning': return 'bg-amber-900/20 border-amber-800';
-                case 'error': return 'bg-rose-900/20 border-rose-800';
-                default: return 'bg-blue-900/20 border-blue-800';
-            }
-        }
-    };
-
-    return (
-        <div className="relative font-sans">
-            {/* Bell Button */}
-            <button
-                onClick={() => setIsOpen(!isOpen)}
-                className={`relative p-2.5 rounded-xl ${t.bgHover} transition-all duration-200 group`}
-            >
-                <Bell className={`h-5 w-5 ${t.textSecondary} group-hover:${t.accentText} transition-colors`} />
-                {unreadCount > 0 && (
-                    <span className={`absolute -top-0.5 -right-0.5 h-5 w-5 ${t.badge} rounded-full flex items-center justify-center text-white text-xs font-bold shadow-lg animate-pulse`}>
-                        {unreadCount > 9 ? '9+' : unreadCount}
-                    </span>
-                )}
-            </button>
-
-            {/* Dropdown Panel */}
-            {isOpen && (
-                <>
-                    <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
-
-                    <div className={`absolute right-0 mt-3 w-96 ${t.bg} border ${t.border} rounded-2xl shadow-2xl z-50 overflow-hidden`}>
-                        {/* Header */}
-                        <div className={`px-5 py-4 border-b ${t.border} flex items-center justify-between`}>
-                            <div className="flex items-center gap-3">
-                                <div className={`p-2 rounded-xl ${t.bgTertiary}`}>
-                                    <Bell className={`h-5 w-5 ${t.accentText}`} />
-                                </div>
-                                <div>
-                                    <h3 className={`font-semibold ${t.text}`}>Notifications</h3>
-                                    <p className={`text-xs ${t.textMuted}`}>
-                                        {unreadCount > 0 ? `${unreadCount} unread` : 'All caught up!'}
-                                    </p>
-                                </div>
-                            </div>
-                            <button onClick={() => setIsOpen(false)} className={`p-1.5 rounded-lg ${t.bgHover} transition-colors`}>
-                                <X className={`h-4 w-4 ${t.textSecondary}`} />
-                            </button>
-                        </div>
-
-                        {/* Admin Panel */}
-                        <div className={`p-4 border-b ${t.border} ${t.bgSecondary}`}>
-                            <button
-                                onClick={() => setShowSendForm(!showSendForm)}
-                                className={`w-full px-4 py-2.5 ${t.accent} ${t.accentHover} rounded-xl text-white text-sm font-medium flex items-center justify-center gap-2 transition-all duration-200 shadow-lg`}
-                            >
-                                <Send className="h-4 w-4" />
-                                Send New Notification
-                            </button>
-
-                            {showSendForm && (
-                                <div className="mt-4 space-y-3">
-                                    <input
-                                        type="text"
-                                        placeholder="Notification title..."
-                                        value={newTitle}
-                                        onChange={(e) => setNewTitle(e.target.value)}
-                                        className={`w-full px-4 py-2.5 ${t.bg} border ${t.border} rounded-xl ${t.text} text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
-                                    />
-                                    <input
-                                        type="text"
-                                        placeholder="Message content..."
-                                        value={newMessage}
-                                        onChange={(e) => setNewMessage(e.target.value)}
-                                        className={`w-full px-4 py-2.5 ${t.bg} border ${t.border} rounded-xl ${t.text} text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
-                                    />
-                                    <div className="flex gap-2">
-                                        {(['info', 'success', 'warning', 'error'] as const).map((type) => (
-                                            <button
-                                                key={type}
-                                                onClick={() => setNewType(type)}
-                                                className={`flex-1 py-2 px-3 rounded-lg text-xs font-medium capitalize transition-all border ${newType === type
-                                                    ? `${getTypeBg(type)} ${t.text}`
-                                                    : `${t.bg} ${t.textSecondary} ${t.border} ${t.bgHover}`
-                                                    }`}
-                                            >
-                                                {type}
-                                            </button>
-                                        ))}
-                                    </div>
-                                    <button
-                                        onClick={sendNotification}
-                                        disabled={sending || !newTitle.trim() || !newMessage.trim()}
-                                        className={`w-full py-2.5 ${t.accent} ${t.accentHover} disabled:opacity-50 rounded-xl text-white text-sm font-medium`}
-                                    >
-                                        {sending ? 'Sending...' : 'Send Notification'}
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Notification List */}
-                        <div className="max-h-80 overflow-y-auto">
-                            {notifications.length === 0 ? (
-                                <div className="px-5 py-12 text-center">
-                                    <div className={`mx-auto w-12 h-12 rounded-full ${t.bgSecondary} flex items-center justify-center mb-3`}>
-                                        <Bell className={`h-6 w-6 ${t.textMuted}`} />
-                                    </div>
-                                    <p className={`${t.textSecondary} text-sm`}>No notifications yet</p>
-                                </div>
-                            ) : (
-                                <div className={`divide-y ${t.borderSecondary}`}>
-                                    {notifications.map((notification) => (
-                                        <div
-                                            key={notification.id}
-                                            onClick={() => markAsRead(notification.id)}
-                                            className={`px-5 py-4 ${t.bgHover} transition-colors cursor-pointer ${!notification.read ? t.bgTertiary : ''
-                                                }`}
-                                        >
-                                            <div className="flex gap-3">
-                                                <div className={`mt-0.5 p-2 rounded-lg border ${getTypeBg(notification.type)}`}>
-                                                    {getTypeIcon(notification.type)}
-                                                </div>
-                                                <div className="flex-1 min-w-0">
-                                                    <div className="flex items-center gap-2">
-                                                        <p className={`text-sm font-medium ${t.text}`}>{notification.title}</p>
-                                                        {!notification.read && <span className={`h-2 w-2 rounded-full ${t.badge}`} />}
-                                                    </div>
-                                                    <p className={`text-sm ${t.textSecondary} mt-0.5 line-clamp-2`}>{notification.message}</p>
-                                                    <p className={`text-xs ${t.textMuted} mt-1.5`}>
-                                                        {new Date(notification.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Footer */}
-                        {notifications.length > 0 && (
-                            <div className={`px-5 py-3 border-t ${t.border} ${t.bgSecondary} flex items-center justify-between`}>
-                                <button onClick={fetchNotifications} className={`text-sm ${t.accentText} font-medium`}>Refresh</button>
-                                <button className={`text-sm ${t.textSecondary}`}>View all →</button>
-                            </div>
-                        )}
-                    </div>
-                </>
-            )}
-        </div>
-    );
-}
-
-// Aliases
-export const NotificationBell = PrimusNotificationCenter;
-export const PrimusNotifications = PrimusNotificationCenter;

package/src/components/payments/CheckoutForm.tsx

@@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from '../shared/Button';
-import { Input } from '../shared/Input';
-import { LockClosedIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
-
-export interface CheckoutFormProps {
-    amount: number;
-    currency?: string;
-    apiUrl?: string;
-    onSuccess?: (result: any) => void;
-    onError?: (error: string) => void;
-}
-
-export const CheckoutForm: React.FC<CheckoutFormProps> = ({
-    amount,
-    currency = 'USD',
-    apiUrl = 'http://localhost:5221',
-    onSuccess,
-    onError
-}) => {
-    const [loading, setLoading] = useState(false);
-    const [cardholderName, setCardholderName] = useState('');
-    const [cardNumber, setCardNumber] = useState('');
-    const [expiry, setExpiry] = useState('');
-    const [cvc, setCvc] = useState('');
-    const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState(false);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError(null);
-        setSuccess(false);
-        setLoading(true);
-
-        try {
-            const response = await fetch(`${apiUrl}/api/payments/charge`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    amount,
-                    currency,
-                    cardholderName,
-                    cardNumber: cardNumber.replace(/\s/g, ''),
-                    expiry,
-                    cvc
-                })
-            });
-
-            const data = await response.json();
-
-            if (!response.ok) {
-                throw new Error(data.error || 'Payment failed');
-            }
-
-            setSuccess(true);
-            onSuccess?.(data);
-
-            // Reset form after success
-            setTimeout(() => {
-                setCardholderName('');
-                setCardNumber('');
-                setExpiry('');
-                setCvc('');
-                setSuccess(false);
-            }, 3000);
-
-        } catch (err: any) {
-            const errorMessage = err.message || 'Payment processing failed';
-            setError(errorMessage);
-            onError?.(errorMessage);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
-            <div className="flex justify-between items-center mb-6">
-                <h3 className="text-lg font-medium text-gray-900">Payment Details</h3>
-                <div className="flex items-center text-gray-500 text-sm">
-                    <LockClosedIcon className="h-4 w-4 mr-1" />
-                    Secure Payment
-                </div>
-            </div>
-
-            <div className="mb-6 p-4 bg-gray-50 rounded-lg flex justify-between items-center">
-                <span className="text-gray-600">Total to pay</span>
-                <span className="text-2xl font-bold text-gray-900">
-                    {new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)}
-                </span>
-            </div>
-
-            {error && (
-                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2">
-                    <XCircleIcon className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-red-700">{error}</p>
-                </div>
-            )}
-
-            {success && (
-                <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex items-start gap-2">
-                    <CheckCircleIcon className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-green-700">Payment successful!</p>
-                </div>
-            )}
-
-            <form onSubmit={handleSubmit} className="space-y-4">
-                <Input
-                    label="Cardholder Name"
-                    placeholder="John Doe"
-                    value={cardholderName}
-                    onChange={e => setCardholderName(e.target.value)}
-                    required
-                    disabled={loading}
-                />
-
-                <div className="relative">
-                    <Input
-                        label="Card Number"
-                        placeholder="4242 4242 4242 4242"
-                        value={cardNumber}
-                        onChange={e => setCardNumber(e.target.value)}
-                        required
-                        disabled={loading}
-                    />
-                    <div className="absolute right-3 top-[34px] flex gap-1">
-                        <div className="h-5 w-8 bg-gray-200 rounded"></div>
-                        <div className="h-5 w-8 bg-gray-200 rounded"></div>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                    <Input
-                        label="Expiry Date"
-                        placeholder="MM/YY"
-                        value={expiry}
-                        onChange={e => setExpiry(e.target.value)}
-                        maxLength={5}
-                        required
-                        disabled={loading}
-                    />
-                    <Input
-                        label="CVC"
-                        placeholder="123"
-                        value={cvc}
-                        onChange={e => setCvc(e.target.value)}
-                        maxLength={4}
-                        required
-                        disabled={loading}
-                    />
-                </div>
-
-                <div className="pt-4">
-                    <Button type="submit" className="w-full bg-primus-600 hover:bg-primus-700" size="lg" disabled={loading}>
-                        {loading ? 'Processing...' : `Pay ${new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)}`}
-                    </Button>
-                    <p className="text-center text-xs text-gray-400 mt-3">
-                        Powered by Primus Payments. Your data is encrypted.
-                    </p>
-                    <p className="text-center text-xs text-gray-500 mt-2">
-                        Test card: 4242 4242 4242 4242
-                    </p>
-                </div>
-            </form>
-        </div>
-    );
-};

package/src/components/security/SecurityDashboard.tsx

@@ -1,83 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface Vulnerability {
-    id: string;
-    severity: string;
-    type: string;
-    title: string;
-    description: string;
-    file?: string;
-    line?: number;
-    recommendation: string;
-}
-
-export const SecurityDashboard: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [vulnerabilities, setVulnerabilities] = useState<Vulnerability[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchVulnerabilities();
-    }, []);
-
-    const fetchVulnerabilities = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/security/vulnerabilities`);
-            if (response.ok) {
-                const data = await response.json();
-                setVulnerabilities(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch vulnerabilities:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const getSeverityColor = (severity: string) => {
-        switch (severity.toLowerCase()) {
-            case 'critical': return 'bg-red-100 text-red-800';
-            case 'high': return 'bg-orange-100 text-orange-800';
-            case 'medium': return 'bg-yellow-100 text-yellow-800';
-            case 'low': return 'bg-blue-100 text-blue-800';
-            default: return 'bg-gray-100 text-gray-800';
-        }
-    };
-
-    if (loading) return <div className="p-4">Scanning for vulnerabilities...</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">Security Dashboard</h3>
-                <button
-                    onClick={fetchVulnerabilities}
-                    className="px-3 py-1 bg-primus-600 text-white rounded text-sm hover:bg-primus-700"
-                >
-                    Rescan
-                </button>
-            </div>
-
-            <div className="space-y-3">
-                {vulnerabilities.map((vuln) => (
-                    <div key={vuln.id} className="p-4 border border-gray-200 rounded-lg">
-                        <div className="flex justify-between items-start mb-2">
-                            <h4 className="font-medium text-gray-900">{vuln.title}</h4>
-                            <span className={`px-2 py-1 rounded text-xs font-medium ${getSeverityColor(vuln.severity)}`}>
-                                {vuln.severity}
-                            </span>
-                        </div>
-                        <p className="text-sm text-gray-600 mb-2">{vuln.description}</p>
-                        {vuln.file && (
-                            <p className="text-xs text-gray-500 mb-2">
-                                {vuln.file}{vuln.line ? `:${vuln.line}` : ''}
-                            </p>
-                        )}
-                        <p className="text-sm text-primus-600">💡 {vuln.recommendation}</p>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/shared/Button.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
-        return (
-            <button
-                ref={ref}
-                className={cn(
-                    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-                    {
-                        'bg-gray-900 text-gray-50 hover:bg-gray-900/90': variant === 'primary',
-                        'bg-gray-100 text-gray-900 hover:bg-gray-100/80': variant === 'secondary',
-                        'border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900': variant === 'outline',
-                        'hover:bg-gray-100 hover:text-gray-900': variant === 'ghost',
-                        'h-9 px-3': size === 'sm',
-                        'h-10 px-4 py-2': size === 'md',
-                        'h-11 px-8': size === 'lg',
-                    },
-                    className
-                )}
-                {...props}
-            />
-        );
-    }
-);

package/src/components/shared/Input.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-    error?: string;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, label, error, ...props }, ref) => {
-        return (
-            <div className="w-full">
-                {label && (
-                    <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-gray-700">
-                        {label}
-                    </label>
-                )}
-                <input
-                    ref={ref}
-                    className={cn(
-                        "flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                        error && "border-red-500 focus-visible:ring-red-500",
-                        className
-                    )}
-                    {...props}
-                />
-                {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
-            </div>
-        );
-    }
-);