FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restyle statistics tab — stat cards, charts, recent sessions table

Browse Source
This commit is contained in:
Fran Jurmanović
2026-03-21 21:27:18 +01:00
parent 374899e839
commit 9d240c3a80
6 changed files with 63 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/statistics/RecentSessions.tsx
View File

@@ -29,51 +29,52 @@ export function RecentSessions({ sessions }: RecentSessionsProps) {
if (sessions.length === 0) {
return (
<div className="py-8 text-center">
<div className="mb-2 text-4xl">📊</div>
<p className="text-gray-400">No recent sessions found</p>
</div>
<div className="px-4 py-8 text-center text-sm text-gh-muted">No recent sessions found</div>
);
}
return (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-700">
<table className="min-w-full">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<tr className="border-b border-gh-border-muted bg-gh-base">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Date
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Type
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Track
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Duration
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Players
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-700">
<tbody>
{sessions.map((session) => (
<tr key={session.id} className="transition-colors hover:bg-gray-700">
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<tr key={session.id} className="border-b border-gh-border-muted transition-colors hover:bg-gh-hover last:border-0">
<td className="px-4 py-3 text-sm text-gh-muted">
{formatDate(session.date)}
</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<span className="inline-flex items-center rounded-full bg-blue-900 px-2.5 py-0.5 text-xs font-medium text-blue-300">
{session.type}
<td className="px-4 py-3">
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
session.type === 'R' ? 'bg-gh-green-bg text-gh-green' :
session.type === 'Q' ? 'bg-gh-yellow-bg text-gh-yellow' :
'bg-gh-blue-bg text-gh-blue'
}`}>
{session.type === 'R' ? 'Race' : session.type === 'Q' ? 'Qualify' : 'Practice'}
</span>
</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">{session.track}</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<td className="px-4 py-3 text-sm text-gh-secondary">{session.track}</td>
<td className="px-4 py-3 text-sm text-gh-muted">
{formatDuration(session.duration)}
</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<td className="px-4 py-3 text-sm text-gh-secondary">
{session.players}
</td>
</tr>