text: import React from "react";
  import { Card, CardContent, Typography, Box } from "@mui/material";
  import dynamic from "next/dynamic";
  import BaseCard from "../../../molecules/BaseCard";
  const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
  
  const SalesOverview = () => {
    const optionssalesoverview = {
      grid: {
        show: true,
        borderColor: "transparent",
        strokeDashArray: 2,
        padding: {
          left: 0,
          right: 0,
          bottom: 0,
        },
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "42%",
          endingShape: "rounded",
          borderRadius: 5,
        },
      },
  
      colors: ["#fb9678", "#03c9d7"],
      fill: {
        type: "solid",
        opacity: 1,
      },
      chart: {
        offsetX: -15,
        toolbar: {
          show: false,
        },
        foreColor: "#adb0bb",
        fontFamily: "'DM Sans',sans-serif",
        sparkline: {
          enabled: false,
        },
      },
      dataLabels: {
        enabled: false,
      },
      markers: {
        size: 0,
      },
      legend: {
        show: false,
      },
      xaxis: {
        type: "category",
        categories: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "July",
          "Aug",
          "Sept",
          "Oct",
          "Nov",
          "Dec",
        ],
        labels: {
          style: {
            cssClass: "grey--text lighten-2--text fill-color",
          },
        },
      },
      yaxis: {
        show: true,
        min: 100,
        max: 400,
        tickAmount: 3,
        labels: {
          style: {
            cssClass: "grey--text lighten-2--text fill-color",
          },
        },
      },
      stroke: {
        show: true,
        width: 5,
        lineCap: "butt",
        colors: ["transparent"],
      },
      tooltip: {
        theme: "dark",
      },
    };
    const seriessalesoverview = [
      {
        name: "Ample Admin",
        data: [355, 390, 300, 350, 390, 180, 355, 390, 300, 350, 390, 180],
      },
      {
        name: "Pixel Admin",
        data: [280, 250, 325, 215, 250, 310, 280, 250, 325, 215, 250, 310],
      },
    ];
    return (
      <BaseCard title="Sales Overview">
        <Chart
          options={optionssalesoverview}
          series={seriessalesoverview}
          type="bar"
          height="295px"
        />
      </BaseCard>
    );
  };
  
  export default SalesOverview;
  