first commit

components/Dashboard/Analytics/SessionsDevice/SessionsDevice.module.css

@@ -0,0 +1,65 @@
+.infoList {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #F7FAFF;
+  margin-bottom: 13px;
+  padding-bottom: 13px;
+  position: relative;
+  padding-left: 15px;
+}
+.infoList::before {
+  content: '';
+  background: #FF8A54;
+  box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  position: absolute;
+  left: 0;
+  top: 5px;
+}
+.infoList:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.infoList p {
+  font-size: 13px;
+  margin: 0;
+}
+.infoList .rightContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.infoList h5 {
+  margin: 0 15px 0 0;
+  font-size: 12px;
+  color: #5B5B98;
+}
+.infoList .rightContent i {
+  position: relative;
+  top: 2px;
+}
+
+/* For RTL Style */
+[dir="rtl"] .infoList {
+  padding-left: 0;
+  padding-right: 15px;
+}
+[dir="rtl"] .infoList::before {
+  left: auto;
+  right: 0;
+}
+[dir="rtl"] .infoList h5 {
+  margin: 0 0 0 15px;
+}
+
+/* For dark mode */
+[class="dark"] .infoList {
+  border-bottom: 1px solid var(--borderColor);
+}
+[class="dark"] .infoList:last-child {
+  border-bottom: none;
+}

components/Dashboard/Analytics/SessionsDevice/index.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+import { Box, Typography } from "@mui/material";
+import Card from "@mui/material/Card";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+import styles from "@/components/Dashboard/Analytics/SessionsDevice/SessionsDevice.module.css";
+
+class SessionsDevice extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      series: [70],
+      options: {
+        plotOptions: {
+          radialBar: {
+            hollow: {
+              size: "50%",
+            },
+            track: {
+              background: "rgba(255, 138, 84, 0.5)",
+            },
+            dataLabels: {
+              name: {
+                show: false,
+              },
+              value: {
+                offsetY: 4,
+                color: "#FF8A54",
+                fontSize: "16px",
+                fontWeight: "500",
+              },
+            },
+          },
+        },
+        fill: {
+          colors: ["#FF8A54"],
+        },
+      },
+    };
+  }
+  render() {
+    return (
+      <>
+        <Card
+          sx={{
+            boxShadow: "none",
+            borderRadius: "10px",
+            p: "25px 20px",
+            mb: "15px",
+          }}
+        >
+          <Box
+            sx={{
+              borderBottom: "1px solid #EEF0F7",
+              paddingBottom: "10px",
+            }}
+            className="for-dark-bottom-border"
+          >
+            <Typography
+              as="h3"
+              sx={{
+                fontSize: 18,
+                fontWeight: 500,
+              }}
+            >
+              Sessions Device
+            </Typography>
+          </Box>
+
+          <Chart
+            options={this.state.options}
+            series={this.state.series}
+            type="radialBar"
+          />
+
+          <>
+            <div className={styles.infoList}>
+              <p>Mobile</p>
+              <h5>15,684</h5>
+              <div className={styles.rightContent}>
+                <p>
+                  <i className="ri-bar-chart-fill"></i> 50%
+                </p>
+              </div>
+            </div>
+
+            <div className={styles.infoList}>
+              <p>Laptop</p>
+              <h5>36,868</h5>
+              <div className={styles.rightContent}>
+                <p>
+                  <i className="ri-bar-chart-fill"></i> 60%
+                </p>
+              </div>
+            </div>
+          </>
+        </Card>
+      </>
+    );
+  }
+}
+
+export default SessionsDevice;