@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/portal/PortalPreviewBanner.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { useState } from "react";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { usePortalPreview } from "../../headless/portal/usePortalPreview";
+import { usePortalButtons } from "./shared";
+
+/** The preview's end as a wall-clock time in the visitor's locale. */
+export const formatPreviewEnd = (expiresAt: string, locale: string): string =>
+  new Date(expiresAt).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
+
+/**
+ * "Previewing as Pat Client. Read-only, ends 14:32." with an Exit button.
+ *
+ * Renders nothing unless this browser holds a read-only preview session
+ * (`user.preview`), so it is safe to mount unconditionally inside the portal
+ * frame. The sentence is state the creator acts on, not help, so it stays
+ * visible rather than behind a `?`.
+ */
+export function PortalPreviewBanner() {
+  const t = useForgeT();
+  const locale = useForgeLocale();
+  const theme = useThemeTokens();
+  const buttons = usePortalButtons();
+  const { active, name, expiresAt, exit } = usePortalPreview();
+  const [exiting, setExiting] = useState(false);
+
+  if (!active) return null;
+
+  const message = expiresAt
+    ? t("forge.portal_preview.banner", { name, time: formatPreviewEnd(expiresAt, locale) })
+    : t("forge.portal_preview.banner_no_time", { name });
+
+  return (
+    <div
+      role="status"
+      data-portal-preview-banner=""
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "10px 16px",
+        marginBottom: 16,
+        background: theme.primary,
+        color: theme.textPrimary,
+        borderRadius: theme.cornerRadius,
+        fontFamily: theme.fontFamily,
+        fontSize: 14,
+        fontWeight: 600,
+      }}
+    >
+      <span>{message}</span>
+      <button
+        type="button"
+        disabled={exiting}
+        onClick={async () => {
+          setExiting(true);
+          await exit();
+        }}
+        style={{
+          ...buttons.quiet,
+          minHeight: 32,
+          padding: "4px 14px",
+          color: theme.textPrimary,
+          borderColor: theme.textPrimary,
+          opacity: exiting ? 0.6 : 1,
+        }}
+      >
+        {exiting ? t("forge.portal_preview.exiting") : t("forge.portal_preview.exit")}
+      </button>
+    </div>
+  );
+}

package/src/ui/styled/portal/PortalProjects.tsx

@@ -0,0 +1,407 @@
+import { useState } from "react";
+import { ArrowLeft, Check } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useWorkProjectReport, type WorkMilestone } from "../../headless/work/useWorkPortal";
+import {
+  useDecideApproval,
+  useWorkApprovalRequests,
+  type WorkApprovalRequest,
+} from "../../headless/portal/usePortal";
+import { Loading } from "../Loading";
+import { WorkReportBody, workStatusLabel } from "../work/WorkReportBody";
+import { WorkPortalProjects } from "../work/WorkPortalProjects";
+import { WorkProjectDocuments } from "../work/WorkProjectDocuments";
+import { WorkProjectInvoices } from "../work/WorkProjectInvoices";
+import { WorkTaskDetail } from "../work/WorkTaskDetail";
+import {
+  PortalBlock,
+  PortalEmpty,
+  PortalHeading,
+  PortalLink,
+  PortalList,
+  PortalProgress,
+  usePortal,
+  usePortalButtons,
+} from "./shared";
+
+const projectHref = (projectId: string) => internalPath("account/projects/$projectId", { projectId });
+
+/**
+ * Every project the person is a client on (`/i/account/projects`).
+ *
+ * The list is `WorkPortalProjects`, so the portal and a creator's own custom
+ * portal draw the same rows; only navigation is the portal's.
+ */
+export function PortalProjects() {
+  const { navigate } = usePortal();
+  return <WorkPortalProjects onOpenProject={(projectId) => navigate(projectHref(projectId))} />;
+}
+
+function StatusText({ status }: { status: string }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <span data-testid="work-project-status" style={{ fontSize: 13, color: t.muted }}>
+      {workStatusLabel(tr, status)}
+    </span>
+  );
+}
+
+/**
+ * One project (`/i/account/projects/$projectId`).
+ *
+ * Leads with where it stands (progress, the next milestone) and with anything
+ * waiting on the client's decision. Then the milestones as the sequence they
+ * are, the tasks, billable time, shared files and invoices.
+ */
+export function PortalProject({ projectId }: { projectId: string }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
+  const buttons = usePortalButtons();
+  const { data: report, isLoading, isError } = useWorkProjectReport(projectId);
+  const { data: approvalData } = useWorkApprovalRequests(projectId);
+  const approvals = approvalData?.requests;
+  const canApprove = approvalData?.canApprove ?? false;
+  const { navigate } = usePortal();
+
+  if (isLoading) return <Loading />;
+  if (isError || !report) {
+    return (
+      <div data-testid="work-project-report-error">
+        <PortalEmpty
+          title={tr("forge.portal_projects.not_found_title")}
+          body={tr("forge.portal_projects.not_found_body")}
+          action={
+            <PortalLink href={internalPath("account/projects")} style={buttons.quiet}>
+              {tr("forge.portal_projects.back_to_projects")}
+            </PortalLink>
+          }
+        />
+      </div>
+    );
+  }
+
+  const { project, milestones, tasks } = report;
+  const done = tasks.filter((task) => task.done).length;
+  const next = milestones.find((m) => m.status !== "completed");
+  const pending = (approvals ?? []).filter((a) => a.status === "pending");
+  const decided = (approvals ?? []).filter((a) => a.status !== "pending" && a.status !== "cancelled");
+
+  return (
+    <div data-testid="portal-project">
+      <BackLink href={internalPath("account/projects")} label={tr("forge.portal_projects.back_to_projects")} />
+      <PortalHeading
+        title={<span data-testid="work-project-name">{project.name}</span>}
+        lead={
+          next
+            ? next.dueDate
+              ? tr("forge.portal_projects.next_milestone_due", { name: next.name, date: formatDate(next.dueDate) })
+              : tr("forge.portal_projects.next_milestone", { name: next.name })
+            : milestones.length > 0
+              ? tr("forge.portal_projects.all_milestones_done")
+              : undefined
+        }
+        actions={<StatusText status={project.status} />}
+      />
+      {tasks.length > 0 ? (
+        <div style={{ marginTop: -8, marginBottom: 32 }}>
+          <PortalProgress
+            done={done}
+            total={tasks.length}
+            label={tr("forge.portal_projects.progress_label", { name: project.name })}
+          />
+          <p style={{ margin: "8px 0 0", fontSize: 13, color: t.muted }}>
+            {tr("forge.portal_projects.tasks_done", { done, total: tasks.length })}
+          </p>
+        </div>
+      ) : null}
+
+      {/* Only for a client who may decide. A view-only seat sees the same
+          request as "Awaiting approval" on the timeline below. */}
+      {pending.length > 0 && canApprove ? (
+        <section id="approvals" data-testid="portal-approvals" style={{ marginBottom: 40 }}>
+          <h2 style={{ margin: "0 0 12px", fontSize: 18, fontWeight: 600, fontFamily: t.headingFontFamily }}>
+            {tr("forge.portal_projects.awaiting_you")}
+          </h2>
+          {pending.map((request) => (
+            <ApprovalCard key={request.id} projectId={projectId} request={request} />
+          ))}
+        </section>
+      ) : null}
+
+      {milestones.length > 0 ? (
+        <PortalBlock title={tr("forge.portal_projects.milestones")}>
+          <MilestoneTimeline milestones={milestones} approvals={approvals ?? []} canApprove={canApprove} />
+        </PortalBlock>
+      ) : null}
+
+      <div style={{ marginTop: 40 }}>
+        <WorkReportBody
+          report={report}
+          sections={["tasks", "time"]}
+          taskHref={(taskId) => internalPath("account/projects/$projectId/tasks/$taskId", { projectId, taskId })}
+          onOpenTask={(taskId) =>
+            navigate(internalPath("account/projects/$projectId/tasks/$taskId", { projectId, taskId }))
+          }
+        />
+      </div>
+
+      <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 24 }}>
+        <WorkProjectDocuments projectId={projectId} />
+        <WorkProjectInvoices projectId={projectId} onOpenInvoice={(id) => navigate(internalPath("invoice/$invoiceId", { invoiceId: id }))} />
+      </div>
+
+      {decided.length > 0 ? (
+        <PortalBlock title={tr("forge.portal_projects.decisions")}>
+          <PortalList>
+            {decided.map((request) => (
+              <li
+                key={request.id}
+                data-testid="portal-approval-history"
+                className="fg:py-3"
+                style={{ borderBottom: `1px solid ${t.border}`, fontSize: 14 }}
+              >
+                <span style={{ fontWeight: 600 }}>{request.milestoneName}</span>{" "}
+                <span style={{ color: t.muted }}>
+                  {request.status === "approved"
+                    ? tr("forge.portal_projects.history_approved", {
+                        name: request.decidedByName ?? "",
+                        date: request.decidedAt ? formatDate(request.decidedAt) : "",
+                      })
+                    : tr("forge.portal_projects.history_changes", {
+                        name: request.decidedByName ?? "",
+                        date: request.decidedAt ? formatDate(request.decidedAt) : "",
+                      })}
+                </span>
+                {request.decisionComment ? (
+                  <p style={{ margin: "4px 0 0", color: t.muted }}>{request.decisionComment}</p>
+                ) : null}
+              </li>
+            ))}
+          </PortalList>
+        </PortalBlock>
+      ) : null}
+    </div>
+  );
+}
+
+function BackLink({ href, label }: { href: string; label: string }) {
+  const t = useThemeTokens();
+  return (
+    <PortalLink
+      href={href}
+      data-testid="portal-back"
+      className="fg:mb-4 fg:inline-flex fg:items-center fg:gap-1.5"
+      style={{ fontSize: 14, color: t.muted, textDecoration: "none" }}
+    >
+      <ArrowLeft size={14} aria-hidden /> {label}
+    </PortalLink>
+  );
+}
+
+/**
+ * A decision the creator has asked for.
+ *
+ * Approving is one click. Asking for changes opens a comment box, because a
+ * "no" without a reason is a round trip of email the portal exists to save.
+ */
+function ApprovalCard({ projectId, request }: { projectId: string; request: WorkApprovalRequest }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
+  const buttons = usePortalButtons();
+  const decide = useDecideApproval(projectId);
+  const [mode, setMode] = useState<"idle" | "changes">("idle");
+  const [comment, setComment] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (decision: "approve" | "request_changes") => {
+    setError(null);
+    try {
+      await decide.mutateAsync({ requestId: request.id, decision, comment: decision === "request_changes" ? comment.trim() : undefined });
+    } catch (err) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        tr("forge.portal_projects.decision_error");
+      setError(message);
+    }
+  };
+
+  return (
+    <div
+      data-testid="portal-approval-card"
+      style={{
+        borderLeft: `3px solid ${t.primary}`,
+        background: t.surface,
+        borderRadius: `0 ${t.cornerRadius}px ${t.cornerRadius}px 0`,
+        padding: "16px 20px",
+        marginBottom: 12,
+      }}
+    >
+      <p style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>
+        {tr("forge.portal_projects.review_milestone", { name: request.milestoneName })}
+      </p>
+      <p style={{ margin: "4px 0 0", fontSize: 14, color: t.muted }}>
+        {tr("forge.portal_projects.requested_on", { date: formatDate(request.requestedAt) })}
+      </p>
+      {request.note ? (
+        <blockquote style={{ margin: "12px 0 0", paddingLeft: 12, borderLeft: `2px solid ${t.border}`, fontSize: 15 }}>
+          {request.note}
+        </blockquote>
+      ) : null}
+
+      {mode === "changes" ? (
+        <div style={{ marginTop: 16 }}>
+          <label htmlFor={`changes-${request.id}`} style={{ display: "block", fontSize: 14, fontWeight: 600, marginBottom: 6 }}>
+            {tr("forge.portal_projects.changes_label")}
+          </label>
+          <textarea
+            id={`changes-${request.id}`}
+            data-testid="portal-approval-comment"
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            rows={4}
+            maxLength={4000}
+            style={{
+              width: "100%",
+              boxSizing: "border-box",
+              padding: "10px 12px",
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${t.border}`,
+              background: t.background,
+              color: t.text,
+              fontFamily: t.fontFamily,
+              fontSize: 15,
+            }}
+          />
+          <div className="fg:mt-3 fg:flex fg:flex-wrap fg:gap-2">
+            <button
+              type="button"
+              data-testid="portal-approval-send-changes"
+              style={{ ...buttons.primary, opacity: comment.trim() ? 1 : 0.5 }}
+              disabled={!comment.trim() || decide.isPending}
+              onClick={() => void submit("request_changes")}
+            >
+              {tr("forge.portal_projects.send_changes")}
+            </button>
+            <button type="button" style={buttons.quiet} onClick={() => setMode("idle")} disabled={decide.isPending}>
+              {tr("forge.portal_projects.cancel")}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="fg:mt-4 fg:flex fg:flex-wrap fg:gap-2">
+          <button
+            type="button"
+            data-testid="portal-approval-approve"
+            style={buttons.primary}
+            disabled={decide.isPending}
+            onClick={() => void submit("approve")}
+          >
+            <Check size={16} aria-hidden /> {tr("forge.portal_projects.approve")}
+          </button>
+          <button
+            type="button"
+            data-testid="portal-approval-request-changes"
+            style={buttons.quiet}
+            disabled={decide.isPending}
+            onClick={() => setMode("changes")}
+          >
+            {tr("forge.portal_projects.request_changes")}
+          </button>
+        </div>
+      )}
+      {error ? (
+        <p role="alert" style={{ margin: "10px 0 0", fontSize: 14, color: t.text, fontWeight: 600 }}>
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Milestones in order, joined by a line, because they are a sequence: the
+ * numbering and the rail say "this comes before that", which a list of cards
+ * does not.
+ */
+function MilestoneTimeline({
+  milestones,
+  approvals,
+  canApprove,
+}: {
+  milestones: WorkMilestone[];
+  approvals: WorkApprovalRequest[];
+  canApprove: boolean;
+}) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
+
+  const latestFor = (milestoneId: string) => approvals.find((a) => a.milestoneId === milestoneId && a.status !== "cancelled");
+
+  return (
+    <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
+      {milestones.map((m, index) => {
+        const complete = m.status === "completed";
+        const approval = latestFor(m.id);
+        const last = index === milestones.length - 1;
+        return (
+          <li key={m.id} data-testid="portal-milestone" className="fg:flex fg:gap-4">
+            <div className="fg:flex fg:flex-col fg:items-center" aria-hidden>
+              <span
+                style={{
+                  width: 26,
+                  height: 26,
+                  borderRadius: 13,
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 12,
+                  fontWeight: 700,
+                  background: complete ? t.primary : t.background,
+                  color: complete ? t.textPrimary : t.muted,
+                  border: `2px solid ${complete ? t.primary : t.border}`,
+                }}
+              >
+                {complete ? <Check size={14} /> : index + 1}
+              </span>
+              {!last ? <span style={{ flex: 1, width: 2, minHeight: 20, background: t.border }} /> : null}
+            </div>
+            <div className="fg:min-w-0 fg:flex-1" style={{ paddingBottom: last ? 0 : 20 }}>
+              <p style={{ margin: "2px 0 0", fontWeight: 600, color: complete ? t.muted : t.text }}>{m.name}</p>
+              <p className="fg:flex fg:flex-wrap fg:gap-x-3" style={{ margin: "2px 0 0", fontSize: 13, color: t.muted }}>
+                {m.dueDate ? <span>{tr("forge.portal_projects.due_on", { date: formatDate(m.dueDate) })}</span> : null}
+                {approval?.status === "pending" ? (
+                  <span>
+                    {canApprove
+                      ? tr("forge.portal_projects.awaiting_approval")
+                      : tr("forge.portal_projects.awaiting_approval_other")}
+                  </span>
+                ) : null}
+                {approval?.status === "approved" ? <span>{tr("forge.portal_projects.approved")}</span> : null}
+                {approval?.status === "changes_requested" ? <span>{tr("forge.portal_projects.changes_requested")}</span> : null}
+              </p>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/** One task (`/i/account/projects/$projectId/tasks/$taskId`). */
+export function PortalTask({ projectId, taskId }: { projectId: string; taskId: string }) {
+  const { navigate } = usePortal();
+  return (
+    <WorkTaskDetail
+      projectId={projectId}
+      taskId={taskId}
+      backHref={projectHref(projectId)}
+      onBack={() => navigate(projectHref(projectId))}
+    />
+  );
+}