assessment-model/src/app/projects/page.tsx

import Link from "next/link";
import { FolderOpenIcon } from "@heroicons/react/24/outline";
import { requireProjectsUser } from "./guards";
import { CreateProjectDialog } from "./components/CreateProjectDialog";
import {
  listOrganisationOptions,
  listProjectTypes,
  listVisibleProjects,
} from "@/app/repositories/projects/projectsRepository";
import type { ProjectListItem } from "@/lib/projects/createProject";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/app/shadcn_components/ui/card";

export const metadata = {
  title: "Projects | Ara",
};

/** The wizard's shape, shown on the empty state so setup is not a surprise. */
const SETUP_STEPS = [
  {
    title: "Project details",
    body: "Name the project, choose the client organisation and the type of works.",
  },
  {
    title: "Workstreams and stages",
    body: "Pick the categories of work and the stage ladder each one follows.",
  },
  {
    title: "Documents and permissions",
    body: "Say what evidence each workstream needs, and who may upload it.",
  },
  {
    title: "Import and validate work orders",
    body: "Bring in the work orders and check them before they go live.",
  },
];

function formatDateRange(project: ProjectListItem): string | null {
  const format = (value: string) =>
    new Intl.DateTimeFormat("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
      timeZone: "UTC",
    }).format(new Date(`${value}T00:00:00Z`));

  if (project.startDate && project.endDate) {
    return `${format(project.startDate)} — ${format(project.endDate)}`;
  }
  if (project.startDate) return `From ${format(project.startDate)}`;
  if (project.endDate) return `Until ${format(project.endDate)}`;
  return null;
}

/**
 * Projects list — the entry point to Ara Projects (issue #409).
 *
 * A Server Component: the visibility rule is enforced before anything reaches
 * the browser, so a project the user may not see is never serialised to it.
 * Only the create-project modal is client-side, and it is handed its select
 * options as props rather than fetching them — the server already knows which
 * organisations this user may choose.
 */
export default async function ProjectsListPage() {
  const user = await requireProjectsUser();

  const [projects, organisations, projectTypes] = await Promise.all([
    listVisibleProjects(user),
    listOrganisationOptions(user),
    listProjectTypes(),
  ]);

  // A user with no organisation to create *for*, or an instance whose
  // reference data has not been seeded, cannot complete the form — so the CTA
  // is not offered. (The route handler refuses these cases regardless; this
  // only avoids presenting a dead end.)
  const canCreate = organisations.length > 0 && projectTypes.length > 0;

  return (
    <div className="max-w-4xl mx-auto px-6 py-10">
      <div className="mb-8 flex items-start justify-between gap-4">
        <div>
          <p className="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-1">
            Ara Projects
          </p>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">
            Projects
          </h1>
          <p className="text-sm text-gray-500 mt-1">
            Works programmes owned by your organisation.
          </p>
        </div>
        {projects.length > 0 && canCreate && (
          <CreateProjectDialog
            organisations={organisations}
            projectTypes={projectTypes}
          />
        )}
      </div>

      {projects.length === 0 ? (
        <div data-testid="projects-list-empty">
          <Card className="text-center py-12">
            <CardHeader>
              <div className="mx-auto w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center mb-2">
                <FolderOpenIcon className="h-7 w-7 text-gray-400" />
              </div>
              <CardTitle className="text-2xl">Welcome to Ara Projects</CardTitle>
              <CardDescription className="max-w-md mx-auto">
                You don&apos;t have any active projects yet. Start by creating a
                project to organise your workstreams, track progress and manage
                contractors.
              </CardDescription>
            </CardHeader>
            {canCreate && (
              <CardContent className="flex justify-center">
                <CreateProjectDialog
                  organisations={organisations}
                  projectTypes={projectTypes}
                />
              </CardContent>
            )}
          </Card>

          <div className="mt-10">
            <h2 className="text-sm font-semibold text-gray-700 mb-4">
              How setup works
            </h2>
            <ol className="grid gap-3 sm:grid-cols-2">
              {SETUP_STEPS.map((step, index) => (
                <li
                  key={step.title}
                  className="flex gap-3 rounded-xl border border-gray-200 p-4"
                >
                  <span className="shrink-0 w-6 h-6 rounded-full bg-gray-100 text-gray-600 text-xs font-semibold flex items-center justify-center">
                    {index + 1}
                  </span>
                  <div>
                    <p className="text-sm font-semibold text-gray-800">
                      {step.title}
                    </p>
                    <p className="text-sm text-gray-500 mt-0.5">{step.body}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      ) : (
        <ul className="space-y-3" data-testid="projects-list">
          {projects.map((project) => {
            const dates = formatDateRange(project);
            return (
              <li key={project.id}>
                <Link
                  href={`/projects/${project.id}`}
                  className="block rounded-xl border border-gray-200 p-5 hover:border-gray-300 hover:bg-gray-50 transition-colors"
                  data-testid="projects-list-item"
                >
                  <div className="flex items-baseline justify-between gap-4">
                    <h2 className="text-base font-semibold text-gray-900">
                      {project.name}
                    </h2>
                    <span className="shrink-0 text-xs font-medium text-gray-500 bg-gray-100 rounded-full px-2.5 py-1">
                      {project.projectTypeName}
                    </span>
                  </div>
                  {project.organisationName && (
                    <p className="text-sm text-gray-500 mt-1">
                      {project.organisationName}
                    </p>
                  )}
                  {project.description && (
                    <p className="text-sm text-gray-600 mt-2 line-clamp-2">
                      {project.description}
                    </p>
                  )}
                  {dates && (
                    <p className="text-xs text-gray-400 mt-3">{dates}</p>
                  )}
                </Link>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}