nexus/ui/src/pages/Projects.tsx

// [nexus] Phase 11 — Projects list page (hero-stat cards).
//
// Replaces the old Paperclip EntityRow table with the spec §7.1
// hero-stat card grid. Cards stack full-width on <1024px and 2-up on
// >=1024px. A forest-green "+ NEW PROJECT" CTA sits top-right. When
// the project list is empty we render the 96px "NO PROJECTS YET"
// empty state canvas.
//
// Data gaps (Phase 11): the shared Project type has no
// milestoneProgress, nextGate, costBurned, lastActivity, or per-
// project agent counts. Each card renders "—" placeholders where
// data is missing. See the Phase 11 report for the full gap list.
import { useEffect, useMemo } from "react";
import { VOCAB } from "@paperclipai/branding";
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "@/lib/router";
import { projectsApi } from "../api/projects";
import { useCompany } from "../context/CompanyContext";
import { useDialog } from "../context/DialogContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys";
import { PageSkeleton } from "../components/PageSkeleton";
import { EmptyState } from "../components/EmptyState";
import { Hexagon } from "lucide-react";
import { projectUrl } from "../lib/utils";
import { cn } from "@/lib/utils";
import { ProjectCard, type ProjectCardStatus } from "../components/projects/ProjectCard";

function deriveStatus(status: string): ProjectCardStatus {
  // Waiting > working > idle priority. For Phase 11 we only have the
  // coarse ProjectStatus enum to work with; the finer-grained "has
  // pending gate" / "has working agent" checks are data gaps.
  if (status === "paused" || status === "awaiting_input") return "waiting";
  if (status === "active" || status === "running") return "working";
  return "idle";
}

export function Projects() {
  const { selectedCompanyId } = useCompany();
  const { openNewProject } = useDialog();
  const { setBreadcrumbs } = useBreadcrumbs();
  const navigate = useNavigate();

  useEffect(() => {
    setBreadcrumbs([{ label: "Projects" }]);
  }, [setBreadcrumbs]);

  const { data: allProjects, isLoading, error } = useQuery({
    queryKey: queryKeys.projects.list(selectedCompanyId!),
    queryFn: () => projectsApi.list(selectedCompanyId!),
    enabled: !!selectedCompanyId,
  });

  const projects = useMemo(
    () => (allProjects ?? []).filter((p) => !p.archivedAt),
    [allProjects],
  );

  if (!selectedCompanyId) {
    return (
      <EmptyState
        icon={Hexagon}
        message={`Select a ${VOCAB.company.toLowerCase()} to view projects.`}
      />
    );
  }

  if (isLoading) {
    return <PageSkeleton variant="list" />;
  }

  // Empty state — full-canvas 96px volt hero.
  if (projects.length === 0) {
    return (
      <div
        data-testid="projects-empty-state"
        className="flex min-h-[60vh] flex-col items-start justify-center gap-8"
      >
        <h2
          data-testid="projects-empty-hero"
          className="font-black uppercase text-[96px] leading-none text-primary"
        >
          No projects yet
        </h2>
        <button
          type="button"
          onClick={openNewProject}
          data-testid="projects-empty-cta"
          className={cn(
            "inline-flex items-center gap-2 rounded-md px-5 py-3",
            "bg-[#166534] text-white",
            "text-[14px] font-semibold uppercase tracking-[0.1em]",
            "hover:bg-[#166534]/90 transition-colors",
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          )}
        >
          <span aria-hidden="true">⊕</span> Start your first project
        </button>
      </div>
    );
  }

  return (
    <div data-testid="projects-page" className="space-y-6">
      {/* Title row: section heading + new project CTA */}
      <div className="flex items-center justify-between">
        <h2 className="text-[14px] font-bold uppercase tracking-[0.14em] text-muted-foreground">
          Projects
        </h2>
        <button
          type="button"
          onClick={openNewProject}
          data-testid="projects-new-project-cta"
          className={cn(
            "inline-flex items-center gap-2 rounded-md px-4 py-2",
            "bg-[#166534] text-white",
            "text-[12px] font-semibold uppercase tracking-[0.12em]",
            "hover:bg-[#166534]/90 transition-colors",
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          )}
        >
          <span aria-hidden="true">⊕</span> New project
        </button>
      </div>

      {error && <p className="text-sm text-destructive">{error.message}</p>}

      {/* Card grid: 1 col <1024px, 2 cols >=1024px, 16px gap */}
      <div
        data-testid="projects-grid"
        className="grid grid-cols-1 gap-4 lg:grid-cols-2"
      >
        {projects.map((project) => {
          const slug = (project.urlKey ?? project.name).toUpperCase();
          const lastActivity = project.updatedAt
            ? (() => {
                const d = typeof project.updatedAt === "string"
                  ? new Date(project.updatedAt)
                  : project.updatedAt;
                const ms = Date.now() - d.getTime();
                const mins = Math.floor(ms / 60_000);
                if (mins < 1) return "just now";
                if (mins < 60) return `${mins}m ago`;
                const hrs = Math.floor(mins / 60);
                if (hrs < 24) return `${hrs}h ago`;
                const days = Math.floor(hrs / 24);
                return `${days}d ago`;
              })()
            : null;
          return (
            <ProjectCard
              key={project.id}
              slug={slug}
              status={deriveStatus(project.status)}
              // Data gap: no milestoneProgress on the shared Project type
              // yet — ProjectCard renders "—%" when null.
              progress={null}
              phase={null}
              nextGateName={null}
              costBurnedCents={null}
              lastActivity={lastActivity}
              ariaLabel={`Open project ${slug}`}
              onClick={() => navigate(projectUrl(project))}
            />
          );
        })}
      </div>
    </div>
  );
}