init

src/components/ecommerce/CountryMap.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+// import { VectorMap } from "@react-jvectormap/core";
+import { worldMill } from "@react-jvectormap/world";
+import dynamic from "next/dynamic";
+
+const VectorMap = dynamic(
+  () => import("@react-jvectormap/core").then((mod) => mod.VectorMap),
+  { ssr: false }
+);
+
+// Define the component props
+interface CountryMapProps {
+  mapColor?: string;
+}
+
+type MarkerStyle = {
+  initial: {
+    fill: string;
+    r: number; // Radius for markers
+  };
+};
+
+type Marker = {
+  latLng: [number, number];
+  name: string;
+  style?: {
+    fill: string;
+    borderWidth: number;
+    borderColor: string;
+    stroke?: string;
+    strokeOpacity?: number;
+  };
+};
+
+const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
+  return (
+    <VectorMap
+      map={worldMill}
+      backgroundColor="transparent"
+      markerStyle={
+        {
+          initial: {
+            fill: "#465FFF",
+            r: 4, // Custom radius for markers
+          }, // Type assertion to bypass strict CSS property checks
+        } as MarkerStyle
+      }
+      markersSelectable={true}
+      markers={
+        [
+          {
+            latLng: [37.2580397, -104.657039],
+            name: "United States",
+            style: {
+              fill: "#465FFF",
+              borderWidth: 1,
+              borderColor: "white",
+              stroke: "#383f47",
+            },
+          },
+          {
+            latLng: [20.7504374, 73.7276105],
+            name: "India",
+            style: { fill: "#465FFF", borderWidth: 1, borderColor: "white" },
+          },
+          {
+            latLng: [53.613, -11.6368],
+            name: "United Kingdom",
+            style: { fill: "#465FFF", borderWidth: 1, borderColor: "white" },
+          },
+          {
+            latLng: [-25.0304388, 115.2092761],
+            name: "Sweden",
+            style: {
+              fill: "#465FFF",
+              borderWidth: 1,
+              borderColor: "white",
+              strokeOpacity: 0,
+            },
+          },
+        ] as Marker[]
+      }
+      zoomOnScroll={false}
+      zoomMax={12}
+      zoomMin={1}
+      zoomAnimate={true}
+      zoomStep={1.5}
+      regionStyle={{
+        initial: {
+          fill: mapColor || "#D0D5DD",
+          fillOpacity: 1,
+          fontFamily: "Outfit",
+          stroke: "none",
+          strokeWidth: 0,
+          strokeOpacity: 0,
+        },
+        hover: {
+          fillOpacity: 0.7,
+          cursor: "pointer",
+          fill: "#465fff",
+          stroke: "none",
+        },
+        selected: {
+          fill: "#465FFF",
+        },
+        selectedHover: {},
+      }}
+      regionLabelStyle={{
+        initial: {
+          fill: "#35373e",
+          fontWeight: 500,
+          fontSize: "13px",
+          stroke: "none",
+        },
+        hover: {},
+        selected: {},
+        selectedHover: {},
+      }}
+    />
+  );
+};
+
+export default CountryMap;

src/components/ecommerce/DemographicCard.tsx

@@ -0,0 +1,131 @@
+"use client";
+import Image from "next/image";
+
+import CountryMap from "./CountryMap";
+import { useState } from "react";
+import { MoreDotIcon } from "@/icons";
+import { Dropdown } from "../ui/dropdown/Dropdown";
+import { DropdownItem } from "../ui/dropdown/DropdownItem";
+
+export default function DemographicCard() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggleDropdown() {
+    setIsOpen(!isOpen);
+  }
+
+  function closeDropdown() {
+    setIsOpen(false);
+  }
+
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6">
+      <div className="flex justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+            Customers Demographic
+          </h3>
+          <p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
+            Number of customer based on country
+          </p>
+        </div>
+
+        <div className="relative inline-block">
+          <button onClick={toggleDropdown} className="dropdown-toggle">
+            <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" />
+          </button>
+          <Dropdown
+            isOpen={isOpen}
+            onClose={closeDropdown}
+            className="w-40 p-2"
+          >
+            <DropdownItem
+              onItemClick={closeDropdown}
+              className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            >
+              View More
+            </DropdownItem>
+            <DropdownItem
+              onItemClick={closeDropdown}
+              className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            >
+              Delete
+            </DropdownItem>
+          </Dropdown>
+        </div>
+      </div>
+      <div className="px-4 py-6 my-6 overflow-hidden border border-gary-200 rounded-2xl bg-gray-50 dark:border-gray-800 dark:bg-gray-900 sm:px-6">
+        <div
+          id="mapOne"
+          className="mapOne map-btn -mx-4 -my-6 h-[212px] w-[252px] 2xsm:w-[307px] xsm:w-[358px] sm:-mx-6 md:w-[668px] lg:w-[634px] xl:w-[393px] 2xl:w-[554px]"
+        >
+          <CountryMap />
+        </div>
+      </div>
+
+      <div className="space-y-5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="items-center w-full rounded-full max-w-8">
+              <Image
+                width={48}
+                height={48}
+                src="/images/country/country-01.svg"
+                alt="usa"
+                className="w-full"
+              />
+            </div>
+            <div>
+              <p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
+                USA
+              </p>
+              <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
+                2,379 Customers
+              </span>
+            </div>
+          </div>
+
+          <div className="flex w-full max-w-[140px] items-center gap-3">
+            <div className="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800">
+              <div className="absolute left-0 top-0 flex h-full w-[79%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"></div>
+            </div>
+            <p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
+              79%
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="items-center w-full rounded-full max-w-8">
+              <Image
+                width={48}
+                height={48}
+                className="w-full"
+                src="/images/country/country-02.svg"
+                alt="france"
+              />
+            </div>
+            <div>
+              <p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
+                France
+              </p>
+              <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
+                589 Customers
+              </span>
+            </div>
+          </div>
+
+          <div className="flex w-full max-w-[140px] items-center gap-3">
+            <div className="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800">
+              <div className="absolute left-0 top-0 flex h-full w-[23%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"></div>
+            </div>
+            <p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
+              23%
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ecommerce/EcommerceMetrics.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import Badge from "../ui/badge/Badge";
+import { ArrowDownIcon, ArrowUpIcon, BoxIconLine, GroupIcon } from "@/icons";
+
+export const EcommerceMetrics = () => {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
+      {/* <!-- Metric Item Start --> */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
+        <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800">
+          <GroupIcon className="text-gray-800 size-6 dark:text-white/90" />
+        </div>
+
+        <div className="flex items-end justify-between mt-5">
+          <div>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              Customers
+            </span>
+            <h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
+              3,782
+            </h4>
+          </div>
+          <Badge color="success">
+            <ArrowUpIcon />
+            11.01%
+          </Badge>
+        </div>
+      </div>
+      {/* <!-- Metric Item End --> */}
+
+      {/* <!-- Metric Item Start --> */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
+        <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800">
+          <BoxIconLine className="text-gray-800 dark:text-white/90" />
+        </div>
+        <div className="flex items-end justify-between mt-5">
+          <div>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              Orders
+            </span>
+            <h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
+              5,359
+            </h4>
+          </div>
+
+          <Badge color="error">
+            <ArrowDownIcon className="text-error-500" />
+            9.05%
+          </Badge>
+        </div>
+      </div>
+      {/* <!-- Metric Item End --> */}
+    </div>
+  );
+};

src/components/ecommerce/MonthlySalesChart.tsx

@@ -0,0 +1,154 @@
+"use client";
+import { ApexOptions } from "apexcharts";
+import dynamic from "next/dynamic";
+import { MoreDotIcon } from "@/icons";
+import { DropdownItem } from "../ui/dropdown/DropdownItem";
+import { useState } from "react";
+import { Dropdown } from "../ui/dropdown/Dropdown";
+
+// Dynamically import the ReactApexChart component
+const ReactApexChart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+
+export default function MonthlySalesChart() {
+  const options: ApexOptions = {
+    colors: ["#465fff"],
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      type: "bar",
+      height: 180,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: "39%",
+        borderRadius: 5,
+        borderRadiusApplication: "end",
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 4,
+      colors: ["transparent"],
+    },
+    xaxis: {
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    legend: {
+      show: true,
+      position: "top",
+      horizontalAlign: "left",
+      fontFamily: "Outfit",
+    },
+    yaxis: {
+      title: {
+        text: undefined,
+      },
+    },
+    grid: {
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+    fill: {
+      opacity: 1,
+    },
+
+    tooltip: {
+      x: {
+        show: false,
+      },
+      y: {
+        formatter: (val: number) => `${val}`,
+      },
+    },
+  };
+  const series = [
+    {
+      name: "Sales",
+      data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
+    },
+  ];
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggleDropdown() {
+    setIsOpen(!isOpen);
+  }
+
+  function closeDropdown() {
+    setIsOpen(false);
+  }
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+          Monthly Sales
+        </h3>
+
+        <div className="relative inline-block">
+          <button onClick={toggleDropdown} className="dropdown-toggle">
+            <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" />
+          </button>
+          <Dropdown
+            isOpen={isOpen}
+            onClose={closeDropdown}
+            className="w-40 p-2"
+          >
+            <DropdownItem
+              onItemClick={closeDropdown}
+              className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            >
+              View More
+            </DropdownItem>
+            <DropdownItem
+              onItemClick={closeDropdown}
+              className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            >
+              Delete
+            </DropdownItem>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div className="max-w-full overflow-x-auto custom-scrollbar">
+        <div className="-ml-5 min-w-[650px] xl:min-w-full pl-2">
+          <ReactApexChart
+            options={options}
+            series={series}
+            type="bar"
+            height={180}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ecommerce/MonthlyTarget.tsx

@@ -0,0 +1,209 @@
+"use client";
+// import Chart from "react-apexcharts";
+import { ApexOptions } from "apexcharts";
+
+import dynamic from "next/dynamic";
+import { Dropdown } from "../ui/dropdown/Dropdown";
+import { MoreDotIcon } from "@/icons";
+import { useState } from "react";
+import { DropdownItem } from "../ui/dropdown/DropdownItem";
+// Dynamically import the ReactApexChart component
+const ReactApexChart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+
+export default function MonthlyTarget() {
+  const series = [75.55];
+  const options: ApexOptions = {
+    colors: ["#465FFF"],
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      type: "radialBar",
+      height: 330,
+      sparkline: {
+        enabled: true,
+      },
+    },
+    plotOptions: {
+      radialBar: {
+        startAngle: -85,
+        endAngle: 85,
+        hollow: {
+          size: "80%",
+        },
+        track: {
+          background: "#E4E7EC",
+          strokeWidth: "100%",
+          margin: 5, // margin is in pixels
+        },
+        dataLabels: {
+          name: {
+            show: false,
+          },
+          value: {
+            fontSize: "36px",
+            fontWeight: "600",
+            offsetY: -40,
+            color: "#1D2939",
+            formatter: function (val) {
+              return val + "%";
+            },
+          },
+        },
+      },
+    },
+    fill: {
+      type: "solid",
+      colors: ["#465FFF"],
+    },
+    stroke: {
+      lineCap: "round",
+    },
+    labels: ["Progress"],
+  };
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggleDropdown() {
+    setIsOpen(!isOpen);
+  }
+
+  function closeDropdown() {
+    setIsOpen(false);
+  }
+
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-gray-100 dark:border-gray-800 dark:bg-white/[0.03]">
+      <div className="px-5 pt-5 bg-white shadow-default rounded-2xl pb-11 dark:bg-gray-900 sm:px-6 sm:pt-6">
+        <div className="flex justify-between">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+              Monthly Target
+            </h3>
+            <p className="mt-1 font-normal text-gray-500 text-theme-sm dark:text-gray-400">
+              Target you’ve set for each month
+            </p>
+          </div>
+          <div className="relative inline-block">
+            <button onClick={toggleDropdown} className="dropdown-toggle">
+              <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" />
+            </button>
+            <Dropdown
+              isOpen={isOpen}
+              onClose={closeDropdown}
+              className="w-40 p-2"
+            >
+              <DropdownItem
+                tag="a"
+                onItemClick={closeDropdown}
+                className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+              >
+                View More
+              </DropdownItem>
+              <DropdownItem
+                tag="a"
+                onItemClick={closeDropdown}
+                className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+              >
+                Delete
+              </DropdownItem>
+            </Dropdown>
+          </div>
+        </div>
+        <div className="relative ">
+          <div className="max-h-[330px]">
+            <ReactApexChart
+              options={options}
+              series={series}
+              type="radialBar"
+              height={330}
+            />
+          </div>
+
+          <span className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-[95%] rounded-full bg-success-50 px-3 py-1 text-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500">
+            +10%
+          </span>
+        </div>
+        <p className="mx-auto mt-10 w-full max-w-[380px] text-center text-sm text-gray-500 sm:text-base">
+          You earn $3287 today, it&apos;s higher than last month. Keep up your
+          good work!
+        </p>
+      </div>
+
+      <div className="flex items-center justify-center gap-5 px-6 py-3.5 sm:gap-8 sm:py-5">
+        <div>
+          <p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
+            Target
+          </p>
+          <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
+            $20K
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.26816 13.6632C7.4056 13.8192 7.60686 13.9176 7.8311 13.9176C7.83148 13.9176 7.83187 13.9176 7.83226 13.9176C8.02445 13.9178 8.21671 13.8447 8.36339 13.6981L12.3635 9.70076C12.6565 9.40797 12.6567 8.9331 12.3639 8.6401C12.0711 8.34711 11.5962 8.34694 11.3032 8.63973L8.5811 11.36L8.5811 2.5C8.5811 2.08579 8.24531 1.75 7.8311 1.75C7.41688 1.75 7.0811 2.08579 7.0811 2.5L7.0811 11.3556L4.36354 8.63975C4.07055 8.34695 3.59568 8.3471 3.30288 8.64009C3.01008 8.93307 3.01023 9.40794 3.30321 9.70075L7.26816 13.6632Z"
+                fill="#D92D20"
+              />
+            </svg>
+          </p>
+        </div>
+
+        <div className="w-px bg-gray-200 h-7 dark:bg-gray-800"></div>
+
+        <div>
+          <p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
+            Revenue
+          </p>
+          <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
+            $20K
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
+                fill="#039855"
+              />
+            </svg>
+          </p>
+        </div>
+
+        <div className="w-px bg-gray-200 h-7 dark:bg-gray-800"></div>
+
+        <div>
+          <p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
+            Today
+          </p>
+          <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
+            $20K
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
+                fill="#039855"
+              />
+            </svg>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ecommerce/RecentOrders.tsx

@@ -0,0 +1,211 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import Badge from "../ui/badge/Badge";
+import Image from "next/image";
+
+// Define the TypeScript interface for the table rows
+interface Product {
+  id: number; // Unique identifier for each product
+  name: string; // Product name
+  variants: string; // Number of variants (e.g., "1 Variant", "2 Variants")
+  category: string; // Category of the product
+  price: string; // Price of the product (as a string with currency symbol)
+  // status: string; // Status of the product
+  image: string; // URL or path to the product image
+  status: "Delivered" | "Pending" | "Canceled"; // Status of the product
+}
+
+// Define the table data using the interface
+const tableData: Product[] = [
+  {
+    id: 1,
+    name: "MacBook Pro 13”",
+    variants: "2 Variants",
+    category: "Laptop",
+    price: "$2399.00",
+    status: "Delivered",
+    image: "/images/product/product-01.jpg", // Replace with actual image URL
+  },
+  {
+    id: 2,
+    name: "Apple Watch Ultra",
+    variants: "1 Variant",
+    category: "Watch",
+    price: "$879.00",
+    status: "Pending",
+    image: "/images/product/product-02.jpg", // Replace with actual image URL
+  },
+  {
+    id: 3,
+    name: "iPhone 15 Pro Max",
+    variants: "2 Variants",
+    category: "SmartPhone",
+    price: "$1869.00",
+    status: "Delivered",
+    image: "/images/product/product-03.jpg", // Replace with actual image URL
+  },
+  {
+    id: 4,
+    name: "iPad Pro 3rd Gen",
+    variants: "2 Variants",
+    category: "Electronics",
+    price: "$1699.00",
+    status: "Canceled",
+    image: "/images/product/product-04.jpg", // Replace with actual image URL
+  },
+  {
+    id: 5,
+    name: "AirPods Pro 2nd Gen",
+    variants: "1 Variant",
+    category: "Accessories",
+    price: "$240.00",
+    status: "Delivered",
+    image: "/images/product/product-05.jpg", // Replace with actual image URL
+  },
+];
+
+export default function RecentOrders() {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
+      <div className="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+            Recent Orders
+          </h3>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
+            <svg
+              className="stroke-current fill-white dark:fill-gray-800"
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.29004 5.90393H17.7067"
+                stroke=""
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M17.7075 14.0961H2.29085"
+                stroke=""
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M12.0826 3.33331C13.5024 3.33331 14.6534 4.48431 14.6534 5.90414C14.6534 7.32398 13.5024 8.47498 12.0826 8.47498C10.6627 8.47498 9.51172 7.32398 9.51172 5.90415C9.51172 4.48432 10.6627 3.33331 12.0826 3.33331Z"
+                fill=""
+                stroke=""
+                strokeWidth="1.5"
+              />
+              <path
+                d="M7.91745 11.525C6.49762 11.525 5.34662 12.676 5.34662 14.0959C5.34661 15.5157 6.49762 16.6667 7.91745 16.6667C9.33728 16.6667 10.4883 15.5157 10.4883 14.0959C10.4883 12.676 9.33728 11.525 7.91745 11.525Z"
+                fill=""
+                stroke=""
+                strokeWidth="1.5"
+              />
+            </svg>
+            Filter
+          </button>
+          <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
+            See all
+          </button>
+        </div>
+      </div>
+      <div className="max-w-full overflow-x-auto">
+        <Table>
+          {/* Table Header */}
+          <TableHeader className="border-gray-100 dark:border-gray-800 border-y">
+            <TableRow>
+              <TableCell
+                isHeader
+                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+              >
+                Products
+              </TableCell>
+              <TableCell
+                isHeader
+                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+              >
+                Category
+              </TableCell>
+              <TableCell
+                isHeader
+                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+              >
+                Price
+              </TableCell>
+              <TableCell
+                isHeader
+                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+              >
+                Status
+              </TableCell>
+            </TableRow>
+          </TableHeader>
+
+          {/* Table Body */}
+
+          <TableBody className="divide-y divide-gray-100 dark:divide-gray-800">
+            {tableData.map((product) => (
+              <TableRow key={product.id} className="">
+                <TableCell className="py-3">
+                  <div className="flex items-center gap-3">
+                    <div className="h-[50px] w-[50px] overflow-hidden rounded-md">
+                      <Image
+                        width={50}
+                        height={50}
+                        src={product.image}
+                        className="h-[50px] w-[50px]"
+                        alt={product.name}
+                      />
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
+                        {product.name}
+                      </p>
+                      <span className="text-gray-500 text-theme-xs dark:text-gray-400">
+                        {product.variants}
+                      </span>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
+                  {product.price}
+                </TableCell>
+                <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
+                  {product.category}
+                </TableCell>
+                <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
+                  <Badge
+                    size="sm"
+                    color={
+                      product.status === "Delivered"
+                        ? "success"
+                        : product.status === "Pending"
+                        ? "warning"
+                        : "error"
+                    }
+                  >
+                    {product.status}
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

src/components/ecommerce/StatisticsChart.tsx

@@ -0,0 +1,180 @@
+"use client";
+import { useEffect, useRef } from "react";
+import dynamic from "next/dynamic";
+import { ApexOptions } from "apexcharts";
+import flatpickr from "flatpickr";
+import ChartTab from "../common/ChartTab";
+import { CalenderIcon } from "../../icons";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+export default function StatisticsChart() {
+  const datePickerRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!datePickerRef.current) return;
+
+    const today = new Date();
+    const sevenDaysAgo = new Date();
+    sevenDaysAgo.setDate(today.getDate() - 6);
+
+    const fp = flatpickr(datePickerRef.current, {
+      mode: "range",
+      static: true,
+      monthSelectorType: "static",
+      dateFormat: "M d",
+      defaultDate: [sevenDaysAgo, today],
+      clickOpens: true,
+      prevArrow:
+        '<svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 15L7.5 10L12.5 5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+      nextArrow:
+        '<svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 15L12.5 10L7.5 5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    });
+
+    return () => {
+      if (!Array.isArray(fp)) {
+        fp.destroy();
+      }
+    };
+  }, []);
+
+  const options: ApexOptions = {
+    legend: {
+      show: false, // Hide legend
+      position: "top",
+      horizontalAlign: "left",
+    },
+    colors: ["#465FFF", "#9CB9FF"], // Define line colors
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      height: 310,
+      type: "line", // Set the chart type to 'line'
+      toolbar: {
+        show: false, // Hide chart toolbar
+      },
+    },
+    stroke: {
+      curve: "straight", // Define the line style (straight, smooth, or step)
+      width: [2, 2], // Line width for each dataset
+    },
+
+    fill: {
+      type: "gradient",
+      gradient: {
+        opacityFrom: 0.55,
+        opacityTo: 0,
+      },
+    },
+    markers: {
+      size: 0, // Size of the marker points
+      strokeColors: "#fff", // Marker border color
+      strokeWidth: 2,
+      hover: {
+        size: 6, // Marker size on hover
+      },
+    },
+    grid: {
+      xaxis: {
+        lines: {
+          show: false, // Hide grid lines on x-axis
+        },
+      },
+      yaxis: {
+        lines: {
+          show: true, // Show grid lines on y-axis
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false, // Disable data labels
+    },
+    tooltip: {
+      enabled: true, // Enable tooltip
+      x: {
+        format: "dd MMM yyyy", // Format for x-axis tooltip
+      },
+    },
+    xaxis: {
+      type: "category", // Category-based x-axis
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      axisBorder: {
+        show: false, // Hide x-axis border
+      },
+      axisTicks: {
+        show: false, // Hide x-axis ticks
+      },
+      tooltip: {
+        enabled: false, // Disable tooltip for x-axis points
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          fontSize: "12px", // Adjust font size for y-axis labels
+          colors: ["#6B7280"], // Color of the labels
+        },
+      },
+      title: {
+        text: "", // Remove y-axis title
+        style: {
+          fontSize: "0px",
+        },
+      },
+    },
+  };
+
+  const series = [
+    {
+      name: "Sales",
+      data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
+    },
+    {
+      name: "Revenue",
+      data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
+    },
+  ];
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white px-5 pb-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
+      <div className="flex flex-col gap-5 mb-6 sm:flex-row sm:justify-between">
+        <div className="w-full">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+            Statistics
+          </h3>
+          <p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
+            Target you've set for each month
+          </p>
+        </div>
+        <div className="flex items-center gap-3 sm:justify-end">
+          <ChartTab />
+          <div className="relative inline-flex items-center">
+            <CalenderIcon className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 lg:left-3 lg:top-1/2 lg:translate-x-0 lg:-translate-y-1/2  text-gray-500 dark:text-gray-400 pointer-events-none z-10" />
+            <input
+              ref={datePickerRef}
+              className="h-10 w-10 lg:w-40 lg:h-auto  lg:pl-10 lg:pr-3 lg:py-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-transparent lg:text-gray-700 outline-none dark:border-gray-700 dark:bg-gray-800 dark:lg:text-gray-300 cursor-pointer"
+              placeholder="Select date range"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-full overflow-x-auto custom-scrollbar">
+        <div className="min-w-[1000px] xl:min-w-full">
+          <Chart options={options} series={series} type="area" height={310} />
+        </div>
+      </div>
+    </div>
+  );
+}