@trustless-work/blocks 1.0.2 → 1.0.3

package/bin/index.js

@@ -1580,7 +1580,7 @@ if (args[0] === "init") {
   }
 
   const addShadcn = await promptYesNo(
-    "Add shadcn components (button, input, form, card, sonner, checkbox, dialog, textarea, sonner, select, table, calendar, popover, separator, calendar-05, badge, sheet, tabs, avatar, tooltip, progress)?",
+    "Add shadcn components (button, input, form, card, sonner, checkbox, dialog, textarea, sonner, select, table, calendar, popover, separator, calendar-05, badge, sheet, tabs, avatar, tooltip, progress, chart)?",
     true
   );
   if (addShadcn) {
@@ -1609,6 +1609,7 @@ if (args[0] === "init") {
         "avatar",
         "tooltip",
         "progress",
+        "chart",
       ]);
     });
   } else {
@@ -1621,7 +1622,7 @@ if (args[0] === "init") {
   }
   const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
   const installLibs = await promptYesNo(
-    "Install (react-hook-form, @tanstack/react-query, @tanstack/react-query-devtools, @trustless-work/escrow, @hookform/resolvers, axios, @creit.tech/stellar-wallets-kit, react-day-picker & zod) dependencies now?",
+    "Install (react-hook-form, @tanstack/react-query, @tanstack/react-query-devtools, @trustless-work/escrow, @hookform/resolvers, axios, @creit.tech/stellar-wallets-kit, react-day-picker, recharts & zod) dependencies now?",
     true
   );
   if (installLibs) {
@@ -1807,6 +1808,9 @@ if (args[0] === "init") {
   --- Escrows ---
   trustless-work add escrows
 
+  --- Dashboard ---
+  trustless-work add dashboard
+
   --- Indicators ---
   trustless-work add escrows/indicators/balance-progress
   trustless-work add escrows/indicators/balance-progress/bar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustless-work/blocks",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Trustless Work",
   "keywords": [
     "react",

package/templates/dashboard/Dashboard.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "__UI_BASE__/card";
+import { Separator } from "__UI_BASE__/separator";
+import { useDashboard } from "./useDashboard";
+import { formatCurrency } from "../helpers/format.helper";
+import { Activity, Layers3, PiggyBank } from "lucide-react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  CartesianGrid,
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "__UI_BASE__/chart";
+
+const chartConfigBar: ChartConfig = {
+  desktop: {
+    label: "Amount",
+    color: "var(--chart-1)",
+  },
+};
+
+const chartConfigDonut: ChartConfig = {
+  visitors: { label: "Count" },
+  single: { label: "Single", color: "var(--chart-1)" },
+  multi: { label: "Multi", color: "var(--chart-2)" },
+};
+
+const chartConfigArea: ChartConfig = {
+  desktop: {
+    label: "Created",
+    color: "var(--chart-1)",
+  },
+};
+
+export function Dashboard() {
+  const {
+    isLoading,
+    totalEscrows,
+    totalAmount,
+    totalBalance,
+    typeSlices,
+    amountsByDate,
+    createdByDate,
+  } = useDashboard();
+
+  const barData = React.useMemo(
+    () => amountsByDate.map((d) => ({ month: d.date, desktop: d.amount })),
+    [amountsByDate]
+  );
+
+  const donutData = React.useMemo(
+    () =>
+      typeSlices.map((s) => ({
+        browser: s.type === "single" ? "single" : "multi",
+        visitors: s.value,
+        fill:
+          s.type === "single" ? "var(--color-single)" : "var(--color-multi)",
+      })),
+    [typeSlices]
+  );
+
+  const areaData = React.useMemo(
+    () => createdByDate.map((d) => ({ month: d.date, desktop: d.count })),
+    [createdByDate]
+  );
+
+  return (
+    <div className="grid gap-6">
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Escrows</CardTitle>
+            <Layers3 className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? "-" : totalEscrows}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Total number of escrows
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Amount</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? "-" : formatCurrency(totalAmount, "USDC")}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Sum of amounts (SR + MR)
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Balance</CardTitle>
+            <PiggyBank className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? "-" : formatCurrency(totalBalance, "USDC")}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Total balance across all escrows
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator />
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Bar chart: Amounts by date (shadcn pattern) */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Escrow Amounts</CardTitle>
+            <CardDescription>Amounts by date</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              className="w-full h-56 sm:h-64 lg:h-72"
+              config={chartConfigBar}
+            >
+              <BarChart accessibilityLayer data={barData}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) =>
+                    new Date(String(value)).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent hideLabel />}
+                />
+                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        {/* Donut chart: Escrow types (shadcn pattern) */}
+        <Card className="flex flex-col">
+          <CardHeader className="items-center pb-0">
+            <CardTitle>Escrow Types</CardTitle>
+            <CardDescription>Escrow types</CardDescription>
+          </CardHeader>
+          <CardContent className="flex-1 pb-0">
+            <ChartContainer
+              config={chartConfigDonut}
+              className="w-full h-56 sm:h-64 lg:h-72"
+            >
+              <PieChart>
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent hideLabel />}
+                />
+                <Pie
+                  data={donutData}
+                  dataKey="visitors"
+                  nameKey="browser"
+                  innerRadius={60}
+                >
+                  {donutData.map((slice, idx) => (
+                    <Cell key={`cell-${idx}`} fill={slice.fill} />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+            <div className="mt-4 flex items-center justify-center gap-6">
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{ background: "var(--chart-1)" }}
+                />
+                <span className="text-xs text-muted-foreground">Single</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{ background: "var(--chart-2)" }}
+                />
+                <span className="text-xs text-muted-foreground">Multi</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Area chart: Created escrows (shadcn pattern) */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Escrow Created</CardTitle>
+            <CardDescription>Created escrows by date</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              className="w-full h-56 sm:h-64 lg:h-72"
+              config={chartConfigArea}
+            >
+              <AreaChart
+                accessibilityLayer
+                data={areaData}
+                margin={{ left: 12, right: 12 }}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  tickFormatter={(value) =>
+                    new Date(String(value)).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent indicator="line" />}
+                />
+                <Area
+                  dataKey="desktop"
+                  type="natural"
+                  fill="var(--color-desktop)"
+                  fillOpacity={0.4}
+                  stroke="var(--color-desktop)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/dashboard/chart.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React from "react";
+import { Tooltip as RechartsTooltip } from "recharts";
+
+export type ChartConfig = Record<string, { label: string; color?: string }>;
+
+interface ChartContainerProps {
+  config: ChartConfig;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function ChartContainer({
+  config,
+  className,
+  children,
+}: ChartContainerProps) {
+  const style: React.CSSProperties = {};
+  for (const [key, value] of Object.entries(config)) {
+    const varName = `--color-${key}` as const;
+    if (value.color) (style as any)[varName] = value.color;
+  }
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+}
+
+type RechartsPayloadItem = {
+  value?: number | string;
+  dataKey?: string;
+  color?: string;
+  name?: string;
+};
+
+type RechartsTooltipContentProps = {
+  active?: boolean;
+  label?: string | number;
+  payload?: RechartsPayloadItem[];
+};
+
+export type ChartTooltipContentProps = {
+  hideLabel?: boolean;
+  indicator?: "line" | "dot";
+} & RechartsTooltipContentProps;
+
+export function ChartTooltip(
+  props: React.ComponentProps<typeof RechartsTooltip>
+) {
+  return <RechartsTooltip {...props} />;
+}
+
+export function ChartTooltipContent({
+  active,
+  label,
+  payload,
+  hideLabel,
+}: ChartTooltipContentProps) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-md border bg-background p-2 text-sm shadow-sm">
+      {!hideLabel ? <div className="mb-1 font-medium">{label}</div> : null}
+      <div className="space-y-1">
+        {payload.map((item, idx) => (
+          <div key={idx} className="flex items-center gap-2">
+            <span
+              className="inline-block h-2 w-2 rounded-full"
+              style={{ backgroundColor: item.color }}
+              aria-hidden
+            />
+            <span className="text-muted-foreground">
+              {item.name ?? String(item.dataKey)}
+            </span>
+            <span className="font-medium ml-auto">
+              {item.value as React.ReactNode}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/dashboard/useDashboard.ts

@@ -0,0 +1,119 @@
+"use client";
+
+import React from "react";
+import { useWalletContext } from "../wallet-kit/WalletProvider";
+import { useEscrowsBySignerQuery } from "../tanstack/useEscrowsBySignerQuery";
+import type { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+type AmountsByDatePoint = { date: string; amount: number };
+type CreatedByDatePoint = { date: string; count: number };
+type DonutSlice = { type: "single" | "multi"; value: number; fill: string };
+
+function getCreatedDateKey(createdAt: Escrow["createdAt"]): string {
+  // createdAt is a Firestore-like timestamp: { _seconds, _nanoseconds }
+  const seconds = (createdAt as unknown as { _seconds?: number })?._seconds;
+  const d = seconds ? new Date(seconds * 1000) : new Date();
+  // YYYY-MM-DD
+  return d.toISOString().slice(0, 10);
+}
+
+function getSingleReleaseAmount(escrow: Escrow): number {
+  // Single release stores total in .amount
+  const raw = (escrow as unknown as { amount?: number | string }).amount;
+  const n = Number(raw ?? 0);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function getMultiReleaseAmount(escrow: Escrow): number {
+  // Multi release accumulates across milestones
+  const milestones = (
+    escrow as unknown as {
+      milestones?: Array<{ amount?: number | string }>;
+    }
+  ).milestones;
+  if (!Array.isArray(milestones)) return 0;
+  return milestones.reduce((acc: number, m) => {
+    const n = Number(m?.amount ?? 0);
+    return acc + (Number.isFinite(n) ? n : 0);
+  }, 0);
+}
+
+function getEscrowAmount(escrow: Escrow): number {
+  if (escrow.type === "single-release") return getSingleReleaseAmount(escrow);
+  if (escrow.type === "multi-release") return getMultiReleaseAmount(escrow);
+  return 0;
+}
+
+export function useDashboard() {
+  const { walletAddress } = useWalletContext();
+
+  const {
+    data = [],
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+  } = useEscrowsBySignerQuery({
+    signer: walletAddress ?? "",
+    enabled: !!walletAddress,
+  });
+
+  const totalEscrows = React.useMemo<number>(() => data.length, [data.length]);
+
+  const totalAmount = React.useMemo<number>(() => {
+    return data.reduce((acc: number, e) => acc + getEscrowAmount(e), 0);
+  }, [data]);
+
+  const totalBalance = React.useMemo<number>(() => {
+    return data.reduce((acc: number, e) => acc + Number(e?.balance ?? 0), 0);
+  }, [data]);
+
+  const typeSlices = React.useMemo<DonutSlice[]>(() => {
+    let single = 0;
+    let multi = 0;
+    for (const e of data) {
+      if (e.type === "single-release") single += 1;
+      else if (e.type === "multi-release") multi += 1;
+    }
+    return [
+      { type: "single", value: single, fill: "var(--color-single)" },
+      { type: "multi", value: multi, fill: "var(--color-multi)" },
+    ];
+  }, [data]);
+
+  const amountsByDate = React.useMemo<AmountsByDatePoint[]>(() => {
+    const map = new Map<string, number>();
+    for (const e of data) {
+      const key = getCreatedDateKey(e.createdAt);
+      const current = map.get(key) ?? 0;
+      map.set(key, current + getEscrowAmount(e));
+    }
+    return Array.from(map.entries())
+      .map(([date, amount]) => ({ date, amount }))
+      .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  }, [data]);
+
+  const createdByDate = React.useMemo<CreatedByDatePoint[]>(() => {
+    const map = new Map<string, number>();
+    for (const e of data) {
+      const key = getCreatedDateKey(e.createdAt);
+      map.set(key, (map.get(key) ?? 0) + 1);
+    }
+    return Array.from(map.entries())
+      .map(([date, count]) => ({ date, count }))
+      .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  }, [data]);
+
+  return {
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+    totalEscrows,
+    totalAmount,
+    totalBalance,
+    typeSlices,
+    amountsByDate,
+    createdByDate,
+  } as const;
+}

package/templates/deps.json

@@ -14,7 +14,8 @@
     "@creit.tech/stellar-wallets-kit": "^1.8.0",
     "axios": "^1.7.9",
     "@tanstack/react-table": "^8.21.3",
-    "react-day-picker": "^9.5.0"
+    "react-day-picker": "^9.5.0",
+    "recharts": "^2.13.3"
   },
   "devDependencies": {
     "postcss": "^8",