Dashboard - JS + CSS

Dashboard

Contoh Penggunaan

Title

9.778.392
20.294 subtext
Title

9.778.392
20.294 subtext
Title

9.778.392
20.294 subtext
Title

9.778.392
20.294 subtext
Hari	Penghasilan
Senin	22000
Selasa	23000
Rabu	24000
Kamis	25000
Jumat	26000
<div class="p-4 border border-gray-200 rounded-lg shadow-sm h-fit bg-guide-100">
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
    <!-- Card 1 -->
    <div class="flex flex-row gap-4 w-full bg-white p-4 border border-neutral-200 rounded-lg">
      <div class="flex flex-row justify-between w-full h-fit py-0">
        <div class="flex flex-col">
          <h1 class="text-[8px] md:text-[10px] font-medium text-content-secondary">Title</h1>
          <p class="text-xs md:text-sm font-semibold text-content-primary">9.778.392</p>
          <p class="text-[8px] md:text-[10px] font-medium text-positive-500 flex flex-row gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="inline"
              ><path d="M3 17l6 -6l4 4l8 -8"></path><path d="M14 7l7 0l0 7"></path></svg
            >
            20.294
            <span class="text-[8px] md:text-[10px] font-medium text-content-secondary">subtext</span
            >
          </p>
        </div>
        <div class="w-8 h-8 rounded-full bg-background-tertiary flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-content-primary"
            ><path d="M4 19l16 0"></path><path d="M4 15l2 0"></path><path d="M10 15l2 0"
            ></path><path d="M16 15l2 0"></path><path d="M4 11l6 0"></path><path d="M16 11l2 0"
            ></path><path d="M4 7l10 0"></path></svg
          >
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="flex flex-row gap-4 w-full bg-white p-4 border border-neutral-200 rounded-lg">
      <div class="flex flex-row justify-between w-full h-fit py-0">
        <div class="flex flex-col">
          <h1 class="text-[8px] md:text-[10px] font-medium text-content-secondary">Title</h1>
          <p class="text-xs md:text-sm font-semibold text-content-primary">9.778.392</p>
          <p class="text-[8px] md:text-[10px] font-medium text-positive-500 flex flex-row gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="inline"
              ><path d="M3 17l6 -6l4 4l8 -8"></path><path d="M14 7l7 0l0 7"></path></svg
            >
            20.294
            <span class="text-[8px] md:text-[10px] font-medium text-content-secondary">subtext</span
            >
          </p>
        </div>
        <div class="w-8 h-8 rounded-full bg-background-tertiary flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-content-primary"
            ><path d="M4 19l16 0"></path><path d="M4 15l2 0"></path><path d="M10 15l2 0"
            ></path><path d="M16 15l2 0"></path><path d="M4 11l6 0"></path><path d="M16 11l2 0"
            ></path><path d="M4 7l10 0"></path></svg
          >
        </div>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="flex flex-row gap-4 w-full bg-white p-4 border border-neutral-200 rounded-lg">
      <div class="flex flex-row justify-between w-full h-fit py-0">
        <div class="flex flex-col">
          <h1 class="text-[8px] md:text-[10px] font-medium text-content-secondary">Title</h1>
          <p class="text-xs md:text-sm font-semibold text-content-primary">9.778.392</p>
          <p class="text-[8px] md:text-[10px] font-medium text-positive-500 flex flex-row gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="inline"
              ><path d="M3 17l6 -6l4 4l8 -8"></path><path d="M14 7l7 0l0 7"></path></svg
            >
            20.294
            <span class="text-[8px] md:text-[10px] font-medium text-content-secondary">subtext</span
            >
          </p>
        </div>
        <div class="w-8 h-8 rounded-full bg-background-tertiary flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-content-primary"
            ><path d="M4 19l16 0"></path><path d="M4 15l2 0"></path><path d="M10 15l2 0"
            ></path><path d="M16 15l2 0"></path><path d="M4 11l6 0"></path><path d="M16 11l2 0"
            ></path><path d="M4 7l10 0"></path></svg
          >
        </div>
      </div>
    </div>
    <!-- Card 4 -->
    <div class="flex flex-row gap-4 w-full bg-white p-4 border border-neutral-200 rounded-lg">
      <div class="flex flex-row justify-between w-full h-fit py-0">
        <div class="flex flex-col">
          <h1 class="text-[8px] md:text-[10px] font-medium text-content-secondary">Title</h1>
          <p class="text-xs md:text-sm font-semibold text-content-primary">9.778.392</p>
          <p class="text-[8px] md:text-[10px] font-medium text-positive-500 flex flex-row gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="inline"
              ><path d="M3 17l6 -6l4 4l8 -8"></path><path d="M14 7l7 0l0 7"></path></svg
            >
            20.294
            <span class="text-[8px] md:text-[10px] font-medium text-content-secondary">subtext</span
            >
          </p>
        </div>
        <div class="w-8 h-8 rounded-full bg-background-tertiary flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-content-primary"
            ><path d="M4 19l16 0"></path><path d="M4 15l2 0"></path><path d="M10 15l2 0"
            ></path><path d="M16 15l2 0"></path><path d="M4 11l6 0"></path><path d="M16 11l2 0"
            ></path><path d="M4 7l10 0"></path></svg
          >
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-col-1 md:grid-cols-2 h-full w-full gap-4">
    <!-- Chart Container -->
    <div
      class="border-t border-b border-neutral-200 rounded-lg bg-white"
      id="dashboardChartContainer"
    >
      <!-- ApexCharts container in Vanilla JS -->
    </div>

    <!-- Table -->
    <div class="bg-white border-neutral-200 rounded-lg overflow-x-auto">
      <table class="ina-table w-full">
        <thead>
          <tr>
            <th class="text-left font-medium text-content-primary p-4 border-b border-neutral-200"
              >Hari</th
            >
            <th class="text-left font-medium text-content-primary p-4 border-b border-neutral-200"
              >Penghasilan</th
            >
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="p-4 border-b border-neutral-200 text-content-primary">Senin</td>
            <td class="p-4 border-b border-neutral-200 text-content-primary">22000</td>
          </tr>
          <tr>
            <td class="p-4 border-b border-neutral-200 text-content-primary">Selasa</td>
            <td class="p-4 border-b border-neutral-200 text-content-primary">23000</td>
          </tr>
          <tr>
            <td class="p-4 border-b border-neutral-200 text-content-primary">Rabu</td>
            <td class="p-4 border-b border-neutral-200 text-content-primary">24000</td>
          </tr>
          <tr>
            <td class="p-4 border-b border-neutral-200 text-content-primary">Kamis</td>
            <td class="p-4 border-b border-neutral-200 text-content-primary">25000</td>
          </tr>
          <tr>
            <td class="p-4 border-b border-neutral-200 text-content-primary">Jumat</td>
            <td class="p-4 border-b border-neutral-200 text-content-primary">26000</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script is:inline src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script is:inline>
  document.addEventListener('DOMContentLoaded', function () {
    var data = [
      { day: 'Senin', price: 22000 },
      { day: 'Selasa', price: 23000 },
      { day: 'Rabu', price: 24000 },
      { day: 'Kamis', price: 25000 },
      { day: 'Jumat', price: 26000 },
    ];

    var options = {
      series: [
        {
          name: 'Total Transaksi',
          data: data.map((item) => item.price),
        },
      ],
      chart: {
        type: 'area',
        height: '100%',
        toolbar: { show: false },
        zoom: { enabled: false },
      },
      stroke: {
        curve: 'smooth',
        width: 2,
      },
      fill: {
        type: 'gradient',
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.5,
          opacityTo: 0.05,
          stops: [0, 90, 100],
        },
      },
      dataLabels: {
        enabled: false,
      },
      grid: {
        strokeDashArray: 4,
        padding: {
          left: 8,
          right: 8,
        },
      },
      xaxis: {
        categories: data.map((item) => item.day),
        axisBorder: { show: false },
        axisTicks: { show: false },
        labels: {
          show: true,
        },
      },
      yaxis: {
        labels: {
          show: true,
        },
      },
      tooltip: {
        enabled: true,
      },
    };

    var chartContainer = document.querySelector('#dashboardChartContainer');
    if (chartContainer && typeof ApexCharts !== 'undefined') {
      var chart = new ApexCharts(chartContainer, options);
      chart.render();
    }
  });
</script>