[Epic] User Dashboard, Media List CRUD, and Progress UI Consolidation (GraphQL Migration)

[vitorhugo-java]

Epic: User List & Progress Tracking Integration (Next.js)

Context

This feature consolidates the needs from three tracked issues (Add-to-List button, Dashboard separation, and Quick Progress Update) into the Next.js front-end, fully adopting the new backend GraphQL API (see PR #89 in SpringAPI_EspacoGeek).

Steps & Key Requirements

1. Dashboard Setup & UI Migration

• Create a new route: app/profile/page.jsx. This will serve as the new user dashboard.
• Migration: Port UI and logic from media-buddy-profile/src/pages/Index.jsx and its core components (ProfileHeader.jsx, MediaList.jsx, ActivityHistory.jsx) into the new dashboard page. Make sure to strip all TypeScript (interfaces, types, : React.FC, etc.), using plain JavaScript/JSX only.
• UI: Add Tabs for each status using the new backend enums: PLANNING, IN_PROGRESS, PAUSED, COMPLETED, DROPPED.

2. Media Detail Page - Add to List

• In app/media/[mediaId]/[mediaName]/page.jsx, add an "Add to List" dropdown/button group for users to select a status and add/update media in their progress list.
• Wire this button to Apollo and the new upsertUserMedia mutation using the latest input types.

3. Quick "+1" Progress Update

• In each media card within the dashboard, add a "+1" button near the progress field.
• When clicked, it should use Apollo's mutation with optimistic UI so the progress increases instantly.

Execution Notes

• Define the GraphQL mutation for upsertUserMedia in src/components/apollo/schemas/mutations/upsertUserMedia.jsx (see below for scaffold).
• Migrate and adapt existing media-buddy-profile UI (remove all TS, align file structure, and fix all imports for Next.js App Router).
• Focus on UX: smooth filter transitions, instant feedback for progress update, and clear error states.

---

[SCAFFOLD] Apollo Mutation (save as src/components/apollo/schemas/mutations/upsertUserMedia.jsx):

import { gql } from '@apollo/client';

export const UPSERT_USER_MEDIA = gql`
  mutation UpsertUserMedia($input: UpdateUserMediaInput!) {
    upsertUserMedia(input: $input) {
      id
      mediaId
      status
      progress
      score
      startDate
      finishDate
      note
      customStatusId
      rewatchCount
      isPrivate
      personalNotes
    }
  }
`;

---

[SCAFFOLD] New Dashboard Page (app/profile/page.jsx):

'use client';
import React from 'react';
import ProfileHeader from '@/components/profile/ProfileHeader';
import MediaList from '@/components/profile/MediaList';
import ActivityHistory from '@/components/profile/ActivityHistory';

const STATUS_TABS = ['PLANNING', 'IN_PROGRESS', 'PAUSED', 'COMPLETED', 'DROPPED'];

export default function ProfileDashboard() {
  const [activeTab, setActiveTab] = React.useState('IN_PROGRESS');

  // Fetch user's media and activity here (Apollo hooks)

  return (
    <main>
      <ProfileHeader />
      <div className="tabs">
        {STATUS_TABS.map(status => (
          <button
            key={status}
            onClick={() => setActiveTab(status)}
            className={activeTab === status ? 'tab-active' : ''}
          >
            {status.replace('_', ' ')}
          </button>
        ))}
      </div>
      <MediaList status={activeTab} />
      <ActivityHistory />
    </main>
  );
}

---

Once those are in, move on to the migrated MediaList, then the Add-to-List button and quick update logic.