<app-page-header
  title="Personal Dashboard"
  title1="Personal Dashboard"
  activeitem="Home"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 xxl:col-span-9">
    <div class="grid grid-cols-12 gap-x-5">
      <div class="col-span-12 xl:col-span-4">
        <div class="box">
          <div class="box-body">
            <div class="flex justify-between">
              <div class="flex-1">
                <h6 class="mb-2 text-base font-medium">Total Balance</h6>
                <h5
                  class="mb-1 text-3xl text-gray-800 dark:text-white font-medium"
                >
                  $75,234
                  <span
                    class="text-xs text-gray-500 dark:text-white/70 font-normal"
                    >/ month</span
                  >
                </h5>
                <span class="text-gray-500 dark:text-white/70"
                  ><i class="ti ti-trending-up text-success"></i> +5% than last
                  month</span
                >
              </div>
              <div class="ltr:ml-auto rtl:mr-auto">
                <span class="avatar rounded-sm bg-primary text-white p-3"
                  ><i class="ri-wallet-2-line text-2xl leading-none"></i
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-4">
        <div class="box">
          <div class="box-body">
            <div class="flex justify-between">
              <div class="flex-1">
                <h6 class="mb-2 text-base font-medium">Total Income</h6>
                <h5
                  class="mb-1 text-3xl text-gray-800 dark:text-white font-medium"
                >
                  $45,234
                  <span
                    class="text-xs text-gray-500 dark:text-white/70 font-normal"
                    >/ month</span
                  >
                </h5>
                <span class="text-gray-500 dark:text-white/70"
                  ><i class="ti ti-trending-up text-success"></i> +5% than last
                  month</span
                >
              </div>
              <div class="ltr:ml-auto rtl:mr-auto">
                <span class="avatar rounded-sm bg-primary text-white p-3"
                  ><i class="ri-currency-line text-2xl leading-none"></i
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-4">
        <div class="box">
          <div class="box-body">
            <div class="flex justify-between">
              <div class="flex-1">
                <h6 class="mb-2 text-base font-medium">Total Expenses</h6>
                <h5
                  class="mb-1 text-3xl text-gray-800 dark:text-white font-medium"
                >
                  $35,234
                  <span
                    class="text-xs text-gray-500 dark:text-white/70 font-normal"
                    >/ month</span
                  >
                </h5>
                <span class="text-gray-500 dark:text-white/70"
                  ><i class="ti ti-trending-down text-danger"></i> -10% than
                  last month</span
                >
              </div>
              <div class="ltr:ml-auto rtl:mr-auto">
                <span class="avatar rounded-sm bg-primary text-white p-3"
                  ><i class="ri-numbers-line text-2xl leading-none"></i
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-8">
        <div class="box">
          <div class="box-header">
            <div class="sm:flex justify-between">
              <h5 class="box-title my-auto">Statistics</h5>
              <div class="inline-flex rounded-md shadow-sm">
                <button
                  type="button"
                  class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-primary"
                >
                  1D
                </button>
                <button
                  type="button"
                  class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
                >
                  1W
                </button>
                <button
                  type="button"
                  class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
                >
                  1M
                </button>
                <button
                  type="button"
                  class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
                >
                  3M
                </button>
                <button
                  type="button"
                  class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
                >
                  6M
                </button>
                <button
                  type="button"
                  class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
                >
                  1Y
                </button>
              </div>
            </div>
          </div>
          <div class="box-body">
            <div id="statistics">
              <apx-chart
                [series]="chartOptions.series"
                [chart]="chartOptions.chart"
                [xaxis]="chartOptions.xaxis"
                [stroke]="chartOptions.stroke"
                [tooltip]="chartOptions.tooltip"
                [dataLabels]="chartOptions.dataLabels"
                [legend]="chartOptions.legend"
                [markers]="chartOptions.markers"
                [grid]="chartOptions.grid"
                [yaxis]="chartOptions.yaxis"
                [plotOptions]="chartOptions.plotOptions"
              ></apx-chart>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-4">
        <div class="box">
          <div class="box-header">
            <div class="flex">
              <h5 class="box-title my-auto">Contacts</h5>
              <div
                class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
              >
                <button
                  type="button"
                  aria-label="button"
                  class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
                >
                  <i class="text-sm leading-none ti ti-dots-vertical"></i>
                </button>
                <div class="hs-dropdown-menu ti-dropdown-menu">
                  <a class="ti-dropdown-item" href="javascript:void(0)"
                    >Action</a
                  >
                  <a class="ti-dropdown-item" href="javascript:void(0)"
                    >Another Action</a
                  >
                  <a class="ti-dropdown-item" href="javascript:void(0)"
                    >Something else here</a
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="box-body">
            <ul class="flex flex-col">
              <li
                class="px-0 pt-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/2.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Socrates Itumay
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(72)-86976972
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70"
                  >
                    <i class="ri-heart-line text-base hover:text-danger"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
              <li
                class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/3.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Ryan Gercia
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(12)-05147532
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-danger"
                  >
                    <i class="ri-heart-line text-base"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
              <li
                class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/10.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Prax Bhav
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(12)-05147532
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-danger"
                  >
                    <i class="ri-heart-line text-base"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
              <li
                class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/12.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Jackie Chen
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(12)-26556658
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70"
                  >
                    <i class="ri-heart-line text-base hover:text-danger"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
              <li
                class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/5.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Samantha Sam
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(12)-26556658
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70"
                  >
                    <i class="ri-heart-line text-base hover:text-danger"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
              <li
                class="px-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/15.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Robert Lewis
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(12)-26556658
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70"
                  >
                    <i class="ri-heart-line text-base hover:text-danger"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
              <li
                class="px-0 pb-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
              >
                <div class="">
                  <a
                    routerLink="/profile/home"
                    class="flex items-center space-x-3 rtl:space-x-reverse"
                  >
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="./assets/img/users/3.jpg"
                      alt="Image Description"
                    />
                    <div class="flex">
                      <div class="block my-auto">
                        <p
                          class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto dark:text-white dark:hover:text-gray-200"
                        >
                          Ryan Gercia
                        </p>
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
                          +(12)-05147532
                        </p>
                      </div>
                    </div>
                  </a>
                </div>
                <div
                  class="ltr:ml-auto rtl:mr-auto space-x-2 rtl:space-x-reverse"
                >
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-danger"
                  >
                    <i class="ri-heart-line text-base"></i>
                  </a>
                  <a
                    aria-label="anchor"
                    routerLink="/page/contacts"
                    class="text-gray-500 dark:text-white/70 rtl:rotate-180 inline-flex"
                  >
                    <i class="ri-arrow-right-s-line text-base"></i>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xxl:col-span-3">
    <div class="box text-white overflow-hidden">
      <div
        class="block absolute w-full h-full before:bg-primary/70 before:absolute before:w-full before:h-full"
      >
        <img
          src="./assets/img/png-images/16.png"
          alt=""
          class="w-full xxl:h-full sm:h-auto h-full"
        />
      </div>
      <div class="box-body relative">
        <div class="flex justify-between mb-4">
          <div class="ltr:mr-1 rtl:ml-1">
            <h6 class="text-base font-medium">Primary Account</h6>
            <a href="javascript:void(0);" class="text-xs text-white/70"
              >Change<i
                class="ri-share-forward-line text-xs ltr:ml-1 rtl:mr-1"
              ></i
            ></a>
          </div>
          <div class="min-w-fit">
            <div class="avatar bg-white/20 text-white rounded-sm p-3 ring-0">
              <i class="ri-paypal-line text-2xl leading-none"></i>
            </div>
          </div>
        </div>
        <h5 class="text-3xl text-white font-semibold">$1,29,389.00</h5>
        <p class="mb-1 text-sm text-white/70">Sarah Jahn SP</p>
        <div class="flex justify-between text-white/70">
          <span>XXXX XXXX XXXX 1116</span>
          <span>12/30</span>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <div class="flex justify-between">
          <h5 class="box-title my-auto">On Going Tasks</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              Today <i class="ti ti-chevron-down"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu hidden">
              <a class="ti-dropdown-item" href="javascript:void(0)">Today</a>
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >This Week</a
              >
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >This Month</a
              >
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >This Year</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <ul class="list-unstyled mb-0">
          <li class="ti-list-group mb-6 border-0 p-0 w-full">
            <div class="flex w-full">
              <div class="ltr:mr-3 rtl:ml-3">
                <div class="flex">
                  <input
                    type="checkbox"
                    class="ti-form-checkbox mt-0.5"
                    id="hs-default-checkbox"
                  />
                </div>
              </div>
              <div class="flex-1">
                <div class="flex items-center justify-between mb-1">
                  <h5
                    class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
                  >
                    Designing a landing page
                  </h5>
                  <div
                    class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
                  >
                    <button
                      type="button"
                      aria-label="button"
                      class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
                    >
                      <i class="text-sm leading-none ti ti-dots-vertical"></i>
                    </button>
                    <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Another Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Something Else Here</a
                      >
                    </div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex -space-x-2 rtl:space-x-reverse">
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/8.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/4.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/6.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/7.jpg"
                      alt="Image Description"
                    />
                  </div>
                  <span class="text-gray-500 dark:text-white/70 flex text-xs"
                    ><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
                    >10-04-23</span
                  >
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group mb-6 border-0 p-0 w-full">
            <div class="flex w-full">
              <div class="ltr:mr-3 rtl:ml-3">
                <div class="flex">
                  <input
                    type="checkbox"
                    class="ti-form-checkbox mt-0.5"
                    id="hs-default-checkbox2"
                  />
                </div>
              </div>
              <div class="flex-1">
                <div class="flex items-center justify-between mb-1">
                  <h5
                    class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
                  >
                    Fixing Responsive Issues
                  </h5>
                  <div
                    class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
                  >
                    <button
                      type="button"
                      aria-label="button"
                      class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
                    >
                      <i class="text-sm leading-none ti ti-dots-vertical"></i>
                    </button>
                    <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Another Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Something Else Here</a
                      >
                    </div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex -space-x-2 rtl:space-x-reverse">
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/8.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/4.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/6.jpg"
                      alt="Image Description"
                    />
                    <span
                      class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10"
                    >
                      <span
                        class="font-medium text-gray-500 leading-none dark:text-white/70"
                        >9+</span
                      >
                    </span>
                  </div>
                  <span class="text-gray-500 dark:text-white/70 flex text-xs"
                    ><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
                    >10-04-23</span
                  >
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group mb-6 border-0 p-0 w-full">
            <div class="flex w-full">
              <div class="ltr:mr-3 rtl:ml-3">
                <div class="flex">
                  <input
                    type="checkbox"
                    class="ti-form-checkbox mt-0.5"
                    id="hs-default-checkbox3"
                  />
                </div>
              </div>
              <div class="flex-1">
                <div class="flex items-center justify-between mb-1">
                  <h5
                    class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
                  >
                    Fixing Bugs
                  </h5>
                  <div
                    class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
                  >
                    <button
                      type="button"
                      aria-label="button"
                      class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
                    >
                      <i class="text-sm leading-none ti ti-dots-vertical"></i>
                    </button>
                    <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Another Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Something Else Here</a
                      >
                    </div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex -space-x-2 rtl:space-x-reverse">
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/8.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/4.jpg"
                      alt="Image Description"
                    />
                  </div>
                  <span class="text-gray-500 dark:text-white/70 flex text-xs"
                    ><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
                    >10-04-23</span
                  >
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group mb-6 border-0 p-0 w-full">
            <div class="flex w-full">
              <div class="ltr:mr-3 rtl:ml-3">
                <div class="flex">
                  <input
                    type="checkbox"
                    class="ti-form-checkbox mt-0.5"
                    id="hs-default-checkbox4"
                  />
                </div>
              </div>
              <div class="flex-1">
                <div class="flex items-center justify-between mb-1">
                  <h5
                    class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
                  >
                    Fixing Javascript Issues
                  </h5>
                  <div
                    class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
                  >
                    <button
                      type="button"
                      aria-label="button"
                      class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
                    >
                      <i class="text-sm leading-none ti ti-dots-vertical"></i>
                    </button>
                    <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Another Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Something Else Here</a
                      >
                    </div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex -space-x-2 rtl:space-x-reverse">
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/8.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/4.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/21.jpg"
                      alt="Image Description"
                    />
                  </div>
                  <span class="text-gray-500 dark:text-white/70 flex text-xs"
                    ><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
                    >10-04-23</span
                  >
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group mb-0 border-0 p-0 w-full">
            <div class="flex w-full">
              <div class="ltr:mr-3 rtl:ml-3">
                <div class="flex">
                  <input
                    type="checkbox"
                    class="ti-form-checkbox mt-0.5"
                    id="hs-default-checkbox5"
                  />
                </div>
              </div>
              <div class="flex-1">
                <div class="flex items-center justify-between mb-1">
                  <h5
                    class="mb-1 text-sm font-semibold text-gray-800 dark:text-white"
                  >
                    Adding New Pages
                  </h5>
                  <div
                    class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
                  >
                    <button
                      type="button"
                      aria-label="button"
                      class="shadow-none hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-0 bg-transparent border-0 text-gray-500 dark:bg-transparent"
                    >
                      <i class="text-sm leading-none ti ti-dots-vertical"></i>
                    </button>
                    <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Another Action</a
                      >
                      <a class="ti-dropdown-item" href="javascript:void(0)"
                        >Something Else Here</a
                      >
                    </div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex -space-x-2 rtl:space-x-reverse">
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/8.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/4.jpg"
                      alt="Image Description"
                    />
                    <img
                      class="inline-block avatar w-6 h-6 rounded-full"
                      src="./assets/img/users/21.jpg"
                      alt="Image Description"
                    />
                  </div>
                  <span class="text-gray-500 dark:text-white/70 flex text-xs"
                    ><i class="ri-time-line ltr:mr-1 rtl:ml-1 my-auto"></i
                    >10-04-23</span
                  >
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->

<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <div class="flex justify-between">
          <h5 class="box-title my-auto">Recent Messages</h5>
          <button
            type="button"
            class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
          >
            View All
          </button>
        </div>
      </div>
      <div class="box-body">
        <ul class="">
          <li
            class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
          >
            <div class="flex items-start w-full">
              <a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                <img
                  src="./assets/img/users/17.jpg"
                  alt="img"
                  class="rounded-full"
                />
              </a>
              <div class="flex justify-between relative w-full">
                <a
                  aria-label="anchor"
                  routerLink="/mail/chat"
                  class="absolute h-full w-full inset-0"
                ></a>
                <div class="">
                  <h5
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                  >
                    Elon Isk
                  </h5>
                  <span class="text-xs text-gray-500 dark:text-white/70"
                    >Hello there! How are you doing? Call me when...</span
                  >
                </div>
                <div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-1">
                    2 min
                  </p>
                  <span
                    class="relative inline-flex rounded-full h-5 w-5 bg-primary text-white justify-center items-center"
                    >2</span
                  >
                </div>
              </div>
            </div>
          </li>
          <li
            class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
          >
            <div class="flex items-start w-full">
              <a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                <img
                  src="./assets/img/users/2.jpg"
                  alt="img"
                  class="rounded-full"
                />
              </a>
              <div class="flex justify-between relative w-full">
                <a
                  aria-label="anchor"
                  routerLink="/mail/chat"
                  class="absolute h-full w-full inset-0"
                ></a>
                <div class="">
                  <h5
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                  >
                    Shakira Sen
                  </h5>
                  <span class="text-xs text-gray-500 dark:text-white/70"
                    >I would like to discuss about that assets...</span
                  >
                </div>
                <div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-1">
                    09:43
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
          >
            <div class="flex items-start w-full">
              <a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                <img
                  src="./assets/img/users/21.jpg"
                  alt="img"
                  class="rounded-full"
                />
              </a>
              <div class="flex justify-between relative w-full">
                <a
                  aria-label="anchor"
                  routerLink="/mail/chat"
                  class="absolute h-full w-full inset-0"
                ></a>
                <div class="">
                  <h5
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                  >
                    Sebastian
                  </h5>
                  <span class="text-xs text-gray-500 dark:text-white/70"
                    >Shall we go to the cafe at downtown...</span
                  >
                </div>
                <div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-1">
                    yesterday
                  </p>
                  <span
                    class="relative inline-flex rounded-full h-5 w-5 bg-primary text-white justify-center items-center"
                    >2</span
                  >
                </div>
              </div>
            </div>
          </li>
          <li
            class="p-0 mb-5 ti-list-group border-0 text-gray-800 dark:text-white w-full"
          >
            <div class="flex items-start w-full">
              <a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                <img
                  src="./assets/img/users/11.jpg"
                  alt="img"
                  class="rounded-full"
                />
              </a>
              <div class="flex justify-between relative w-full">
                <a
                  aria-label="anchor"
                  routerLink="/mail/chat"
                  class="absolute h-full w-full inset-0"
                ></a>
                <div class="">
                  <h5
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                  >
                    Charlie Davieson
                  </h5>
                  <span class="text-xs text-gray-500 dark:text-white/70"
                    >Lorem ipsum dolor sit amet, consectetur</span
                  >
                </div>
                <div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-1">
                    yesterday
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white w-full"
          >
            <div class="flex items-start w-full">
              <a routerLink="/mail/chat" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                <img
                  src="./assets/img/users/3.jpg"
                  alt="img"
                  class="rounded-full"
                />
              </a>
              <div class="flex justify-between relative w-full">
                <a
                  aria-label="anchor"
                  routerLink="/mail/chat"
                  class="absolute h-full w-full inset-0"
                ></a>
                <div class="">
                  <h5
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                  >
                    Selena Deoyl
                  </h5>
                  <span class="text-xs text-gray-500 dark:text-white/70"
                    >Phasellus vehicula at enim a pulvinar</span
                  >
                </div>
                <div class="min-w-fit ltr:ml-2 rtl:mr-2 text-end">
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-1">
                    yesterday
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Pending Bills</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              aria-label="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              <i class="text-sm leading-none ti ti-dots-vertical"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu">
              <a class="ti-dropdown-item" href="javascript:void(0)">Action</a>
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >Another Action</a
              >
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >Something else here</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <ul class="flex flex-col">
          <li
            class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white pb-1 rounded-sm mb-3"
          >
            <a href="javascript:void(0);">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                  <div>
                    <span
                      class="avatar avatar-sm bg-primary/20 text-primary rounded-sm p-2.5"
                    >
                      <i class="ri ri-bill-line leading-none text-xl"></i>
                    </span>
                  </div>
                  <div class="ltr:ml-3 rtl:mr-3">
                    <h3 class="text-sm font-semibold">Bills</h3>
                    <p class="text-xs text-gray-500 dark:text-white/70">$250</p>
                  </div>
                </div>
                <div class="space-x-2">
                  <i
                    class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
                  ></i>
                </div>
              </div>
            </a>
          </li>
          <li
            class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
          >
            <a href="javascript:void(0);">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                  <div>
                    <span
                      class="avatar avatar-sm bg-secondary/20 text-secondary rounded-sm p-2.5"
                    >
                      <i
                        class="ri ri-shopping-basket-line leading-none text-xl"
                      ></i>
                    </span>
                  </div>
                  <div class="ltr:ml-3 rtl:mr-3">
                    <h3 class="text-sm font-semibold">Shopping</h3>
                    <p class="text-xs text-gray-500 dark:text-white/70">$236</p>
                  </div>
                </div>
                <div class="space-x-2">
                  <i
                    class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
                  ></i>
                </div>
              </div>
            </a>
          </li>
          <li
            class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
          >
            <a href="javascript:void(0);">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                  <div>
                    <span
                      class="avatar avatar-sm bg-warning/20 text-warning rounded-sm p-2.5"
                    >
                      <i class="ri ri-compass-line leading-none text-xl"></i>
                    </span>
                  </div>
                  <div class="ltr:ml-3 rtl:mr-3">
                    <h3 class="text-sm font-semibold">Travel</h3>
                    <p class="text-xs text-gray-500 dark:text-white/70">$236</p>
                  </div>
                </div>
                <div class="space-x-2">
                  <i
                    class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
                  ></i>
                </div>
              </div>
            </a>
          </li>
          <li
            class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
          >
            <a href="javascript:void(0);">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                  <div>
                    <span
                      class="avatar avatar-sm bg-info/20 text-info rounded-sm p-2.5"
                    >
                      <i class="ri ri-cake-3-line leading-none text-xl"></i>
                    </span>
                  </div>
                  <div class="ltr:ml-3 rtl:mr-3">
                    <h3 class="text-sm font-semibold">Food</h3>
                    <p class="text-xs text-gray-500 dark:text-white/70">
                      $2635
                    </p>
                  </div>
                </div>
                <div class="space-x-2">
                  <i
                    class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
                  ></i>
                </div>
              </div>
            </a>
          </li>
          <li
            class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white py-1 rounded-sm mb-3"
          >
            <a href="javascript:void(0);">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                  <div>
                    <span
                      class="avatar avatar-sm bg-danger/20 text-danger rounded-sm p-2.5"
                    >
                      <i class="ri ri-bit-coin-line leading-none text-xl"></i>
                    </span>
                  </div>
                  <div class="ltr:ml-3 rtl:mr-3">
                    <h3 class="text-sm font-semibold">Stocks</h3>
                    <p class="text-xs text-gray-500 dark:text-white/70">
                      $2663
                    </p>
                  </div>
                </div>
                <div class="space-x-2">
                  <i
                    class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
                  ></i>
                </div>
              </div>
            </a>
          </li>
          <li
            class="flex flex-col gap-x-3.5 bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white pt-1 rounded-sm"
          >
            <a href="javascript:void(0);">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                  <div>
                    <span
                      class="avatar avatar-sm bg-success/20 text-success rounded-sm p-2.5"
                    >
                      <i class="ri ri-more-line leading-none text-xl"></i>
                    </span>
                  </div>
                  <div class="ltr:ml-3 rtl:mr-3">
                    <h3 class="text-sm font-semibold">Others</h3>
                    <p class="text-xs text-gray-500 dark:text-white/70">
                      $3656
                    </p>
                  </div>
                </div>
                <div class="space-x-2">
                  <i
                    class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg rtl:rotate-180"
                  ></i>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header justify-between flex">
        <div class="box-title my-auto">Upcoming Events</div>
        <div>
          <button
            type="button"
            class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
          >
            View All
          </button>
        </div>
      </div>
      <div class="box-body overflow-x-auto">
        <ul class="list-unstyled timeline-widget mb-0">
          <li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
            <div class="flex w-full">
              <div class="ltr:mr-12 rtl:ml-12 text-center">
                <span class="block text-sm font-semibold">02</span>
                <span class="block text-xs text-gray-500 dark:text-white/70"
                  >Mon</span
                >
              </div>
              <div
                class="flex flex-wrap flex-auto items-center justify-between"
              >
                <div>
                  <a href="javascript:void(0);">
                    <p
                      class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
                    >
                      You have an announcement - Ipsum Est Diam Eirmod
                    </p>
                    <p
                      class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
                    >
                      10:00AM<span
                        class="badge bg-primary/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-primary rounded-sm"
                        >Announcement</span
                      >
                    </p>
                  </a>
                </div>
                <div class="hs-dropdown ti-dropdown">
                  <a
                    aria-label="anchor"
                    href="javascript:void(0);"
                    class="text-lg leading-none text-gray-500"
                  >
                    <i class="ri-more-2-line"></i>
                  </a>
                  <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Another action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Something else here
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
            <div class="flex w-full">
              <div class="ltr:mr-12 rtl:ml-12 text-center">
                <span class="block text-sm font-semibold">15</span>
                <span class="block text-xs text-gray-500 dark:text-white/70"
                  >Sun</span
                >
              </div>
              <div
                class="flex flex-wrap flex-auto items-center justify-between"
              >
                <div>
                  <a href="javascript:void(0);">
                    <p
                      class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
                    >
                      National holiday - Vero Jayanti
                    </p>
                    <p
                      class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
                    >
                      <span
                        class="badge bg-warning/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-warning rounded-sm"
                        >Holiday</span
                      >
                    </p>
                  </a>
                </div>
                <div class="hs-dropdown ti-dropdown">
                  <a
                    aria-label="anchor"
                    href="javascript:void(0);"
                    class="text-lg leading-none text-gray-500"
                  >
                    <i class="ri-more-2-line"></i>
                  </a>
                  <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Another action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Something else here
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
            <div class="flex w-full">
              <div class="ltr:mr-12 rtl:ml-12 text-center">
                <span class="block text-sm font-semibold">23</span>
                <span class="block text-xs text-gray-500 dark:text-white/70"
                  >Mon</span
                >
              </div>
              <div
                class="flex flex-wrap flex-auto items-center justify-between"
              >
                <div>
                  <a href="javascript:void(0);">
                    <p
                      class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
                    >
                      John pup birthday - Team Member
                    </p>
                    <p
                      class="mb-4 text-xs leading-none text-gray-500 dark:text-white/70"
                    >
                      09:00AM<span class="badge bg-success/10 ltr:ml-2 rtl:mr-2"
                        >Birthday</span
                      >
                    </p>
                    <p
                      class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
                    >
                      Amet sed no dolor kasd - Et Dolores Tempor Erat
                    </p>
                    <p
                      class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
                    >
                      04:00PM<span
                        class="badge bg-primary/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-primary rounded-sm"
                        >Announcement</span
                      >
                    </p>
                  </a>
                </div>
                <div class="hs-dropdown ti-dropdown">
                  <a
                    aria-label="anchor"
                    href="javascript:void(0);"
                    class="text-lg leading-none text-gray-500"
                  >
                    <i class="ri-more-2-line"></i>
                  </a>
                  <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Another action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Something else here
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="ti-list-group border-0 p-0 w-full timeline-widget-list">
            <div class="flex w-full">
              <div class="ltr:mr-12 rtl:ml-12 text-center">
                <span class="block text-sm font-semibold">31</span>
                <span class="block text-xs text-gray-500 dark:text-white/70"
                  >Tue</span
                >
              </div>
              <div
                class="flex flex-wrap flex-auto items-center justify-between"
              >
                <div>
                  <a href="javascript:void(0);">
                    <p
                      class="mb-1 truncate timeline-widget-content text-sm text-wrap !max-w-[15rem]"
                    >
                      National Holiday - Dolore Ipsum
                    </p>
                    <p
                      class="mb-0 text-xs leading-none text-gray-500 dark:text-white/70"
                    >
                      <span
                        class="badge bg-warning/10 ltr:ml-2 rtl:mr-2 py-1 text-xs text-warning rounded-sm"
                        >Holiday</span
                      >
                    </p>
                  </a>
                </div>
                <div class="hs-dropdown ti-dropdown">
                  <a
                    aria-label="anchor"
                    href="javascript:void(0);"
                    class="text-lg leading-none text-gray-500"
                  >
                    <i class="ri-more-2-line"></i>
                  </a>
                  <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Another action
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                      Something else here
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-header justify-between flex">
        <div class="box-title my-auto">Quick Transfer</div>
        <div>
          <button
            type="button"
            class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
          >
            View All
          </button>
        </div>
      </div>
      <div class="box-body">
        <div class="lg:grid hidden grid-cols-5 mb-2">
          <a href="javascript:void(0);">
            <img
              class="avatar avatar-sm rounded-full"
              src="./assets/img/users/2.jpg"
              alt="Image Description"
            />
          </a>
          <a href="javascript:void(0);">
            <img
              class="avatar avatar-sm rounded-full"
              src="./assets/img/users/12.jpg"
              alt="Image Description"
            />
          </a>
          <a href="javascript:void(0);">
            <img
              class="avatar avatar-sm rounded-full"
              src="./assets/img/users/4.jpg"
              alt="Image Description"
            />
          </a>
          <a href="javascript:void(0);">
            <img
              class="avatar avatar-sm rounded-full"
              src="./assets/img/users/3.jpg"
              alt="Image Description"
            />
          </a>
          <a
            href="javascript:void(0);"
            aria-label="anchor"
            class="m-0 w-[2.375rem] h-[2.375rem] rounded-full ti-btn bg-gray-100 text-gray-500 hover:text-gray-600 hover:bg-gray-200 ring-offset-white focus:ring-gray-500 dark:bg-black/20 dark:hover:bg-black/30 dark:focus:ring-gray-600 dark:text-white/70 dark:focus:ring-offset-white/10"
          >
            <i class="ri-arrow-right-s-line rtl:rotate-180"></i>
          </a>
        </div>
        <div class="mb-2">
          <label for="input-label" class="ti-form-label">Send To</label>
          <input
            type="text"
            id="input-label"
            class="ti-form-input"
            placeholder="Account Number"
            value="2563658568556"
          />
        </div>
        <div class="mb-2">
          <label for="input-label2" class="ti-form-label">Enter Amount</label>
          <input
            type="number"
            id="input-label2"
            class="ti-form-input"
            placeholder="Enter Amount"
            value="2350"
          />
        </div>
        <div class="mb-2">
          <label for="input-label2" class="ti-form-label">Enter Notes</label>
          <textarea
            class="ti-form-input"
            rows="1"
            placeholder="Add some notes here"
          ></textarea>
        </div>
        <div class="flex justify-between">
          <a
            href="javascript:void(0);"
            class="mb-0 w-full ti-btn ti-btn-primary"
            >Send Money</a
          >
          <a href="javascript:void(0);" class="mb-0 w-full ti-btn ti-btn-danger"
            >Cancel</a
          >
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-2 -->

<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Recent Trasaction history</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              View All <i class="ti ti-chevron-down"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu hidden">
              <a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
              <a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
              <a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div
          class="table-bordered rounded-sm ti-custom-table-head overflow-auto"
        >
          <table class="ti-custom-table ti-custom-table-head whitespace-nowrap">
            <thead class="bg-gray-50 dark:bg-black/20">
              <tr class="">
                <th scope="col" class="dark:text-white/80">S.no</th>
                <th scope="col" class="dark:text-white/80">Recipient</th>
                <th scope="col" class="dark:text-white/80">Transaction Id</th>
                <th scope="col" class="dark:text-white/80">Date</th>
                <th scope="col" class="dark:text-white/80">Amount</th>
                <th scope="col" class="dark:text-white/80">Type</th>
                <th scope="col" class="dark:text-white/80">Status</th>
                <th scope="col" class="dark:text-white/80">Action</th>
              </tr>
            </thead>
            <tbody class="">
              <tr class="" *ngFor="let transaction of Transactions">
                <td>{{ transaction.id }}</td>
                <td>
                  <div class="flex space-x-3 rtl:space-x-reverse text-start">
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="{{ transaction.src }}"
                      alt="Image Description"
                    />
                    <div class="block my-auto truncate">
                      <p
                        class="block text-sm font-semibold my-auto text-gray-800 dark:text-white"
                      >
                        {{ transaction.name }}
                      </p>
                      <span
                        class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]"
                        >{{ transaction.mail }}</span
                      >
                    </div>
                  </div>
                </td>
                <td>{{ transaction.tranId }}</td>
                <td>{{ transaction.date }}</td>
                <td>{{ transaction.amount }}</td>
                <td>{{ transaction.type }}</td>
                <td>
                  <span
                    class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-{{
                      transaction.background
                    }}/10 text-{{ transaction.textcolor }}/80"
                    >{{ transaction.status }}</span
                  >
                </td>
                <td class="font-medium space-x-2 rtl:space-x-reverse">
                  <div class="hs-tooltip ti-main-tooltip">
                    <a
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary"
                    >
                      <i class="ti ti-eye"></i>
                      <span
                        class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700 hidden"
                        role="tooltip"
                        data-popper-placement="top"
                        style="
                          position: fixed;
                          inset: auto auto 0px 0px;
                          margin: 0px;
                          transform: translate(1686px, -243px);
                        "
                      >
                        View
                      </span>
                    </a>
                  </div>
                  <div class="hs-tooltip ti-main-tooltip">
                    <a
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
                      (click)="click(transaction.id)"
                    >
                      <i class="ti ti-trash"></i>
                      <span
                        class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
                        role="tooltip"
                      >
                        Delete
                      </span>
                    </a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="box-footer">
        <div class="flex items-center">
          <div class="">
            showing 5 Entries
            <i class="ri-arrow-right-line ml-2 font-semibold"></i>
          </div>
          <div class="ltr:ml-auto rtl:mr-auto">
            <nav
              class="flex justify-center items-center space-x-2 rtl:space-x-reverse"
            >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
                href="javascript:void(0);"
              >
                <span aria-hidden="true">Prev</span>
                <span class="sr-only">Previous</span>
              </a>
              <a
                class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                href="javascript:void(0);"
                aria-current="page"
                >1</a
              >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                href="javascript:void(0);"
                >2</a
              >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                href="javascript:void(0);"
                >3</a
              >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
                href="javascript:void(0);"
              >
                <span class="sr-only">Next</span>
                <span aria-hidden="true">Next</span>
              </a>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-3 -->