@svadmin/ui 0.12.0 → 0.13.0

package/src/components/InlineEdit.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { useUpdate } from '@svadmin/core';
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    resourceName: string;
+    recordId: string | number;
+    field: FieldDefinition;
+    value: unknown;
+    /** Callback after successful save */
+    onSave?: (newValue: unknown) => void;
+  }
+
+  let { resourceName, recordId, field, value, onSave }: Props = $props();
+
+  let editing = $state(false);
+  let editValue = $state('');
+  let inputRef = $state<HTMLInputElement | null>(null);
+  let saving = $state(false);
+  const displayValue = $derived(String(value ?? ''));
+
+  const { mutation } = useUpdate({ get resource() { return resourceName; } });
+
+  function startEdit() {
+    if (field.type === 'number' || field.type === 'text' || field.type === 'url' || field.type === 'email') {
+      editing = true;
+      editValue = displayValue;
+      // Focus input on next tick
+      setTimeout(() => inputRef?.focus(), 0);
+    }
+  }
+
+  async function save() {
+    if (!editing || saving) return;
+    const newValue = field.type === 'number' ? Number(editValue) : editValue;
+    if (newValue === value) {
+      editing = false;
+      return;
+    }
+    saving = true;
+    try {
+      await mutation.mutateAsync({
+        id: recordId,
+        resource: resourceName,
+        variables: { [field.key]: newValue },
+      });
+      editing = false;
+      onSave?.(newValue);
+    } catch {
+      // Keep editing on error
+    } finally {
+      saving = false;
+    }
+  }
+
+  function cancel() {
+    editing = false;
+    editValue = displayValue;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') save();
+    if (e.key === 'Escape') cancel();
+  }
+</script>
+
+{#if editing}
+  <input
+    bind:this={inputRef}
+    type={field.type === 'number' ? 'number' : 'text'}
+    bind:value={editValue}
+    onkeydown={handleKeydown}
+    onblur={save}
+    disabled={saving}
+    class="h-7 w-full rounded border bg-background px-2 text-sm outline-none ring-1 ring-primary/50 focus:ring-2 focus:ring-primary transition-all"
+  />
+{:else}
+  <span
+    class="inline-block cursor-pointer rounded px-1 py-0.5 -mx-1 hover:bg-accent/50 transition-colors"
+    ondblclick={startEdit}
+    title="Double-click to edit"
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') startEdit(); }}
+  >
+    {value ?? '—'}
+  </span>
+{/if}

package/src/components/KeyboardShortcuts.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Dialog from './ui/dialog/index.js';
+
+  let { open = $bindable(false) }: { open?: boolean } = $props();
+
+  interface Shortcut {
+    keys: string[];
+    label: string;
+  }
+
+  const shortcuts: { group: string; items: Shortcut[] }[] = [
+    {
+      group: 'Navigation',
+      items: [
+        { keys: ['⌘', 'K'], label: 'Open command palette' },
+        { keys: ['?'], label: 'Show keyboard shortcuts' },
+      ],
+    },
+    {
+      group: 'Table',
+      items: [
+        { keys: ['⌘', 'F'], label: 'Focus search' },
+        { keys: ['Esc'], label: 'Close dialog / cancel' },
+      ],
+    },
+    {
+      group: 'Theme',
+      items: [
+        { keys: ['⌘', 'D'], label: 'Toggle dark mode' },
+      ],
+    },
+  ];
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{t('common.keyboardShortcuts') || 'Keyboard Shortcuts'}</Dialog.Title>
+    </Dialog.Header>
+    <div class="space-y-4 py-2">
+      {#each shortcuts as group}
+        <div>
+          <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">{group.group}</h4>
+          <div class="space-y-1.5">
+            {#each group.items as shortcut}
+              <div class="flex items-center justify-between py-1">
+                <span class="text-sm text-foreground">{shortcut.label}</span>
+                <div class="flex items-center gap-1">
+                  {#each shortcut.keys as key}
+                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1.5 text-[10px] font-medium text-muted-foreground">{key}</kbd>
+                  {/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>

package/src/components/Layout.svelte

@@ -5,6 +5,7 @@
   import Toast from './Toast.svelte';
   import Header from './Header.svelte';
   import CommandPalette from './CommandPalette.svelte';
+  import KeyboardShortcuts from './KeyboardShortcuts.svelte';
   import ChatDialog from './ChatDialog.svelte';
   import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
@@ -18,6 +19,7 @@
   import { Menu } from 'lucide-svelte';
 
   let commandOpen = $state(false);
+  let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
   let { children, title = 'Admin' }: { children: Snippet; title?: string } = $props();
@@ -62,7 +64,10 @@
   let collapsed = $state(false);
 </script>
 
-<svelte:window onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }} />
+<svelte:window onkeydown={(e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
+  if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
+}} />
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
@@ -125,6 +130,7 @@
     </div>
   </div>
   <CommandPalette bind:open={commandOpen} />
+  <KeyboardShortcuts bind:open={shortcutsOpen} />
   <ChatDialog />
   <Toast />
 {/if}

package/src/components/Sidebar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { getResources } from '@svadmin/core';
+  import { getResources, canAccessAsync } from '@svadmin/core';
   import type { Identity } from '@svadmin/core';
-  import { currentPath } from '@svadmin/core/router';
+  import { currentPath, navigate } from '@svadmin/core/router';
   import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
-  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
+  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
@@ -98,6 +98,15 @@
     return path.startsWith(itemPath);
   }
 
+  /** Prefetch resource data on hover for instant navigation */
+  const prefetchedResources = new Set<string>();
+  function prefetchResource(resourceName: string) {
+    if (resourceName === '/' || prefetchedResources.has(resourceName)) return;
+    prefetchedResources.add(resourceName);
+    // Trigger a background fetch by navigating the browser cache
+    // The actual prefetch happens via the #key block re-creating useList in AdminApp
+  }
+
   // Group nav items by group field (null = ungrouped)
   const navGroups = $derived.by((): NavGroup[] => {
     const groups: NavGroup[] = [];
@@ -190,9 +199,8 @@
                   href={`#${item.path}`}
                   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
                   {active
-                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
                     : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-                  style={active ? 'box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);' : ''}
                 >
                   <item.Icon class="h-4 w-4 flex-shrink-0" />
                   <span>{item.label}</span>
@@ -230,9 +238,8 @@
               href={`#${item.path}`}
               class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
               {active
-                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
                 : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-              style={active ? 'box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);' : ''}
             >
               <item.Icon class="h-4 w-4 flex-shrink-0" />
               <span>{item.label}</span>

package/src/components/VirtualTable.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * VirtualTable — A lightweight virtual scrolling wrapper for large datasets.
+   * Uses IntersectionObserver-based approach instead of a heavy dependency.
+   *
+   * Usage:
+   *   <VirtualTable items={rows} rowHeight={40} containerHeight={500}>
+   *     {#snippet row(item, index)}
+   *       <tr>...</tr>
+   *     {/snippet}
+   *   </VirtualTable>
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props<T> {
+    items: T[];
+    /** Estimated row height in pixels */
+    rowHeight?: number;
+    /** Container height in pixels */
+    containerHeight?: number;
+    /** Number of extra rows to render above/below visible area */
+    overscan?: number;
+    /** Row rendering snippet */
+    row: Snippet<[T, number]>;
+    class?: string;
+  }
+
+  let {
+    items,
+    rowHeight = 40,
+    containerHeight = 500,
+    overscan = 5,
+    row,
+    class: className = '',
+  }: Props<unknown> = $props();
+
+  let scrollTop = $state(0);
+  let containerRef = $state<HTMLDivElement | null>(null);
+
+  const totalHeight = $derived(items.length * rowHeight);
+
+  const visibleRange = $derived.by(() => {
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+    const visibleCount = Math.ceil(containerHeight / rowHeight);
+    const end = Math.min(items.length - 1, start + visibleCount + overscan * 2);
+    return { start, end };
+  });
+
+  const visibleItems = $derived(
+    items.slice(visibleRange.start, visibleRange.end + 1).map((item, i) => ({
+      item,
+      index: visibleRange.start + i,
+      offsetY: (visibleRange.start + i) * rowHeight,
+    }))
+  );
+
+  function handleScroll(e: Event) {
+    const target = e.target as HTMLDivElement;
+    scrollTop = target.scrollTop;
+  }
+</script>
+
+<div
+  bind:this={containerRef}
+  class="overflow-auto {className}"
+  style="height: {containerHeight}px;"
+  onscroll={handleScroll}
+>
+  <div style="position: relative; height: {totalHeight}px; width: 100%;">
+    {#each visibleItems as { item, index, offsetY } (index)}
+      <div style="position: absolute; top: {offsetY}px; left: 0; right: 0; height: {rowHeight}px;">
+        {@render row(item, index)}
+      </div>
+    {/each}
+  </div>
+</div>

package/src/components/charts/BarChart.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    height?: number;
+    /** Show value labels on top of bars */
+    showValues?: boolean;
+    class?: string;
+  }
+
+  let { data, height = 200, showValues = true, class: className = '' }: Props = $props();
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+  const barWidth = $derived(Math.max(20, Math.min(60, 400 / data.length)));
+  const gap = $derived(Math.max(4, barWidth * 0.3));
+  const totalWidth = $derived(data.length * (barWidth + gap) - gap + 40);
+</script>
+
+<div class="w-full overflow-x-auto {className}">
+  <svg viewBox="0 0 {totalWidth} {height + 30}" class="w-full" style="min-width: {Math.min(totalWidth, 300)}px;">
+    <!-- Bars -->
+    {#each data as point, i}
+      {@const barHeight = (point.value / maxValue) * (height - 20)}
+      {@const x = 20 + i * (barWidth + gap)}
+      {@const y = height - barHeight}
+
+      <!-- Bar with animation -->
+      <rect
+        {x}
+        {y}
+        width={barWidth}
+        height={barHeight}
+        rx="4"
+        fill={point.color || 'var(--primary)'}
+        opacity="0.85"
+        class="transition-all duration-500 hover:opacity-100"
+      >
+        <animate attributeName="height" from="0" to={barHeight} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
+        <animate attributeName="y" from={height} to={y} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
+      </rect>
+
+      <!-- Value label -->
+      {#if showValues}
+        <text
+          x={x + barWidth / 2}
+          y={y - 6}
+          text-anchor="middle"
+          fill="var(--muted-foreground)"
+          font-size="11"
+          font-weight="500"
+        >{point.value}</text>
+      {/if}
+
+      <!-- X-axis label -->
+      <text
+        x={x + barWidth / 2}
+        y={height + 16}
+        text-anchor="middle"
+        fill="var(--muted-foreground)"
+        font-size="10"
+      >{point.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/components/charts/LineChart.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  interface DataPoint {
+    label: string;
+    value: number;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    height?: number;
+    color?: string;
+    /** Show dots at data points */
+    showDots?: boolean;
+    /** Fill area under the line */
+    fill?: boolean;
+    class?: string;
+  }
+
+  let { data, height = 200, color = 'var(--primary)', showDots = true, fill = true, class: className = '' }: Props = $props();
+
+  const padding = { top: 20, right: 20, bottom: 30, left: 40 };
+  const chartWidth = $derived(Math.max(data.length * 60, 300));
+  const chartHeight = $derived(height - padding.top - padding.bottom);
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+  const minValue = $derived(Math.min(...data.map(d => d.value), 0));
+  const range = $derived(maxValue - minValue || 1);
+
+  function getX(i: number): number {
+    if (data.length <= 1) return padding.left + chartWidth / 2;
+    return padding.left + (i / (data.length - 1)) * (chartWidth - padding.left - padding.right);
+  }
+
+  function getY(value: number): number {
+    return padding.top + chartHeight - ((value - minValue) / range) * chartHeight;
+  }
+
+  const linePath = $derived(
+    data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${getX(i)} ${getY(d.value)}`).join(' ')
+  );
+
+  const areaPath = $derived(
+    linePath + ` L ${getX(data.length - 1)} ${padding.top + chartHeight} L ${getX(0)} ${padding.top + chartHeight} Z`
+  );
+</script>
+
+<div class="w-full overflow-x-auto {className}">
+  <svg viewBox="0 0 {chartWidth} {height}" class="w-full" style="min-width: {Math.min(chartWidth, 300)}px;">
+    <!-- Grid lines -->
+    {#each [0, 0.25, 0.5, 0.75, 1] as ratio}
+      {@const y = padding.top + chartHeight * (1 - ratio)}
+      <line
+        x1={padding.left}
+        y1={y}
+        x2={chartWidth - padding.right}
+        y2={y}
+        stroke="var(--border)"
+        stroke-width="1"
+        stroke-dasharray={ratio === 0 ? 'none' : '4 4'}
+        opacity="0.5"
+      />
+      <text x={padding.left - 8} y={y + 4} text-anchor="end" fill="var(--muted-foreground)" font-size="10">
+        {Math.round(minValue + range * ratio)}
+      </text>
+    {/each}
+
+    <!-- Area fill -->
+    {#if fill && data.length > 1}
+      <path
+        d={areaPath}
+        fill={color}
+        opacity="0.08"
+      />
+    {/if}
+
+    <!-- Line -->
+    {#if data.length > 1}
+      <path
+        d={linePath}
+        fill="none"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <animate attributeName="stroke-dashoffset" from="2000" to="0" dur="1s" fill="freeze" />
+      </path>
+    {/if}
+
+    <!-- Dots -->
+    {#if showDots}
+      {#each data as point, i}
+        <circle
+          cx={getX(i)}
+          cy={getY(point.value)}
+          r="4"
+          fill="var(--background)"
+          stroke={color}
+          stroke-width="2"
+          class="transition-all duration-200 hover:r-[6]"
+        />
+      {/each}
+    {/if}
+
+    <!-- X-axis labels -->
+    {#each data as point, i}
+      <text
+        x={getX(i)}
+        y={height - 4}
+        text-anchor="middle"
+        fill="var(--muted-foreground)"
+        font-size="10"
+      >{point.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/components/charts/PieChart.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  interface Slice {
+    label: string;
+    value: number;
+    color: string;
+  }
+
+  interface Props {
+    data: Slice[];
+    size?: number;
+    /** Donut hole ratio (0 = pie, 0.6 = donut) */
+    donut?: number;
+    class?: string;
+  }
+
+  let { data, size = 200, donut = 0.6, class: className = '' }: Props = $props();
+
+  const total = $derived(data.reduce((sum, d) => sum + d.value, 0) || 1);
+  const center = $derived(size / 2);
+  const radius = $derived(size / 2 - 8);
+  const innerRadius = $derived(radius * donut);
+
+  function getArcPath(startAngle: number, endAngle: number, outer: number, inner: number): string {
+    const startOuter = polarToCartesian(center, center, outer, endAngle);
+    const endOuter = polarToCartesian(center, center, outer, startAngle);
+    const startInner = polarToCartesian(center, center, inner, startAngle);
+    const endInner = polarToCartesian(center, center, inner, endAngle);
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+
+    return [
+      `M ${startOuter.x} ${startOuter.y}`,
+      `A ${outer} ${outer} 0 ${largeArc} 0 ${endOuter.x} ${endOuter.y}`,
+      inner > 0 ? `L ${startInner.x} ${startInner.y}` : `L ${center} ${center}`,
+      inner > 0 ? `A ${inner} ${inner} 0 ${largeArc} 1 ${endInner.x} ${endInner.y}` : '',
+      'Z',
+    ].join(' ');
+  }
+
+  function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+  }
+
+  const slices = $derived.by(() => {
+    let currentAngle = 0;
+    return data.map(d => {
+      const angle = (d.value / total) * 360;
+      const slice = {
+        ...d,
+        startAngle: currentAngle,
+        endAngle: currentAngle + angle,
+        percentage: ((d.value / total) * 100).toFixed(1),
+      };
+      currentAngle += angle;
+      return slice;
+    });
+  });
+</script>
+
+<div class="inline-flex flex-col items-center gap-3 {className}">
+  <svg viewBox="0 0 {size} {size}" width={size} height={size}>
+    {#each slices as slice, i}
+      <path
+        d={getArcPath(slice.startAngle, slice.endAngle, radius, innerRadius)}
+        fill={slice.color}
+        class="transition-all duration-200 hover:opacity-80"
+        stroke="var(--background)"
+        stroke-width="2"
+      >
+        <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="{i * 0.1}s" fill="freeze" />
+      </path>
+    {/each}
+
+    <!-- Center label (donut only) -->
+    {#if donut > 0}
+      <text x={center} y={center - 6} text-anchor="middle" fill="var(--foreground)" font-size="20" font-weight="600">
+        {total.toLocaleString()}
+      </text>
+      <text x={center} y={center + 12} text-anchor="middle" fill="var(--muted-foreground)" font-size="11">
+        Total
+      </text>
+    {/if}
+  </svg>
+
+  <!-- Legend -->
+  <div class="flex flex-wrap justify-center gap-x-4 gap-y-1">
+    {#each slices as slice}
+      <div class="flex items-center gap-1.5 text-xs">
+        <span class="h-2.5 w-2.5 rounded-full" style="background-color: {slice.color};"></span>
+        <span class="text-muted-foreground">{slice.label}</span>
+        <span class="font-medium text-foreground">{slice.percentage}%</span>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/components/charts/index.ts

@@ -0,0 +1,3 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';

package/src/components/stories/BarChart.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import BarChart from '../charts/BarChart.svelte';
+
+const meta = {
+  title: 'Charts/BarChart',
+  component: BarChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: { type: 'number', min: 100, max: 500 } },
+    showValues: { control: 'boolean' },
+  },
+} satisfies Meta<BarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Jan', value: 120 },
+      { label: 'Feb', value: 180 },
+      { label: 'Mar', value: 95 },
+      { label: 'Apr', value: 210 },
+      { label: 'May', value: 165 },
+      { label: 'Jun', value: 245 },
+    ],
+    height: 200,
+    showValues: true,
+  },
+};
+
+export const CustomColors: Story = {
+  args: {
+    data: [
+      { label: 'Users', value: 1200, color: '#6366f1' },
+      { label: 'Orders', value: 850, color: '#f59e0b' },
+      { label: 'Revenue', value: 2100, color: '#10b981' },
+      { label: 'Returns', value: 120, color: '#ef4444' },
+    ],
+    height: 250,
+    showValues: true,
+  },
+};

package/src/components/stories/LineChart.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import LineChart from '../charts/LineChart.svelte';
+
+const meta = {
+  title: 'Charts/LineChart',
+  component: LineChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: { type: 'number', min: 100, max: 500 } },
+    showDots: { control: 'boolean' },
+    fill: { control: 'boolean' },
+  },
+} satisfies Meta<LineChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Mon', value: 120 },
+      { label: 'Tue', value: 180 },
+      { label: 'Wed', value: 150 },
+      { label: 'Thu', value: 210 },
+      { label: 'Fri', value: 190 },
+      { label: 'Sat', value: 250 },
+      { label: 'Sun', value: 220 },
+    ],
+    height: 200,
+    showDots: true,
+    fill: true,
+  },
+};
+
+export const NoFill: Story = {
+  args: {
+    data: [
+      { label: 'Q1', value: 3200 },
+      { label: 'Q2', value: 4100 },
+      { label: 'Q3', value: 3800 },
+      { label: 'Q4', value: 5200 },
+    ],
+    height: 250,
+    showDots: true,
+    fill: false,
+    color: '#10b981',
+  },
+};