mirror of
https://github.com/escalante29/WealthySmart.git
synced 2026-05-19 11:28:49 +02:00
Add accounts expansion, analytics, exchange rates, API tokens, PWA support, and UI overhaul
All checks were successful
Deploy to VPS / deploy (push) Successful in 45s
All checks were successful
Deploy to VPS / deploy (push) Successful in 45s
- Expand Account model with account_type (pension, savings, liability, crypto), new banks/currencies (BTC, XMR, FCL, ROP, VOL, MEMP, MPAT, MORTGAGE), and next_payment field - Add exchange rate endpoint (BCCR integration), analytics endpoint, paste-import for transactions, and API token management - Add PWA manifest, service worker, and app icons - Redesign dashboard, transactions, transfers, and login pages with theme support - Add billing cycle selector, confirm dialog, and paste import modal components - One-time DB reset in deploy workflow for schema migration Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
@@ -6,12 +6,17 @@ import {
|
||||
TrendingDown,
|
||||
RefreshCw,
|
||||
CreditCard,
|
||||
Pencil,
|
||||
Check,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
|
||||
import api, { type Account, type Transaction } from '../api';
|
||||
|
||||
function formatAmount(amount: number, currency: string) {
|
||||
const abs = Math.abs(amount);
|
||||
if (currency === 'BTC') return abs.toFixed(8);
|
||||
if (currency === 'XMR') return abs.toFixed(4);
|
||||
if (currency === 'USD') {
|
||||
return `$${abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
}
|
||||
@@ -19,16 +24,87 @@ function formatAmount(amount: number, currency: string) {
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
// --- Reusable card for an account balance ---
|
||||
function AccountCard({
|
||||
account,
|
||||
editingId,
|
||||
editValue,
|
||||
setEditValue,
|
||||
startEditing,
|
||||
saveBalance,
|
||||
cancelEditing,
|
||||
}: {
|
||||
account: Account;
|
||||
editingId: number | null;
|
||||
editValue: string;
|
||||
setEditValue: (v: string) => void;
|
||||
startEditing: (a: Account) => void;
|
||||
saveBalance: (id: number) => void;
|
||||
cancelEditing: () => void;
|
||||
}) {
|
||||
const badgeLabel = account.account_type === 'CRYPTO' ? account.label : (account.bank === 'DAVIVIENDA' ? 'DAV' : account.bank);
|
||||
const isEditing = editingId === account.id;
|
||||
|
||||
return (
|
||||
<div className="group animate-fade-in bg-surface dark:bg-slate-900 border border-border dark:border-slate-700 rounded-xl p-5 shadow-sm dark:shadow-none hover:bg-surface-hover dark:hover:bg-slate-800/60 transition-colors h-[104px] flex flex-col justify-between">
|
||||
<div className="flex items-center justify-end">
|
||||
<span className="text-sm font-bold font-mono text-text-secondary dark:text-slate-300 bg-surface-secondary dark:bg-slate-800 px-2.5 py-0.5 rounded">
|
||||
{badgeLabel}
|
||||
</span>
|
||||
</div>
|
||||
{isEditing ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') saveBalance(account.id);
|
||||
if (e.key === 'Escape') cancelEditing();
|
||||
}}
|
||||
autoFocus
|
||||
className="w-full text-2xl font-bold font-mono tracking-tight bg-input-bg border border-[#606C38]/40 rounded-lg px-2 py-1 focus:outline-none focus:border-[#606C38] transition-colors"
|
||||
/>
|
||||
<button onClick={() => saveBalance(account.id)} className="p-1 text-[#606C38] dark:text-[#7a8a4a]">
|
||||
<Check className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={cancelEditing} className="p-1 text-text-muted hover:text-text-secondary">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 group/balance cursor-pointer" onClick={() => startEditing(account)}>
|
||||
<p className="text-2xl font-bold font-mono tracking-tight">
|
||||
{formatAmount(account.balance, account.currency)}
|
||||
</p>
|
||||
<Pencil className="w-3.5 h-3.5 text-text-faint opacity-0 group-hover/balance:opacity-100 hover:text-[#606C38] dark:hover:text-[#7a8a4a] transition-all" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Total card ---
|
||||
function TotalCard({ total, currency }: { total: number; currency: string }) {
|
||||
return (
|
||||
<div className="border rounded-xl p-5 shadow-sm dark:shadow-none h-[104px] flex flex-col justify-between bg-[#fdf3e3] dark:bg-[#BC6C25]/10 border-[#e8c08a] dark:border-[#BC6C25]/20 text-[#8a5218] dark:text-[#DDA15E]">
|
||||
<span className="text-xs font-bold uppercase tracking-wider opacity-80">Total</span>
|
||||
<p className="text-2xl font-bold font-mono tracking-tight">{formatAmount(total, currency)}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [accounts, setAccounts] = useState<Account[]>([]);
|
||||
const [recent, setRecent] = useState<Transaction[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editValue, setEditValue] = useState('');
|
||||
const [exchangeRate, setExchangeRate] = useState<{ buy_rate: number; sell_rate: number } | null>(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
@@ -44,18 +120,41 @@ export default function Dashboard() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
api.get('/exchange-rate/').then((r) => setExchangeRate(r.data)).catch(() => {});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
useEffect(() => { fetchData(); }, []);
|
||||
|
||||
const totalCRC = accounts
|
||||
.filter((a) => a.currency === 'CRC')
|
||||
.reduce((s, a) => s + a.balance, 0);
|
||||
const totalUSD = accounts
|
||||
.filter((a) => a.currency === 'USD')
|
||||
.reduce((s, a) => s + a.balance, 0);
|
||||
const startEditing = (account: Account) => {
|
||||
setEditingId(account.id);
|
||||
setEditValue(String(account.balance));
|
||||
};
|
||||
const cancelEditing = () => { setEditingId(null); setEditValue(''); };
|
||||
const saveBalance = async (accountId: number) => {
|
||||
const parsed = parseFloat(editValue);
|
||||
if (isNaN(parsed)) return cancelEditing();
|
||||
try {
|
||||
await api.patch(`/accounts/${accountId}`, { balance: parsed });
|
||||
setEditingId(null);
|
||||
setEditValue('');
|
||||
fetchData();
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const cardProps = { editingId, editValue, setEditValue, startEditing, saveBalance, cancelEditing };
|
||||
|
||||
// Group accounts by type
|
||||
const bankAccounts = accounts.filter((a) => a.account_type === 'BANK');
|
||||
const pensionAccounts = accounts.filter((a) => a.account_type === 'PENSION');
|
||||
const savingsAccounts = accounts.filter((a) => a.account_type === 'SAVINGS');
|
||||
const liabilityAccounts = accounts.filter((a) => a.account_type === 'LIABILITY');
|
||||
const cryptoAccounts = accounts.filter((a) => a.account_type === 'CRYPTO');
|
||||
|
||||
const bankOrder = ['BAC', 'BCR', 'DAVIVIENDA'];
|
||||
|
||||
// Bank totals for exchange rate combined total
|
||||
const bankCRC = bankAccounts.filter((a) => a.currency === 'CRC').reduce((s, a) => s + a.balance, 0);
|
||||
const bankUSD = bankAccounts.filter((a) => a.currency === 'USD').reduce((s, a) => s + a.balance, 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -63,129 +162,195 @@ export default function Dashboard() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Financial overview</p>
|
||||
<p className="text-sm text-text-muted mt-1">Financial overview</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="p-2 rounded-lg text-slate-500 hover:text-white hover:bg-slate-800/50 transition-colors"
|
||||
className="p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Account balances */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{accounts.map((account, i) => (
|
||||
<div
|
||||
key={account.id}
|
||||
className="relative group animate-fade-in"
|
||||
>
|
||||
<div className="absolute -inset-[1px] rounded-xl bg-gradient-to-br from-emerald-500/20 to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative bg-slate-900/60 border border-slate-800/60 rounded-xl p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
{account.label}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-slate-600 bg-slate-800/60 px-2 py-0.5 rounded">
|
||||
{account.bank}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold font-mono tracking-tight">
|
||||
{formatAmount(account.balance, account.currency)}
|
||||
</p>
|
||||
{/* Bank accounts — grouped by currency */}
|
||||
{(['CRC', 'USD'] as const).map((currency) => {
|
||||
const accts = bankAccounts
|
||||
.filter((a) => a.currency === currency)
|
||||
.sort((a, b) => bankOrder.indexOf(a.bank) - bankOrder.indexOf(b.bank));
|
||||
if (accts.length === 0) return null;
|
||||
const total = accts.reduce((s, a) => s + a.balance, 0);
|
||||
|
||||
return (
|
||||
<div key={currency} className="space-y-2">
|
||||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">{currency} Accounts</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{accts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
|
||||
<TotalCard total={total} currency={currency} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Totals */}
|
||||
{accounts.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="bg-gradient-to-br from-emerald-500/10 to-cyan-500/5 border border-emerald-500/20 rounded-xl p-5"
|
||||
>
|
||||
<span className="text-xs font-medium text-emerald-400/80 uppercase tracking-wider">
|
||||
Total CRC
|
||||
</span>
|
||||
<p className="text-2xl font-bold font-mono tracking-tight text-emerald-400 mt-3">
|
||||
{formatAmount(totalCRC, 'CRC')}
|
||||
{/* Pension accounts */}
|
||||
{pensionAccounts.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Pension</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{pensionAccounts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
|
||||
<TotalCard
|
||||
total={pensionAccounts.reduce((s, a) => s + a.balance, 0)}
|
||||
currency="CRC"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Savings accounts */}
|
||||
{savingsAccounts.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Savings</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{savingsAccounts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
|
||||
<TotalCard
|
||||
total={savingsAccounts.reduce((s, a) => s + a.balance, 0)}
|
||||
currency="CRC"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Liabilities */}
|
||||
{liabilityAccounts.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Liabilities</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{liabilityAccounts.map((account) => {
|
||||
const bankShort = account.bank === 'DAVIVIENDA' ? 'DAV' : account.bank;
|
||||
return (
|
||||
<div
|
||||
key={account.id}
|
||||
className="animate-fade-in bg-red-50 dark:bg-red-500/5 border border-red-200 dark:border-red-500/20 rounded-xl p-5 shadow-sm dark:shadow-none hover:bg-red-100/50 dark:hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-bold text-red-700 dark:text-red-400/80 uppercase tracking-wider">
|
||||
Balance
|
||||
</span>
|
||||
<span className="text-sm font-bold font-mono text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-500/10 px-2.5 py-0.5 rounded">
|
||||
{bankShort}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
className="text-2xl font-bold font-mono tracking-tight text-red-700 dark:text-red-400 cursor-pointer group/balance"
|
||||
onClick={() => startEditing(account)}
|
||||
>
|
||||
{editingId === account.id ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') saveBalance(account.id);
|
||||
if (e.key === 'Escape') cancelEditing();
|
||||
}}
|
||||
autoFocus
|
||||
className="w-full text-2xl font-bold font-mono tracking-tight bg-input-bg border border-red-500/40 rounded-lg px-2 py-1 focus:outline-none focus:border-red-500 transition-colors text-text-primary"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<button onClick={(e) => { e.stopPropagation(); saveBalance(account.id); }} className="p-1 text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={(e) => { e.stopPropagation(); cancelEditing(); }} className="p-1 text-text-muted">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
formatAmount(account.balance, account.currency)
|
||||
)}
|
||||
</p>
|
||||
{account.next_payment != null && (
|
||||
<p className="text-sm font-mono text-red-600/70 dark:text-red-400/60 mt-2">
|
||||
Next payment: {formatAmount(account.next_payment, account.currency)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Crypto */}
|
||||
{cryptoAccounts.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Crypto</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{cryptoAccounts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Exchange rate + combined total */}
|
||||
{exchangeRate && (
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1 bg-surface-card border border-border rounded-xl p-4">
|
||||
<span className="text-xs font-medium text-text-muted uppercase tracking-wider">USD/CRC Exchange Rate</span>
|
||||
<div className="flex items-baseline gap-3 mt-1">
|
||||
<span className="text-lg font-bold font-mono">Buy: ₡{exchangeRate.buy_rate.toFixed(2)}</span>
|
||||
<span className="text-lg font-bold font-mono text-text-secondary">Sell: ₡{exchangeRate.sell_rate.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{accounts.length > 0 && (
|
||||
<div className="flex-1 bg-gradient-to-br from-violet-500/10 to-[#606C38]/5 border border-violet-500/20 rounded-xl p-4">
|
||||
<span className="text-xs font-medium text-violet-600 dark:text-violet-400/80 uppercase tracking-wider">Combined Total (CRC)</span>
|
||||
<p className="text-2xl font-bold font-mono tracking-tight text-violet-600 dark:text-violet-400 mt-1">
|
||||
{formatAmount(bankCRC + bankUSD * exchangeRate.sell_rate, 'CRC')}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="bg-gradient-to-br from-cyan-500/10 to-emerald-500/5 border border-cyan-500/20 rounded-xl p-5 animate-fade-in"
|
||||
>
|
||||
<span className="text-xs font-medium text-cyan-400/80 uppercase tracking-wider">
|
||||
Total USD
|
||||
</span>
|
||||
<p className="text-2xl font-bold font-mono tracking-tight text-cyan-400 mt-3">
|
||||
{formatAmount(totalUSD, 'USD')}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recent transactions */}
|
||||
<div className="bg-slate-900/40 border border-slate-800/60 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-800/40">
|
||||
<div className="bg-surface-card border border-border rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border-subtle">
|
||||
<div className="flex items-center gap-2">
|
||||
<CreditCard className="w-4 h-4 text-slate-500" />
|
||||
<CreditCard className="w-4 h-4 text-text-muted" />
|
||||
<h2 className="font-semibold text-sm">Recent Charges</h2>
|
||||
</div>
|
||||
<Link
|
||||
to="/transactions"
|
||||
className="flex items-center gap-1 text-xs font-medium text-emerald-400 hover:text-emerald-300 transition-colors"
|
||||
className="flex items-center gap-1 text-xs font-medium text-[#606C38] dark:text-[#7a8a4a] hover:text-[#4a5a2a] dark:hover:text-[#8a9462] transition-colors"
|
||||
>
|
||||
View all
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{recent.length === 0 && !loading ? (
|
||||
<div className="px-5 py-12 text-center text-slate-600 text-sm">
|
||||
No transactions yet. Add your first one!
|
||||
</div>
|
||||
<div className="px-5 py-12 text-center text-text-faint text-sm">No transactions yet. Add your first one!</div>
|
||||
) : (
|
||||
<div className="divide-y divide-slate-800/40">
|
||||
{recent.map((tx, i) => (
|
||||
<div
|
||||
key={tx.id}
|
||||
className="flex items-center justify-between px-5 py-3.5 hover:bg-slate-800/20 transition-colors animate-fade-in"
|
||||
>
|
||||
<div className="divide-y divide-border-subtle">
|
||||
{recent.map((tx) => (
|
||||
<div key={tx.id} className="flex items-center justify-between px-5 py-3.5 hover:bg-surface-hover transition-colors animate-fade-in">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
tx.transaction_type === 'DEVOLUCION'
|
||||
? 'bg-emerald-500/10 text-emerald-400'
|
||||
: 'bg-red-500/10 text-red-400'
|
||||
}`}
|
||||
>
|
||||
{tx.transaction_type === 'DEVOLUCION' ? (
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
) : (
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
)}
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
tx.transaction_type === 'DEVOLUCION' ? 'bg-[#606C38]/10 text-[#606C38] dark:text-[#7a8a4a]' : 'bg-red-500/10 text-red-500 dark:text-red-400'
|
||||
}`}>
|
||||
{tx.transaction_type === 'DEVOLUCION' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">{tx.merchant}</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
<p className="text-xs text-text-muted">
|
||||
{formatDate(tx.date)}
|
||||
{tx.category && (
|
||||
<span className="ml-2 text-slate-600">
|
||||
{tx.category.name}
|
||||
</span>
|
||||
)}
|
||||
{tx.category && <span className="ml-2 text-text-faint">{tx.category.name}</span>}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={`font-mono text-sm font-medium flex-shrink-0 ml-4 ${
|
||||
tx.transaction_type === 'DEVOLUCION'
|
||||
? 'text-emerald-400'
|
||||
: 'text-white'
|
||||
}`}
|
||||
>
|
||||
{tx.transaction_type === 'DEVOLUCION' ? '+' : '-'}
|
||||
{formatAmount(tx.amount, tx.currency)}
|
||||
<span className={`font-mono text-sm font-medium flex-shrink-0 ml-4 ${
|
||||
tx.transaction_type === 'DEVOLUCION' ? 'text-[#606C38] dark:text-[#7a8a4a]' : ''
|
||||
}`}>
|
||||
{tx.transaction_type === 'DEVOLUCION' ? '+' : '-'}{formatAmount(tx.amount, tx.currency)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user