@tribe-nest/forge 1.13.0

package/src/ui/styled/work/WorkInviteAccept.tsx

@@ -0,0 +1,222 @@
+import { useState } from "react";
+import { CheckCircle2, FolderOpen } from "lucide-react";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import { ACCESS_TOKEN_KEY } from "../../../contexts/PublicAuthContext";
+import { Loading } from "../Loading";
+import { useAcceptWorkInvite, useWorkInvite } from "../../headless/work/useWorkPortal";
+
+export interface WorkInviteAcceptProps {
+  /** Invite token from the email link (read from search params by the shell). */
+  token?: string;
+  /** Project id from the email link. */
+  projectId?: string;
+  /** Base path for a project in the portal. The project link is
+   * `${projectHrefBase}/${projectId}`. Defaults to `/i/work/projects`. */
+  projectHrefBase?: string;
+  /** Href to the portal login (shown on an invalid/expired link). */
+  loginHref?: string;
+}
+
+const msg = (e: unknown) => (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+
+/**
+ * Branded, AUTH-AWARE client-invite accept page. Shows who invited the client
+ * to which project, then:
+ *   • already signed in as the invited person → "View project" (no password),
+ *   • signed in as someone else → accept as the invited person (set password),
+ *   • not signed in → set a password to accept (mints a portal session).
+ * On accept it persists the returned session token and navigates to the
+ * project. Theme tokens only — it inherits the artist's site styling.
+ */
+export function WorkInviteAccept({
+  token,
+  projectId,
+  projectHrefBase = "/i/work/projects",
+  loginHref = "/i/login",
+}: WorkInviteAcceptProps) {
+  const theme = useForgeTheme();
+  const { isAuthenticated, user } = usePublicAuth();
+  const { data: invite, isLoading, isError } = useWorkInvite(token, projectId);
+  const acceptInvite = useAcceptWorkInvite();
+
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const projectHref = `${projectHrefBase}/${projectId}`;
+
+  const card: React.CSSProperties = {
+    maxWidth: 460,
+    margin: "40px auto 0",
+    padding: 28,
+    border: `1px solid ${theme.colors.primary}33`,
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+    background: theme.colors.background,
+  };
+  const input: React.CSSProperties = {
+    width: "100%",
+    height: 42,
+    padding: "8px 12px",
+    borderRadius: theme.cornerRadius,
+    border: `1px solid ${theme.colors.primary}40`,
+    background: "transparent",
+    color: theme.colors.text,
+    outline: "none",
+  };
+  const button: React.CSSProperties = {
+    width: "100%",
+    padding: "11px 14px",
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.primary,
+    color: theme.colors.background,
+    border: "none",
+    fontWeight: 700,
+    cursor: "pointer",
+    textAlign: "center",
+    textDecoration: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+  };
+  const link: React.CSSProperties = { color: theme.colors.primary, textDecoration: "underline" };
+  const eyebrow: React.CSSProperties = { fontSize: 13, color: theme.colors.primary, fontWeight: 700, letterSpacing: 0.3 };
+  const heading: React.CSSProperties = { fontSize: 22, fontWeight: 800, margin: "6px 0 14px" };
+  const sub: React.CSSProperties = { fontSize: 14, color: `${theme.colors.text}b3`, marginBottom: 22 };
+
+  if (!token || !projectId) {
+    return (
+      <div style={card} data-testid="work-invite-accept">
+        <h1 style={heading} data-testid="work-invite-invalid">
+          Invalid invite link
+        </h1>
+        <p style={sub}>This invite link is missing information. Please use the link from your email.</p>
+        <a href={loginHref} style={link}>
+          Go to sign in
+        </a>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div style={card} data-testid="work-invite-accept">
+        <Loading />
+      </div>
+    );
+  }
+
+  if (isError || !invite) {
+    return (
+      <div style={card} data-testid="work-invite-accept">
+        <h1 style={heading} data-testid="work-invite-invalid">
+          Invite not available
+        </h1>
+        <p style={sub}>This invite is invalid or has expired. Ask your provider to send a new one.</p>
+        <a href={loginHref} style={link}>
+          Go to sign in
+        </a>
+      </div>
+    );
+  }
+
+  const invitedEmail = invite.email?.toLowerCase() ?? "";
+  const currentEmail = (user?.email ?? "").toLowerCase();
+  const signedInAsInvitee = isAuthenticated && currentEmail && currentEmail === invitedEmail;
+
+  const header = (
+    <>
+      <div style={eyebrow}>{invite.profileName}</div>
+      <h1 style={heading} data-testid="work-invite-heading">
+        You're invited to <span style={{ color: theme.colors.primary }}>{invite.projectName}</span>
+      </h1>
+    </>
+  );
+
+  // Already signed in AS the invited person → nothing to do but open the project.
+  if (signedInAsInvitee) {
+    return (
+      <div style={card} data-testid="work-invite-accept">
+        {header}
+        <p style={sub}>
+          <CheckCircle2 size={16} style={{ verticalAlign: "-2px", color: theme.colors.primary }} /> You're signed in as{" "}
+          <strong>{invite.email}</strong>. You already have access.
+        </p>
+        <a href={projectHref} style={button} data-testid="work-invite-view-project">
+          <FolderOpen size={16} /> View project
+        </a>
+      </div>
+    );
+  }
+
+  const onAccept = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirm) {
+      setError("Passwords don't match.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const result = await acceptInvite.mutateAsync({ token, projectId, password });
+      // Persist the fresh portal session and hard-navigate so the auth context
+      // re-initializes as the invited client, then lands on the project.
+      localStorage.setItem(ACCESS_TOKEN_KEY, result.token);
+      window.location.assign(projectHref);
+    } catch (err) {
+      setError(msg(err) || "Something went wrong. Please try again.");
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div style={card} data-testid="work-invite-accept">
+      {header}
+      <p style={sub}>
+        {isAuthenticated && currentEmail && currentEmail !== invitedEmail ? (
+          <>
+            You're signed in as <strong>{user?.email}</strong>, but this invite is for{" "}
+            <strong>{invite.email}</strong>. Set a password to continue as {invite.email}.
+          </>
+        ) : (
+          <>
+            Set a password for <strong>{invite.email}</strong> to access your client portal.
+          </>
+        )}
+      </p>
+      {error && (
+        <p style={{ color: "#ef4444", marginBottom: 14, fontSize: 14 }} data-testid="work-invite-error">
+          {error}
+        </p>
+      )}
+      <form onSubmit={onAccept} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+        <input
+          type="password"
+          placeholder="Create a password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={input}
+          data-testid="work-invite-password"
+        />
+        <input
+          type="password"
+          placeholder="Confirm password"
+          value={confirm}
+          onChange={(e) => setConfirm(e.target.value)}
+          style={input}
+          data-testid="work-invite-confirm"
+        />
+        <button type="submit" disabled={submitting} style={button} data-testid="work-invite-submit">
+          {submitting ? "Accepting…" : "Accept invite"}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/ui/styled/work/WorkPortalProjects.tsx

@@ -0,0 +1,163 @@
+import { ArrowRight, FolderKanban } from "lucide-react";
+import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+import { Loading } from "../Loading";
+import {
+  formatWorkDate,
+  useWorkPortalProjects,
+  type WorkProjectSummary,
+} from "../../headless/work/useWorkPortal";
+
+export interface WorkPortalProjectsProps {
+  /** Build the href for a project's report page. Rendered as an `<a>` unless
+   * `onOpenProject` is supplied. Defaults to `/i/work/projects/{id}`. */
+  projectHref?: (projectId: string) => string;
+  /** Router-driven open handler. When provided, cards render as buttons calling
+   * this instead of anchors (lets the host app keep its own navigation/prefix). */
+  onOpenProject?: (projectId: string) => void;
+  /** Heading above the grid. Pass `null` to hide it. */
+  heading?: string | null;
+}
+
+/**
+ * The authenticated client's read-only list of their (non-archived) client
+ * projects, as cards with a task/done progress bar. Built on
+ * `useWorkPortalProjects`; theme tokens only. Tapping a card opens the project
+ * report (`WorkProjectReport`).
+ */
+export function WorkPortalProjects({
+  projectHref = (id) => `/i/work/projects/${id}`,
+  onOpenProject,
+  heading = "Your projects",
+}: WorkPortalProjectsProps = {}) {
+  const t = useThemeTokens();
+  const { data: projects, isLoading } = useWorkPortalProjects();
+
+  if (isLoading) {
+    return <Loading fullPage />;
+  }
+
+  if (!projects || projects.length === 0) {
+    return (
+      <div
+        data-testid="work-portal-empty"
+        style={{
+          border: `1px solid ${t.border}`,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          padding: 32,
+          textAlign: "center",
+          color: t.text,
+          fontFamily: t.fontFamily,
+        }}
+      >
+        <FolderKanban size={28} style={{ margin: "0 auto 12px", color: t.primary }} />
+        <p style={{ margin: 0, color: t.muted }}>You don&apos;t have any projects yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="work-portal-projects"
+      style={{ display: "flex", flexDirection: "column", gap: 24, color: t.text, fontFamily: t.fontFamily }}
+    >
+      {heading && <h1 style={{ fontSize: 22, fontWeight: 800, margin: 0, color: t.text }}>{heading}</h1>}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+          gap: 12,
+        }}
+      >
+        {projects.map((p) => (
+          <ProjectCard
+            key={p.id}
+            project={p}
+            t={t}
+            href={onOpenProject ? undefined : projectHref(p.id)}
+            onOpen={onOpenProject ? () => onOpenProject(p.id) : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProjectCard({
+  project,
+  t,
+  href,
+  onOpen,
+}: {
+  project: WorkProjectSummary;
+  t: ResolvedThemeTokens;
+  href?: string;
+  onOpen?: () => void;
+}) {
+  const pct = project.taskCount > 0 ? Math.round((project.doneCount / project.taskCount) * 100) : 0;
+
+  const inner = (
+    <>
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
+        <span style={{ fontWeight: 600, color: t.text }}>{project.name}</span>
+        <ArrowRight size={16} style={{ color: t.muted, flexShrink: 0 }} />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: 600,
+            padding: "2px 8px",
+            borderRadius: 999,
+            textTransform: "capitalize",
+            background: t.border,
+            color: t.primary,
+          }}
+        >
+          {project.status.replace(/_/g, " ")}
+        </span>
+        <span style={{ fontSize: 12, color: t.muted }}>Due {formatWorkDate(project.dueDate)}</span>
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12, color: t.muted }}>
+          <span>
+            {project.doneCount} / {project.taskCount} tasks
+          </span>
+          <span>{pct}%</span>
+        </div>
+        <div style={{ width: "100%", height: 6, borderRadius: 999, overflow: "hidden", background: t.border }}>
+          <div style={{ height: "100%", borderRadius: 999, width: `${pct}%`, background: t.primary }} />
+        </div>
+      </div>
+    </>
+  );
+
+  const style: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    textAlign: "left",
+    padding: 20,
+    cursor: "pointer",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: t.surface,
+    color: t.text,
+    textDecoration: "none",
+  };
+
+  if (onOpen) {
+    return (
+      <button type="button" data-testid="work-project-card" onClick={onOpen} style={style}>
+        {inner}
+      </button>
+    );
+  }
+  return (
+    <a data-testid="work-project-card" href={href} style={style}>
+      {inner}
+    </a>
+  );
+}

package/src/ui/styled/work/WorkProjectInvoices.tsx

@@ -0,0 +1,113 @@
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  formatWorkDate,
+  formatWorkMoney,
+  useWorkProjectInvoices,
+  type WorkProjectInvoice,
+} from "../../headless/work/useWorkPortal";
+
+export interface WorkProjectInvoicesProps {
+  /** The client project id. */
+  projectId: string;
+  /** Build the href for an invoice's pay/detail page. Defaults to
+   * `/i/invoice/{id}`. */
+  invoiceHref?: (invoiceId: string) => string;
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  sent: "Awaiting payment",
+  overdue: "Overdue",
+  initiated_payment: "Payment started",
+  payment_failed: "Payment failed",
+  paid: "Paid",
+  cancelled: "Cancelled",
+};
+
+/**
+ * The client's invoices for a project, with a Pay button for anything still
+ * owing (links to the hosted invoice page). Read-only otherwise. Built on
+ * `useWorkProjectInvoices`; theme tokens only. Renders nothing when there are
+ * no invoices yet.
+ */
+export function WorkProjectInvoices({ projectId, invoiceHref }: WorkProjectInvoicesProps) {
+  const t = useThemeTokens();
+  const { data: invoices, isLoading } = useWorkProjectInvoices(projectId);
+  const href = invoiceHref ?? ((id: string) => `/i/invoice/${id}`);
+
+  if (isLoading || !invoices || invoices.length === 0) return null;
+
+  const statusColor = (inv: WorkProjectInvoice) =>
+    inv.status === "paid" ? t.primary : inv.status === "overdue" || inv.status === "payment_failed" ? "#ef4444" : t.muted;
+
+  return (
+    <div
+      data-testid="work-project-invoices"
+      style={{
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        padding: 20,
+        color: t.text,
+        fontFamily: t.fontFamily,
+      }}
+    >
+      <h2 style={{ fontSize: 16, fontWeight: 800, margin: "0 0 14px" }}>Invoices</h2>
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        {invoices.map((inv) => (
+          <div
+            key={inv.id}
+            data-testid={`work-invoice-${inv.id}`}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              flexWrap: "wrap",
+              padding: "12px 14px",
+              border: `1px solid ${t.border}`,
+              borderRadius: t.cornerRadius,
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <span style={{ fontWeight: 700 }}>{inv.invoiceNumber}</span>
+              <span style={{ fontSize: 12, color: statusColor(inv) }}>
+                {STATUS_LABEL[inv.status] ?? inv.status}
+                {inv.status === "paid" && inv.paidAt ? ` · ${formatWorkDate(inv.paidAt)}` : ""}
+                {inv.payable && inv.dueDate ? ` · due ${formatWorkDate(inv.dueDate)}` : ""}
+              </span>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+              <span style={{ fontWeight: 700 }}>{formatWorkMoney(inv.total, inv.currency)}</span>
+              {inv.payable ? (
+                <a
+                  href={href(inv.id)}
+                  data-testid={`work-invoice-pay-${inv.id}`}
+                  style={{
+                    display: "inline-block",
+                    padding: "8px 16px",
+                    borderRadius: t.cornerRadius,
+                    background: t.primary,
+                    color: t.background,
+                    fontWeight: 700,
+                    fontSize: 13,
+                    textDecoration: "none",
+                  }}
+                >
+                  Pay
+                </a>
+              ) : (
+                <a
+                  href={href(inv.id)}
+                  data-testid={`work-invoice-view-${inv.id}`}
+                  style={{ color: t.primary, fontSize: 13, textDecoration: "underline" }}
+                >
+                  View
+                </a>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/work/WorkProjectReport.tsx

@@ -0,0 +1,66 @@
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { Loading } from "../Loading";
+import { useWorkProjectReport } from "../../headless/work/useWorkPortal";
+import { WorkReportBody } from "./WorkReportBody";
+import { WorkProjectInvoices } from "./WorkProjectInvoices";
+
+export interface WorkProjectReportProps {
+  /** The client project id (from the route). */
+  projectId: string;
+  /** Build the href for a task's detail/comments page. Defaults to
+   * `/i/work/projects/{projectId}/tasks/{taskId}`. Pass `null` to keep tasks
+   * read-only (no per-task navigation). */
+  taskHref?: ((taskId: string) => string) | null;
+  /** Router-driven open handler for a task. When provided, task rows render as
+   * buttons calling this instead of anchors. */
+  onOpenTask?: (taskId: string) => void;
+}
+
+/**
+ * The authenticated client's read-only project report — milestones, task list
+ * and the billable-only time report. Each task links to its detail/comments
+ * page. Built on `useWorkProjectReport`; theme tokens only.
+ */
+export function WorkProjectReport({ projectId, taskHref, onOpenTask }: WorkProjectReportProps) {
+  const t = useThemeTokens();
+  const { data: report, isLoading, isError } = useWorkProjectReport(projectId);
+
+  if (isLoading) {
+    return <Loading fullPage />;
+  }
+
+  if (isError || !report) {
+    return (
+      <div
+        data-testid="work-project-report-error"
+        style={{
+          border: `1px solid ${t.border}`,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          padding: 32,
+          textAlign: "center",
+          color: t.text,
+          fontFamily: t.fontFamily,
+        }}
+      >
+        <p style={{ margin: 0, color: t.muted }}>We couldn&apos;t find this project.</p>
+      </div>
+    );
+  }
+
+  const resolvedTaskHref =
+    taskHref === null
+      ? undefined
+      : onOpenTask
+        ? undefined
+        : (taskHref ?? ((taskId: string) => `/i/work/projects/${projectId}/tasks/${taskId}`));
+
+  // The invoices section is authed-only (not part of the login-free token
+  // share, which renders WorkReportBody directly).
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      <WorkReportBody report={report} taskHref={resolvedTaskHref} onOpenTask={onOpenTask} />
+      <WorkProjectInvoices projectId={projectId} />
+    </div>
+  );
+}