primus-saas-react 1.0.0

package/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "primus-saas-react",
+    "version": "1.0.0",
+    "description": "Premium React UI Elements for Primus SaaS Framework",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "sideEffects": false,
+    "scripts": {
+        "build": "tsup src/index.ts --format cjs,esm --dts",
+        "lint": "eslint src/",
+        "dev": "tsup src/index.ts --format cjs,esm --watch --dts"
+    },
+    "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "dependencies": {
+        "@headlessui/react": "^1.7.17",
+        "@heroicons/react": "^2.0.18",
+        "clsx": "^2.0.0",
+        "lucide-react": "^0.300.0",
+        "tailwind-merge": "^2.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.3.5",
+        "tsup": "^7.2.0",
+        "typescript": "^5.9.3"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/src/components/ai/AICopilot.tsx

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { usePrimusAuth } from '../../hooks/usePrimusAuth';
+import { Button } from '../shared/Button';
+import { Input } from '../shared/Input';
+
+export interface PrimusLoginProps {
+    /** Custom logo URL */
+    logo?: string;
+    /** Login form title */
+    title?: string;
+    /** Show social login buttons */
+    allowSocial?: boolean;
+    /** Called after successful login */
+    onSuccess?: (user: any, token: string) => void;
+    /** Called on login failure */
+    onError?: (error: string) => void;
+    /** Show loading spinner overlay */
+    showLoadingOverlay?: boolean;
+}
+
+export const PrimusLogin: React.FC<PrimusLoginProps> = ({
+    logo,
+    title = "Sign in to Primus SaaS",
+    allowSocial = true,
+    onSuccess,
+    onError,
+    showLoadingOverlay = true,
+}) => {
+    const { login, isLoading } = usePrimusAuth();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [localLoading, setLocalLoading] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+        setLocalLoading(true);
+
+        const result = await login({ email, password });
+
+        if (result.success) {
+            onSuccess?.({ email }, ''); // Token available via usePrimusAuth
+        } else {
+            setError(result.error || 'Login failed');
+            onError?.(result.error || 'Login failed');
+        }
+        setLocalLoading(false);
+    };
+
+    const handleSocialLogin = async (provider: 'google' | 'github' | 'auth0' | 'azure') => {
+        setError(null);
+        const result = await login({ provider });
+
+        if (result.success) {
+            onSuccess?.({ provider }, '');
+        } else {
+            setError(result.error || 'Social login failed');
+            onError?.(result.error || 'Social login failed');
+        }
+    };
+
+    const loading = isLoading || localLoading;
+
+    return (
+        <div className="w-full max-w-md mx-auto bg-white p-8 rounded-xl shadow-lg border border-gray-100 relative">
+            {/* Loading Overlay */}
+            {showLoadingOverlay && loading && (
+                <div className="absolute inset-0 bg-white/80 flex items-center justify-center rounded-xl z-10">
+                    <div className="flex items-center gap-3">
+                        <svg className="animate-spin h-5 w-5 text-blue-600" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                        </svg>
+                        <span className="text-gray-600">Signing in...</span>
+                    </div>
+                </div>
+            )}
+
+            <div className="text-center mb-8">
+                {logo && <img src={logo} alt="Logo" className="h-12 w-12 mx-auto mb-4" />}
+                <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
+                <p className="text-gray-500 mt-2">Welcome back! Please enter your details.</p>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+                <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
+                    {error}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+                <Input
+                    label="Email"
+                    type="email"
+                    placeholder="Enter your email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    disabled={loading}
+                />
+                <Input
+                    label="Password"
+                    type="password"
+                    placeholder="••••••••"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    disabled={loading}
+                />
+
+                <div className="flex items-center justify-between text-sm">
+                    <label className="flex items-center gap-2 text-gray-600 cursor-pointer">
+                        <input type="checkbox" className="rounded border-gray-300 text-blue-600 focus:ring-blue-600" />
+                        Remember me
+                    </label>
+                    <a href="#" className="text-blue-600 font-medium hover:underline">Forgot password?</a>
+                </div>
+
+                <Button type="submit" className="w-full" disabled={loading}>
+                    {loading ? 'Signing in...' : 'Sign in'}
+                </Button>
+            </form>
+
+            {allowSocial && (
+                <div className="mt-6">
+                    <div className="relative">
+                        <div className="absolute inset-0 flex items-center">
+                            <span className="w-full border-t border-gray-200" />
+                        </div>
+                        <div className="relative flex justify-center text-sm">
+                            <span className="bg-white px-2 text-gray-500">Or continue with</span>
+                        </div>
+                    </div>
+
+                    <div className="mt-6 grid grid-cols-2 gap-3">
+                        <Button variant="outline" onClick={() => handleSocialLogin('google')} disabled={loading}>
+                            Google
+                        </Button>
+                        <Button variant="outline" onClick={() => handleSocialLogin('github')} disabled={loading}>
+                            GitHub
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/auth/UserProfile.tsx

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,80 @@
+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>
+    );
+};

package/src/components/banking/kyc/KYCVerification.tsx

@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+
+interface KYCStatus {
+    userId: string;
+    status: string;
+    verificationDate: string;
+    documents: Array<{ type: string; status: string; uploadDate: string }>;
+    riskLevel: string;
+}
+
+export const KYCVerification: React.FC<{ userId: string; apiUrl?: string }> = ({
+    userId,
+    apiUrl = 'http://localhost:5221'
+}) => {
+    const [status, setStatus] = useState<KYCStatus | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetchStatus();
+    }, [userId]);
+
+    const fetchStatus = async () => {
+        try {
+            const response = await fetch(`${apiUrl}/api/banking/kyc/status/${userId}`);
+            if (response.ok) {
+                const data = await response.json();
+                setStatus(data);
+            }
+        } catch (error) {
+            console.error('Failed to fetch KYC status:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading) return <div className="p-4">Loading KYC status...</div>;
+    if (!status) return <div className="p-4">No KYC data found</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">KYC Verification Status</h3>
+
+            <div className="mb-6">
+                <div className="flex items-center gap-2 mb-2">
+                    <span className="text-sm text-gray-600">Status:</span>
+                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${status.status === 'verified' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                        }`}>
+                        {status.status}
+                    </span>
+                </div>
+                <div className="flex items-center gap-2">
+                    <span className="text-sm text-gray-600">Risk Level:</span>
+                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${status.riskLevel === 'low' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                        }`}>
+                        {status.riskLevel}
+                    </span>
+                </div>
+            </div>
+
+            <div>
+                <h4 className="font-medium text-gray-900 mb-3">Documents</h4>
+                <div className="space-y-2">
+                    {status.documents.map((doc, index) => (
+                        <div key={index} className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                            <span className="text-sm text-gray-900">{doc.type}</span>
+                            <span className={`px-2 py-1 rounded text-xs font-medium ${doc.status === 'approved' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                                }`}>
+                                {doc.status}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};