primus-saas-react 1.0.3 → 1.0.5

package/src/components/storage/FileUploader.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-
-export const FileUploader: React.FC<{ apiUrl?: string; onUploadComplete?: (file: any) => void }> = ({
-    apiUrl = 'http://localhost:5221',
-    onUploadComplete
-}) => {
-    const [uploading, setUploading] = useState(false);
-    const [dragActive, setDragActive] = useState(false);
-
-    const handleUpload = async (file: File) => {
-        setUploading(true);
-        const formData = new FormData();
-        formData.append('file', file);
-
-        try {
-            const response = await fetch(`${apiUrl}/api/storage/upload`, {
-                method: 'POST',
-                body: formData
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                onUploadComplete?.(data);
-            }
-        } catch (error) {
-            console.error('Upload failed:', error);
-        } finally {
-            setUploading(false);
-        }
-    };
-
-    const handleDrop = (e: React.DragEvent) => {
-        e.preventDefault();
-        setDragActive(false);
-
-        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-            handleUpload(e.dataTransfer.files[0]);
-        }
-    };
-
-    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">Upload File</h3>
-
-            <div
-                className={`border-2 border-dashed rounded-lg p-8 text-center ${dragActive ? 'border-primus-500 bg-primus-50' : 'border-gray-300'
-                    }`}
-                onDragOver={(e) => { e.preventDefault(); setDragActive(true); }}
-                onDragLeave={() => setDragActive(false)}
-                onDrop={handleDrop}
-            >
-                {uploading ? (
-                    <div className="text-gray-600">Uploading...</div>
-                ) : (
-                    <>
-                        <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
-                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-                        </svg>
-                        <p className="mt-2 text-sm text-gray-600">
-                            Drag and drop a file here, or click to select
-                        </p>
-                        <input
-                            type="file"
-                            className="hidden"
-                            id="file-upload"
-                            onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
-                        />
-                        <label
-                            htmlFor="file-upload"
-                            className="mt-4 inline-block px-4 py-2 bg-primus-600 text-white rounded cursor-pointer hover:bg-primus-700"
-                        >
-                            Select File
-                        </label>
-                    </>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/context/PrimusProvider.tsx

@@ -1,156 +0,0 @@
-import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
-
-interface PrimusUser {
-    id?: string;
-    name: string;
-    email: string;
-    roles?: string[];
-    claims?: Record<string, any>;
-}
-
-interface PrimusAuthContextType {
-    isAuthenticated: boolean;
-    user: PrimusUser | null;
-    login: (credentials: { email: string; password: string } | { provider: 'auth0' | 'azure' | 'google' | 'github' }) => Promise<{ success: boolean; error?: string }>;
-    logout: () => Promise<void>;
-    token: string | null;
-    isLoading: boolean;
-}
-
-const PrimusAuthContext = createContext<PrimusAuthContextType | undefined>(undefined);
-
-export interface PrimusProviderProps {
-    children: React.ReactNode;
-    /** Base URL for authentication API (e.g., http://localhost:5221) */
-    authority: string;
-    clientId: string;
-    redirectUri?: string;
-    /** Called after successful login */
-    onLoginSuccess?: (user: PrimusUser, token: string) => void;
-    /** Called on login failure */
-    onLoginError?: (error: string) => void;
-}
-
-export const PrimusProvider: React.FC<PrimusProviderProps> = ({
-    children,
-    authority,
-    clientId,
-    onLoginSuccess,
-    onLoginError,
-}) => {
-    // Suppress unused warning
-    void clientId;
-
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [user, setUser] = useState<PrimusUser | null>(null);
-    const [token, setToken] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Check for existing session on mount
-    useEffect(() => {
-        const storedToken = localStorage.getItem('primus_token');
-        const storedUser = localStorage.getItem('primus_user');
-        if (storedToken && storedUser) {
-            try {
-                setToken(storedToken);
-                setUser(JSON.parse(storedUser));
-                setIsAuthenticated(true);
-            } catch {
-                localStorage.removeItem('primus_token');
-                localStorage.removeItem('primus_user');
-            }
-        }
-    }, []);
-
-    const login = useCallback(async (
-        credentials: { email: string; password: string } | { provider: 'auth0' | 'azure' | 'google' | 'github' }
-    ): Promise<{ success: boolean; error?: string }> => {
-        setIsLoading(true);
-
-        try {
-            let endpoint: string;
-            let body: any;
-
-            if ('provider' in credentials) {
-                // Social/SSO login
-                endpoint = `${authority}/auth/${credentials.provider}`;
-                body = {};
-            } else {
-                // Email/password login
-                endpoint = `${authority}/auth/local`;
-                body = { email: credentials.email, password: credentials.password };
-            }
-
-            const response = await fetch(endpoint, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(body),
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                const errorMsg = errorData.message || `Login failed (${response.status})`;
-                onLoginError?.(errorMsg);
-                return { success: false, error: errorMsg };
-            }
-
-            const data = await response.json();
-            const accessToken = data.access_token || data.token;
-
-            // Parse user from token or response
-            const userData: PrimusUser = data.user || {
-                name: 'Authenticated User',
-                email: 'provider' in credentials ? `${credentials.provider}@primus.local` : credentials.email,
-            };
-
-            // Store session
-            localStorage.setItem('primus_token', accessToken);
-            localStorage.setItem('primus_user', JSON.stringify(userData));
-
-            setToken(accessToken);
-            setUser(userData);
-            setIsAuthenticated(true);
-
-            onLoginSuccess?.(userData, accessToken);
-            return { success: true };
-
-        } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : 'Network error';
-            onLoginError?.(errorMsg);
-            return { success: false, error: errorMsg };
-        } finally {
-            setIsLoading(false);
-        }
-    }, [authority, onLoginSuccess, onLoginError]);
-
-    const logout = useCallback(async () => {
-        localStorage.removeItem('primus_token');
-        localStorage.removeItem('primus_user');
-        setToken(null);
-        setIsAuthenticated(false);
-        setUser(null);
-    }, []);
-
-    return (
-        <PrimusAuthContext.Provider value={{ isAuthenticated, user, login, logout, token, isLoading }}>
-            {children}
-        </PrimusAuthContext.Provider>
-    );
-};
-
-export const usePrimusAuth = () => {
-    const context = useContext(PrimusAuthContext);
-
-    // Fallback for components used outside provider (standalone mode)
-    if (context === undefined) {
-        return {
-            isAuthenticated: false,
-            user: null,
-            login: async () => ({ success: false, error: 'PrimusProvider not configured' }),
-            logout: async () => { },
-            token: null,
-            isLoading: false,
-        };
-    }
-    return context;
-};

package/src/context/PrimusThemeProvider.tsx

@@ -1,160 +0,0 @@
-import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
-
-export type PrimusTheme = 'light' | 'dark';
-
-interface ThemeColors {
-    bg: string;
-    bgSecondary: string;
-    bgTertiary: string;
-    bgHover: string;
-    border: string;
-    borderSecondary: string;
-    text: string;
-    textSecondary: string;
-    textMuted: string;
-    accent: string;
-    accentHover: string;
-    accentText: string;
-    badge: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-}
-
-export const themeColors: Record<PrimusTheme, ThemeColors> = {
-    light: {
-        bg: 'bg-white',
-        bgSecondary: 'bg-gray-50',
-        bgTertiary: 'bg-gray-100',
-        bgHover: 'hover:bg-gray-100',
-        border: 'border-gray-200',
-        borderSecondary: 'border-gray-100',
-        text: 'text-gray-900',
-        textSecondary: 'text-gray-600',
-        textMuted: 'text-gray-400',
-        accent: 'bg-violet-600',
-        accentHover: 'hover:bg-violet-500',
-        accentText: 'text-violet-600',
-        badge: 'bg-orange-500',
-        success: 'text-emerald-600',
-        warning: 'text-amber-600',
-        error: 'text-rose-600',
-        info: 'text-blue-600',
-    },
-    dark: {
-        bg: 'bg-gray-900',
-        bgSecondary: 'bg-gray-800',
-        bgTertiary: 'bg-gray-800/50',
-        bgHover: 'hover:bg-gray-800',
-        border: 'border-gray-700',
-        borderSecondary: 'border-gray-800',
-        text: 'text-white',
-        textSecondary: 'text-gray-400',
-        textMuted: 'text-gray-500',
-        accent: 'bg-blue-600',
-        accentHover: 'hover:bg-blue-500',
-        accentText: 'text-blue-400',
-        badge: 'bg-rose-500',
-        success: 'text-emerald-400',
-        warning: 'text-amber-400',
-        error: 'text-rose-400',
-        info: 'text-blue-400',
-    }
-};
-
-interface PrimusThemeContextValue {
-    theme: PrimusTheme;
-    colors: ThemeColors;
-    setTheme: (theme: PrimusTheme) => void;
-    toggleTheme: () => void;
-}
-
-const PrimusThemeContext = createContext<PrimusThemeContextValue | undefined>(undefined);
-
-interface PrimusThemeProviderProps {
-    children: ReactNode;
-    defaultTheme?: PrimusTheme;
-}
-
-/**
- * PrimusThemeProvider - Global Theme Context for Primus UI Components
- * 
- * Wrap your app with this provider to enable consistent theming across all Primus components.
- * 
- * @example
- * ```tsx
- * <PrimusThemeProvider defaultTheme="dark">
- *   <App />
- * </PrimusThemeProvider>
- * ```
- */
-export function PrimusThemeProvider({ children, defaultTheme = 'dark' }: PrimusThemeProviderProps) {
-    const [theme, setTheme] = useState<PrimusTheme>(defaultTheme);
-
-    const toggleTheme = useCallback(() => {
-        setTheme(prev => prev === 'dark' ? 'light' : 'dark');
-    }, []);
-
-    const value: PrimusThemeContextValue = {
-        theme,
-        colors: themeColors[theme],
-        setTheme,
-        toggleTheme,
-    };
-
-    return (
-        <PrimusThemeContext.Provider value={value}>
-            {children}
-        </PrimusThemeContext.Provider>
-    );
-}
-
-/**
- * usePrimusTheme - Hook to access the current Primus theme
- * 
- * @example
- * ```tsx
- * const { theme, colors, toggleTheme } = usePrimusTheme();
- * ```
- */
-export function usePrimusTheme(): PrimusThemeContextValue {
-    const context = useContext(PrimusThemeContext);
-
-    // Fallback for components used outside provider
-    if (!context) {
-        return {
-            theme: 'dark',
-            colors: themeColors.dark,
-            setTheme: () => console.warn('PrimusThemeProvider not found'),
-            toggleTheme: () => console.warn('PrimusThemeProvider not found'),
-        };
-    }
-
-    return context;
-}
-
-/**
- * PrimusThemeToggle - A button to toggle between light and dark themes
- */
-export function PrimusThemeToggle() {
-    const { theme, toggleTheme, colors } = usePrimusTheme();
-
-    return (
-        <button
-            onClick={toggleTheme}
-            className={`p-2 rounded-lg ${colors.bgHover} transition-colors`}
-            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-        >
-            {theme === 'dark' ? (
-                <svg className="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                </svg>
-            ) : (
-                <svg className="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                </svg>
-            )}
-        </button>
-    );
-}

package/src/hooks/useNotifications.ts

@@ -1,58 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export interface Notification {
-    id: string;
-    title: string;
-    message: string;
-    type: 'info' | 'success' | 'warning' | 'error';
-    timestamp: string;
-    read: boolean;
-}
-
-export const useNotifications = (apiUrl: string = 'http://localhost:5221') => {
-    const [notifications, setNotifications] = useState<Notification[]>([]);
-    const [unreadCount, setUnreadCount] = useState(0);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchNotifications();
-
-        // Poll for new notifications every 3 seconds (near real-time for demo)
-        const interval = setInterval(fetchNotifications, 3000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const fetchNotifications = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/notifications`);
-            if (response.ok) {
-                const data = await response.json();
-                setNotifications(data);
-                setUnreadCount(data.filter((n: Notification) => !n.read).length);
-            }
-        } catch (error) {
-            console.error('Failed to fetch notifications:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const markAsRead = (id: string) => {
-        setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
-        setUnreadCount(prev => Math.max(0, prev - 1));
-    };
-
-    const markAllAsRead = () => {
-        setNotifications(prev => prev.map(n => ({ ...n, read: true })));
-        setUnreadCount(0);
-    };
-
-    return {
-        notifications,
-        unreadCount,
-        loading,
-        markAsRead,
-        markAllAsRead,
-        refresh: fetchNotifications
-    };
-};

package/src/hooks/usePrimusAuth.ts

@@ -1,3 +0,0 @@
-import { usePrimusAuth } from '../context/PrimusProvider';
-
-export { usePrimusAuth };

package/src/hooks/useRealtimeNotifications.ts

@@ -1,114 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-export interface PrimusNotification {
-    id: string;
-    title: string;
-    message: string;
-    type: 'info' | 'success' | 'warning' | 'error';
-    timestamp: string;
-    read: boolean;
-}
-
-export interface UseRealtimeNotificationsOptions {
-    apiUrl: string;
-    pollInterval?: number; // milliseconds, default 3000
-    userId?: string;
-}
-
-/**
- * Hook for managing real-time notifications from Primus Backend.
- * Supports both polling and SignalR (when available).
- */
-export const useRealtimeNotifications = (options: UseRealtimeNotificationsOptions) => {
-    const { apiUrl, pollInterval = 3000, userId } = options;
-    const [notifications, setNotifications] = useState<PrimusNotification[]>([]);
-    const [unreadCount, setUnreadCount] = useState(0);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    const baseUrl = `${apiUrl}/api/notifications`;
-
-    const fetchNotifications = useCallback(async () => {
-        try {
-            const url = userId ? `${baseUrl}?userId=${userId}` : baseUrl;
-            const response = await fetch(url);
-            if (response.ok) {
-                const data = await response.json();
-                setNotifications(data);
-                setUnreadCount(data.filter((n: PrimusNotification) => !n.read).length);
-                setError(null);
-            }
-        } catch (err) {
-            setError('Failed to connect to notification service');
-        } finally {
-            setLoading(false);
-        }
-    }, [baseUrl, userId]);
-
-    const sendNotification = useCallback(async (
-        title: string,
-        message: string,
-        type: 'info' | 'success' | 'warning' | 'error' = 'info'
-    ) => {
-        try {
-            const response = await fetch(baseUrl, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ title, message, type, userId })
-            });
-            if (response.ok) {
-                // Immediately refresh to show the new notification
-                await fetchNotifications();
-                return true;
-            }
-            return false;
-        } catch {
-            return false;
-        }
-    }, [baseUrl, userId, fetchNotifications]);
-
-    const markAsRead = useCallback(async (id: string) => {
-        try {
-            await fetch(`${baseUrl}/${id}/read`, { method: 'PUT' });
-            setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
-            setUnreadCount(prev => Math.max(0, prev - 1));
-        } catch {
-            // Silently fail
-        }
-    }, [baseUrl]);
-
-    const markAllAsRead = useCallback(async () => {
-        // Mark all unread as read
-        const unread = notifications.filter(n => !n.read);
-        await Promise.all(unread.map(n => fetch(`${baseUrl}/${n.id}/read`, { method: 'PUT' })));
-        setNotifications(prev => prev.map(n => ({ ...n, read: true })));
-        setUnreadCount(0);
-    }, [notifications, baseUrl]);
-
-    const deleteNotification = useCallback(async (id: string) => {
-        try {
-            await fetch(`${baseUrl}/${id}`, { method: 'DELETE' });
-            setNotifications(prev => prev.filter(n => n.id !== id));
-        } catch {
-            // Silently fail
-        }
-    }, [baseUrl]);
-
-    useEffect(() => {
-        fetchNotifications();
-        const interval = setInterval(fetchNotifications, pollInterval);
-        return () => clearInterval(interval);
-    }, [fetchNotifications, pollInterval]);
-
-    return {
-        notifications,
-        unreadCount,
-        loading,
-        error,
-        sendNotification,
-        markAsRead,
-        markAllAsRead,
-        deleteNotification,
-        refresh: fetchNotifications
-    };
-};

package/src/index.ts

@@ -1,42 +0,0 @@
-// Export all new components
-export * from './components/banking/accounts/AccountDashboard';
-export * from './components/banking/kyc/KYCVerification';
-export * from './components/banking/loans/LoanCalculator';
-export * from './components/banking/credit/CreditScoreCard';
-export * from './components/insurance/quotes/QuoteComparison';
-export * from './components/insurance/agents/AgentDirectory';
-export * from './components/insurance/fraud/FraudDetectionDashboard';
-export * from './components/insurance/premium/PremiumCalculator';
-export * from './components/ai/AICopilot';
-export * from './components/storage/FileUploader';
-export * from './components/security/SecurityDashboard';
-
-// Existing exports
-export * from './components/auth/PrimusLogin';
-export * from './context/PrimusProvider';
-export * from './context/PrimusThemeProvider';
-export * from './components/notifications/NotificationFeed';
-export * from './components/notifications/PrimusNotificationCenter';
-export * from './hooks/useNotifications';
-export * from './hooks/useRealtimeNotifications';
-export * from './components/payments/CheckoutForm';
-export * from './components/documents/DocumentViewer';
-export * from './components/banking/cards/CreditCardVisual';
-export * from './components/banking/transactions/TransactionHistory';
-export * from './components/insurance/policies/PolicyCard';
-export * from './components/insurance/claims/ClaimStatusTracker';
-export * from './components/featureflags/FeatureFlagToggle';
-export * from './components/logging/LogViewer';
-
-// Layout components (NEW)
-export * from './components/layout/PrimusLayout';
-export * from './components/layout/PrimusSidebar';
-export * from './components/layout/PrimusHeader';
-
-// CRUD components (NEW)
-export * from './components/crud/PrimusDataTable';
-export * from './components/crud/PrimusModal';
-
-// Dashboard components (NEW)
-export * from './components/dashboard/PrimusDashboard';
-

package/tailwind.config.js

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ["./src/**/*.{js,ts,jsx,tsx}"],
-    theme: {
-        extend: {
-            colors: {
-                primus: {
-                    50: '#f0f9ff',
-                    100: '#e0f2fe',
-                    500: '#0ea5e9',
-                    600: '#0284c7',
-                    900: '#0c4a6e',
-                }
-            }
-        },
-    },
-    plugins: [],
-}

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ES2020",
-        "useDefineForClassFields": true,
-        "lib": [
-            "ES2020",
-            "DOM",
-            "DOM.Iterable"
-        ],
-        "module": "ESNext",
-        "skipLibCheck": true,
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "declaration": true,
-        "baseUrl": "."
-    },
-    "include": [
-        "src"
-    ]
-}