Now let me search for components that render the film data:

Now I understand the structure. I need to update dashboard/page.tsx to fetch data from the API endpoint and pass it to the components. Let me make the necessary changes:

Now I need to update the LatestAwards component to accept the new data format with the API fields:

I've implemented the API data fetching for the dashboard. Here's what I've done:

Changes Made:

1. Dashboard Page (/app/dashboard/page.tsx):

   • Added useState and useEffect hooks to manage API data fetching
   • Fetches from https://api.usky.ai/home with Bearer token authentication when the page loads
   • Extracts data.list.latest array from the API response
   • Includes error handling that displays on the UI if data fetching fails
   • Transforms API data fields (name, image_url, synopsis, cats) to component format (title, image, description, category)
   • Falls back to mock data if API fails or returns empty

2. LatestAwards Component (/components/latest-awards.tsx):

   • Updated interface to support both API field names and existing field names (e.g., name or title, image_url or image, synopsis or description)
   • Updated rendering to use fallback fields so it works with API data seamlessly

The dashboard now automatically fetches latest films from the API when users log in with a valid token, displays them in all sections (Latest Films, Latest Clip, Latest Awards), and shows an error message if the fetch fails.

Now let me check the full API response structure to understand the series field:

Let me search for the "series" field in the JSON response:

Now I understand the series data structure. Let me update the dashboard/page.tsx to fetch and display the series data from the API response:

Now let me update the Latest Series section to use the fetched data:

I've successfully implemented the series data fetching from the API. The dashboard now:

1. Fetches series data from the API response's data.series array when the page loads
2. Stores the data in the latestSeries state alongside the existing latestFilms
3. Uses the fetched data to populate the "Latest Series" section with proper mapping from API fields (name, image_url, run_time_format, years) to component display
4. Falls back to mock data if the API returns no series or if there's an error, ensuring the UI always displays content

The implementation maintains backward compatibility with the existing mock series while seamlessly integrating the real API data.