mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-10-29 08:04:53 +00:00
small fix, don't worry about it
This commit is contained in:
Tomas Dvorak committed
1 parent
08bd0c6e5c
commit
08cb5754f3
638 files changed
+57330
-34704
No files matched your search
@@ -0,0 +1,149 @@
|
||||
# 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 [&_.recharts-cartesian-grid-horizontal>line]:stroke-stroke-soft-200 [&_.recharts-cartesian-grid-horizontal>line]:[stroke-dasharray:0] [&_.recharts-cartesian-grid-vertical>line:last-child]:opacity-0 [&_.recharts-cartesian-grid-vertical>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="6Line truncated
|
||||
|
||||
|
||||
|
||||
<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 [&_.recharts-cartesian-axis-tick_text]:fill-text-soft-400 [&_.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.Line truncated
|
||||
|
||||
|
||||
|
||||
<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-fulLine truncated
|
||||
|
||||
|
||||
|
||||
<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 [&_.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.50846Line truncated
|
||||
|
||||
|
||||
|
||||
<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 [&_.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.50846Line truncated
|
||||
|
||||
|
||||
<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 [&_.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.50846Line truncated
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>Line truncated
|
||||
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="offLine truncated
|
||||
|
||||
|
||||
|
||||
|
||||
<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-Line truncated
|
||||
|
||||
|
||||
|
||||
<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="{"pre":[],"integer":[{"type":"integer","value":5,"key":"integer:1","pos":1},{"type":"integer","value":8,"key":"integer:0","pos":0}],"fraction":[],"post":[{"type":"suffix","value":"%","key":"suffix:0"}],"valueAsString":"58%","value":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 transitioLine truncated
|
||||
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-softLine truncated
|
||||
Reference in new issue
Block a user