138 lines
4.9 KiB
TypeScript
138 lines
4.9 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { formatDistanceToNow } from 'date-fns'
|
|
|
|
interface RecentActivityProps {
|
|
recentUsers: Array<{
|
|
_id: string
|
|
name: string
|
|
email: string
|
|
siliconId: string
|
|
createdAt: string
|
|
}>
|
|
recentTransactions: Array<{
|
|
_id: string
|
|
type: string
|
|
amount: number
|
|
description: string
|
|
status: string
|
|
createdAt: string
|
|
userId: {
|
|
name: string
|
|
email: string
|
|
siliconId: string
|
|
}
|
|
}>
|
|
}
|
|
|
|
export default function RecentActivity({ recentUsers, recentTransactions }: RecentActivityProps) {
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat('en-IN', {
|
|
style: 'currency',
|
|
currency: 'INR',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
}).format(amount)
|
|
}
|
|
|
|
const getTransactionBadgeColor = (type: string) => {
|
|
switch (type) {
|
|
case 'credit':
|
|
return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300'
|
|
case 'debit':
|
|
return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'
|
|
default:
|
|
return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Recent Users */}
|
|
<Card className="border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Recent Users
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{recentUsers.length === 0 ? (
|
|
<p className="text-gray-500 dark:text-gray-400 text-sm">No recent users</p>
|
|
) : (
|
|
recentUsers.map((user) => (
|
|
<div
|
|
key={user._id}
|
|
className="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0"
|
|
>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-gray-900 dark:text-white">{user.name}</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">{user.email}</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-500">ID: {user.siliconId}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
{user.createdAt
|
|
? formatDistanceToNow(new Date(user.createdAt), { addSuffix: true })
|
|
: 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Recent Transactions */}
|
|
<Card className="border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Recent Transactions
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{recentTransactions.length === 0 ? (
|
|
<p className="text-gray-500 dark:text-gray-400 text-sm">No recent transactions</p>
|
|
) : (
|
|
recentTransactions.map((transaction) => (
|
|
<div
|
|
key={transaction._id}
|
|
className="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0"
|
|
>
|
|
<div className="flex-1">
|
|
<div className="flex items-center space-x-2">
|
|
<Badge className={getTransactionBadgeColor(transaction.type)}>
|
|
{transaction.type}
|
|
</Badge>
|
|
<span className="font-medium text-gray-900 dark:text-white">
|
|
{formatCurrency(transaction.amount)}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{transaction.description}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-500">
|
|
{transaction.userId?.name} ({transaction.userId?.siliconId})
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
{transaction.createdAt
|
|
? formatDistanceToNow(new Date(transaction.createdAt), { addSuffix: true })
|
|
: 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|