Tailwind CSS Chat Toolbars Blocks

Chat Toolbars

Chat toolbars for activity filters, reporting controls, date ranges, and utility actions in support workspaces.

Activity toolbar combines rounded filter tabs with a date range dropdown above tabbed activity panels.

<header class=" fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50">
                      <div class="lg:max-w-4xl lg:border-x lg:rounded-b-xl w-full mx-auto py-2.5 px-2 sm:px-5 bg-navbar border-b border-navbar-line">
                        <div class="flex justify-between gap-x-2 basis-full items-center">
                          <div class="lg:hidden">
                            
                            <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-chat-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-chat-sidebar">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13"/></svg>
                            </button>
                            
                          </div>

<div class="grow">
                            
                            <nav  class="p-0.5 inline-flex bg-layer border border-layer-line rounded-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                              <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-layer-focus hs-tab-active:focus:text-layer-foreground inline-flex justify-center items-center gap-x-2 text-layer-foreground py-1.5 px-2 text-xs rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-chr-item-activity" aria-selected="true" data-hs-tab="#hs-pro-tabs-chr-activity" aria-controls="hs-pro-tabs-chr-activity" role="tab" >
                                <svg class="shrink-0 size-3.5 sm:hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/></svg> <span class="hidden sm:block">Activity</span>
                              </button>
                              <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-layer-focus hs-tab-active:focus:text-layer-foreground inline-flex justify-center items-center gap-x-2 text-layer-foreground py-1.5 px-2 text-xs rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-chr-item-mentions" aria-selected="false" data-hs-tab="#hs-pro-tabs-chr-mentions" aria-controls="hs-pro-tabs-chr-mentions" role="tab" >
                                <svg class="shrink-0 size-3.5 sm:hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></svg> <span class="hidden sm:block">Mentions</span>
                              </button>
                              <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-layer-focus hs-tab-active:focus:text-layer-foreground inline-flex justify-center items-center gap-x-2 text-layer-foreground py-1.5 px-2 text-xs rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-chr-item-assigned" aria-selected="false" data-hs-tab="#hs-pro-tabs-chr-assigned" aria-controls="hs-pro-tabs-chr-assigned" role="tab" >
                                <svg class="shrink-0 size-3.5 sm:hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg> <span class="hidden sm:block">Assigned</span>
                              </button>
                            </nav>
                            
                          </div>

<div class="hs-dropdown [--placement:bottom-right] [--strategy:absolute] [--flip:false] [--auto-close:inside] relative inline-flex">
                            <button id="hs-pro-dachcd" type="button" class="p-2 inline-flex items-center gap-x-1.5 text-xs text-nowrap rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                              25 Jul, 2023 - 25 Aug, 2023
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-79.5 sm:w-159 transition-[opacity,margin] duration opacity-0 hidden inset-s-5 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dachcd">
                              
                                
                                <div class="sm:flex">
                                  
                                  <div class="p-3 space-y-0.5">
                                    
                                    <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                      
                                      <div class="col-span-1">
                                        <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                        </button>
                                      </div>
                                      
          
                                      
                                      <div class="col-span-3 flex justify-center items-center gap-x-1">
                                        <div class="relative">
                                          <select data-hs-select='{
                                              "placeholder": "Select month",
                                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                              "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                              "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                            }' class="hidden">
                                            <option value="0">January</option>
                                            <option value="1">February</option>
                                            <option value="2">March</option>
                                            <option value="3">April</option>
                                            <option value="4">May</option>
                                            <option value="5">June</option>
                                            <option value="6" selected>July</option>
                                            <option value="7">August</option>
                                            <option value="8">September</option>
                                            <option value="9">October</option>
                                            <option value="10">November</option>
                                            <option value="11">December</option>
                                          </select>
                                        </div>

<div class="relative">
                                          <select data-hs-select='{
                                              "placeholder": "Select year",
                                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                              "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                              "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                            }' class="hidden">
                                            <option selected>2023</option>
                                            <option>2024</option>
                                            <option>2025</option>
                                            <option>2026</option>
                                            <option>2027</option>
                                          </select>
                                        </div>
                                      </div>

<div class="col-span-1 flex justify-end">
                                        <button type="button" class="opacity-0 pointer-events-none size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                          <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                        </button>
                                      </div>
                                      
                                    </div>

<div class="flex pb-1.5">
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        Mo
                                      </span>
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        Tu
                                      </span>
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        We
                                      </span>
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        Th
                                      </span>
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        Fr
                                      </span>
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        Sa
                                      </span>
                                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                        Su
                                      </span>
                                    </div>

<div class="flex">
                                      <div >
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          10
                                        </button>
                                      </div>
                                      <div >
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          11
                                        </button>
                                      </div>
                                      <div >
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          12
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          13
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          14
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          15
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          16
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          17
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          18
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          19
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          20
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          21
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          22
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          23
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          24
                                        </button>
                                      </div>
                                      <div class="bg-surface rounded-s-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                          25
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          26
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          27
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          28
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          29
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          30
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          31
                                        </button>
                                      </div>
                                      <div class="bg-linear-to-r from-surface">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          1
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          2
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          3
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          4
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          5
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          6
                                        </button>
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="p-3 space-y-0.5">
                                    
                                    <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                      
                                      <div class="col-span-1">
                                        <button type="button" class="opacity-0 pointer-events-none size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                        </button>
                                      </div>
                                      
          
                                      
                                      <div class="col-span-3 flex justify-center items-center gap-x-1">
                                        <div class="relative">
                                          <select data-hs-select='{
                                              "placeholder": "Select month",
                                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                              "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                              "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                            }' class="hidden">
                                            <option value="0">January</option>
                                            <option value="1">February</option>
                                            <option value="2">March</option>
                                            <option value="3">April</option>
                                            <option value="4">May</option>
                                            <option value="5">June</option>
                                            <option value="6" selected>July</option>
                                            <option value="7">August</option>
                                            <option value="8">September</option>
                                            <option value="9">October</option>
                                            <option value="10">November</option>
                                            <option value="11">December</option>
                                          </select>
                                        </div>

<div class="col-span-1 flex justify-end">
                                        <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                          <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                        </button>
                                      </div>
                                      
                                    </div>

<div class="flex">
                                      <div class="bg-linear-to-l from-surface">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          31
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                          1
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                          2
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                          3
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                          4
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          5
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          6
                                        </button>
                                      </div>
                                    </div>

<div class="flex">
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          7
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          8
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          9
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          10
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          11
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          12
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          13
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          14
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          15
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          16
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          17
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          18
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          19
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          20
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          21
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          22
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          23
                                        </button>
                                      </div>
                                      <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          24
                                        </button>
                                      </div>
                                      <div class="bg-surface rounded-e-full">
                                        <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                          25
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          26
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          27
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          28
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          29
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          30
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                          31
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          1
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          2
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          3
                                        </button>
                                      </div>
                                    </div>
                                    
      
                                    
                                    <div class="flex">
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          4
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          5
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          6
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          7
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          8
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          9
                                        </button>
                                      </div>
                                      <div>
                                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                          10
                                        </button>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="flex items-center py-3 px-4 justify-end border-t border-dropdown-divider gap-x-2">
                                    
                                    <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                      Cancel
                                    </button>
                                    <button type="button" class="py-2 px-3  inline-flex justify-center items-center gap-x-2 text-xs font-medium rounded-lg border-[1.5px] border-transparent bg-primary text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
                                      Apply
                                    </button>
                                  </div>
                                  
                              
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </header>

<main id="content" class="pt-14">
                      
                      <div id="hs-pro-tabs-chr-activity" class="h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-chr-item-activity">
                        
                        <div class="mt-4 lg:max-w-4xl w-full mx-auto h-122.5 bg-layer lg:border lg:border-layer-line lg:rounded-xl p-2 sm:p-4 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          
                          <div class="h-full flex flex-col justify-center items-center text-center">
                            <span class="py-1.5 inline-flex gap-x-1">
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                            </span>
                            <p class="mt-3 font-semibold text-foreground">
                              Activity
                            </p>
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              This is a placeholder loader.<br>This conent is empty.
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>

<div id="hs-pro-tabs-chr-mentions" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-chr-item-mentions">
                        
                        <div class="mt-4 lg:max-w-4xl w-full mx-auto h-122.5 bg-layer lg:border lg:border-layer-line lg:rounded-xl p-2 sm:p-4 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          
                          <div class="h-full flex flex-col justify-center items-center text-center">
                            <span class="py-1.5 inline-flex gap-x-1">
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                            </span>
                            <p class="mt-3 font-semibold text-foreground">
                              Mentions
                            </p>
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              This is a placeholder loader.<br>This conent is empty.
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>

<div id="hs-pro-tabs-chr-assigned" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-chr-item-assigned">
                        
                        <div class="mt-4 lg:max-w-4xl w-full mx-auto h-122.5 bg-layer lg:border lg:border-layer-line lg:rounded-xl p-2 sm:p-4 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          
                          <div class="h-full flex flex-col justify-center items-center text-center">
                            <span class="py-1.5 inline-flex gap-x-1">
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                              <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                            </span>
                            <p class="mt-3 font-semibold text-foreground">
                              Assigned
                            </p>
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              This is a placeholder loader.<br>This conent is empty.
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>
                      
                    </main>

Reports toolbar pairs a refresh action and update status text with a date range dropdown for dashboard views.

<div class="grow truncate">
                          <div class="flex items-center gap-x-3">
                            <a class="p-2 inline-flex items-center gap-x-2 text-xs rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/support/helpdesk/reports.html">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                              <span class="hidden sm:block">Refresh</span>
                            </a>

<div class="grow hidden sm:block truncate">
                              <p class="truncate text-xs text-muted-foreground-1">
                                Last updated 10 minutes ago
                              </p>
                              <p class="truncate text-xs text-muted-foreground-1">
                                GMT+00:00 (United Kingdom)
                              </p>
                            </div>
                          </div>
                        </div>

<div class="hs-dropdown [--placement:bottom-right] [--strategy:absolute] [--flip:false] [--auto-close:inside] relative inline-flex">
                          <button id="hs-pro-dachcd" type="button" class="p-2 inline-flex items-center gap-x-1.5 text-xs text-nowrap rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                            25 Jul, 2023 - 25 Aug, 2023
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-79.5 sm:w-159 transition-[opacity,margin] duration opacity-0 hidden inset-s-5 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dachcd">
                            
                              
                              <div class="sm:flex">
                                
                                <div class="p-3 space-y-0.5">
                                  
                                  <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                    
                                    <div class="col-span-1">
                                      <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                      </button>
                                    </div>
                                    
          
                                    
                                    <div class="col-span-3 flex justify-center items-center gap-x-1">
                                      <div class="relative">
                                        <select data-hs-select='{
                                            "placeholder": "Select month",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                            "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                          }' class="hidden">
                                          <option value="0">January</option>
                                          <option value="1">February</option>
                                          <option value="2">March</option>
                                          <option value="3">April</option>
                                          <option value="4">May</option>
                                          <option value="5">June</option>
                                          <option value="6" selected>July</option>
                                          <option value="7">August</option>
                                          <option value="8">September</option>
                                          <option value="9">October</option>
                                          <option value="10">November</option>
                                          <option value="11">December</option>
                                        </select>
                                      </div>

<div class="relative">
                                        <select data-hs-select='{
                                            "placeholder": "Select year",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                            "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                          }' class="hidden">
                                          <option selected>2023</option>
                                          <option>2024</option>
                                          <option>2025</option>
                                          <option>2026</option>
                                          <option>2027</option>
                                        </select>
                                      </div>
                                    </div>

<div class="col-span-1 flex justify-end">
                                      <button type="button" class="opacity-0 pointer-events-none size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                        <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                      </button>
                                    </div>
                                    
                                  </div>

<div class="flex pb-1.5">
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Mo
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Tu
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      We
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Th
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Fr
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Sa
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Su
                                    </span>
                                  </div>

<div class="flex">
                                    <div >
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        10
                                      </button>
                                    </div>
                                    <div >
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        11
                                      </button>
                                    </div>
                                    <div >
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        12
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        13
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        14
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        15
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        16
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        17
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        18
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        19
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        20
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        21
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        22
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        23
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        24
                                      </button>
                                    </div>
                                    <div class="bg-surface rounded-s-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                        25
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        26
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        27
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        28
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        29
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        30
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        31
                                      </button>
                                    </div>
                                    <div class="bg-linear-to-r from-surface">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        1
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        2
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        3
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        4
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        5
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        6
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="p-3 space-y-0.5">
                                  
                                  <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                    
                                    <div class="col-span-1">
                                      <button type="button" class="opacity-0 pointer-events-none size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                      </button>
                                    </div>
                                    
          
                                    
                                    <div class="col-span-3 flex justify-center items-center gap-x-1">
                                      <div class="relative">
                                        <select data-hs-select='{
                                            "placeholder": "Select month",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                            "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                          }' class="hidden">
                                          <option value="0">January</option>
                                          <option value="1">February</option>
                                          <option value="2">March</option>
                                          <option value="3">April</option>
                                          <option value="4">May</option>
                                          <option value="5">June</option>
                                          <option value="6" selected>July</option>
                                          <option value="7">August</option>
                                          <option value="8">September</option>
                                          <option value="9">October</option>
                                          <option value="10">November</option>
                                          <option value="11">December</option>
                                        </select>
                                      </div>

<div class="relative">
                                        <select data-hs-select='{
                                            "placeholder": "Select year",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                            "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                          }' class="hidden">
                                          <option selected>2023</option>
                                          <option>2024</option>
                                          <option>2025</option>
                                          <option>2026</option>
                                          <option>2027</option>
                                        </select>
                                      </div>
                                    </div>

<div class="col-span-1 flex justify-end">
                                      <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                        <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                      </button>
                                    </div>
                                    
                                  </div>

<div class="flex pb-1.5">
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Mo
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Tu
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      We
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Th
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Fr
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Sa
                                    </span>
                                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                      Su
                                    </span>
                                  </div>

<div class="flex">
                                    <div class="bg-linear-to-l from-surface">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        31
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                        1
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                        2
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                        3
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                        4
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        5
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        6
                                      </button>
                                    </div>
                                  </div>

<div class="flex">
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        7
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        8
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        9
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        10
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        11
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        12
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        13
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        14
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        15
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        16
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        17
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        18
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        19
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        20
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        21
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        22
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        23
                                      </button>
                                    </div>
                                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        24
                                      </button>
                                    </div>
                                    <div class="bg-surface rounded-e-full">
                                      <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                        25
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        26
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        27
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        28
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        29
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        30
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                        31
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        1
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        2
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        3
                                      </button>
                                    </div>
                                  </div>
                                  
      
                                  
                                  <div class="flex">
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        4
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        5
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        6
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        7
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        8
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        9
                                      </button>
                                    </div>
                                    <div>
                                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                        10
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>

<div class="flex items-center py-3 px-4 justify-end border-t border-dropdown-divider gap-x-2">
                                  
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                    Cancel
                                  </button>
                                  <button type="button" class="py-2 px-3  inline-flex justify-center items-center gap-x-2 text-xs font-medium rounded-lg border-[1.5px] border-transparent bg-primary text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
                                    Apply
                                  </button>
                                </div>
                                
                            
                          </div>
                        </div>
                        
                      </div>
                    </header>

Open related help desk reports template

Chat Toolbars

Activity Toolbar with Filter Tabs and Date Range Dropdown Pro

Reports Toolbar with Refresh Action and Date Range Dropdown Pro