{% extends 'base.html' %}
{% load static %}

{% block title %}HRM-DASHBOARD{% endblock %}
{% block content %}

<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 2xl:col-span-9">
    <div class="grid grid-cols-12 gap-6">
      <nav aria-label="breadcrumb" class="flex -intro-x mr-auto hidden sm:flex">
        <ol class="flex items-center text-theme-1 dark:text-slate-300">
          <li class="">
            <a href="index.html">Dashboard</a>
          </li>
          <li
            class="relative ml-5 pl-0.5 before:content-[''] before:w-[14px] before:h-[14px] before:bg-chevron-black before:transform before:rotate-[-90deg] before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0 dark:before:bg-chevron-white text-slate-800 cursor-text dark:text-slate-400">
            <a href="index.html">HRM</a>
          </li>
        </ol>
      </nav>

      <!-- BEGIN: General Report -->
      <div class="col-span-12 mt-8">
        <div class="intro-y flex h-10 items-center">
          <h2 class="mr-5 truncate text-lg font-medium">
            General Report
          </h2>
          <a class="ml-auto flex items-center text-primary" href="#">
            <i data-tw-merge="" data-lucide="refresh-ccw" class="stroke-1.5 mr-3 h-4 w-4"></i>
            Reload Data
          </a>
        </div>


        <div class="mt-5 grid grid-cols-12 gap-6">
          <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
            <div
              class="relative zoom-in before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']">
              <div class="box p-5">
                <div class="flex">

                  <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                    class="bi bi-people employeicon" viewBox="0 0 16 16">
                    <path
                      d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" />
                  </svg>

                  <div class="ml-auto">
                    <div data-placement="top" title="33% Higher than last month"
                      class="tooltip cursor-pointer flex items-center rounded-full bg-success py-[3px] pl-2 pr-1 text-xs font-medium text-white">
                      33%
                      <i data-tw-merge="" data-lucide="chevron-up" class="stroke-1.5 ml-0.5 h-4 w-4"></i>
                    </div>
                  </div>
                </div>
                <div class="mt-6 text-3xl font-medium leading-8">
                  <div class="mt-6 text-3xl font-medium leading-8">
                    {{ total_employees }}
                  </div>
                  
                </div>
                <div class="mt-1 text-base text-slate-500">
                  Total Employees
                </div>
              </div>
            </div>
          </div>
          <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
            <div
              class="relative zoom-in before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']">
              <div class="box p-5">
                <div class="flex">
                  <i data-tw-merge="" data-lucide="credit-card" class="stroke-1.5 h-[28px] w-[28px] text-pending"></i>
                  <div class="ml-auto">
                    <div data-placement="top" title="2% Lower than last month"
                      class="tooltip cursor-pointer flex items-center rounded-full bg-danger py-[3px] pl-2 pr-1 text-xs font-medium text-white">
                      2%
                      <i data-tw-merge="" data-lucide="chevron-down" class="stroke-1.5 ml-0.5 h-4 w-4"></i>
                    </div>
                  </div>
                </div>
                <div class="mt-6 text-3xl font-medium leading-8">
                  3.721
                </div>
                <div class="mt-1 text-base text-slate-500">
                  Shedules
                </div>
              </div>
            </div>
          </div>
          <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
            <div
              class="relative zoom-in before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']">
              <div class="box p-5">
                <div class="flex">
                  <i data-tw-merge="" data-lucide="monitor" class="stroke-1.5 h-[28px] w-[28px] text-warning"></i>
                  <div class="ml-auto">
                    <div data-placement="top" title="12% Higher than last month"
                      class="tooltip cursor-pointer flex items-center rounded-full bg-success py-[3px] pl-2 pr-1 text-xs font-medium text-white">
                      12%
                      <i data-tw-merge="" data-lucide="chevron-up" class="stroke-1.5 ml-0.5 h-4 w-4"></i>
                    </div>
                  </div>
                </div>
                <div class="mt-6 text-3xl font-medium leading-8">
                  {{ total_departments }}
                </div>
                <div class="mt-1 text-base text-slate-500">
                  Departments</div>
              </div>
            </div>
          </div>
          <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
            <div
              class="relative zoom-in before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']">
              <div class="box p-5">
                <div class="flex">
                  <i data-tw-merge="" data-lucide="user" class="stroke-1.5 h-[28px] w-[28px] text-success"></i>
                  <div class="ml-auto">
                    <div data-placement="top" title="22% Higher than last month"
                      class="tooltip cursor-pointer flex items-center rounded-full bg-success py-[3px] pl-2 pr-1 text-xs font-medium text-white">
                      22%
                      <i data-tw-merge="" data-lucide="chevron-up" class="stroke-1.5 ml-0.5 h-4 w-4"></i>
                    </div>
                  </div>
                </div>
                <div class="mt-6 text-3xl font-medium leading-8">
                  152.040
                </div>
                <div class="mt-1 text-base text-slate-500">
                  Annual Reports </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- END: General Report -->


      <!-- BEGIN:  Project Report -->
      <div class="col-span-12 mt-8 lg:col-span-6">
        <div class="intro-y block h-10 items-center sm:flex">
          <h2 class="mr-5 truncate text-lg font-medium">
            Project Report
          </h2>
          <div class="relative mt-3 text-slate-500 sm:ml-auto sm:mt-0">
            <i data-tw-merge="" data-lucide="calendar"
              class="stroke-1.5 absolute inset-y-0 left-0 z-10 my-auto ml-3 h-4 w-4"></i>
            <input data-tw-merge="" type="text"
              class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker !box pl-10 sm:w-56" />
          </div>
        </div>
        <div class="intro-y box mt-12 p-5 sm:mt-5">
          <div class="flex flex-col md:flex-row md:items-center">
            <div class="flex">
              <div>
                <div class="text-lg font-medium text-primary dark:text-slate-300 xl:text-xl">
                  $15,000
                </div>
                <div class="mt-0.5 text-slate-500">This Month</div>
              </div>
              <div
                class="mx-4 h-12 w-px border border-r border-dashed border-slate-200 dark:border-darkmode-300 xl:mx-5">
              </div>
              <div>
                <div class="text-lg font-medium text-slate-500 xl:text-xl">
                  $10,000
                </div>
                <div class="mt-0.5 text-slate-500">Last Month</div>
              </div>
            </div>
            <div data-tw-merge="" data-tw-placement="bottom-end" class="dropdown relative mt-5 md:ml-auto md:mt-0">
              <button data-tw-merge="" data-tw-toggle="dropdown" aria-expanded="false"
                class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 font-normal">
                Filter by Category
                <i data-tw-merge="" data-lucide="chevron-down" class="stroke-1.5 ml-2 h-4 w-4"></i>
              </button>
              <div data-transition="" data-selector=".show" data-enter="transition-all ease-linear duration-150"
                data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
                data-enter-to="!mt-1 visible opacity-100 translate-y-0"
                data-leave="transition-all ease-linear duration-150"
                data-leave-from="!mt-1 visible opacity-100 translate-y-0"
                data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
                class="dropdown-menu absolute z-[9999] hidden">
                <div data-tw-merge=""
                  class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 h-32 w-40 overflow-y-auto">
                  <a
                    class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">PC
                    & Laptop</a>
                  <a
                    class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">Smartphone</a>
                  <a
                    class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">Electronic</a>
                  <a
                    class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">Photography</a>
                  <a
                    class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">Sport</a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="relative before:content-[''] before:block before:absolute before:w-16 before:left-0 before:top-0 before:bottom-0 before:ml-10 before:mb-7 before:bg-gradient-to-r before:from-white before:via-white/80 before:to-transparent before:dark:from-darkmode-600 after:content-[''] after:block after:absolute after:w-16 after:right-0 after:top-0 after:bottom-0 after:mb-7 after:bg-gradient-to-l after:from-white after:via-white/80 after:to-transparent after:dark:from-darkmode-600">
            <div class="w-auto h-[275px]">
              <canvas id="report-line-chart" class="chart -mb-6 mt-6"></canvas>
            </div>
          </div>
        </div>
      </div>
      <!-- END:  Project Report -->


      <!-- BEGIN:  Weekly Reports -->
      <div class="col-span-12 mt-8 sm:col-span-6 lg:col-span-3">
        <div class="intro-y flex h-10 items-center">
          <h2 class="mr-5 truncate text-lg font-medium">
            Weekly Reports
          </h2>
          <a class="ml-auto truncate text-primary" href="#">
            Show More
          </a>
        </div>
        <div class="intro-y box mt-5 p-5">
          <div class="mt-3">
            <div class="w-auto h-[213px]">
              <canvas id="report-pie-chart" class="chart"></canvas>
            </div>
          </div>
          <div class="mx-auto mt-8 w-52 sm:w-auto">
            <div class="flex items-center">
              <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
              <span class="truncate">17 - 30 Years old</span>
              <span class="ml-auto font-medium">62%</span>
            </div>
            <div class="mt-4 flex items-center">
              <div class="mr-3 h-2 w-2 rounded-full bg-pending"></div>
              <span class="truncate">31 - 50 Years old</span>
              <span class="ml-auto font-medium">33%</span>
            </div>
            <div class="mt-4 flex items-center">
              <div class="mr-3 h-2 w-2 rounded-full bg-warning"></div>
              <span class="truncate">&gt;= 50 Years old</span>
              <span class="ml-auto font-medium">10%</span>
            </div>
          </div>
        </div>
      </div>
      <!-- END:  Weekly Reports -->
      <!-- BEGIN: WORK Report -->
      <div class="col-span-12 mt-8 sm:col-span-6 lg:col-span-3">
        <div class="intro-y flex h-10 items-center">
          <h2 class="mr-5 truncate text-lg font-medium">
            WORK Report
          </h2>
          <a class="ml-auto truncate text-primary" href="#">
            Show More
          </a>
        </div>
        <div class="intro-y box mt-5 p-5">
          <div class="mt-3">
            <div class="w-auto h-[213px]">
              <canvas id="report-donut-chart" class="chart"></canvas>
            </div>
          </div>
          <div class="mx-auto mt-8 w-52 sm:w-auto">
            <div class="flex items-center">
              <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
              <span class="truncate">17 - 30 Years old</span>
              <span class="ml-auto font-medium">62%</span>
            </div>
            <div class="mt-4 flex items-center">
              <div class="mr-3 h-2 w-2 rounded-full bg-pending"></div>
              <span class="truncate">31 - 50 Years old</span>
              <span class="ml-auto font-medium">33%</span>
            </div>
            <div class="mt-4 flex items-center">
              <div class="mr-3 h-2 w-2 rounded-full bg-warning"></div>
              <span class="truncate">&gt;= 50 Years old</span>
              <span class="ml-auto font-medium">10%</span>
            </div>
          </div>
        </div>
      </div>
      <!-- END: WORK Report -->


      <!-- BEGIN: Official Store -->
      <div class="col-span-12 mt-6 xl:col-span-8">
        <div class="intro-y block h-10 items-center sm:flex">
          <h2 class="mr-5 truncate text-lg font-medium">
            Official Store
          </h2>
          <div class="relative mt-3 text-slate-500 sm:ml-auto sm:mt-0">
            <i data-tw-merge="" data-lucide="map-pin"
              class="stroke-1.5 absolute inset-y-0 left-0 z-10 my-auto ml-3 h-4 w-4"></i>
            <input data-tw-merge="" type="text" placeholder="Filter by city"
              class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 !box pl-10 sm:w-56" />
          </div>
        </div>
        <div class="intro-y box mt-12 p-5 sm:mt-5">
          <div>
            250 Official stores in 21 countries, click the marker to
            see location details.
          </div>
          <div data-lat="-6.2425342" data-long="106.8626478" data-sources=""
            class="leaflet z-0 [&_.leaflet-tile-pane]:contrast-105 [&_.leaflet-tile-pane]:grayscale [&_.leaflet-tile-pane]:dark:contrast-[.8] [&_.leaflet-tile-pane]:dark:invert mt-5 h-[310px] rounded-md bg-slate-200">
          </div>
        </div>
      </div>
      <!-- END: Official Store -->
      <!-- BEGIN: Weekly Best Sellers -->
      <div class="col-span-12 mt-6 xl:col-span-4">
        <div class="intro-y flex h-10 items-center">
          <h2 class="mr-5 truncate text-lg font-medium">
            Updates
          </h2>
        </div>
        <div class="mt-5">
          <div class="intro-y">
            <div class="box zoom-in mb-3 flex items-center px-4 py-4">
              <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-md">
                <img src="images/fakers/profile-4.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
              </div>
              <div class="ml-4 mr-auto">
                <div class="font-medium">Denzel Washington</div>
                <div class="mt-0.5 text-xs text-slate-500">
                  1 September 2021
                </div>
              </div>
              <div class="cursor-pointer rounded-full bg-success px-2 py-1 text-xs font-medium text-white">
                137 Sales
              </div>
            </div>
          </div>
          <div class="intro-y">
            <div class="box zoom-in mb-3 flex items-center px-4 py-4">
              <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-md">
                <img src="images/fakers/profile-4.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
              </div>
              <div class="ml-4 mr-auto">
                <div class="font-medium">Russell Crowe</div>
                <div class="mt-0.5 text-xs text-slate-500">
                  20 March 2022
                </div>
              </div>
              <div class="cursor-pointer rounded-full bg-success px-2 py-1 text-xs font-medium text-white">
                137 Sales
              </div>
            </div>
          </div>
          <div class="intro-y">
            <div class="box zoom-in mb-3 flex items-center px-4 py-4">
              <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-md">
                <img src="images/fakers/profile-9.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
              </div>
              <div class="ml-4 mr-auto">
                <div class="font-medium">Robert De Niro</div>
                <div class="mt-0.5 text-xs text-slate-500">
                  19 April 2021
                </div>
              </div>
              <div class="cursor-pointer rounded-full bg-success px-2 py-1 text-xs font-medium text-white">
                137 Sales
              </div>
            </div>
          </div>
          <div class="intro-y">
            <div class="box zoom-in mb-3 flex items-center px-4 py-4">
              <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-md">
                <img src="images/fakers/profile-2.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
              </div>
              <div class="ml-4 mr-auto">
                <div class="font-medium">Al Pacino</div>
                <div class="mt-0.5 text-xs text-slate-500">
                  5 April 2021
                </div>
              </div>
              <div class="cursor-pointer rounded-full bg-success px-2 py-1 text-xs font-medium text-white">
                137 Sales
              </div>
            </div>
          </div>
          <a class="intro-y block w-full rounded-md border border-dotted border-slate-400 py-4 text-center text-slate-500 dark:border-darkmode-300"
            href="#">
            View More
          </a>
        </div>
      </div>
      <!-- END: Weekly Best Sellers -->



      <!-- BEGIN: General Report -->
      <div class="col-span-12 mt-8 grid grid-cols-12 gap-6">
        <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
          <div class="box zoom-in p-5">
            <div class="flex items-center">
              <div class="w-2/4 flex-none">
                <div class="truncate text-lg font-medium">
                  Activity
                </div>
                <div class="mt-1 text-slate-500">Today</div>
              </div>
              <div class="relative ml-auto flex-none">
                <div class="w-[90px] h-[90px]">
                  <canvas class="chart report-donut-chart-1"></canvas>
                </div>
                <div class="absolute left-0 top-0 flex h-full w-full items-center justify-center font-medium">
                  20%
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
          <div class="box zoom-in p-5">
            <div class="flex">
              <div class="mr-3 truncate text-lg font-medium">
                Social Media
              </div>
              <div
                class="ml-auto flex cursor-pointer items-center truncate rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-500 dark:bg-darkmode-400">
                320 Followers
              </div>
            </div>
            <div class="mt-1">
              <div class="w-auto h-[58px]">
                <canvas class="chart simple-line-chart-1 -ml-1"></canvas>
              </div>
            </div>
          </div>
        </div>
        <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
          <div class="box zoom-in p-5">
            <div class="flex items-center">
              <div class="w-2/4 flex-none">
                <div class="truncate text-lg font-medium">
                  New Projects
                </div>
                <div class="mt-1 text-slate-500">1450 Products</div>
              </div>
              <div class="relative ml-auto flex-none">
                <div class="w-[90px] h-[90px]">
                  <canvas class="chart report-donut-chart-1"></canvas>
                </div>
                <div class="absolute left-0 top-0 flex h-full w-full items-center justify-center font-medium">
                  45%
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
          <div class="box zoom-in p-5">
            <div class="flex">
              <div class="mr-3 truncate text-lg font-medium">
                Posted Ads
              </div>
              <div
                class="ml-auto flex cursor-pointer items-center truncate rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-500 dark:bg-darkmode-400">
                180 Campaign
              </div>
            </div>
            <div class="mt-1">
              <div class="w-auto h-[58px]">
                <canvas class="chart simple-line-chart-1 -ml-1"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- END: General Report -->
    </div>
  </div>
  <div class="col-span-12 2xl:col-span-3">
    <div class="-mb-10 pb-10 2xl:border-l">
      <div class="grid grid-cols-12 gap-x-6 gap-y-6 2xl:gap-x-0 2xl:pl-6">
        <!-- BEGIN: Transactions -->
        <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 2xl:col-span-12 2xl:mt-8">
          <div class="intro-x flex h-10 items-center">
            <h2 class="mr-5 truncate text-lg font-medium">
              Transactions
            </h2>
          </div>
          <div class="mt-5">
            <div class="intro-x">
              <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-4.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
                <div class="ml-4 mr-auto">
                  <div class="font-medium">Denzel Washington</div>
                  <div class="mt-0.5 text-xs text-slate-500">
                    1 September 2021
                  </div>
                </div>
                <div class="text-success">+$33</div>
              </div>
            </div>
            <div class="intro-x">
              <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-4.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
                <div class="ml-4 mr-auto">
                  <div class="font-medium">Russell Crowe</div>
                  <div class="mt-0.5 text-xs text-slate-500">
                    20 March 2022
                  </div>
                </div>
                <div class="text-success">+$59</div>
              </div>
            </div>
            <div class="intro-x">
              <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-9.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
                <div class="ml-4 mr-auto">
                  <div class="font-medium">Robert De Niro</div>
                  <div class="mt-0.5 text-xs text-slate-500">
                    19 April 2021
                  </div>
                </div>
                <div class="text-success">+$76</div>
              </div>
            </div>
            <div class="intro-x">
              <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-2.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
                <div class="ml-4 mr-auto">
                  <div class="font-medium">Al Pacino</div>
                  <div class="mt-0.5 text-xs text-slate-500">
                    5 April 2021
                  </div>
                </div>
                <div class="text-success">+$36</div>
              </div>
            </div>
            <div class="intro-x">
              <div class="box zoom-in mb-3 flex items-center px-5 py-3">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-7.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
                <div class="ml-4 mr-auto">
                  <div class="font-medium">Kevin Spacey</div>
                  <div class="mt-0.5 text-xs text-slate-500">
                    9 May 2021
                  </div>
                </div>
                <div class="text-success">+$24</div>
              </div>
            </div>
            <a class="intro-x block w-full rounded-md border border-dotted border-slate-400 py-3 text-center text-slate-500 dark:border-darkmode-300"
              href="#">
              View More
            </a>
          </div>
        </div>
        <!-- END: Transactions -->
        <!-- BEGIN: Recent Activities -->
        <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 2xl:col-span-12">
          <div class="intro-x flex h-10 items-center">
            <h2 class="mr-5 truncate text-lg font-medium">
              Recent Activities
            </h2>
            <a class="ml-auto truncate text-primary" href="#">
              Show More
            </a>
          </div>
          <div
            class="relative mt-5 before:absolute before:ml-5 before:mt-5 before:block before:h-[85%] before:w-px before:bg-slate-200 before:dark:bg-darkmode-400">
            <div class="intro-x relative mb-3 flex items-center">
              <div
                class="before:absolute before:ml-5 before:mt-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-2.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
              </div>
              <div class="box zoom-in ml-4 flex-1 px-5 py-3">
                <div class="flex items-center">
                  <div class="font-medium">John Travolta</div>
                  <div class="ml-auto text-xs text-slate-500">
                    07:00 PM
                  </div>
                </div>
                <div class="mt-1 text-slate-500">
                  Has joined the team
                </div>
              </div>
            </div>
            <div class="intro-x relative mb-3 flex items-center">
              <div
                class="before:absolute before:ml-5 before:mt-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-12.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
              </div>
              <div class="box zoom-in ml-4 flex-1 px-5 py-3">
                <div class="flex items-center">
                  <div class="font-medium">Sylvester Stallone</div>
                  <div class="ml-auto text-xs text-slate-500">
                    07:00 PM
                  </div>
                </div>
                <div class="text-slate-500">
                  <div class="mt-1">Added 3 new photos</div>
                  <div class="mt-2 flex">
                    <div data-placement="top" title="Nikon Z6"
                      class="tooltip cursor-pointer image-fit zoom-in mr-1 h-8 w-8">
                      <img class="rounded-md border border-white" src="images/fakers/profile-12.jpg"
                        alt="Midone - Tailwind Admin Dashboard Template" />
                    </div>
                    <div data-placement="top" title="Sony A7 III"
                      class="tooltip cursor-pointer image-fit zoom-in mr-1 h-8 w-8">
                      <img class="rounded-md border border-white" src="images/fakers/profile-9.jpg"
                        alt="Midone - Tailwind Admin Dashboard Template" />
                    </div>
                    <div data-placement="top" title="Nikon Z6"
                      class="tooltip cursor-pointer image-fit zoom-in mr-1 h-8 w-8">
                      <img class="rounded-md border border-white" src="images/fakers/profile-7.jpg"
                        alt="Midone - Tailwind Admin Dashboard Template" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="intro-x my-4 text-center text-xs text-slate-500">
              12 November
            </div>
            <div class="intro-x relative mb-3 flex items-center">
              <div
                class="before:absolute before:ml-5 before:mt-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-9.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
              </div>
              <div class="box zoom-in ml-4 flex-1 px-5 py-3">
                <div class="flex items-center">
                  <div class="font-medium">Angelina Jolie</div>
                  <div class="ml-auto text-xs text-slate-500">
                    07:00 PM
                  </div>
                </div>
                <div class="mt-1 text-slate-500">
                  Has changed
                  <a class="text-primary" href="#"> Nikon Z6 </a>
                  price and description
                </div>
              </div>
            </div>
            <div class="intro-x relative mb-3 flex items-center">
              <div
                class="before:absolute before:ml-5 before:mt-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
                <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
                  <img src="images/fakers/profile-10.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
                </div>
              </div>
              <div class="box zoom-in ml-4 flex-1 px-5 py-3">
                <div class="flex items-center">
                  <div class="font-medium">Russell Crowe</div>
                  <div class="ml-auto text-xs text-slate-500">
                    07:00 PM
                  </div>
                </div>
                <div class="mt-1 text-slate-500">
                  Has changed
                  <a class="text-primary" href="#"> Sony A7 III </a>
                  description
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- END: Recent Activities -->
        <!-- BEGIN: Important Notes -->
        <div
          class="col-span-12 mt-3 md:col-span-6 xl:col-span-12 xl:col-start-1 xl:row-start-1 2xl:col-start-auto 2xl:row-start-auto">
          <div class="intro-x flex h-10 items-center">
            <h2 class="mr-auto truncate text-lg font-medium">
              Important Notes
            </h2>
            <button data-tw-merge="" data-carousel="important-notes" data-target="prev"
              class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed tiny-slider-navigator mr-2 border-slate-300 px-2 text-slate-600 dark:text-slate-300">
              <i data-tw-merge="" data-lucide="chevron-left" class="stroke-1.5 h-4 w-4"></i>
            </button>
            <button data-tw-merge="" data-carousel="important-notes" data-target="next"
              class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed tiny-slider-navigator mr-2 border-slate-300 px-2 text-slate-600 dark:text-slate-300">
              <i data-tw-merge="" data-lucide="chevron-right" class="stroke-1.5 h-4 w-4"></i>
            </button>
          </div>
          <div class="intro-x mt-5">
            <div class="box zoom-in">
              <div data-config="" id="important-notes" class="tiny-slider">
                <div class="p-5">
                  <div class="truncate text-base font-medium">
                    Lorem Ipsum is simply dummy text
                  </div>
                  <div class="mt-1 text-slate-400">20 Hours ago</div>
                  <div class="mt-1 text-justify text-slate-500">
                    Lorem Ipsum is simply dummy text of the printing
                    and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the
                    1500s.
                  </div>
                  <div class="mt-5 flex font-medium">
                    <button data-tw-merge="" type="button"
                      class="transition duration-200 border shadow-sm inline-flex items-center justify-center rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 px-2 py-1">
                      View Notes
                    </button>
                    <button data-tw-merge="" type="button"
                      class="transition duration-200 border shadow-sm inline-flex items-center justify-center rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 ml-auto px-2 py-1">
                      Dismiss
                    </button>
                  </div>
                </div>
                <div class="p-5">
                  <div class="truncate text-base font-medium">
                    Lorem Ipsum is simply dummy text
                  </div>
                  <div class="mt-1 text-slate-400">20 Hours ago</div>
                  <div class="mt-1 text-justify text-slate-500">
                    Lorem Ipsum is simply dummy text of the printing
                    and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the
                    1500s.
                  </div>
                  <div class="mt-5 flex font-medium">
                    <button data-tw-merge="" type="button"
                      class="transition duration-200 border shadow-sm inline-flex items-center justify-center rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 px-2 py-1">
                      View Notes
                    </button>
                    <button data-tw-merge="" type="button"
                      class="transition duration-200 border shadow-sm inline-flex items-center justify-center rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 ml-auto px-2 py-1">
                      Dismiss
                    </button>
                  </div>
                </div>
                <div class="p-5">
                  <div class="truncate text-base font-medium">
                    Lorem Ipsum is simply dummy text
                  </div>
                  <div class="mt-1 text-slate-400">20 Hours ago</div>
                  <div class="mt-1 text-justify text-slate-500">
                    Lorem Ipsum is simply dummy text of the printing
                    and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the
                    1500s.
                  </div>
                  <div class="mt-5 flex font-medium">
                    <button data-tw-merge="" type="button"
                      class="transition duration-200 border shadow-sm inline-flex items-center justify-center rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 [&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100 [&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80 px-2 py-1">
                      View Notes
                    </button>
                    <button data-tw-merge="" type="button"
                      class="transition duration-200 border shadow-sm inline-flex items-center justify-center rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 ml-auto px-2 py-1">
                      Dismiss
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- END: Important Notes -->

      </div>
    </div>
  </div>
</div>
<!-- END: General Report -->

<!-- Rest of your dashboard content -->
</div>
</div>
</div>
{% endblock %}