From 463f042f64b31d9ac1f754889bfb2f04da27b0a5 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 19:48:58 +0000
Subject: [PATCH] Improve organization of media outlets by adding sorting
 options

Removes the global sorting dropdown and adds inline sort toggles to each media outlet category.

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
---
 client/src/pages/AdminDashboard.tsx | 71 +++++++++++++++++------------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/client/src/pages/AdminDashboard.tsx b/client/src/pages/AdminDashboard.tsx
index f6043e2..bcbc204 100644
--- a/client/src/pages/AdminDashboard.tsx
+++ b/client/src/pages/AdminDashboard.tsx
@@ -176,31 +176,24 @@ export default function AdminDashboard() {
           </div>
         ) : (
           <>
-            <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}")`}
-              </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">
               {/* People Section */}
               <div data-testid="admin-section-people">
-                <h2 className="text-xl font-bold text-gray-900 mb-2">
-                  People 
-                  <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
-                </h2>
+                <div className="flex items-center justify-between mb-2">
+                  <h2 className="text-xl font-bold text-gray-900">
+                    People 
+                    <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
+                  </h2>
+                  <button
+                    onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
+                    className="p-1 rounded hover:bg-gray-100"
+                    title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
+                    data-testid="people-sort-toggle"
+                  >
+                    <ArrowUpDown className="h-4 w-4 text-gray-500" />
+                  </button>
+                </div>
                 <div className="space-y-2">
                   {getOutletsByCategory("People").map((outlet) => (
                     <Card 
@@ -244,10 +237,20 @@ export default function AdminDashboard() {
 
               {/* Topics Section */}
               <div data-testid="admin-section-topics">
-                <h2 className="text-xl font-bold text-gray-900 mb-2">
-                  Topics 
-                  <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
-                </h2>
+                <div className="flex items-center justify-between mb-2">
+                  <h2 className="text-xl font-bold text-gray-900">
+                    Topics 
+                    <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
+                  </h2>
+                  <button
+                    onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
+                    className="p-1 rounded hover:bg-gray-100"
+                    title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
+                    data-testid="topics-sort-toggle"
+                  >
+                    <ArrowUpDown className="h-4 w-4 text-gray-500" />
+                  </button>
+                </div>
                 <div className="space-y-2">
                   {getOutletsByCategory("Topics").map((outlet) => (
                     <Card 
@@ -291,10 +294,20 @@ export default function AdminDashboard() {
 
               {/* Companies Section */}
               <div data-testid="admin-section-companies">
-                <h2 className="text-xl font-bold text-gray-900 mb-2">
-                  Companies 
-                  <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
-                </h2>
+                <div className="flex items-center justify-between mb-2">
+                  <h2 className="text-xl font-bold text-gray-900">
+                    Companies 
+                    <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
+                  </h2>
+                  <button
+                    onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
+                    className="p-1 rounded hover:bg-gray-100"
+                    title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
+                    data-testid="companies-sort-toggle"
+                  >
+                    <ArrowUpDown className="h-4 w-4 text-gray-500" />
+                  </button>
+                </div>
                 <div className="space-y-2">
                   {getOutletsByCategory("Companies").map((outlet) => (
                     <Card