Spaces:
Running
Running
File size: 4,570 Bytes
149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e 572f92e 149698e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import { useTranslation } from 'react-i18next';
import { Clock, Banknote, Receipt, Loader2 } from 'lucide-react';
interface ReportStatsProps {
totalAmount: number;
totalCount: number;
byStatus?: Record<string, number>;
isLoading?: boolean;
}
export default function ReportStats({
totalAmount,
totalCount,
byStatus,
isLoading,
}: ReportStatsProps) {
const { t } = useTranslation();
const deposited = byStatus?.deposited ?? 0;
const pending = byStatus?.pending ?? 0;
const total = totalCount || 1;
const depositedPct = Math.round((deposited / total) * 100);
const formattedAmount = totalAmount.toLocaleString('fr-CA', {
style: 'currency',
currency: 'CAD',
minimumFractionDigits: 2,
});
return (
<div className="flex flex-col gap-6 lg:col-span-1">
{/* Volume Total */}
<div className="bg-card rounded-xl border border-border p-6 shadow-[0_10px_15px_-3px_rgba(0,0,0,0.05),0_4px_6px_-2px_rgba(0,0,0,0.025)] flex flex-col justify-between h-full relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
<div className="absolute -right-6 -top-6 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-full size-32 flex items-center justify-center opacity-50 group-hover:scale-110 transition-transform">
<Banknote className="h-12 w-12 text-primary/20" />
</div>
<div className="relative z-10">
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
{t('reports.stats.totalVolume')}
</p>
{isLoading ? (
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
) : (
<h3 className="text-4xl font-extrabold text-foreground tracking-tight">
{formattedAmount}
</h3>
)}
<div className="flex items-center mt-3 text-muted-foreground text-xs font-medium bg-slate-50 w-fit px-2 py-1 rounded-md border border-slate-100">
<span>
{t('status.deposited', 'Déposé')}: {deposited} | {t('status.pending', 'En attente')}: {pending}
</span>
</div>
</div>
<div className="mt-8 relative z-10">
<div className="flex justify-between text-xs font-medium text-muted-foreground mb-1">
<span>{t('status.deposited', 'Déposé')}</span>
<span>{depositedPct}%</span>
</div>
<div className="w-full bg-primary/20 rounded-full h-2 overflow-hidden">
<div
className="bg-primary h-full rounded-full transition-all duration-500"
style={{ width: `${depositedPct}%` }}
/>
</div>
</div>
</div>
{/* Transactions Traitées */}
<div className="bg-card rounded-xl border border-border p-6 shadow-[0_10px_15px_-3px_rgba(0,0,0,0.05),0_4px_6px_-2px_rgba(0,0,0,0.025)] flex flex-col justify-between h-full relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
<div className="absolute -right-6 -top-6 p-4 bg-gradient-to-br from-purple-50 to-fuchsia-50 rounded-full size-32 flex items-center justify-center opacity-50 group-hover:scale-110 transition-transform">
<Receipt className="h-12 w-12 text-purple-500/20" />
</div>
<div className="relative z-10">
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
{t('reports.stats.transactionsProcessed')}
</p>
{isLoading ? (
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
) : (
<h3 className="text-4xl font-extrabold text-foreground tracking-tight">
{totalCount.toLocaleString('fr-CA')}
</h3>
)}
<div className="flex items-center mt-3 text-muted-foreground text-xs font-medium bg-slate-50 w-fit px-2 py-1 rounded-md border border-slate-100">
<Clock className="h-3.5 w-3.5 mr-1" />
<span>{t('reports.stats.lastUpdate')}: {new Date().toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' })}</span>
</div>
</div>
<div className="mt-6 flex gap-3 relative z-10 text-xs text-muted-foreground">
{byStatus && Object.entries(byStatus).map(([key, val]) => (
<span key={key} className="bg-slate-50 px-2 py-1 rounded border border-slate-100 font-medium">
{t(`status.${key}`, key)}: {val}
</span>
))}
</div>
</div>
</div>
);
}
|