@extends('layouts.master')

@section('styles')

@endsection

@section('content')

                    <div class="content">

                        <!-- Start::main-content -->
                        <div class="main-content">

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Personal Dashboard</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                        Dashboards
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                        </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                        Personal Dashboard
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- 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-secondary 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-danger 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"></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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('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" href="{{url('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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('contacts')}}" class="text-danger">
                                                    <i class="ri-heart-line text-base"></i>
                                                </a>
                                                <a aria-label="anchor" href="{{url('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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('contacts')}}" class="text-danger">
                                                    <i class="ri-heart-line text-base"></i>
                                                </a>
                                                <a aria-label="anchor" href="{{url('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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('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" href="{{url('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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('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" href="{{url('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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('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" href="{{url('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 href="{{url('profile')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/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" href="{{url('contacts')}}" class="text-danger">
                                                    <i class="ri-heart-line text-base"></i>
                                                </a>
                                                <a aria-label="anchor" href="{{url('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="{{asset('build/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="{{asset('build/assets/img/users/8.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/assets/img/users/6.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/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="{{asset('build/assets/img/users/8.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/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="{{asset('build/assets/img/users/8.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/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="{{asset('build/assets/img/users/8.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}"
                                                    alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/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="{{asset('build/assets/img/users/8.jpg')}}" alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                                    <img class="inline-block avatar w-6 h-6 rounded-full" src="{{asset('build/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 href="{{url('chat')}}" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                                                <img src="{{asset('build/assets/img/users/17.jpg')}}" alt="img" class="rounded-full">
                                            </a>
                                            <div class="flex justify-between relative w-full">
                                                <a aria-label="anchor" href="{{url('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 href="{{url('chat')}}" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                                                <img src="{{asset('build/assets/img/users/2.jpg')}}" alt="img" class="rounded-full">
                                            </a>
                                            <div class="flex justify-between relative w-full">
                                                <a aria-label="anchor" href="{{url('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 href="{{url('chat')}}" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                                                <img src="{{asset('build/assets/img/users/21.jpg')}}" alt="img" class="rounded-full">
                                            </a>
                                            <div class="flex justify-between relative w-full">
                                                <a aria-label="anchor" href="{{url('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 href="{{url('chat')}}" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                                                <img src="{{asset('build/assets/img/users/11.jpg')}}" alt="img" class="rounded-full">
                                            </a>
                                            <div class="flex justify-between relative w-full">
                                                <a aria-label="anchor" href="{{url('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 href="{{url('chat')}}" class="ltr:mr-2 rtl:ml-2 avatar rounded-full">
                                                <img src="{{asset('build/assets/img/users/3.jpg')}}" alt="img" class="rounded-full">
                                            </a>
                                            <div class="flex justify-between relative w-full">
                                                <a aria-label="anchor" href="{{url('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 rtl:rotate-180">
                                                <i class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg"></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 rtl:rotate-180">
                                                <i class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg"></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 rtl:rotate-180">
                                                <i class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg"></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 rtl:rotate-180">
                                                <i class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg"></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 rtl:rotate-180">
                                                <i class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg"></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 rtl:rotate-180">
                                                <i class="ri ri-arrow-right-s-line text-gray-500 dark:text-white/70 text-lg"></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="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                        </a>
                                        <a href="javascript:void(0);">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/12.jpg')}}" alt="Image Description">
                                        </a>
                                        <a href="javascript:void(0);">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                        </a>
                                        <a href="javascript:void(0);">
                                            <img class="avatar avatar-sm rounded-full" src="{{asset('build/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 !text-center">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="">
                                                <td class="!text-center">1</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Socrates
                                                        Itumay</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]">socratesitumay@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>#256585</td>
                                                <td>02-04-2023</td>
                                                <td>$2536</td>
                                                <td>Debited</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-success/10 text-success/80">Success</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">
                                                    <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>
                                            <tr class="">
                                                <td class="!text-center">2</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/12.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Luke Cooper</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]">LukeCooper@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>#256586</td>
                                                <td>03-04-2023</td>
                                                <td>$250</td>
                                                <td>Credited</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">Pending</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">
                                                    <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>
                                            <tr class="">
                                                <td class="!text-center">3</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/14.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Rony Brad</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]">RonyBrad@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>#256587</td>
                                                <td>04-04-2023</td>
                                                <td>$3256</td>
                                                <td>Debited</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-success/10 text-success/80">success</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">
                                                    <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>
                                            <tr class="">
                                                <td class="!text-center">4</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Sophia Khud</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]">RonyBrad@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>#256588</td>
                                                <td>05-04-2023</td>
                                                <td>$2369</td>
                                                <td>Debited</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-danger/10 text-danger/80">Cancel</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">
                                                    <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>
                                            <tr class="">
                                                <td class="!text-center">5</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Cooper Hard</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto min-w-[180px]">CooperHard@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>#256589</td>
                                                <td>06-04-2023</td>
                                                <td>$596</td>
                                                <td>Credited</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-success/10 text-success/80">Success</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">
                                                    <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 -->

                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

        <!-- APEX CHARTS JS -->
        <script src="{{asset('build/assets/libs/apexcharts/apexcharts.min.js')}}"></script>

        <!-- INDEX JS -->
        @vite('resources/assets/js/index-10.js')
        

@endsection