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

feat: enhance UI in DashboardPage, ExtractionsPage, SettingsPage, and UsersPage with improved layout and descriptions

Browse Source
This commit is contained in:
JSC
2025-08-11 19:44:41 +02:00
parent dbbb9538dd
commit fc9cdf1065
4 changed files with 82 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/DashboardPage.tsx
View File

@@ -62,10 +62,20 @@ export function DashboardPage() {
]
}}
>
<div className="flex-1 rounded-xl bg-muted/30 p-4">
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold">Dashboard</h1>
<p className="text-muted-foreground">
Overview of your soundboard and track statistics
</p>
</div>
</div>
<div className="space-y-6">
<div>
<h2 className="text-lg font-semibold mb-3 text-muted-foreground">Soundboard Statistics</h2>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{[...Array(8)].map((_, i) => (
{[...Array(4)].map((_, i) => (
<Card key={i}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Loading...</CardTitle>
@@ -77,6 +87,23 @@ export function DashboardPage() {
))}
</div>
</div>
<div>
<h2 className="text-lg font-semibold mb-3 text-muted-foreground">Track Statistics</h2>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{[...Array(4)].map((_, i) => (
<Card key={i + 4}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Loading...</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold animate-pulse">---</div>
</CardContent>
</Card>
))}
</div>
</div>
</div>
</div>
</AppLayout>
)
}
@@ -90,8 +117,15 @@ export function DashboardPage() {
]
}}
>
<div className="flex-1 rounded-xl bg-muted/30 p-4">
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold">Dashboard</h1>
<p className="text-muted-foreground">
Overview of your soundboard and track statistics
</p>
</div>
</div>
<div className="border-2 border-dashed border-destructive/25 rounded-lg p-4">
<p className="text-destructive">Error loading statistics: {error}</p>
</div>
@@ -108,8 +142,15 @@ export function DashboardPage() {
]
}}
>
<div className="flex-1 rounded-xl bg-muted/30 p-4">
<h1 className="text-2xl font-bold mb-6">Dashboard</h1>
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold">Dashboard</h1>
<p className="text-muted-foreground">
Overview of your soundboard and track statistics
</p>
</div>
</div>
<div className="space-y-6">
{/* Soundboard Statistics */}

2
src/pages/ExtractionsPage.tsx
View File

@@ -103,7 +103,7 @@ export function ExtractionsPage() {
]
}}
>
<div className="flex-1 rounded-xl bg-muted/50 p-6">
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold">Audio Extractions</h1>

13
src/pages/admin/SettingsPage.tsx
View File

@@ -82,10 +82,15 @@ export function SettingsPage() {
]
}}
>
<div className="flex-1 space-y-6">
<div className="flex justify-between items-center">
<h1 className="text-3xl font-bold">System Settings</h1>
<SettingsIcon className="h-8 w-8" />
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold">System Settings</h1>
<p className="text-muted-foreground">
Manage system-wide settings and operations
</p>
</div>
<SettingsIcon className="h-6 w-6 text-muted-foreground" />
</div>
<div className="grid gap-6 md:grid-cols-2">

18
src/pages/admin/UsersPage.tsx
View File

@@ -126,9 +126,12 @@ export function UsersPage() {
]
}}
>
<div className="flex-1 space-y-4">
<div className="flex justify-between items-center">
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-64 mt-1" />
</div>
<Skeleton className="h-10 w-32" />
</div>
<Card>
@@ -158,9 +161,14 @@ export function UsersPage() {
]
}}
>
<div className="flex-1 space-y-6">
<div className="flex justify-between items-center">
<h1 className="text-3xl font-bold">User Management</h1>
<div className="flex-1 rounded-xl bg-muted/50 p-4">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold">User Management</h1>
<p className="text-muted-foreground">
Manage user accounts and permissions
</p>
</div>
<Button onClick={loadData} disabled={loading}>
Refresh
</Button>