<div class="tailwind-admin"
     id="tab-htmx-sales">
    <div class="tw-bg-gray-100 tw-dark:bg-gray-900">
        <div class="tw-mx-auto tw-max-w-(--breakpoint-2xl) tw-p-4 tw-md:p-6">
            <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-md:gap-6">
                <div class="tw-col-span-12 tw-space-y-6 tw-xl:col-span-7">
                    <div class="tw-grid tw-grid-cols-1 tw-gap-4 tw-sm:grid-cols-2 tw-md:gap-6">
                        <div hx-get="{stbIO uri='metricItem' type='customers'}"
                             hx-trigger="hxTabClicked from:#tab-htmx-sales"
                             hx-sync="body:queue all"
                             hx-swap="innerHTML"
                             hx-indicator="body.htmx-indicator"></div>
                        <div hx-get="{stbIO uri='metricItem' type='orders'}"
                             hx-trigger="hxTabClicked from:#tab-htmx-sales"
                             hx-sync="body:queue all"
                             hx-swap="innerHTML"
                             hx-indicator="body.htmx-indicator"></div>
                    </div>
                    <!-- ====== Chart One Start -->
                    <div class="tw-overflow-hidden tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-white tw-px-5 tw-pt-5 tw-sm:px-6 tw-sm:pt-6 tw-dark:border-gray-800 tw-dark:bg-white/[0.03]">
                        <div class="tw-flex tw-items-center tw-justify-between">
                            <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                                Monthly Sales
                            </h3>
                            {include file="{$tailadminURI}smarty/reloadable/components/card-menu-dropdown.tpl"}
                        </div>
                        <div class="tw-max-w-full tw-overflow-x-auto tw-custom-scrollbar">
                            <div id="chartOne"
                                 class="tw--ml-5 tw-h-full tw-min-w-[690px] tw-pl-2 tw-xl:min-w-full"></div>
                        </div>
                    </div>
                    <!-- ====== Chart One End -->
                </div>
                <div class="tw-col-span-12 tw-xl:col-span-5">
                    <div hx-get="{stbIO uri='monthlyTargetChart'}"
                         hx-trigger="hxTabClicked from:#tab-htmx-sales"
                         hx-sync="body:queue all"
                         hx-swap="innerHTML"
                         hx-indicator="body.htmx-indicator"></div>
                </div>
                <div class="tw-col-span-12">
                    <!-- ====== Chart Three Start -->
                    <div class="tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-white tw-px-5 tw-pb-5 tw-pt-5 tw-dark:border-gray-800 tw-dark:bg-white/[0.03] tw-sm:px-6 tw-sm:pt-6">
                        <div class="tw-flex tw-flex-col tw-gap-5 tw-mb-6 tw-sm:flex-row tw-sm:justify-between">
                            <div class="tw-w-full">
                                <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                                    Statistics
                                </h3>
                                <p class="tw-mt-1 tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                    Target youΓÇÖve set for each month
                                </p>
                            </div>
                            <div class="tw-flex tw-items-start tw-w-full tw-gap-3 tw-sm:justify-end">
                                <div class="tw-inline-flex tw-w-fit tw-items-center tw-gap-0.5 tw-rounded-lg tw-bg-gray-100 tw-p-0.5 tw-dark:bg-gray-900">
                                    <button class="tw-px-3 tw-py-2 tw-font-medium tw-rounded-md tw-text-theme-sm tw-hover:text-gray-900 tw-dark:hover:text-white">
                                        Overview
                                    </button>
                                    <button class="tw-px-3 tw-py-2 tw-font-medium tw-rounded-md tw-text-theme-sm tw-hover:text-gray-900 tw-dark:hover:text-white">
                                        Sales
                                    </button>
                                    <button class="tw-px-3 tw-py-2 tw-font-medium tw-rounded-md tw-text-theme-sm tw-hover:text-gray-900 tw-dark:hover:text-white">
                                        Revenue
                                    </button>
                                </div>
                                <div class="tw-relative tw-w-fit">
                                    <input class="tw-datepicker tw-h-10 tw-w-full tw-max-w-11 tw-rounded-lg tw-border tw-border-gray-200 tw-bg-white tw-py-2.5 tw-pl-[34px] tw-pr-4 tw-text-theme-sm tw-font-medium tw-text-gray-700 tw-shadow-theme-xs tw-focus:outline-hidden tw-focus:ring-0 tw-focus-visible:outline-hidden tw-dark:border-gray-700 tw-dark:bg-gray-800 tw-dark:text-gray-400 tw-xl:max-w-fit tw-xl:pl-11"
                                           placeholder="Select dates"
                                           data-class="flatpickr-right"
                                           readonly="readonly"
                                    />
                                    <div class="tw-absolute tw-inset-0 tw-right-auto tw-flex tw-items-center tw-pointer-events-none tw-left-4">
                                        <svg class="tw-fill-gray-700 tw-dark:fill-gray-400"
                                             width="20"
                                             height="20"
                                             viewBox="0 0 20 20"
                                             fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  clip-rule="evenodd"
                                                  d="M6.66683 1.54199C7.08104 1.54199 7.41683 1.87778 7.41683 2.29199V3.00033H12.5835V2.29199C12.5835 1.87778 12.9193 1.54199 13.3335 1.54199C13.7477 1.54199 14.0835 1.87778 14.0835 2.29199V3.00033L15.4168 3.00033C16.5214 3.00033 17.4168 3.89576 17.4168 5.00033V7.50033V15.8337C17.4168 16.9382 16.5214 17.8337 15.4168 17.8337H4.5835C3.47893 17.8337 2.5835 16.9382 2.5835 15.8337V7.50033V5.00033C2.5835 3.89576 3.47893 3.00033 4.5835 3.00033L5.91683 3.00033V2.29199C5.91683 1.87778 6.25262 1.54199 6.66683 1.54199ZM6.66683 4.50033H4.5835C4.30735 4.50033 4.0835 4.72418 4.0835 5.00033V6.75033H15.9168V5.00033C15.9168 4.72418 15.693 4.50033 15.4168 4.50033H13.3335H6.66683ZM15.9168 8.25033H4.0835V15.8337C4.0835 16.1098 4.30735 16.3337 4.5835 16.3337H15.4168C15.693 16.3337 15.9168 16.1098 15.9168 15.8337V8.25033Z"
                                                  fill=""
                                            />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tw-max-w-full tw-overflow-x-auto tw-custom-scrollbar">
                            <div id="chartThree" class="tw--ml-4 tw-min-w-[700px] tw-pl-2 tw-xl:min-w-full"></div>
                        </div>
                    </div>
                    <!-- ====== Chart Three End -->
                </div>
                <div class="tw-col-span-12 tw-xl:col-span-5">
                    <!-- ====== Map One Start -->
                    <div class="tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-white tw-p-5 tw-dark:border-gray-800 tw-dark:bg-white/[0.03] tw-sm:p-6">
                        <div class="tw-flex tw-justify-between">
                            <div>
                                <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                                    Customers Demographic
                                </h3>
                                <p class="tw-mt-1 tw-text-theme-sm tw-text-gray-500 tw-dark:text-gray-400">
                                    Number of customers based on country
                                </p>
                            </div>
                            {include file="{$tailadminURI}smarty/reloadable/components/card-menu-dropdown.tpl"}
                        </div>
                        <div class="tw-border-gary-200 tw-my-6 tw-overflow-hidden tw-rounded-2xl tw-border tw-bg-gray-50 tw-px-4 tw-py-6 tw-dark:border-gray-800 tw-dark:bg-gray-900 tw-sm:px-6">
                            <div id="mapOne"
                                 class="tw-mapOne tw-map-btn tw--mx-4 tw--my-6 tw-h-[212px] tw-w-[252px] tw-2xsm:w-[307px] tw-xsm:w-[358px] tw-sm:-mx-6 tw-md:w-[668px] tw-lg:w-[634px] tw-xl:w-[393px] tw-2xl:w-[554px]"></div>
                        </div>
                        <div class="tw-space-y-5">
                            <div class="tw-flex tw-items-center tw-justify-between">
                                <div class="tw-flex tw-items-center tw-gap-3">
                                    <div class="tw-w-full tw-max-w-8 tw-items-center tw-rounded-full">
                                        <img src="{$pluginURL}tailadmin/images/country-01.svg" alt="usa" />
                                    </div>
                                    <div>
                                        <p class="tw-text-theme-sm tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                                            USA
                                        </p>
                                        <span class="tw-block tw-text-theme-xs tw-text-gray-500 tw-dark:text-gray-400">
                2,379 Customers
              </span>
                                    </div>
                                </div>
                                <div class="tw-flex tw-w-full tw-max-w-[140px] tw-items-center tw-gap-3">
                                    <div class="tw-relative tw-block tw-h-2 tw-w-full tw-max-w-[100px] tw-rounded-sm tw-bg-gray-200 tw-dark:bg-gray-800">
                                        <div class="tw-absolute tw-left-0 tw-top-0 tw-flex tw-h-full tw-w-[79%] tw-items-center tw-justify-center tw-rounded-sm tw-bg-brand-500 tw-text-xs tw-font-medium tw-text-white"></div>
                                    </div>
                                    <p class="tw-text-theme-sm tw-font-medium tw-text-gray-800 tw-dark:text-white/90">
                                        79%
                                    </p>
                                </div>
                            </div>
                            <div class="tw-flex tw-items-center tw-justify-between">
                                <div class="tw-flex tw-items-center tw-gap-3">
                                    <div class="tw-w-full tw-max-w-8 tw-items-center tw-rounded-full">
                                        <img src="{$pluginURL}tailadmin/images/country-02.svg" alt="france" />
                                    </div>
                                    <div>
                                        <p class="tw-text-theme-sm tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                                            France
                                        </p>
                                        <span class="tw-block tw-text-theme-xs tw-text-gray-500 tw-dark:text-gray-400">
                589 Customers
              </span>
                                    </div>
                                </div>
                                <div class="tw-flex tw-w-full tw-max-w-[140px] tw-items-center tw-gap-3">
                                    <div class="tw-relative tw-block tw-h-2 tw-w-full tw-max-w-[100px] tw-rounded-sm tw-bg-gray-200 tw-dark:bg-gray-800">
                                        <div class="tw-absolute tw-left-0 tw-top-0 tw-flex tw-h-full tw-w-[23%] tw-items-center tw-justify-center tw-rounded-sm tw-bg-brand-500 tw-text-xs tw-font-medium tw-text-white"></div>
                                    </div>
                                    <p class="tw-text-theme-sm tw-font-medium tw-text-gray-800 tw-dark:text-white/90">
                                        23%
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ====== Map One End -->
                </div>
                <div class="tw-col-span-12 tw-xl:col-span-7">
                    <!-- ====== Table One Start -->
                    <div class="tw-overflow-hidden tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-white tw-px-4 tw-pt-4 tw-pb-3 tw-sm:px-6 tw-dark:border-gray-800 tw-dark:bg-white/[0.03]">
                        <div class="tw-flex tw-flex-col tw-gap-2 tw-mb-4 tw-sm:flex-row tw-sm:items-center tw-sm:justify-between">
                            <div>
                                <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                                    Recent Orders
                                </h3>
                            </div>
                            <div class="tw-flex tw-items-center tw-gap-3">
                                <button class="tw-text-theme-sm tw-shadow-theme-xs tw-inline-flex tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white tw-px-4 tw-py-2.5 tw-font-medium tw-text-gray-700 tw-hover:bg-gray-50 tw-hover:text-gray-800 tw-dark:border-gray-700 tw-dark:bg-gray-800 tw-dark:text-gray-400 tw-dark:hover:bg-white/[0.03] tw-dark:hover:text-gray-200">
                                    <svg class="tw-stroke-current tw-fill-white tw-dark:fill-gray-800"
                                         width="20"
                                         height="20"
                                         viewBox="0 0 20 20"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M2.29004 5.90393H17.7067"
                                              stroke=""
                                              stroke-width="1.5"
                                              stroke-linecap="round"
                                              stroke-linejoin="round"
                                        />
                                        <path d="M17.7075 14.0961H2.29085"
                                              stroke=""
                                              stroke-width="1.5"
                                              stroke-linecap="round"
                                              stroke-linejoin="round"
                                        />
                                        <path d="M12.0826 3.33331C13.5024 3.33331 14.6534 4.48431 14.6534 5.90414C14.6534 7.32398 13.5024 8.47498 12.0826 8.47498C10.6627 8.47498 9.51172 7.32398 9.51172 5.90415C9.51172 4.48432 10.6627 3.33331 12.0826 3.33331Z"
                                              fill=""
                                              stroke=""
                                              stroke-width="1.5"
                                        />
                                        <path d="M7.91745 11.525C6.49762 11.525 5.34662 12.676 5.34662 14.0959C5.34661 15.5157 6.49762 16.6667 7.91745 16.6667C9.33728 16.6667 10.4883 15.5157 10.4883 14.0959C10.4883 12.676 9.33728 11.525 7.91745 11.525Z"
                                              fill=""
                                              stroke=""
                                              stroke-width="1.5"
                                        />
                                    </svg>
                                    Filter
                                </button>
                                <button class="tw-text-theme-sm tw-shadow-theme-xs tw-inline-flex tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white tw-px-4 tw-py-2.5 tw-font-medium tw-text-gray-700 tw-hover:bg-gray-50 tw-hover:text-gray-800 tw-dark:border-gray-700 tw-dark:bg-gray-800 tw-dark:text-gray-400 tw-dark:hover:bg-white/[0.03] tw-dark:hover:text-gray-200">
                                    See all
                                </button>
                            </div>
                        </div>
                        <div class="tw-max-w-full tw-overflow-x-auto tw-custom-scrollbar">
                            <table class="tw-min-w-full">
                                <!-- table header start -->
                                <thead class="tw-border-gray-100 tw-border-y tw-dark:border-gray-800">
                                <tr>
                                    <th class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-font-medium tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                                                Products
                                            </p>
                                        </div>
                                    </th>
                                    <th class="tw-px-6 tw-py-3 tw-whitespace-nowrap">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-font-medium tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                                                Category
                                            </p>
                                        </div>
                                    </th>
                                    <th class="tw-px-6 tw-py-3 tw-whitespace-nowrap">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-font-medium tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                                                Price
                                            </p>
                                        </div>
                                    </th>
                                    <th class="tw-px-6 tw-py-3 tw-whitespace-nowrap">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-font-medium tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                                                Status
                                            </p>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <!-- table header end -->
                                <!-- table body start -->
                                <tbody class="tw-py-3 tw-divide-y tw-divide-gray-100 tw-dark:divide-gray-800">
                                <tr>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center">
                                            <div class="tw-flex tw-items-center tw-gap-3">
                                                <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-md">
                                                    <img src="{$pluginURL}tailadmin/images/product-01.jpg" alt="Product" />
                                                </div>
                                                <div>
                                                    <p class="tw-font-medium tw-text-gray-800 tw-text-theme-sm tw-dark:text-white/90">
                                                        Macbook pro 13ΓÇ¥
                                                    </p>
                                                    <span class="tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                        2 Variants
                      </span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                Laptop
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                $2399.00
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center">
                                            <p class="tw-bg-success-50 tw-text-theme-xs tw-text-success-600 tw-dark:bg-success-500/15 tw-dark:text-success-500 tw-rounded-full tw-px-2 tw-py-0.5 tw-font-medium">
                                                Delivered
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-4">
                                            <div class="tw-flex tw-items-center tw-gap-3">
                                                <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-md">
                                                    <img src="{$pluginURL}tailadmin/images/product-02.jpg" alt="Product" />
                                                </div>
                                                <div>
                                                    <p class="tw-font-medium tw-text-gray-800 tw-text-theme-sm tw-dark:text-white/90">
                                                        Apple Watch Ultra
                                                    </p>
                                                    <span class="tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                        1 Variants
                      </span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                Watch
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                $879.00
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-bg-warning-50 tw-text-theme-xs tw-text-warning-600 tw-dark:bg-warning-500/15 tw-rounded-full tw-px-2 tw-py-0.5 tw-font-medium tw-dark:text-orange-400">
                                                Pending
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-4">
                                            <div class="tw-flex tw-items-center tw-gap-3">
                                                <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-md">
                                                    <img src="{$pluginURL}tailadmin/images/product-03.jpg" alt="Product" />
                                                </div>
                                                <div>
                                                    <p class="tw-font-medium tw-text-gray-800 tw-text-theme-sm tw-dark:text-white/90">
                                                        iPhone 15 Pro Max
                                                    </p>
                                                    <span class="tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                        2 Variants
                      </span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                SmartPhone
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                $1869.00
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-bg-success-50 tw-text-theme-xs tw-text-success-600 tw-dark:bg-success-500/15 tw-dark:text-success-500 tw-rounded-full tw-px-2 tw-py-0.5 tw-font-medium">
                                                Delivered
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-4">
                                            <div class="tw-flex tw-items-center tw-gap-3">
                                                <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-md">
                                                    <img src="{$pluginURL}tailadmin/images/product-04.jpg" alt="Product" />
                                                </div>
                                                <div>
                                                    <p class="tw-font-medium tw-text-gray-800 tw-text-theme-sm tw-dark:text-white/90">
                                                        iPad Pro 3rd Gen
                                                    </p>
                                                    <span class="tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                        2 Variants
                      </span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                Electronics
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                $1699.00
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-bg-error-50 tw-text-theme-xs tw-text-error-600 tw-dark:bg-error-500/15 tw-dark:text-error-500 tw-rounded-full tw-px-2 tw-py-0.5 tw-font-medium">
                                                Canceled
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-4">
                                            <div class="tw-flex tw-items-center tw-gap-3">
                                                <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-md">
                                                    <img src="{$pluginURL}tailadmin/images/product-05.jpg" alt="Product" />
                                                </div>
                                                <div>
                                                    <p class="tw-font-medium tw-text-gray-800 tw-text-theme-sm tw-dark:text-white/90">
                                                        Airpods Pro 2nd Gen
                                                    </p>
                                                    <span class="tw-text-gray-500 tw-text-theme-xs tw-dark:text-gray-400">
                        1 Variants
                      </span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                Accessories
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-text-gray-500 tw-text-theme-sm tw-dark:text-gray-400">
                                                $240.00
                                            </p>
                                        </div>
                                    </td>
                                    <td class="tw-px-6 tw-py-3 tw-whitespace-nowrap tw-first:pl-0">
                                        <div class="tw-flex tw-items-center tw-col-span-2">
                                            <p class="tw-bg-success-50 tw-text-theme-xs tw-text-success-700 tw-dark:bg-success-500/15 tw-dark:text-success-500 tw-rounded-full tw-px-2 tw-py-0.5 tw-font-medium">
                                                Delivered
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                                <!-- table body end -->
                            </table>
                        </div>
                    </div>
                    <!-- ====== Table One End -->
                </div>
            </div>
        </div>
    </div>
</div>
