@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/projects/lib/search.ts

@@ -0,0 +1,78 @@
+// Client-side search powering the ⌘K palette.
+//
+// A small team's CRM fits in the synced replica, so search runs locally against
+// data already in memory: results appear as you type, with no request per
+// keystroke. Swap in `db.useSearch` (Pylon's FTS) when a workspace outgrows
+// that — the component boundary doesn't change, only this file.
+
+export interface SearchItem {
+  id: string;
+  type: "deal" | "company" | "contact";
+  title: string;
+  /** Second line: the company for a contact, the domain for a company. */
+  subtitle?: string;
+  href: string;
+  /** Extra text matched but not displayed — an email, say. */
+  keywords?: string;
+}
+
+export interface Scored extends SearchItem {
+  score: number;
+}
+
+/**
+ * Rank items against a query. Prefix matches beat word-boundary matches, which
+ * beat substring matches; ties break on the shorter title, so "Acme" ranks
+ * above "Acme Corporation Holdings" for the query "acme".
+ */
+export function searchItems(
+  items: SearchItem[],
+  query: string,
+  limit = 8,
+): SearchItem[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return items.slice(0, limit);
+
+  const scored: Scored[] = [];
+  for (const item of items) {
+    const score = scoreItem(item, q);
+    if (score > 0) scored.push({ ...item, score });
+  }
+  scored.sort(
+    (a, b) => b.score - a.score || a.title.length - b.title.length ||
+      a.title.localeCompare(b.title),
+  );
+  return scored.slice(0, limit);
+}
+
+function scoreItem(item: SearchItem, q: string): number {
+  const title = item.title.toLowerCase();
+  if (title.startsWith(q)) return 100;
+  if (wordStart(title, q)) return 80;
+  if (title.includes(q)) return 60;
+
+  const haystack = `${item.subtitle ?? ""} ${item.keywords ?? ""}`.toLowerCase();
+  if (wordStart(haystack, q)) return 40;
+  if (haystack.includes(q)) return 20;
+  return 0;
+}
+
+function wordStart(haystack: string, needle: string): boolean {
+  let from = 0;
+  for (;;) {
+    const at = haystack.indexOf(needle, from);
+    if (at === -1) return false;
+    if (at === 0 || /[\s._@/-]/.test(haystack[at - 1])) return true;
+    from = at + 1;
+  }
+}
+
+/** Move through a list with arrow keys, wrapping at both ends. */
+export function moveSelection(
+  current: number,
+  delta: number,
+  length: number,
+): number {
+  if (length === 0) return 0;
+  return (current + delta + length) % length;
+}

package/templates/projects/lib/seed.ts

@@ -0,0 +1,140 @@
+// Demo data for a brand-new delivery workspace.
+//
+// An empty project list shows nothing about boards, budgets, or time. The first
+// sign-in seeds two live projects — one comfortably inside its budget, one over
+// it — so the budget states are visible rather than theoretical.
+
+export interface SeedClient {
+  key: string;
+  name: string;
+  email: string;
+}
+
+export interface SeedProject {
+  key: string;
+  client: string;
+  name: string;
+  status: string;
+  /** Agreed budget in hours. */
+  budgetHours: number;
+  hourlyRate: number;
+  dueInDays: number;
+}
+
+export interface SeedTask {
+  key: string;
+  project: string;
+  title: string;
+  status: string;
+  estimateHours: number;
+  /** Hours logged against it; each becomes one or more entries. */
+  loggedHours: number[];
+}
+
+export const SEED_CLIENTS: SeedClient[] = [
+  { key: "northwind", name: "Northwind Logistics", email: "dana@northwind.co" },
+  { key: "hallmark", name: "Hallmark Dental", email: "priya@hallmarkdental.com" },
+];
+
+export const SEED_PROJECTS: SeedProject[] = [
+  {
+    key: "dispatch",
+    client: "northwind",
+    name: "Dispatch portal",
+    status: "active",
+    budgetHours: 80,
+    hourlyRate: 165,
+    dueInDays: 24,
+  },
+  // Over budget: 40h agreed, ~46h logged.
+  {
+    key: "intake",
+    client: "hallmark",
+    name: "Patient intake rebuild",
+    status: "active",
+    budgetHours: 40,
+    hourlyRate: 150,
+    dueInDays: 9,
+  },
+];
+
+export const SEED_TASKS: SeedTask[] = [
+  { key: "d-auth", project: "dispatch", title: "SSO with their identity provider", status: "done", estimateHours: 8, loggedHours: [3, 4.5] },
+  { key: "d-model", project: "dispatch", title: "Route + stop data model", status: "done", estimateHours: 6, loggedHours: [5] },
+  { key: "d-board", project: "dispatch", title: "Dispatcher board UI", status: "doing", estimateHours: 20, loggedHours: [6, 4] },
+  { key: "d-mobile", project: "dispatch", title: "Driver mobile view", status: "review", estimateHours: 12, loggedHours: [9] },
+  { key: "d-report", project: "dispatch", title: "Weekly utilisation report", status: "todo", estimateHours: 6, loggedHours: [] },
+  { key: "d-import", project: "dispatch", title: "Import legacy stop history", status: "todo", estimateHours: 10, loggedHours: [] },
+
+  { key: "i-forms", project: "intake", title: "Form builder", status: "done", estimateHours: 16, loggedHours: [8, 7, 4] },
+  { key: "i-sig", project: "intake", title: "Consent signatures", status: "done", estimateHours: 8, loggedHours: [6, 5] },
+  { key: "i-sync", project: "intake", title: "Sync to practice software", status: "doing", estimateHours: 12, loggedHours: [9, 7] },
+  { key: "i-train", project: "intake", title: "Staff training session", status: "todo", estimateHours: 4, loggedHours: [] },
+];
+
+export interface ShapedSeed {
+  clients: Array<{ key: string; row: Record<string, unknown> }>;
+  projects: Array<{ key: string; client: string; row: Record<string, unknown> }>;
+  tasks: Array<{ key: string; project: string; row: Record<string, unknown> }>;
+  entries: Array<{ task: string; project: string; row: Record<string, unknown> }>;
+}
+
+export function shapeSeed(now: number = Date.now()): ShapedSeed {
+  const at = (days: number) => new Date(now + days * 86_400_000).toISOString();
+
+  const tasks: ShapedSeed["tasks"] = [];
+  const entries: ShapedSeed["entries"] = [];
+  const positions = new Map<string, number>();
+
+  SEED_TASKS.forEach((task, index) => {
+    const columnKey = `${task.project}:${task.status}`;
+    const position = positions.get(columnKey) ?? 0;
+    positions.set(columnKey, position + 1);
+
+    tasks.push({
+      key: task.key,
+      project: task.project,
+      row: {
+        title: task.title,
+        status: task.status,
+        estimateMinutes: Math.round(task.estimateHours * 60),
+        position,
+        createdAt: at(-30 + index),
+        updatedAt: at(-2),
+      },
+    });
+
+    task.loggedHours.forEach((hours, entryIndex) => {
+      entries.push({
+        task: task.key,
+        project: task.project,
+        row: {
+          minutes: Math.round(hours * 60),
+          note: null,
+          spentOn: at(-14 + entryIndex * 2),
+        },
+      });
+    });
+  });
+
+  return {
+    clients: SEED_CLIENTS.map((c) => ({
+      key: c.key,
+      row: { name: c.name, email: c.email, createdAt: at(-90) },
+    })),
+    projects: SEED_PROJECTS.map((p) => ({
+      key: p.key,
+      client: p.client,
+      row: {
+        name: p.name,
+        status: p.status,
+        budgetMinutes: Math.round(p.budgetHours * 60),
+        hourlyRateCents: Math.round(p.hourlyRate * 100),
+        dueDate: at(p.dueInDays),
+        createdAt: at(-45),
+      },
+    })),
+    tasks,
+    entries,
+  };
+}

package/templates/projects/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/projects/lib/work.ts

@@ -0,0 +1,233 @@
+// Projects, tasks, and time.
+//
+// TIME IS A LEDGER, like stock in the inventory template: a task's logged hours
+// are the sum of its time entries, never a running total on the task. Two people
+// logging against the same task at once is normal, and a mutable total loses one
+// of them. It also means every hour on an invoice traces to who logged it and
+// when — which is the question a client asks.
+//
+// Minutes are integers. Hours as floats produce 7.999999 on a timesheet, and
+// nobody wants to explain that.
+//
+// Pure: no React, no `db`.
+
+export interface Status {
+  id: string;
+  label: string;
+  /** Done and cancelled leave the active board. */
+  terminal?: boolean;
+}
+
+export const TASK_STATUSES: Status[] = [
+  { id: "todo", label: "To do" },
+  { id: "doing", label: "In progress" },
+  { id: "review", label: "Review" },
+  { id: "done", label: "Done", terminal: true },
+];
+
+export const PROJECT_STATUSES: Status[] = [
+  { id: "active", label: "Active" },
+  { id: "paused", label: "Paused" },
+  { id: "complete", label: "Complete", terminal: true },
+];
+
+export interface Project {
+  id: string;
+  name: string;
+  clientId?: string | null;
+  status: string;
+  /** Agreed budget in whole minutes, 0 for none. */
+  budgetMinutes?: number | null;
+  hourlyRateCents?: number | null;
+  dueDate?: string | null;
+  createdAt?: string | null;
+}
+
+export interface Task {
+  id: string;
+  projectId: string;
+  title: string;
+  status: string;
+  assigneeId?: string | null;
+  /** What we thought it would take, in minutes. */
+  estimateMinutes?: number | null;
+  position?: number | null;
+  createdAt?: string | null;
+}
+
+export interface TimeEntry {
+  id: string;
+  taskId: string;
+  projectId: string;
+  minutes: number;
+  note?: string | null;
+  userId?: string | null;
+  spentOn?: string | null;
+}
+
+export function taskStatusById(id: string): Status | undefined {
+  return TASK_STATUSES.find((s) => s.id === id);
+}
+
+export function isValidTaskStatus(id: string): boolean {
+  return TASK_STATUSES.some((s) => s.id === id);
+}
+
+export function isValidProjectStatus(id: string): boolean {
+  return PROJECT_STATUSES.some((s) => s.id === id);
+}
+
+export function isOpen(task: { status: string }): boolean {
+  return !taskStatusById(task.status)?.terminal;
+}
+
+export interface Column {
+  status: Status;
+  tasks: Task[];
+}
+
+/** Group a project's tasks into board columns, in their manual order. */
+export function groupByStatus(tasks: Task[]): Column[] {
+  return TASK_STATUSES.map((status) => ({
+    status,
+    tasks: tasks
+      .filter((task) => task.status === status.id)
+      .sort(
+        (a, b) =>
+          (Number(a.position) || 0) - (Number(b.position) || 0) ||
+          (a.createdAt ?? "").localeCompare(b.createdAt ?? ""),
+      ),
+  }));
+}
+
+/** Minutes logged against one task. */
+export function minutesForTask(taskId: string, entries: TimeEntry[]): number {
+  let total = 0;
+  for (const entry of entries) {
+    if (entry.taskId !== taskId) continue;
+    const minutes = Number(entry.minutes);
+    if (Number.isFinite(minutes)) total += Math.trunc(minutes);
+  }
+  return total;
+}
+
+/**
+ * Minutes per task in one pass — a board calling minutesForTask per card would
+ * be O(tasks × entries).
+ */
+export function minutesByTask(entries: TimeEntry[]): Map<string, number> {
+  const totals = new Map<string, number>();
+  for (const entry of entries) {
+    const minutes = Number(entry.minutes);
+    if (!Number.isFinite(minutes)) continue;
+    totals.set(entry.taskId, (totals.get(entry.taskId) ?? 0) + Math.trunc(minutes));
+  }
+  return totals;
+}
+
+export function minutesForProject(projectId: string, entries: TimeEntry[]): number {
+  let total = 0;
+  for (const entry of entries) {
+    if (entry.projectId !== projectId) continue;
+    const minutes = Number(entry.minutes);
+    if (Number.isFinite(minutes)) total += Math.trunc(minutes);
+  }
+  return total;
+}
+
+export interface Progress {
+  total: number;
+  done: number;
+  /** 0–1, or null when there's nothing to measure. */
+  ratio: number | null;
+}
+
+/**
+ * Progress by task COUNT, not by logged time.
+ *
+ * Time spent measures effort, not completion — a project can be 90% through its
+ * budget and 20% done, and conflating them is how a status report lies.
+ * `budgetState` reports the other half separately.
+ */
+export function progress(tasks: Task[]): Progress {
+  const total = tasks.length;
+  const done = tasks.filter((task) => !isOpen(task)).length;
+  return { total, done, ratio: total === 0 ? null : done / total };
+}
+
+export type BudgetState = "none" | "ok" | "near" | "over";
+
+/** Where a project sits against its agreed budget. */
+export function budgetState(
+  budgetMinutes: number | null | undefined,
+  loggedMinutes: number,
+): BudgetState {
+  const budget = Number(budgetMinutes);
+  if (!Number.isFinite(budget) || budget <= 0) return "none";
+  if (loggedMinutes > budget) return "over";
+  // 85% is where you can still do something about it.
+  if (loggedMinutes >= budget * 0.85) return "near";
+  return "ok";
+}
+
+/** What the logged time is worth at the project's rate. */
+export function billableCents(
+  minutes: number,
+  hourlyRateCents: number | null | undefined,
+): number {
+  const rate = Number(hourlyRateCents) || 0;
+  return Math.round((minutes * rate) / 60);
+}
+
+/** "7h 30m" / "45m" / "0m" — the format a timesheet is read in. */
+export function duration(minutes: number | null | undefined): string {
+  const value = Math.trunc(Number(minutes) || 0);
+  const sign = value < 0 ? "-" : "";
+  const abs = Math.abs(value);
+  const hours = Math.floor(abs / 60);
+  const rest = abs % 60;
+  if (hours === 0) return `${sign}${rest}m`;
+  if (rest === 0) return `${sign}${hours}h`;
+  return `${sign}${hours}h ${rest}m`;
+}
+
+export function money(cents: number | null | undefined): string {
+  const value = Number(cents) || 0;
+  const sign = value < 0 ? "-" : "";
+  const abs = Math.abs(value);
+  const dollars = Math.floor(abs / 100).toLocaleString("en-US");
+  const rest = String(abs % 100).padStart(2, "0");
+  return `${sign}$${dollars}.${rest}`;
+}
+
+/**
+ * Parse typed time into minutes. Accepts "90", "1.5h", "1h30", "1h 30m", "45m".
+ *
+ * People write time however they think of it, and rejecting "1h30" because it
+ * isn't "90" is the kind of friction that stops time being logged at all —
+ * which costs far more than a lenient parser.
+ */
+export function parseDuration(input: string): number | null {
+  const text = input.trim().toLowerCase().replace(/\s+/g, "");
+  if (!text) return null;
+
+  // "1h30" / "1h30m" / "2h" / "45m"
+  const hm = text.match(/^(\d+(?:\.\d+)?)h(?:(\d+)m?)?$/);
+  if (hm) {
+    const hours = Number(hm[1]);
+    const mins = hm[2] ? Number(hm[2]) : 0;
+    if (!Number.isFinite(hours) || !Number.isFinite(mins) || mins >= 60) return null;
+    return Math.round(hours * 60 + mins);
+  }
+
+  const m = text.match(/^(\d+)m$/);
+  if (m) return Number(m[1]);
+
+  // A bare number is minutes — the unit a timesheet field is usually in.
+  if (/^\d+(\.\d+)?$/.test(text)) {
+    const value = Number(text);
+    return Number.isFinite(value) ? Math.round(value) : null;
+  }
+
+  return null;
+}

package/templates/projects/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "__APP_NAME_KEBAB__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit",
+    "test": "pylon test"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/client": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "tw-animate-css": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.10.0",
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}

package/templates/projects/tests/components.test.tsx

@@ -0,0 +1,200 @@
+import { afterEach, describe, expect, test } from "bun:test";
+// This project uses the classic JSX transform, so .tsx tests import React.
+import React from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { TaskBoard } from "../components/task-board";
+import { TimeDialog } from "../components/time-dialog";
+import { BudgetBar } from "../components/budget-bar";
+import type { Task } from "../lib/work";
+
+afterEach(cleanup);
+
+// Tier 2: components. No mocking needed — they take data as props and report
+// changes through callbacks, because the container owns `db`.
+
+const tasks: Task[] = [
+  { id: "t1", projectId: "p1", title: "Dispatcher board UI", status: "doing" },
+  { id: "t2", projectId: "p1", title: "Weekly report", status: "todo" },
+];
+
+const noName = () => null;
+const noMinutes = () => 0;
+
+describe("TaskBoard", () => {
+  test("renders every column", () => {
+    render(
+      <TaskBoard
+        tasks={tasks}
+        assigneeName={noName}
+        minutesFor={noMinutes}
+        onMove={() => {}}
+        onOpen={() => {}}
+      />,
+    );
+    for (const label of ["To do", "In progress", "Review", "Done"]) {
+      expect(screen.getByLabelText(label)).toBeDefined();
+    }
+  });
+
+  test("dropping on another column reports the move", () => {
+    const moves: Array<[string, string]> = [];
+    render(
+      <TaskBoard
+        tasks={tasks}
+        assigneeName={noName}
+        minutesFor={noMinutes}
+        onMove={(id, status) => moves.push([id, status])}
+        onOpen={() => {}}
+      />,
+    );
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      effectAllowed: "",
+      dropEffect: "",
+    };
+    fireEvent.dragStart(screen.getByText("Weekly report"), { dataTransfer });
+    fireEvent.drop(screen.getByLabelText("Done"), { dataTransfer });
+    expect(moves).toEqual([["t2", "done"]]);
+  });
+
+  test("dropping back on the same column writes nothing", () => {
+    const moves: unknown[] = [];
+    render(
+      <TaskBoard
+        tasks={tasks}
+        assigneeName={noName}
+        minutesFor={noMinutes}
+        onMove={() => moves.push(1)}
+        onOpen={() => {}}
+      />,
+    );
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      effectAllowed: "",
+      dropEffect: "",
+    };
+    fireEvent.dragStart(screen.getByText("Weekly report"), { dataTransfer });
+    fireEvent.drop(screen.getByLabelText("To do"), { dataTransfer });
+    expect(moves).toEqual([]);
+  });
+
+  test("shows a column's logged total", () => {
+    render(
+      <TaskBoard
+        tasks={tasks}
+        assigneeName={noName}
+        minutesFor={(id) => (id === "t1" ? 600 : 0)}
+        onMove={() => {}}
+        onOpen={() => {}}
+      />,
+    );
+    expect(within(screen.getByLabelText("In progress")).getAllByText("10h").length)
+      .toBeGreaterThan(0);
+  });
+
+  test("flags a card that has blown its estimate", () => {
+    // Showing "3h / 8h" on every card is noise; an overrun is worth seeing.
+    render(
+      <TaskBoard
+        tasks={[{ ...tasks[0], estimateMinutes: 120 }]}
+        assigneeName={noName}
+        minutesFor={() => 300}
+        onMove={() => {}}
+        onOpen={() => {}}
+      />,
+    );
+    expect(screen.getByText("5h / 2h")).toBeDefined();
+  });
+
+  test("opening a card reports the task id", () => {
+    const opened: string[] = [];
+    render(
+      <TaskBoard
+        tasks={tasks}
+        assigneeName={noName}
+        minutesFor={noMinutes}
+        onMove={() => {}}
+        onOpen={(id) => opened.push(id)}
+      />,
+    );
+    fireEvent.click(screen.getByText("Dispatcher board UI"));
+    expect(opened).toEqual(["t1"]);
+  });
+});
+
+describe("TimeDialog", () => {
+  test("accepts the formats people actually type", () => {
+    const logged: number[] = [];
+    render(
+      <TimeDialog
+        open
+        taskTitle="Dispatcher board UI"
+        onOpenChange={() => {}}
+        onLog={(minutes) => logged.push(minutes)}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("Time"), { target: { value: "1h30" } });
+    fireEvent.click(screen.getByRole("button", { name: /log time/i }));
+    expect(logged).toEqual([90]);
+  });
+
+  test("previews what it parsed, so a typo is visible before submitting", () => {
+    render(
+      <TimeDialog open taskTitle="X" onOpenChange={() => {}} onLog={() => {}} />,
+    );
+    fireEvent.change(screen.getByLabelText("Time"), { target: { value: "90" } });
+    expect(screen.getByText("1h 30m")).toBeDefined();
+  });
+
+  test("refuses an unparseable value", () => {
+    const logged: number[] = [];
+    render(
+      <TimeDialog open taskTitle="X" onOpenChange={() => {}} onLog={(m) => logged.push(m)} />,
+    );
+    fireEvent.change(screen.getByLabelText("Time"), { target: { value: "soon" } });
+    fireEvent.click(screen.getByRole("button", { name: /log time/i }));
+    expect(logged).toEqual([]);
+    expect(screen.getByText(/try 90/i)).toBeDefined();
+  });
+
+  test("refuses more than a day", () => {
+    // A typo on a timesheet becomes a typo on an invoice.
+    const logged: number[] = [];
+    render(
+      <TimeDialog open taskTitle="X" onOpenChange={() => {}} onLog={(m) => logged.push(m)} />,
+    );
+    fireEvent.change(screen.getByLabelText("Time"), { target: { value: "30h" } });
+    fireEvent.click(screen.getByRole("button", { name: /log time/i }));
+    expect(logged).toEqual([]);
+  });
+
+  test("renders nothing when closed", () => {
+    const { container } = render(
+      <TimeDialog open={false} taskTitle="X" onOpenChange={() => {}} onLog={() => {}} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe("BudgetBar", () => {
+  test("calls out an overrun with the amount", () => {
+    render(<BudgetBar budgetMinutes={2400} loggedMinutes={2760} />);
+    expect(screen.getByText(/over budget by 6h/i)).toBeDefined();
+  });
+
+  test("shows billable value when there's a rate", () => {
+    render(
+      <BudgetBar budgetMinutes={2400} loggedMinutes={600} hourlyRateCents={16_500} />,
+    );
+    expect(screen.getByText(/\$1,650\.00 billable/)).toBeDefined();
+  });
+
+  test("says so when there's no budget rather than drawing an empty bar", () => {
+    render(<BudgetBar budgetMinutes={0} loggedMinutes={600} />);
+    expect(screen.getByText("No budget set")).toBeDefined();
+  });
+});