stat chart and best artist added

components/modules/AdminDashboard/_modules/BestArtist/index.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { songs } from "../../../utils/dummy";
+import numberConverter from "../../../utils/helpers/numberConverter";
+import ArtistCard from "../Cards/ArtistCard";
+
+const BestArtist = () => {
+  return (
+    <div className="w-full h-[440px] bg-white p-5 shadow-xl rounded-xl">
+      <h3 className="text-2xl font-semibold pb-5 border-b">Best Artist</h3>
+      <div className="flex flex-col gap-3">
+        <ArtistCard
+          artistAvatar={songs[0].image}
+          artistName={songs[0].artist}
+          date="24 jan,2022"
+          streams={numberConverter(400)}
+          borderColorClassName="border-green-500"
+          streamsBgClassName="bg-green-500"
+        />
+        <ArtistCard
+          artistAvatar={songs[1].image}
+          artistName={songs[1].artist}
+          date="12 feb,2022"
+          streams={numberConverter(500)}
+          borderColorClassName="border-primary"
+          streamsBgClassName="bg-primary"
+        />
+        <ArtistCard
+          artistAvatar={songs[2].image}
+          artistName={songs[2].artist}
+          date="24 jul,2022"
+          streams={numberConverter(350)}
+          borderColorClassName="border-[#00d0ff]"
+          streamsBgClassName="bg-[#00d0ff]"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BestArtist;

components/modules/AdminDashboard/_modules/Cards/ArtistCard.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import PropsTypes from "prop-types";
+
+const ArtistCard = ({
+  artistAvatar,
+  artistName,
+  date,
+  streams,
+  streamsBgClassName,
+  borderColorClassName,
+}) => {
+  return (
+    <div
+      className={`flex justify-between border p-4 rounded-lg items-center ${borderColorClassName}`}
+    >
+      <div className="flex gap-3 items-center">
+        <img
+          src={artistAvatar}
+          alt={artistName}
+          className="w-16 h-16 object-cover rounded-full"
+        />
+        <div>
+          <p className="text-gray-800 font-semibold">{artistName}</p>
+          <p className="text-gray-500 text-xs">{date}</p>
+        </div>
+      </div>
+      <p className={`p-2 rounded-xl text-sm ${streamsBgClassName}`}>
+        {streams}
+      </p>
+    </div>
+  );
+};
+
+ArtistCard.propsTypes = {
+  artistAvatar: PropsTypes.string.isRequired,
+  artistName: PropsTypes.string.isRequired,
+  date: PropsTypes.string.isRequired,
+  streams: PropsTypes.string.isRequired,
+  streamsBgClassName: PropsTypes.string.isRequired,
+  borderColorClassName: PropsTypes.string.isRequired,
+};
+
+export default ArtistCard;

components/modules/AdminDashboard/_modules/RevenueStatChart/index.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Chart from "chart.js/auto";
+import { Bar } from "react-chartjs-2";
+import { dummyStat } from "../../../utils/dummy/dummyStat";
+
+const RevenueStatChart = () => {
+  return (
+    <div className="w-full bg-white p-5 shadow-xl rounded-xl">
+      <Bar
+        type="bar"
+        height={400}
+        width={600}
+        options={{
+          maintainAspectRatio: false,
+          scales: {
+            x: {
+              grid: {
+                display: false,
+              },
+            },
+          },
+        }}
+        data={{
+          labels: dummyStat.duration,
+          datasets: [
+            {
+              id: dummyStat.stat.revenue.id,
+              label: dummyStat.stat.revenue.name,
+              data: dummyStat.stat.revenue.dataPerMonth,
+              backgroundColor: "rgb(255, 69, 50)",
+              borderRadius: 100,
+            },
+            {
+              id: dummyStat.stat.netProfit.id,
+              label: dummyStat.stat.netProfit.name,
+              data: dummyStat.stat.netProfit.dataPerMonth,
+              backgroundColor: "rgb(0, 208, 755)",
+              borderRadius: 100,
+            },
+          ],
+        }}
+      />
+    </div>
+  );
+};
+
+export default RevenueStatChart;

components/modules/AdminDashboard/index.jsx

@@ -3,10 +3,16 @@ import numberConverter from "../utils/helpers/numberConverter";
 import { VImageCard, VRadar, VRefund, VTag } from "../__modules/Vectors";
 import MusicStatisticCard from "./_modules/Cards/MusicStatisticCard";
 import PropsTypes from "prop-types";
+import RevenueStatChart from "./_modules/RevenueStatChart";
+import BestArtist from "./_modules/BestArtist";
 
 const AdminDashboard = ({ isTopNav }) => {
   return (
-    <div className={`my-24 mr-5 ${isTopNav && "my-40"} transition-all`}>
+    <div
+      className={`my-24 mr-5 ${
+        isTopNav && "my-40"
+      } transition-all flex flex-col gap-5 h-full`}
+    >
       <div className="flex gap-5 mobile:grid mobile:grid-cols-2 mobilesm:grid-cols-1">
         <MusicStatisticCard
           statTitle="Music Artist"
@@ -37,6 +43,14 @@ const AdminDashboard = ({ isTopNav }) => {
           iconBgClassName="bg-[#00d0ff]"
         />
       </div>
+      <div className="flex gap-5 w-full mobile:flex-col">
+        <div className="w-2/3 mobile:w-full">
+          <RevenueStatChart />
+        </div>
+        <div className="w-2/5 h-auto mobile:w-full">
+          <BestArtist />
+        </div>
+      </div>
     </div>
   );
 };

components/modules/utils/dummy/dummyStat.js

@@ -0,0 +1,17 @@
+export const dummyStat = {
+  duration: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+  stat: {
+    revenue: {
+      id: 1,
+      name: "Revenue",
+      dataPerMonth: [10, 20, 30, 40, 50, 60, 50, 40, 30, 20, 10],
+      currency: "USD",
+    },
+    netProfit: {
+      id: 2,
+      name: "Net Profit",
+      dataPerMonth: [5, 15, 25, 35, 45, 55, 45, 35, 25, 15, 5],
+      currency: "USD",
+    },
+  },
+};

components/modules/utils/helpers/numberConverter.js

@@ -10,7 +10,7 @@ const numberConverter = (value) => {
     const convertedNumber = (value / K_NUMBER_UNIT).toFixed(2) + "K";
     return convertedNumber;
   }
-  return value;
+  return `${value}`;
 };
 
 export default numberConverter;