From 35f380bfb4fd83f5ab159960ff6fc05ee5706dca Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 4 Oct 2025 18:58:39 +0000 Subject: [PATCH] Refactor: Redesign admin panel --- src/components/admin/UserManagement.tsx | 52 ++--- src/components/layout/AdminHeader.tsx | 29 ++- src/components/moderation/ProfileManager.tsx | 93 ++++---- src/components/moderation/ReportsQueue.tsx | 51 +++-- src/components/moderation/UserRoleManager.tsx | 66 +++--- src/pages/Admin.tsx | 211 +++++++++--------- 6 files changed, 250 insertions(+), 252 deletions(-) diff --git a/src/components/admin/UserManagement.tsx b/src/components/admin/UserManagement.tsx index d7558783..5bc137d2 100644 --- a/src/components/admin/UserManagement.tsx +++ b/src/components/admin/UserManagement.tsx @@ -4,38 +4,26 @@ import { ProfileManager } from '@/components/moderation/ProfileManager'; import { UserRoleManager } from '@/components/moderation/UserRoleManager'; import { Users, Shield, UserCheck, UserX } from 'lucide-react'; export function UserManagement() { - return
- - - - - - - Users - - - - Roles - - + return ( + + + + + Users + + + + Roles + + - - - - - - - - + + + - - - - - - - - - -
; + + + + + ); } \ No newline at end of file diff --git a/src/components/layout/AdminHeader.tsx b/src/components/layout/AdminHeader.tsx index 02ec6125..2ef0cd3b 100644 --- a/src/components/layout/AdminHeader.tsx +++ b/src/components/layout/AdminHeader.tsx @@ -27,26 +27,23 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) { const pageTitle = isSettingsPage ? 'Admin Settings' : 'Admin Dashboard'; return ( -
-
+
+
{/* Left Section - Navigation */} -
+
-
+
-
- -

- Admin - {pageTitle} -

-
+

+ Admin + {pageTitle} +

{/* Right Section - Admin actions */} @@ -94,16 +91,16 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) { size="sm" onClick={onRefresh} title="Refresh admin data" - className="hidden md:flex" + className="hidden md:flex gap-2" > - Refresh + Refresh {permissions?.role_level === 'superuser' && !isSettingsPage && ( - )} diff --git a/src/components/moderation/ProfileManager.tsx b/src/components/moderation/ProfileManager.tsx index 8ab41c4d..52fe11cb 100644 --- a/src/components/moderation/ProfileManager.tsx +++ b/src/components/moderation/ProfileManager.tsx @@ -264,32 +264,32 @@ export function ProfileManager() { } return ( -
- {/* Filters */} -
+
+ {/* Filters - compact single row */} +
setSearchTerm(e.target.value)} - className="pl-10" + className="pl-10 h-9" />
)} @@ -422,10 +425,10 @@ export function ProfileManager() { ))} {filteredProfiles.length === 0 && ( -
- -

No Users Found

-

+

+ +

No Users Found

+

No users match your current filters.

diff --git a/src/components/moderation/ReportsQueue.tsx b/src/components/moderation/ReportsQueue.tsx index b07642f4..c2f48718 100644 --- a/src/components/moderation/ReportsQueue.tsx +++ b/src/components/moderation/ReportsQueue.tsx @@ -212,47 +212,44 @@ export const ReportsQueue = forwardRef((props, ref) => { } return ( -
+
{reports.map((report) => ( - - -
-
- + + +
+
+ {REPORT_TYPE_LABELS[report.report_type as keyof typeof REPORT_TYPE_LABELS]} - + {report.reported_entity_type}
-
- - {format(new Date(report.created_at), 'MMM d, yyyy HH:mm')} +
+ + {format(new Date(report.created_at), 'MMM d, HH:mm')}
{report.reporter_profile && ( -
- - Reported by: - +
+ + {report.reporter_profile.display_name || report.reporter_profile.username} {report.reporter_profile.display_name && ( - - @{report.reporter_profile.username} - + @{report.reporter_profile.username} )}
)} - + {report.reason && (
- -

+ +

{report.reason}

@@ -260,17 +257,17 @@ export const ReportsQueue = forwardRef((props, ref) => { {report.reported_content && (
- -
+ +
{report.reported_entity_type === 'review' && (
{report.reported_content.title && ( -

{report.reported_content.title}

+

{report.reported_content.title}

)} {report.reported_content.content && ( -

{report.reported_content.content}

+

{report.reported_content.content}

)} -
+
Rating: {report.reported_content.rating}/5
@@ -279,10 +276,11 @@ export const ReportsQueue = forwardRef((props, ref) => {
)} -
+
; } const filteredRoles = userRoles.filter(role => role.profiles?.username?.toLowerCase().includes(searchTerm.toLowerCase()) || role.profiles?.display_name?.toLowerCase().includes(searchTerm.toLowerCase()) || role.role.toLowerCase().includes(searchTerm.toLowerCase())); - return
+ return
{/* Add new role */} - - - -
+ + + Grant Role + + +
- +
- - setNewUserSearch(e.target.value)} className="pl-10" /> + + setNewUserSearch(e.target.value)} className="pl-10 h-9 mt-1" />
- {searchResults.length > 0 &&
- {searchResults.map(profile =>
{ + {searchResults.length > 0 &&
+ {searchResults.map(profile =>
{ setNewUserSearch(profile.display_name || profile.username); setSearchResults([profile]); }}>
{profile.display_name || profile.username}
- {profile.display_name &&
+ {profile.display_name &&
@{profile.username}
}
)} @@ -208,10 +210,10 @@ export function UserRoleManager() {
- + setSearchTerm(e.target.value)} className="pl-10" /> + + setSearchTerm(e.target.value)} className="pl-10 h-9 mt-1" />
{/* User roles list */} -
- {filteredRoles.length === 0 ?
- -

No roles found

-

- {searchTerm ? 'No users match your search criteria.' : 'No user roles have been granted yet.'} +

+ {filteredRoles.length === 0 ?
+ +

No roles found

+

+ {searchTerm ? 'No users match your search.' : 'No user roles granted yet.'}

-
: filteredRoles.map(userRole => - -
-
-
+
: filteredRoles.map(userRole => + +
+
+
{userRole.profiles?.display_name || userRole.profiles?.username}
- {userRole.profiles?.display_name &&
+ {userRole.profiles?.display_name &&
@{userRole.profiles.username}
}
- + {userRole.role}
{/* Only show revoke button if current user can manage this role */} - {(isSuperuser() || isAdmin() && !['admin', 'superuser'].includes(userRole.role)) && } diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx index 8e4f8139..96c638e9 100644 --- a/src/pages/Admin.tsx +++ b/src/pages/Admin.tsx @@ -79,109 +79,118 @@ export default function Admin() { return ( <> -
-
- {/* Refresh status indicator */} -
-
- - {refreshMode === 'auto' ? ( - Auto-refresh: every {pollInterval / 1000}s - ) : ( - Manual refresh only - )} - {lastUpdated && ( - - • Last updated: {lastUpdated.toLocaleTimeString()} - - )} +
+ {/* Refresh status indicator - subtle */} +
+ + {refreshMode === 'auto' ? ( + Auto-refresh: every {pollInterval / 1000}s + ) : ( + Manual refresh + )} + {lastUpdated && ( + • {lastUpdated.toLocaleTimeString()} + )} +
+ + {/* Stats cards - horizontal layout */} +
+ + +
+
+
+ +
+
+

Pending

+

Submissions

+
+
+
+ {stats.pendingSubmissions} +
+
+ + + + + +
+
+
+ +
+
+

Open

+

Reports

+
+
+
+ {stats.openReports} +
+
+ + + + + +
+
+
+ +
+
+

Flagged

+

Content

+
+
+
+ {stats.flaggedContent} +
+
+ + +
+ + {/* Content Moderation Section - flatter design */} +
+
+

+ + Moderation Queue +

+ + + + + {isMobile ? 'Queue' : 'Moderation Queue'} + + + + Reports + + + + + + + + + + + +
+ + {/* User Management Section - flatter design */} +
+

+ + User Management +

+
- - {/* Stats cards */} -
- - - - Pending Submissions - - -
- {stats.pendingSubmissions} -
- - - - - - - Open Reports - - -
- {stats.openReports} -
- - - - - - - Flagged Content - - -
- {stats.flaggedContent} -
- - -
-
- - {/* Content Moderation Section */} - - - - - Moderation Queue - - - - - - - - {isMobile ? 'Queue' : 'Moderation Queue'} - - - - Reports - - - - - - - - - - - - - - - {/* User Management Section */} - - - - - User Management - - - - - -
);