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

src/pages/DashboardPage.tsx

@@ -62,10 +62,20 @@ export function DashboardPage() {
           ]
         }}
       >
-        <div className="flex-1 rounded-xl bg-muted/30 p-4">
+        <div className="flex-1 rounded-xl bg-muted/50 p-4">
-          <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
+          <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">
+        <div className="flex-1 rounded-xl bg-muted/50 p-4">
-          <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
+          <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">
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
-        <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
+        <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 */}

src/pages/ExtractionsPage.tsx

@@ -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>

src/pages/admin/SettingsPage.tsx

@@ -82,10 +82,15 @@ export function SettingsPage() {
         ]
       }}
     >
-      <div className="flex-1 space-y-6">
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold">System Settings</h1>
+          <div>
-          <SettingsIcon className="h-8 w-8" />
+            <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">

src/pages/admin/UsersPage.tsx

@@ -126,9 +126,12 @@ export function UsersPage() {
           ]
         }}
       >
-        <div className="flex-1 space-y-4">
+        <div className="flex-1 rounded-xl bg-muted/50 p-4">
-          <div className="flex justify-between items-center">
+          <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-1 rounded-xl bg-muted/50 p-4">
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold">User Management</h1>
+          <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>