Oliver/forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(admin): Update Voice Management layout

Browse source 
- compacted stats cards for better information density
- adjusted search and filter row to 50/50 split
- fixed search input width issues
This commit is contained in:
DJP 2025-12-11 17:02:10 -05:00
parent a9a72830df
commit c3dc50f607
1 changed files with 33 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
frontend/app/admin/voices/page.tsx
View file

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