@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,327 @@
+import { CheckCircle2, ChevronRight, Circle, Clock, Flag } from "lucide-react";
+import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  formatWorkDate,
+  formatWorkMoney,
+  type WorkProjectReportData,
+} from "../../headless/work/useWorkPortal";
+
+/**
+ * Shared read-only renderer for a project's report — used by both the authed
+ * `WorkProjectReport` and the public tokenized `WorkTokenReport`. Shows
+ * milestones, a simple task list, and the billable-only time report
+ * (hours + amount per task + total). Theme tokens only.
+ */
+export interface WorkReportBodyProps {
+  report: WorkProjectReportData;
+  /** Build the href for a task's detail/comments page. When provided (authed
+   * report only), each task row becomes a link. The public token report omits
+   * this, so tasks stay read-only there. */
+  taskHref?: (taskId: string) => string;
+  /** Router-driven open handler. When provided, task rows render as buttons
+   * calling this instead of anchors. Takes precedence over `taskHref`. */
+  onOpenTask?: (taskId: string) => void;
+}
+
+export function WorkReportBody({ report, taskHref, onOpenTask }: WorkReportBodyProps) {
+  const t = useThemeTokens();
+  const { project, milestones, tasks, timeReport } = report;
+  const taskOpenable = !!taskHref || !!onOpenTask;
+
+  return (
+    <div
+      data-testid="work-project-report"
+      style={{ display: "flex", flexDirection: "column", gap: 24, color: t.text, fontFamily: t.fontFamily }}
+    >
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
+        <h1 data-testid="work-project-name" style={{ fontSize: 22, fontWeight: 800, margin: 0, color: t.text }}>
+          {project.name}
+        </h1>
+        <StatusPill status={project.status} t={t} />
+      </div>
+
+      {/* Milestones */}
+      <Panel title="Milestones" icon={<Flag size={16} />} t={t}>
+        {milestones.length === 0 ? (
+          <Muted t={t}>No milestones yet.</Muted>
+        ) : (
+          <ul style={listStyle}>
+            {milestones.map((m) => (
+              <li key={m.id} style={rowStyle}>
+                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+                  <StatusDot status={m.status} t={t} />
+                  <span style={{ color: t.text }}>{m.name}</span>
+                </span>
+                <span style={{ fontSize: 13, color: t.muted }}>{formatWorkDate(m.dueDate)}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Panel>
+
+      {/* Task list */}
+      <Panel title="Tasks" icon={<CheckCircle2 size={16} />} t={t}>
+        {tasks.length === 0 ? (
+          <Muted t={t}>No tasks yet.</Muted>
+        ) : (
+          <ul style={listStyle}>
+            {tasks.map((task) => {
+              const inner = (
+                <>
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+                    {task.done ? (
+                      <CheckCircle2 size={16} style={{ color: t.primary }} />
+                    ) : (
+                      <Circle size={16} style={{ color: t.muted }} />
+                    )}
+                    <span
+                      style={{
+                        color: task.done ? t.muted : t.text,
+                        textDecoration: task.done ? "line-through" : "none",
+                      }}
+                    >
+                      {task.title}
+                    </span>
+                  </span>
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+                    <span style={{ fontSize: 13, color: t.muted }}>{formatWorkDate(task.dueDate)}</span>
+                    {taskOpenable && <ChevronRight size={16} style={{ color: t.muted, flexShrink: 0 }} />}
+                  </span>
+                </>
+              );
+
+              if (!taskOpenable) {
+                return (
+                  <li key={task.id} style={rowStyle}>
+                    {inner}
+                  </li>
+                );
+              }
+
+              const linkStyle: React.CSSProperties = {
+                ...rowStyle,
+                width: "100%",
+                textAlign: "left",
+                cursor: "pointer",
+                background: "transparent",
+                border: "none",
+                padding: "4px 0",
+                color: t.text,
+                fontFamily: t.fontFamily,
+                fontSize: "inherit",
+                textDecoration: "none",
+              };
+
+              if (onOpenTask) {
+                return (
+                  <li key={task.id} style={{ listStyle: "none" }}>
+                    <button type="button" data-testid="work-task-link" onClick={() => onOpenTask(task.id)} style={linkStyle}>
+                      {inner}
+                    </button>
+                  </li>
+                );
+              }
+
+              return (
+                <li key={task.id} style={{ listStyle: "none" }}>
+                  <a data-testid="work-task-link" href={taskHref!(task.id)} style={linkStyle}>
+                    {inner}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </Panel>
+
+      {/* Billable time report */}
+      <Panel title="Billable time" icon={<Clock size={16} />} t={t}>
+        {timeReport.byTask.length === 0 ? (
+          <Muted t={t}>No billable time logged yet.</Muted>
+        ) : (
+          <div data-testid="work-time-report" style={{ width: "100%", overflowX: "auto" }}>
+            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
+              <thead>
+                <tr>
+                  <Th align="left" t={t}>
+                    Task
+                  </Th>
+                  <Th align="right" t={t}>
+                    Hours
+                  </Th>
+                  <Th align="right" t={t}>
+                    Amount
+                  </Th>
+                </tr>
+              </thead>
+              <tbody>
+                {timeReport.byTask.map((row) => (
+                  <tr key={row.taskId ?? "unassigned"}>
+                    <Td align="left" t={t}>
+                      {row.taskTitle}
+                    </Td>
+                    <Td align="right" t={t}>
+                      {row.hours.toLocaleString()}
+                    </Td>
+                    <Td align="right" t={t}>
+                      {formatWorkMoney(row.amount, timeReport.currency)}
+                    </Td>
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                <tr data-testid="work-time-total">
+                  <Td align="left" bold t={t}>
+                    Total
+                  </Td>
+                  <Td align="right" bold t={t}>
+                    {timeReport.totalHours.toLocaleString()}
+                  </Td>
+                  <Td align="right" bold t={t} testId="work-total-amount">
+                    {formatWorkMoney(timeReport.totalAmount, timeReport.currency)}
+                  </Td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        )}
+      </Panel>
+    </div>
+  );
+}
+
+const listStyle: React.CSSProperties = {
+  margin: 0,
+  padding: 0,
+  listStyle: "none",
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+};
+
+const rowStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 12,
+  flexWrap: "wrap",
+};
+
+function Panel({
+  title,
+  icon,
+  t,
+  children,
+}: {
+  title: string;
+  icon?: React.ReactNode;
+  t: ResolvedThemeTokens;
+  children: React.ReactNode;
+}) {
+  return (
+    <div style={{ padding: 20, border: `1px solid ${t.border}`, borderRadius: t.cornerRadius, background: t.surface }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+        {icon && <span style={{ color: t.primary, display: "inline-flex" }}>{icon}</span>}
+        <h2
+          style={{
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            margin: 0,
+            color: t.text,
+          }}
+        >
+          {title}
+        </h2>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function Muted({ t, children }: { t: ResolvedThemeTokens; children: React.ReactNode }) {
+  return <p style={{ margin: 0, fontSize: 14, color: t.muted }}>{children}</p>;
+}
+
+function StatusPill({ status, t }: { status: string; t: ResolvedThemeTokens }) {
+  return (
+    <span
+      style={{
+        fontSize: 12,
+        fontWeight: 600,
+        padding: "4px 10px",
+        borderRadius: 999,
+        textTransform: "capitalize",
+        background: t.border,
+        color: t.primary,
+      }}
+    >
+      {status.replace(/_/g, " ")}
+    </span>
+  );
+}
+
+function StatusDot({ status, t }: { status: string; t: ResolvedThemeTokens }) {
+  const done = ["done", "completed", "complete"].includes(status?.toLowerCase());
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        background: done ? t.primary : t.muted,
+      }}
+    />
+  );
+}
+
+function Th({ align, t, children }: { align: "left" | "right"; t: ResolvedThemeTokens; children: React.ReactNode }) {
+  return (
+    <th
+      style={{
+        padding: "8px",
+        fontWeight: 600,
+        fontSize: 12,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        textAlign: align,
+        color: t.muted,
+        borderBottom: `1px solid ${t.border}`,
+      }}
+    >
+      {children}
+    </th>
+  );
+}
+
+function Td({
+  align,
+  bold,
+  t,
+  testId,
+  children,
+}: {
+  align: "left" | "right";
+  bold?: boolean;
+  t: ResolvedThemeTokens;
+  testId?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <td
+      data-testid={testId}
+      style={{
+        padding: "8px",
+        textAlign: align,
+        color: t.text,
+        fontWeight: bold ? 700 : 400,
+        borderTop: `1px solid ${t.border}`,
+      }}
+    >
+      {children}
+    </td>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { Paperclip } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useWorkTaskAttachments } from "../../headless/work/useWorkPortal";
+
+export interface WorkTaskAttachmentsProps {
+  /** The client project id. */
+  projectId: string;
+  /** The task id. */
+  taskId: string;
+}
+
+const humanSize = (size: number | null): string => {
+  if (!size || size <= 0) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let n = size;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i += 1;
+  }
+  return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+};
+
+/**
+ * Read-only list of files the team attached to a task, for the client portal.
+ * Built on the `useWorkTaskAttachments` Tier-1 primitive. Theme tokens only.
+ */
+export function WorkTaskAttachments({ projectId, taskId }: WorkTaskAttachmentsProps) {
+  const t = useThemeTokens();
+  const { data: attachments, isLoading } = useWorkTaskAttachments(projectId, taskId);
+
+  if (isLoading) return null;
+  if (!attachments || attachments.length === 0) return null;
+
+  return (
+    <div data-testid="work-task-attachments" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <span style={{ fontSize: 13, fontWeight: 700, color: t.text }}>Attachments</span>
+      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+        {attachments.map((att) => (
+          <li key={att.id} data-testid={`work-task-attachment-${att.id}`}>
+            <a
+              href={att.url ?? "#"}
+              target="_blank"
+              rel="noreferrer"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                fontSize: 13,
+                color: t.primary,
+                textDecoration: "none",
+                padding: "8px 12px",
+                border: `1px solid ${t.border}`,
+                borderRadius: t.cornerRadius,
+                background: t.surface,
+              }}
+            >
+              <Paperclip size={14} />
+              <span>{att.name || att.filename || "Attachment"}</span>
+              {att.size ? <span style={{ color: t.muted }}>({humanSize(att.size)})</span> : null}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+import { useState, type FormEvent } from "react";
+import { MessageSquare, Send } from "lucide-react";
+import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+import { Loading } from "../Loading";
+import {
+  formatWorkDate,
+  useWorkTaskComments,
+  type WorkTaskComment,
+} from "../../headless/work/useWorkPortal";
+
+export interface WorkTaskCommentsProps {
+  /** The client project id (from the route). */
+  projectId: string;
+  /** The task id whose thread is shown. */
+  taskId: string;
+}
+
+/**
+ * The authenticated client's comment thread for a single task — renders the
+ * existing comments (author + time + content, newest first) and a composer
+ * (textarea + submit) that posts a new one. Built on `useWorkTaskComments`;
+ * theme tokens only.
+ */
+export function WorkTaskComments({ projectId, taskId }: WorkTaskCommentsProps) {
+  const t = useThemeTokens();
+  const { comments, isLoading, error, addComment, isAdding } = useWorkTaskComments(projectId, taskId);
+  const [content, setContent] = useState("");
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const trimmed = content.trim();
+    if (!trimmed || isAdding) return;
+    try {
+      await addComment(trimmed);
+      setContent("");
+    } catch {
+      // Keep the draft so the client can retry; the composer stays populated.
+    }
+  };
+
+  return (
+    <div
+      data-testid="work-task-comments"
+      style={{ display: "flex", flexDirection: "column", gap: 16, color: t.text, fontFamily: t.fontFamily }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <MessageSquare size={16} style={{ color: t.primary }} />
+        <h2
+          style={{
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            margin: 0,
+            color: t.text,
+          }}
+        >
+          Comments
+        </h2>
+      </div>
+
+      {isLoading ? (
+        <Loading />
+      ) : error ? (
+        <p style={{ margin: 0, fontSize: 14, color: t.muted }}>We couldn&apos;t load comments right now.</p>
+      ) : comments.length === 0 ? (
+        <p style={{ margin: 0, fontSize: 14, color: t.muted }}>No comments yet. Start the conversation below.</p>
+      ) : (
+        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
+          {comments.map((c) => (
+            <CommentItem key={c.id} comment={c} t={t} />
+          ))}
+        </ul>
+      )}
+
+      {/* Composer */}
+      <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <textarea
+          data-testid="work-task-comment-input"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="Add a comment…"
+          rows={3}
+          disabled={isAdding}
+          style={{
+            width: "100%",
+            resize: "vertical",
+            padding: "10px 12px",
+            fontFamily: t.fontFamily,
+            fontSize: 14,
+            color: t.text,
+            background: t.background,
+            border: `1px solid ${t.border}`,
+            borderRadius: t.cornerRadius,
+            boxSizing: "border-box",
+          }}
+        />
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <button
+            type="submit"
+            data-testid="work-task-comment-submit"
+            disabled={isAdding || content.trim().length === 0}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "8px 16px",
+              fontFamily: t.fontFamily,
+              fontSize: 14,
+              fontWeight: 600,
+              color: t.textPrimary,
+              background: t.primary,
+              border: "none",
+              borderRadius: t.cornerRadius,
+              cursor: isAdding || content.trim().length === 0 ? "not-allowed" : "pointer",
+              opacity: isAdding || content.trim().length === 0 ? 0.6 : 1,
+            }}
+          >
+            <Send size={14} />
+            {isAdding ? "Posting…" : "Post comment"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function CommentItem({ comment, t }: { comment: WorkTaskComment; t: ResolvedThemeTokens }) {
+  return (
+    <li
+      data-testid="work-task-comment-item"
+      style={{
+        padding: 14,
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }}>
+        <span style={{ fontWeight: 600, fontSize: 14, color: t.text }}>{comment.fullName}</span>
+        <span style={{ fontSize: 12, color: t.muted }}>{formatWorkDate(comment.createdAt)}</span>
+      </div>
+      <p style={{ margin: 0, fontSize: 14, color: t.text, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
+        {comment.content}
+      </p>
+    </li>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { ArrowLeft, CheckCircle2, Circle } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { Loading } from "../Loading";
+import { formatWorkDate, useWorkProjectReport } from "../../headless/work/useWorkPortal";
+import { WorkTaskComments } from "./WorkTaskComments";
+import { WorkTaskAttachments } from "./WorkTaskAttachments";
+
+export interface WorkTaskDetailProps {
+  /** The client project id (from the route). */
+  projectId: string;
+  /** The task id (from the route). */
+  taskId: string;
+  /** Href back to the project report. Rendered as an `<a>` unless `onBack` is
+   * supplied. Defaults to `/i/work/projects/{projectId}`. */
+  backHref?: string;
+  /** Router-driven back handler. When provided, the back link renders as a
+   * button calling this instead of an anchor. */
+  onBack?: () => void;
+}
+
+/**
+ * The authenticated client's single-task detail — the task title/status plus
+ * the comment thread (`WorkTaskComments`). Resolves the task from the project
+ * report so it shows a friendly title. Theme tokens only.
+ */
+export function WorkTaskDetail({ projectId, taskId, backHref, onBack }: WorkTaskDetailProps) {
+  const t = useThemeTokens();
+  const { data: report, isLoading } = useWorkProjectReport(projectId);
+  const href = backHref ?? `/i/work/projects/${projectId}`;
+
+  const task = report?.tasks.find((tk) => tk.id === taskId);
+
+  const backLinkStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    fontSize: 13,
+    fontWeight: 600,
+    color: t.primary,
+    background: "transparent",
+    border: "none",
+    padding: 0,
+    cursor: "pointer",
+    textDecoration: "none",
+  };
+
+  const backLink = onBack ? (
+    <button type="button" data-testid="work-task-back" onClick={onBack} style={backLinkStyle}>
+      <ArrowLeft size={14} /> Back to project
+    </button>
+  ) : (
+    <a data-testid="work-task-back" href={href} style={backLinkStyle}>
+      <ArrowLeft size={14} /> Back to project
+    </a>
+  );
+
+  return (
+    <div
+      data-testid="work-task-detail"
+      style={{ display: "flex", flexDirection: "column", gap: 24, color: t.text, fontFamily: t.fontFamily }}
+    >
+      {backLink}
+
+      {isLoading ? (
+        <Loading fullPage />
+      ) : (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
+          <h1
+            data-testid="work-task-title"
+            style={{ fontSize: 22, fontWeight: 800, margin: 0, color: t.text, display: "inline-flex", alignItems: "center", gap: 10 }}
+          >
+            {task ? (
+              task.done ? (
+                <CheckCircle2 size={20} style={{ color: t.primary }} />
+              ) : (
+                <Circle size={20} style={{ color: t.muted }} />
+              )
+            ) : null}
+            {task ? task.title : "Task"}
+          </h1>
+          {task?.dueDate && <span style={{ fontSize: 13, color: t.muted }}>Due {formatWorkDate(task.dueDate)}</span>}
+        </div>
+      )}
+
+      <WorkTaskAttachments projectId={projectId} taskId={taskId} />
+
+      <div style={{ padding: 20, border: `1px solid ${t.border}`, borderRadius: t.cornerRadius, background: t.surface }}>
+        <WorkTaskComments projectId={projectId} taskId={taskId} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { Loading } from "../Loading";
+import { useWorkTokenReport } from "../../headless/work/useWorkPortal";
+import { WorkReportBody } from "./WorkReportBody";
+
+export interface WorkTokenReportProps {
+  /** Signed share token from the URL (`/i/work/time-report/:token`). */
+  token: string;
+}
+
+/**
+ * Public, login-free tokenized share of a project's time report. The signed
+ * token IS the authorization — no auth guard. Invalid/expired tokens resolve to
+ * a friendly not-found notice (the API returns 404). Built on
+ * `useWorkTokenReport`; wraps `WorkReportBody`. Theme tokens only.
+ */
+export function WorkTokenReport({ token }: WorkTokenReportProps) {
+  const t = useThemeTokens();
+  const { data: report, isLoading, isError } = useWorkTokenReport(token);
+
+  if (isLoading) {
+    return <Loading fullPage />;
+  }
+
+  if (isError || !report) {
+    return (
+      <div
+        data-testid="work-token-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 }}>This report link is invalid or has expired.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="work-token-report">
+      <WorkReportBody report={report} />
+    </div>
+  );
+}

package/src/ui/styled/work/index.ts

@@ -0,0 +1,10 @@
+// Work (project management) client-portal styled blocks.
+export { WorkPortalProjects, type WorkPortalProjectsProps } from "./WorkPortalProjects";
+export { WorkProjectReport, type WorkProjectReportProps } from "./WorkProjectReport";
+export { WorkTokenReport, type WorkTokenReportProps } from "./WorkTokenReport";
+export { WorkReportBody, type WorkReportBodyProps } from "./WorkReportBody";
+export { WorkTaskComments, type WorkTaskCommentsProps } from "./WorkTaskComments";
+export { WorkTaskAttachments, type WorkTaskAttachmentsProps } from "./WorkTaskAttachments";
+export { WorkTaskDetail, type WorkTaskDetailProps } from "./WorkTaskDetail";
+export { WorkInviteAccept, type WorkInviteAcceptProps } from "./WorkInviteAccept";
+export { WorkProjectInvoices, type WorkProjectInvoicesProps } from "./WorkProjectInvoices";