@tribe-nest/forge 3.60.0 → 3.61.0

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

@@ -1,13 +1,16 @@
-import { CheckCircle2, ChevronRight, Circle, Clock, Flag } from "lucide-react";
+import type { CSSProperties, MouseEvent, ReactNode } from "react";
+import { CheckCircle2, ChevronRight, Circle } from "lucide-react";
+import { useForgeT, type ForgeT } from "../../../i18n";
 import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
-import {
-  formatWorkDate,
-  formatWorkMoney,
-  type WorkProjectReportData,
-} from "../../headless/work/useWorkPortal";
+import { formatWorkMoney, type WorkProjectReportData } from "../../headless/work/useWorkPortal";
+import { PortalBlock, PortalHeading, PortalList, PortalRow, usePortal } from "../portal/shared";
+
+export type WorkReportSection = "header" | "milestones" | "tasks" | "time";
+
+const ALL_SECTIONS: WorkReportSection[] = ["header", "milestones", "tasks", "time"];
 
 /**
- * Shared read-only renderer for a project's report — used by both the authed
+ * 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.
@@ -18,275 +21,245 @@ export interface WorkReportBodyProps {
    * 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`. */
+  /** Router-driven open handler. Without `taskHref`, task rows render as
+   * buttons calling this. With both, rows are real links whose plain left
+   * click calls this instead of reloading the page. */
   onOpenTask?: (taskId: string) => void;
+  /** Which parts to render, in this fixed order. Defaults to all four, which
+   * is what the public token report shows. */
+  sections?: WorkReportSection[];
+}
+
+/** Project and milestone status in words. Literal keys, so the translation spec can see each one. */
+export function workStatusLabel(tr: ForgeT, status: string): string {
+  const labels: Record<string, string> = {
+    active: tr("forge.work_report_body.status_active"),
+    on_hold: tr("forge.work_report_body.status_on_hold"),
+    completed: tr("forge.work_report_body.status_completed"),
+    archived: tr("forge.work_report_body.status_archived"),
+    planning: tr("forge.work_report_body.status_planning"),
+    pending: tr("forge.work_report_body.status_pending"),
+    in_progress: tr("forge.work_report_body.status_in_progress"),
+  };
+  return labels[status] ?? status.replace(/_/g, " ");
 }
 
-export function WorkReportBody({ report, taskHref, onOpenTask }: WorkReportBodyProps) {
+const isComplete = (status: string) => ["done", "completed", "complete"].includes(status?.toLowerCase());
+
+export function WorkReportBody({ report, taskHref, onOpenTask, sections = ALL_SECTIONS }: WorkReportBodyProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
   const { project, milestones, tasks, timeReport } = report;
   const taskOpenable = !!taskHref || !!onOpenTask;
+  const show = (section: WorkReportSection) => sections.includes(section);
 
   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>
+    <div data-testid="work-project-report" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      {show("header") && (
+        <PortalHeading
+          title={<span data-testid="work-project-name">{project.name}</span>}
+          actions={
+            <span data-testid="work-project-status" style={{ fontSize: 14, color: t.muted }}>
+              {workStatusLabel(tr, project.status)}
+            </span>
+          }
+        />
+      )}
 
-      {/* 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}
+      {show("milestones") && (
+        <PortalBlock title={tr("forge.work_report_body.milestones")}>
+          {milestones.length === 0 ? (
+            <Muted t={t}>{tr("forge.work_report_body.milestones_empty")}</Muted>
+          ) : (
+            <PortalList>
+              {milestones.map((m) => {
+                const complete = isComplete(m.status);
+                return (
+                  <PortalRow key={m.id} testId="work-milestone">
+                    <span className="fg:min-w-0 fg:flex-1" style={{ fontWeight: 600, color: complete ? t.muted : t.text }}>
+                      {m.name}
                     </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>
-                </>
-              );
+                    <span className="fg:flex fg:flex-wrap fg:gap-x-4" style={{ fontSize: 13, color: t.muted }}>
+                      {m.dueDate ? <span>{tr("forge.work_report_body.due_on", { date: formatDate(m.dueDate) })}</span> : null}
+                      <span>{workStatusLabel(tr, m.status)}</span>
+                    </span>
+                  </PortalRow>
+                );
+              })}
+            </PortalList>
+          )}
+        </PortalBlock>
+      )}
 
-              if (!taskOpenable) {
-                return (
-                  <li key={task.id} style={rowStyle}>
-                    {inner}
-                  </li>
+      {show("tasks") && (
+        <PortalBlock title={tr("forge.work_report_body.tasks")}>
+          {tasks.length === 0 ? (
+            <Muted t={t}>{tr("forge.work_report_body.tasks_empty")}</Muted>
+          ) : (
+            <PortalList>
+              {tasks.map((task) => {
+                const inner = (
+                  <>
+                    <span className="fg:flex fg:min-w-0 fg:flex-1 fg:items-center fg:gap-3">
+                      {task.done ? (
+                        <CheckCircle2 size={18} aria-hidden style={{ color: t.text, flexShrink: 0 }} />
+                      ) : (
+                        <Circle size={18} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
+                      )}
+                      <span className="fg:sr-only">
+                        {task.done ? tr("forge.work_report_body.task_done") : tr("forge.work_report_body.task_open")}
+                      </span>
+                      <span
+                        style={{
+                          color: task.done ? t.muted : t.text,
+                          textDecoration: task.done ? "line-through" : "none",
+                        }}
+                      >
+                        {task.title}
+                      </span>
+                    </span>
+                    <span className="fg:flex fg:items-center fg:gap-3" style={{ fontSize: 13, color: t.muted }}>
+                      {task.dueDate ? (
+                        <span>{tr("forge.work_report_body.due_on", { date: formatDate(task.dueDate) })}</span>
+                      ) : null}
+                      {taskOpenable && <ChevronRight size={16} aria-hidden style={{ flexShrink: 0 }} />}
+                    </span>
+                  </>
                 );
-              }
 
-              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 (!taskOpenable) {
+                  return (
+                    <PortalRow key={task.id} testId="work-task-row">
+                      {inner}
+                    </PortalRow>
+                  );
+                }
+
+                const linkStyle: CSSProperties = {
+                  width: "100%",
+                  textAlign: "left",
+                  cursor: "pointer",
+                  background: "transparent",
+                  border: "none",
+                  color: t.text,
+                  fontFamily: t.fontFamily,
+                  fontSize: "inherit",
+                  textDecoration: "none",
+                };
+                const linkClass = "fg:flex fg:flex-wrap fg:items-center fg:gap-x-4 fg:gap-y-2 fg:px-0 fg:py-4";
 
-              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 key={task.id} style={{ listStyle: "none", borderBottom: `1px solid ${t.border}` }}>
+                    {taskHref ? (
+                      <a
+                        data-testid="work-task-link"
+                        href={taskHref(task.id)}
+                        className={linkClass}
+                        style={linkStyle}
+                        onClick={
+                          onOpenTask
+                            ? (event: MouseEvent<HTMLAnchorElement>) => {
+                                if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+                                  return;
+                                }
+                                event.preventDefault();
+                                onOpenTask(task.id);
+                              }
+                            : undefined
+                        }
+                      >
+                        {inner}
+                      </a>
+                    ) : (
+                      <button
+                        type="button"
+                        data-testid="work-task-link"
+                        onClick={() => onOpenTask!(task.id)}
+                        className={linkClass}
+                        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>
+              })}
+            </PortalList>
+          )}
+        </PortalBlock>
+      )}
 
-      {/* 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}
+      {show("time") && (
+        <PortalBlock title={tr("forge.work_report_body.billable_time")}>
+          {timeReport.byTask.length === 0 ? (
+            <Muted t={t}>{tr("forge.work_report_body.billable_time_empty")}</Muted>
+          ) : (
+            <div data-testid="work-time-report" style={{ width: "100%", overflowX: "auto" }}>
+              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 15 }}>
+                <thead>
+                  <tr>
+                    <Th align="left" t={t}>
+                      {tr("forge.work_report_body.column_task")}
+                    </Th>
+                    <Th align="right" t={t}>
+                      {tr("forge.work_report_body.column_hours")}
+                    </Th>
+                    <Th align="right" t={t}>
+                      {tr("forge.work_report_body.column_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}>
+                      {tr("forge.work_report_body.total")}
                     </Td>
-                    <Td align="right" t={t}>
-                      {row.hours.toLocaleString()}
+                    <Td align="right" bold t={t}>
+                      {timeReport.totalHours.toLocaleString()}
                     </Td>
-                    <Td align="right" t={t}>
-                      {formatWorkMoney(row.amount, timeReport.currency)}
+                    <Td align="right" bold t={t} testId="work-total-amount">
+                      {formatWorkMoney(timeReport.totalAmount, 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>
+                </tfoot>
+              </table>
+            </div>
+          )}
+        </PortalBlock>
+      )}
     </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 }) {
+function Muted({ t, children }: { t: ResolvedThemeTokens; children: 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 }) {
+function Th({ align, t, children }: { align: "left" | "right"; t: ResolvedThemeTokens; children: ReactNode }) {
   return (
     <th
+      scope="col"
       style={{
-        padding: "8px",
-        fontWeight: 600,
-        fontSize: 12,
-        textTransform: "uppercase",
-        letterSpacing: "0.05em",
+        padding: "0 0 10px",
+        paddingLeft: align === "right" ? 16 : 0,
+        fontWeight: 500,
+        fontSize: 13,
         textAlign: align,
         color: t.muted,
         borderBottom: `1px solid ${t.border}`,
@@ -308,17 +281,19 @@ function Td({
   bold?: boolean;
   t: ResolvedThemeTokens;
   testId?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   return (
     <td
       data-testid={testId}
       style={{
-        padding: "8px",
+        padding: "12px 0",
+        paddingLeft: align === "right" ? 16 : 0,
         textAlign: align,
         color: t.text,
-        fontWeight: bold ? 700 : 400,
-        borderTop: `1px solid ${t.border}`,
+        fontWeight: bold ? 600 : 400,
+        fontVariantNumeric: "tabular-nums",
+        borderBottom: bold ? "none" : `1px solid ${t.border}`,
       }}
     >
       {children}

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

@@ -1,6 +1,8 @@
 import { Paperclip } from "lucide-react";
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { useWorkTaskAttachments } from "../../headless/work/useWorkPortal";
+import { PortalBlock, PortalList, PortalRow } from "../portal/shared";
 
 export interface WorkTaskAttachmentsProps {
   /** The client project id. */
@@ -27,41 +29,33 @@ const humanSize = (size: number | null): string => {
  */
 export function WorkTaskAttachments({ projectId, taskId }: WorkTaskAttachmentsProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   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 data-testid="work-task-attachments" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      <PortalBlock title={tr("forge.work_task_attachments.title")}>
+        <PortalList>
+          {attachments.map((att) => (
+            <PortalRow key={att.id} testId={`work-task-attachment-${att.id}`}>
+              <Paperclip size={16} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
+              <a
+                href={att.url ?? "#"}
+                target="_blank"
+                rel="noreferrer"
+                className="fg:min-w-0 fg:flex-1"
+                style={{ color: t.text, fontWeight: 600, fontSize: 15, textDecoration: "underline", textUnderlineOffset: 3 }}
+              >
+                {att.name || att.filename || tr("forge.work_task_attachments.fallback_name")}
+              </a>
+              {att.size ? <span style={{ fontSize: 13, color: t.muted }}>{humanSize(att.size)}</span> : null}
+            </PortalRow>
+          ))}
+        </PortalList>
+      </PortalBlock>
     </div>
   );
 }