music stat component added to dashbord

components/AdminDashboardPage/index.jsx

@@ -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/Cards/MusicStatisticCard.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { VInfo, VStatsChart } from "../../../__modules/Vectors";
+import PropsTypes from "prop-types";
+
+const MusicStatisticCard = ({
+  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>
+  );
+};
+
+MusicStatisticCard.propTypes = {
+  statTitle: PropsTypes.string.isRequired,
+  statValue: PropsTypes.string.isRequired,
+  statIcon: PropsTypes.element.isRequired,
+  iconColorClassName: PropsTypes.string.isRequired,
+  iconBgClassName: PropsTypes.string.isRequired,
+};
+
+export default MusicStatisticCard;

components/modules/AdminDashboard/index.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+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";
+
+const AdminDashboard = ({ isTopNav }) => {
+  return (
+    <div className={`my-24 mr-5 ${isTopNav && "my-40"} transition-all`}>
+      <div className="flex gap-5 mobile:grid mobile:grid-cols-2 mobilesm:grid-cols-1">
+        <MusicStatisticCard
+          statTitle="Music Artist"
+          statValue={numberConverter(352)}
+          statIcon={<VImageCard />}
+          iconColorClassName="text-primary"
+          iconBgClassName="bg-primary"
+        />
+        <MusicStatisticCard
+          statTitle="Music Album"
+          statValue={numberConverter(987)}
+          statIcon={<VTag />}
+          iconColorClassName="text-[#1ee2ac]"
+          iconBgClassName="bg-[#1ee2ac]"
+        />
+        <MusicStatisticCard
+          statTitle="Music Followers"
+          statValue={numberConverter(25012)}
+          statIcon={<VRadar />}
+          iconColorClassName="text-[#ff7750]"
+          iconBgClassName="bg-[#ff7750]"
+        />
+        <MusicStatisticCard
+          statTitle="Music comments"
+          statValue={numberConverter(5300000)}
+          statIcon={<VRefund />}
+          iconColorClassName="text-[#00d0ff]"
+          iconBgClassName="bg-[#00d0ff]"
+        />
+      </div>
+    </div>
+  );
+};
+
+AdminDashboard.propsTypes = {
+  isTopNav: PropsTypes.bool.isRequired,
+};
+
+export default AdminDashboard;

components/modules/__modules/Vectors/index.js

@@ -12,37 +12,44 @@ import {
   AiOutlineHome as HomeIcon,
   AiOutlineMenu as MenuOutlineIcon,
   AiOutlinePlayCircle as PlayCircleIcon,
-  AiOutlineExclamationCircle as ExclamationCircle
+  AiOutlineExclamationCircle as ExclamationCircle,
+  AiOutlineTag as VTag,
 } from "react-icons/ai";
 import {
   RiNotificationLine as NotificationIcon,
   RiMenu3Fill as MenuIcon,
-  RiLayoutTopLine as LayoutTopLine
+  RiLayoutTopLine as LayoutTopLine,
+  RiRefundLine as VRefund,
 } from "react-icons/ri";
 import { IoCloseOutline as CloseIcon } from "react-icons/io5";
 import {
   FiChevronRight as ChevronRightIcon,
   FiChevronDown as ChevronDowntIcon,
   FiFilePlus as FilePlusIcon,
 } from "react-icons/fi";
-import { GoHome as HomeSubMenuIcon ,GoClock as Clock} from "react-icons/go";
+import { GoHome as HomeSubMenuIcon, GoClock as Clock } from "react-icons/go";
 import {
   BsHeadphones as HeadPhonesIcon,
   BsSun as SunIcon,
   BsMoonFill as MoonIcon,
   BsPin as PinIcon,
   BsArrowLeft as ArrowLeftIcon,
   BsArrowRight as ArrowRightIcon,
+  BsCardImage as VImageCard,
 } from "react-icons/bs";
 import { TbFileMusic as FileMusicIcon } from "react-icons/tb";
 import { CgArrowsExpandUpRight as ArrowExpendUpRighIcon } from "react-icons/cg";
-import { IoDownloadOutline as DownLoadOutlineIcon } from "react-icons/io5";
+import {
+  IoDownloadOutline as DownLoadOutlineIcon,
+  IoStatsChartSharp as VStatsChart,
+} from "react-icons/io5";
 import { MdFavoriteBorder as FavoriteIcon } from "react-icons/md";
 import { GiMicrophone as MicIcon } from "react-icons/gi";
 import {
   RiAdminLine as AdminIcon,
   RiProfileLine as EditProfileIcon,
   RiAccountBoxLine as AccountIcon,
+  RiRadarLine as VRadar,
 } from "react-icons/ri";
 import { ImProfile as ProfileSheetIcon } from "react-icons/im";
 import {
@@ -59,6 +66,7 @@ import {
   BsFillVolumeUpFill as VolumeUpIcon,
   BsFillVolumeMuteFill as VolumeDownIcon,
 } from "react-icons/bs";
+import { MdInfo as VInfo } from "react-icons/md";
 
 export {
   SeachIcon,
@@ -104,5 +112,11 @@ export {
   VTrash,
   ExclamationCircle,
   LayoutTopLine,
-  Clock
+  Clock,
+  VInfo,
+  VStatsChart,
+  VImageCard,
+  VTag,
+  VRadar,
+  VRefund,
 };

components/modules/utils/helpers/numberConverter.js

@@ -0,0 +1,16 @@
+const M_NUMBER_UNIT = 1000000;
+const K_NUMBER_UNIT = 1000;
+
+const numberConverter = (value) => {
+  if (value >= M_NUMBER_UNIT) {
+    const convertedNumber = (value / M_NUMBER_UNIT).toFixed(2) + "M";
+    return convertedNumber;
+  }
+  if (value >= K_NUMBER_UNIT) {
+    const convertedNumber = (value / K_NUMBER_UNIT).toFixed(2) + "K";
+    return convertedNumber;
+  }
+  return value;
+};
+
+export default numberConverter;

pages/admin/dashboard.js

@@ -0,0 +1,12 @@
+import React from "react";
+import AdminDashboardPage from "../../components/AdminDashboardPage";
+
+const dashboard = () => {
+  return (
+    <div className="bg-globalBg h-screen">
+      <AdminDashboardPage />
+    </div>
+  );
+};
+
+export default dashboard;

tailwind.config.js

@@ -12,8 +12,8 @@ module.exports = {
     },
     extend: {
       screens: {
-        mobile: { max: "1000px" },
-        mobilesm: { max: "500px" },
+        mobile: { max: "1024px" },
+        mobilesm: { max: "690px" },
         mobilexs: { max: "320px" },
       },
     },