Containr/docs/archive/research/usables.md

# Usable UI Components

This document contains reusable UI components for the Containr project. All components are built with React, TypeScript, and styled using Tailwind CSS with a consistent design system.

## 📊 Dashboard & Analytics Components

### Metric Cards

#### Sales Metric Card
Displays total sales with trend indicator and time period selector.

**Features:**
- Large metric display ($128.32)
- Trend indicator (+2% with green styling)
- Time period buttons (1D, 1W, 1M, 3M, 6M, 1Y)
- Report action button

**Usage:** Perfect for dashboard overviews, KPI displays, and analytics summaries.

---

#### Visitors Metric Card
Shows visitor statistics with device breakdown and trends.

**Features:**
- Visitor count display (237,456)
- Trend indicator (-1.4% with red styling for decline)
- Device type breakdown (Desktop: 27%, Mobile: 63%, Tablet: 10%)
- Device-specific trend indicators
- Report action button

**Usage:** Ideal for traffic analytics, user behavior dashboards, and marketing metrics.

---

#### Conversion Rate Card
Displays conversion metrics with funnel breakdown.

**Features:**
- Main conversion rate (16.9%)
- Trend indicator (+2.1% growth)
- Conversion funnel stages:
  - Added to Cart: 3,842 (+12%)
  - Checkout Started: 2,156 (+8%)
  - Payment Completed: 1,842 (+5%)
- Mini sparkline chart
- Details action button

**Usage:** E-commerce dashboards, sales funnel analysis, conversion optimization tracking.

---

## 📈 Charts & Visualizations

### Visitor Channels Chart
Horizontal stacked bar chart showing traffic source distribution.

**Features:**
- Overall percentage (78%)
- Trend indicator (-0.4%)
- Visual channel breakdown:
  - Organic Search: 45% (gray)
  - Direct Traffic: 40% (blue)
  - Social Media: 15% (green)
- Channel labels with percentages
- Details action button

**Usage:** Marketing analytics, traffic source analysis, channel performance tracking.</div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Report</button></div><div role="group" dir="ltr" class="-space-x-[1.5px] grid auto-cols-fr grid-flow-col" tabindex="0" style="outline: none;"><button type="button" data-state="off" role="radio" aria-checked="false" class="group relative flex items-center justify-center whitespace-nowrap bg-bg-white-0 text-center text-text-sub-600 outline-none border border-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:bg-bg-weak-50 focus:outline-none data-[state=on]:bg-bg-weak-50 data-[state=on]:text-text-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 h-6 gap-3 px-3 text-label-xs first:rounded-l-md last:rounded-r-md" tabindex="-1" data-radix-collection-item="">1D</button><button type="button" data-state="on" role="radio" aria-checked="true" class="group relative flex items-center justify-center whitespace-nowrap bg-bg-white-0 text-center text-text-sub-600 outline-none border border-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:bg-bg-weak-50 focus:outline-none data-[state=on]:bg-bg-weak-50 data-[state=on]:text-text-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 h-6 gap-3 px-3 text-label-xs first:rounded-l-md last:rounded-r-md" tabindex="-1" data-radix-collection-item="">1W</button><button type="button" data-state="off" role="radio" aria-checked="false" class="group relative flex items-center justify-center whitespace-nowrap bg-bg-white-0 text-center text-text-sub-600 outline-none border border-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:bg-bg-weak-50 focus:outline-none data-[state=on]:bg-bg-weak-50 data-[state=on]:text-text-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 h-6 gap-3 px-3 text-label-xs first:rounded-l-md last:rounded-r-md" tabindex="-1" data-radix-collection-item="">1M</button><button type="button" data-state="off" role="radio" aria-checked="false" class="group relative flex items-center justify-center whitespace-nowrap bg-bg-white-0 text-center text-text-sub-600 outline-none border border-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:bg-bg-weak-50 focus:outline-none data-[state=on]:bg-bg-weak-50 data-[state=on]:text-text-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 h-6 gap-3 px-3 text-label-xs first:rounded-l-md last:rounded-r-md" tabindex="-1" data-radix-collection-item="">3M</button><button type="button" data-state="off" role="radio" aria-checked="false" class="group relative flex items-center justify-center whitespace-nowrap bg-bg-white-0 text-center text-text-sub-600 outline-none border border-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:bg-bg-weak-50 focus:outline-none data-[state=on]:bg-bg-weak-50 data-[state=on]:text-text-strong-950 disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 h-6 gap-3 px-3 text-label-xs first:rounded-l-md last:rounded-r-md" tabindex="-1" data-radix-collection-item="">1Y</button></div><div class="recharts-responsive-container" style="width: 100%; height: 108px; min-width: 0px;"><div class="recharts-wrapper [&amp;_.recharts-cartesian-grid-horizontal&gt;line]:stroke-stroke-soft-200 [&amp;_.recharts-cartesian-grid-horizontal&gt;line]:[stroke-dasharray:0] [&amp;_.recharts-cartesian-grid-vertical&gt;line:last-child]:opacity-0 [&amp;_.recharts-cartesian-grid-vertical&gt;line:nth-last-child(2)]:opacity-0" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 108px; max-width: 481px;"><svg class="recharts-surface" width="481" height="108" viewBox="0 0 481 108" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts3-clip"><rect x="0" y="6" height="96" width="481"></rect></clipPath></defs><g class="recharts-cartesian-grid"><g class="recharts-cartesian-grid-horizontal"><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="0" y1="54" x2="481" y2="54"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="0" y1="6" x2="481" y2="6"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="0" y1="102" x2="481" y2="102"></line></g><g class="recharts-cartesian-grid-vertical"><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="74" y1="6" x2="74" y2="102"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="160.33333333333334" y1="6" x2="160.33333333333334" y2="102"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="246.66666666666669" y1="6" x2="246.66666666666669" y2="102"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="333" y1="6" x2="333" y2="102"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="481" y1="6" x2="481" y2="102"></line><line stroke-dasharray="4 4" class="stroke-stroke-soft-200" stroke="#ccc" fill="none" x="0" y="6" width="481" height="96" x1="0" y1="6" x2="0" y2="102"></line></g></g><g class="recharts-layer recharts-line"><path stroke="hsl(var(--primary-base))" stroke-width="2" stroke-linejoin="round" fill="none" width="481" height="96" class="recharts-curve recharts-line-curve" d="M0,64.08L12.333,80.376L24.667,84.432L37,19.104L49.333,71.76L61.667,54.312L74,57.096L86.333,24.12L98.667,43.56L111,44.592L123.333,70.008L135.667,17.376L148,36.624L160.333,85.656L172.667,71.76L185,15.264L197.333,30.504L209.667,72.168L222,78.816L234.333,97.464L246.667,9.312L259,50.136L271.333,44.976L283.667,95.304L296,56.592L308.333,54.744L320.667,84.36L333,93.12L345.333,61.248L357.667,66.264L370,45.168L382.333,32.304L394.667,91.896L407,80.376L419.333,66.624L431.667,39.264L444,37.416L456.333,37.344L468.667,7.32L481,46.128"></path><g class="recharts-layer"></g></g></svg></div></div><div class="flex w-full flex-col gap-4"><div class="flex items-center gap-1.5"><div class="flex flex-1 items-center gap-1.5"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-text-soft-400"><path d="M21 13.2422V20H22V22H2V20H3V13.2422C1.79401 12.435 1 11.0602 1 9.5C1 8.67286 1.22443 7.87621 1.63322 7.19746L4.3453 2.5C4.52393 2.1906 4.85406 2 5.21132 2H18.7887C19.1459 2 19.4761 2.1906 19.6547 2.5L22.3575 7.18172C22.7756 7.87621 23 8.67286 23 9.5C23 11.0602 22.206 12.435 21 13.2422ZM19 13.9725C18.8358 13.9907 18.669 14 18.5 14C17.2409 14 16.0789 13.478 15.25 12.6132C14.4211 13.478 13.2591 14 12 14C10.7409 14 9.5789 13.478 8.75 12.6132C7.9211 13.478 6.75911 14 5.5 14C5.331 14 5.16417 13.9907 5 13.9725V20H19V13.9725ZM5.78865 4L3.35598 8.21321C3.12409 8.59843 3 9.0389 3 9.5C3 10.8807 4.11929 12 5.5 12C6.53096 12 7.44467 11.3703 7.82179 10.4295C8.1574 9.59223 9.3426 9.59223 9.67821 10.4295C10.0553 11.3703 10.969 12 12 12C13.031 12 13.9447 11.3703 14.3218 10.4295C14.6574 9.59223 15.8426 9.59223 16.1782 10.4295C16.5553 11.3703 17.469 12 18.5 12C19.8807 12 21 10.8807 21 9.5C21 9.0389 20.8759 8.59843 20.6347 8.19746L18.2113 4H5.78865Z"></path></svg><div class="text-label-sm text-text-sub-600">Online Store</div></div><div class="flex items-center gap-1.5"><div class="min-w-16 text-paragraph-sm tabular-nums text-text-sub-600">$52.12</div><div class="flex min-w-16 items-center justify-end gap-0.5 pl-1 text-right tabular-nums"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-success-base"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg><div class="text-paragraph-sm text-text-sub-600">+4.5%</div></div></div></div><div class="flex items-center gap-1.5"><div class="flex flex-1 items-center gap-1.5"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-text-soft-400"><path d="M13.001 19.9381C16.9473 19.446 20.001 16.0796 20.001 12C20.001 7.58172 16.4193 4 12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 16.0796 7.05467 19.446 11.001 19.9381V14H9.00098V12H11.001V10.3458C11.001 9.00855 11.1402 8.52362 11.4017 8.03473C11.6631 7.54584 12.0468 7.16216 12.5357 6.9007C12.9184 6.69604 13.3931 6.57252 14.2227 6.51954C14.5519 6.49851 14.9781 6.52533 15.501 6.6V8.5H15.001C14.0837 8.5 13.7052 8.54332 13.4789 8.66433C13.3386 8.73939 13.2404 8.83758 13.1653 8.97793C13.0443 9.20418 13.001 9.42853 13.001 10.3458V12H15.501L15.001 14H13.001V19.9381ZM12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22Z"></path></svg><div class="text-label-sm text-text-sub-600">Facebook</div></div><div class="flex items-center gap-1.5"><div class="min-w-16 text-paragraph-sm tabular-nums text-text-sub-600">$38.45</div><div class="flex min-w-16 items-center justify-end gap-0.5 pl-1 text-right tabular-nums"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-error-base"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"></path></svg><div class="text-paragraph-sm text-text-sub-600">-2.8%</div></div></div></div><div class="flex items-center gap-1.5"><div class="flex flex-1 items-center gap-1.5"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-text-soft-400"><path d="M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z"></path></svg><div class="text-label-sm text-text-sub-600">Instagram</div></div><div class="flex items-center gap-1.5"><div class="min-w-16 text-paragraph-sm tabular-nums text-text-sub-600">$37.75</div><div class="flex min-w-16 items-center justify-end gap-0.5 pl-1 text-right tabular-nums"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 text-success-base"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg><div class="text-paragraph-sm text-text-sub-600">+3.2%</div></div></div></div></div></div>



<div class="relative flex w-full flex-col gap-5 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="text-label-sm text-text-sub-600">Total Visitors</div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">237,456</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-error-light text-error-dark">-1.4%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Report</button></div><div role="separator" class="relative flex w-full items-center h-1 before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200"></div><div class="flex gap-4"><div class="flex h-60 flex-1 flex-col gap-4"><div class="w-full flex-1"><div class="text-label-sm text-text-soft-400">Desktop</div><div class="mt-1 text-title-h6 text-text-strong-950">27%</div></div><div class="flex items-center gap-0.5"><div class="text-label-sm text-text-sub-600">-3.2%</div><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 text-error-base"><path d="M9 13.589L17.6066 4.98242L19.0208 6.39664L10.4142 15.0032H18V17.0032H7V6.00324H9V13.589Z"></path></svg></div><div class="h-2 w-full rounded-sm bg-away-base"></div></div><div class="relative w-0"><div class="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 text-stroke-soft-200" style="background: linear-gradient(currentcolor 4px, transparent 4px) 50% 50% / 1px 10px repeat-y;"></div></div><div class="flex h-60 flex-1 flex-col gap-4"><div class="w-full flex-1"><div class="text-label-sm text-text-soft-400">Tablet</div><div class="mt-1 text-title-h6 text-text-strong-950">12%</div></div><div class="flex items-center gap-0.5"><div class="text-label-sm text-text-sub-600">-6.4%</div><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 text-error-base"><path d="M9 13.589L17.6066 4.98242L19.0208 6.39664L10.4142 15.0032H18V17.0032H7V6.00324H9V13.589Z"></path></svg></div><div class="h-2 w-full rounded-sm bg-verified-base"></div></div><div class="relative w-0"><div class="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 text-stroke-soft-200" style="background: linear-gradient(currentcolor 4px, transparent 4px) 50% 50% / 1px 10px repeat-y;"></div></div><div class="flex h-60 flex-1 flex-col gap-4"><div class="w-full flex-1"><div class="text-label-sm text-text-soft-400">Mobile</div><div class="mt-1 text-title-h6 text-text-strong-950">61%</div></div><div class="flex items-center gap-0.5"><div class="text-label-sm text-text-sub-600">+0.8%</div><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 text-success-base"><path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path></svg></div><div class="h-2 w-full rounded-sm bg-feature-base"></div></div></div></div>


<div class="relative flex w-full flex-col gap-5 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="text-label-sm text-text-sub-600">Conversion Rate</div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">16.9%</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">+2.1%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div role="separator" class="relative flex w-full items-center h-1 before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200"></div><div class="flex w-full flex-col gap-3"><div class="flex items-center gap-1.5"><div class="flex-1 text-label-sm text-text-sub-600">Added to Cart</div><div class="flex items-center gap-1.5"><div class="min-w-16 text-label-sm tabular-nums text-text-sub-600">3,842</div><div class="flex min-w-16 items-center justify-end gap-0.5 pl-1 text-right tabular-nums"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-success-base"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg><div class="text-paragraph-sm text-text-sub-600">+1.8%</div></div></div></div><div class="flex items-center gap-1.5"><div class="flex-1 text-label-sm text-text-sub-600">Reached Checkout</div><div class="flex items-center gap-1.5"><div class="min-w-16 text-label-sm tabular-nums text-text-sub-600">1,256</div><div class="flex min-w-16 items-center justify-end gap-0.5 pl-1 text-right tabular-nums"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 shrink-0 text-error-base"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"></path></svg><div class="text-paragraph-sm text-text-sub-600">-1.2%</div></div></div></div><div class="flex items-center gap-1.5"><div class="flex-1 text-label-sm text-text-sub-600">Purchased</div><div class="flex items-center gap-1.5"><div class="min-w-16 text-label-sm tabular-nums text-text-sub-600">649</div><div class="flex min-w-16 items-center justify-end gap-0.5 pl-1 text-right tabular-nums"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-5 text-success-base"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg><div class="text-paragraph-sm text-text-sub-600">+2.4%</div></div></div></div></div><div class="relative w-full" style="height: 136px;"><div class="absolute inset-0 overflow-hidden rounded-lg ring-1 ring-inset ring-stroke-soft-200" style="height: 112px; background: linear-gradient(90deg, hsl(var(--stroke-soft-200)) 1px, #0000 1px 100%) 0 0 / calc(100% / 6) 112px repeat no-repeat,
            linear-gradient(180deg, hsl(var(--stroke-soft-200)) 1px, #0000 1px 100%) 0 0 / 100% calc(112px / 4) no-repeat repeat;"></div><div class="absolute bottom-6 left-0 z-10 size-4 overflow-hidden"><div class="size-4 rounded-bl-lg" style="box-shadow: -100px 100px 0 100px hsl(var(--bg-white-0));"></div></div><div class="absolute bottom-6 right-0 z-10 size-4 overflow-hidden"><div class="size-4 rounded-br-lg" style="box-shadow: 100px 100px 0 100px hsl(var(--bg-white-0));"></div></div><div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 136px; max-width: 481px;"><svg class="recharts-surface" width="481" height="136" viewBox="0 0 481 136" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts6-clip"><rect x="0" y="0" height="112" width="481"></rect></clipPath></defs><g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis [&amp;_.recharts-cartesian-axis-tick_text]:fill-text-soft-400 [&amp;_.recharts-cartesian-axis-tick_text]:text-subheading-2xs"><g class="recharts-cartesian-axis-ticks"><g class="recharts-layer recharts-cartesian-axis-tick"><text orientation="bottom" width="481" height="24" stroke="none" x="28.294117647058822" y="126" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666"><tspan x="28.294117647058822" dy="0.71em">JUL '23</tspan></text></g><g class="recharts-layer recharts-cartesian-axis-tick"><text orientation="bottom" width="481" height="24" stroke="none" x="113.17647058823529" y="126" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666"><tspan x="113.17647058823529" dy="0.71em">OCT '23</tspan></text></g><g class="recharts-layer recharts-cartesian-axis-tick"><text orientation="bottom" width="481" height="24" stroke="none" x="198.05882352941177" y="126" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666"><tspan x="198.05882352941177" dy="0.71em">JAN '24</tspan></text></g><g class="recharts-layer recharts-cartesian-axis-tick"><text orientation="bottom" width="481" height="24" stroke="none" x="282.94117647058823" y="126" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666"><tspan x="282.94117647058823" dy="0.71em">APR '24</tspan></text></g><g class="recharts-layer recharts-cartesian-axis-tick"><text orientation="bottom" width="481" height="24" stroke="none" x="367.8235294117647" y="126" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666"><tspan x="367.8235294117647" dy="0.71em">JUL '24</tspan></text></g><g class="recharts-layer recharts-cartesian-axis-tick"><text orientation="bottom" width="481" height="24" stroke="none" x="458.2562484741211" y="126" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666"><tspan x="458.2562484741211" dy="0.71em">NOV '24</tspan></text></g></g></g><g class="recharts-layer recharts-area fill-bg-white-0"><g class="recharts-layer"><path fill="hsl(var(--bg-white-0))" class="recharts-curve recharts-area-area" fill-opacity="1" width="481" height="112" stroke="none" d="M0,35L28.294,0L56.588,8.4L84.882,16.8L113.176,61.6L141.471,33.6L169.765,2.8L198.059,39.2L226.353,9.8L254.647,71.4L282.941,35L311.235,14L339.529,39.2L367.824,5.6L396.118,22.4L424.412,15.4L452.706,40.6L481,25.2L481,112L452.706,112L424.412,112L396.118,112L367.824,112L339.529,112L311.235,112L282.941,112L254.647,112L226.353,112L198.059,112L169.765,112L141.471,112L113.176,112L84.882,112L56.588,112L28.294,112L0,112Z"></path></g></g><g class="recharts-layer recharts-area fill-primary-alpha-16"><g class="recharts-layer"><path fill="hsl(var(--primary-alpha-16))" fill-opacity="1" class="recharts-curve recharts-area-area" width="481" height="112" stroke="none" d="M0,35L28.294,0L56.588,8.4L84.882,16.8L113.176,61.6L141.471,33.6L169.765,2.8L198.059,39.2L226.353,9.8L254.647,71.4L282.941,35L311.235,14L339.529,39.2L367.824,5.6L396.118,22.4L424.412,15.4L452.706,40.6L481,25.2L481,112L452.706,112L424.412,112L396.118,112L367.824,112L339.529,112L311.235,112L282.941,112L254.647,112L226.353,112L198.059,112L169.765,112L141.471,112L113.176,112L84.882,112L56.588,112L28.294,112L0,112Z"></path></g></g><g class="recharts-layer recharts-area fill-primary-base"><g class="recharts-layer"><path fill="hsl(var(--primary-base))" fill-opacity="1" class="recharts-curve recharts-area-area" width="481" height="112" stroke="none" d="M0,61.6L28.294,40.6L56.588,49L84.882,49L113.176,88.2L141.471,81.2L169.765,46.2L198.059,79.8L226.353,50.4L254.647,95.2L282.941,71.4L311.235,39.2L339.529,65.8L367.824,40.6L396.118,54.6L424.412,49L452.706,71.4L481,60.2L481,112L452.706,112L424.412,112L396.118,112L367.824,112L339.529,112L311.235,112L282.941,112L254.647,112L226.353,112L198.059,112L169.765,112L141.471,112L113.176,112L84.882,112L56.588,112L28.294,112L0,112Z"></path></g></g></svg></div></div></div></div>



<div class="relative flex w-full flex-col gap-5 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="relative flex w-full flex-col gap-5"><div class="flex items-start gap-2"><div class="flex-1"><div class="flex items-center gap-1"><div class="text-label-sm text-text-sub-600">Visitors Channels</div></div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">78%</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-error-light text-error-dark">-0.4%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class="flex flex-col gap-5"><div class="flex gap-[5px]"><div class="h-2 rounded-sm transition-all" style="width: 45%;"><div class="chart-category-cell-load h-full rounded-sm bg-away-base" style="--i: 0;"></div></div><div class="h-2 rounded-sm transition-all" style="width: 40%;"><div class="chart-category-cell-load h-full rounded-sm bg-sky-500" style="--i: 1;"></div></div><div class="h-2 rounded-sm transition-all" style="width: 15%;"><div class="chart-category-cell-load h-full rounded-sm bg-feature-base" style="--i: 2;"></div></div></div><div class="flex flex-wrap gap-4"><div class="flex items-center gap-1 text-left text-label-xs text-text-sub-600"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-away-base"></div>Organic Search</div><div class="flex items-center gap-1 text-left text-label-xs text-text-sub-600"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-sky-500"></div>Referral</div><div class="flex items-center gap-1 text-left text-label-xs text-text-sub-600"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-feature-base"></div>Direct</div></div></div><div role="separator" class="relative flex w-full items-center h-1 before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200"></div><table class="w-full" cellpadding="0"><thead class="text-left"><tr><th class="text-label-xs text-text-soft-400">Channels</th><th class="text-label-xs text-text-soft-400">Percent</th><th class="w-12 text-label-xs text-text-soft-400">Total</th></tr></thead><tbody aria-hidden="true" class="h-4"></tbody><tbody><tr><td><div class="flex items-center gap-2 text-label-sm text-text-sub-600"><img src="/images/social/facebook.svg" alt="" class="size-5 shrink-0">Facebook</div></td><td><div class="text-label-sm text-text-sub-600">28%</div></td><td><div class="text-label-sm text-text-sub-600">6,958</div></td></tr><tr aria-hidden="true"><td colspan="999" class="h-4"></td></tr><tr><td><div class="flex items-center gap-2 text-label-sm text-text-sub-600"><img src="/images/social/instagram.svg" alt="" class="size-5 shrink-0">Instagram</div></td><td><div class="text-label-sm text-text-sub-600">23%</div></td><td><div class="text-label-sm text-text-sub-600">5,716</div></td></tr><tr aria-hidden="true"><td colspan="999" class="h-4"></td></tr><tr><td><div class="flex items-center gap-2 text-label-sm text-text-sub-600"><img src="/images/social/google.svg" alt="" class="size-5 shrink-0">Google</div></td><td><div class="text-label-sm text-text-sub-600">32%</div></td><td><div class="text-label-sm text-text-sub-600">7,952</div></td></tr></tbody></table><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-8 gap-2.5 rounded-lg px-2.5 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">View reports</button></div></div>



<div class="relative flex w-full flex-col gap-5 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="text-label-sm text-text-sub-600">User Retention</div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">24%</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">+2.0%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class=""><table class="-m-px h-[194px] w-full border-collapse" cellpadding="0"><tbody><tr><td class="p-px" data-value="86"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.86;"></div></td><td class="p-px" data-value="92"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.92;"></div></td><td class="p-px" data-value="87"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.87;"></div></td><td class="p-px" data-value="81"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.81;"></div></td><td class="p-px" data-value="96"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.96;"></div></td><td class="p-px" data-value="94"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.94;"></div></td><td class="p-px" data-value="85"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.85;"></div></td><td class="p-px" data-value="89"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.89;"></div></td><td class="p-px" data-value="81"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.81;"></div></td><td class="p-px" data-value="95"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.95;"></div></td><td class="p-px" data-value="91"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.91;"></div></td><td class="p-px" data-value="91"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.91;"></div></td></tr><tr><td class="p-px" data-value="77"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.77;"></div></td><td class="p-px" data-value="80"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.8;"></div></td><td class="p-px" data-value="76"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.76;"></div></td><td class="p-px" data-value="86"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.86;"></div></td><td class="p-px" data-value="87"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.87;"></div></td><td class="p-px" data-value="94"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.94;"></div></td><td class="p-px" data-value="92"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.92;"></div></td><td class="p-px" data-value="88"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.88;"></div></td><td class="p-px" data-value="83"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.83;"></div></td><td class="p-px" data-value="82"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.82;"></div></td><td class="p-px" data-value="89"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.89;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="87"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.87;"></div></td><td class="p-px" data-value="86"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.86;"></div></td><td class="p-px" data-value="72"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.72;"></div></td><td class="p-px" data-value="71"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.71;"></div></td><td class="p-px" data-value="74"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.74;"></div></td><td class="p-px" data-value="82"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.82;"></div></td><td class="p-px" data-value="77"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.77;"></div></td><td class="p-px" data-value="82"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.82;"></div></td><td class="p-px" data-value="72"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.72;"></div></td><td class="p-px" data-value="83"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.83;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="82"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.82;"></div></td><td class="p-px" data-value="75"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.75;"></div></td><td class="p-px" data-value="81"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.81;"></div></td><td class="p-px" data-value="67"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.67;"></div></td><td class="p-px" data-value="76"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.76;"></div></td><td class="p-px" data-value="69"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.69;"></div></td><td class="p-px" data-value="77"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.77;"></div></td><td class="p-px" data-value="84"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.84;"></div></td><td class="p-px" data-value="74"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.74;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="77"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.77;"></div></td><td class="p-px" data-value="67"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.67;"></div></td><td class="p-px" data-value="69"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.69;"></div></td><td class="p-px" data-value="66"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.66;"></div></td><td class="p-px" data-value="63"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.63;"></div></td><td class="p-px" data-value="77"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.77;"></div></td><td class="p-px" data-value="69"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.69;"></div></td><td class="p-px" data-value="68"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.68;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="65"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.65;"></div></td><td class="p-px" data-value="66"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.66;"></div></td><td class="p-px" data-value="73"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.73;"></div></td><td class="p-px" data-value="73"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.73;"></div></td><td class="p-px" data-value="65"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.65;"></div></td><td class="p-px" data-value="71"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.71;"></div></td><td class="p-px" data-value="68"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.68;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="57"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.57;"></div></td><td class="p-px" data-value="53"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.53;"></div></td><td class="p-px" data-value="54"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.54;"></div></td><td class="p-px" data-value="58"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.58;"></div></td><td class="p-px" data-value="55"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.55;"></div></td><td class="p-px" data-value="64"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.64;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="56"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.56;"></div></td><td class="p-px" data-value="58"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.58;"></div></td><td class="p-px" data-value="54"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.54;"></div></td><td class="p-px" data-value="55"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.55;"></div></td><td class="p-px" data-value="46"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.46;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="44"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.44;"></div></td><td class="p-px" data-value="43"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.43;"></div></td><td class="p-px" data-value="48"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.48;"></div></td><td class="p-px" data-value="56"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.56;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="49"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.49;"></div></td><td class="p-px" data-value="47"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.47;"></div></td><td class="p-px" data-value="40"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.4;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="52"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.52;"></div></td><td class="p-px" data-value="43"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.43;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr><tr><td class="p-px" data-value="40"><div class="h-full w-full rounded-[1px] bg-primary-base" style="opacity: 0.4;"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td><td class="p-px"><div class="h-full w-full rounded-[1px]"></div></td></tr></tbody></table><div class="flex w-full gap-0.5 text-center text-subheading-2xs text-text-soft-400"><div class="flex-1 pt-3">1</div><div class="flex-1 pt-3">2</div><div class="flex-1 pt-3">3</div><div class="flex-1 pt-3">4</div><div class="flex-1 pt-3">5</div><div class="flex-1 pt-3">6</div><div class="flex-1 pt-3">7</div><div class="flex-1 pt-3">8</div><div class="flex-1 pt-3">9</div><div class="flex-1 pt-3">10</div><div class="flex-1 pt-3">11</div><div class="flex-1 pt-3">12</div></div></div><div class="flex items-center gap-1.5 rounded-lg bg-bg-white-0 p-1.5 ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0 text-text-disabled-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25ZM11.1158 13.2086L11.2156 12.8006C11.164 12.8249 11.0807 12.8526 10.9665 12.8841C10.852 12.9157 10.7489 12.9318 10.6583 12.9318C10.4654 12.9318 10.3295 12.9001 10.2507 12.8366C10.1724 12.773 10.1333 12.6534 10.1333 12.4783C10.1333 12.4089 10.1451 12.3054 10.1697 12.17C10.1936 12.0337 10.2211 11.9126 10.2516 11.8067L10.6242 10.4876C10.6607 10.3665 10.6857 10.2334 10.6992 10.0882C10.7129 9.94325 10.7193 9.84185 10.7193 9.78429C10.7193 9.50614 10.6218 9.28041 10.4268 9.10629C10.2317 8.93229 9.95393 8.84529 9.59396 8.84529C9.39365 8.84529 9.18188 8.88088 8.95776 8.952C8.73363 9.02294 8.49933 9.1084 8.25421 9.2082L8.15415 9.6165C8.22719 9.58949 8.31419 9.56043 8.41598 9.53034C8.51732 9.50038 8.61674 9.48489 8.71347 9.48489C8.91096 9.48489 9.04399 9.51856 9.1137 9.58488C9.18342 9.65139 9.21844 9.7697 9.21844 9.93883C9.21844 10.0324 9.20736 10.1363 9.18438 10.2492C9.16172 10.3628 9.13342 10.483 9.10013 10.6098L8.72595 11.9342C8.69266 12.0734 8.66834 12.1979 8.65304 12.3084C8.63786 12.4189 8.63057 12.5272 8.63057 12.6326C8.63057 12.9048 8.73114 13.1292 8.93222 13.3063C9.13329 13.4826 9.41523 13.5714 9.77769 13.5714C10.0137 13.5714 10.2209 13.5406 10.3992 13.4785C10.5773 13.4167 10.8164 13.3268 11.1158 13.2086ZM11.0495 7.8502C11.2235 7.68882 11.3101 7.49254 11.3101 7.26272C11.3101 7.03341 11.2236 6.83675 11.0495 6.67331C10.8758 6.51032 10.6666 6.42857 10.4219 6.42857C10.1765 6.42857 9.96635 6.51013 9.79107 6.67331C9.61579 6.83675 9.52796 7.03334 9.52796 7.26272C9.52796 7.49254 9.61579 7.68875 9.79107 7.8502C9.96667 8.01217 10.1764 8.09321 10.4219 8.09321C10.6666 8.09321 10.8758 8.01217 11.0495 7.8502Z" fill="currentColor"></path></svg><div class="text-paragraph-xs text-text-sub-600">Last 12 months data updated at 1:51 PM.</div></div></div>



<div class="relative flex w-full flex-col gap-4 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="text-label-sm text-text-sub-600">Weekly Visitors</div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">16,008</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">+1.1%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class="flex w-full gap-1.5 rounded-lg bg-bg-white-0 py-1.5 ring-1 ring-inset ring-stroke-soft-200"><div class="flex flex-1 items-center justify-center gap-1"><div class="flex size-4 shrink-0 items-center justify-center"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-warning-base"></div></div><span class="text-label-xs text-text-sub-600">New visitors</span></div><div class="relative w-0 before:absolute before:left-0 before:top-0 before:h-full before:w-px before:bg-stroke-soft-200"></div><div class="flex flex-1 items-center justify-center gap-1"><div class="flex size-4 shrink-0 items-center justify-center"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-success-base"></div></div><span class="text-label-xs text-text-sub-600">Returning visitors</span></div></div><div class="recharts-responsive-container recharts-fade-in-axis-tick [&amp;_.recharts-surface]:overflow-visible" style="width: 100%; height: 224px; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 224px; max-width: 481px;"><svg cx="50%" cy="50%" class="recharts-surface" width="481" height="224" viewBox="0 0 481 224" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts13-clip"><rect x="5" y="5" height="214" width="471"></rect></clipPath></defs><g class="recharts-polar-grid"><g class="recharts-polar-grid-angle"><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="240.5" y2="32.81999999999999"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="296.4887149343508" y2="56.01128506564917"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="319.68" y2="112"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="296.4887149343508" y2="167.98871493435084"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="240.5" y2="191.18"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="184.51128506564916" y2="167.98871493435084"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="161.32" y2="112.00000000000001"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="184.51128506564913" y2="56.01128506564917"></line></g><g class="recharts-polar-grid-concentric"><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="0" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="19.795" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,92.205L 254.4971787335877,98.0028212664123L 260.295,112L 254.4971787335877,125.9971787335877L 240.5,131.79500000000002L 226.5028212664123,125.9971787335877L 220.70499999999998,112L 226.5028212664123,98.0028212664123Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="39.59" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,72.41L 268.4943574671754,84.00564253282458L 280.09000000000003,112L 268.4943574671754,139.9943574671754L 240.5,151.59L 212.5056425328246,139.9943574671754L 200.91,112L 212.50564253282457,84.00564253282458Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="59.385000000000005" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,52.614999999999995L 282.4915362007631,70.00846379923688L 299.885,112L 282.4915362007631,153.9915362007631L 240.5,171.385L 198.5084637992369,153.99153620076314L 181.115,112.00000000000001L 198.50846379923686,70.00846379923688Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="79.18" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,32.81999999999999L 296.4887149343508,56.01128506564917L 319.68,112L 296.4887149343508,167.98871493435084L 240.5,191.18L 184.51128506564916,167.98871493435084L 161.32,112.00000000000001L 184.51128506564913,56.01128506564917Z"></path></g></g><g class="recharts-layer recharts-polar-angle-axis angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs"><path cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" class="recharts-polygon angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" d="M240.5,32.81999999999999L296.4887149343508,56.01128506564917L319.68,112L296.4887149343508,167.98871493435084L240.5,191.18L184.51128506564916,167.98871493435084L161.32,112.00000000000001L184.51128506564913,56.01128506564917L240.5,32.81999999999999Z"></path><g class="recharts-layer recharts-polar-angle-axis-ticks"><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="240.5" y1="32.81999999999999" x2="240.5" y2="26.819999999999993"></line><g><rect x="202.14324188232422" y="-2.216000000000008" width="76.71351623535156" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2p:" x="240.5" y="9.783999999999992" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="middle" fill="#808080"><tspan x="240.5" dy="0.355em">Happiness</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="296.4887149343508" y1="56.01128506564917" x2="300.73135562147013" y2="51.768644378529885"></line><g><rect x="304.77762674576417" y="27.722373254235862" width="65.10708999633789" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2q:" x="312.77762674576417" y="39.72237325423586" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="312.77762674576417" dy="0.355em">Sadness</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="319.68" y1="112" x2="325.68" y2="112"></line><g><rect x="334.716" y="100" width="50.96433639526367" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2r:" x="342.716" y="112" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="342.716" dy="0.355em">Anger</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="296.4887149343508" y1="167.98871493435084" x2="300.73135562147013" y2="172.23135562147013"></line><g><rect x="304.77762674576417" y="172.27762674576417" width="41.38942527770996" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2s:" x="312.77762674576417" y="184.27762674576417" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="312.77762674576417" dy="0.355em">Fear</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="240.5" y1="191.18" x2="240.5" y2="197.18"></line><g><rect x="208.22880935668945" y="202.216" width="64.5423812866211" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2t:" x="240.5" y="214.216" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="middle" fill="#808080"><tspan x="240.5" dy="0.355em">Surprise</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="184.51128506564916" y1="167.98871493435084" x2="180.26864437852987" y2="172.23135562147013"></line><g><rect x="116.21928716414794" y="172.27762674576417" width="60.00308609008789" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2u:" x="168.22237325423583" y="184.27762674576417" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="168.22237325423583" dy="0.355em">Disgust</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="161.32" y1="112.00000000000001" x2="155.32" y2="112.00000000000001"></line><g><rect x="102.64217337036132" y="100.00000000000001" width="43.64182662963867" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2v:" x="138.284" y="112.00000000000001" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="138.284" dy="0.355em">Love</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="184.51128506564913" y1="56.01128506564917" x2="180.26864437852987" y2="51.768644378529885"></line><g><rect x="95.96204305404052" y="27.722373254235862" width="80.26033020019531" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r30:" x="168.22237325423583" y="39.72237325423586" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="168.22237325423583" dy="0.355em">Excitement</tspan></text></g></g></g></g><g class="recharts-layer recharts-radar"><g class="recharts-layer recharts-radar-polygon"><path name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--orange-alpha-10))" fill-opacity="1" class="recharts-polygon" d="M240.5,65.81166666666667L271.29379321389297,81.20620678610703L297.2456666666667,112L286.69068982083945,158.19068982083942L240.5,141.03266666666667L210.17277941055997,142.32722058944003L224.00416666666666,112L205.50705316603072,77.00705316603073L240.5,65.81166666666667Z"></path><g class="recharts-layer recharts-radar-dots"><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="240.5" cy="65.81166666666667" index="0" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="271.29379321389297" cy="81.20620678610703" index="1" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="297.2456666666667" cy="112" index="2" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="286.69068982083945" cy="158.19068982083942" index="3" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="240.5" cy="141.03266666666667" index="4" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="210.17277941055997" cy="142.32722058944003" index="5" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="224.00416666666666" cy="112" index="6" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="205.50705316603072" cy="77.00705316603073" index="7" payload="[object Object]"></circle></g></g></g><g class="recharts-layer recharts-radar"><g class="recharts-layer recharts-radar-polygon"><path name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--green-alpha-10))" fill-opacity="1" class="recharts-polygon" d="M240.5,39.41833333333334L282.4915362007631,70.00846379923688L273.4916666666667,112L270.82722058944006,142.32722058944003L240.5,162.80716666666666L200.8413269215015,151.6586730784985L161.32,112.00000000000001L224.16995814414767,95.66995814414767L240.5,39.41833333333334Z"></path><g class="recharts-layer recharts-radar-dots"><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="240.5" cy="39.41833333333334" index="0" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="282.4915362007631" cy="70.00846379923688" index="1" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="273.4916666666667" cy="112" index="2" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="270.82722058944006" cy="142.32722058944003" index="3" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="240.5" cy="162.80716666666666" index="4" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="200.8413269215015" cy="151.6586730784985" index="5" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="161.32" cy="112.00000000000001" index="6" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="224.16995814414767" cy="95.66995814414767" index="7" payload="[object Object]"></circle></g></g></g></svg></div></div></div>



<div class="relative flex w-full flex-col gap-4 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="text-label-sm text-text-sub-600">Weekly Visitors</div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">16,008</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">+1.1%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class="flex w-full gap-1.5 rounded-lg bg-bg-white-0 py-1.5 ring-1 ring-inset ring-stroke-soft-200"><div class="flex flex-1 items-center justify-center gap-1"><div class="flex size-4 shrink-0 items-center justify-center"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-warning-base"></div></div><span class="text-label-xs text-text-sub-600">New visitors</span></div><div class="relative w-0 before:absolute before:left-0 before:top-0 before:h-full before:w-px before:bg-stroke-soft-200"></div><div class="flex flex-1 items-center justify-center gap-1"><div class="flex size-4 shrink-0 items-center justify-center"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-success-base"></div></div><span class="text-label-xs text-text-sub-600">Returning visitors</span></div></div><div class="recharts-responsive-container recharts-fade-in-axis-tick [&amp;_.recharts-surface]:overflow-visible" style="width: 100%; height: 224px; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 224px; max-width: 481px;"><svg cx="50%" cy="50%" class="recharts-surface" width="481" height="224" viewBox="0 0 481 224" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts13-clip"><rect x="5" y="5" height="214" width="471"></rect></clipPath></defs><g class="recharts-polar-grid"><g class="recharts-polar-grid-angle"><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="240.5" y2="32.81999999999999"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="296.4887149343508" y2="56.01128506564917"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="319.68" y2="112"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="296.4887149343508" y2="167.98871493435084"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="240.5" y2="191.18"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="184.51128506564916" y2="167.98871493435084"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="161.32" y2="112.00000000000001"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="184.51128506564913" y2="56.01128506564917"></line></g><g class="recharts-polar-grid-concentric"><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="0" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="19.795" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,92.205L 254.4971787335877,98.0028212664123L 260.295,112L 254.4971787335877,125.9971787335877L 240.5,131.79500000000002L 226.5028212664123,125.9971787335877L 220.70499999999998,112L 226.5028212664123,98.0028212664123Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="39.59" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,72.41L 268.4943574671754,84.00564253282458L 280.09000000000003,112L 268.4943574671754,139.9943574671754L 240.5,151.59L 212.5056425328246,139.9943574671754L 200.91,112L 212.50564253282457,84.00564253282458Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="59.385000000000005" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,52.614999999999995L 282.4915362007631,70.00846379923688L 299.885,112L 282.4915362007631,153.9915362007631L 240.5,171.385L 198.5084637992369,153.99153620076314L 181.115,112.00000000000001L 198.50846379923686,70.00846379923688Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="79.18" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,32.81999999999999L 296.4887149343508,56.01128506564917L 319.68,112L 296.4887149343508,167.98871493435084L 240.5,191.18L 184.51128506564916,167.98871493435084L 161.32,112.00000000000001L 184.51128506564913,56.01128506564917Z"></path></g></g><g class="recharts-layer recharts-polar-angle-axis angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs"><path cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" class="recharts-polygon angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" d="M240.5,32.81999999999999L296.4887149343508,56.01128506564917L319.68,112L296.4887149343508,167.98871493435084L240.5,191.18L184.51128506564916,167.98871493435084L161.32,112.00000000000001L184.51128506564913,56.01128506564917L240.5,32.81999999999999Z"></path><g class="recharts-layer recharts-polar-angle-axis-ticks"><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="240.5" y1="32.81999999999999" x2="240.5" y2="26.819999999999993"></line><g><rect x="202.14324188232422" y="-2.216000000000008" width="76.71351623535156" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2p:" x="240.5" y="9.783999999999992" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="middle" fill="#808080"><tspan x="240.5" dy="0.355em">Happiness</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="296.4887149343508" y1="56.01128506564917" x2="300.73135562147013" y2="51.768644378529885"></line><g><rect x="304.77762674576417" y="27.722373254235862" width="65.10708999633789" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2q:" x="312.77762674576417" y="39.72237325423586" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="312.77762674576417" dy="0.355em">Sadness</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="319.68" y1="112" x2="325.68" y2="112"></line><g><rect x="334.716" y="100" width="50.96433639526367" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2r:" x="342.716" y="112" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="342.716" dy="0.355em">Anger</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="296.4887149343508" y1="167.98871493435084" x2="300.73135562147013" y2="172.23135562147013"></line><g><rect x="304.77762674576417" y="172.27762674576417" width="41.38942527770996" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2s:" x="312.77762674576417" y="184.27762674576417" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="312.77762674576417" dy="0.355em">Fear</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="240.5" y1="191.18" x2="240.5" y2="197.18"></line><g><rect x="208.22880935668945" y="202.216" width="64.5423812866211" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2t:" x="240.5" y="214.216" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="middle" fill="#808080"><tspan x="240.5" dy="0.355em">Surprise</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="184.51128506564916" y1="167.98871493435084" x2="180.26864437852987" y2="172.23135562147013"></line><g><rect x="116.21928716414794" y="172.27762674576417" width="60.00308609008789" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2u:" x="168.22237325423583" y="184.27762674576417" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="168.22237325423583" dy="0.355em">Disgust</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="161.32" y1="112.00000000000001" x2="155.32" y2="112.00000000000001"></line><g><rect x="102.64217337036132" y="100.00000000000001" width="43.64182662963867" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2v:" x="138.284" y="112.00000000000001" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="138.284" dy="0.355em">Love</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="184.51128506564913" y1="56.01128506564917" x2="180.26864437852987" y2="51.768644378529885"></line><g><rect x="95.96204305404052" y="27.722373254235862" width="80.26033020019531" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r30:" x="168.22237325423583" y="39.72237325423586" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="168.22237325423583" dy="0.355em">Excitement</tspan></text></g></g></g></g><g class="recharts-layer recharts-radar"><g class="recharts-layer recharts-radar-polygon"><path name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--orange-alpha-10))" fill-opacity="1" class="recharts-polygon" d="M240.5,65.81166666666667L271.29379321389297,81.20620678610703L297.2456666666667,112L286.69068982083945,158.19068982083942L240.5,141.03266666666667L210.17277941055997,142.32722058944003L224.00416666666666,112L205.50705316603072,77.00705316603073L240.5,65.81166666666667Z"></path><g class="recharts-layer recharts-radar-dots"><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="240.5" cy="65.81166666666667" index="0" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="271.29379321389297" cy="81.20620678610703" index="1" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="297.2456666666667" cy="112" index="2" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="286.69068982083945" cy="158.19068982083942" index="3" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="240.5" cy="141.03266666666667" index="4" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="210.17277941055997" cy="142.32722058944003" index="5" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="224.00416666666666" cy="112" index="6" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="205.50705316603072" cy="77.00705316603073" index="7" payload="[object Object]"></circle></g></g></g><g class="recharts-layer recharts-radar"><g class="recharts-layer recharts-radar-polygon"><path name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--green-alpha-10))" fill-opacity="1" class="recharts-polygon" d="M240.5,39.41833333333334L282.4915362007631,70.00846379923688L273.4916666666667,112L270.82722058944006,142.32722058944003L240.5,162.80716666666666L200.8413269215015,151.6586730784985L161.32,112.00000000000001L224.16995814414767,95.66995814414767L240.5,39.41833333333334Z"></path><g class="recharts-layer recharts-radar-dots"><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="240.5" cy="39.41833333333334" index="0" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="282.4915362007631" cy="70.00846379923688" index="1" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="273.4916666666667" cy="112" index="2" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="270.82722058944006" cy="142.32722058944003" index="3" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="240.5" cy="162.80716666666666" index="4" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="200.8413269215015" cy="151.6586730784985" index="5" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="161.32" cy="112.00000000000001" index="6" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="224.16995814414767" cy="95.66995814414767" index="7" payload="[object Object]"></circle></g></g></g></svg></div></div></div>


<div class="relative flex w-full flex-col gap-4 rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="text-label-sm text-text-sub-600">Weekly Visitors</div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">16,008</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">+1.1%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class="flex w-full gap-1.5 rounded-lg bg-bg-white-0 py-1.5 ring-1 ring-inset ring-stroke-soft-200"><div class="flex flex-1 items-center justify-center gap-1"><div class="flex size-4 shrink-0 items-center justify-center"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-warning-base"></div></div><span class="text-label-xs text-text-sub-600">New visitors</span></div><div class="relative w-0 before:absolute before:left-0 before:top-0 before:h-full before:w-px before:bg-stroke-soft-200"></div><div class="flex flex-1 items-center justify-center gap-1"><div class="flex size-4 shrink-0 items-center justify-center"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-success-base"></div></div><span class="text-label-xs text-text-sub-600">Returning visitors</span></div></div><div class="recharts-responsive-container recharts-fade-in-axis-tick [&amp;_.recharts-surface]:overflow-visible" style="width: 100%; height: 224px; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 224px; max-width: 481px;"><svg cx="50%" cy="50%" class="recharts-surface" width="481" height="224" viewBox="0 0 481 224" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts13-clip"><rect x="5" y="5" height="214" width="471"></rect></clipPath></defs><g class="recharts-polar-grid"><g class="recharts-polar-grid-angle"><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="240.5" y2="32.81999999999999"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="296.4887149343508" y2="56.01128506564917"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="319.68" y2="112"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="296.4887149343508" y2="167.98871493435084"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="240.5" y2="191.18"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="184.51128506564916" y2="167.98871493435084"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="161.32" y2="112.00000000000001"></line><line stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" x1="240.5" y1="112" x2="184.51128506564913" y2="56.01128506564917"></line></g><g class="recharts-polar-grid-concentric"><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="0" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112L 240.5,112Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="19.795" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,92.205L 254.4971787335877,98.0028212664123L 260.295,112L 254.4971787335877,125.9971787335877L 240.5,131.79500000000002L 226.5028212664123,125.9971787335877L 220.70499999999998,112L 226.5028212664123,98.0028212664123Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="39.59" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,72.41L 268.4943574671754,84.00564253282458L 280.09000000000003,112L 268.4943574671754,139.9943574671754L 240.5,151.59L 212.5056425328246,139.9943574671754L 200.91,112L 212.50564253282457,84.00564253282458Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="59.385000000000005" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,52.614999999999995L 282.4915362007631,70.00846379923688L 299.885,112L 282.4915362007631,153.9915362007631L 240.5,171.385L 198.5084637992369,153.99153620076314L 181.115,112.00000000000001L 198.50846379923686,70.00846379923688Z"></path><path stroke="hsl(var(--stroke-soft-200))" cx="240.5" cy="112" radius="79.18" fill="none" class="recharts-polar-grid-concentric-polygon" d="M 240.5,32.81999999999999L 296.4887149343508,56.01128506564917L 319.68,112L 296.4887149343508,167.98871493435084L 240.5,191.18L 184.51128506564916,167.98871493435084L 161.32,112.00000000000001L 184.51128506564913,56.01128506564917Z"></path></g></g><g class="recharts-layer recharts-polar-angle-axis angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs"><path cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" class="recharts-polygon angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" d="M240.5,32.81999999999999L296.4887149343508,56.01128506564917L319.68,112L296.4887149343508,167.98871493435084L240.5,191.18L184.51128506564916,167.98871493435084L161.32,112.00000000000001L184.51128506564913,56.01128506564917L240.5,32.81999999999999Z"></path><g class="recharts-layer recharts-polar-angle-axis-ticks"><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="240.5" y1="32.81999999999999" x2="240.5" y2="26.819999999999993"></line><g><rect x="202.14324188232422" y="-2.216000000000008" width="76.71351623535156" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2p:" x="240.5" y="9.783999999999992" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="middle" fill="#808080"><tspan x="240.5" dy="0.355em">Happiness</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="296.4887149343508" y1="56.01128506564917" x2="300.73135562147013" y2="51.768644378529885"></line><g><rect x="304.77762674576417" y="27.722373254235862" width="65.10708999633789" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2q:" x="312.77762674576417" y="39.72237325423586" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="312.77762674576417" dy="0.355em">Sadness</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="319.68" y1="112" x2="325.68" y2="112"></line><g><rect x="334.716" y="100" width="50.96433639526367" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2r:" x="342.716" y="112" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="342.716" dy="0.355em">Anger</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="296.4887149343508" y1="167.98871493435084" x2="300.73135562147013" y2="172.23135562147013"></line><g><rect x="304.77762674576417" y="172.27762674576417" width="41.38942527770996" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2s:" x="312.77762674576417" y="184.27762674576417" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="start" fill="#808080"><tspan x="312.77762674576417" dy="0.355em">Fear</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="240.5" y1="191.18" x2="240.5" y2="197.18"></line><g><rect x="208.22880935668945" y="202.216" width="64.5423812866211" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2t:" x="240.5" y="214.216" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="middle" fill="#808080"><tspan x="240.5" dy="0.355em">Surprise</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="184.51128506564916" y1="167.98871493435084" x2="180.26864437852987" y2="172.23135562147013"></line><g><rect x="116.21928716414794" y="172.27762674576417" width="60.00308609008789" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2u:" x="168.22237325423583" y="184.27762674576417" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="168.22237325423583" dy="0.355em">Disgust</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="161.32" y1="112.00000000000001" x2="155.32" y2="112.00000000000001"></line><g><rect x="102.64217337036132" y="100.00000000000001" width="43.64182662963867" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r2v:" x="138.284" y="112.00000000000001" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="138.284" dy="0.355em">Love</tspan></text></g></g><g class="recharts-layer recharts-polar-angle-axis-tick"><line class="angleAxis [&amp;_.angleAxis]:stroke-stroke-soft-200 [&amp;_.recharts-polar-angle-axis-tick-value]:fill-text-sub-600 [&amp;_.recharts-polar-angle-axis-tick-value]:text-label-xs" cx="240.5" cy="112" orientation="outer" radius="79.18" fill="none" x1="184.51128506564913" y1="56.01128506564917" x2="180.26864437852987" y2="51.768644378529885"></line><g><rect x="95.96204305404052" y="27.722373254235862" width="80.26033020019531" height="24" rx="6" fill="none" class="stroke-stroke-soft-200" stroke-width="1"></rect><text orientation="outer" radius="79.18" stroke="none" id=":r30:" x="168.22237325423583" y="39.72237325423586" class="recharts-text recharts-polar-angle-axis-tick-value" text-anchor="end" fill="#808080"><tspan x="168.22237325423583" dy="0.355em">Excitement</tspan></text></g></g></g></g><g class="recharts-layer recharts-radar"><g class="recharts-layer recharts-radar-polygon"><path name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--orange-alpha-10))" fill-opacity="1" class="recharts-polygon" d="M240.5,65.81166666666667L271.29379321389297,81.20620678610703L297.2456666666667,112L286.69068982083945,158.19068982083942L240.5,141.03266666666667L210.17277941055997,142.32722058944003L224.00416666666666,112L205.50705316603072,77.00705316603073L240.5,65.81166666666667Z"></path><g class="recharts-layer recharts-radar-dots"><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="240.5" cy="65.81166666666667" index="0" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="271.29379321389297" cy="81.20620678610703" index="1" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="297.2456666666667" cy="112" index="2" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="286.69068982083945" cy="158.19068982083942" index="3" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="240.5" cy="141.03266666666667" index="4" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="210.17277941055997" cy="142.32722058944003" index="5" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="224.00416666666666" cy="112" index="6" payload="[object Object]"></circle><circle r="3" name="New visitors" stroke="hsl(var(--warning-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="A" cx="205.50705316603072" cy="77.00705316603073" index="7" payload="[object Object]"></circle></g></g></g><g class="recharts-layer recharts-radar"><g class="recharts-layer recharts-radar-polygon"><path name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--green-alpha-10))" fill-opacity="1" class="recharts-polygon" d="M240.5,39.41833333333334L282.4915362007631,70.00846379923688L273.4916666666667,112L270.82722058944006,142.32722058944003L240.5,162.80716666666666L200.8413269215015,151.6586730784985L161.32,112.00000000000001L224.16995814414767,95.66995814414767L240.5,39.41833333333334Z"></path><g class="recharts-layer recharts-radar-dots"><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="240.5" cy="39.41833333333334" index="0" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="282.4915362007631" cy="70.00846379923688" index="1" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="273.4916666666667" cy="112" index="2" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="270.82722058944006" cy="142.32722058944003" index="3" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="240.5" cy="162.80716666666666" index="4" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="200.8413269215015" cy="151.6586730784985" index="5" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="161.32" cy="112.00000000000001" index="6" payload="[object Object]"></circle><circle r="3" name="Returning visitors" stroke="hsl(var(--success-base))" fill="hsl(var(--bg-white-0))" fill-opacity="1" dataKey="B" cx="224.16995814414767" cy="95.66995814414767" index="7" payload="[object Object]"></circle></g></g></g></svg></div></div></div>





<div class="relative flex w-full flex-col rounded-2xl bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex flex-col gap-4 p-5"><div class="flex items-start gap-2"><div class="flex-1"><div class="flex items-center gap-1"><div class="text-label-sm text-text-sub-600">Shipping Tracking</div><button data-state="closed"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 text-text-disabled-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25ZM11.1158 13.2086L11.2156 12.8006C11.164 12.8249 11.0807 12.8526 10.9665 12.8841C10.852 12.9157 10.7489 12.9318 10.6583 12.9318C10.4654 12.9318 10.3295 12.9001 10.2507 12.8366C10.1724 12.773 10.1333 12.6534 10.1333 12.4783C10.1333 12.4089 10.1451 12.3054 10.1697 12.17C10.1936 12.0337 10.2211 11.9126 10.2516 11.8067L10.6242 10.4876C10.6607 10.3665 10.6857 10.2334 10.6992 10.0882C10.7129 9.94325 10.7193 9.84185 10.7193 9.78429C10.7193 9.50614 10.6218 9.28041 10.4268 9.10629C10.2317 8.93229 9.95393 8.84529 9.59396 8.84529C9.39365 8.84529 9.18188 8.88088 8.95776 8.952C8.73363 9.02294 8.49933 9.1084 8.25421 9.2082L8.15415 9.6165C8.22719 9.58949 8.31419 9.56043 8.41598 9.53034C8.51732 9.50038 8.61674 9.48489 8.71347 9.48489C8.91096 9.48489 9.04399 9.51856 9.1137 9.58488C9.18342 9.65139 9.21844 9.7697 9.21844 9.93883C9.21844 10.0324 9.20736 10.1363 9.18438 10.2492C9.16172 10.3628 9.13342 10.483 9.10013 10.6098L8.72595 11.9342C8.69266 12.0734 8.66834 12.1979 8.65304 12.3084C8.63786 12.4189 8.63057 12.5272 8.63057 12.6326C8.63057 12.9048 8.73114 13.1292 8.93222 13.3063C9.13329 13.4826 9.41523 13.5714 9.77769 13.5714C10.0137 13.5714 10.2209 13.5406 10.3992 13.4785C10.5773 13.4167 10.8164 13.3268 11.1158 13.2086ZM11.0495 7.8502C11.2235 7.68882 11.3101 7.49254 11.3101 7.26272C11.3101 7.03341 11.2236 6.83675 11.0495 6.67331C10.8758 6.51032 10.6666 6.42857 10.4219 6.42857C10.1765 6.42857 9.96635 6.51013 9.79107 6.67331C9.61579 6.83675 9.52796 7.03334 9.52796 7.26272C9.52796 7.49254 9.61579 7.68875 9.79107 7.8502C9.96667 8.01217 10.1764 8.09321 10.4219 8.09321C10.6666 8.09321 10.8758 8.01217 11.0495 7.8502Z" fill="currentColor"></path></svg></button></div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">3,844</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">+1.8%</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 rounded-lg text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950 gap-2 px-2.5" type="button" role="combobox" aria-controls="radix-:r19:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed"><span style="pointer-events: none;"><span class="flex flex-1 items-center gap-2 group-disabled:text-text-disabled-300"><span class="line-clamp-1">Daily</span></span></span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon flex size-5 shrink-0 items-center justify-center -mx-1"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg></button></div><div role="group" dir="ltr" class="flex flex-wrap gap-2.5" tabindex="0" style="outline: none;"><button type="button" data-state="on" role="radio" aria-checked="true" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Delivered</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">In-transit</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Returned</button></div></div><div class="flex h-12 items-center gap-2 border-y border-stroke-soft-200 px-5"><div class="flex flex-1 items-center gap-2"><img src="/images/products/apple-watch-1.png" alt="" class="size-6 shrink-0 object-contain"><div class="text-label-sm text-text-sub-600">Apple Watch S5 GPS 40mm White</div></div><div class="flex"><button type="button" class="flex size-5 shrink-0 items-center justify-center rounded-l-md bg-bg-white-0 ring-1 ring-inset ring-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:outline-none focus-visible:bg-bg-weak-50"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-[18px] text-text-sub-600"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button><button type="button" class="flex size-5 shrink-0 items-center justify-center rounded-r-md bg-bg-white-0 ring-1 ring-inset ring-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:outline-none focus-visible:bg-bg-weak-50"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-[18px] text-text-sub-600"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div></div><div class="flex items-center px-[38px]" style="height: 152px; background: linear-gradient(90deg, hsl(var(--stroke-soft-200)) 1px, #0000 1px 100%) 38px 0 / calc((100% - 76px) / 6) 152px repeat no-repeat,
            linear-gradient(360deg, hsl(var(--stroke-soft-200)) 1px, #0000 1px 100%) 0 0 / 100% calc(152px / 4) no-repeat repeat;"><div class="recharts-responsive-container" style="width: 100%; height: 76px; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 76px; max-width: 445px;"><svg class="recharts-surface" width="445" height="76" viewBox="0 0 445 76" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts16-clip"><rect x="0" y="1" height="74" width="445"></rect></clipPath></defs><g class="recharts-layer recharts-line stroke-primary-base"><path class="recharts-curve recharts-line-curve" stroke="hsl(var(--primary-base))" stroke-width="2" fill="none" width="445" height="74" d="M0,52.93L37.083,52.93L37.083,26.965L111.25,26.965L111.25,75L185.417,75L185.417,1L259.583,1L259.583,39.947L333.75,39.947L333.75,65.912L407.917,65.912L407.917,10.088L445,10.088"></path><g class="recharts-layer"></g></g></svg></div></div></div><div class="grid auto-cols-fr grid-flow-col gap-0.5 px-4 py-3 text-center"><div class="text-label-xs text-text-soft-400">Mon</div><div class="text-label-xs text-text-soft-400">Tue</div><div class="text-label-xs text-text-soft-400">Wed</div><div class="text-label-xs text-text-soft-400">Thu</div><div class="text-label-xs text-text-soft-400">Fri</div><div class="text-label-xs text-text-soft-400">Sat</div><div class="text-label-xs text-text-soft-400">Sun</div></div></div>





<div class="-col-end-1 row-span-2 row-start-1"><div class="relative flex w-full flex-col rounded-2xl bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex flex-col gap-3 p-5"><div class="flex items-start gap-2"><div class="flex-1"><div class="flex items-center gap-1"><div class="text-label-sm text-text-sub-600">Support Analytics</div><button data-state="closed"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 text-text-disabled-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25ZM11.1158 13.2086L11.2156 12.8006C11.164 12.8249 11.0807 12.8526 10.9665 12.8841C10.852 12.9157 10.7489 12.9318 10.6583 12.9318C10.4654 12.9318 10.3295 12.9001 10.2507 12.8366C10.1724 12.773 10.1333 12.6534 10.1333 12.4783C10.1333 12.4089 10.1451 12.3054 10.1697 12.17C10.1936 12.0337 10.2211 11.9126 10.2516 11.8067L10.6242 10.4876C10.6607 10.3665 10.6857 10.2334 10.6992 10.0882C10.7129 9.94325 10.7193 9.84185 10.7193 9.78429C10.7193 9.50614 10.6218 9.28041 10.4268 9.10629C10.2317 8.93229 9.95393 8.84529 9.59396 8.84529C9.39365 8.84529 9.18188 8.88088 8.95776 8.952C8.73363 9.02294 8.49933 9.1084 8.25421 9.2082L8.15415 9.6165C8.22719 9.58949 8.31419 9.56043 8.41598 9.53034C8.51732 9.50038 8.61674 9.48489 8.71347 9.48489C8.91096 9.48489 9.04399 9.51856 9.1137 9.58488C9.18342 9.65139 9.21844 9.7697 9.21844 9.93883C9.21844 10.0324 9.20736 10.1363 9.18438 10.2492C9.16172 10.3628 9.13342 10.483 9.10013 10.6098L8.72595 11.9342C8.69266 12.0734 8.66834 12.1979 8.65304 12.3084C8.63786 12.4189 8.63057 12.5272 8.63057 12.6326C8.63057 12.9048 8.73114 13.1292 8.93222 13.3063C9.13329 13.4826 9.41523 13.5714 9.77769 13.5714C10.0137 13.5714 10.2209 13.5406 10.3992 13.4785C10.5773 13.4167 10.8164 13.3268 11.1158 13.2086ZM11.0495 7.8502C11.2235 7.68882 11.3101 7.49254 11.3101 7.26272C11.3101 7.03341 11.2236 6.83675 11.0495 6.67331C10.8758 6.51032 10.6666 6.42857 10.4219 6.42857C10.1765 6.42857 9.96635 6.51013 9.79107 6.67331C9.61579 6.83675 9.52796 7.03334 9.52796 7.26272C9.52796 7.49254 9.61579 7.68875 9.79107 7.8502C9.96667 8.01217 10.1764 8.09321 10.4219 8.09321C10.6666 8.09321 10.8758 8.01217 11.0495 7.8502Z" fill="currentColor"></path></svg></button></div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">2450</div><div class="text-label-sm text-text-sub-600"><span class="text-success-base">+5.4%</span> total tickets</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 rounded-lg text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950 gap-2 px-2.5" type="button" role="combobox" aria-controls="radix-:r1v:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed"><span style="pointer-events: none;"><span class="flex flex-1 items-center gap-2 group-disabled:text-text-disabled-300"><span class="line-clamp-1">Daily</span></span></span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon flex size-5 shrink-0 items-center justify-center -mx-1"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg></button></div><div role="group" dir="ltr" class="flex flex-wrap gap-1.5" tabindex="0" style="outline: none;"><button type="button" data-state="on" role="radio" aria-checked="true" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Technical</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Billing</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Account</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Product</button></div></div><div role="separator" class="relative flex w-full items-center h-0 before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200"></div><div class="px-4 pt-4"><div class="relative"><div class="grid auto-cols-fr grid-flow-col items-end gap-1.5" style="height: 116px;"><div class="origin-bottom rounded-md bg-faded-light" style="height: 58px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div><div class="origin-bottom rounded-md bg-faded-light" style="height: 116px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div><div class="origin-bottom rounded-md bg-faded-light" style="height: 65.25px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div><div class="origin-bottom rounded-md bg-faded-light" style="height: 36.25px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div><div class="origin-bottom rounded-md bg-primary-base" style="height: 90.625px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div><div class="origin-bottom rounded-md bg-faded-light" style="height: 54.375px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div><div class="origin-bottom rounded-md bg-faded-light" style="height: 54.375px; transition-property: height, background-color; transition-duration: 0.6s, 0.2s; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"></div></div><div class="absolute left-0 z-10 flex w-full -translate-y-1/2 items-center gap-2 transition-all duration-300" style="top: 43.5px; transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);"><div class="flex"><div class="rounded-l-md bg-faded-dark py-1 pl-2 text-label-xs text-text-white-0">Target : 20m</div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 24" class="h-6"><path class="fill-faded-dark" d="M13.172 9.172l-8-8A4 4 0 002.343 0H0v24h2.343a4 4 0 002.829-1.172l8-8a4 4 0 000-5.656z"></path></svg></div><div class="flex flex-1 items-center justify-between before:size-1.5 before:rounded-full before:bg-faded-dark after:size-1.5 after:rounded-full after:bg-faded-dark" style="background: linear-gradient(90deg, currentcolor 5px, transparent 5px) 0px 50% / 10px 1px repeat-x;"></div></div></div></div><div class="grid auto-cols-fr grid-flow-col gap-1.5 px-4 py-3"><div class="flex h-5 items-center justify-center rounded text-center text-label-xs text-text-soft-400 transition duration-200 ease-out">Mon</div><div class="flex h-5 items-center justify-center rounded text-center text-label-xs text-text-soft-400 transition duration-200 ease-out">Tue</div><div class="flex h-5 items-center justify-center rounded text-center text-label-xs text-text-soft-400 transition duration-200 ease-out">Wed</div><div class="flex h-5 items-center justify-center rounded text-center text-label-xs text-text-soft-400 transition duration-200 ease-out">Thu</div><div class="flex h-5 items-center justify-center rounded text-center text-label-xs transition duration-200 ease-out text-primary-base bg-primary-alpha-16">Fri</div><div class="flex h-5 items-center justify-center rounded text-center text-label-xs text-text-soft-400 transition duration-200 ease-out">Sat</div><div class="flex h-5 items-center justify-center rounded text-center text-label-xs text-text-soft-400 transition duration-200 ease-out">Sun</div></div><div dir="ltr" data-orientation="horizontal" class="w-full"><div class="relative grid overflow-x-auto overflow-y-hidden overscroll-contain"><div role="tablist" aria-orientation="horizontal" class="group/tab-list relative flex h-12 items-center gap-6 whitespace-nowrap border-y border-stroke-soft-200 px-5" tabindex="0" data-orientation="horizontal" style="outline: none;"><button type="button" role="tab" aria-selected="true" aria-controls="radix-:r25:-content-all-tickets" data-state="active" id="radix-:r25:-trigger-all-tickets" class="group/tab-item h-12 py-3.5 text-label-sm text-text-sub-600 outline-none flex items-center justify-center gap-1.5 transition duration-200 ease-out focus:outline-none data-[state=active]:text-text-strong-950" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">All Tickets</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r25:-content-open-tickets" data-state="inactive" data-disabled="" disabled="" id="radix-:r25:-trigger-open-tickets" class="group/tab-item h-12 py-3.5 text-label-sm text-text-sub-600 outline-none flex items-center justify-center gap-1.5 transition duration-200 ease-out focus:outline-none data-[state=active]:text-text-strong-950" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Open Tickets</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r25:-content-solved-tickets" data-state="inactive" data-disabled="" disabled="" id="radix-:r25:-trigger-solved-tickets" class="group/tab-item h-12 py-3.5 text-label-sm text-text-sub-600 outline-none flex items-center justify-center gap-1.5 transition duration-200 ease-out focus:outline-none data-[state=active]:text-text-strong-950" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Solved Tickets</button><div class="absolute -bottom-px left-0 h-0.5 bg-primary-base opacity-0 transition-all duration-300 group-has-[[data-state=active]]/tab-list:opacity-100" aria-hidden="true" style="transform: translate3d(20px, 0px, 0px); width: 68px; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);"></div></div></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r25:-trigger-all-tickets" id="radix-:r25:-content-all-tickets" tabindex="0" class="data-[state=active]:duration-300 data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-4" style="animation-duration: 0s;"><div class="px-5 py-4"><table class="w-full" cellpadding="0"><thead class="text-left"><tr><th class="text-label-xs text-text-soft-400">Channels</th><th class="text-label-xs text-text-soft-400">Actual</th><th class="w-0 text-label-xs text-text-soft-400">Avg.</th></tr></thead><tbody aria-hidden="true" class="h-3"></tbody><tbody><tr><td><div class="text-label-sm text-text-strong-950">First response time</div><div class="mt-1 text-label-xs text-text-soft-400">Below SLA</div></td><td><div class="text-label-sm text-text-sub-600">15m</div></td><td><div class="text-label-sm text-success-base">+22%</div></td></tr><tr aria-hidden="true"><td colspan="999" class="h-3"></td></tr><tr><td><div class="text-label-sm text-text-strong-950">Avg Resolution Time</div><div class="mt-1 text-label-xs text-text-soft-400">Meeting SLA</div></td><td><div class="text-label-sm text-text-sub-600">48m</div></td><td><div class="text-label-sm text-success-base">+18%</div></td></tr><tr aria-hidden="true"><td colspan="999" class="h-3"></td></tr><tr><td><div class="text-label-sm text-text-strong-950">CSAT Score</div><div class="mt-1 text-label-xs text-text-soft-400">Above Target</div></td><td><div class="text-label-sm text-text-sub-600">4.8/5</div></td><td><div class="text-label-sm text-error-base">-0.3%</div></td></tr></tbody></table></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r25:-trigger-open-tickets" hidden="" id="radix-:r25:-content-open-tickets" tabindex="0" class="data-[state=active]:duration-300 data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-4"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r25:-trigger-solved-tickets" hidden="" id="radix-:r25:-content-solved-tickets" tabindex="0" class="data-[state=active]:duration-300 data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-4"></div></div><div role="separator" class="relative flex w-full items-center h-0 before:absolute before:left-0 before:top-1/2 before:h-px before:w-full before:-translate-y-1/2 before:bg-stroke-soft-200"></div><div class="p-5 pt-4"><div class="text-label-xs text-text-soft-400">Recent Tickets</div><div class="mt-4 flex flex-col gap-4"><div class="flex items-center gap-3"><div class="relative flex shrink-0 items-center justify-center rounded-full select-none text-center uppercase size-8 text-label-sm bg-bg-soft-200 text-static-black">J</div><div class="flex-1"><div class="text-label-sm text-text-strong-950">James Brown</div><div class="mt-1 flex flex-wrap items-center gap-1.5"><div class="text-label-xs text-text-soft-400">High</div><span class="text-label-xs text-text-soft-400">·</span><div class="flex items-center gap-[5px] text-label-xs text-success-base"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12" class="size-3 shrink-0"><path fill="currentColor" d="M6 12A6 6 0 1 1 6 0a6 6 0 0 1 0 12Zm-.598-3.6 4.242-4.243-.849-.848-3.393 3.394-1.698-1.697-.848.848L5.402 8.4Z"></path></svg>Solved</div></div></div><div class="text-right"><div class="text-label-sm text-text-strong-950">48m</div><div class="mt-1 text-label-xs text-text-soft-400">#TKT-98744</div></div></div><div class="flex items-center gap-3"><div class="relative flex shrink-0 items-center justify-center rounded-full select-none text-center uppercase size-8 text-label-sm bg-yellow-200 text-yellow-950">S</div><div class="flex-1"><div class="text-label-sm text-text-strong-950">Sophia Williams</div><div class="mt-1 flex flex-wrap items-center gap-1.5"><div class="text-label-xs text-text-soft-400">Medium</div><span class="text-label-xs text-text-soft-400">·</span><div class="flex items-center gap-[5px] text-label-xs text-warning-base"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12" class="size-3 shrink-0"><path fill="currentColor" d="M6 12A6 6 0 1 1 6 0a6 6 0 0 1 0 12Zm0-1.2a4.8 4.8 0 1 0 0-9.6 4.8 4.8 0 0 0 0 9.6ZM6 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"></path></svg>In-progress</div></div></div><div class="text-right"><div class="text-label-sm text-text-strong-950">19m</div><div class="mt-1 text-label-xs text-text-soft-400">#TKT-98743</div></div></div><div class="flex items-center gap-3"><div class="relative flex shrink-0 items-center justify-center rounded-full select-none text-center uppercase size-8 text-label-sm bg-purple-200 text-purple-950">M</div><div class="flex-1"><div class="text-label-sm text-text-strong-950">Matthew Johnson</div><div class="mt-1 flex flex-wrap items-center gap-1.5"><div class="text-label-xs text-text-soft-400">Low</div><span class="text-label-xs text-text-soft-400">·</span><div class="flex items-center gap-[5px] text-label-xs text-away-base"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12" class="size-3 shrink-0"><path fill="currentColor" d="M0 6a6 6 0 1 0 12 0A6 6 0 0 0 0 6Zm10.8 0a4.8 4.8 0 1 1-9.6 0 4.8 4.8 0 0 1 9.6 0ZM9.6 6A3.6 3.6 0 0 1 6 9.6V2.4A3.6 3.6 0 0 1 9.6 6Z"></path></svg>Pending</div></div></div><div class="text-right"><div class="text-label-sm text-text-strong-950">12m</div><div class="mt-1 text-label-xs text-text-soft-400">#TKT-98745</div></div></div></div></div></div></div>




<div class="relative flex w-full flex-col overflow-hidden rounded-2xl bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2 p-5 pb-4"><div class="flex-1"><div class="flex items-center gap-1"><div class="text-label-sm text-text-sub-600">Campaign Data</div><button data-state="closed"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 text-text-disabled-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25ZM11.1158 13.2086L11.2156 12.8006C11.164 12.8249 11.0807 12.8526 10.9665 12.8841C10.852 12.9157 10.7489 12.9318 10.6583 12.9318C10.4654 12.9318 10.3295 12.9001 10.2507 12.8366C10.1724 12.773 10.1333 12.6534 10.1333 12.4783C10.1333 12.4089 10.1451 12.3054 10.1697 12.17C10.1936 12.0337 10.2211 11.9126 10.2516 11.8067L10.6242 10.4876C10.6607 10.3665 10.6857 10.2334 10.6992 10.0882C10.7129 9.94325 10.7193 9.84185 10.7193 9.78429C10.7193 9.50614 10.6218 9.28041 10.4268 9.10629C10.2317 8.93229 9.95393 8.84529 9.59396 8.84529C9.39365 8.84529 9.18188 8.88088 8.95776 8.952C8.73363 9.02294 8.49933 9.1084 8.25421 9.2082L8.15415 9.6165C8.22719 9.58949 8.31419 9.56043 8.41598 9.53034C8.51732 9.50038 8.61674 9.48489 8.71347 9.48489C8.91096 9.48489 9.04399 9.51856 9.1137 9.58488C9.18342 9.65139 9.21844 9.7697 9.21844 9.93883C9.21844 10.0324 9.20736 10.1363 9.18438 10.2492C9.16172 10.3628 9.13342 10.483 9.10013 10.6098L8.72595 11.9342C8.69266 12.0734 8.66834 12.1979 8.65304 12.3084C8.63786 12.4189 8.63057 12.5272 8.63057 12.6326C8.63057 12.9048 8.73114 13.1292 8.93222 13.3063C9.13329 13.4826 9.41523 13.5714 9.77769 13.5714C10.0137 13.5714 10.2209 13.5406 10.3992 13.4785C10.5773 13.4167 10.8164 13.3268 11.1158 13.2086ZM11.0495 7.8502C11.2235 7.68882 11.3101 7.49254 11.3101 7.26272C11.3101 7.03341 11.2236 6.83675 11.0495 6.67331C10.8758 6.51032 10.6666 6.42857 10.4219 6.42857C10.1765 6.42857 9.96635 6.51013 9.79107 6.67331C9.61579 6.83675 9.52796 7.03334 9.52796 7.26272C9.52796 7.49254 9.61579 7.68875 9.79107 7.8502C9.96667 8.01217 10.1764 8.09321 10.4219 8.09321C10.6666 8.09321 10.8758 8.01217 11.0495 7.8502Z" fill="currentColor"></path></svg></button></div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950">$1,750</div><div class="inline-flex items-center justify-center rounded-full transition duration-200 ease-out h-5 gap-1.5 px-2 text-label-xs bg-success-light text-success-dark">Last 15 days</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class="grid h-[86px] grid-cols-2 border-t border-faded-lighter"><div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 85px; max-width: 261px;"><svg class="recharts-surface" width="261" height="85" viewBox="0 0 261 85" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts19-clip"><rect x="0" y="0" height="85" width="261"></rect></clipPath></defs><g class="recharts-layer recharts-area fill-bg-white-0 stroke-primary-base"><g class="recharts-layer"><path stroke-width="2" fill="hsl(var(--primary-alpha-10))" class="recharts-curve recharts-area-area" fill-opacity="1" width="261" height="85" stroke="none" d="M0,38.25L15.353,52.417L30.706,32.583L46.059,32.583L61.412,21.25L76.765,32.583L92.118,48.167L107.471,21.25L122.824,17L138.176,48.167L153.529,34L168.882,22.667L184.235,38.25L199.588,31.167L214.941,34L230.294,55.25L245.647,42.5L261,24.083L261,85L245.647,85L230.294,85L214.941,85L199.588,85L184.235,85L168.882,85L153.529,85L138.176,85L122.824,85L107.471,85L92.118,85L76.765,85L61.412,85L46.059,85L30.706,85L15.353,85L0,85Z"></path><path stroke="hsl(var(--primary-base))" stroke-width="2" fill="none" class="recharts-curve recharts-area-curve" fill-opacity="1" width="261" height="85" d="M0,38.25L15.353,52.417L30.706,32.583L46.059,32.583L61.412,21.25L76.765,32.583L92.118,48.167L107.471,21.25L122.824,17L138.176,48.167L153.529,34L168.882,22.667L184.235,38.25L199.588,31.167L214.941,34L230.294,55.25L245.647,42.5L261,24.083"></path></g></g></svg></div></div><div class="flex flex-col items-start justify-end border-l-2 border-primary-base px-4 pb-4"><div class="text-label-md text-text-strong-950">45%</div><div class="text-label-xs text-text-soft-400">$32.9K used</div></div></div></div>



<div class="flex flex-col gap-6"><div class="relative flex w-full flex-col rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="flex items-center gap-1"><div class="text-label-sm text-text-sub-600">Product Categories</div><button data-state="closed"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 text-text-disabled-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25ZM11.1158 13.2086L11.2156 12.8006C11.164 12.8249 11.0807 12.8526 10.9665 12.8841C10.852 12.9157 10.7489 12.9318 10.6583 12.9318C10.4654 12.9318 10.3295 12.9001 10.2507 12.8366C10.1724 12.773 10.1333 12.6534 10.1333 12.4783C10.1333 12.4089 10.1451 12.3054 10.1697 12.17C10.1936 12.0337 10.2211 11.9126 10.2516 11.8067L10.6242 10.4876C10.6607 10.3665 10.6857 10.2334 10.6992 10.0882C10.7129 9.94325 10.7193 9.84185 10.7193 9.78429C10.7193 9.50614 10.6218 9.28041 10.4268 9.10629C10.2317 8.93229 9.95393 8.84529 9.59396 8.84529C9.39365 8.84529 9.18188 8.88088 8.95776 8.952C8.73363 9.02294 8.49933 9.1084 8.25421 9.2082L8.15415 9.6165C8.22719 9.58949 8.31419 9.56043 8.41598 9.53034C8.51732 9.50038 8.61674 9.48489 8.71347 9.48489C8.91096 9.48489 9.04399 9.51856 9.1137 9.58488C9.18342 9.65139 9.21844 9.7697 9.21844 9.93883C9.21844 10.0324 9.20736 10.1363 9.18438 10.2492C9.16172 10.3628 9.13342 10.483 9.10013 10.6098L8.72595 11.9342C8.69266 12.0734 8.66834 12.1979 8.65304 12.3084C8.63786 12.4189 8.63057 12.5272 8.63057 12.6326C8.63057 12.9048 8.73114 13.1292 8.93222 13.3063C9.13329 13.4826 9.41523 13.5714 9.77769 13.5714C10.0137 13.5714 10.2209 13.5406 10.3992 13.4785C10.5773 13.4167 10.8164 13.3268 11.1158 13.2086ZM11.0495 7.8502C11.2235 7.68882 11.3101 7.49254 11.3101 7.26272C11.3101 7.03341 11.2236 6.83675 11.0495 6.67331C10.8758 6.51032 10.6666 6.42857 10.4219 6.42857C10.1765 6.42857 9.96635 6.51013 9.79107 6.67331C9.61579 6.83675 9.52796 7.03334 9.52796 7.26272C9.52796 7.49254 9.61579 7.68875 9.79107 7.8502C9.96667 8.01217 10.1764 8.09321 10.4219 8.09321C10.6666 8.09321 10.8758 8.01217 11.0495 7.8502Z" fill="currentColor"></path></svg></button></div><div class="mt-1 flex items-center gap-2"><div class="text-title-h5 text-text-strong-950"><number-flow-react aria-label="58%" role="img" data="{&quot;pre&quot;:[],&quot;integer&quot;:[{&quot;type&quot;:&quot;integer&quot;,&quot;value&quot;:5,&quot;key&quot;:&quot;integer:1&quot;,&quot;pos&quot;:1},{&quot;type&quot;:&quot;integer&quot;,&quot;value&quot;:8,&quot;key&quot;:&quot;integer:0&quot;,&quot;pos&quot;:0}],&quot;fraction&quot;:[],&quot;post&quot;:[{&quot;type&quot;:&quot;suffix&quot;,&quot;value&quot;:&quot;%&quot;,&quot;key&quot;:&quot;suffix:0&quot;}],&quot;valueAsString&quot;:&quot;58%&quot;,&quot;value&quot;:58}"></number-flow-react></div><div class="text-label-sm text-text-sub-600"><span class="text-success-base">+2.1%</span> vs last week</div></div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div class="mt-3.5"><div class="w-full"><div class="relative h-8 w-full bg-bg-soft-200" style="mask-image: linear-gradient(90deg, rgb(0, 0, 0) 6px, rgba(0, 0, 0, 0) 6px); mask-size: 9px 100%; mask-repeat: space; background-position: 0px 0px; width: 477px;"><div class="h-full [clip-path:inset(0)]" style="width: 279px;"><div class="absolute inset-0 bg-primary-base"></div></div></div></div></div><div class="mt-3 flex items-center justify-between"><div class="flex items-center gap-2"><div class="whitespace-nowrap text-label-sm text-text-sub-600">Accessories</div><div class="flex"><button type="button" class="flex size-5 shrink-0 items-center justify-center rounded-l-md bg-bg-white-0 ring-1 ring-inset ring-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:outline-none focus-visible:bg-bg-weak-50"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-[18px] text-text-sub-600"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button><button type="button" class="flex size-5 shrink-0 items-center justify-center rounded-r-md bg-bg-white-0 ring-1 ring-inset ring-stroke-soft-200 transition duration-200 ease-out hover:bg-bg-weak-50 focus:outline-none focus-visible:bg-bg-weak-50"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-[18px] text-text-sub-600"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div></div><div class="flex items-center gap-2"><div class="text-label-sm text-text-sub-600">45 products</div><div class="text-label-xs text-text-soft-400">·</div><div class="text-label-sm text-success-base">+3.2%</div></div></div></div><div class="relative flex w-full flex-col rounded-2xl bg-bg-white-0 p-5 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><div class="flex items-start gap-2"><div class="flex-1"><div class="flex items-center gap-1"><div class="text-label-sm text-text-sub-600">Customer Segments</div><button data-state="closed"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 text-text-disabled-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25ZM11.1158 13.2086L11.2156 12.8006C11.164 12.8249 11.0807 12.8526 10.9665 12.8841C10.852 12.9157 10.7489 12.9318 10.6583 12.9318C10.4654 12.9318 10.3295 12.9001 10.2507 12.8366C10.1724 12.773 10.1333 12.6534 10.1333 12.4783C10.1333 12.4089 10.1451 12.3054 10.1697 12.17C10.1936 12.0337 10.2211 11.9126 10.2516 11.8067L10.6242 10.4876C10.6607 10.3665 10.6857 10.2334 10.6992 10.0882C10.7129 9.94325 10.7193 9.84185 10.7193 9.78429C10.7193 9.50614 10.6218 9.28041 10.4268 9.10629C10.2317 8.93229 9.95393 8.84529 9.59396 8.84529C9.39365 8.84529 9.18188 8.88088 8.95776 8.952C8.73363 9.02294 8.49933 9.1084 8.25421 9.2082L8.15415 9.6165C8.22719 9.58949 8.31419 9.56043 8.41598 9.53034C8.51732 9.50038 8.61674 9.48489 8.71347 9.48489C8.91096 9.48489 9.04399 9.51856 9.1137 9.58488C9.18342 9.65139 9.21844 9.7697 9.21844 9.93883C9.21844 10.0324 9.20736 10.1363 9.18438 10.2492C9.16172 10.3628 9.13342 10.483 9.10013 10.6098L8.72595 11.9342C8.69266 12.0734 8.66834 12.1979 8.65304 12.3084C8.63786 12.4189 8.63057 12.5272 8.63057 12.6326C8.63057 12.9048 8.73114 13.1292 8.93222 13.3063C9.13329 13.4826 9.41523 13.5714 9.77769 13.5714C10.0137 13.5714 10.2209 13.5406 10.3992 13.4785C10.5773 13.4167 10.8164 13.3268 11.1158 13.2086ZM11.0495 7.8502C11.2235 7.68882 11.3101 7.49254 11.3101 7.26272C11.3101 7.03341 11.2236 6.83675 11.0495 6.67331C10.8758 6.51032 10.6666 6.42857 10.4219 6.42857C10.1765 6.42857 9.96635 6.51013 9.79107 6.67331C9.61579 6.83675 9.52796 7.03334 9.52796 7.26272C9.52796 7.49254 9.61579 7.68875 9.79107 7.8502C9.96667 8.01217 10.1764 8.09321 10.4219 8.09321C10.6666 8.09321 10.8758 8.01217 11.0495 7.8502Z" fill="currentColor"></path></svg></button></div></div><div class="text-label-sm text-text-sub-600"><span class="text-success-base">+5.8%</span> vs last week</div></div><div class="mt-5 flex items-center gap-6"><div style="width: 98px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 98px; height: 98px;"><svg cx="50%" cy="50%" class="recharts-surface" width="98" height="98" viewBox="0 0 98 98" style="width: 100%; height: 100%;"><title></title><desc></desc><defs><clipPath id="recharts1-clip"><rect x="0" y="0" height="98" width="98"></rect></clipPath></defs><g class="recharts-layer recharts-pie" tabindex="0"><g class="recharts-layer"><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="49" cy="49" name="Premium" stroke="#fff" fill="fill-warning-base" width="98" height="98" id="premium" class="recharts-sector stroke-stroke-white-0 fill-warning-base" tabindex="-1" d="M 49,6.046536810170942
    A2,2,0,0,0,46.90697674418604,4.048701312969584
    A45,45,0,0,0,11.675700356952994,74.13755469722625
    A2,2,0,0,0,14.527729829104658,74.62542856743667
  L21.760574790804693,69.24879537830967
      A2,2,0,0,0,22.239908781709396,66.5470088046016
      A32,32,0,0,1,47.11764705882353,17.055411296984207
      A2,2,0,0,0,49,15.058874503045722Z" role="img"></path></g><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="49" cy="49" name="Regular" stroke="#fff" fill="fill-away-base" width="98" height="98" id="regular" class="recharts-sector stroke-stroke-white-0 fill-away-base" tabindex="-1" d="M 15.44304396447263,75.81288312788618
    A2,2,0,0,0,15.188785304223302,78.69514709167298
    A45,45,0,0,0,83.67389837264565,77.68310951838104
    A2,2,0,0,0,83.33458412158471,74.80961706801988
  L76.13062794043542,69.39433812502051
      A2,2,0,0,0,73.40365180385973,69.69931831331586
      A32,32,0,0,1,25.218638186436458,70.4113715182466
      A2,2,0,0,0,22.483841080192434,70.18710258953567Z" role="img"></path></g><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="49" cy="49" name="New" stroke="#fff" fill="fill-success-base" width="98" height="98" id="new" class="recharts-sector stroke-stroke-white-0 fill-success-base" tabindex="-1" d="M 84.21441106638544,73.59563484132156
    A2,2,0,0,0,87.05077924506833,73.02370077325882
    A45,45,0,0,0,89.16840101844096,28.71454807943115
    A2,2,0,0,0,86.39950338723784,27.874727306186426
  L78.55247711645711,32.30715433842154
      A2,2,0,0,0,77.73987056957552,34.92804776713456
      A32,32,0,0,1,76.26689436756766,65.74862595999764
      A2,2,0,0,0,76.82585283108298,68.4350691849273Z" role="img"></path></g><g class="recharts-layer recharts-pie-sector" tabindex="-1"><g class="recharts-layer recharts-active-shape"><path cx="49" cy="49" name="Others" stroke="#fff" fill="fill-bg-weak-50" width="98" height="98" id="others" class="recharts-sector stroke-stroke-white-0 fill-bg-weak-50" tabindex="-1" d="M 86.53215891440124,26.03617960303355
    A 44,44,0,
    0,0,
    50.53557785491004,5.026803611159785
  L 50.15168339118253,16.02010270836984
            A 33,33,0,
            0,1,
            77.14911918580091,31.777134702275163 Z" role="img"></path></g></g></g></g></svg></div></div><div class="flex flex-1 flex-col gap-[13px]"><div class="flex items-center justify-between gap-1"><div class="flex items-center gap-2 text-label-sm text-text-sub-600"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-warning-base"></div>Premium</div><div class="flex items-center gap-1.5 tabular-nums"><div class="text-label-sm text-text-sub-600">$6,450</div><div class="text-paragraph-sm text-text-disabled-300">·</div><div class="text-paragraph-sm text-text-soft-400">36%</div></div></div><div class="flex items-center justify-between gap-1"><div class="flex items-center gap-2 text-label-sm text-text-sub-600"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-away-base"></div>Regular</div><div class="flex items-center gap-1.5 tabular-nums"><div class="text-label-sm text-text-sub-600">$5,320</div><div class="text-paragraph-sm text-text-disabled-300">·</div><div class="text-paragraph-sm text-text-soft-400">30%</div></div></div><div class="flex items-center justify-between gap-1"><div class="flex items-center gap-2 text-label-sm text-text-sub-600"><div class="size-3 shrink-0 rounded-full border-2 border-stroke-white-0 shadow-regular-sm bg-success-base"></div>New</div><div class="flex items-center gap-1.5 tabular-nums"><div class="text-label-sm text-text-sub-600">$3,280</div><div class="text-paragraph-sm text-text-disabled-300">·</div><div class="text-paragraph-sm text-text-soft-400">18%</div></div></div></div></div></div></div>



<div class="w-full rounded-2xl bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200" data-protonpass-form=""><div class="p-5"><div class="flex items-start gap-3"><div class="flex-1"><div class="text-label-md text-text-strong-950">Recent Activities</div><div class="mt-1 text-paragraph-sm text-text-sub-600">7 new activities today</div></div><button class="group relative inline-flex items-center justify-center whitespace-nowrap outline-none transition duration-200 ease-out focus:outline-none disabled:pointer-events-none disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:ring-transparent ring-1 ring-inset h-7 gap-2.5 rounded-lg px-2 text-label-sm bg-bg-white-0 text-text-sub-600 shadow-regular-xs ring-stroke-soft-200 hover:bg-bg-weak-50 hover:text-text-strong-950 hover:shadow-none hover:ring-transparent focus-visible:text-text-strong-950 focus-visible:shadow-button-important-focus focus-visible:ring-stroke-strong-950">Details</button></div><div role="group" dir="ltr" class="mt-4 flex flex-wrap gap-2.5" tabindex="0" style="outline: none;"><button type="button" data-state="on" role="radio" aria-checked="true" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Today</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">Yesterday</button><button type="button" data-state="off" role="radio" aria-checked="false" class="flex h-7 items-center justify-center rounded-lg bg-bg-weak-50 px-2.5 text-label-sm text-text-sub-600 transition duration-200 ease-out data-[state=on]:bg-primary-alpha-10 data-[state=on]:text-primary-base" tabindex="-1" data-radix-collection-item="">This Week</button></div></div><div class="relative"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon pointer-events-none absolute left-5 top-1/2 size-5 -translate-y-1/2 text-text-soft-400"><path d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z"></path></svg><input placeholder="Search for activities..." class="h-12 w-full border-y border-stroke-soft-200 bg-transparent bg-none pl-[50px] pr-5 text-paragraph-sm text-text-strong-950 caret-primary-base placeholder:text-text-soft-400 focus:outline-none" type="text"></div><div class="flex flex-col gap-6 p-5"><div class="relative flex items-start gap-4"><div class="absolute -bottom-4 left-3.5 top-9 w-px bg-stroke-soft-200"></div><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-information-base"><path d="M20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864ZM11.9999 3.33233L5.88723 6.99995L11.9999 10.6676L18.1126 6.99995L11.9999 3.33233Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">Inventory Updated</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Women's Summer Dress - Blue</div><div class="mt-1 text-label-xs text-text-sub-600">Stock: +150 units added</div></div></div><div class="relative flex items-start gap-4"><div class="absolute -bottom-4 left-3.5 top-9 w-px bg-stroke-soft-200"></div><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-success-base"><path d="M3.00488 6.99972L11.4502 1.36952C11.7861 1.14559 12.2237 1.14559 12.5596 1.36952L21.0049 6.99972V20.9997C21.0049 21.552 20.5572 21.9997 20.0049 21.9997H4.00488C3.4526 21.9997 3.00488 21.552 3.00488 20.9997V6.99972ZM5.00488 8.07009V19.9997H19.0049V8.07009L12.0049 3.40342L5.00488 8.07009ZM12.0049 10.9997C10.9003 10.9997 10.0049 10.1043 10.0049 8.99972C10.0049 7.89515 10.9003 6.99972 12.0049 6.99972C13.1095 6.99972 14.0049 7.89515 14.0049 8.99972C14.0049 10.1043 13.1095 10.9997 12.0049 10.9997Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">Price Change</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Seasonal discount applied</div><div class="mt-1 text-label-xs text-text-sub-600">$89.99 → $69.99 (-22%)</div></div></div><div class="relative flex items-start gap-4"><div class="absolute -bottom-4 left-3.5 top-9 w-px bg-stroke-soft-200"></div><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-feauture-base"><path d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">New Product Added</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Women's Summer Dress - Red</div><div class="mt-1 text-label-xs text-text-sub-600">Listed in Women's Fashion</div></div></div><div class="relative flex items-start gap-4"><div class="absolute -bottom-4 left-3.5 top-9 w-px bg-stroke-soft-200"></div><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-away-base"><path d="M2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918ZM20 15V5H4V19L14 9L20 15ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">Product Images Updated</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Women's Summer Dress - Blue</div><div class="mt-1 text-label-xs text-text-sub-600">5 new images added</div></div></div><div class="relative flex items-start gap-4"><div class="absolute -bottom-4 left-3.5 top-9 w-px bg-stroke-soft-200"></div><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-faded-base"><path d="M15.7279 9.57627L14.3137 8.16206L5 17.4758V18.89H6.41421L15.7279 9.57627ZM17.1421 8.16206L18.5563 6.74785L17.1421 5.33363L15.7279 6.74785L17.1421 8.16206ZM7.24264 20.89H3V16.6473L16.435 3.21231C16.8256 2.82179 17.4587 2.82179 17.8492 3.21231L20.6777 6.04074C21.0682 6.43126 21.0682 7.06443 20.6777 7.45495L7.24264 20.89Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">Description Updated</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Women's Summer Dress - Blue</div><div class="mt-1 text-label-xs text-text-sub-600">Added size guide and materials</div></div></div><div class="relative flex items-start gap-4"><div class="absolute -bottom-4 left-3.5 top-9 w-px bg-stroke-soft-200"></div><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-information-base"><path d="M20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864ZM11.9999 3.33233L5.88723 6.99995L11.9999 10.6676L18.1126 6.99995L11.9999 3.33233Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">Inventory Updated</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Women's Summer Dress - Blue</div><div class="mt-1 text-label-xs text-text-sub-600">Stock: +150 units added</div></div></div><div class="relative flex items-start gap-4"><div class="flex size-7 shrink-0 items-center justify-center rounded-full bg-bg-white-0 shadow-regular-xs ring-1 ring-inset ring-stroke-soft-200"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon size-4 text-success-base"><path d="M3.00488 6.99972L11.4502 1.36952C11.7861 1.14559 12.2237 1.14559 12.5596 1.36952L21.0049 6.99972V20.9997C21.0049 21.552 20.5572 21.9997 20.0049 21.9997H4.00488C3.4526 21.9997 3.00488 21.552 3.00488 20.9997V6.99972ZM5.00488 8.07009V19.9997H19.0049V8.07009L12.0049 3.40342L5.00488 8.07009ZM12.0049 10.9997C10.9003 10.9997 10.0049 10.1043 10.0049 8.99972C10.0049 7.89515 10.9003 6.99972 12.0049 6.99972C13.1095 6.99972 14.0049 7.89515 14.0049 8.99972C14.0049 10.1043 13.1095 10.9997 12.0049 10.9997Z"></path></svg></div><div class="flex-1"><div class="flex items-center justify-between gap-1.5"><div class="text-label-sm text-text-strong-950">Price Change</div><div class="text-right text-subheading-2xs uppercase text-text-soft-400">11:30 AM</div></div><div class="mt-1 text-paragraph-xs text-text-sub-600">Seasonal discount applied</div><div class="mt-1 text-label-xs text-text-sub-600">$89.99 → $69.99 (-22%)</div></div></div></div></div>