aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sorting options for media outlets in the admin dashboard

Browse Source 
Rearrange UI elements in AdminDashboard.tsx to place the sort by dropdown next to the header, and update the selection logic.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/YptCfK0
This commit is contained in:
kimjaehyeon0101
2025-09-29 19:46:54 +00:00
parent b4e306a1c9
commit 1ad56f715d
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/스크린샷 2025-09-30 오전 4.46.41_1759175209563.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

30
client/src/pages/AdminDashboard.tsx
View File

@ -151,23 +151,11 @@ export default function AdminDashboard() {
</header> </header>
<main className="max-w-7xl mx-auto px-4 py-4"> <main className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between mb-6"> <div className="mb-6">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">Admin Dashboard</h1> <h1 className="text-2xl font-bold text-gray-900 mb-2">Admin Dashboard</h1>
<p className="text-gray-600">Search and select media outlets to manage</p> <p className="text-gray-600">Search and select media outlets to manage</p>
</div> </div>
<div className="flex items-center space-x-2">
<ArrowUpDown className="h-4 w-4 text-gray-500" />
<Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
<SelectTrigger className="w-[180px]" data-testid="admin-sort-select">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="alphabetical" data-testid="admin-sort-alphabetical">Alphabetical</SelectItem>
<SelectItem value="traffic" data-testid="admin-sort-traffic">Traffic</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
{outletsLoading ? ( {outletsLoading ? (
@ -188,9 +176,23 @@ export default function AdminDashboard() {
</div> </div>
) : ( ) : (
<> <>
<div className="mb-4 text-sm text-gray-500"> <div className="flex items-center justify-between mb-6">
<div className="text-sm text-gray-500">
{filteredOutlets.length} media outlets {searchTerm && `(search results for "${searchTerm}")`} {filteredOutlets.length} media outlets {searchTerm && `(search results for "${searchTerm}")`}
</div> </div>
<div className="flex items-center space-x-2">
<ArrowUpDown className="h-4 w-4 text-gray-500" />
<Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
<SelectTrigger className="w-[180px]" data-testid="admin-sort-select">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="alphabetical" data-testid="admin-sort-alphabetical">Alphabetical</SelectItem>
<SelectItem value="traffic" data-testid="admin-sort-traffic">Traffic</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* People Section */} {/* People Section */}