fix(dashboard): route five screens through the api client

apps/dashboard/src/app/(dashboard)/links/page.tsx

@@ -6,6 +6,7 @@
 import { useToast } from "@useroutr/ui";
 import Link from "next/link";
 import { LinkStatusBadge } from "@/components/links/LinkStatusBadge";
+import { api } from "@/lib/api";
 import { formatCurrency } from "@/lib/utils";
 
 import type { PaymentLink } from "@useroutr/types";
@@ -28,7 +29,7 @@
 
 export default function LinkDetailPage() {
   const { id } = useParams<{ id: string }>();
   const router = useRouter();
   const { toast } = useToast();
 
   const [link, setLink] = useState<PaymentLink | null>(null);
@@ -40,24 +41,34 @@
     try {
       setLoading(true);
 
-      const [linkRes, statsRes, paymentsRes] = await Promise.all([
-        fetch(`/v1/payment-links/${id}`),
-        fetch(`/v1/payment-links/${id}/stats`),
-        fetch(`/v1/payments?linkId=${id}`),
-      ]);
-
-      if (!linkRes.ok) {
+      // allSettled, not all: a missing link is "not found" (no toast), while a
+      // failing stats/payments call should still leave the link itself usable.
+      const [linkResult, statsResult, paymentsResult] = await Promise.allSettled(
+        [
+          api.get<PaymentLink>(`/payment-links/${id}`),
+          api.get<LinkStats>(`/payment-links/${id}/stats`),
+          // `/payments` is paginated: the envelope is { items, meta }, and the
+          // api client has already unwrapped the outer { data }. Reading
+          // `.data` here would always be undefined and the table would render
+          // empty with no error to explain why.
+          api.get<{ items?: LinkPayment[] }>(`/payments`, {
+            params: { linkId: id },
+          }),
+        ]
+      );
+
+      if (linkResult.status !== "fulfilled") {
         setLink(null);
         return;
       }
 
-      const linkData = await linkRes.json();
-      const statsData = await statsRes.json();
-      const paymentsData = await paymentsRes.json();
-
-      setLink(linkData);
-      setStats(statsData);
-      setPayments(paymentsData?.data ?? paymentsData ?? []);
+      setLink(linkResult.value);
+      setStats(statsResult.status === "fulfilled" ? statsResult.value : null);
+      setPayments(
+        paymentsResult.status === "fulfilled"
+          ? (paymentsResult.value?.items ?? [])
+          : []
+      );
     } catch {
       toast(`Failed to load link`, "error");
     } finally {
@@ -67,7 +78,7 @@
 
   useEffect(() => {
     fetchData();
   }, [id]);
 
   async function copyUrl() {
     if (!link) return;
@@ -93,9 +104,15 @@
 
     if (!ok) return;
 
-    await fetch(`/v1/payment-links/${link.id}`, {
-      method: "DELETE",
-    });
+    try {
+      await api.delete(`/payment-links/${link.id}`);
+    } catch (error) {
+      toast(
+        error instanceof Error ? error.message : "Failed to deactivate link",
+        "error"
+      );
+      return;
+    }
 
     toast("Link deactivated", "success");
 

apps/dashboard/src/app/(dashboard)/payouts/page.tsx

@@ -1,20 +1,18 @@
 "use client";
 
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@useroutr/ui';
 import { Plus } from 'lucide-react';
+import type { PayoutListResponse } from '@useroutr/types';
 import { RecipientsTable } from '@/components/recipients/RecipientsTable';
 import { CreatePayoutDialog } from '@/components/payouts/CreatePayoutDialog';
 import { PayoutsTable } from '@/components/payouts/PayoutsTable';
+import { api } from '@/lib/api';
 
 export default function PayoutsPage() {
   const payoutsQuery = useQuery({
     queryKey: ['payouts'],
-    queryFn: async () => {
-      const res = await fetch('/api/v1/payouts');
-      if (!res.ok) throw new Error('Failed to fetch payouts');
-      return res.json();
-    },
+    queryFn: () => api.get<PayoutListResponse>('/payouts'),
   });
 
   return (

apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx

@@ -9,6 +9,7 @@ import {
   DownloadSimple,
   Info,
 } from "@phosphor-icons/react";
+import { api } from "@/lib/api";
 import { cn, formatCurrency } from "@/lib/utils";
 
 type Period = "7d" | "30d" | "90d" | "1y";
@@ -118,10 +119,6 @@ const PAYMENT_COLORS: Record<PaymentMethod, string> = {
 
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
-function getApiBaseUrl() {
-  return (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
-}
-
 function formatMoney(value: number, currency = "USD") {
   return formatCurrency(value, currency);
 }
@@ -414,17 +411,6 @@ function normalizeLiveSnapshot(
   };
 }
 
-async function fetchJson<T>(path: string): Promise<T> {
-  const base = getApiBaseUrl();
-  const response = await fetch(`${base}${path}`, { cache: "no-store" });
-
-  if (!response.ok) {
-    throw new Error(`${path} failed with ${response.status}`);
-  }
-
-  return response.json() as Promise<T>;
-}
-
 async function loadSnapshot(period: Period, range: DateRange) {
   const hasCustomRange = Boolean(range.start && range.end);
   const { bucket } = getBucketDates(period, range);
@@ -441,10 +427,10 @@ async function loadSnapshot(period: Period, range: DateRange) {
   const baseQuery = query.toString();
   const [revenueResult, paymentsResult, failuresResult, currenciesResult] =
     await Promise.allSettled([
-      fetchJson<RevenueResponse>(`/v1/analytics/revenue?${baseQuery}`),
-      fetchJson<PaymentsResponse>(`/v1/analytics/payments?${baseQuery}`),
-      fetchJson<FailuresResponse>(`/v1/analytics/failures?${baseQuery}`),
-      fetchJson<CurrenciesResponse>(`/v1/analytics/currencies?${baseQuery}`),
+      api.get<RevenueResponse>(`/analytics/revenue?${baseQuery}`),
+      api.get<PaymentsResponse>(`/analytics/payments?${baseQuery}`),
+      api.get<FailuresResponse>(`/analytics/failures?${baseQuery}`),
+      api.get<CurrenciesResponse>(`/analytics/currencies?${baseQuery}`),
     ] as const);
 
   if (

apps/dashboard/src/components/payouts/CreatePayoutDialog.tsx

@@ -16,29 +16,33 @@ import {
   ShadSelectItem as SelectItem,
   ShadSelectTrigger as SelectTrigger,
   ShadSelectValue as SelectValue,
+  useToast,
 } from '@useroutr/ui';
 import { RecipientSelect } from '@/components/recipients/RecipientSelect';
+import { api } from '@/lib/api';
 
 export function CreatePayoutDialog() {
   const [open, setOpen] = useState(false);
   const [recipientId, setRecipientId] = useState('');
   const [amount, setAmount] = useState('');
   const [currency, setCurrency] = useState('USD');
+  const { toast } = useToast();
 
-  const handleSubmit = () => {
-    fetch('/api/v1/payouts', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        recipientId,
-        amount,
-        currency,
-      }),
-    }).then(() => {
-      setOpen(false);
-      // Refetch payouts
-      window.dispatchEvent(new CustomEvent('payouts:refetch'));
-    });
+  const handleSubmit = async () => {
+    try {
+      await api.post('/payouts', { recipientId, amount, currency });
+    } catch (error) {
+      // Keep the dialog open so the entered values survive a failed submit.
+      toast(
+        error instanceof Error ? error.message : 'Failed to create payout',
+        'error',
+      );
+      return;
+    }
+
+    setOpen(false);
+    // Refetch payouts
+    window.dispatchEvent(new CustomEvent('payouts:refetch'));
   };
 
   return (

apps/dashboard/src/components/recipients/RecipientSelect.tsx

@@ -8,6 +8,7 @@ import {
 } from '@useroutr/ui';
 import { Check, ChevronsUpDown, Loader2 } from 'lucide-react';
 import { Recipient } from '@useroutr/types';
+import { api } from '@/lib/api';
 import { cn } from '@/lib/utils';
 import { useState } from 'react';
 
@@ -24,11 +25,8 @@ export function RecipientSelect({
 
   const recipientsQuery = useQuery({
     queryKey: ['recipients'],
-    queryFn: async () => {
-      const res = await fetch('/api/v1/recipients?limit=20');
-      if (!res.ok) throw new Error('Failed to fetch recipients');
-      return (await res.json()) as { data: Recipient[] };
-    },
+    queryFn: () =>
+      api.get<{ data: Recipient[] }>('/recipients', { params: { limit: 20 } }),
   });
 
   const selectedRecipient = recipientsQuery.data?.data.find(r => r.id === value);