From c3dc50f607efc86eaccdbeb936e6f5e9eb097edf Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Thu, 11 Dec 2025 17:02:10 -0500
Subject: [PATCH] style(admin): Update Voice Management layout

- compacted stats cards for better information density
- adjusted search and filter row to 50/50 split
- fixed search input width issues
---
 frontend/app/admin/voices/page.tsx | 67 +++++++++++++++---------------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/frontend/app/admin/voices/page.tsx b/frontend/app/admin/voices/page.tsx
index 126a55e..c2322ec 100644
--- a/frontend/app/admin/voices/page.tsx
+++ b/frontend/app/admin/voices/page.tsx
@@ -247,23 +247,21 @@ export default function VoicesAdminPage() {
         </div>
 
         {/* Filters */}
-        <div className="flex gap-4">
-          <div className="flex-1">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search by name, accent, gender, age, use case, or ID..."
-                className="input-field pl-10"
-              />
-            </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="relative w-full">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search..."
+              className="w-full bg-forge-dark border border-gray-700 rounded-lg px-4 py-3 pl-10 text-white placeholder-gray-500 focus:outline-none focus:border-forge-yellow transition-colors"
+            />
           </div>
           <select
             value={categoryFilter}
             onChange={(e) => setCategoryFilter(e.target.value)}
-            className="select-field w-40"
+            className="select-field w-full"
           >
             <option value="">All Categories</option>
             {categories.map((cat) => (
@@ -282,54 +280,55 @@ export default function VoicesAdminPage() {
         )}
 
         {/* Stats */}
-        <div className="grid grid-cols-4 gap-4">
-          <div className="bg-forge-dark rounded-xl border border-gray-800 p-4">
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div className="bg-forge-dark rounded-lg border border-gray-800 p-3">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-purple-900/30 rounded-lg flex items-center justify-center">
-                <Volume2 className="w-5 h-5 text-purple-400" />
+              <div className="w-8 h-8 bg-purple-900/30 rounded-md flex items-center justify-center">
+                <Volume2 className="w-4 h-4 text-purple-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-white">{voices.length}</p>
-                <p className="text-sm text-gray-500">Total Voices</p>
+                <p className="text-lg font-bold text-white leading-none">{voices.length}</p>
+                <p className="text-xs text-gray-500 mt-1">Total Voices</p>
               </div>
             </div>
           </div>
-          <div className="bg-forge-dark rounded-xl border border-gray-800 p-4">
+          <div className="bg-forge-dark rounded-lg border border-gray-800 p-3">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-blue-900/30 rounded-lg flex items-center justify-center">
-                <Building2 className="w-5 h-5 text-blue-400" />
+              <div className="w-8 h-8 bg-blue-900/30 rounded-md flex items-center justify-center">
+                <Building2 className="w-4 h-4 text-blue-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-white">
+                <p className="text-lg font-bold text-white leading-none">
                   {voices.filter((v) => v.category === 'premade').length}
                 </p>
-                <p className="text-sm text-gray-500">Premade</p>
+                <p className="text-xs text-gray-500 mt-1">Premade</p>
               </div>
             </div>
           </div>
-          <div className="bg-forge-dark rounded-xl border border-gray-800 p-4">
+          <div className="bg-forge-dark rounded-lg border border-gray-800 p-3">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-green-900/30 rounded-lg flex items-center justify-center">
-                <User className="w-5 h-5 text-green-400" />
+              <div className="w-8 h-8 bg-green-900/30 rounded-md flex items-center justify-center">
+                <User className="w-4 h-4 text-green-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-white">
+                <p className="text-lg font-bold text-white leading-none">
                   {voices.filter((v) => v.category === 'cloned').length}
                 </p>
-                <p className="text-sm text-gray-500">Cloned</p>
+                <p className="text-xs text-gray-500 mt-1">Cloned</p>
               </div>
             </div>
           </div>
-          <div className="bg-forge-dark rounded-xl border border-gray-800 p-4">
+          <div className="bg-forge-dark rounded-lg border border-gray-800 p-3">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-orange-900/30 rounded-lg flex items-center justify-center">
-                <Mic className="w-5 h-5 text-orange-400" />
+              <div className="w-8 h-8 bg-orange-900/30 rounded-md flex items-center justify-center">
+                <Mic className="w-4 h-4 text-orange-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-white">
+                <p className="text-lg font-bold text-white leading-none">
                   {voices.filter((v) => v.category === 'professional').length}
                 </p>
-                <p className="text-sm text-gray-500">Professional</p>
+                <p className="text-xs text-gray-500 mt-1">Professional</p>
               </div>
             </div>
           </div>