primus-saas-react 1.0.3 → 1.0.5

package/src/components/ai/AICopilot.tsx

@@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-
-export const AICopilot: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [messages, setMessages] = useState<Array<{ role: string; content: string }>>([]);
-    const [input, setInput] = useState('');
-    const [loading, setLoading] = useState(false);
-
-    const sendMessage = async () => {
-        if (!input.trim()) return;
-
-        const userMessage = { role: 'user', content: input };
-        setMessages(prev => [...prev, userMessage]);
-        setInput('');
-        setLoading(true);
-
-        try {
-            const response = await fetch(`${apiUrl}/api/ai/chat`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message: input })
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                setMessages(prev => [...prev, { role: 'assistant', content: data.message }]);
-            }
-        } catch (error) {
-            console.error('Failed to send message:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className="bg-white rounded-lg border border-gray-200 shadow-sm flex flex-col h-[600px]">
-            <div className="p-4 border-b border-gray-200">
-                <h3 className="text-lg font-medium text-gray-900">AI Copilot</h3>
-            </div>
-
-            <div className="flex-1 overflow-y-auto p-4 space-y-4">
-                {messages.map((msg, index) => (
-                    <div key={index} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-                        <div className={`max-w-[70%] p-3 rounded-lg ${msg.role === 'user'
-                            ? 'bg-primus-600 text-white'
-                            : 'bg-gray-100 text-gray-900'
-                            }`}>
-                            {msg.content}
-                        </div>
-                    </div>
-                ))}
-                {loading && (
-                    <div className="flex justify-start">
-                        <div className="bg-gray-100 p-3 rounded-lg">
-                            <div className="flex gap-1">
-                                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-                                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            <div className="p-4 border-t border-gray-200">
-                <div className="flex gap-2">
-                    <input
-                        type="text"
-                        value={input}
-                        onChange={(e) => setInput(e.target.value)}
-                        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
-                        placeholder="Ask me anything..."
-                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primus-500"
-                        disabled={loading}
-                    />
-                    <button
-                        onClick={sendMessage}
-                        disabled={loading || !input.trim()}
-                        className="px-4 py-2 bg-primus-600 text-white rounded-lg hover:bg-primus-700 disabled:opacity-50"
-                    >
-                        Send
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/auth/PrimusLogin.tsx

@@ -1,298 +0,0 @@
-import { useState } from 'react';
-import { usePrimusTheme } from '../../context/PrimusThemeProvider';
-
-// ============================================================
-// TYPES
-// ============================================================
-
-export type SocialProvider = 'google' | 'azure' | 'github' | 'apple' | 'microsoft' | 'facebook';
-
-export interface PrimusLoginProps {
-    /** Callback when login is successful */
-    onLogin?: (credentials: { username: string; password: string }) => void;
-
-    /** 
-     * Social login providers to display
-     * @example socialProviders={['google', 'azure']}
-     */
-    socialProviders?: SocialProvider[];
-
-    /** Callback when social provider is clicked */
-    onSocialLogin?: (provider: SocialProvider) => void;
-
-    /** OAuth endpoint base URL (default: /api/auth) */
-    authEndpoint?: string;
-
-    /** Show email/password form (default: true) */
-    showEmailLogin?: boolean;
-
-    /** App title displayed above form */
-    title?: string;
-
-    /** Subtitle/description text */
-    subtitle?: string;
-
-    /** Logo element or URL */
-    logo?: React.ReactNode | string;
-
-    /** Force specific theme */
-    theme?: 'light' | 'dark';
-}
-
-// ============================================================
-// PROVIDER CONFIGS (internal)
-// ============================================================
-
-const providerConfigs: Record<SocialProvider, { name: string; icon: JSX.Element; colors: { light: string; dark: string } }> = {
-    google: {
-        name: 'Google',
-        icon: (
-            <svg className="h-5 w-5" viewBox="0 0 24 24">
-                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
-                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
-                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
-                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
-            </svg>
-        ),
-        colors: { light: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300', dark: 'bg-white hover:bg-gray-100 text-gray-700 border-gray-300' }
-    },
-    azure: {
-        name: 'Microsoft',
-        icon: (
-            <svg className="h-5 w-5" viewBox="0 0 23 23">
-                <path fill="#f35325" d="M1 1h10v10H1z" />
-                <path fill="#81bc06" d="M12 1h10v10H12z" />
-                <path fill="#05a6f0" d="M1 12h10v10H1z" />
-                <path fill="#ffba08" d="M12 12h10v10H12z" />
-            </svg>
-        ),
-        colors: { light: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300', dark: 'bg-white hover:bg-gray-100 text-gray-700 border-gray-300' }
-    },
-    github: {
-        name: 'GitHub',
-        icon: (
-            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-            </svg>
-        ),
-        colors: { light: 'bg-gray-900 hover:bg-gray-800 text-white border-gray-900', dark: 'bg-white hover:bg-gray-100 text-gray-900 border-gray-300' }
-    },
-    microsoft: {
-        name: 'Microsoft',
-        icon: (
-            <svg className="h-5 w-5" viewBox="0 0 24 24">
-                <path fill="#F25022" d="M1 1h10v10H1z" />
-                <path fill="#00A4EF" d="M1 13h10v10H1z" />
-                <path fill="#7FBA00" d="M13 1h10v10H13z" />
-                <path fill="#FFB900" d="M13 13h10v10H13z" />
-            </svg>
-        ),
-        colors: { light: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300', dark: 'bg-white hover:bg-gray-100 text-gray-700 border-gray-300' }
-    },
-    apple: {
-        name: 'Apple',
-        icon: (
-            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-            </svg>
-        ),
-        colors: { light: 'bg-black hover:bg-gray-900 text-white border-black', dark: 'bg-white hover:bg-gray-100 text-black border-gray-300' }
-    },
-    facebook: {
-        name: 'Facebook',
-        icon: (
-            <svg className="h-5 w-5" fill="white" viewBox="0 0 24 24">
-                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
-            </svg>
-        ),
-        colors: { light: 'bg-[#1877F2] hover:bg-[#166FE5] text-white border-[#1877F2]', dark: 'bg-[#1877F2] hover:bg-[#166FE5] text-white border-[#1877F2]' }
-    },
-};
-
-// ============================================================
-// COMPONENT
-// ============================================================
-
-/**
- * PrimusLogin - Complete Login Component
- * 
- * A single component that handles all login methods. Enable features via props.
- * 
- * @example
- * ```tsx
- * // Basic email/password only
- * <PrimusLogin onLogin={(creds) => console.log(creds)} />
- * 
- * // With social providers
- * <PrimusLogin 
- *   socialProviders={['google', 'azure']}
- *   onSocialLogin={(provider) => redirectToOAuth(provider)}
- * />
- * 
- * // Social only (no email form)
- * <PrimusLogin 
- *   showEmailLogin={false}
- *   socialProviders={['google', 'github', 'azure']}
- * />
- * ```
- */
-export function PrimusLogin({
-    onLogin,
-    socialProviders = [],
-    onSocialLogin,
-    authEndpoint = '/api/auth',
-    showEmailLogin = true,
-    title = 'Welcome Back',
-    subtitle = 'Enter your credentials to continue',
-    logo,
-    theme: themeOverride,
-}: PrimusLoginProps) {
-    const themeContext = usePrimusTheme();
-    const theme = themeOverride || themeContext.theme;
-    const isLight = theme === 'light';
-
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-    const [loading, setLoading] = useState(false);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        if (!username || !password) return;
-
-        setLoading(true);
-        try {
-            onLogin?.({ username, password });
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleSocialClick = (provider: SocialProvider) => {
-        if (onSocialLogin) {
-            onSocialLogin(provider);
-        } else {
-            window.location.href = `${authEndpoint}/${provider}`;
-        }
-    };
-
-    // Theme colors
-    const bgGradient = isLight
-        ? 'bg-gradient-to-br from-gray-50 via-white to-violet-50'
-        : 'bg-gray-950';
-    const cardBg = isLight
-        ? 'bg-white border-gray-200 shadow-xl'
-        : 'bg-gray-900/50 border-white/10';
-    const headingColor = isLight ? 'text-gray-900' : 'text-white';
-    const subtextColor = isLight ? 'text-gray-500' : 'text-slate-400';
-    const labelColor = isLight ? 'text-gray-600' : 'text-slate-300';
-    const inputClasses = isLight
-        ? 'bg-gray-50 border-gray-300 text-gray-900 placeholder:text-gray-400 focus:border-violet-500 focus:ring-violet-500'
-        : 'bg-gray-950/50 border-slate-700 text-white placeholder:text-slate-600 focus:border-blue-500 focus:ring-blue-500';
-    const buttonGradient = isLight
-        ? 'bg-gradient-to-r from-violet-600 to-purple-600'
-        : 'bg-gradient-to-r from-blue-600 to-indigo-600';
-    const logoBg = isLight ? 'bg-violet-600 shadow-violet-500/20' : 'bg-blue-600 shadow-blue-500/20';
-    const dividerColor = isLight ? 'border-gray-200' : 'border-slate-700';
-
-    const hasSocial = socialProviders.length > 0;
-
-    return (
-        <div className={`min-h-screen ${bgGradient} flex items-center justify-center p-4`}>
-            {!isLight && (
-                <div className="absolute inset-0 overflow-hidden">
-                    <div className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] bg-blue-600/20 rounded-full blur-[120px]" />
-                    <div className="absolute -bottom-[20%] -right-[10%] w-[50%] h-[50%] bg-purple-600/20 rounded-full blur-[120px]" />
-                </div>
-            )}
-
-            <div className={`w-full max-w-md ${cardBg} p-8 rounded-2xl border backdrop-blur-xl relative z-10`}>
-                {/* Logo & Title */}
-                <div className="text-center mb-8">
-                    {logo ? (
-                        typeof logo === 'string'
-                            ? <img src={logo} alt="Logo" className="h-12 w-12 mx-auto mb-4 rounded-xl" />
-                            : <div className="mb-4">{logo}</div>
-                    ) : (
-                        <div className={`h-12 w-12 ${logoBg} rounded-xl mx-auto flex items-center justify-center mb-4 shadow-lg`}>
-                            <span className="font-bold text-xl text-white">P</span>
-                        </div>
-                    )}
-                    <h1 className={`text-2xl font-bold ${headingColor} tracking-tight`}>{title}</h1>
-                    <p className={`${subtextColor} text-sm mt-2`}>{subtitle}</p>
-                </div>
-
-                {/* Social Login Buttons */}
-                {hasSocial && (
-                    <div className="space-y-3 mb-6">
-                        {socialProviders.map((provider) => {
-                            const config = providerConfigs[provider];
-                            if (!config) return null;
-
-                            return (
-                                <button
-                                    key={provider}
-                                    onClick={() => handleSocialClick(provider)}
-                                    className={`w-full flex items-center justify-center gap-3 px-4 py-2.5 border rounded-lg font-medium text-sm transition-all duration-200 ${isLight ? config.colors.light : config.colors.dark
-                                        }`}
-                                >
-                                    {config.icon}
-                                    <span>Continue with {config.name}</span>
-                                </button>
-                            );
-                        })}
-                    </div>
-                )}
-
-                {/* Divider */}
-                {hasSocial && showEmailLogin && (
-                    <div className="relative my-6">
-                        <div className="absolute inset-0 flex items-center">
-                            <div className={`w-full border-t ${dividerColor}`}></div>
-                        </div>
-                        <div className="relative flex justify-center text-xs uppercase">
-                            <span className={`${isLight ? 'bg-white' : 'bg-gray-900/50'} px-2 ${subtextColor}`}>
-                                Or continue with email
-                            </span>
-                        </div>
-                    </div>
-                )}
-
-                {/* Email/Password Form */}
-                {showEmailLogin && (
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                        <div className="space-y-2">
-                            <label className={`text-xs font-medium ${labelColor} ml-1`}>EMAIL</label>
-                            <input
-                                type="text"
-                                value={username}
-                                onChange={e => setUsername(e.target.value)}
-                                className={`w-full px-4 py-2.5 ${inputClasses} border rounded-lg focus:outline-none focus:ring-1 transition-all text-sm`}
-                                placeholder="you@example.com"
-                            />
-                        </div>
-                        <div className="space-y-2">
-                            <label className={`text-xs font-medium ${labelColor} ml-1`}>PASSWORD</label>
-                            <input
-                                type="password"
-                                value={password}
-                                onChange={e => setPassword(e.target.value)}
-                                className={`w-full px-4 py-2.5 ${inputClasses} border rounded-lg focus:outline-none focus:ring-1 transition-all text-sm`}
-                                placeholder="••••••••"
-                            />
-                        </div>
-                        <button
-                            type="submit"
-                            disabled={loading}
-                            className={`w-full mt-4 py-2.5 ${buttonGradient} text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50`}
-                        >
-                            {loading ? 'Signing in...' : 'Sign In'}
-                        </button>
-                    </form>
-                )}
-            </div>
-        </div>
-    );
-}
-
-// Export alias
-export const LoginPage = PrimusLogin;

package/src/components/auth/UserProfile.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { usePrimusAuth } from '../../hooks/usePrimusAuth';
-import { Button } from '../shared/Button';
-
-export const UserProfile: React.FC = () => {
-    const { user, logout, isAuthenticated } = usePrimusAuth();
-
-    if (!isAuthenticated || !user) {
-        return null;
-    }
-
-    return (
-        <div className="flex items-center gap-4 p-4 rounded-lg bg-gray-50 border border-gray-200">
-            <div className="h-10 w-10 rounded-full bg-primus-100 flex items-center justify-center text-primus-600 font-bold">
-                {user.name?.charAt(0) || 'U'}
-            </div>
-            <div className="flex-1">
-                <p className="text-sm font-medium text-gray-900">{user.name}</p>
-                <p className="text-xs text-gray-500">{user.email}</p>
-            </div>
-            <Button variant="outline" size="sm" onClick={() => logout()}>
-                Sign out
-            </Button>
-        </div>
-    );
-};

package/src/components/banking/accounts/AccountDashboard.tsx

@@ -1,67 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface Account {
-    id: string;
-    accountNumber: string;
-    type: string;
-    balance: number;
-    currency: string;
-    status: string;
-}
-
-export const AccountDashboard: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [accounts, setAccounts] = useState<Account[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchAccounts();
-    }, []);
-
-    const fetchAccounts = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/banking/accounts`);
-            if (response.ok) {
-                const data = await response.json();
-                setAccounts(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch accounts:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (loading) return <div className="p-4">Loading accounts...</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">Bank Accounts</h3>
-            <div className="space-y-4">
-                {accounts.map((account) => (
-                    <div key={account.id} className="p-4 bg-gray-50 rounded-lg border border-gray-200">
-                        <div className="flex justify-between items-start">
-                            <div>
-                                <h4 className="font-medium text-gray-900">{account.type}</h4>
-                                <p className="text-sm text-gray-500">{account.accountNumber}</p>
-                            </div>
-                            <div className="text-right">
-                                <p className="text-2xl font-bold text-gray-900">
-                                    ${account.balance.toLocaleString()}
-                                </p>
-                                <p className="text-sm text-gray-500">{account.currency}</p>
-                            </div>
-                        </div>
-                        <div className="mt-2">
-                            <span className={`px-2 py-1 rounded text-xs font-medium ${account.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                                }`}>
-                                {account.status}
-                            </span>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/banking/cards/CreditCardVisual.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { WifiIcon } from '@heroicons/react/24/outline'; // Approximate for contactless
-
-export interface CreditCardProps {
-    cardHolder: string;
-    last4: string;
-    expiry: string;
-    brand?: 'visa' | 'mastercard' | 'amex';
-    variant?: 'black' | 'blue' | 'gold' | 'platinum';
-}
-
-export const CreditCardVisual: React.FC<CreditCardProps> = ({
-    cardHolder,
-    last4,
-    expiry,
-    brand = 'visa',
-    variant = 'black'
-}) => {
-    const getBackground = () => {
-        switch (variant) {
-            case 'blue': return 'bg-gradient-to-br from-blue-600 to-blue-800';
-            case 'gold': return 'bg-gradient-to-br from-yellow-500 to-yellow-700';
-            case 'platinum': return 'bg-gradient-to-br from-gray-300 to-gray-500';
-            default: return 'bg-gradient-to-br from-gray-900 to-gray-800';
-        }
-    };
-
-    return (
-        <div className={clsx(
-            "w-80 h-48 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden transition-transform hover:scale-105 duration-300",
-            getBackground()
-        )}>
-            {/* Decorative circles */}
-            <div className="absolute top-0 right-0 -mr-10 -mt-10 w-40 h-40 bg-white opacity-5 rounded-full blur-xl" />
-            <div className="absolute bottom-0 left-0 -ml-10 -mb-10 w-40 h-40 bg-white opacity-5 rounded-full blur-xl" />
-
-            <div className="flex justify-between items-start mb-8">
-                {/* Chip */}
-                <div className="w-12 h-9 bg-yellow-400 rounded-md opacity-80 flex items-center justify-center">
-                    <div className="w-8 h-6 border border-yellow-600 rounded opacity-50" />
-                </div>
-                <WifiIcon className="h-6 w-6 rotate-90 opacity-70" />
-            </div>
-
-            <div className="mb-6">
-                <p className="font-mono text-xl tracking-widest text-shadow">
-                    •••• •••• •••• {last4}
-                </p>
-            </div>
-
-            <div className="flex justify-between items-end">
-                <div>
-                    <p className="text-[10px] uppercase text-gray-300 tracking-wider mb-1">Card Holder</p>
-                    <p className="font-medium tracking-wide uppercase text-sm truncate max-w-[160px]">{cardHolder}</p>
-                </div>
-                <div>
-                    <p className="text-[10px] uppercase text-gray-300 tracking-wider mb-1">Expires</p>
-                    <p className="font-medium tracking-wide text-sm">{expiry}</p>
-                </div>
-                <div className="font-bold text-lg italic opacity-90">
-                    {brand.toUpperCase()}
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/banking/credit/CreditScoreCard.tsx

@@ -1,80 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface CreditScore {
-    score: number;
-    rating: string;
-    lastUpdated: string;
-    factors: Array<{ factor: string; impact: string; weight: number }>;
-}
-
-export const CreditScoreCard: React.FC<{ userId: string; apiUrl?: string }> = ({
-    userId,
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [score, setScore] = useState<CreditScore | null>(null);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        fetchScore();
-    }, [userId]);
-
-    const fetchScore = async () => {
-        try {
-            const response = await fetch(`${apiUrl}/api/banking/credit-score/${userId}`);
-            if (response.ok) {
-                const data = await response.json();
-                setScore(data);
-            }
-        } catch (error) {
-            console.error('Failed to fetch credit score:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (loading) return <div className="p-4">Loading credit score...</div>;
-    if (!score) return <div className="p-4">No credit score data</div>;
-
-    const getScoreColor = (score: number) => {
-        if (score >= 740) return 'text-green-600';
-        if (score >= 670) return 'text-blue-600';
-        if (score >= 580) return 'text-yellow-600';
-        return 'text-red-600';
-    };
-
-    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">Credit Score</h3>
-
-            <div className="text-center mb-6">
-                <div className={`text-6xl font-bold ${getScoreColor(score.score)}`}>
-                    {score.score}
-                </div>
-                <div className="text-lg text-gray-600 mt-2">{score.rating}</div>
-                <div className="text-sm text-gray-400 mt-1">
-                    Updated: {new Date(score.lastUpdated).toLocaleDateString()}
-                </div>
-            </div>
-
-            <div>
-                <h4 className="font-medium text-gray-900 mb-3">Score Factors</h4>
-                <div className="space-y-2">
-                    {score.factors.map((factor, index) => (
-                        <div key={index} className="flex justify-between items-center p-2 bg-gray-50 rounded">
-                            <span className="text-sm text-gray-900">{factor.factor}</span>
-                            <div className="flex items-center gap-2">
-                                <span className="text-xs text-gray-500">{factor.weight}%</span>
-                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${factor.impact === 'positive' ? 'bg-green-100 text-green-800' :
-                                        factor.impact === 'negative' ? 'bg-red-100 text-red-800' :
-                                            'bg-gray-100 text-gray-800'
-                                    }`}>
-                                    {factor.impact}
-                                </span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-};