first commit

src/partials/dashboard/DashboardAvatars.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import User01 from '../../images/user-36-01.jpg';
+import User02 from '../../images/user-36-02.jpg';
+import User03 from '../../images/user-36-03.jpg';
+import User04 from '../../images/user-36-04.jpg';
+
+function DashboardAvatars() {
+  return (
+    <ul className="flex flex-wrap justify-center sm:justify-start mb-8 sm:mb-0 -space-x-3 -ml-px">
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User01} width="36" height="36" alt="User 01" />
+        </Link>
+      </li>
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User02} width="36" height="36" alt="User 02" />
+        </Link>
+      </li>
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User03} width="36" height="36" alt="User 03" />
+        </Link>
+      </li>
+      <li>
+        <Link className="block" to="#0">
+          <img className="w-9 h-9 rounded-full" src={User04} width="36" height="36" alt="User 04" />
+        </Link>
+      </li>
+      <li>
+        <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150 ml-2">
+          <span className="sr-only">Add new user</span>
+          <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+            <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+          </svg>
+        </button>
+      </li>
+    </ul>
+  );
+}
+
+export default DashboardAvatars;

src/partials/dashboard/DashboardCard01.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LineChart from '../../charts/LineChart01';
+import Icon from '../../images/icon-01.svg';
+import EditMenu from '../../components/DropdownEditMenu';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard01() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          732, 610, 610, 504, 504, 504, 349,
+          349, 504, 342, 504, 610, 391, 192,
+          154, 273, 191, 191, 126, 263, 349,
+          252, 423, 622, 470, 532,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        data: [
+          532, 532, 532, 404, 404, 314, 314,
+          314, 314, 314, 234, 314, 234, 234,
+          314, 314, 314, 388, 314, 202, 202,
+          202, 202, 314, 720, 642,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header className="flex justify-between items-start mb-2">
+          {/* Icon */}
+          <img src={Icon} width="32" height="32" alt="Icon 01" />
+          {/* Menu button */}
+          <EditMenu align="right" className="relative inline-flex">
+            <li>
+              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
+            </li>
+            <li>
+              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
+            </li>
+            <li>
+              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
+            </li>
+          </EditMenu>
+        </header>
+        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Plus</h2>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$24,780</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={128} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard01;

src/partials/dashboard/DashboardCard02.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LineChart from '../../charts/LineChart01';
+import Icon from '../../images/icon-02.svg';
+import EditMenu from '../../components/DropdownEditMenu';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard02() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          622, 622, 426, 471, 365, 365, 238,
+          324, 288, 206, 324, 324, 500, 409,
+          409, 273, 232, 273, 500, 570, 767,
+          808, 685, 767, 685, 685,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        data: [
+          732, 610, 610, 504, 504, 504, 349,
+          349, 504, 342, 504, 610, 391, 192,
+          154, 273, 191, 191, 126, 263, 349,
+          252, 423, 622, 470, 532,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header className="flex justify-between items-start mb-2">
+          {/* Icon */}
+          <img src={Icon} width="32" height="32" alt="Icon 02" />
+          {/* Menu button */}
+          <EditMenu align="right" className="relative inline-flex">
+            <li>
+              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
+            </li>
+            <li>
+              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
+            </li>
+            <li>
+              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
+            </li>
+          </EditMenu>
+        </header>
+        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Advanced</h2>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$17,489</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={128} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard02;

src/partials/dashboard/DashboardCard03.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LineChart from '../../charts/LineChart01';
+import Icon from '../../images/icon-03.svg';
+import EditMenu from '../../components/DropdownEditMenu';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard03() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        data: [
+          540, 466, 540, 466, 385, 432, 334,
+          334, 289, 289, 200, 289, 222, 289,
+          289, 403, 554, 304, 289, 270, 134,
+          270, 829, 344, 388, 364,
+        ],
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Gray line
+      {
+        data: [
+          689, 562, 477, 477, 477, 477, 458,
+          314, 430, 378, 430, 498, 642, 350,
+          145, 145, 354, 260, 188, 188, 300,
+          300, 282, 364, 660, 554,
+        ],
+        borderColor: tailwindConfig().theme.colors.slate[300],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <div className="px-5 pt-5">
+        <header className="flex justify-between items-start mb-2">
+          {/* Icon */}
+          <img src={Icon} width="32" height="32" alt="Icon 03" />
+          {/* Menu button */}
+          <EditMenu align="right" className="relative inline-flex">
+            <li>
+              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
+            </li>
+            <li>
+              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
+            </li>
+            <li>
+              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
+            </li>
+          </EditMenu>
+        </header>
+        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Professional</h2>
+        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">$9,962</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <LineChart data={chartData} width={389} height={128} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard03;

src/partials/dashboard/DashboardCard04.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import BarChart from '../../charts/BarChart01';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard04() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Light blue bars
+      {
+        label: 'Direct',
+        data: [
+          800, 1600, 900, 1300, 1950, 1700,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.blue[400],
+        hoverBackgroundColor: tailwindConfig().theme.colors.blue[500],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Blue bars
+      {
+        label: 'Indirect',
+        data: [
+          4900, 2600, 5350, 4800, 5200, 4800,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Direct VS Indirect</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <BarChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default DashboardCard04;

src/partials/dashboard/DashboardCard05.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import Tooltip from '../../components/Tooltip';
+import RealtimeChart from '../../charts/RealtimeChart';
+
+// Import utilities
+import { tailwindConfig, hexToRGB } from '../../utils/Utils';
+
+function DashboardCard05() {
+
+  // IMPORTANT:
+  // Code below is for demo purpose only, and it's not covered by support.
+  // If you need to replace dummy data with real data,
+  // refer to Chart.js documentation: https://www.chartjs.org/docs/latest
+
+  // Fake real-time data
+  const [counter, setCounter] = useState(0);
+  const [increment, setIncrement] = useState(0);
+  const [range, setRange] = useState(35);
+  
+  // Dummy data to be looped
+  const data = [
+    57.81, 57.75, 55.48, 54.28, 53.14, 52.25, 51.04, 52.49, 55.49, 56.87,
+    53.73, 56.42, 58.06, 55.62, 58.16, 55.22, 58.67, 60.18, 61.31, 63.25,
+    65.91, 64.44, 65.97, 62.27, 60.96, 59.34, 55.07, 59.85, 53.79, 51.92,
+    50.95, 49.65, 48.09, 49.81, 47.85, 49.52, 50.21, 52.22, 54.42, 53.42,
+    50.91, 58.52, 53.37, 57.58, 59.09, 59.36, 58.71, 59.42, 55.93, 57.71,
+    50.62, 56.28, 57.37, 53.08, 55.94, 55.82, 53.94, 52.65, 50.25,
+  ];
+
+  const [slicedData, setSlicedData] = useState(data.slice(0, range));
+
+  // Generate fake dates from now to back in time
+  const generateDates = () => {
+    const now = new Date();
+    const dates = [];
+    data.forEach((v, i) => {
+      dates.push(new Date(now - 2000 - i * 2000));
+    });
+    return dates;
+  };
+
+  const [slicedLabels, setSlicedLabels] = useState(generateDates().slice(0, range).reverse());
+
+  // Fake update every 2 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCounter(counter + 1);
+    }, 2000);
+    return () => clearInterval(interval)
+  }, [counter]);
+
+  // Loop through data array and update
+  useEffect(() => {
+    setIncrement(increment + 1);
+    if (increment + range < data.length) {
+      setSlicedData(([x, ...slicedData]) => [...slicedData, data[increment + range]]);
+    } else {
+      setIncrement(0);
+      setRange(0);
+    }
+    setSlicedLabels(([x, ...slicedLabels]) => [...slicedLabels, new Date()]);
+    return () => setIncrement(0)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [counter]);
+
+  const chartData = {
+    labels: slicedLabels,
+    datasets: [
+      // Indigo line
+      {
+        data: slicedData,
+        fill: true,
+        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Real Time Value</h2>
+        <Tooltip className="ml-2">
+          <div className="text-xs text-center whitespace-nowrap">Built with <a className="underline" href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></div>
+        </Tooltip>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <RealtimeChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default DashboardCard05;

src/partials/dashboard/DashboardCard06.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import DoughnutChart from '../../charts/DoughnutChart';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard06() {
+
+  const chartData = {
+    labels: ['United States', 'Italy', 'Other'],
+    datasets: [
+      {
+        label: 'Top Countries',
+        data: [
+          35, 30, 35,
+        ],
+        backgroundColor: [
+          tailwindConfig().theme.colors.indigo[500],
+          tailwindConfig().theme.colors.blue[400],
+          tailwindConfig().theme.colors.indigo[800],
+        ],
+        hoverBackgroundColor: [
+          tailwindConfig().theme.colors.indigo[600],
+          tailwindConfig().theme.colors.blue[500],
+          tailwindConfig().theme.colors.indigo[900],
+        ],
+        hoverBorderColor: tailwindConfig().theme.colors.white,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Countries</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <DoughnutChart data={chartData} width={389} height={260} />
+    </div>
+  );
+}
+
+export default DashboardCard06;

src/partials/dashboard/DashboardCard07.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+
+function DashboardCard07() {
+  return (
+    <div className="col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Top Channels</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="table-auto w-full">
+            {/* Table header */}
+            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
+              <tr>
+                <th className="p-2">
+                  <div className="font-semibold text-left">Source</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Visitors</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Revenues</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Sales</div>
+                </th>
+                <th className="p-2">
+                  <div className="font-semibold text-center">Conversion</div>
+                </th>
+              </tr>
+            </thead>
+            {/* Table body */}
+            <tbody className="text-sm font-medium divide-y divide-slate-100">
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#24292E" cx="18" cy="18" r="18" />
+                      <path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
+                    </svg>
+                    <div className="text-slate-800">Github.com</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">2.4K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$3,877</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">267</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.7%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#1DA1F2" cx="18" cy="18" r="18" />
+                      <path d="M26 13.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H10c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" fill="#FFF" fillRule="nonzero" />
+                    </svg>
+                    <div className="text-slate-800">Twitter</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">2.2K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$3,426</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">249</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.4%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#EA4335" cx="18" cy="18" r="18" />
+                      <path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fillRule="nonzero" />
+                    </svg>
+                    <div className="text-slate-800">Google (organic)</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">2.0K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$2,444</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">224</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.2%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#4BC9FF" cx="18" cy="18" r="18" />
+                      <path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fillRule="nonzero" />
+                    </svg>
+                    <div className="text-slate-800">Vimeo.com</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">1.9K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$2,236</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">220</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">4.2%</div>
+                </td>
+              </tr>
+              {/* Row */}
+              <tr>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                      <circle fill="#0E2439" cx="18" cy="18" r="18" />
+                      <path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
+                    </svg>
+                    <div className="text-slate-800">Indiehackers.com</div>
+                  </div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">1.7K</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-emerald-500">$2,034</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center">204</div>
+                </td>
+                <td className="p-2">
+                  <div className="text-center text-sky-500">3.9%</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard07;

src/partials/dashboard/DashboardCard08.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import LineChart from '../../charts/LineChart02';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard08() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+      '06-01-2021', '07-01-2021', '08-01-2021',
+      '09-01-2021', '10-01-2021', '11-01-2021',
+      '12-01-2021', '01-01-2022', '02-01-2022',
+      '03-01-2022', '04-01-2022', '05-01-2022',
+      '06-01-2022', '07-01-2022', '08-01-2022',
+      '09-01-2022', '10-01-2022', '11-01-2022',
+      '12-01-2022', '01-01-2023',
+    ],
+    datasets: [
+      // Indigo line
+      {
+        label: 'Current',
+        data: [
+          73, 64, 73, 69, 104, 104, 164,
+          164, 120, 120, 120, 148, 142, 104,
+          122, 110, 104, 152, 166, 233, 268,
+          252, 284, 284, 333, 323,
+        ],
+        borderColor: tailwindConfig().theme.colors.indigo[500],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
+        clip: 20,
+      },
+      // Blue line
+      {
+        label: 'Previous',
+        data: [
+          184, 86, 42, 378, 42, 243, 38,
+          120, 0, 0, 42, 0, 84, 0,
+          276, 0, 124, 42, 124, 88, 88,
+          215, 156, 88, 124, 64,
+        ],
+        borderColor: tailwindConfig().theme.colors.blue[400],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
+        clip: 20,
+      },
+      // emerald line
+      {
+        label: 'Average',
+        data: [
+          122, 170, 192, 86, 102, 124, 115,
+          115, 56, 104, 0, 72, 208, 186,
+          223, 188, 114, 162, 200, 150, 118,
+          118, 76, 122, 230, 268,
+        ],
+        borderColor: tailwindConfig().theme.colors.emerald[500],
+        fill: false,
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
+        clip: 20,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Sales Over Time (all stores)</h2>
+      </header>
+      {/* Chart built with Chart.js 3 */}
+      {/* Change the height attribute to adjust the chart height */}
+      <LineChart data={chartData} width={595} height={248} />
+    </div>
+  );
+}
+
+export default DashboardCard08;

src/partials/dashboard/DashboardCard09.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Tooltip from '../../components/Tooltip';
+import BarChart from '../../charts/BarChart02';
+
+// Import utilities
+import { tailwindConfig } from '../../utils/Utils';
+
+function DashboardCard09() {
+
+  const chartData = {
+    labels: [
+      '12-01-2020', '01-01-2021', '02-01-2021',
+      '03-01-2021', '04-01-2021', '05-01-2021',
+    ],
+    datasets: [
+      // Light blue bars
+      {
+        label: 'Stack 1',
+        data: [
+          6200, 9200, 6600, 8800, 5200, 9200,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[500],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+      // Blue bars
+      {
+        label: 'Stack 2',
+        data: [
+          -4000, -2600, -5350, -4000, -7500, -2000,
+        ],
+        backgroundColor: tailwindConfig().theme.colors.indigo[200],
+        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[300],
+        barPercentage: 0.66,
+        categoryPercentage: 0.66,
+      },
+    ],
+  };
+
+  return (
+    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
+        <h2 className="font-semibold text-slate-800">Sales VS Refunds</h2>
+        <Tooltip className="ml-2" size="lg">
+          <div className="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
+        </Tooltip>
+      </header>
+      <div className="px-5 py-3">
+        <div className="flex items-start">
+          <div className="text-3xl font-bold text-slate-800 mr-2">+$6,796</div>
+          <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
+        </div>
+      </div>
+      {/* Chart built with Chart.js 3 */}
+      <div className="grow">
+        {/* Change the height attribute to adjust the chart height */}
+        <BarChart data={chartData} width={595} height={248} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard09;

src/partials/dashboard/DashboardCard10.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+function DashboardCard10() {
+  return (
+    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Recent Activity</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Card content */}
+        {/* "Today" group */}
+        <div>
+          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Today</header>
+          <ul className="my-1">
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                  <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a> mentioned <a className="font-medium text-slate-800" href="#0">Sara Smith</a> in a new post</div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
+                  <path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center">The post <a className="font-medium text-slate-800" href="#0">Post Name</a> was removed by <a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Patrick Sullivan</a> published a new <a className="font-medium text-slate-800" href="#0">post</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        {/* "Yesterday" group */}
+        <div>
+          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Yesterday</header>
+          <ul className="my-1">
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-sky-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
+                  <path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">240+</a> users have subscribed to <a className="font-medium text-slate-800" href="#0">Newsletter #1</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
+                  <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center">The post <a className="font-medium text-slate-800" href="#0">Post Name</a> was suspended by <a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a></div>
+                  <div className="shrink-0 self-end ml-2">
+                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard10;

src/partials/dashboard/DashboardCard11.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+function DashboardCard11() {
+  return (
+    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
+      <header className="px-5 py-4 border-b border-slate-100">
+        <h2 className="font-semibold text-slate-800">Income/Expenses</h2>
+      </header>
+      <div className="p-3">
+
+        {/* Card content */}
+        {/* "Today" group */}
+        <div>
+          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Today</header>
+          <ul className="my-1">
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
+                  <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Qonto</a> billing</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-slate-800">-$49.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-emerald-500">+249.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Notion Labs Inc</a></div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-emerald-500">+99.99</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
+                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Market Cap Ltd</a></div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-emerald-500">+1,200.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-slate-200 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
+                  <path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-slate-800 line-through">+$99.99</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+            {/* Item */}
+            <li className="flex px-2">
+              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
+                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
+                  <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
+                </svg>
+              </div>
+              <div className="grow flex items-center text-sm py-2">
+                <div className="grow flex justify-between">
+                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
+                  <div className="shrink-0 self-start ml-2">
+                    <span className="font-medium text-slate-800">-$49.88</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default DashboardCard11;

src/partials/dashboard/WelcomeBanner.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+function WelcomeBanner() {
+  return (
+    <div className="relative bg-indigo-200 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
+
+      {/* Background illustration */}
+      <div className="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true">
+        <svg width="319" height="198" xmlnsXlink="http://www.w3.org/1999/xlink">
+          <defs>
+            <path id="welcome-a" d="M64 0l64 128-64-20-64 20z" />
+            <path id="welcome-e" d="M40 0l40 80-40-12.5L0 80z" />
+            <path id="welcome-g" d="M40 0l40 80-40-12.5L0 80z" />
+            <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="welcome-b">
+              <stop stopColor="#A5B4FC" offset="0%" />
+              <stop stopColor="#818CF8" offset="100%" />
+            </linearGradient>
+            <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="welcome-c">
+              <stop stopColor="#4338CA" offset="0%" />
+              <stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
+            </linearGradient>
+          </defs>
+          <g fill="none" fillRule="evenodd">
+            <g transform="rotate(64 36.592 105.604)">
+              <mask id="welcome-d" fill="#fff">
+                <use xlinkHref="#welcome-a" />
+              </mask>
+              <use fill="url(#welcome-b)" xlinkHref="#welcome-a" />
+              <path fill="url(#welcome-c)" mask="url(#welcome-d)" d="M64-24h80v152H64z" />
+            </g>
+            <g transform="rotate(-51 91.324 -105.372)">
+              <mask id="welcome-f" fill="#fff">
+                <use xlinkHref="#welcome-e" />
+              </mask>
+              <use fill="url(#welcome-b)" xlinkHref="#welcome-e" />
+              <path fill="url(#welcome-c)" mask="url(#welcome-f)" d="M40.333-15.147h50v95h-50z" />
+            </g>
+            <g transform="rotate(44 61.546 392.623)">
+              <mask id="welcome-h" fill="#fff">
+                <use xlinkHref="#welcome-g" />
+              </mask>
+              <use fill="url(#welcome-b)" xlinkHref="#welcome-g" />
+              <path fill="url(#welcome-c)" mask="url(#welcome-h)" d="M40.333-15.147h50v95h-50z" />
+            </g>
+          </g>
+        </svg>
+      </div>
+
+      {/* Content */}
+      <div className="relative">
+        <h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
+        <p>Here is what’s happening with your projects today:</p>
+      </div>
+
+    </div>
+  );
+}
+
+export default WelcomeBanner;