@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -1,113 +1,118 @@
+import type { MouseEvent } from "react";
+import { useForgeT, type ForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
-import {
-  formatWorkDate,
-  formatWorkMoney,
-  useWorkProjectInvoices,
-  type WorkProjectInvoice,
-} from "../../headless/work/useWorkPortal";
+import { useWorkProjectInvoices, type WorkProjectInvoice } from "../../headless/work/useWorkPortal";
+import { PortalBlock, PortalList, PortalRow, portalMoney, usePortal, usePortalButtons } from "../portal/shared";
 
 export interface WorkProjectInvoicesProps {
   /** The client project id. */
   projectId: string;
   /** Build the href for an invoice's pay/detail page. Defaults to
-   * `/i/invoice/{id}`. */
+   * `internalPath("invoice/$invoiceId")`. */
   invoiceHref?: (invoiceId: string) => string;
+  /** Router-driven open handler. Pay and View stay real links (so a new tab
+   * still works), and a plain left click calls this instead of reloading. */
+  onOpenInvoice?: (invoiceId: string) => void;
 }
 
-const STATUS_LABEL: Record<string, string> = {
-  sent: "Awaiting payment",
-  overdue: "Overdue",
-  initiated_payment: "Payment started",
-  payment_failed: "Payment failed",
-  paid: "Paid",
-  cancelled: "Cancelled",
+/** Status in words. Literal keys, so the translation spec can see each one. */
+const statusLabel = (tr: ForgeT, status: string): string => {
+  const labels: Record<string, string> = {
+    sent: tr("forge.work_project_invoices.status_sent"),
+    overdue: tr("forge.work_project_invoices.status_overdue"),
+    initiated_payment: tr("forge.work_project_invoices.status_initiated_payment"),
+    payment_failed: tr("forge.work_project_invoices.status_payment_failed"),
+    paid: tr("forge.work_project_invoices.status_paid"),
+    cancelled: tr("forge.work_project_invoices.status_cancelled"),
+  };
+  return labels[status] ?? status.replace(/_/g, " ");
 };
 
+/** States the client has to act on. They read in the text colour at weight, never in a warning hue. */
+const needsAttention = (inv: WorkProjectInvoice) => inv.status === "overdue" || inv.status === "payment_failed";
+
 /**
  * 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) {
+export function WorkProjectInvoices({ projectId, invoiceHref, onOpenInvoice }: WorkProjectInvoicesProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const { formatDate } = usePortal();
   const { data: invoices, isLoading } = useWorkProjectInvoices(projectId);
-  const href = invoiceHref ?? ((id: string) => `/i/invoice/${id}`);
+  const href = invoiceHref ?? ((invoiceId: string) => internalPath("invoice/$invoiceId", { invoiceId }));
 
   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;
+  const open = (invoiceId: string) =>
+    onOpenInvoice
+      ? (event: MouseEvent<HTMLAnchorElement>) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          onOpenInvoice(invoiceId);
+        }
+      : undefined;
 
   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 data-testid="work-project-invoices" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      <PortalBlock title={tr("forge.work_project_invoices.title")}>
+        <PortalList>
+          {invoices.map((inv) => {
+            const attention = needsAttention(inv);
+            return (
+              <PortalRow key={inv.id} testId={`work-invoice-${inv.id}`}>
+                <div className="fg:flex fg:min-w-0 fg:flex-1 fg:flex-col fg:gap-1">
+                  <span style={{ fontWeight: 600, fontSize: 15 }}>{inv.invoiceNumber}</span>
+                  <span className="fg:flex fg:flex-wrap fg:gap-x-3" style={{ fontSize: 13, color: t.muted }}>
+                    <span
+                      data-testid={`work-invoice-status-${inv.id}`}
+                      style={attention ? { color: t.text, fontWeight: 600 } : undefined}
+                    >
+                      {statusLabel(tr, inv.status)}
+                    </span>
+                    {inv.status === "paid" && inv.paidAt ? (
+                      <span>{tr("forge.work_project_invoices.paid_on", { date: formatDate(inv.paidAt) })}</span>
+                    ) : null}
+                    {inv.payable && inv.dueDate ? (
+                      <span>{tr("forge.work_project_invoices.due_on", { date: formatDate(inv.dueDate) })}</span>
+                    ) : null}
+                  </span>
+                </div>
+                <div className="fg:flex fg:items-center fg:gap-4">
+                  <span style={{ fontWeight: 600, fontSize: 15, fontVariantNumeric: "tabular-nums" }}>
+                    {portalMoney(inv.total, inv.currency)}
+                  </span>
+                  {inv.payable ? (
+                    <a
+                      href={href(inv.id)}
+                      onClick={open(inv.id)}
+                      data-testid={`work-invoice-pay-${inv.id}`}
+                      aria-label={tr("forge.work_project_invoices.pay_aria", { number: inv.invoiceNumber })}
+                      style={buttons.primary}
+                    >
+                      {tr("forge.work_project_invoices.pay")}
+                    </a>
+                  ) : (
+                    <a
+                      href={href(inv.id)}
+                      onClick={open(inv.id)}
+                      data-testid={`work-invoice-view-${inv.id}`}
+                      aria-label={tr("forge.work_project_invoices.view_aria", { number: inv.invoiceNumber })}
+                      style={{ ...buttons.quiet, minHeight: 34, padding: "6px 14px" }}
+                    >
+                      {tr("forge.work_project_invoices.view")}
+                    </a>
+                  )}
+                </div>
+              </PortalRow>
+            );
+          })}
+        </PortalList>
+      </PortalBlock>
     </div>
   );
 }

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

@@ -1,6 +1,9 @@
+import { useForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { Loading } from "../Loading";
 import { useWorkProjectReport } from "../../headless/work/useWorkPortal";
+import { PortalEmpty } from "../portal/shared";
 import { WorkReportBody } from "./WorkReportBody";
 import { WorkProjectInvoices } from "./WorkProjectInvoices";
 import { WorkProjectDocuments } from "./WorkProjectDocuments";
@@ -9,8 +12,8 @@ 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). */
+   * `internalPath("account/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. */
@@ -24,6 +27,7 @@ export interface WorkProjectReportProps {
  */
 export function WorkProjectReport({ projectId, taskHref, onOpenTask }: WorkProjectReportProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const { data: report, isLoading, isError } = useWorkProjectReport(projectId);
 
   if (isLoading) {
@@ -32,19 +36,8 @@ export function WorkProjectReport({ projectId, taskHref, onOpenTask }: WorkProje
 
   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 data-testid="work-project-report-error" style={{ fontFamily: t.fontFamily }}>
+        <PortalEmpty title={tr("forge.work_project_report.not_found")} />
       </div>
     );
   }
@@ -54,12 +47,13 @@ export function WorkProjectReport({ projectId, taskHref, onOpenTask }: WorkProje
       ? undefined
       : onOpenTask
         ? undefined
-        : (taskHref ?? ((taskId: string) => `/i/work/projects/${projectId}/tasks/${taskId}`));
+        : (taskHref ??
+          ((taskId: string) => internalPath("account/projects/$projectId/tasks/$taskId", { projectId, taskId })));
 
   // The documents and invoices sections are authed-only (not part of the
   // login-free token share, which renders WorkReportBody directly).
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+    <div className="fg:flex fg:flex-col fg:gap-10">
       <WorkReportBody report={report} taskHref={resolvedTaskHref} onOpenTask={onOpenTask} />
       <WorkProjectDocuments projectId={projectId} />
       <WorkProjectInvoices projectId={projectId} />