first commit

components/Dashboard/Analytics/Profile/ImpressionShare.js

@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+import styles from "@/components/Dashboard/Analytics/Profile/ImpressionShare.module.css"
+
+class ImpressionShare extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      series: [45],
+      options: {
+        chart: {
+          type: "radialBar",
+          offsetY: -20,
+          sparkline: {
+            enabled: true,
+          },
+        },
+        plotOptions: {
+          radialBar: {
+            startAngle: -110,
+            endAngle: 110,
+            track: {
+              background: "#e7e7e7",
+              strokeWidth: "90%",
+              margin: 5,
+            },
+            dataLabels: {
+              name: {
+                show: false,
+              },
+              value: {
+                offsetY: -2,
+                fontSize: "15px",
+                fontWeight: "500",
+                color: '#5B5B98'
+              },
+            },
+          },
+        },
+        grid: {
+          padding: {
+            top: -10,
+          },
+        },
+        fill: {
+          colors: ["#00B69B"],
+        },
+        labels: ["Average Results"],
+      },
+    };
+  }
+
+  render() {
+    return (
+      <>
+        <div className={styles.chartBox}>
+          <Chart
+            options={this.state.options}
+            series={this.state.series}
+            type="radialBar"
+            height={100}
+          />
+          <h4>Excellent</h4>
+          <h3>Impression Share</h3>
+        </div>
+      </>
+    );
+  }
+}
+
+export default ImpressionShare;

components/Dashboard/Analytics/Profile/ImpressionShare.module.css

@@ -0,0 +1,33 @@
+.chartBox {
+  text-align: center;
+  top: 12px;
+  position: relative;
+}
+.chartBox h4 {
+  margin: 0;
+  color: #00B69B;
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 14px;
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  right: 0;
+}
+.chartBox h3 {
+  margin: 0;
+  color: #5B5B98;
+  font-weight: 500;
+  font-size: 12px;
+  position: relative;
+  bottom: 7px;
+}
+
+@media only screen and (max-width: 767px) {
+  .chartBox h4 {
+    bottom: 24px;
+  }
+  .chartBox h3 {
+    font-size: 10px;
+  }
+}

components/Dashboard/Analytics/Profile/Profile.module.css

@@ -0,0 +1,74 @@
+.profileBox {
+  background-color: #fff;
+  border-radius: 10px;
+  position: relative;
+  margin-bottom: 15px;
+}
+.header {
+  background: #EAEDFB;
+  border-radius: 10px 10px 0px 0px;
+  padding: 30px 15px 50px;
+  position: relative;
+}
+.headerContent {
+  max-width: 300px;
+  position: relative;
+  z-index: 1;
+}
+.header h1 {
+  margin: 0 0 10px;
+  font-size: 18px;
+  color: #757FEF;
+  font-weight: 500;
+}
+.header p {
+  margin: 0;
+  font-size: 14px;
+  color: #757FEF;
+}
+.header img {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.profileInfoContent {
+  padding: 0 15px 30px;
+}
+.profileInfo {
+  position: relative;
+}
+.profileInfo img {
+  position: absolute;
+  top: -30px;
+  width: 60px;
+  height: 60px;
+  border: 5px solid #fff;
+  border-radius: 100%;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+}
+.profileInfo h3 {
+  margin: 0 0 5px;
+  font-size: 14px;
+  padding-top: 45px;
+}
+.profileInfo p {
+  margin: 0;
+  font-size: 13px;
+}
+
+@media only screen and (max-width: 767px) {
+  .profileInfo h3 {
+    font-size: 12px;
+  }
+  .profileInfo p {
+    font-size: 11px;
+  }
+}
+
+/* For dark mode */
+[class="dark"] .profileBox {
+  background-color: var(--cardBg);
+}
+[class="dark"] .header {
+  background: #161515;
+}

components/Dashboard/Analytics/Profile/index.js

@@ -0,0 +1,70 @@
+import React from "react";
+import Grid from "@mui/material/Grid";
+import Link from "@mui/material/Link";
+import styles from "@/components/Dashboard/Analytics/Profile/Profile.module.css";
+import ImpressionShare from "./ImpressionShare";
+
+const Profile = () => {
+  return (
+    <>
+      <div className={styles.profileBox}>
+        <div className={styles.header}>
+          <div className={styles.headerContent}>
+            <h1>Welcome to admash Dashboard!</h1>
+            <p>
+              You have done 68% 😎 more sales today. Check your new badge in
+              your profile.
+            </p>
+          </div>
+          <img src="/images/working-on-table.png" alt="Working on table" />
+        </div>
+
+        <div className={styles.profileInfoContent}>
+          <Grid
+            container
+            alignItems="flex-end"
+            rowSpacing={1}
+            columnSpacing={{ xs: 1, sm: 2, md: 2 }}
+          >
+            <Grid item xs={4} md={4} lg={4}>
+              <div className={styles.profileInfo}>
+                <img src="/images/profile.png" alt="Profile" />
+                <h3>Andrew Burns</h3>
+                <p>Programmer</p>
+              </div>
+            </Grid>
+
+            <Grid item xs={4} md={4} lg={4}>
+              <Link
+                href="#"
+                underline="none"
+                sx={{
+                  background: "#757FEF",
+                  borderRadius: "4px",
+                  color: "#fff !important",
+                  fontSize: "10px",
+                  padding: "4px 8px",
+                  display: "inline-block",
+                  position: "relative",
+                  top: "-5px",
+                }}
+              >
+                View Profile{" "}
+                <i
+                  className="ri-arrow-right-line"
+                  style={{ position: "relative", top: "2px" }}
+                ></i>
+              </Link>
+            </Grid>
+
+            <Grid item xs={4} md={4} lg={4}>
+              <ImpressionShare />
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Profile;