Tailwind CSS Project Tables Blocks

Project Tables

Project management tables with filters, report rows, progress bars, and workspace actions for PM dashboards and team operations.

Project Table with Search and Filters Pro

A wide project table combines search, filters, bulk selection, and creation actions in one workspace view.

Create a responsive UI block named "Project Table with Search and Filters" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/project-tables/#project-table-with-search-and-filters. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: data-display/project-tables
- Block ID: project-table-with-search-and-filters
- Source description: A wide project table combines search, filters, bulk selection, and creation actions in one workspace view.
- Preview iframe: https://preline.co/blocks/data-display/project-tables/iframes/pro/project-table-with-search-and-filters.html (repo path: blocks/data-display/project-tables/iframes/pro/project-table-with-search-and-filters.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/bordered-table-with-searchable-filter-bar.html
  - partials/pro/admin-dashboard/modals/import-contacts.html
  - partials/pro/admin-dashboard/modals/export-contacts.html
  - partials/pro/admin-dashboard/modals/add-project.html
  - partials/pro/admin-dashboard/navbars/sfb-search-and-filter-dropdowns.html
  - partials/pro/admin-dashboard/tables/bordered-table-with-searchable-filter-bar.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Card header is a single row: heading `Project` (singular) on the left, one primary `Add project` button with a plus icon on the right; the icon is `hidden sm:block` so only the label shows on mobile.
  - Below it a `grid md:grid-cols-2` filter bar: left is a search input with `placeholder="Search"`, a leading magnifier icon, and a clear button that is `hidden` on first load; right is an `Import / Export` dropdown (menu rows `Import contacts` and `Export contacts`) followed by a `Filter` dropdown whose checkbox rows are `Name`, `Email addresses`, `Description`, `Company`.
  - The table is a bordered grid - both `divide-y` and `divide-x divide-table-line` - with a leading select-all checkbox column then six sortable columns in order: `Name`, `Tags`, `Assignee`, `Progress`, `Deadline`, `Rating`. Each header is an HSDropdown trigger offering `Sort ascending`, `Sort descending`, `Move left`, `Move right`, a divider, then `Hide in view`. Every checkbox is unchecked on first load.
  - Exactly twelve rows, each a bold title over a muted category: `Improve website UI`/`Website`, `Internal UX audit`/`Website`, `Digital marketing`/`IT department`, `Case studies`/`IT department`, `Social media assets`/`Marketing`, `UI/UX library`/`Marketing`, `Defining core values of the Guideline`/`Marketing`, `Seeking feedback`/`Company`, `Trending NFT Collections`/`Analysis`, `Understanding and leveraging Notion strength`/`Analysis`, `App design`/`Branding`, `Untitled`/`Not defined`.
  - Tags cells hold small `p-2 bg-surface text-xs rounded-md` pills (row one: `SaaS`, `IT`, `Tech`, `B2B`). Assignee cells are an overlapping `-space-x-2` stack of `size-7` round avatars mixing Unsplash photos with uppercase single-letter fallback circles, each wrapped in an HSTooltip that names the person (`James Collins`, `Lori Hunter`, `Lewis Clarke`, `Ella Lauda`, `Ols Schols`, ...).
  - Progress cells pair a `n/5` label with a fixed `w-16 h-1.5` rounded-full track whose fill uses `bg-secondary`, not the primary color; values in row order are 20%, 20%, 100%, 100%, 0%, 40%, 100%, 0%, 80%, 80%, 60%, 0%. Deadline cells are plain dates in `Apr 10, 2023` form.
  - Rating cells render only filled solid stars (16 viewBox, `fill="currentColor"`, `size-3.5 text-primary`) with no empty/outline remainder; counts in row order are 5, 4, 5, 3, 2, 3, 5, 3, 4, 3, 5, 1.
  - Below the table sits a pagination row reading `27 results` with page controls. Three Preline overlays - Add project, Import contacts, Export contacts - are `hidden` by default and open only via the `data-hs-overlay` triggers described above; none of them is visible on first load.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="p-5 space-y-4 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                      
                      <div class="flex justify-between items-center gap-x-5">
                        <h2 class="inline-block font-semibold text-lg text-foreground">
                          Project
                        </h2>

<div class="flex justify-end items-center gap-x-2">
                          
                          <button type="button" class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg bg-primary border border-primary-line 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" data-hs-overlay="#hs-pro-dasadpm">
                            <svg class="hidden sm:block 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="M5 12h14"/><path d="M12 5v14"/></svg>
                            Add project
                          </button>
                          
                        </div>
                      </div>

<div class="grid md:grid-cols-2 gap-y-2 md:gap-y-0 md:gap-x-5">
                        <div>
                          
                          <div class="relative">
                            <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
                              <svg class="shrink-0 size-4 text-muted-foreground-1" 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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </div>
                            <input type="text" class="py-1 sm:py-1.5 ps-10 pe-8 block w-full bg-surface border-transparent text-surface-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm focus:bg-layer focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search">
                            <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                              <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                <span class="sr-only">Close</span>
                                <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                              </button>
                            </div>
                          </div>
                          
                        </div>

<div class="flex md:justify-end items-center gap-x-2">
                          
                          <div class="hs-dropdown [--auto-close:true] relative inline-flex">
                            
                            <button id="hs-pro-dptied" type="button" class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs 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">
                              <svg class="shrink-0 mt-0.5 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="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>
                              Import / Export
                              <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-44 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dptied">
                              <div class="p-1">
                                <button type="button" class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dicm">
                                  <svg class="shrink-0 mt-0.5 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                  Import contacts
                                </button>
                                <button type="button" class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-decm">
                                  <svg class="shrink-0 mt-0.5 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                                  Export contacts
                                </button>
                              </div>
                            </div>
                            
                          </div>
                          
    
                          
                          <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex">
                            <button id="hs-pro-dptfd" type="button" class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs 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">
                              <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"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg>
                              Filter
                              <span class="font-medium text-[10px] py-0.5 px-[5px] bg-secondary text-secondary-foreground leading-3 rounded-full">
                                5
                              </span>
                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dptfd">
                              
                              <div class="pt-1 px-1">
                                <div class="pb-1 border-b border-dropdown-divider">
                                  <div class="relative">
                                    <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-2.5">
                                      <svg class="shrink-0 size-3.5 text-muted-foreground-1" 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="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
                                    </div>
                                    <input type="text" class="py-1 sm:py-1.5 px-8 block w-full bg-surface border-transparent text-surface-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm focus:bg-layer focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search">
                                    <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                                      <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary" aria-label="Close">
                                        <span class="sr-only">Close</span>
                                        <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
          
                              <div class="p-1 space-y-0.5">
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="12" cy="10" r="3"/><path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"/></svg>
                                  Name
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                  Email addresses
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M11 12H3"/><path d="M16 6H3"/><path d="M16 18H3"/><path d="M21 12h-6"/></svg>
                                  Description
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
                                  Company
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2"/><rect width="18" height="18" x="3" y="4" rx="2"/><circle cx="12" cy="10" r="2"/><line x1="8" x2="8" y1="2" y2="4"/><line x1="16" x2="16" y1="2" y2="4"/></svg>
                                  User ID
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                                  Phone numbers
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                                  Location
                                </a>
                                <a class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                  <svg class="shrink-0 mt-0.5 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="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
                                  Signed up as
                                </a>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>

<div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <div class="min-w-full inline-block align-middle">
                          
                          <table class="min-w-full divide-y divide-table-line">
                            <thead>
                              <tr class="border-t border-table-line divide-x divide-table-line">
                                <th scope="col" class="px-3 py-2.5 text-start">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                </th>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dutnms">
                                      <div class="p-1">
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                          Sort ascending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                          Sort descending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                          Move left
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                          Move right
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-duttgs">
                                      <div class="p-1">
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                          Sort ascending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                          Sort descending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                          Move left
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                          Move right
                                        </button>

<th scope="col" class="min-w-45">
                                  
                                  <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                    <button id="hs-pro-dutass" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      Assignee
                                      <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dutass">
                                      <div class="p-1">
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                          Sort ascending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                          Sort descending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                          Move left
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                          Move right
                                        </button>

<th scope="col">
                                  
                                  <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                    <button id="hs-pro-dutprs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      Progress
                                      <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dutprs">
                                      <div class="p-1">
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                          Sort ascending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                          Sort descending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                          Move left
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                          Move right
                                        </button>

<th scope="col">
                                  
                                  <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                    <button id="hs-pro-dutdds" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      Deadline
                                      <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dutdds">
                                      <div class="p-1">
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                          Sort ascending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                          Sort descending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                          Move left
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                          Move right
                                        </button>

<th scope="col">
                                  
                                  <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                    <button id="hs-pro-dutrts" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      Rating
                                      <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dutrts">
                                      <div class="p-1">
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                          Sort ascending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                          Sort descending
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                          Move left
                                        </button>
                                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                          <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                          Move right
                                        </button>

<tbody class="divide-y divide-table-line">
                              <tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Improve website UI</p>
                                    <p class="text-sm text-muted-foreground-1">Website</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      SaaS
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      IT
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Tech
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      B2B
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          James Collins
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lewis Clarke
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ella Lauda
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          O
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ols Schols
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">1/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 20%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      Apr 10, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Internal UX audit</p>
                                    <p class="text-sm text-muted-foreground-1">Website</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Ecommerce
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Shopify
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Anna Richard
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Costa Quinn
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">1/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 20%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      May 5, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Digital marketing</p>
                                    <p class="text-sm text-muted-foreground-1">IT department</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Sales
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Marketing
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          A
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Alex Brown
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          B
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Bob Dean
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          M
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Mark Colbert
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          C
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Chris Mathew
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          A
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Alex Brown
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          E
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Emma Watson
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">5/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 100%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      Apr 29, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Social media assets</p>
                                    <p class="text-sm text-muted-foreground-1">Marketing</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      B2B
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          A
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Alex Brown
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          C
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Chris Mathew
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Costa Quinn
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Mia Maya
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          M
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Mark Colbert
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">0/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 0%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      Mar 16, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">UI/UX library</p>
                                    <p class="text-sm text-muted-foreground-1">Marketing</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      SaaS
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      B2B
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Alisa Grasso
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Amanda Harvey
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lewis Clarke
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">2/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 40%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      Jun 1, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Defining core values of the Guideline</p>
                                    <p class="text-sm text-muted-foreground-1">Marketing</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Sales
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Branding
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Alisa Grasso
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          O
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ols Schols
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">5/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 100%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Seeking feedback</p>
                                    <p class="text-sm text-muted-foreground-1">Company</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Tech
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      IT
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Fintech
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      AI
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          James Collins
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lewis Clarke
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ella Lauda
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">0/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 0%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      Apr 8, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Trending NFT Collections</p>
                                    <p class="text-sm text-muted-foreground-1">Analysis</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Crypto
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Wallet
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          James Collins
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          A
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Alex Brown
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          O
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ols Schols
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lewis Clarke
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ella Lauda
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          O
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ols Schols
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">4/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 80%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">App design</p>
                                    <p class="text-sm text-muted-foreground-1">Branding</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Branding
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Design
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Amanda Harvey
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          James Collins
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ella Lauda
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">2/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 60%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      Mar 3, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>

<tr class="divide-x divide-table-line">
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-3 py-4">
                                    <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <p class="text-sm font-semibold text-foreground">Untitled</p>
                                    <p class="text-sm text-muted-foreground-1">Not defined</p>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="flex flex-wrap gap-1.5 px-4 py-1">
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      IT
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      Tech
                                    </span>
                                    <span class="p-2 bg-surface text-foreground text-xs rounded-md">
                                      B2B
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center -space-x-2">
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          James Collins
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          L
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lori Hunter
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Lewis Clarke
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                                          O
                                        </span>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ols Schols
                                        </span>
                                      </div>
                                      <div class="hs-tooltip hover:z-10">
                                        <img class="shrink-0 size-7 bg-layer border border-layer-line rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          Ella Lauda
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <div class="flex items-center gap-x-3">
                                      <span class="text-sm text-muted-foreground-1">0/5</span>
                                      <div class="flex w-16 h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 0%"></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2">
                                    <span class="text-sm text-foreground">
                                      May 22, 2023
                                    </span>
                                  </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                  <div class="px-5 py-2 flex gap-x-1">
                                    <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                    <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                                    </svg>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          
                        </div>
                      </div>

<div class="flex flex-wrap justify-between items-center gap-2">
                        <p class="text-sm text-foreground">
                          <span class="font-medium">27</span>
                          <span class="text-muted-foreground-1">results</span>
                        </p>
  
                        
                        <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
                          <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                            <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="m15 18-6-6 6-6"/></svg>
                            <span class="sr-only">Previous</span>
                          </button>
                          <div class="flex items-center gap-x-1">
                            <span class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface text-surface-foreground py-2 px-3 text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</span>
                            <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                            <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                          </div>
                          <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                            <span class="sr-only">Next</span>
                            <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="m9 18 6-6-6-6"/></svg>
                          </button>
                        </nav>
                        
                      </div>

</div>

<div id="hs-pro-dicm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-dicm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-dicm-label" class="font-medium text-foreground">
                              Import contacts
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-dicm">
                              <span class="sr-only">Close</span>
                              <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="p-4">
                              
                              <div class="w-full flex gap-x-5 pb-5 mb-5 last:pb-0 last:mb-0 border-b border-line-2 last:border-b-transparent">
                                <svg class="shrink-0 size-8" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <g clip-path="url(#clip0_11766_122209asdasd21123fde)">
                                  <path d="M3.11931 28.4817H8.21019V16.1181L0.937439 10.6636V26.3C0.937439 27.5054 1.91381 28.4819 3.11931 28.4819V28.4817Z" fill="#4285F4"/>
                                  <path d="M25.6647 28.4817H30.7556C31.961 28.4817 32.9374 27.5054 32.9374 26.2999V10.6636L25.6647 16.1181V28.4817Z" fill="#34A853"/>
                                  <path d="M25.6647 6.66356V16.1181L32.9374 10.6636V7.7545C32.9374 5.05812 29.8593 3.51812 27.701 5.13631L25.6647 6.66356Z" fill="#FBBC04"/>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.21021 16.1181V6.66356L16.9375 13.2091L25.6647 6.66356V16.1181L16.9375 22.6636L8.21021 16.1181Z" fill="#EA4335"/>
                                  <path d="M0.937439 7.7545V10.6636L8.21019 16.1181V6.66356L6.17381 5.13631C4.01556 3.51813 0.937439 5.05813 0.937439 7.75438V7.7545Z" fill="#C5221F"/>
                                  </g>
                                  <defs>
                                  <clipPath id="clip0_11766_122209asdasd21123fde">
                                  <rect width="32" height="32" fill="white" transform="translate(0.937439)"/>
                                  </clipPath>
                                  </defs>
                                </svg>
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    Gmail account
                                  </span>
                                  <p class="block text-sm text-muted-foreground-1">
                                    Import your Gmail account contacts.
                                  </p>
                                </div>

<div class="flex flex-col justify-center">
                                  <button type="button" class="p-2 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:bg-primary-focus">
                                    Connect
                                  </button>
                                </div>
                              </div>

<div class="w-full flex gap-x-5 pb-5 mb-5 last:pb-0 last:mb-0 border-b border-line-2 last:border-b-transparent">
                                <svg class="shrink-0 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                                  <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                                </svg>
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    Notion
                                  </span>
                                  <p class="block text-sm text-muted-foreground-1">
                                    Add your contacts to a Notion file and upload it here.
                                  </p>
                                </div>

<div class="w-full flex gap-x-5 pb-5 mb-5 last:pb-0 last:mb-0 border-b border-line-2 last:border-b-transparent">
                                <svg class="shrink-0 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M30.6141 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 12.3359L31.9364 8.86395V3.24228C31.9364 2.89158 31.797 2.55523 31.549 2.30725C31.3011 2.05926 30.9647 1.91994 30.6141 1.91994Z" fill="#41A5EE"/>
                                  <path d="M31.9364 8.86395H8.12839V15.8079L20.0324 19.2799L31.9364 15.8079V8.86395Z" fill="#2B7CD3"/>
                                  <path d="M31.9364 15.8079H8.12839V22.7519L20.0324 26.2239L31.9364 22.7519V15.8079Z" fill="#185ABD"/>
                                  <path d="M31.9364 22.752H8.12839V28.3736C8.12839 28.7244 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.696 9.45071 29.696H30.6141C30.9647 29.696 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7244 31.9364 28.3736V22.752Z" fill="#103F91"/>
                                  <path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/>
                                  <path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/>
                                  <path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/>
                                  <path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/>
                                  <path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16401 23.7439 0.827669 23.6047 0.579687 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579687 8.25922C0.827669 8.01122 1.16401 7.87194 1.51472 7.87194Z" fill="#185ABD"/>
                                  <path d="M12.0468 20.7679H10.2612L8.17801 13.9231L5.99558 20.7679H4.20998L2.22598 10.8479H4.01158L5.40038 17.7919L7.48358 11.0463H8.97161L10.9556 17.7919L12.3444 10.8479H14.0308L12.0468 20.7679Z" fill="white"/>
                                </svg>
                                <div class="grow">
                                  <span class="block text-sm font-medium text-foreground">
                                    Word file
                                  </span>
                                  <span class="block text-sm text-muted-foreground-1">
                                    Add your contacts to a Word file and upload it here.
                                  </span>
                                </div>

<div class="p-4 bg-surface border-t border-surface-line rounded-b-xl">
                            
                            <div class="space-y-2">
                              <label class="block block mb-2 text-sm font-medium text-foreground">
                                Upload file
                              </label>
                              <div class="p-12 flex justify-center bg-layer border border-dashed border-layer-line rounded-xl">
                                <div class="text-center">
                                  <svg class="shrink-0 w-16 text-muted-foreground mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                                  </svg>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
                                    <span class="pe-1 font-medium text-foreground">
                                      Drop your files here or
                                    </span>
                                    <label for="hs-pro-daiccf" class="relative cursor-pointer bg-transparent font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
                                      <span>browse</span>
                                      <input id="hs-pro-daiccf" type="file" class="sr-only">
                                    </label>
                                  </div>

<div id="hs-pro-decm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-decm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-decm-label" class="font-medium text-foreground">
                              Export contacts (2)
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-decm">
                              <span class="sr-only">Close</span>
                              <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div class="mt-2 grid grid-cols-2">
                                  <div class="space-y-2">
                                    
                                    <div class="flex items-center">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmwcdte1" checked>
                                      <label for="hs-pro-duecmwcdte1" class="ms-3 text-sm text-foreground">
                                        Name
                                      </label>
                                    </div>

<div class="flex items-center">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmwcdte2" checked>
                                      <label for="hs-pro-duecmwcdte2" class="ms-3 text-sm text-foreground">
                                        User ID
                                      </label>
                                    </div>

<div class="flex items-center">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmwcdte3" checked>
                                      <label for="hs-pro-duecmwcdte3" class="ms-3 text-sm text-foreground">
                                        Email
                                      </label>
                                    </div>
                                    
                                  </div>

<div class="space-y-2">
                                    
                                    <div class="flex items-center">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmwcdte4" checked>
                                      <label for="hs-pro-duecmwcdte4" class="ms-3 text-sm text-foreground">
                                        Address
                                      </label>
                                    </div>

<div class="flex items-center">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmwcdte5" checked>
                                      <label for="hs-pro-duecmwcdte5" class="ms-3 text-sm text-foreground">
                                        Phone
                                      </label>
                                    </div>

<div class="flex items-center">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmwcdte6">
                                      <label for="hs-pro-duecmwcdte6" class="ms-3 text-sm text-foreground">
                                        Signed up as
                                      </label>
                                    </div>
                                    
                                  </div>
                                  
                                </div>
                                
                              </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
                                <label class="text-sm text-muted-foreground-1">
                                  Choose your format for exporting your contacts:
                                </label>

<div class="mt-2 space-y-2">
                                  
                                  <div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmfm" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmfm1" checked>
                                    <label for="hs-pro-duecmfm1" class="ms-3 text-sm text-foreground">
                                      Regular CSV file
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmfm" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmfm2">
                                    <label for="hs-pro-duecmfm2" class="ms-3 text-sm text-foreground">
                                      Google CSV file
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
                                <label class="text-sm text-muted-foreground-1">
                                  Date range
                                </label>

<div class="space-y-2">
                                  
                                  <div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmdtr" class="shrink-0 size-4 bg-transparent border-surface-2 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmdtr1" checked>
                                    <label for="hs-pro-duecmdtr1" class="ms-3 text-sm text-foreground">
                                      Today (18 Feb)
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmdtr" class="shrink-0 size-4 bg-transparent border-surface-2 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmdtr2">
                                    <label for="hs-pro-duecmdtr2" class="ms-3 text-sm text-foreground">
                                      Current month
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmdtr" class="shrink-0 size-4 bg-transparent border-surface-2 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmdtr3">
                                    <label for="hs-pro-duecmdtr3" class="ms-3 text-sm text-foreground">
                                      Last 7 days
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmdtr" class="shrink-0 size-4 bg-transparent border-surface-2 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmdtr4">
                                    <label for="hs-pro-duecmdtr4" class="ms-3 text-sm text-foreground">
                                      Last month
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmdtr" class="shrink-0 size-4 bg-transparent border-surface-2 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmdtr5">
                                    <label for="hs-pro-duecmdtr5" class="ms-3 text-sm text-foreground">
                                      All
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-duecmdtr" class="shrink-0 size-4 bg-transparent border-surface-2 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-duecmdtr6">
                                    <label for="hs-pro-duecmdtr6" class="ms-3 text-sm text-foreground">
                                      Custom
                                    </label>
                                  </div>

<div class="p-4 flex justify-between gap-x-2">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-decm">
                                Cancel
                              </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-decm">
                                Export
                              </button>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-dasadpm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-dasadpm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-dasadpm-label" class="font-medium text-foreground">
                              Add project
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-dasadpm">
                              <span class="sr-only">Close</span>
                              <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div class="flex flex-wrap items-center gap-3 sm:gap-5">
                                  <span class="flex shrink-0 justify-center items-center size-20 border-2 border-dotted border-line-3 text-muted-foreground rounded-full">
                                    <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
                                  </span>

<div class="grow">
                                    <div class="flex items-center 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-primary border border-primary-line 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" >
                                        <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                                        Upload photo
                                      </button>
      
                                      <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-destructive shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                        Delete
                                      </button>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>

<div>
                                <label for="hs-pro-dalpn" class="block mb-2 text-sm font-medium text-foreground">
                                  Project name
                                </label>

<div>
                                <label for="hs-pro-dalsd" class="block mb-2 text-sm font-medium text-foreground">
                                  Subdomain
                                </label>

<div class="relative">
                                  <input type="text" id="hs-pro-dalsd" class="py-2 sm:py-2.5 ps-3 pe-24 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="myproject">
                                  <div class="absolute inset-y-0 inset-e-0 flex items-center pointer-events-none z-20 pe-4">
                                    <span class="text-sm text-muted-foreground-1">.preline.co</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

<div class="p-4 flex justify-end gap-x-2">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-dasadpm">
                                Cancel
                              </button>

Open related admin dashboard template

Project Report Table with Tabs Pro

Report rows keep project names, owners, metrics, and status markers aligned in fixed columns.

Create a responsive UI block named "Project Report Table with Tabs" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/project-tables/#project-report-table-with-tabs. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/project-tables
- Block ID: project-report-table-with-tabs
- Source description: Report rows keep project names, owners, metrics, and status markers aligned in fixed columns.
- Preview iframe: https://preline.co/blocks/data-display/project-tables/iframes/pro/project-report-table-with-tabs.html (repo path: blocks/data-display/project-tables/iframes/pro/project-report-table-with-tabs.html)
- Source markup reference:
  - partials/pro/project-management/cards/project-reports.html
  - partials/pro/admin-dashboard/sources/tab-headless.html
  - partials/pro/project-management/navbars/sfb-project-demo-calendar-with-selects.html
  - partials/pro/project-management/tables/project-reports-billable.html
  - partials/pro/admin-dashboard/layouts-components/skeleton.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Card header holds exactly three tabs in order - `Tasks`, `Team`, `Invoices` - with `Tasks` active on first load (Preline HSTabs: `data-hs-tab` triggers, `role="tab"`/`role="tabpanel"`, active tab marked by a `hs-tab-active:` underline pseudo-element). The `Team` and `Invoices` panels are `hidden` and contain only an `animate-pulse` skeleton list, not real content.
  - Below the tabs is a toolbar row: heading `Today` on the left; on the right a calendar-icon dropdown button labeled `Today` with a chevron, then a joined control group made of a `Rounding` switch (checkbox `checked` by default) fused to a gear-icon dropdown button whose panel contains labels `Rounding methods` and `Time rounding increments` plus an `Apply` primary button.
  - The table has exactly seven columns in this order: `Billable tasks`, `Budget`, `Spent`, `Remaining`, `Duration`, `Status`, `Costs`. Every header cell is itself an HSDropdown trigger (up/down chevron icon) opening a `w-40` menu with `Sort ascending`, `Sort descending`, `Move left`, `Move right`, a divider, then `Hide in view`.
  - The body has six data rows plus a totals row, in order: `Development`, `Design`, `Testing`, `Marketing`, `Operations`, `Training`, `Total`. Budget values are `$25,000.00`, `$10,000.00`, `$8,500.00`, `$12,000.00`, `$18,500.00`, `$0.00`; Duration values are `3:30:00`, `2:15:00`, `1:40:00`, `2:45:00`, `4:10:00`, `0:00:00`; Costs are `$1,250.00`, `$750.00`, `$500.00`, `$1,000.00`, `$1,750.00`, `$0.00`.
  - The `Spent` cell is an amount followed by an inline `h-1.5` rounded-full progress bar on the same line (`flex items-center gap-x-3`): `$5,000.00`/20%, `$3,000.00`/67%, `$2,500.00`/60%, `$4,000.00`/67%, `$7,500.00`/40%, `$0.00`/0%. `Remaining` reads `$20,000.00 (80%)`, `$7,000.00 (33%)`, `$6,000.00 (40%)`, `$8,000.00 (33%)`, `$11,000.00 (60%)`, `$0.00`.
  - Status pills use exactly three variants: `In progress` (green) on Development/Design/Marketing, `Pending review` (orange) on Testing/Operations, and `Not started` (neutral surface, no color tint) on Training. The totals row's Status cell is deliberately empty.
  - The `Total` row repeats the same cell layout in `font-semibold`: `Total`, `$73,500.00`, `$22,000.00`, `$52,000.00`, `19:25:00`, empty, `$5,250.00` - it is a normal `<tr>` in the same `<tbody>`, not a `<tfoot>` or a separately styled band.
  - The table scrolls horizontally inside an `overflow-x-auto` wrapper with a custom thin scrollbar; the header row sits on `bg-surface`. There is no pagination, no row checkboxes, and no per-row action menu.

<div class="flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
                      
                      <div class="pt-3 px-3.5 border-b border-line-2">
                        <div class="flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
                          
                          <nav  class="flex gap-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                            <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-pdprt-item-tasks" aria-selected="true" data-hs-tab="#hs-pro-tabs-pdprt-tasks" aria-controls="hs-pro-tabs-pdprt-tasks" role="tab" >
                              Tasks
                            </button>
                            <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pdprt-item-team" aria-selected="false" data-hs-tab="#hs-pro-tabs-pdprt-team" aria-controls="hs-pro-tabs-pdprt-team" role="tab" >
                              Team
                            </button>
                            <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus text-muted-foreground-1 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pdprt-item-invoices" aria-selected="false" data-hs-tab="#hs-pro-tabs-pdprt-invoices" aria-controls="hs-pro-tabs-pdprt-invoices" role="tab" >
                              Invoices
                            </button>
                          </nav>
                          
                        </div>
                      </div>

<div>
                        
                        <div class="py-4 px-5 flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
                          <h3 class="font-semibold text-foreground">
                            Today
                          </h3>

<div class="flex justify-end items-center gap-x-2">
                            
                            <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] inline-flex">
                              <button id="hs-pro-prtcm" type="button" class="p-2 inline-flex items-center text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs 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">
                                <svg class="shrink-0 me-2 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"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                                Today
                                <svg class="shrink-0 ms-1.5 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 transition-[opacity,margin] duration opacity-0 hidden z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtcm">
                                
                                    
                                    <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=" 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 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">
                                            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 >
                                            <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">
                                            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 >
                                          <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>
                                      
      
                                      
                                      <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">
                                            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>
                                          <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>
                            </div>

<div class="inline-flex -space-x-px">
                            
                            <div class="ps-2 flex flex-wrap justify-between items-center bg-layer border border-layer-line rounded-s-lg shadow-2xs">
                              <label for="hs-pro-prtrst" class="relative inline-block w-9 h-5 cursor-pointer">
                                <input type="checkbox" id="hs-pro-prtrst" class="peer sr-only" checked>
                                <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                              </label>
                              <label for="hs-pro-prtrst" class="flex-1 py-2 px-2 cursor-pointer font-medium text-xs text-foreground">Rounding</label>
                            </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] inline-flex">
                              <button id="hs-pro-prtrdm" type="button" class="size-8.5 flex shrink-0 justify-center items-center text-xs font-medium rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs 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">
                                <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                              </button>

<div class="relative inline-block w-full">
                                      <select id="hs-pro-select-rounding-methods" data-hs-select='{
                                          "placeholder": "Select rounding methods",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                                          "dropdownClasses": "inset-e-0 w-full max-h-72 p-1 space-y-0.5 z-50 overflow-hidden overflow-y-auto bg-select-1 border border-select-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": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg 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-muted-foreground-1\" 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>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option value="Round to nearest" selected>Round to nearest</option>
                                        <option value="Round up">Round up</option>
                                        <option value="Round down">Round down</option>
                                        <option value="Ceil/Floor options">Ceil/Floor options</option>
                                        <option value="Truncate">Truncate</option>
                                      </select>
                                    </div>
                                    
                                  </div>

<div>
                                    <label class="block mb-2 text-sm text-muted-foreground-1">
                                      Time rounding increments
                                    </label>

<div class="relative inline-block w-full">
                                      <select id="hs-pro-select-simple-time-rounding-increment" data-hs-select='{
                                          "placeholder": "Select time rounding increment",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                                          "dropdownClasses": "inset-e-0 w-full max-h-72 p-1 space-y-0.5 z-50 overflow-hidden overflow-y-auto bg-select-1 border border-select-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": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg 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-muted-foreground-1\" 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>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option value="1 minute">1 minute</option>
                                        <option value="5 minutes">5 minutes</option>
                                        <option value="10 minutes">10 minutes</option>
                                        <option value="15 minutes" selected>15 minutes</option>
                                        <option value="30 minutes">30 minutes</option>
                                        <option value="1 hour">1 hour</option>
                                      </select>
                                    </div>
                                    
                                  </div>

<button type="button" class="py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                    Apply
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                            </div>
                          </div>
                        </div>

<div id="hs-pro-tabs-pdprt-tasks" role="tabpanel" aria-labelledby="hs-pro-tabs-pdprt-item-tasks">
                          
                          <div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="min-w-full inline-block align-middle">
                              
                              <table class="min-w-full divide-y divide-table-line">
                                <thead class="bg-surface border-t border-table-line">
                                  <tr>
                                    <th scope="col" class="w-100">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbbt" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Billable tasks
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbbt">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col" class="min-w-40">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbbd" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Budget
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbbd">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col" class="min-w-60">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbsp" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Spent
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbsp">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col" class="min-w-40">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbrm" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Remaining
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbrm">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbdr" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Duration
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbdr">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbst" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Status
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbst">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-prtbct" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Costs
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-prtbct">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<tbody class="divide-y divide-table-line">
                                  <tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">Development</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$25,000.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <div class="flex items-center gap-x-3">
                                          <span class="text-sm text-foreground">$5,000.00</span>
                                          <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                            <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 20%"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$20,000.00 (80%)</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">3:30:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-green-100 text-green-700 text-start text-nowrap text-[13px] rounded-full dark:bg-green-500/10 dark:text-green-400">
                                          In progress
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$1,250.00</span>
                                      </div>
                                    </td>
                                  </tr>

<tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">Design</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$10,000.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <div class="flex items-center gap-x-3">
                                          <span class="text-sm text-foreground">$3,000.00</span>
                                          <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
                                            <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 67%"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$7,000.00 (33%)</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">2:15:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-green-100 text-green-700 text-start text-nowrap text-[13px] rounded-full dark:bg-green-500/10 dark:text-green-400">
                                          In progress
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$750.00</span>
                                      </div>
                                    </td>
                                  </tr>

<tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">Testing</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$8,500.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <div class="flex items-center gap-x-3">
                                          <span class="text-sm text-foreground">$2,500.00</span>
                                          <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 60%"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$6,000.00 (40%)</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">1:40:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-orange-100 text-orange-700 text-start text-nowrap text-[13px] rounded-full dark:bg-orange-500/10 dark:text-orange-400">
                                          Pending review
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$500.00</span>
                                      </div>
                                    </td>
                                  </tr>

<tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">Marketing</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$12,000.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <div class="flex items-center gap-x-3">
                                          <span class="text-sm text-foreground">$4,000.00</span>
                                          <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100">
                                            <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 67%"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$8,000.00 (33%)</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">2:45:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-green-100 text-green-700 text-start text-nowrap text-[13px] rounded-full dark:bg-green-500/10 dark:text-green-400">
                                          In progress
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$1,000.00</span>
                                      </div>
                                    </td>
                                  </tr>

<tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">Operations</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$18,500.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <div class="flex items-center gap-x-3">
                                          <span class="text-sm text-foreground">$7,500.00</span>
                                          <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                                            <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 40%"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$11,000.00 (60%)</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">4:10:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-orange-100 text-orange-700 text-start text-nowrap text-[13px] rounded-full dark:bg-orange-500/10 dark:text-orange-400">
                                          Pending review
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$1,750.00</span>
                                      </div>
                                    </td>
                                  </tr>

<tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">Training</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$0.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <div class="flex items-center gap-x-3">
                                          <span class="text-sm text-foreground">$0.00</span>
                                          <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                            <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 0%"></div>
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$0.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">0:00:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-surface text-surface-foreground text-start text-nowrap text-[13px] rounded-full">
                                          Not started
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="text-sm text-foreground">$0.00</span>
                                      </div>
                                    </td>
                                  </tr>

<tr>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="font-semibold text-sm text-foreground">Total</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="font-semibold text-sm text-foreground">$73,500.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="font-semibold text-sm text-foreground">$22,000.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="font-semibold text-sm text-foreground">$52,000.00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="font-semibold text-sm text-foreground">19:25:00</span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap">
                                      <div class="py-3 px-5">
                                        <span class="font-semibold text-sm text-foreground">$5,250.00</span>
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              
                            </div>
                          </div>
                          
                        </div>

<div id="hs-pro-tabs-pdprt-team" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pdprt-item-team">
                          <div class="py-3 px-5">
                            
                            <ul class="divide-y divide-line-2">
                              
                              <li class="py-6 first:pt-2 last:pb-2">
                                <div class="animate-pulse">
                                  <div class="flex items-center gap-x-2">
                                    <div class="shrink-0">
                                      <span class="shrink-0 size-7 block bg-surface-1 rounded-md"></span>
                                    </div>

<li class="py-6 first:pt-2 last:pb-2">
                                <div class="animate-pulse">
                                  <div class="flex items-center gap-x-2">
                                    <div class="shrink-0">
                                      <span class="shrink-0 size-7 block bg-surface-1 rounded-md"></span>
                                    </div>

<div id="hs-pro-tabs-pdprt-invoices" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pdprt-item-invoices">
                          <div class="py-3 px-5">
                            
                            <ul class="divide-y divide-line-2">
                              
                              <li class="py-6 first:pt-2 last:pb-2">
                                <div class="animate-pulse">
                                  <div class="flex items-center gap-x-2">
                                    <div class="shrink-0">
                                      <span class="shrink-0 size-7 block bg-surface-1 rounded-md"></span>
                                    </div>

Open related project details page

Project Table with Progress Bars Pro

Logo cells and progress bars share each row, so brand identity and completion state read together.

Create a responsive UI block named "Project Table with Progress Bars" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/project-tables/#project-table-with-progress-bars. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/project-tables
- Block ID: project-table-with-progress-bars
- Source description: Logo cells and progress bars share each row, so brand identity and completion state read together.
- Preview iframe: https://preline.co/blocks/data-display/project-tables/iframes/pro/project-table-with-progress-bars.html (repo path: blocks/data-display/project-tables/iframes/pro/project-table-with-progress-bars.html)
- Source markup reference:
  - partials/pro/project-management/tables/branding-logos-and-progress-bars.html
  - partials/pro/admin-dashboard/dropdowns/table-sorting.html
  - partials/pro/admin-dashboard/sources/simple-empty-state-with-illustration.html

Block-specific fidelity rules:
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - The whole block is one card (`flex flex-col bg-card border border-card-line shadow-xs rounded-xl`) containing only a table - there is no card title, toolbar, search field, or footer/pagination.
  - Four columns in order: `Project name`, `Spent`, `Hours spent`, `Completion`. Every header cell is an HSDropdown trigger with an up/down chevron opening a `w-40` menu of `Sort ascending`, `Sort descending`, `Move left`, `Move right`, a divider, then `Hide in view`.
  - Exactly nine body rows in this order: `Install Google pay`, `Update subscription method`, `Increase productivity with reviews`, `Apple`, `Develop our mobile app`, `Get a complete store audit`, `Redesign Airbnb user profile page`, `Prosperops`, `Untitled`.
  - Each Project name cell is a link to the project detail page laid out as brand SVG (`shrink-0 size-5`, 32 viewBox, multi-color) then a `border-s border-line-2` vertical rule with `ps-4` before the label - the rule between logo and text is easy to miss and must be kept. The nine marks are, in row order: Google Pay, Facebook, Mailchimp, Apple (`fill-foreground` monochrome, the only theme-colored mark), Shopify-style teal/pink mark, a blue cube mark, Airbnb, Prosperops, and Astro.
  - `Spent` values in row order: `$25,000`, `$5,783`, `$36,678`, `$2,623`, `$9,000`, `$3,304`, `$45,320`, `$19,224`, `0`. `Hours spent` values: `34`, `73.1`, `68.7`, `62.4`, `7`, `33.4`, `45`, `78`, `0.1`.
  - Small trend chips sit inline after some numbers only, never on every row: down/destructive `1.8%` on Install Google pay hours, up/teal `1.2%` and `5%` on Update subscription method, up/teal `9.9%` on Apple hours, down `0.4%` on Develop our mobile app spent, up/teal `40.9%` on Get a complete store audit hours, down `3%` on Prosperops hours. Rows Increase productivity with reviews, Redesign Airbnb user profile page, and Untitled carry no chip at all.
  - `Completion` pairs a muted `n/5` count with an inline `h-1.5` rounded-full track on the same line: `1/5` 20%, `2/5` 40%, `4/5` 80%, `1/5` 20%, `4/5` 80%, `3/5` 60%, `1/5` 20%, `2/5` 40%, `0/5` 0%.
  - The source also defines an empty state (`No projects` / `No data here yet. We will notify you when there's an update.` plus an `Add project` button), but the published block renders the populated table - do not ship the empty state as the default view.

<div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      <div class="min-w-full inline-block align-middle">
                        
                        <table class="min-w-full divide-y divide-table-line border-t border-table-line">
                          <thead class="bg-surface">
                            <tr>
                              <th scope="col" class="min-w-62.5">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-ptpn" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Project name
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ptpn">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<th scope="col" class="min-w-48">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-ptsp" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Spent
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ptsp">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<th scope="col" class="min-w-36">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-pths" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Hours spent
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pths">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<th scope="col" class="min-w-28">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-ptcm" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Completion
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ptcm">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<tbody class="divide-y divide-table-line">
                            <tr>
                              <td class="size-px whitespace-nowrap">
                                <a class="py-3 px-5 block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="project-details.html">
                                  <div class="flex items-center gap-x-4">
                                    <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M16.0355 1.75926C10.6408 1.75926 5.30597 1.49951 0.0111241 1C-0.288584 7.23393 5.50578 13.1282 12.7987 14.5668L13.9975 14.7266C14.3372 12.4289 15.9956 3.7773 16.595 1.73928C16.4152 1.75926 16.2353 1.75926 16.0355 1.75926Z" fill="#A49DFF"/>
                                      <path d="M16.615 1.75926C16.615 1.75926 25.2266 7.9932 28.5234 16.3451C30.0419 11.3499 31.1608 6.15498 32 1C26.8051 1.49951 21.71 1.75926 16.615 1.75926Z" fill="#28289A"/>
                                      <path d="M13.9975 14.7466L13.8177 15.9455C13.8177 15.9455 12.2592 28.4133 23.1886 31.9699C25.2266 26.8748 27.0049 21.6599 28.5234 16.3251C21.9698 15.8456 13.9975 14.7466 13.9975 14.7466Z" fill="#5ADCEE"/>
                                      <path d="M16.6149 1.75927C16.0155 3.79729 14.3571 12.4089 14.0175 14.7466C14.0175 14.7466 21.9897 15.8456 28.5233 16.3251C25.1866 7.9932 16.6149 1.75927 16.6149 1.75927Z" fill="#7878FF"/>
                                    </svg>
                                    <div class="grow ps-4 border-s border-line-2">
                                      Install Google pay
                                    </div>
                                  </div>
                                </a>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <span class="text-sm text-foreground">
                                    $25,000
                                  </span>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <span class="text-sm text-foreground">
                                    34
                                    <span class="ms-1 inline-flex items-center gap-x-1 align-middle text-xs lg:text-sm text-destructive">
                                      <svg class="size-4 text-destructive" 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"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
                                      1.8%
                                    </span>
                                  </span>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <div class="flex items-center gap-x-3">
                                    <span class="text-xs text-muted-foreground-1">1/5</span>
                                    <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                      <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 20%"></div>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>

<tr>
                              <td class="size-px whitespace-nowrap">
                                <a class="py-3 px-5 block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="project-details.html">
                                  <div class="flex items-center gap-x-4">
                                    <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <g clip-path="url(#clip0_6173_178913)">
                                      <path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/>
                                      <path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/>
                                      <path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/>
                                      </g>
                                      <defs>
                                      <clipPath id="clip0_6173_178913">
                                      <rect width="32" height="32" fill="white"/>
                                      </clipPath>
                                      </defs>
                                    </svg>
                                    <div class="grow ps-4 border-s border-line-2">
                                      Increase productivity with reviews
                                    </div>
                                  </div>
                                </a>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <span class="text-sm text-foreground">
                                    $36,678
                                  </span>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <span class="text-sm text-foreground">
                                    68.7
                                  </span>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <div class="flex items-center gap-x-3">
                                    <span class="text-xs text-muted-foreground-1">4/5</span>
                                    <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                      <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 80%"></div>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>

<tr>
                              <td class="size-px whitespace-nowrap">
                                <a class="py-3 px-5 block text-sm font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="project-details.html">
                                  <div class="flex items-center gap-x-4">
                                    <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M0.022522 25.602H4.0222V23.0837H9.1218V25.602H13.1215V6.31556H0.022522V25.602Z" fill="#1F2E5C"/>
                                      <path d="M20.121 0.939339C19.521 0.939339 19.0211 1.43899 19.0211 2.03856C19.0211 2.63814 19.521 3.13779 20.121 3.13779C20.7209 3.13779 21.2209 2.63814 21.2209 2.03856C21.2209 1.43899 20.7209 0.939339 20.121 0.939339Z" fill="#1F2E5C"/>
                                      <path d="M20.121 5.99578C19.521 5.99578 19.0211 6.49543 19.0211 7.095C19.0211 7.69458 19.521 8.19423 20.121 8.19423C20.7209 8.19423 21.2209 7.69458 21.2209 7.095C21.2209 6.47544 20.7209 5.99578 20.121 5.99578Z" fill="#1F2E5C"/>
                                      <path d="M20.121 11.0322C19.521 11.0322 19.0211 11.5319 19.0211 12.1315C19.0211 12.731 19.521 13.2307 20.121 13.2307C20.7209 13.2307 21.2209 12.731 21.2209 12.1315C21.2209 11.5319 20.7209 11.0322 20.121 11.0322Z" fill="#1F2E5C"/>
                                      <path d="M25.2606 0.939339C24.6606 0.939339 24.1606 1.43899 24.1606 2.03856C24.1606 2.63814 24.6606 3.13779 25.2606 3.13779C25.8605 3.13779 26.3605 2.63814 26.3605 2.03856C26.3605 1.43899 25.8805 0.939339 25.2606 0.939339Z" fill="#1F2E5C"/>
                                      <path d="M25.2606 5.99578C24.6606 5.99578 24.1606 6.49543 24.1606 7.095C24.1606 7.69458 24.6606 8.19423 25.2606 8.19423C25.8605 8.19423 26.3605 7.69458 26.3605 7.095C26.3605 6.47544 25.8805 5.99578 25.2606 5.99578Z" fill="#1F2E5C"/>
                                      <path d="M25.2606 11.0322C24.6606 11.0322 24.1606 11.5319 24.1606 12.1315C24.1606 12.731 24.6606 13.2307 25.2606 13.2307C25.8605 13.2307 26.3605 12.731 26.3605 12.1315C26.3605 11.5319 25.8805 11.0322 25.2606 11.0322Z" fill="#1F2E5C"/>
                                      <path d="M30.3201 0.939339C29.7202 0.939339 29.2202 1.43899 29.2202 2.03856C29.2202 2.63814 29.7202 3.13779 30.3201 3.13779C30.9201 3.13779 31.42 2.63814 31.42 2.03856C31.44 1.43899 30.9401 0.939339 30.3201 0.939339Z" fill="#1F2E5C"/>
                                      <path d="M30.3201 5.99578C29.7202 5.99578 29.2202 6.49543 29.2202 7.095C29.2202 7.69458 29.7202 8.19423 30.3201 8.19423C30.9201 8.19423 31.42 7.69458 31.42 7.095C31.44 6.47544 30.9401 5.99578 30.3201 5.99578Z" fill="#1F2E5C"/>
                                      <path d="M30.3201 11.0322C29.7202 11.0322 29.2202 11.5319 29.2202 12.1315C29.2202 12.731 29.7202 13.2307 30.3201 13.2307C30.9201 13.2307 31.42 12.731 31.42 12.1315C31.42 11.5319 30.9401 11.0322 30.3201 11.0322Z" fill="#1F2E5C"/>
                                      <path d="M6.722 18.8867C3.10228 18.8068 0.102519 21.6648 0.00252728 25.2822C-0.0974652 28.8997 2.78231 31.8975 6.40202 31.9975C10.0217 32.0974 13.0215 29.2194 13.1215 25.602C13.2015 21.9845 10.3417 18.9667 6.722 18.8867ZM8.76184 27.7804H4.36219V23.4035H8.74185V27.7804H8.76184Z" fill="#DE2179"/>
                                      <path d="M6.56204 13.1108C10.1847 13.1108 13.1215 10.1758 13.1215 6.55539C13.1215 2.93494 10.1847 0 6.56204 0C2.93934 0 0.00256348 2.93494 0.00256348 6.55539C0.00256348 10.1758 2.93934 13.1108 6.56204 13.1108Z" fill="#42BA9B"/>
                                      <path d="M18.4811 17.6476V31.1581H32V17.6476H18.4811ZM29.2602 27.4407H21.2409V25.7619H29.2602V27.4407ZM29.2602 23.0238H21.2409V21.345H29.2602V23.0238Z" fill="#42BA9B"/>
                                    </svg>
                                    <div class="grow ps-4 border-s border-line-2">
                                      Develop our mobile app 
                                    </div>
                                  </div>
                                </a>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <span class="text-sm text-foreground">
                                    $9,000
                                    <span class="ms-1 inline-flex items-center gap-x-1 align-middle text-xs lg:text-sm text-destructive">
                                      <svg class="size-4 text-destructive" 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"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
                                      0.4%
                                    </span>
                                  </span>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <span class="text-sm text-foreground">
                                    7
                                  </span>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap">
                                <div class="py-3 px-5">
                                  <div class="flex items-center gap-x-3">
                                    <span class="text-xs text-muted-foreground-1">4/5</span>
                                    <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                      <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 80%"></div>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>