Tailwind CSS Chart Compositions Blocks

All Blocks
Application UI
Data Display
Chart Compositions

Chart Compositions

Tailwind CSS dashboard chart modules with filters, tabs, legends, card grids, and supporting interface controls.

Stacked Column Chart Card with Side Breakdown Pro

Stacked columns sit beside a breakdown panel, with header totals across the top of the card.

Create a responsive UI block named "Stacked Column Chart Card with Side Breakdown" 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/chart-compositions/#stacked-column-chart-card-with-side-breakdown. 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/chart-compositions
- Block ID: stacked-column-chart-card-with-side-breakdown
- Source description: Stacked columns sit beside a breakdown panel, with header totals across the top of the card.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/stacked-column-chart-card-with-side-breakdown.html (repo path: blocks/data-display/chart-compositions/iframes/pro/stacked-column-chart-card-with-side-breakdown.html)
- Source markup reference:
  - partials/pro/shared-inbox/cards/email-stats-stacked-column-chart.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/shared-inbox/layouts-components/multiple-bars-with-legend-indicators-list.html
  - scripts/plugins/apexcharts.html
  - partials/pro/shared-inbox/js/email-stats-stacked-column-chart.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.

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="flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="border-b border-card-header">
        <div class="py-3 px-5 flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
          <h2 class="font-medium text-foreground">
            Your email stats
          </h2>

<div class="flex justify-end items-center gap-x-2">
            <p class="text-xs text-muted-foreground-1">
              Your performance <span class="py-1 px-2 bg-green-100 text-green-700 text-start text-nowrap text-xs rounded-full dark:bg-green-500/10 dark:text-green-400">Exceeds range</span> to last month
            </p>
          </div>
        </div>
      </div>

<div class="grid grid-cols-12 gap-3">
        <div class="col-span-12 xl:col-span-8 2xl:col-span-9">
          <div class="py-4 px-5">
            
            <div class="mb-2 flex flex-wrap justify-end gap-y-4 gap-x-6">
              
              <div class="flex items-center gap-2">
                <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-xs"></span>
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Leads
                  </span>
                </div>
              </div>

<div class="flex items-center gap-2">
                <span class="shrink-0 size-2.5 inline-block bg-chart-3 rounded-xs"></span>
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Users
                  </span>
                </div>
              </div>
              
            </div>

<div id="hs-pro-iresscch" class="min-h-64 -mx-2"></div>
          </div>
        </div>
        
    
        <div class="col-span-12 xl:col-span-4 2xl:col-span-3 border-t xl:border-t-0 xl:border-s border-card-divider">
          <div class="p-5">
            <h3 class="mb-3 text-sm text-foreground">
              Breakdown
            </h3>

<div class="flex flex-col gap-y-4">
              <div class="mb-3">
                
                <div class="flex gap-x-[3px] w-full h-2.5">
                  <div class="flex flex-col justify-center overflow-hidden bg-primary-800 text-xs text-center rounded-full whitespace-nowrap" style="width: 42%" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                  <div class="flex flex-col justify-center overflow-hidden bg-primary-600 text-xs text-center rounded-full whitespace-nowrap" style="width: 27%" role="progressbar" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"></div>
                  <div class="flex flex-col justify-center overflow-hidden bg-primary-400 text-xs text-center rounded-full whitespace-nowrap" style="width: 16%" role="progressbar" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"></div>
                  <div class="flex flex-col justify-center overflow-hidden bg-primary-200 text-xs text-center rounded-full whitespace-nowrap" style="width: 6%" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
                  <div class="flex flex-col justify-center overflow-hidden bg-surface-1 text-xs text-center rounded-full whitespace-nowrap" style="width: 9%" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                
              </div>

<ul>
                
                <li class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                  <div class="grow">
                    <div class="flex items-center gap-x-2">
                      <span class="shrink-0 size-2.5 inline-block bg-primary-800 rounded-full"></span>
                      <span class="text-sm text-foreground">
                        Emails sent
                      </span>
                    </div>
                  </div>
                  <div class="text-end">
                    <span class="text-sm text-muted-foreground-1">
                      164
                    </span>
                  </div>
                </li>

<li class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                  <div class="grow">
                    <div class="flex items-center gap-x-2">
                      <span class="shrink-0 size-2.5 inline-block bg-primary-600 rounded-full"></span>
                      <span class="text-sm text-foreground">
                        Emails delivered
                      </span>
                    </div>
                  </div>
                  <div class="text-end">
                    <span class="text-sm text-muted-foreground-1">
                      49
                    </span>
                  </div>
                </li>

<li class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                  <div class="grow">
                    <div class="flex items-center gap-x-2">
                      <span class="shrink-0 size-2.5 inline-block bg-primary-400 rounded-full"></span>
                      <span class="text-sm text-foreground">
                        Emails opened
                      </span>
                    </div>
                  </div>
                  <div class="text-end">
                    <span class="text-sm text-muted-foreground-1">
                      26
                    </span>
                  </div>
                </li>

<li class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                  <div class="grow">
                    <div class="flex items-center gap-x-2">
                      <span class="shrink-0 size-2.5 inline-block bg-primary-200 rounded-full"></span>
                      <span class="text-sm text-foreground">
                        Emails replied
                      </span>
                    </div>
                  </div>
                  <div class="text-end">
                    <span class="text-sm text-muted-foreground-1">
                      8
                    </span>
                  </div>
                </li>

<li class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                  <div class="grow">
                    <div class="flex items-center gap-x-2">
                      <span class="shrink-0 size-2.5 inline-block bg-surface-1 rounded-full"></span>
                      <span class="text-sm text-foreground">
                        Emails interested
                      </span>
                    </div>
                  </div>
                  <div class="text-end">
                    <span class="text-sm text-muted-foreground-1">
                      12
                    </span>
                  </div>
                </li>
                
              </ul>
              
            </div>
            
          </div>
        </div>
        
      </div>
      
    </div>

html.classList.toggle("dark", resolvedAppearance === "dark");
        html.setAttribute("data-theme", `theme-${colorTheme}`);
        if (brand) html.setAttribute("data-brand", brand);
        if (font) html.setAttribute("data-font", font);
      })();
    </script>

if (!data.type) return false;
        if (data.type === "hs:color-theme-change") {
          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
            detail: {
              target: document.documentElement,
              value: data.value
            }
          }));
        }
      });
    </script>

return buildTooltip(props, {
                  title: categories[dataPointIndex],
                  mode,
                  valuePrefix: '',
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-28',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
          }), () => ({
            colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-3')],
            grid: {
              borderColor: varToColor('--chart-colors-grid-border')
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels')
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels')
                }
              }
            }
          }), () => ({
            colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-3-inverse')],
            grid: {
              borderColor: varToColor('--chart-colors-grid-border-inverse')
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                }
              }
            }
          }));
        })();
      });
    </script>

Open related shared inbox reports page

Income Summary Card with Area Chart and Payment History New Pro

Income total, period delta, and range switches sit above an area chart and a collapsible list of recent payments.

Create a responsive UI block named "Income Summary Card with Area Chart and Payment History" 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/chart-compositions/#income-summary-card-with-area-chart-and-payment-history. 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/chart-compositions
- Block ID: income-summary-card-with-area-chart-and-payment-history
- Source description: Income total, period delta, and range switches sit above an area chart and a collapsible list of recent payments.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/income-summary-card-with-area-chart-and-payment-history.html (repo path: blocks/data-display/chart-compositions/iframes/pro/income-summary-card-with-area-chart-and-payment-history.html)
- Source markup reference:
  - partials/pro/finance-tracker/cards/income-sources.html
  - partials/pro/finance-tracker/sources/income-history-item.html
  - partials/layout/brand-logo.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/finance-tracker/css/chart-bare-tooltip.html
  - scripts/plugins/apexcharts.html
  - partials/pro/finance-tracker/js/income-sources-chart.html

Block-specific fidelity rules:
- Preserve chart/data behavior when present: axes, scale, legends, tooltip rows, colored keys, empty states, responsive height, and the original chart library/data-binding pattern.
- Do not replace charts, maps, sparklines, or data widgets with static SVG or decorative approximations.
- Source content inventory (from the source markup):
  - Header row pairs an `h2` reading `Income` with an `Add income` button carrying a plus icon.
  - Metric block reads `Total income`, a green up-arrow delta `3.7%`, the qualifier `vs previous 3 months`, then `$24,125` at `text-2xl sm:text-3xl tabular-nums`. All of it is static markup matching the chart's default `3M` range. The arrow group ships both `data-hs-trend-up` and a hidden `data-hs-trend-down`, so a negative delta is a matter of swapping which is hidden - the block ships no script that decides that.
  - A right-aligned range group offers exactly five text buttons in order: `1M`, `3M`, `6M`, `1Y`, `Max`, with `3M` active (`aria-pressed="true"`, `font-medium text-foreground`) and the rest muted.
  - The chart is an empty `div` with `class="hs-chart-bare-tooltip mt-1 min-h-44"` and `role="img"`. The card draws its own tooltip markup, so the stylesheet strips the ApexCharts tooltip shell to transparent under `.hs-chart-bare-tooltip .apexcharts-tooltip`. The element's `id` is only a binding target for the init script, so rename it freely but keep the class.
  - That same rule also raises the shell's `z-index` above ApexCharts' default of 12 (keep it above whatever fixed sidebar or app chrome the destination page has) and pins it with `left: 0 !important`. The pin is load-bearing: ApexCharts parks its shell beside the point and flips it to the other side past the grid midpoint, so a card that centres itself on the shell drifts a full card-width off its own point and hangs off narrow screens. Pinned to the canvas edge, the card positions itself instead - the init script writes `left` plus a `--tt-shift` offset, so the stylesheet and the script must be ported together.
  - The card reads its point's x from the x axis label ApexCharts already placed under that category (`.apexcharts-xaxis-texts-g text`, via `getScreenCTM()`), not from an even division of the plot box - the categories are inset from it and the two do not agree. It centres on that x, then clamps to the plot with `clamp()` so it never leaves the chart; the arrow subtracts `--tt-shift` so it keeps marking the point once the card has stopped moving. Blanked-out ticks still carry their anchor, so every index answers.
  - ApexCharts area chart, height 174, single series named `Income to date`, `stroke.curve: 'stepline'`, solid fill, x-axis `type: 'category'`, and a discrete marker on the final point only.
  - The payment rows below the chart and the curve are drawn from the same series, so editing a row moves the curve with it. The headline and the delta above the chart are not: they are static markup.
  - Deliberately out of scope: the headline, the delta, and the `vs previous 3 months` qualifier do not react to the range buttons. The buttons re-plot the chart, move their own active state, and update the chart's `aria-label`, and stop there. Recomputing headline figures from a range is data binding, not a chart behaviour, so it belongs in the adopting app's own state layer rather than in the block.
  - Four payments render immediately, in order: `Figma salary` / Salary / `Jul 1, 2026` / Monthly / `$3,800.00`, `Slack salary` / Salary / `Jul 5, 2026` / Monthly / `$3,200.00`, `Freelance payout` / Freelance / `Jul 18, 2026` / One-time / `$750.00`, `Campaign payout` / Other / `Jul 24, 2026` / One-time / `$450.00`.
  - Eight more payments (June and May) live inside a Preline `hs-collapse` region `#hs-finance-income-rest`, revealed by a full-width toggle that swaps `Show all 12 payments` for `Show fewer payments` and rotates its chevron.
  - Each row carries its brand mark from the shared brand registry - Figma and Slack as full-color multi-path marks, Mailchimp as its yellow circle, Upwork as a green lowercase `up` wordmark - never a logo file, initials, or a generic icon.
  - Category is shown as a colored dot plus label: Salary uses the primary token, Freelance `bg-chart-7`, Other `bg-chart-10`; the date and frequency follow, separated by a middot.
  - Amounts are `tabular-nums` with the cents rendered in the muted foreground, and each row ends with a `hs-dropdown` kebab menu containing exactly `Edit` and `Delete`.
  - In the source page this article is the left half of a two-column grid, so it carries `2xl:pe-5 2xl:border-e` - drop or re-map that divider when the destination places the card on its own.

<article class="pb-5 min-w-0 flex flex-col border-b border-line-2 2xl:pe-5 2xl:pb-0 2xl:border-e 2xl:border-b-0" aria-labelledby="income-overview-heading">
      <div class="flex items-center justify-between gap-3">
        <h2 id="income-overview-heading" class="font-medium text-foreground">Income</h2>

<button type="button" class="py-2 px-2.5 shrink-0 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-add-income" data-hs-overlay="#hs-ft-add-income">
          <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" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
          Add income
        </button>
      </div>

<div class="mt-4">
        <div class="flex items-center gap-x-2">
          <p class="text-sm text-muted-foreground-1">Total income</p>
          <span id="hs-finance-income-sources-change" class="inline-flex items-center gap-x-1 text-sm text-emerald-600 dark:text-emerald-500">
            <svg class="size-4 shrink-0" 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" aria-hidden="true">
              <g data-hs-trend-up><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></g>
              <g class="hidden" data-hs-trend-down><path d="m19 12-7 7-7-7"/><path d="M12 5v14"/></g>
            </svg>
            <span id="hs-finance-income-sources-change-label" class="tabular-nums">3.7%</span>
          </span>

<span id="hs-finance-income-sources-range-label" class="text-sm text-muted-foreground-1">vs previous 3 months</span>
        </div>

<ul class="mt-4 space-y-3" aria-label="Recent income payments">
        <li class="p-3 flex items-center gap-3 bg-card border border-card-line rounded-xl">
          <div class="min-w-0 grow">
            <div class="flex items-center gap-x-2">
              <span class="size-6 shrink-0 flex justify-center items-center rounded-md" role="img" aria-label="Figma">

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Figma salary</p>
            </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
              
              <span class="inline-flex items-center gap-x-1.5">
                <span class="shrink-0 size-1.5 bg-primary rounded-full" aria-hidden="true"></span>
                Salary
              </span>
              
              
              
              <span>Jul 1, 2026</span>
              <span aria-hidden="true">·</span>
              <span>Monthly</span>
            </div>
          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-figma-jul-actions">
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                View details
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                Edit income
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                Duplicate
              </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                Delete
              </a>
            </div>
          </div>
        </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Slack salary</p>
            </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
              
              <span class="inline-flex items-center gap-x-1.5">
                <span class="shrink-0 size-1.5 bg-primary rounded-full" aria-hidden="true"></span>
                Salary
              </span>
              
              
              
              <span>Jul 5, 2026</span>
              <span aria-hidden="true">·</span>
              <span>Monthly</span>
            </div>
          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-slack-jul-actions">
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                View details
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                Edit income
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                Duplicate
              </a>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Freelance payout</p>
            </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
              
              
              <span class="inline-flex items-center gap-x-1.5">
                <span class="shrink-0 size-1.5 bg-chart-7 rounded-full" aria-hidden="true"></span>
                Freelance
              </span>
              
              
              <span>Jul 18, 2026</span>
              <span aria-hidden="true">·</span>
              <span>One-time</span>
            </div>
          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-upwork-jul-actions">
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                View details
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                Edit income
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                Duplicate
              </a>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Campaign payout</p>
            </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
              
              
              
              <span class="inline-flex items-center gap-x-1.5">
                <span class="shrink-0 size-1.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
                Other
              </span>
              
              <span>Jul 24, 2026</span>
              <span aria-hidden="true">·</span>
              <span>One-time</span>
            </div>
          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-mailchimp-jul-actions">
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                View details
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                Edit income
              </a>
              <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                Duplicate
              </a>

</ul>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Figma salary</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-primary rounded-full" aria-hidden="true"></span>
                  Salary
                </span>
                
                
                
                <span>Jun 1, 2026</span>
                <span aria-hidden="true">·</span>
                <span>Monthly</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-figma-jun-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Slack salary</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-primary rounded-full" aria-hidden="true"></span>
                  Salary
                </span>
                
                
                
                <span>Jun 5, 2026</span>
                <span aria-hidden="true">·</span>
                <span>Monthly</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-slack-jun-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Audience payout</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
                  Other
                </span>
                
                <span>Jun 20, 2026</span>
                <span aria-hidden="true">·</span>
                <span>One-time</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-mailchimp-jun-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Freelance payout</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-chart-7 rounded-full" aria-hidden="true"></span>
                  Freelance
                </span>
                
                
                <span>Jun 26, 2026</span>
                <span aria-hidden="true">·</span>
                <span>One-time</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-upwork-jun-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Figma salary</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-primary rounded-full" aria-hidden="true"></span>
                  Salary
                </span>
                
                
                
                <span>May 1, 2026</span>
                <span aria-hidden="true">·</span>
                <span>Monthly</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-figma-may-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Slack salary</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-primary rounded-full" aria-hidden="true"></span>
                  Salary
                </span>
                
                
                
                <span>May 5, 2026</span>
                <span aria-hidden="true">·</span>
                <span>Monthly</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-slack-may-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Freelance payout</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-chart-7 rounded-full" aria-hidden="true"></span>
                  Freelance
                </span>
                
                
                <span>May 17, 2026</span>
                <span aria-hidden="true">·</span>
                <span>One-time</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-upwork-may-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</span>

<p class="min-w-0 grow truncate text-sm font-medium text-foreground">Campaign payout</p>
              </div>

<div class="mt-1 ps-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground-1">
                
                
                
                <span class="inline-flex items-center gap-x-1.5">
                  <span class="shrink-0 size-1.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
                  Other
                </span>
                
                <span>May 28, 2026</span>
                <span aria-hidden="true">·</span>
                <span>One-time</span>
              </div>
            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 opacity-0 hidden z-50 w-36 mt-2 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg shadow-md transition-[opacity,margin] duration" role="menu" aria-orientation="vertical" aria-labelledby="hs-finance-income-mailchimp-may-actions">
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                  View details
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-edit-income" data-hs-overlay="#hs-ft-edit-income">
                  <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" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                  Edit income
                </a>
                <a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#" role="menuitem">
                  <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" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                  Duplicate
                </a>

<a class="flex items-center gap-x-2.5 py-1.5 px-2.5 rounded-md text-[13px] whitespace-nowrap text-red-600 hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus dark:text-red-500" href="#" role="menuitem">
                  <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                  Delete
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<div class="pt-3 2xl:mt-auto">
        <button type="button" id="hs-finance-income-rest-toggle" class="hs-collapse-toggle py-2 px-2.5 w-full inline-flex justify-center items-center gap-x-1.5 text-xs font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" aria-expanded="false" aria-controls="hs-finance-income-rest" data-hs-collapse="#hs-finance-income-rest">
          <span class="hs-collapse-open:hidden">Show all 12 payments</span>
          <span class="hidden hs-collapse-open:block">Show fewer payments</span>
          <svg class="shrink-0 size-3.5 transition-transform duration-300 hs-collapse-open:rotate-180" 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" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
        </button>
      </div>
    </article>

.apexcharts-xaxistooltip {    
        background: var(--color-primary-600) !important; 
        border-color: var(--color-primary-600) !important; 
      }

.apexcharts-xaxistooltip:after,
      .apexcharts-xaxistooltip:before {
        border-bottom-color: var(--color-primary-600) !important;
      }
    </style>

if (!chartElement) return;

// The payments listed under the chart are the source of truth. The headline,
        // the delta and the curve are all derived from them, so editing a row here
        // moves every number the card shows.
        const CURRENT_DAY = 27;

const incomeSourceCatalog = {
          figma: {
            name: 'Figma',
            logo: `

`
          },
          slack: {
            name: 'Slack',
            logo: `

`
          },
          mailchimp: {
            name: 'Mailchimp',
            logo: `

<span class="inline-flex shrink-0 " aria-hidden="true">
    <svg class="size-3 shrink-0" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <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.96 17.94C9.9 18.04 9.86 18.14 9.84 18.24C9.84 18.26 9.82 18.28 9.82 18.28C9.78 18.4 9.7 18.44 9.64 18.44C9.62 18.44 9.58 18.42 9.56 18.36C9.5 18.02 9.62 17.68 9.84 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.56 20.96 9.06 20.5C8.52 20.04 8.18 19.4 8.1 18.7C8.04 18.22 8.1 17.74 8.28 17.28L7.66 16.76C4.78 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.26 16.62 8.66 17.5 8.78 18.64C8.96 19.7 9.82 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.3 11.84C8.5 13 7.34 15.04 7.9 16.08C8.1 16.32 8.32 16.52 8.56 16.72C8.92 16.2 9.48 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="#111827"/>
    <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="#111827"/>
    </svg>
</span>
`
          },
          upwork: {
            name: 'Upwork',
            logo: `

`
          }
        };

// Same four rows as the payment history below, in the same order.
        const payments = [
          { day: 1, source: 'figma', title: 'Figma salary', amount: 3800 },
          { day: 5, source: 'slack', title: 'Slack salary', amount: 3200 },
          { day: 18, source: 'upwork', title: 'Freelance payout', amount: 750 },
          { day: 24, source: 'mailchimp', title: 'Campaign payout', amount: 450 }
        ];

// Monthly totals, oldest first. The last three are the months the payment
        // history covers, so they match those rows exactly.
        const monthlyIncome = [
          { label: 'Aug 2024', total: 6980 },
          { label: 'Sep 2024', total: 7120 },
          { label: 'Oct 2024', total: 6890 },
          { label: 'Nov 2024', total: 7240 },
          { label: 'Dec 2024', total: 7610 },
          { label: 'Jan 2025', total: 7050 },
          { label: 'Feb 2025', total: 7180 },
          { label: 'Mar 2025', total: 7420 },
          { label: 'Apr 2025', total: 7260 },
          { label: 'May 2025', total: 7390 },
          { label: 'Jun 2025', total: 7540 },
          { label: 'Jul 2025', total: 7680 },
          { label: 'Aug 2025', total: 7420 },
          { label: 'Sep 2025', total: 7550 },
          { label: 'Oct 2025', total: 7310 },
          { label: 'Nov 2025', total: 7690 },
          { label: 'Dec 2025', total: 8120 },
          { label: 'Jan 2026', total: 7480 },
          { label: 'Feb 2026', total: 7640 },
          { label: 'Mar 2026', total: 7905 },
          { label: 'Apr 2026', total: 7720 },
          { label: 'May 2026', total: 7870 },
          { label: 'Jun 2026', total: 8055 },
          { label: 'Jul 2026', total: 8200 }
        ];

const sum = (values) => values.reduce((total, value) => total + value, 0);

const CURRENT_YEAR = '2026';
        const PREVIOUS_YEAR = '2025';
        const CURRENT_MONTH_INDEX = 6;
        const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        const monthsIn = (year, throughIndex = 11) => monthlyIncome.filter((month) => (
          month.label.endsWith(year) && MONTH_ORDER.indexOf(month.label.slice(0, 3)) <= throughIndex
        ));
        const yearToDate = (year) => sum(monthsIn(year, CURRENT_MONTH_INDEX).map((month) => month.total));
        const fullYear = (year) => sum(monthsIn(year).map((month) => month.total));

// Years before the monthly data starts are stated outright; the two recent
        // ones are summed from the months above so they cannot drift.
        const yearlyIncome = [
          { label: '2022', total: 61240 },
          { label: '2023', total: 68950 },
          { label: '2024', total: 79300 },
          { label: PREVIOUS_YEAR, total: fullYear(PREVIOUS_YEAR) },
          { label: CURRENT_YEAR, total: yearToDate(CURRENT_YEAR) }
        ];

// Income lands in lumps, so the curve holds flat between paydays and steps up
        // on them. The last point is always the headline figure above the chart.
        const buildMonthToDate = () => {
          const categories = [];
          const data = [];
          const events = [];
          let running = 0;

for (let day = 1; day <= CURRENT_DAY; day++) {
            const landed = payments.filter((payment) => payment.day === day);

running += sum(landed.map((payment) => payment.amount));
            categories.push(`Jul ${day}`);
            data.push(running);
            events.push(landed);
          }

return { categories, data, events };
        };

const buildMonthly = (months) => {
          const window = monthlyIncome.slice(-months);
          const categories = [];
          const data = [];
          const events = [];
          let running = 0;

window.forEach((month) => {
            running += month.total;
            categories.push(month.label);
            data.push(running);
            events.push([{ title: month.label, amount: month.total }]);
          });

return { categories, data, events };
        };

const buildYearly = () => {
          const categories = [];
          const data = [];
          const events = [];
          let running = 0;

yearlyIncome.forEach((year) => {
            running += year.total;
            categories.push(year.label);
            data.push(running);
            events.push([{ title: year.label, amount: year.total }]);
          });

return { categories, data, events };
        };

const monthToDate = buildMonthToDate();

// Blank out the categories that should not get an axis label, so the tick
        // spacing is decided here rather than by Apex's overlap heuristic.
        const withAxisLabels = (range, tickEvery) => ({
          ...range,
          axisCategories: range.categories.map((label, index) => (
            index % tickEvery === 0 ? label : ''
          ))
        });

// Each range carries the series the chart plots and the wording its screen reader
        // label uses. The headline and delta above the chart are static markup - wiring
        // them to the active range is left to whoever adopts the block.
        const ranges = {
          '1m': {
            ...withAxisLabels(monthToDate, 4),
            srLabel: 'this month so far',
            tickEvery: 4
          },
          '3m': {
            ...withAxisLabels(buildMonthly(3), 1),
            srLabel: 'the last three months',
            tickEvery: 1
          },
          '6m': {
            ...withAxisLabels(buildMonthly(6), 1),
            srLabel: 'the last six months',
            tickEvery: 1
          },
          '1y': {
            ...withAxisLabels(buildMonthly(12), 2),
            srLabel: 'the last twelve months',
            tickEvery: 2
          },
          // Max steps by year rather than by month.
          'max': {
            ...withAxisLabels(buildYearly(), 1),
            srLabel: 'every year on record',
            tickEvery: 1
          }
        };

let activeRange = '3m';

const getChartColor = () => document.documentElement.classList.contains('dark')
          ? varToColor('--chart-colors-primary-inverse')
          : varToColor('--chart-colors-primary');
        const getLastMarker = (data, color) => [{
          seriesIndex: 0,
          dataPointIndex: data.length - 1,
          fillColor: color,
          strokeColor: color,
          size: 4
        }];
        // ApexCharts parks its tooltip shell beside the point and flips it past the grid
        // midpoint, so a card centred on the shell drifts off its own data point and off
        // the screen on narrow viewports. The stylesheet pins the shell to the canvas edge
        // instead and the card places itself here: centred on the point, but clamped so it
        // never leaves the plot. `--tt-shift` carries that clamped offset, and the arrow
        // subtracts it so it stays on the point even once the card has stopped moving.
        // Categories are not spread evenly across the plot box, so the x axis labels - which
        // ApexCharts has already placed under each one - are the only honest source for a
        // point's position. An empty label still carries its anchor, so the blanked-out ticks
        // answer as readily as the visible ones.
        const anchorPoint = (index) => {
          const canvas = chartElement.querySelector('.apexcharts-canvas');
          const plot = chartElement.querySelector('.apexcharts-inner');
          const label = chartElement.querySelectorAll('.apexcharts-xaxis-texts-g text')[index];
          const matrix = label && label.getScreenCTM();

if (!canvas || !plot || !matrix) return { card: 'translate: -50% -50%;', arrow: 'left: 50%;' };

const canvasRect = canvas.getBoundingClientRect();
          const plotRect = plot.getBoundingClientRect();
          const start = plotRect.left - canvasRect.left;
          const x = matrix.a * parseFloat(label.getAttribute('x')) + matrix.e - canvasRect.left;
          // A card wider than the plot leaves nothing to clamp between, and clamp() then
          // resolves to its lower bound, which parks the card at the start edge.
          const shift = `clamp(${(start - x).toFixed(2)}px, -50%, calc(${(start + plotRect.width - x).toFixed(2)}px - 100%))`;

return {
            card: `--tt-shift: ${shift}; left: ${x.toFixed(2)}px; translate: var(--tt-shift) -50%;`,
            arrow: 'left: clamp(0.75rem, calc(-1 * var(--tt-shift)), calc(100% - 0.75rem));'
          };
        };
        const niceMax = (value) => {
          const magnitude = 10 ** Math.floor(Math.log10(value));
          const scaled = value / magnitude;
          const step = scaled <= 1 ? 1 : scaled <= 2 ? 2 : scaled <= 2.5 ? 2.5 : scaled <= 4 ? 4 : scaled <= 5 ? 5 : 10;

return step * magnitude;
        };
        const formatAxisValue = (value) => {
          if (value < 1000) return `$${Math.round(value)}`;

const thousands = value / 1000;

return `$${Number.isInteger(thousands) ? thousands : thousands.toFixed(1)}k`;
        };

const incomeSourcesChart = buildChart('#hs-finance-income-sources-chart', (mode) => {
          const range = ranges[activeRange];
          const color = mode === 'dark'
            ? varToColor('--chart-colors-primary-inverse')
            : varToColor('--chart-colors-primary');

return {
            chart: {
              type: 'area',
              height: 174,
              fontFamily: cssVarToValue('--font-sans'),
              animations: {
                enabled: !window.matchMedia('(prefers-reduced-motion: reduce)').matches,
                easing: 'easeinout',
                speed: 280,
                animateGradually: {
                  enabled: false
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 240
                }
              },
              toolbar: {
                show: false
              },
              zoom: {
                enabled: false
              }
            },
            series: [{
              name: 'Income to date',
              data: range.data
            }],
            colors: [color],
            stroke: {
              curve: 'stepline',
              width: 2.5,
              lineCap: 'square'
            },
            fill: {
              type: 'solid',
              opacity: 0.06
            },
            dataLabels: {
              enabled: false
            },
            legend: {
              show: false
            },
            markers: {
              size: 0,
              discrete: getLastMarker(range.data, color),
              hover: {
                size: 5
              }
            },
            grid: {
              show: true,
              borderColor: mode === 'dark' ? varToColor('--chart-colors-grid-border-inverse') : varToColor('--chart-colors-grid-border'),
              strokeDashArray: 2,
              xaxis: {
                lines: {
                  show: false
                }
              },
              padding: {
                top: 6,
                right: 4,
                bottom: 0,
                left: 4
              }
            },
            xaxis: {
              type: 'category',
              categories: range.axisCategories,
              tooltip: {
                enabled: false
              },
              axisBorder: {
                show: false
              },
              axisTicks: {
                show: false
              },
              labels: {
                hideOverlappingLabels: false,
                rotate: 0,
                style: {
                  colors: mode === 'dark' ? varToColor('--chart-colors-xaxis-labels-inverse') : varToColor('--chart-colors-xaxis-labels'),
                  fontSize: '11px'
                },
              }
            },
            yaxis: {
              min: 0,
              max: niceMax(range.data[range.data.length - 1]),
              tickAmount: 2,
              labels: {
                style: {
                  colors: mode === 'dark' ? varToColor('--chart-colors-yaxis-labels-inverse') : varToColor('--chart-colors-yaxis-labels'),
                  fontSize: '11px'
                },
                formatter: formatAxisValue
              }
            },
            tooltip: {
              custom: function (props) {
                const range = ranges[activeRange];
                const index = props.dataPointIndex;
                const anchor = anchorPoint(index);
                const value = props.series[props.seriesIndex][index];
                const [whole, cents] = Number(value).toFixed(2).split('.');
                const landed = range.events[index] || [];
                const eventRows = landed.map((event) => {
                  const source = event.source ? incomeSourceCatalog[event.source] : null;
                  const [eventWhole, eventCents] = Number(event.amount).toFixed(2).split('.');

return `<li class="flex items-center justify-between gap-x-4">
                    <span class="inline-flex items-center gap-x-2">
                      ${source ? `<span class="size-5 shrink-0 inline-flex items-center justify-center bg-white rounded-sm">${source.logo}</span>` : ''}
                      <span>${event.title}</span>
                    </span>
                    <span class="font-medium tabular-nums">+$${Number(eventWhole).toLocaleString('en-US')}<span class="text-gray-500 dark:text-neutral-400">.${eventCents}</span></span>
                  </li>`;
                }).join('');

return `<div style="${anchor.card}" class="${mode === 'dark' ? 'dark ' : ''}absolute -mt-4 min-w-48 py-2.5 px-3 bg-white border border-gray-200 text-gray-800 rounded-lg shadow-md whitespace-nowrap dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200">
                  <div class="flex items-center justify-between gap-x-4">
                    <span class="text-xs text-gray-500 dark:text-neutral-400">${range.categories[index]}</span>
                    <span class="text-lg font-semibold tabular-nums">$${Number(whole).toLocaleString('en-US')}<span class="text-gray-500 dark:text-neutral-400">.${cents}</span></span>
                  </div>
                  ${eventRows
                    ? `<ul class="mt-2 pt-2 space-y-1.5 border-t border-gray-200 text-xs dark:border-neutral-700">${eventRows}</ul>`
                    : '<p class="mt-2 pt-2 text-xs text-gray-500 border-t border-gray-200 dark:border-neutral-700 dark:text-neutral-400">No payment received</p>'}
                  <span style="${anchor.arrow}" class="absolute top-full -mt-1 -translate-x-1/2 size-2 bg-white border-e border-b border-gray-200 rotate-45 dark:bg-neutral-800 dark:border-neutral-700"></span>
                </div>`;
              }
            }
          };
        }, () => ({
          colors: [varToColor('--chart-colors-primary')]
        }), () => ({
          colors: [varToColor('--chart-colors-primary-inverse')]
        }));

const rangeButtons = document.querySelectorAll('[data-hs-range-preset]');

const applyRange = (range) => {
          const next = ranges[range];

activeRange = range;
          chartElement.setAttribute('aria-label', `Income received over ${next.srLabel}`);

incomeSourcesChart.updateOptions({
            xaxis: {
              categories: next.axisCategories
            },
            yaxis: {
              min: 0,
              max: niceMax(next.data[next.data.length - 1]),
              tickAmount: 2,
              labels: {
                formatter: formatAxisValue
              }
            },
            markers: {
              size: 0,
              discrete: getLastMarker(next.data, getChartColor())
            }
          }, false, false);
          incomeSourcesChart.updateSeries([{
            name: 'Income to date',
            data: next.data
          }], true);

rangeButtons.forEach((button) => {
            const isActive = button.dataset.hsRangePreset === range;

button.classList.toggle('font-medium', isActive);
            button.classList.toggle('text-foreground', isActive);
            button.classList.toggle('text-muted-foreground-1', !isActive);
            button.setAttribute('aria-pressed', `${isActive}`);
          });
        };

rangeButtons.forEach((button) => {
          button.addEventListener('click', () => applyRange(button.dataset.hsRangePreset));
        });
      });
    </script>

Open related finance tracker template

Heatmap Chart Card with Side Breakdown Pro

A heatmap grid sits beside a breakdown panel, with controls and summary rows wrapped around it.

Create a responsive UI block named "Heatmap Chart Card with Side Breakdown" 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/chart-compositions/#heatmap-chart-card-with-side-breakdown. 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/chart-compositions
- Block ID: heatmap-chart-card-with-side-breakdown
- Source description: A heatmap grid sits beside a breakdown panel, with controls and summary rows wrapped around it.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/heatmap-chart-card-with-side-breakdown.html (repo path: blocks/data-display/chart-compositions/iframes/pro/heatmap-chart-card-with-side-breakdown.html)
- Source markup reference:
  - partials/pro/shared-inbox/cards/reports-heatmap-chart.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/shared-inbox/selects/select-heatmap-chart.html
  - partials/pro/shared-inbox/layouts-components/list-group-dashed-divider.html
  - scripts/plugins/apexcharts.html
  - partials/pro/shared-inbox/js/reports-heatmap-chart.html

<div class="flex justify-end items-center gap-x-2">
            <p class="text-xs text-muted-foreground-1">
              Your performance <span class="py-1 px-2 bg-orange-100 text-orange-700 text-start text-nowrap text-xs rounded-full dark:bg-orange-500/10 dark:text-orange-400">Below range</span> to last month
            </p>
          </div>
        </div>
      </div>

<div class="grid grid-cols-12 gap-3">
        <div class="col-span-12 xl:col-span-8 2xl:col-span-9">
          <div class="py-4 px-5">
            
            <div class="flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
              
              <div class="relative inline-block">
                <select id="hs-pro-select-revenue" data-hs-select='{
                    "placeholder": "Select option...",
                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative -ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                    "dropdownClasses": "mt-2 z-50 w-48 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select 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-1.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg 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-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>",
                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" 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></div>"
                  }' class="hidden">
                  <option value="">Choose</option>
                  <option selected>New conversations</option>
                  <option>New inbound conversations</option>
                  <option>Conversations replied to</option>
                  <option>Closed conversations</option>
                  <option>Open conversations</option>
                  <option>Snoozed conversations</option>
                  <option>Reopened conversations</option>
                  <option>Replies sent</option>
                </select>
              </div>

<div class="flex items-center gap-x-2 whitespace-nowrap">
                <span class="text-xs text-foreground">
              0
                </span>
                <div class="inline-flex items-center gap-x-1">
                  <span class="shrink-0 size-2.5 inline-block bg-chart-1 rounded-xs"></span>
                  <span class="shrink-0 size-2.5 inline-block bg-chart-2 rounded-xs"></span>
                  <span class="shrink-0 size-2.5 inline-block bg-chart-3 rounded-xs"></span>
                  <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-xs"></span>
                </div>
                <span class="text-xs text-foreground">
                  4
                </span>
              </div>
              
            </div>

<div id="hs-pro-irhch" class="min-h-96 -mx-2"></div>
          </div>
        </div>
        
    
        <div class="col-span-12 xl:col-span-4 2xl:col-span-3 border-t xl:border-t-0 xl:border-s border-card-divider">
          <div class="p-5">
            
            <div class="flex flex-col">
              
              <div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Monday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    14 new conversations
                  </small>
                </div>

<div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Tuesday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    9 new conversations
                  </small>
                </div>

<div class="min-w-22 flex items-center gap-x-1.5 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <div class="flex items-center gap-0.5">
                      <span class="shrink-0 size-2 inline-block bg-yellow-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-surface-2 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-surface-2 rounded-full"></span>
                    </div>
                    <div class="grow">
                      <span class="block text-xs text-muted-foreground-1">
                        Low
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
  
              
              <div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Wednesday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    21 new conversations
                  </small>
                </div>

<div class="min-w-22 flex items-center gap-x-1.5 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <div class="flex items-center gap-0.5">
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                    </div>
                    <div class="grow">
                      <span class="block text-xs text-muted-foreground-1">
                        High
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
  
              
              <div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Thursday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    19 new conversations
                  </small>
                </div>

<div class="min-w-22 flex items-center gap-x-1.5 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <div class="flex items-center gap-0.5">
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                    </div>
                    <div class="grow">
                      <span class="block text-xs text-muted-foreground-1">
                        High
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
  
              
              <div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Friday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    20 new conversations
                  </small>
                </div>

<div class="min-w-22 flex items-center gap-x-1.5 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <div class="flex items-center gap-0.5">
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-red-500 rounded-full"></span>
                    </div>
                    <div class="grow">
                      <span class="block text-xs text-muted-foreground-1">
                        High
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
  
              
              <div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Saturday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    13 new conversations
                  </small>
                </div>

<div class="min-w-22 flex items-center gap-x-1.5 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <div class="flex items-center gap-0.5">
                      <span class="shrink-0 size-2 inline-block bg-orange-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-orange-500 rounded-full"></span>
                      <span class="shrink-0 size-2 inline-block bg-surface-2 rounded-full"></span>
                    </div>
                    <div class="grow">
                      <span class="block text-xs text-muted-foreground-1">
                        Medium
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
  
              
              <div class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                <div class="grow">
                  <span class="block text-sm text-foreground">
                    Sunday
                  </span>
                  <small class="block text-xs text-muted-foreground-1">
                    7 new conversations
                  </small>
                </div>

const series = [
            {
              name: 'Sun',
              data: [0, 0, 0, 0, 1, 1, 4, 0, 1, 0]
            },
            {
              name: 'Sat',
              data: [1, 0, 3, 0, 0, 1, 2, 4, 1, 1]
            },
            {
              name: 'Fri',
              data: [0, 1, 1, 3, 0, 2, 3, 2, 4, 3]
            },
            {
              name: 'Thu',
              data: [1, 4, 0, 1, 4, 4, 4, 0, 1, 1]
            },
            {
              name: 'Wed',
              data: [1, 1, 2, 2, 3, 4, 2, 1, 1, 4]
            },
            {
              name: 'Tue',
              data: [1, 0, 1, 2, 0, 0, 1, 3, 1, 0]
            },
            {
              name: 'Mon',
              data: [0, 1, 1, 1, 3, 1, 2, 0, 1, 4]
            }
          ];

buildChart('#hs-pro-irhch', (mode) => ({
            chart: {
              type: 'heatmap',
              height: 350,
              toolbar: { show: false }
            },
            dataLabels: {
              enabled: true,
            },
            stroke: {
              width: 4
            },
            plotOptions: {
              heatmap: {
                shadeIntensity: 0.5,
                radius: 6,
                useFillColorAsStroke: false,
              }
            },
            series: series,
            xaxis: {
              categories: timeSlots,
              labels: {
                style: {
                  fontSize: '12px',
                  fontFamily: 'Inter, ui-sans-serif'
                }
              },
              axisBorder: { show: false },
              axisTicks: { show: false },
              tooltip: {
                enabled: true,
                offsetY: 0,
                formatter: function(value) {
                  return `${value}`;
                },
              },
            },
            yaxis: {
              categories: days,
              labels: {
                style: {
                  fontSize: '12px',
                  fontFamily: 'Inter, ui-sans-serif'
                }
              }
            },
            legend: {
              show: false
            },
            tooltip: {
              custom: function (props, b, c) {
                const { dataPointIndex, seriesIndex, series } = props;
                const val = series[seriesIndex][dataPointIndex];
                const bgc = () => {
                  switch (val) {
                    case 2:
                    case 3:
                      return varToColor('--chart-colors-chart-2');
                    case 4:
                      return varToColor('--chart-colors-chart-3');
                    default:
                      return varToColor('--chart-colors-chart-1');
                  }
                };

return buildHeatmapTooltip(props, {
                  mode,
                  wrapperExtClasses: 'min-w-28',
                  valuePrefix: '',
                  divider: ' : ',
                  valuePostfix: ` hr${val === 1 ? '' : 's'}`,
                  markerExtClasses: 'rounded-full!',
                  markerStyles: `background: ${bgc()}`
                });
              }
            },
          }), () => ({
            plotOptions: {
              heatmap: {
                colorScale: {
                  ranges: [
                    { from: 0, to: 0, color: varToColor('--chart-colors-chart-1-hex'), foreColor: varToColor('--chart-colors-foreground'), name: 'Ultra Low' },
                    { from: 1, to: 1, color: varToColor('--chart-colors-chart-2-hex'), foreColor: varToColor('--chart-colors-foreground-inverse'), name: 'Low' },
                    { from: 2, to: 3, color: varToColor('--chart-colors-chart-3-hex'), foreColor: varToColor('--chart-colors-foreground-inverse'), name: 'Medium' },
                    { from: 4, to: 4, color: varToColor('--chart-colors-primary-hex'), foreColor: varToColor('--chart-colors-foreground-inverse'), name: 'High' }
                  ],
                }
              }
            },
            grid: {
              borderColor: varToColor('--chart-colors-grid-border')
            },
            stroke: {
              colors: [varToColor('--chart-colors-background')]
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels')
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels')
                }
              }
            }
          }), () => ({
            plotOptions: {
              heatmap: {
                colorScale: {
                  ranges: [
                    { from: 0, to: 0, color: varToColor('--chart-colors-chart-1-hex-inverse'), foreColor: varToColor('--chart-colors-foreground'), name: 'Ultra Low' },
                    { from: 1, to: 1, color: varToColor('--chart-colors-chart-2-hex-inverse'), foreColor: varToColor('--chart-colors-foreground-inverse'), name: 'Low' },
                    { from: 2, to: 3, color: varToColor('--chart-colors-chart-3-hex-inverse'), foreColor: varToColor('--chart-colors-foreground-inverse'), name: 'Medium' },
                    { from: 4, to: 4, color: varToColor('--chart-colors-primary-hex-inverse'), foreColor: varToColor('--chart-colors-foreground-inverse'), name: 'High' }
                  ],
                }
              }
            },
            grid: {
              borderColor: varToColor('--chart-colors-grid-border-inverse')
            },
            stroke: {
              colors: [varToColor('--chart-colors-background-inverse')]
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse')
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse')
                }
              }
            }
          }));
        })();
      });
    </script>

Open related shared inbox reports page

Area Comparison Chart Card Pro

Two filled series share one plot, with totals and controls stacked above the chart.

Create a responsive UI block named "Area Comparison Chart Card" 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/chart-compositions/#area-comparison-chart-card. 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/chart-compositions
- Block ID: area-comparison-chart-card
- Source description: Two filled series share one plot, with totals and controls stacked above the chart.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/area-comparison-chart-card.html (repo path: blocks/data-display/chart-compositions/iframes/pro/area-comparison-chart-card.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/area-charts-datepicker-and-sortings.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/sources/select-revenue.html
  - partials/pro/admin-dashboard/sources/calendar.html
  - partials/pro/admin-dashboard/dropdowns/button-with-select-options.html
  - partials/pro/admin-dashboard/dropdowns/simple-with-divider.html

<div class="p-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
      
      <div class="grid md:grid-cols-2 items-start gap-2 md:gap-4">
        <div class="space-y-1">
          
          <div class="relative inline-block">
            <select id="hs-pro-select-revenue" data-hs-select='{
                "placeholder": "Select option...",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative -ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                "dropdownClasses": "mt-2 z-50 w-48 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select 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-1.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg 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-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>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" 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></div>"
              }' class="hidden">
              <option value="">Choose</option>
              <option selected>Revenue</option>
              <option>Total sales</option>
              <option>New sales</option>
              <option>Refunds</option>
              <option>New subscriptions</option>
              <option>Trial conversion rate</option>
              <option>Affiliate revenue</option>
              <option>Affiliate clicks</option>
            </select>
          </div>

<p class="text-2xl font-semibold text-foreground">
             $62,820.59
            <svg class="inline-block align-top mt-1 shrink-0 size-5 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>
          </p>
          <p class="text-sm text-destructive">
            0.2% less than the previous 30 days.
          </p>
        </div>

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

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

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

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

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

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

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

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

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

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

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-dachd" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" 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="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>
            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dachd">
              <div class="p-1">
                <div class="py-2 px-3">
                  <span class="block font-semibold text-foreground">
                    Download Report
                  </span>
                  <span class="block text-xs text-muted-foreground-1">
                    Select Options
                  </span>
                </div>

<div class="py-1 px-2">
                  <div class="flex items-center bg-surface rounded-xl p-1">
                    <label for="hs-pro-dachdts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                      <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                      <input type="radio" name="hs-pro-dachdts" class="hidden" id="hs-pro-dachdts1" checked >
                    </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dachds1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Section name
                  </label>
                  <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-dachds1" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dachds2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <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="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/><polyline points="14 2 14 8 20 8"/><path d="M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29"/><path d="M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z"/></svg>Comparison stats
                  </label>
                  <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-dachds2" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dachds3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <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"/></svg>Legend indicator
                  </label>
                  <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-dachds3" checked >
                </div>

<button type="button" class="w-full py-2 px-3 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">
                  Download
                </button>
              </div>
            </div>
            
          </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-dachmd" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
            </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-dachmd">
              <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] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share reports
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
                  View in fullscreen
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
                  Connect other apps
                </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" x2="15" y1="10" y2="10"/><line x1="12" x2="12" y1="7" y2="13"/></svg>
                  Submit Feedback
                </button>
              </div>
            </div>
            
          </div>
          
        </div>
        
      </div>

<div class="flex justify-center sm:justify-end items-center gap-x-4 mt-5 sm:mt-0 sm:mb-6">
        <div class="inline-flex items-center">
          <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
          <span class="text-[13px] text-muted-foreground-1">
            This month
          </span>
        </div>
        <div class="inline-flex items-center">
          <span class="size-2.5 inline-block bg-chart-5 rounded-xs me-2"></span>
          <span class="text-[13px] text-muted-foreground-1">
            Last month
          </span>
        </div>
      </div>

<div id="hs-sales-line-chart" class="min-h-104 "></div>
    </div>

if (t) {
                    const newT = t.split(' ');
                    t = `${newT[0]} ${newT[1].slice(0, 3)}`;
                  }

return t;
                }
              }
            },
            yaxis: {
              labels: {
                align: 'left',
                minWidth: 0,
                maxWidth: 140,
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                  fontSize: '12px',
                  fontFamily: cssVarToValue('--font-sans'),
                  fontWeight: 400
                },
                formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
              }
            },
            tooltip: {
              x: {
                format: 'MMMM yyyy'
              },
              y: {
                formatter: (value) => `$${value >= 1000 ? `${value / 1000}k` : value}`
              },
              custom: function (props) {
                return buildTooltipCompareTwo(props, {
                  title: 'Revenue',
                  mode,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-48',
                });
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 300
                },
                labels: {
                  style: {
                    colors: varToColor('--chart-colors-labels'),
                    fontSize: '11px',
                    fontFamily: cssVarToValue('--font-sans'),
                    fontWeight: 400
                  },
                  offsetX: -2,
                  formatter: (title) => title.slice(0, 3)
                },
                yaxis: {
                  labels: {
                    align: 'left',
                    minWidth: 0,
                    maxWidth: 140,
                    style: {
                      colors: varToColor('--chart-colors-yaxis-labels'),
                      fontSize: '11px',
                      fontFamily: cssVarToValue('--font-sans'),
                      fontWeight: 400
                    },
                    formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                  }
                },
              },
            }]
          }), () => ({
            colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
            fill: {
              gradient: {
                shadeIntensity: .1,
                opacityFrom: .5,
                opacityTo: 0,
                stops: [50, 100, 100, 100]
              }
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                }
              }
            },
            grid: {
              strokeDashArray: 2,
              borderColor: varToColor('--chart-colors-grid-border')
            }
          }), () => ({
            colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
            fill: {
              gradient: {
                shadeIntensity: .1,
                opacityFrom: .5,
                opacityTo: 0,
                stops: [50, 100, 100, 100]
              }
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse')
                }
              }
            },
            grid: {
              strokeDashArray: 2,
              borderColor: varToColor('--chart-colors-grid-border-inverse')
            }
          }));
        })();
      });
    </script>

Open related admin dashboard template

Bar Chart Card with Side Tabs and Links Pro

The bar chart sits beside a tabbed side panel with progress ranges and supporting links.

Create a responsive UI block named "Bar Chart Card with Side Tabs and Links" 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/chart-compositions/#bar-chart-card-with-side-tabs-and-links. 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/chart-compositions
- Block ID: bar-chart-card-with-side-tabs-and-links
- Source description: The bar chart sits beside a tabbed side panel with progress ranges and supporting links.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/bar-chart-card-with-side-tabs-and-links.html (repo path: blocks/data-display/chart-compositions/iframes/pro/bar-chart-card-with-side-tabs-and-links.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/cards/bar-chart-with-tab-content.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/sources/calendar.html
  - partials/pro/admin-dashboard/sources/simple-empty-state-with-illustration.html
  - partials/pro/ecommerce-admin/cards/tab-card-with-progress-and-links.html
  - scripts/plugins/apexcharts.html

<div class="xl:col-span-4 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
      
      <div class="py-3 px-5 flex flex-wrap justify-between items-center gap-2 border-b border-card-header">
        <h2 class="inline-block font-semibold text-foreground">
          Orders
        </h2>

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

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            
            <button id="hs-pro-daaad" type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 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="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 activity
            </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-daaad">
              <div class="p-1">
                <div class="flex justify-between items-center py-1.5 px-2 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dachdds1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-dropdown-item-foreground">
                    <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"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                    Revenue
                  </label>
                  <input type="checkbox" class="shrink-0 size-3.5 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-dachdds1" checked>
                </div>

<div class="flex justify-between items-center py-1.5 px-2 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dachdds2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-dropdown-item-foreground">
                    <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="M14.5 22H18a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M2.97 13.12c-.6.36-.97 1.02-.97 1.74v3.28c0 .72.37 1.38.97 1.74l3 1.83c.63.39 1.43.39 2.06 0l3-1.83c.6-.36.97-1.02.97-1.74v-3.28c0-.72-.37-1.38-.97-1.74l-3-1.83a1.97 1.97 0 0 0-2.06 0l-3 1.83Z"></path><path d="m7 17-4.74-2.85"></path><path d="m7 17 4.74-2.85"></path><path d="M7 17v5"></path></svg>
                    Orders
                  </label>
                  <input type="checkbox" class="shrink-0 size-3.5 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-dachdds2" checked>
                </div>

<div class="flex justify-between items-center py-1.5 px-2 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dachdds3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-dropdown-item-foreground">
                    <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"><polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></svg>
                    Refunds
                  </label>
                  <input type="checkbox" class="shrink-0 size-3.5 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-dachdds3">
                </div>
              </div>
            </div>
            
          </div>
          
        </div>
      </div>

<div class="grid md:grid-cols-8 md:divide-x md:divide-card-divider">
        <div class="md:col-span-5 lg:col-span-6 p-5">
          
          <div id="hs-orders-bar-chart" class="min-h-67 -mx-2"></div>

<div class="flex justify-center items-center gap-x-4">
            <div class="inline-flex items-center">
              <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
              <span class="text-[13px] text-muted-foreground-2">
                In-store
              </span>
            </div>
            <div class="inline-flex items-center">
              <span class="size-2.5 inline-block bg-chart-10 rounded-xs me-2"></span>
              <span class="text-[13px] text-muted-foreground-2">
                Online
              </span>
            </div>
          </div>
          
        </div>

<div class="md:col-span-3 lg:col-span-2">
          <div class="p-2">
            
            <div class="p-2 bg-card">
              
              <nav  class="flex gap-1 relative after:absolute after:bottom-0 after:inset-x-0 after:border-b after:border-line-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                <button type="button" class="hs-tab-active:after:bg-foreground hs-tab-active:text-foreground px-2.5 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 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-0 after:z-1 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-dtsch-item-orders" aria-selected="true" data-hs-tab="#hs-pro-tabs-dtsch-orders" aria-controls="hs-pro-tabs-dtsch-orders" role="tab" >
                  Orders
                </button>
                <button type="button" class="hs-tab-active:after:bg-foreground hs-tab-active:text-foreground px-2.5 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 focus:text-foreground after:absolute after:-bottom-2 after:inset-x-0 after:z-1 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dtsch-item-sales" aria-selected="false" data-hs-tab="#hs-pro-tabs-dtsch-sales" aria-controls="hs-pro-tabs-dtsch-sales" role="tab" >
                  Sales
                </button>
              </nav>

<div class="relative mt-3">
                      <div class="flex w-full h-2 bg-surface-1 rounded-sm overflow-hidden" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-sm overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 72%"></div>
                      </div>
                      <div class="absolute top-1/2 inset-s-[71%] w-2 h-5 bg-primary border-2 border-card rounded-sm transform -translate-y-1/2"></div>
                    </div>

<div class="mt-3 flex justify-between items-center">
                      <span class="text-xs text-foreground">
              0.00
                      </span>
                      <span class="text-xs text-foreground">
                         200,000
                      </span>
                    </div>

<p class="mt-4 text-sm text-muted-foreground-2">
                      A project-wise breakdown of total orders complemented by detailed insights.
                    </p>
                  </div>
                </div>

<div id="hs-pro-tabs-dtsch-sales" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dtsch-item-sales">
                  <div class="py-4">
                    <p class="font-semibold text-xl md:text-2xl text-foreground">
                       $993,758.20
                    </p>

<div class="relative mt-3">
                      <div class="flex w-full h-2 bg-surface-1 rounded-sm overflow-hidden" role="progressbar" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-sm overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 47%"></div>
                      </div>
                      <div class="absolute top-1/2 inset-s-[46%] w-2 h-5 bg-primary border-2 border-card rounded-sm transform -translate-y-1/2"></div>
                    </div>

<div class="mt-3 flex justify-between items-center">
                      <span class="text-xs text-foreground">
              0.00
                      </span>
                      <span class="text-xs text-foreground">
                         $2mln
                      </span>
                    </div>

<p class="mt-4 text-sm text-muted-foreground-2">
                      A project-wise breakdown of total orders complemented by detailed insights.
                    </p>
                  </div>
                </div>
                
              </div>
            </div>

<div>
              
              <a class="p-2 flex items-center gap-x-2 text-sm font-medium text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line rounded-lg">
                  <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="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/></svg>
                </span>
                <div class="grow">
                  <p>
                    Show all highlights
                  </p>
                </div>
                <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="m9 18 6-6-6-6"></path></svg>
              </a>

<a class="p-2 flex items-center gap-x-2 text-sm font-medium text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
                <span class="flex shrink-0 justify-center items-center size-7 bg-layer border border-layer-line rounded-lg">
                  <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="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/></svg>
                </span>
                <div class="grow">
                  <p>
                    Show all sales data
                  </p>
                </div>
                <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="m9 18 6-6-6-6"></path></svg>
              </a>
              
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

return buildTooltip(props, {
                  title: categories[dataPointIndex],
                  mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-36',
                  isValueDivided: false,
                  valuePrefix: '',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 300
                },
                plotOptions: {
                  bar: {
                    columnWidth: '14px'
                  }
                },
                stroke: {
                  width: 10
                },
                responsive: [{
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300
                    },
                    plotOptions: {
                      bar: {
                        columnWidth: '14px'
                      }
                    },
                    stroke: {
                      width: 10
                    },
                    labels: {
                      style: {
                        colors: varToColor('--chart-colors-labels'),
                        fontSize: '11px',
                        fontFamily: cssVarToValue('--font-sans'),
                        fontWeight: 400
                      },
                      offsetX: -2,
                      formatter: (title) => title.slice(0, 3)
                    },
                    yaxis: {
                      labels: {
                        align: 'left',
                        minWidth: 0,
                        maxWidth: 140,
                        style: {
                          colors: varToColor('--chart-colors-yaxis-labels'),
                          fontSize: '11px',
                          fontFamily: cssVarToValue('--font-sans'),
                          fontWeight: 400
                        },
                        formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                      }
                    },
                  },
                }]
              },
            }]
          }), () => ({
            colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-10')],
            grid: {
              borderColor: varToColor('--chart-colors-grid-border')
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                }
              }
            }
          }), () => ({
            colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-10-inverse')],
            grid: {
              borderColor: varToColor('--chart-colors-grid-border-inverse')
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                }
              }
            }
          }));
        })();
      });
    </script>

Open related ecommerce admin dashboard

Line Chart Card Grid with Metric Tiles Pro

A wide line-chart card is paired with smaller metric tiles in one dashboard-style grid.

Create a responsive UI block named "Line Chart Card Grid with Metric Tiles" 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/chart-compositions/#line-chart-card-grid-with-metric-tiles. 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/chart-compositions
- Block ID: line-chart-card-grid-with-metric-tiles
- Source description: A wide line-chart card is paired with smaller metric tiles in one dashboard-style grid.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/line-chart-card-grid-with-metric-tiles.html (repo path: blocks/data-display/chart-compositions/iframes/pro/line-chart-card-grid-with-metric-tiles.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/sources/line-chart-card-grid.html
  - partials/pro/css/third-party/charts.html
  - scripts/plugins/apexcharts.html
  - partials/pro/ecommerce-admin/js/total-orders.html
  - partials/pro/ecommerce-admin/js/total-refunded.html
  - partials/pro/ecommerce-admin/js/total-sales.html

<div class="p-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
      <h2 class="inline-block font-semibold text-foreground">
        Total sales
      </h2>

<div class="grid md:grid-cols-2 items-center gap-y-1 md:gap-y-0 md:gap-x-4">
        <div>
          <p class="text-lg text-foreground">
            $1,597,820.75
            <span class="inline-flex items-center gap-x-1 text-sm text-green-500">
              <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"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
              35.8%
            </span>
          </p>
        </div>

<div class="md:text-end">
          <p class="text-sm text-muted-foreground-1">
            1,347,935 orders
          </p>
        </div>
      </div>

<div id="hs-total-sales-line-chart" class="min-h-54 md:min-h-67 "></div>

<div class="flex justify-center items-center gap-x-4 mt-5">
        <div class="inline-flex items-center">
          <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
          <span class="text-[13px] text-muted-foreground-2">
            This month
          </span>
        </div>
        <div class="inline-flex items-center">
          <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
          <span class="text-[13px] text-muted-foreground-2">
            Last month
          </span>
        </div>
      </div>
      
    </div>

Open related ecommerce admin dashboard

Bar Chart Card with Header Tabs and Summary Pro

Header tabs switch the state while the bar chart and summary blocks stay in one card.

Create a responsive UI block named "Bar Chart Card with Header Tabs and Summary" 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/chart-compositions/#bar-chart-card-with-header-tabs-and-summary. 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/chart-compositions
- Block ID: bar-chart-card-with-header-tabs-and-summary
- Source description: Header tabs switch the state while the bar chart and summary blocks stay in one card.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/bar-chart-card-with-header-tabs-and-summary.html (repo path: blocks/data-display/chart-compositions/iframes/pro/bar-chart-card-with-header-tabs-and-summary.html)
- Source markup reference:
  - partials/pro/crm-dashboard/cards/tabbable-bar-chart.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/sources/simple-empty-state-with-illustration.html
  - scripts/plugins/apexcharts.html
  - partials/pro/crm-dashboard/js/tabbable-bar-chart.html

<div class="xl:col-span-4 flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="py-3 px-5 flex flex-wrap justify-between items-center gap-2 border-b border-card-header">
        <h2 class="font-semibold text-foreground">
          Monthly expenses
        </h2>

<div class="flex justify-center">
          <div id="toggle-count" class="p-0.5 inline-flex bg-layer border border-layer-line rounded-lg">
            <label for="toggle-count-monthly" class="py-2 px-2.5 text-xs text-foreground rounded-md cursor-pointer has-checked:bg-muted-active has-disabled:pointer-events-none has-disabled:opacity-50">
              This week
              <input id="toggle-count-monthly" name="toggle-count" type="radio" class="hidden" value="thisWeek" checked>
            </label>
            <label for="toggle-count-annual" class="py-2 px-2.5 text-xs text-foreground rounded-md cursor-pointer has-checked:bg-muted-active has-disabled:pointer-events-none has-disabled:opacity-50">
              Last week
              <input id="toggle-count-annual" name="toggle-count" type="radio" class="hidden" value="lastWeek">
            </label>
          </div>
        </div>
        
      </div>

<div class="flex flex-wrap justify-end items-center gap-4">
            <div class="inline-flex items-center">
              <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
              <span class="text-[13px] text-muted-foreground-2">
                New
              </span>
            </div>
            <div class="inline-flex items-center">
              <span class="size-2.5 inline-block bg-chart-10 rounded-xs me-2"></span>
              <span class="text-[13px] text-muted-foreground-2">
                Overdue
              </span>
            </div>
          </div>
          
        </div>

<div id="hs-bar-chart" class="min-h-92 -mx-2"></div> 
      </div>
    </div>

toggle.forEach((el) => {
            el.addEventListener('change', (evt) => {
              const { checked, value } = evt.target;

if (checked) barChart.updateSeries(series[value]);
            });
          });
        })();
      });
    </script>

Line Chart Card with Datepicker and Metric Header Pro

A datepicker and metric header sit above the line chart, with the trend taking the full lower panel.

Create a responsive UI block named "Line Chart Card with Datepicker and Metric Header" 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/chart-compositions/#line-chart-card-with-datepicker-and-metric-header. 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/chart-compositions
- Block ID: line-chart-card-with-datepicker-and-metric-header
- Source description: A datepicker and metric header sit above the line chart, with the trend taking the full lower panel.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/line-chart-card-with-datepicker-and-metric-header.html (repo path: blocks/data-display/chart-compositions/iframes/pro/line-chart-card-with-datepicker-and-metric-header.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/lines-charts-with-datepicker.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/sources/calendar.html
  - scripts/plugins/apexcharts.html
  - partials/pro/admin-dashboard/js/lines-charts-with-datepicker.html

<div class="size-full flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
      
      <div class="p-5 pb-3 flex justify-between items-center">
        <h2 class="inline-block font-semibold text-lg text-foreground">
          Total sales
        </h2>

<div class="hs-dropdown [--auto-close:inside] inline-flex">
          <button id="hs-pro-dnic" 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-dnic">
            
                
                <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>

<div class="h-full pb-5 px-5 space-y-8">
        <p class="text-4xl font-medium text-foreground">
          <span class="-me-1.5 text-sm align-top text-muted-foreground-1">$</span>
           43,350
        </p>

<ul class="space-y-3">
          
          <li class="flex flex-wrap justify-between items-center gap-x-2">
            <div>
              <div class="flex items-center gap-x-2">
                <div class="inline-block size-2.5 bg-primary rounded-xs"></div>
                <h2 class="inline-block align-middle text-muted-foreground-1">
                  Store sales
                </h2>
              </div>
            </div>
            <div>
              <span class="text-foreground">
                 $51,392
              </span>
              <span class="ms-3 min-w-20 inline-block text-muted-foreground-1">
                <svg class="inline-block align-middle size-4 text-teal-500" 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 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                38.2%
              </span>
            </div>
          </li>

<li class="flex flex-wrap justify-between items-center gap-x-2">
            <div>
              <div class="flex items-center gap-x-2">
                <div class="inline-block size-2.5 bg-chart-5 rounded-xs"></div>
                <h2 class="inline-block align-middle text-muted-foreground-1">
                  Online sales
                </h2>
              </div>
            </div>
            <div>
              <span class="text-foreground">
                 $46,420
              </span>
              <span class="ms-3 min-w-20 inline-block text-muted-foreground-1">
                <svg class="inline-block align-middle size-4 text-teal-500" 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 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                5.9%
              </span>
            </div>
          </li>
          
      
          
          <li class="flex flex-wrap justify-between items-center gap-x-2">
            <div>
              <div class="flex items-center gap-x-2">
                <div class="inline-block size-2.5 bg-chart-9 rounded-xs"></div>
                <h2 class="inline-block align-middle text-muted-foreground-1">
                  Others
                </h2>
              </div>
            </div>
            <div>
              <span class="text-foreground">
                 $39,539
              </span>
              <span class="ms-3 min-w-20 inline-block text-muted-foreground-1">
                <svg class="inline-block align-middle 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>
                3.1%
              </span>
            </div>
          </li>
          
        </ul>
        
      </div>
      
  
      
      <div class="p-5 pt-0 space-y-8">
        <div class="w-full">
          
          <div id="hs-total-sales-lines-chart" class="min-h-29 "></div>
        </div>
      </div>
      
    </div>

return buildTooltip(props, {
    	              title: title,
    	              mode,
    	              hasTextLabel: true,
    	              wrapperExtClasses: "min-w-48",
    	              labelDivider: ":",
    	              labelExtClasses: "ms-2",
    	            });
    	          },
    	        },
    	      }),
    	      () => ({
    	        colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-5'), varToColor('--chart-colors-chart-9')],
    	        grid: {
    	          borderColor: varToColor('--chart-colors-grid-border'),
    	        },
    	        fill: {
    	          type: "gradient",
    	          gradient: {
    	            gradientToColors: [varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-background')],
    	          },
    	        },
    	      }),
    	      () => ({
    	        colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-5-inverse'), varToColor('--chart-colors-chart-9-inverse')],
    	        grid: {
    	          borderColor: varToColor('--chart-colors-grid-border-inverse'),
    	        },
    	        fill: {
    	          type: "gradient",
    	          gradient: {
    	            gradientToColors: [varToColor('--chart-colors-background-inverse'), varToColor('--chart-colors-background-inverse'), varToColor('--chart-colors-background-inverse')],
    	          },
    	        },
    	      })
    	    );
    	  })();
    	});
    </script>

Open related helpdesk visitors page

Multi-Series Line Chart Card with Metric Header Pro

A compact metric header sits above a multi-series line chart in one reporting card.

Create a responsive UI block named "Multi-Series Line Chart Card with Metric Header" 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/chart-compositions/#multi-series-line-chart-card-with-metric-header. 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/chart-compositions
- Block ID: multi-series-line-chart-card-with-metric-header
- Source description: A compact metric header sits above a multi-series line chart in one reporting card.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/multi-series-line-chart-card-with-metric-header.html (repo path: blocks/data-display/chart-compositions/iframes/pro/multi-series-line-chart-card-with-metric-header.html)
- Source markup reference:
  - partials/pro/helpdesk/cards/reports-conversations.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/helpdesk/cards/simple-stats-with-divider.html
  - scripts/plugins/apexcharts.html
  - partials/pro/helpdesk/js/bar-chart-conversations.html

<div class="flex flex-col bg-card border border-card-line rounded-xl">
      
      <div class="p-3 ps-4 border-b border-card-header">
        <p class="font-medium text-foreground">
          Total conversations
        </p>
      </div>

<div class="p-3 h-full">
        
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 md:gap-5 divide-y sm:divide-y-0 sm:divide-x divide-line-2">
          
          <div class="py-4 sm:py-0 ps-1 sm:pe-4">
            <p class="text-sm text-foreground">
              Support requests
            </p>

<div class="py-4 sm:py-0 ps-1 sm:px-4">
            <p class="text-sm text-foreground">
              Resolved requests
            </p>

<div class="py-4 sm:py-0 ps-1 sm:ps-4">
            <p class="text-sm text-foreground">
              Tickets resolved by Al
            </p>

<div class="mb-2 flex justify-center items-center gap-x-4">
          <div class="inline-flex items-center">
            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
            <span class="text-[13px] text-muted-foreground-2">
              Unresolved
            </span>
          </div>
          <div class="inline-flex items-center">
            <span class="size-2.5 inline-block bg-chart-3 rounded-xs me-2"></span>
            <span class="text-[13px] text-muted-foreground-2">
              Resolved
            </span>
          </div>
          <div class="inline-flex items-center">
            <span class="size-2.5 inline-block bg-chart-10 rounded-xs me-2"></span>
            <span class="text-[13px] text-muted-foreground-2">
              Solved by AI
            </span>
          </div>
        </div>
        
      </div>
    </div>

return buildTooltip(props, {
                  title: categories[dataPointIndex],
                  mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-36',
                  isValueDivided: false,
                  valuePrefix: '',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 300
                },
                plotOptions: {
                  bar: {
                    columnWidth: '14px'
                  }
                },
                stroke: {
                  width: 10
                },
                responsive: [{
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300
                    },
                    plotOptions: {
                      bar: {
                        columnWidth: '14px'
                      }
                    },
                    stroke: {
                      width: 10
                    },
                    labels: {
                      style: {
                        colors: varToColor('--chart-colors-labels'),
                        fontSize: '11px',
                        fontFamily: cssVarToValue('--font-sans'),
                        fontWeight: 400
                      },
                      offsetX: -2,
                      formatter: (title) => title.slice(0, 3)
                    },
                    yaxis: {
                      labels: {
                        align: 'left',
                        minWidth: 0,
                        maxWidth: 140,
                        style: {
                          colors: varToColor('--chart-colors-yaxis-labels'),
                          fontSize: '11px',
                          fontFamily: cssVarToValue('--font-sans'),
                          fontWeight: 400
                        },
                        formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                      }
                    },
                  },
                }]
              },
            }]
          }), () => ({
            colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-3'), varToColor('--chart-colors-chart-10')],
            grid: {
              borderColor: varToColor('--chart-colors-grid-border')
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                }
              }
            }
          }), () => ({
            colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-3-inverse'), varToColor('--chart-colors-chart-10-inverse')],
            grid: {
              borderColor: varToColor('--chart-colors-grid-border-inverse')
            },
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                }
              }
            }
          }));
        })();
      });
    </script>

Open related helpdesk reports page

Area Chart Card with Tabbed Breakdown Pro

Tabs swap the breakdown panels while the area chart stays anchored above the supporting stats.

Create a responsive UI block named "Area Chart Card with Tabbed Breakdown" 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/chart-compositions/#area-chart-card-with-tabbed-breakdown. 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/chart-compositions
- Block ID: area-chart-card-with-tabbed-breakdown
- Source description: Tabs swap the breakdown panels while the area chart stays anchored above the supporting stats.
- Preview iframe: https://preline.co/blocks/data-display/chart-compositions/iframes/pro/area-chart-card-with-tabbed-breakdown.html (repo path: blocks/data-display/chart-compositions/iframes/pro/area-chart-card-with-tabbed-breakdown.html)
- Source markup reference:
  - partials/pro/analytics-dashboard/cards/area-with-tab-content.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/dropdowns/button-with-select-options.html
  - partials/pro/admin-dashboard/dropdowns/simple-with-divider.html
  - partials/pro/admin-dashboard/sources/tab-headless.html
  - scripts/plugins/apexcharts.html

<div class="flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="p-5 pb-2 grid grid-cols-2 items-center gap-x-4">
        <div>
          <h2 class="inline-block font-semibold text-lg text-foreground">
            Total sales
          </h2>
        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dbrrtchddts">
              <div class="p-1">
                <div class="py-2 px-3">
                  <span class="block font-semibold text-foreground">
                    Download Report
                  </span>
                  <span class="block text-xs text-muted-foreground-1">
                    Select Options
                  </span>
                </div>

<div class="py-1 px-2">
                  <div class="flex items-center bg-surface rounded-xl p-1">
                    <label for="hs-pro-dbrrtchddtsts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                      <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                      <input type="radio" name="hs-pro-dbrrtchddtsts" class="hidden" id="hs-pro-dbrrtchddtsts1" checked >
                    </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dbrrtchddtss1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Section name
                  </label>
                  <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-dbrrtchddtss1" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dbrrtchddtss2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <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="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/><polyline points="14 2 14 8 20 8"/><path d="M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29"/><path d="M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z"/></svg>Comparison stats
                  </label>
                  <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-dbrrtchddtss2" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dbrrtchddtss3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <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"/></svg>Legend indicator
                  </label>
                  <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-dbrrtchddtss3" checked >
                </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-dbrrtchmd" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
            </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-dbrrtchmd">
              <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] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share reports
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
                  View in fullscreen
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
                  Connect other apps
                </button>

<div class="h-full p-5 pt-0">
        <h3 class="text-2xl font-medium text-foreground">
           $24,389.55
        </h3>

<div class="pt-4 px-2 mb-3.5">
          <p class="font-medium text-foreground">
            Conversion funnel
          </p>
        </div>

<div class="relative after:absolute after:bottom-0 after:inset-x-2.5 after:border-b after:border-line-2">
          
          <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-dtsch-item-first-time" aria-selected="true" data-hs-tab="#hs-pro-tabs-dtsch-first-time" aria-controls="hs-pro-tabs-dtsch-first-time" role="tab" >
              <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-xs"></span><span class="text-sm text-foreground">First-time</span>
            </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-dtsch-item-returning" aria-selected="false" data-hs-tab="#hs-pro-tabs-dtsch-returning" aria-controls="hs-pro-tabs-dtsch-returning" role="tab" >
              <span class="shrink-0 size-2.5 inline-block bg-chart-6 rounded-xs"></span><span class="text-sm text-foreground">Returning</span>
            </button>
          </nav>
          
        </div>

<div>
          
          <div id="hs-pro-tabs-dtsch-first-time" role="tabpanel" aria-labelledby="hs-pro-tabs-dtsch-item-first-time">
            
            <ul class="px-2">
              
              <li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
                <div class="flex items-center">
                  <span class="text-sm text-foreground">
                    Added to cart
                  </span>
                </div>
                <div class="flex justify-end items-center gap-x-1.5">
                  <span class="text-sm text-muted-foreground-1">
                     37%
                  </span>
                  <span class="text-sm text-destructive">
                    -2%
                  </span>
                </div>
              </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
                <div class="flex items-center">
                  <span class="text-sm text-foreground">
                    Reached checkout
                  </span>
                </div>
                <div class="flex justify-end items-center gap-x-1.5">
                  <span class="text-sm text-muted-foreground-1">
                     489%
                  </span>
                  <span class="text-sm text-teal-500 dark:text-teal-400">
                    +52%
                  </span>
                </div>
              </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
                <div class="flex items-center">
                  <span class="text-sm text-foreground">
                    Sessions converted
                  </span>
                </div>
                <div class="flex justify-end items-center gap-x-1.5">
                  <span class="text-sm text-muted-foreground-1">
                     5%
                  </span>
                  <span class="text-sm text-destructive">
                    -11%
                  </span>
                </div>
              </li>
              
            </ul>
            
          </div>

<div id="hs-pro-tabs-dtsch-returning" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dtsch-item-returning">
            
            <ul class="px-2">
              
              <li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
                <div class="flex items-center">
                  <span class="text-sm text-foreground">
                    Added to cart
                  </span>
                </div>
                <div class="flex justify-end items-center gap-x-1.5">
                  <span class="text-sm text-muted-foreground-1">
                     12%
                  </span>
                  <span class="text-sm text-teal-500 dark:text-teal-400">
                    +19%
                  </span>
                </div>
              </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
                <div class="flex items-center">
                  <span class="text-sm text-foreground">
                    Reached checkout
                  </span>
                </div>
                <div class="flex justify-end items-center gap-x-1.5">
                  <span class="text-sm text-muted-foreground-1">
                     4%
                  </span>
                  <span class="text-sm text-teal-500 dark:text-teal-400">
                    +0.2%
                  </span>
                </div>
              </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
                <div class="flex items-center">
                  <span class="text-sm text-foreground">
                    Sessions converted
                  </span>
                </div>
                <div class="flex justify-end items-center gap-x-1.5">
                  <span class="text-sm text-muted-foreground-1">
                     34%
                  </span>
                  <span class="text-sm text-destructive">
                    -0.1%
                  </span>
                </div>
              </li>
              
            </ul>
            
          </div>
          
        </div>
      </div>

<div class="text-center border-t border-card-footer">
        <a class="p-3 flex justify-center items-center gap-x-2 text-sm text-primary rounded-b-lg hover:text-primary-hover focus:outline-hidden focus:decoration-2 focus:underline focus:text-primary-focus" href="#">
          View full reports
        </a>
      </div>
      
    </div>

Open related analytics dashboard page