feat: migrate admin dashbord and its all depencies migrated

components/AdminDashboardPage/index.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import AdminDashboard from "../modules/AdminDashboard";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AdminDashboardPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AdminDashboard isTopNav={isTopNav} />
+    </PageCard>
+  );
+};
+
+export default AdminDashboardPage;

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

@@ -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.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { FC } from "react";
+
+interface ArtistCardProps {
+  artistAvatar: string;
+  artistName: string;
+  date: string;
+  streams: string;
+  streamsBgClassName: string;
+  borderColorClassName: string;
+}
+
+const ArtistCard: FC<ArtistCardProps> = ({
+  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>
+  );
+};
+
+export default ArtistCard;

components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.tsx

@@ -0,0 +1,44 @@
+import React, { FC, ReactNode } from "react";
+import { VInfo, VStatsChart } from "../../../__modules/Vectors";
+
+interface MusicStatisticCardProps {
+  statTitle: string;
+  statValue: string;
+  statIcon: ReactNode;
+  iconColorClassName: string;
+  iconBgClassName: string;
+}
+
+const MusicStatisticCard: FC<MusicStatisticCardProps> = ({
+  statTitle,
+  statValue,
+  statIcon,
+  iconColorClassName,
+  iconBgClassName,
+}) => {
+  return (
+    <div className="bg-white shadow-lg rounded-xl my-5 w-full p-5 mobile:m-0">
+      <div className="flex justify-between py-5 items-center">
+        <p className="font-bold">{statTitle}</p>
+        <p className="text-gray-700">
+          <VInfo />
+        </p>
+      </div>
+      <div className="flex justify-between items-center pt-2">
+        <p className={`${iconColorClassName}`}>
+          <VStatsChart className="text-2xl" />
+        </p>
+        <div className="flex items-center gap-3">
+          <p className="text-3xl font-semibold">{statValue}</p>
+          <p
+            className={`${iconColorClassName} text-2xl bg-opacity-20 p-5 rounded-full ${iconBgClassName}`}
+          >
+            {statIcon}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MusicStatisticCard;

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

@@ -0,0 +1,46 @@
+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
+        height={400}
+        width={600}
+        options={{
+          maintainAspectRatio: false,
+          scales: {
+            x: {
+              grid: {
+                display: false,
+              },
+            },
+          },
+        }}
+        data={{
+          labels: dummyStat.duration,
+          datasets: [
+            {
+              //   id: dummyStat.stat.revenue.id,   // commented for now cause chart dataset does not contain id ( can be removed latter)
+              label: dummyStat.stat.revenue.name,
+              data: dummyStat.stat.revenue.dataPerMonth,
+              backgroundColor: "rgb(255, 69, 50)",
+              borderRadius: 100,
+            },
+            {
+              //   id: dummyStat.stat.netProfit.id, // commented for now cause chart dataset does not contain id ( can be removed latter)
+              label: dummyStat.stat.netProfit.name,
+              data: dummyStat.stat.netProfit.dataPerMonth,
+              backgroundColor: "rgb(0, 208, 755)",
+              borderRadius: 100,
+            },
+          ],
+        }}
+      />
+    </div>
+  );
+};
+
+export default RevenueStatChart;