Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 3x 3x 3x 3x 1x 2x 2x | import { useDonations } from '@features/donation/hooks/useDonations'
import { Card, CardHeader, CardTitle, CardContent } from '@core/components/ui/card'
import { useTranslation } from 'react-i18next'
import { useCurrencyFormatter } from '@core/hooks/useCurrencyFormatter'
import { Loader2, DollarSign } from 'lucide-react'
export const RecentActivity = () => {
const { t } = useTranslation('common')
const { donations, isLoading } = useDonations(undefined, 6) // Fetch latest 6
const { formatCurrency } = useCurrencyFormatter()
if (isLoading) {
return (
<div className="flex justify-center items-center h-[350px]">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
)
}
return (
<Card
style={{
backgroundColor: 'var(--admin-card-bg)',
borderColor: 'var(--admin-border-color)',
}}
>
<CardHeader>
<CardTitle>{t('dashboard.activity.title', 'Recent Activity')}</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-8">
{donations.length === 0 ? (
<p className="text-sm text-muted-foreground">
{t('dashboard.activity.empty', 'No recent activity')}
</p>
) : (
donations.map((donation) => (
<div key={donation.id} className="flex items-center">
<div className="h-9 w-9 rounded-full flex items-center justify-center relative">
<div
className="absolute inset-0 rounded-full opacity-10"
style={{ backgroundColor: 'var(--primary)' }}
/>
<DollarSign
className="h-4 w-4 relative"
style={{ color: 'var(--primary)' }}
/>
</div>
<div className="ml-4 space-y-1">
<p className="text-sm font-medium leading-none">
{donation.isAnonymous
? t('common.anonymous', 'Anonymous')
: donation.donorName}
</p>
<p className="text-sm text-muted-foreground">
{new Date(donation.createdAt).toLocaleDateString()} •{' '}
{new Date(donation.createdAt).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
})}
</p>
</div>
<div
className="ml-auto font-medium"
style={{ color: 'var(--global-success-color)' }}
>
+{formatCurrency(Number(donation.amount) / 100)}
</div>
</div>
))
)}
</div>
</CardContent>
</Card>
)
}
|