primus-saas-react 1.0.3 → 1.0.5

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

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

package/src/components/banking/loans/LoanCalculator.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-
-export const LoanCalculator: React.FC<{ apiUrl?: string }> = ({
-    apiUrl = 'http://localhost:5221'
-}) => {
-    const [amount, setAmount] = useState(25000);
-    const [rate, setRate] = useState(5.5);
-    const [term, setTerm] = useState(60);
-    const [result, setResult] = useState<any>(null);
-    const [loading, setLoading] = useState(false);
-
-    const calculate = async () => {
-        setLoading(true);
-        try {
-            const response = await fetch(`${apiUrl}/api/banking/loans/calculate`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ amount, interestRate: rate, term })
-            });
-            if (response.ok) {
-                const data = await response.json();
-                setResult(data);
-            }
-        } catch (error) {
-            console.error('Failed to calculate loan:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Loan Calculator</h3>
-
-            <div className="space-y-4 mb-6">
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                        Loan Amount: ${amount.toLocaleString()}
-                    </label>
-                    <input
-                        type="range"
-                        min="1000"
-                        max="100000"
-                        step="1000"
-                        value={amount}
-                        onChange={(e) => setAmount(Number(e.target.value))}
-                        className="w-full"
-                    />
-                </div>
-
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                        Interest Rate: {rate}%
-                    </label>
-                    <input
-                        type="range"
-                        min="1"
-                        max="15"
-                        step="0.1"
-                        value={rate}
-                        onChange={(e) => setRate(Number(e.target.value))}
-                        className="w-full"
-                    />
-                </div>
-
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
-                        Term: {term} months
-                    </label>
-                    <input
-                        type="range"
-                        min="12"
-                        max="360"
-                        step="12"
-                        value={term}
-                        onChange={(e) => setTerm(Number(e.target.value))}
-                        className="w-full"
-                    />
-                </div>
-            </div>
-
-            <button
-                onClick={calculate}
-                disabled={loading}
-                className="w-full bg-primus-600 text-white py-2 px-4 rounded hover:bg-primus-700 disabled:opacity-50"
-            >
-                {loading ? 'Calculating...' : 'Calculate'}
-            </button>
-
-            {result && (
-                <div className="mt-6 p-4 bg-gray-50 rounded-lg">
-                    <div className="grid grid-cols-2 gap-4">
-                        <div>
-                            <p className="text-sm text-gray-600">Monthly Payment</p>
-                            <p className="text-2xl font-bold text-gray-900">${result.monthlyPayment}</p>
-                        </div>
-                        <div>
-                            <p className="text-sm text-gray-600">Total Interest</p>
-                            <p className="text-2xl font-bold text-gray-900">${result.totalInterest}</p>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/banking/transactions/TransactionHistory.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import {
-  ArrowDownLeftIcon,
-  ArrowUpRightIcon,
-  ShoppingBagIcon
-  // BanknotesIcon
-} from '@heroicons/react/24/outline';
-import { clsx } from "clsx";
-
-export interface Transaction {
-  id: string;
-  description: string;
-  amount: number;
-  date: string;
-  type: 'credit' | 'debit';
-  category?: 'shopping' | 'transfer' | 'food' | 'other';
-  status?: 'pending' | 'completed' | 'failed';
-}
-
-export interface TransactionHistoryProps {
-  transactions: Transaction[];
-  onTransactionClick?: (id: string) => void;
-}
-
-export const TransactionHistory: React.FC<TransactionHistoryProps> = ({
-  transactions,
-  onTransactionClick
-}) => {
-  const getIcon = (t: Transaction) => {
-    if (t.type === 'credit') return <ArrowDownLeftIcon className="h-5 w-5 text-green-600" />;
-    if (t.category === 'shopping') return <ShoppingBagIcon className="h-5 w-5 text-blue-600" />;
-    return <ArrowUpRightIcon className="h-5 w-5 text-red-600" />; // simplistic default
-  };
-
-  return (
-    <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
-      <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
-        <h3 className="font-semibold text-gray-900">Recent Transactions</h3>
-        <button className="text-sm text-primus-600 hover:text-primus-700 font-medium">View All</button>
-      </div>
-      <div className="divide-y divide-gray-100">
-        {transactions.map((t) => (
-          <div
-            key={t.id}
-            onClick={() => onTransactionClick?.(t.id)}
-            className="px-6 py-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer transition-colors"
-          >
-            <div className="flex items-center gap-4">
-              <div className={clsx("h-10 w-10 rounded-full flex items-center justify-center",
-                t.type === 'credit' ? "bg-green-100" : "bg-gray-100"
-              )}>
-                {getIcon(t)}
-              </div>
-              <div>
-                <p className="text-sm font-medium text-gray-900">{t.description}</p>
-                <p className="text-xs text-gray-500">{t.date}</p>
-              </div>
-            </div>
-            <div className="text-right">
-              <p className={clsx(
-                "text-sm font-semibold",
-                t.type === 'credit' ? "text-green-600" : "text-gray-900"
-              )}>
-                {t.type === 'credit' ? '+' : '-'}
-                {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(t.amount)}
-              </p>
-              <p className="text-xs text-gray-400 capitalize">{t.status || 'completed'}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div >
-  );
-};

package/src/components/crud/PrimusDataTable.tsx

@@ -1,220 +0,0 @@
-import React, { useState, useMemo } from 'react';
-
-export interface Column<T> {
-    key: keyof T | string;
-    header: string;
-    render?: (value: any, row: T) => React.ReactNode;
-    sortable?: boolean;
-    width?: string;
-}
-
-export interface PrimusDataTableProps<T> {
-    data: T[];
-    columns: Column<T>[];
-    /** Row key field */
-    rowKey: keyof T;
-    /** Loading state */
-    loading?: boolean;
-    /** Enable row selection */
-    selectable?: boolean;
-    /** Selected row keys */
-    selectedKeys?: (string | number)[];
-    /** On selection change */
-    onSelectionChange?: (keys: (string | number)[]) => void;
-    /** On row click */
-    onRowClick?: (row: T) => void;
-    /** Actions column renderer */
-    actions?: (row: T) => React.ReactNode;
-    /** Empty state message */
-    emptyMessage?: string;
-    /** Search placeholder */
-    searchPlaceholder?: string;
-    /** Enable search */
-    searchable?: boolean;
-}
-
-export function PrimusDataTable<T extends Record<string, any>>({
-    data,
-    columns,
-    rowKey,
-    loading = false,
-    selectable = false,
-    selectedKeys = [],
-    onSelectionChange,
-    onRowClick,
-    actions,
-    emptyMessage = 'No data available',
-    searchPlaceholder = 'Filter...',
-    searchable = true,
-}: PrimusDataTableProps<T>) {
-    const [search, setSearch] = useState('');
-    const [sortKey, setSortKey] = useState<string | null>(null);
-    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
-
-    const filteredData = useMemo(() => {
-        let result = [...data];
-
-        // Search filter
-        if (search) {
-            const lowerSearch = search.toLowerCase();
-            result = result.filter(row =>
-                Object.values(row).some(val =>
-                    String(val).toLowerCase().includes(lowerSearch)
-                )
-            );
-        }
-
-        // Sort
-        if (sortKey) {
-            result.sort((a, b) => {
-                const aVal = a[sortKey];
-                const bVal = b[sortKey];
-                const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
-                return sortDir === 'asc' ? cmp : -cmp;
-            });
-        }
-
-        return result;
-    }, [data, search, sortKey, sortDir]);
-
-    const handleSort = (key: string) => {
-        if (sortKey === key) {
-            setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
-        } else {
-            setSortKey(key);
-            setSortDir('asc');
-        }
-    };
-
-    const toggleSelect = (key: string | number) => {
-        const newKeys = selectedKeys.includes(key)
-            ? selectedKeys.filter(k => k !== key)
-            : [...selectedKeys, key];
-        onSelectionChange?.(newKeys);
-    };
-
-    const toggleSelectAll = () => {
-        if (selectedKeys.length === filteredData.length) {
-            onSelectionChange?.([]);
-        } else {
-            onSelectionChange?.(filteredData.map(row => row[rowKey]));
-        }
-    };
-
-    return (
-        <div className="flex flex-col space-y-4">
-            {/* Toolbar */}
-            {searchable && (
-                <div className="flex items-center justify-between px-1">
-                    <div className="relative group">
-                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                            <svg className="h-4 w-4 text-gray-500 group-focus-within:text-purple-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                            </svg>
-                        </div>
-                        <input
-                            type="text"
-                            placeholder={searchPlaceholder}
-                            value={search}
-                            onChange={e => setSearch(e.target.value)}
-                            className="w-64 pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-purple-500/50 focus:bg-white/10 transition-all hover:bg-white/10"
-                        />
-                    </div>
-                </div>
-            )}
-
-            {/* Table Container */}
-            <div className={`overflow-hidden rounded-xl border border-white/5 bg-slate-900/40 backdrop-blur-md shadow-xl ring-1 ring-white/5 ${loading ? 'opacity-80' : ''}`}>
-                <div className="overflow-x-auto">
-                    <table className="w-full text-left border-collapse">
-                        <thead className="bg-white/5 border-b border-white/5 backdrop-blur-md sticky top-0 z-20">
-                            <tr>
-                                {selectable && (
-                                    <th className="w-12 px-6 py-4">
-                                        <input
-                                            type="checkbox"
-                                            checked={selectedKeys.length === filteredData.length && filteredData.length > 0}
-                                            onChange={toggleSelectAll}
-                                            className="rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 transition-colors cursor-pointer"
-                                        />
-                                    </th>
-                                )}
-                                {columns.map(col => (
-                                    <th
-                                        key={String(col.key)}
-                                        className={`px-6 py-4 text-xs font-semibold text-gray-400 uppercase tracking-wider ${col.sortable ? 'cursor-pointer hover:text-white group' : ''}`}
-                                        style={{ width: col.width }}
-                                        onClick={() => col.sortable && handleSort(String(col.key))}
-                                    >
-                                        <div className="flex items-center gap-2">
-                                            {col.header}
-                                            {col.sortable && (
-                                                <span className={`transition-opacity duration-200 ${sortKey === col.key ? 'opacity-100 text-purple-400' : 'opacity-0 group-hover:opacity-50'}`}>
-                                                    {sortDir === 'asc' ? '↑' : '↓'}
-                                                </span>
-                                            )}
-                                        </div>
-                                    </th>
-                                ))}
-                                {actions && <th className="w-24 px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider"></th>}
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-white/5">
-                            {loading ? (
-                                <tr>
-                                    <td colSpan={columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0)} className="px-6 py-24 text-center text-gray-500">
-                                        <div className="flex flex-col items-center justify-center gap-3">
-                                            <div className="w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" />
-                                            <span className="text-sm font-medium">Loading data...</span>
-                                        </div>
-                                    </td>
-                                </tr>
-                            ) : filteredData.length === 0 ? (
-                                <tr>
-                                    <td colSpan={columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0)} className="px-6 py-24 text-center text-gray-500">
-                                        <p className="text-sm">{emptyMessage}</p>
-                                    </td>
-                                </tr>
-                            ) : (
-                                filteredData.map(row => (
-                                    <tr
-                                        key={String(row[rowKey])}
-                                        onClick={() => onRowClick?.(row)}
-                                        className={`
-                                            group transition-colors duration-150
-                                            ${onRowClick ? 'cursor-pointer hover:bg-white/5' : ''}
-                                            ${selectedKeys.includes(row[rowKey]) ? 'bg-purple-500/10 hover:bg-purple-500/20' : ''}
-                                        `}
-                                    >
-                                        {selectable && (
-                                            <td className="px-6 py-4" onClick={e => e.stopPropagation()}>
-                                                <input
-                                                    type="checkbox"
-                                                    checked={selectedKeys.includes(row[rowKey])}
-                                                    onChange={() => toggleSelect(row[rowKey])}
-                                                    className="rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 cursor-pointer"
-                                                />
-                                            </td>
-                                        )}
-                                        {columns.map(col => (
-                                            <td key={String(col.key)} className="px-6 py-4 text-sm text-gray-300 group-hover:text-white transition-colors">
-                                                {col.render ? col.render(row[col.key as keyof T], row) : String(row[col.key as keyof T] ?? '')}
-                                            </td>
-                                        ))}
-                                        {actions && (
-                                            <td className="px-6 py-4 text-right" onClick={e => e.stopPropagation()}>
-                                                <div className="opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0">
-                                                    {actions(row)}
-                                                </div>
-                                            </td>
-                                        )}
-                                    </tr>
-                                ))
-                            )}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/crud/PrimusModal.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-
-export interface PrimusModalProps {
-    open: boolean;
-    onClose: () => void;
-    title?: string;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-export const PrimusModal: React.FC<PrimusModalProps> = ({
-    open,
-    onClose,
-    title,
-    children,
-    footer,
-    size = 'md',
-}) => {
-    if (!open) return null;
-
-    const sizeClasses = {
-        sm: 'max-w-sm',
-        md: 'max-w-md',
-        lg: 'max-w-lg',
-        xl: 'max-w-xl',
-    };
-
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-            {/* Backdrop */}
-            <div
-                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-                onClick={onClose}
-            />
-
-            {/* Modal */}
-            <div className={`relative w-full ${sizeClasses[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`}>
-                {/* Header */}
-                {title && (
-                    <div className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
-                        <h2 className="text-lg font-semibold text-white">{title}</h2>
-                        <button
-                            onClick={onClose}
-                            className="text-gray-400 hover:text-white transition-colors"
-                        >
-                            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                )}
-
-                {/* Content */}
-                <div className="p-6">
-                    {children}
-                </div>
-
-                {/* Footer */}
-                {footer && (
-                    <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50">
-                        {footer}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};