quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add TopUsersSection component to DashboardPage for displaying top users
Some checks failed
Frontend CI / lint (push) Failing after 19s
Details
Frontend CI / build (push) Has been skipped
Details

Browse Source
This commit is contained in:
JSC
2025-09-27 21:52:10 +02:00
parent d17dc5558c
commit f43fec3362
2 changed files with 244 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/dashboard/TopUsersSection.tsx Normal file
View File

@@ -0,0 +1,162 @@
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import NumberFlow from '@number-flow/react'
import { Loader2, Trophy, User } from 'lucide-react'
interface TopUser {
id: number
name: string
count: number
}
interface TopUsersSectionProps {
topUsers: TopUser[]
loading: boolean
metricType: string
period: string
limit: number
onMetricTypeChange: (value: string) => void
onPeriodChange: (value: string) => void
onLimitChange: (value: number) => void
}
const metricTypeLabels = {
sounds_played: 'Sounds Played',
credits_used: 'Credits Used',
tracks_added: 'Tracks Added',
tts_added: 'TTS Added',
playlists_created: 'Playlists Created',
}
const metricTypeUnits = {
sounds_played: 'plays',
credits_used: 'credits',
tracks_added: 'tracks',
tts_added: 'TTS',
playlists_created: 'playlists',
}
export function TopUsersSection({
topUsers,
loading,
metricType,
period,
limit,
onMetricTypeChange,
onPeriodChange,
onLimitChange,
}: TopUsersSectionProps) {
return (
<div className="mt-8">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Trophy className="h-5 w-5" />
<CardTitle>Top Users</CardTitle>
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<span className="text-sm font-medium">Metric:</span>
<Select value={metricType} onValueChange={onMetricTypeChange}>
<SelectTrigger className="w-40">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="credits_used">Credits Used</SelectItem>
<SelectItem value="playlists_created">Playlists Created</SelectItem>
<SelectItem value="sounds_played">Sounds Played</SelectItem>
<SelectItem value="tracks_added">Tracks Added</SelectItem>
<SelectItem value="tts_added">TTS Added</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">Period:</span>
<Select value={period} onValueChange={onPeriodChange}>
<SelectTrigger className="w-32">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="today">Today</SelectItem>
<SelectItem value="1_day">1 Day</SelectItem>
<SelectItem value="1_week">1 Week</SelectItem>
<SelectItem value="1_month">1 Month</SelectItem>
<SelectItem value="1_year">1 Year</SelectItem>
<SelectItem value="all_time">All Time</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">Count:</span>
<Select
value={limit.toString()}
onValueChange={value => onLimitChange(parseInt(value))}
>
<SelectTrigger className="w-20">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="25">25</SelectItem>
<SelectItem value="50">50</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
</CardHeader>
<CardContent>
{loading ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin mr-2" />
Loading top users...
</div>
) : topUsers.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<User className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>No users found for the selected criteria</p>
</div>
) : (
<div className="space-y-3">
{topUsers.map((user, index) => (
<div
key={user.id}
className="flex items-center gap-4 p-3 bg-muted/30 rounded-lg"
>
<div className="flex items-center justify-center w-8 h-8 bg-primary text-primary-foreground rounded-full font-bold text-sm">
{index + 1}
</div>
<User className="h-4 w-4 text-muted-foreground flex-shrink-0" />
<div className="flex-1 min-w-0">
<div className="font-medium truncate">{user.name}</div>
<div className="text-xs text-muted-foreground mt-1">
<span className="px-1.5 py-0.5 bg-secondary rounded text-xs">
{metricTypeLabels[metricType as keyof typeof metricTypeLabels]}
</span>
</div>
</div>
<div className="text-right">
<div className="text-2xl font-bold text-primary">
<NumberFlow value={user.count} />
</div>
<div className="text-xs text-muted-foreground">
{metricTypeUnits[metricType as keyof typeof metricTypeUnits]}
</div>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
)
}