fix(dashboard): Improve styling of metrics widget, add refresh

packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx

@@ -1,6 +1,4 @@
-import { Area, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
-
-import { AreaChart } from 'recharts';
+import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 import { useWidgetDimensions } from '../base-widget.js';
 
 export function MetricsChart({
@@ -14,11 +12,29 @@ export function MetricsChart({
 
     return (
         <AreaChart width={width} height={height} data={chartData}>
+            <defs>
+                <linearGradient id="gradientFill" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="var(--color-brand)" stopOpacity={0.9} />
+                    <stop offset="100%" stopColor="var(--color-brand)" stopOpacity={0.05} />
+                </linearGradient>
+            </defs>
             <CartesianGrid strokeDasharray="4 4" stroke="var(--color-border)" />
             <XAxis className="text-xs" color="var(--color-foreground)" dataKey="name" interval={2} />
             <YAxis className="text-xs" color="var(--color-foreground)" tickFormatter={formatValue} />
-            <Tooltip formatter={formatValue} />
-            <Area type="monotone" dataKey="sales" stroke="var(--color-brand)" strokeWidth={2} />
+            <Tooltip
+                formatter={formatValue}
+                contentStyle={{ borderRadius: 4, padding: 4, paddingLeft: 8, paddingRight: 8 }}
+                labelStyle={{ fontSize: 12 }}
+                itemStyle={{ fontSize: 14 }}
+            />
+            <Area
+                type="monotone"
+                dataKey="sales"
+                stroke="var(--color-brand)"
+                strokeWidth={2}
+                strokeOpacity={0.8}
+                fill={'url(#gradientFill)'}
+            />
         </AreaChart>
     );
 }

packages/dashboard/src/lib/framework/dashboard-widget/metrics-widget/index.tsx

@@ -1,8 +1,10 @@
+import { Button } from '@/vdb/components/ui/button.js';
 import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useQuery } from '@tanstack/react-query';
+import { RefreshCw } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
 import { MetricsChart } from './chart.js';
@@ -19,7 +21,7 @@ export function MetricsWidget() {
     const { activeChannel } = useChannel();
     const [dataType, setDataType] = useState<DATA_TYPES>(DATA_TYPES.OrderTotal);
 
-    const { data } = useQuery({
+    const { data, isRefetching, refetch } = useQuery({
         queryKey: ['dashboard-order-metrics', dataType],
         queryFn: () => {
             return api.query(orderChartDataQuery, {
@@ -53,15 +55,22 @@ export function MetricsWidget() {
         <DashboardBaseWidget
             id="metrics-widget"
             title="Metrics"
-            description="Metrics widget"
+            description="Order metrics"
             actions={
-                <Tabs defaultValue={dataType} onValueChange={value => setDataType(value as DATA_TYPES)}>
-                    <TabsList>
-                        <TabsTrigger value={DATA_TYPES.OrderCount}>Order Count</TabsTrigger>
-                        <TabsTrigger value={DATA_TYPES.OrderTotal}>Order Total</TabsTrigger>
-                        <TabsTrigger value={DATA_TYPES.AverageOrderValue}>Average Order Value</TabsTrigger>
-                    </TabsList>
-                </Tabs>
+                <div className="flex gap-1">
+                    <Tabs defaultValue={dataType} onValueChange={value => setDataType(value as DATA_TYPES)}>
+                        <TabsList>
+                            <TabsTrigger value={DATA_TYPES.OrderCount}>Order Count</TabsTrigger>
+                            <TabsTrigger value={DATA_TYPES.OrderTotal}>Order Total</TabsTrigger>
+                            <TabsTrigger value={DATA_TYPES.AverageOrderValue}>
+                                Average Order Value
+                            </TabsTrigger>
+                        </TabsList>
+                    </Tabs>
+                    <Button variant={'ghost'} onClick={() => refetch()}>
+                        <RefreshCw className={isRefetching ? 'animate-rotate' : ''} />
+                    </Button>
+                </div>
             }
         >
             {chartData && (