Completed the songs and artists pages

src/components/uiMainContentTitle/styles/UIMainContentTitle.module.css

@@ -1,3 +1,4 @@
 .uiMainContentTitleContainer {
     padding: 7px 0px;
+    max-width: 78vw;
 }

src/features/artists/components/topArtistsList.tsx

@@ -0,0 +1,71 @@
+import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
+import { SubSectionCard } from "../../../pages/app/components/SubSectionCard";
+import { SubSectionGrid } from "../../../pages/app/components/subSectionGrid";
+import { SubSectionListCard } from "../../../pages/app/components/SubSectionListCard";
+import useBillboardData from "../../../states/billboardData/hooks/useBillboardData";
+import { Artist } from "../../../states/billboardData/models/Artist";
+
+export default function TopArtistsList() {
+    const {
+        isTopArtistsError,
+        isTopArtistsLoading,
+        rankingDate,
+        topArtists
+    } = useBillboardData();
+
+    // Show loading state
+    if (isTopArtistsLoading) {
+        return <CircularProgress />;
+    }
+
+    // Show error state
+    if (isTopArtistsError ) {
+        return <div>Error loading top artists data</div>;
+    }
+
+    // Ensure we have enough artists before rendering
+    const hasEnoughArtists = topArtists?.length >= 5;
+
+    if (!hasEnoughArtists) {
+        return <div>Insufficient artist data</div>;
+    }
+
+    return (
+        <SubSectionGrid
+            title="Top 20 Artists"
+            subtitle={ rankingDate && `Top artists as of ${rankingDate}` }
+            displayItems={ [
+                <SubSectionCard
+                    key="top-artist"
+                    title="Billboard Top Artist"
+                    content= { topArtists[0]?.name || "N/A" }
+                    imageUrl={ topArtists[0]?.image || "" }
+                />,
+                <SubSectionListCard
+                    key="artist-list"
+                    contentList={
+                        topArtists
+                            .slice(1, 10)
+                            .map((artist: Artist, index: number) => ({
+                                imageUrl: artist?.image || "",
+                                number: `${index + 2}`,
+                                title: artist?.name || "N/A"
+                            }))
+                    }
+                />,
+                <SubSectionListCard
+                    key="artist-list"
+                    contentList={
+                        topArtists
+                            .slice(11, 23)
+                            .map((artist: Artist, index: number) => ({
+                                imageUrl: artist?.image || "",
+                                number: `${index + 11}`,
+                                title: artist?.name || "N/A"
+                            }))
+                    }
+                />
+            ] }
+        />
+    );
+}

src/features/artists/layout/artistsLayout.tsx

@@ -0,0 +1,5 @@
+import TopArtistsList from "../components/topArtistsList";
+
+export default function ArtistsLayout() {
+    return <TopArtistsList />;
+}

src/features/artists/pages/artistsPage.tsx

@@ -1,5 +1,10 @@
+import BillboardDataProvider from "../../../states/billboardData/providers/billboardDataProvider";
+import ArtistsLayout from "../layout/artistsLayout";
+
 export default function ArtistsPage() {
     return (
-        <div>Under Construction</div>
+        <BillboardDataProvider>
+            <ArtistsLayout />
+        </BillboardDataProvider>
     );
 }

src/features/overview/components/TopSongs.tsx

@@ -1,5 +1,4 @@
 import CircularProgress from "@mui/material/CircularProgress";
-import { Fragment } from "react/jsx-runtime";
 import { SubSectionCard } from "../../../pages/app/components/SubSectionCard";
 import { SubSectionLayout } from "../../../pages/app/components/SubSectionLayout";
 import { SubSectionListCard } from "../../../pages/app/components/SubSectionListCard";
@@ -35,47 +34,45 @@ export default function TopSongs() {
     }
 
     return (
-        <Fragment>
-            <SubSectionLayout
-                title="Top Songs"
-                subtitle={ songsRankingDate && `Top songs as of ${songsRankingDate}` }
-                displayItems={ [
-                    <SubSectionCard
-                        key="top-songs"
-                        title="Billboard Top Songs"
-                        content={ topSongs[0]?.name || "N/A" }
-                        imageUrl={ topSongs[0]?.image || "" }
-                        caption={ topSongs[0]?.artist || "N/A" }
-                    />,
-                    <SubSectionListCard
-                        key="songs-list"
-                        contentList={
-                            topSongs
-                                .slice(1, 5)
-                                .map((song: Song, index: number) => ({
-                                    imageUrl: song?.image || "",
-                                    number: `${index + 2}`,
-                                    subtitle: song?.artist || "N/A",
-                                    title: song?.name || "N/A"
-                                }))
-                        }
-                    />,
-                    <SubSectionListCard
-                        key="songs-list"
-                        contentList={
-                            topSongs
-                                .slice(6, 10)
-                                .map((song: Song, index: number) => ({
-                                    imageUrl: song?.image || "",
-                                    number: `${index + 6}`,
-                                    subtitle: song?.artist || "N/A",
-                                    title: song?.name || "N/A"
-                                }))
-                        }
-                    />
+        <SubSectionLayout
+            title="Top Songs"
+            subtitle={ songsRankingDate && `Top songs as of ${songsRankingDate}` }
+            displayItems={ [
+                <SubSectionCard
+                    key="top-songs"
+                    title="Billboard Top Songs"
+                    content={ topSongs[0]?.name || "N/A" }
+                    imageUrl={ topSongs[0]?.image || "" }
+                    caption={ topSongs[0]?.artist || "N/A" }
+                />,
+                <SubSectionListCard
+                    key="songs-list"
+                    contentList={
+                        topSongs
+                            .slice(1, 5)
+                            .map((song: Song, index: number) => ({
+                                imageUrl: song?.image || "",
+                                number: `${index + 2}`,
+                                subtitle: song?.artist || "N/A",
+                                title: song?.name || "N/A"
+                            }))
+                    }
+                />,
+                <SubSectionListCard
+                    key="songs-list"
+                    contentList={
+                        topSongs
+                            .slice(6, 10)
+                            .map((song: Song, index: number) => ({
+                                imageUrl: song?.image || "",
+                                number: `${index + 6}`,
+                                subtitle: song?.artist || "N/A",
+                                title: song?.name || "N/A"
+                            }))
+                    }
+                />
 
-                ] }
-            />
-        </Fragment>
+            ] }
+        />
     );
 }

src/features/overview/layout/OverviewLayout.tsx

@@ -5,7 +5,6 @@ import TopSongs from "../components/TopSongs";
 import UsersDataAnalyst from "../components/usersDataAnalysis";
 
 export default function OverviewLayout() {
-
     return (
         <Stack spacing={ 4 }>
             <UsersDataAnalyst />

src/features/revenue/layout/revenueLayout.tsx

@@ -2,7 +2,6 @@ import Stack from "@mui/material/Stack";
 import RevenueDataAnalysis from "../components/revenueDataAnalysis";
 
 export default function RevenueLayout() {
-
     return (
         <Stack spacing={ 4 }>
             <RevenueDataAnalysis />

src/features/songs/components/topSongsList.tsx

@@ -0,0 +1,74 @@
+import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
+import { SubSectionCard } from "../../../pages/app/components/SubSectionCard";
+import { SubSectionGrid } from "../../../pages/app/components/subSectionGrid";
+import { SubSectionListCard } from "../../../pages/app/components/SubSectionListCard";
+import useBillboardData from "../../../states/billboardData/hooks/useBillboardData";
+import { Song } from "../../../states/billboardData/models/Song";
+
+export default function TopSongsList() {
+    const {
+        isTopSongsLoading,
+        isTopSongsError,
+        topSongs,
+        songsRankingDate
+    } = useBillboardData();
+
+    // Show loading state
+    if (isTopSongsLoading) {
+        return <CircularProgress />;
+    }
+
+    // Show error state
+    if (isTopSongsError) {
+        return <div>Error loading top songs data</div>;
+    }
+
+    // Ensure we have enough artists before rendering
+    const hasEnoughSongs = topSongs?.length >= 5;
+
+    if (!hasEnoughSongs) {
+        return <div>Insufficient songs data</div>;
+    }
+
+    return (
+        <SubSectionGrid
+            title="Top 20 Songs"
+            subtitle={ songsRankingDate && `Top songs as of ${songsRankingDate}` }
+            displayItems={ [
+                <SubSectionCard
+                    key="top-songs"
+                    title="Billboard Top Song"
+                    content={ topSongs[0]?.name || "N/A" }
+                    imageUrl={ topSongs[0]?.image || "" }
+                    caption={ topSongs[0]?.artist || "N/A" }
+                />,
+                <SubSectionListCard
+                    key="songs-list"
+                    contentList={
+                        topSongs
+                            .slice(1, 10)
+                            .map((song: Song, index: number) => ({
+                                imageUrl: song?.image || "",
+                                number: `${index + 2}`,
+                                subtitle: song?.artist || "N/A",
+                                title: song?.name || "N/A"
+                            }))
+                    }
+                />,
+                <SubSectionListCard
+                    key="songs-list"
+                    contentList={
+                        topSongs
+                            .slice(11, 23)
+                            .map((song: Song, index: number) => ({
+                                imageUrl: song?.image || "",
+                                number: `${index + 11}`,
+                                subtitle: song?.artist || "N/A",
+                                title: song?.name || "N/A"
+                            }))
+                    }
+                />
+            ] }
+        />
+    );
+}

src/features/songs/layout/songsLayout.tsx

@@ -0,0 +1,5 @@
+import TopSongsList from "../components/topSongsList";
+
+export default function SongsLayout() {
+    return <TopSongsList />;
+}

src/features/songs/pages/songsPage.tsx

@@ -1,5 +1,10 @@
+import BillboardDataProvider from "../../../states/billboardData/providers/billboardDataProvider";
+import SongsLayout from "../layout/songsLayout";
+
 export default function SongsPage() {
     return (
-        <div>Under Construction</div>
+        <BillboardDataProvider>
+            <SongsLayout />
+        </BillboardDataProvider>
     );
 }

src/features/users/layout/usersLayout.tsx

@@ -2,7 +2,6 @@ import Stack from "@mui/material/Stack";
 import UsersDataAnalyst from "../components/usersDataAnalysis";
 
 export default function UsersLayout() {
-
     return (
         <Stack spacing={ 4 }>
             <UsersDataAnalyst />

src/layouts/styles/AppContentLayout.module.css

@@ -1,5 +1,5 @@
 .appContentLayout {
     padding: 24px 0px !important;
     margin: 0px !important;
-    max-width: 100% !important;
+    max-width: 100vw !important;
 }

src/pages/app/components/SubSectionCard.tsx

@@ -60,14 +60,14 @@ export const SubSectionCard: FunctionComponent<SubSectionCardProps> = (
                     {
                         imageUrl
                             ? (
-                                <Grid size={ { md: 3, xs: 6 } }>
+                                <Grid>
                                     <img className={ styles.subSectionCardImage } src={ imageUrl } alt="random" />
                                 </Grid>
                             ) : null
                     }
                     <Grid
                         container
-                        size={ imageUrl ? { md: 9, xs: 6 } : undefined }
+                        size={ imageUrl ? "grow" : undefined }
                         direction="column"
                         justifyContent="center"
                         spacing={ 1 }

src/pages/app/components/SubSectionLayout.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
 import { motion } from "framer-motion";
 import { Fragment, FunctionComponent, ReactElement, useEffect, useRef, useState } from "react";
+import { SubSectionTitle } from "./subSectionTitle";
 import { isScreenMobileOrSmall, isScreenTabletOrSmaller } from "../../../utils/utility";
 import styles from "../styles/SubSectionLayout.module.css";
 
@@ -80,18 +80,7 @@ export const SubSectionLayout: FunctionComponent<SubSectionLayoutProps> = (
             className={ styles.subSectionLayout }
             ref={ containerRef }
         >
-            <Stack direction="column" >
-                { title && title.length > 0 && (
-                    <Typography variant="h6" className={ styles.subSectionLayoutTitle }>
-                        { title }
-                    </Typography>
-                ) }
-                { subtitle && subtitle.length > 0 && (
-                    <Typography variant="body2" className={ styles.subSectionLayoutTitle }>
-                        { subtitle }
-                    </Typography>
-                ) }
-            </Stack>
+            <SubSectionTitle title={ title } subtitle={ subtitle } />
 
             <motion.div
                 drag="x"

src/pages/app/components/SubSectionListCard.tsx

@@ -4,9 +4,12 @@ import Grid from "@mui/material/Grid2";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { FunctionComponent, ReactElement } from "react";
+import { addLeadingZero } from "../../../utils/utility";
 import styles from "../styles/SubSectionCard.module.css";
 
-
+/**
+ * Sub section list card item
+ */
 export interface SubSectionListCardItem {
     /**
      * Number
@@ -48,7 +51,7 @@ export const SubSectionListCard: FunctionComponent<SubSectionListCardProps> = (
             <CardContent className={ styles.subSectionCardContent }>
                 <Stack
                     className={ styles.subSectionCardListContainer }
-                    spacing={ 1 }
+                    spacing={ 2 }
                     direction="column"
                     justifyContent="center"
                 >
@@ -57,7 +60,7 @@ export const SubSectionListCard: FunctionComponent<SubSectionListCardProps> = (
                             <Stack direction="row" key={ contentItem.title } spacing={ 2 } alignItems="center">
                                 <Grid>
                                     <Typography variant="body2">
-                                        { contentItem.number }
+                                        { addLeadingZero(contentItem.number) }
                                     </Typography>
                                 </Grid>
                                 <img