links

frontend/apps/artcraft-dashboard/src/pages/SpendEvents.tsx

@@ -17,7 +17,9 @@ import {
 import { useTableHeight } from "@/hooks/useTableHeight";
 import {
   IconAlertCircle,
+  IconChartLine,
   IconCoin,
+  IconReceipt2,
   IconRefresh,
   IconLoader2,
 } from "@tabler/icons-react";
@@ -229,20 +231,34 @@ export function SpendEvents() {
                       </TableCell>
                       <TableCell className="text-sm font-medium">
                         {event.maybe_username ? (
-                          <Link
-                            to={`/user/profile/${event.maybe_username}`}
-                            className="hover:underline text-foreground"
-                          >
-                            @{event.maybe_username}
-                          </Link>
+                          <div className="flex items-center gap-2">
+                            <Link
+                              to={`/user/profile/${event.maybe_username}`}
+                              className="hover:underline text-foreground"
+                            >
+                              @{event.maybe_username}
+                            </Link>
+                            <span className="flex items-center gap-1.5">
+                              <Link
+                                to={`/user/spend-summary/${event.maybe_username}`}
+                                className="text-muted-foreground hover:text-foreground"
+                                title="Spend summary"
+                              >
+                                <IconChartLine className="size-4" />
+                              </Link>
+                              <span className="text-muted-foreground/30">|</span>
+                              <Link
+                                to={`/user/spend-history/${event.maybe_username}`}
+                                className="text-muted-foreground hover:text-foreground"
+                                title="Spend history"
+                              >
+                                <IconReceipt2 className="size-4" />
+                              </Link>
+                            </span>
+                          </div>
                         ) : (
                           <span className="text-muted-foreground/30">&mdash;</span>
                         )}
-                        {event.maybe_display_name && (
-                          <span className="ml-2 text-xs text-muted-foreground">
-                            {event.maybe_display_name}
-                          </span>
-                        )}
                       </TableCell>
                       <TableCell className="text-xs">
                         <Badge

frontend/apps/artcraft-dashboard/src/pages/UserSpendSummary.tsx

@@ -185,6 +185,18 @@ export function UserSpendSummary() {
     [chartData],
   );
 
+  // Fit the Y axis tightly to the currently-displayed data (recomputes on every
+  // period change), with ~10% headroom so peaks never touch/overflow the top.
+  const yDomain = useMemo<[number, number]>(() => {
+    if (chartData.length === 0) return [0, 1];
+    const values = chartData.map((d) => d.net);
+    const dataMax = Math.max(0, ...values);
+    const dataMin = Math.min(0, ...values);
+    const max = dataMax === 0 ? 1 : dataMax * 1.1;
+    const min = dataMin === 0 ? 0 : dataMin * 1.1;
+    return [min, max];
+  }, [chartData]);
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-6">
@@ -309,7 +321,8 @@ export function UserSpendSummary() {
                   axisLine={false}
                   width={56}
                   tickMargin={8}
-                  domain={["auto", "auto"]}
+                  domain={yDomain}
+                  allowDataOverflow
                   tickFormatter={(value) => formatUsdCompact(Number(value) * 100)}
                 />
                 <ChartTooltip
@@ -330,10 +343,17 @@ export function UserSpendSummary() {
                 />
                 <Area
                   dataKey="net"
-                  type="natural"
+                  type="monotone"
                   fill="url(#fillNet)"
                   stroke="var(--color-net)"
                   strokeWidth={2}
+                  dot={{
+                    r: 2.5,
+                    fill: "var(--color-net)",
+                    stroke: "var(--background)",
+                    strokeWidth: 1,
+                  }}
+                  activeDot={{ r: 5 }}
                 />
               </AreaChart>
             </ChartContainer>