Build Admin Dashboard UI | Lina & Dylan Perkins

[jpuka01]

Objective

Build the complete admin dashboard page from scratch where admins can view pending artwork and moderate it. Currently /app/admin/page.tsx doesn't exist.

Tasks

• Create /app/admin/page.tsx:

  • This file doesn't exist - create it from scratch!
  • Add server-side auth check at top of component
  • If not admin, redirect to home

• Design Pending Queue Interface:

  • Grid or list view of pending artworks
  • Each card shows: thumbnail (small image preview), title, artist name, submission date
  • Loading state while fetching data
  • Empty state: "No pending artwork to review"

• Add Action Buttons for Each Artwork:

  • ✅ Approve (green button)
  • ❌ Reject (red button)
  • ⭐ Feature (yellow/gold button)
  • 👤 Reassign (blue button)

• Create Modals:

  • Reject Modal: Text input for rejection reason + confirm/cancel buttons
  • Reassign Modal: Dropdown to select user + confirm/cancel
  • Feature Modal: "Feature this artwork?" confirmation

• Implement Logic:

  'use client';
  import { useEffect, useState } from 'react';
  
  export default function AdminDashboard() {
    const [artworks, setArtworks] = useState([]);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
      fetchQueue();
    }, []);
  
    const fetchQueue = async () => {
      const res = await fetch('/api/admin/queue');
      const data = await res.json();
      setArtworks(data.artworks);
      setLoading(false);
    };
  
    const handleApprove = async (id: string) => {
      await fetch(`/api/admin/artworks/${id}/approve`, { method: 'PATCH' });
      fetchQueue(); // Refresh
    };
  
    const handleReject = async (id: string, reason: string) => {
      await fetch(`/api/admin/artworks/${id}/reject`, {
        method: 'PATCH',
        body: JSON.stringify({ reason })
      });
      fetchQueue();
    };
  
    // Similar for feature and reassign...
  }

• Styling:

  • Use AFH brand colors (orange #F26729, blue #1B264F)
  • Consistent spacing and typography
  • Hover effects on buttons
  • Responsive grid layout

• Test Full Workflow:

  • Login as admin
  • View pending queue
  • Click each button and verify modals open
  • Submit actions and verify artwork disappears from queue

Acceptance Criteria

• ✅ Admin dashboard page exists at /admin
• ✅ Fetches pending artworks on load
• ✅ All 4 action buttons work and call correct endpoints
• ✅ Modals work properly (open/close, validation)
• ✅ Queue updates after each action
• ✅ Non-admins cannot access (redirect or error)
• ✅ Responsive design for all screen sizes
• ✅ Follows AFH brand guidelines