projects

client/src/modules/projects/ProjectDetailPage.tsx

@@ -0,0 +1,107 @@
+import { permissions } from "@mrp/shared";
+import type { ProjectDetailDto } from "@mrp/shared/dist/projects/types.js";
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+
+import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { ProjectPriorityBadge } from "./ProjectPriorityBadge";
+import { ProjectStatusBadge } from "./ProjectStatusBadge";
+
+export function ProjectDetailPage() {
+  const { token, user } = useAuth();
+  const { projectId } = useParams();
+  const [project, setProject] = useState<ProjectDetailDto | null>(null);
+  const [status, setStatus] = useState("Loading project...");
+
+  const canManage = user?.permissions.includes(permissions.projectsWrite) ?? false;
+
+  useEffect(() => {
+    if (!token || !projectId) {
+      return;
+    }
+
+    api.getProject(token, projectId)
+      .then((nextProject) => {
+        setProject(nextProject);
+        setStatus("Project loaded.");
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load project.";
+        setStatus(message);
+      });
+  }, [projectId, token]);
+
+  if (!project) {
+    return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Project</p>
+            <h3 className="mt-2 text-xl font-bold text-text">{project.projectNumber}</h3>
+            <p className="mt-1 text-sm text-text">{project.name}</p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              <ProjectStatusBadge status={project.status} />
+              <ProjectPriorityBadge priority={project.priority} />
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <Link to="/projects" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Back to projects</Link>
+            {canManage ? <Link to={`/projects/${project.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">Edit project</Link> : null}
+          </div>
+        </div>
+      </div>
+      <section className="grid gap-3 xl:grid-cols-4">
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Customer</p><div className="mt-2 text-base font-bold text-text">{project.customerName}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Owner</p><div className="mt-2 text-base font-bold text-text">{project.ownerName || "Unassigned"}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Due Date</p><div className="mt-2 text-base font-bold text-text">{project.dueDate ? new Date(project.dueDate).toLocaleDateString() : "Not set"}</div></article>
+        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Created</p><div className="mt-2 text-base font-bold text-text">{new Date(project.createdAt).toLocaleDateString()}</div></article>
+      </section>
+      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Customer Linkage</p>
+          <dl className="mt-5 grid gap-3">
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account</dt><dd className="mt-1 text-sm text-text"><Link to={`/crm/customers/${project.customerId}`} className="hover:text-brand">{project.customerName}</Link></dd></div>
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt><dd className="mt-1 text-sm text-text">{project.customerEmail}</dd></div>
+            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Phone</dt><dd className="mt-1 text-sm text-text">{project.customerPhone}</dd></div>
+          </dl>
+        </article>
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Program Notes</p>
+          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{project.notes || "No project notes recorded."}</p>
+        </article>
+      </div>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Commercial + Delivery Links</p>
+        <div className="mt-5 grid gap-3 xl:grid-cols-3">
+          <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
+            <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Quote</div>
+            <div className="mt-2 font-semibold text-text">{project.salesQuoteNumber ? <Link to={`/sales/quotes/${project.salesQuoteId}`} className="hover:text-brand">{project.salesQuoteNumber}</Link> : "Not linked"}</div>
+          </div>
+          <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
+            <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Sales Order</div>
+            <div className="mt-2 font-semibold text-text">{project.salesOrderNumber ? <Link to={`/sales/orders/${project.salesOrderId}`} className="hover:text-brand">{project.salesOrderNumber}</Link> : "Not linked"}</div>
+          </div>
+          <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
+            <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Shipment</div>
+            <div className="mt-2 font-semibold text-text">{project.shipmentNumber ? <Link to={`/shipping/shipments/${project.shipmentId}`} className="hover:text-brand">{project.shipmentNumber}</Link> : "Not linked"}</div>
+          </div>
+        </div>
+      </section>
+      <FileAttachmentsPanel
+        ownerType="PROJECT"
+        ownerId={project.id}
+        eyebrow="Project Documents"
+        title="Program file hub"
+        description="Store drawings, revision references, correspondence, and support files directly on the project record."
+        emptyMessage="No project files have been uploaded yet."
+      />
+      <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm text-muted">{status}</div>
+    </section>
+  );
+}

client/src/modules/projects/ProjectFormPage.tsx

@@ -0,0 +1,198 @@
+import type {
+  ProjectCustomerOptionDto,
+  ProjectDocumentOptionDto,
+  ProjectInput,
+  ProjectOwnerOptionDto,
+  ProjectShipmentOptionDto,
+} from "@mrp/shared/dist/projects/types.js";
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { emptyProjectInput, projectPriorityOptions, projectStatusOptions } from "./config";
+
+export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
+  const { token, user } = useAuth();
+  const navigate = useNavigate();
+  const { projectId } = useParams();
+  const [form, setForm] = useState<ProjectInput>(() => ({ ...emptyProjectInput, ownerId: user?.id ?? null }));
+  const [customerOptions, setCustomerOptions] = useState<ProjectCustomerOptionDto[]>([]);
+  const [ownerOptions, setOwnerOptions] = useState<ProjectOwnerOptionDto[]>([]);
+  const [quoteOptions, setQuoteOptions] = useState<ProjectDocumentOptionDto[]>([]);
+  const [orderOptions, setOrderOptions] = useState<ProjectDocumentOptionDto[]>([]);
+  const [shipmentOptions, setShipmentOptions] = useState<ProjectShipmentOptionDto[]>([]);
+  const [status, setStatus] = useState(mode === "create" ? "Create a new project." : "Loading project...");
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    api.getProjectCustomerOptions(token).then(setCustomerOptions).catch(() => setCustomerOptions([]));
+    api.getProjectOwnerOptions(token).then(setOwnerOptions).catch(() => setOwnerOptions([]));
+  }, [token]);
+
+  useEffect(() => {
+    if (!token || !form.customerId) {
+      setQuoteOptions([]);
+      setOrderOptions([]);
+      setShipmentOptions([]);
+      return;
+    }
+
+    api.getProjectQuoteOptions(token, form.customerId).then(setQuoteOptions).catch(() => setQuoteOptions([]));
+    api.getProjectOrderOptions(token, form.customerId).then(setOrderOptions).catch(() => setOrderOptions([]));
+    api.getProjectShipmentOptions(token, form.customerId).then(setShipmentOptions).catch(() => setShipmentOptions([]));
+  }, [form.customerId, token]);
+
+  useEffect(() => {
+    if (!token || mode !== "edit" || !projectId) {
+      return;
+    }
+
+    api.getProject(token, projectId)
+      .then((project) => {
+        setForm({
+          name: project.name,
+          status: project.status,
+          priority: project.priority,
+          customerId: project.customerId,
+          salesQuoteId: project.salesQuoteId,
+          salesOrderId: project.salesOrderId,
+          shipmentId: project.shipmentId,
+          ownerId: project.ownerId,
+          dueDate: project.dueDate,
+          notes: project.notes,
+        });
+        setStatus("Project loaded.");
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load project.";
+        setStatus(message);
+      });
+  }, [mode, projectId, token]);
+
+  function updateField<Key extends keyof ProjectInput>(key: Key, value: ProjectInput[Key]) {
+    setForm((current: ProjectInput) => ({
+      ...current,
+      [key]: value,
+      ...(key === "customerId"
+        ? {
+            salesQuoteId: null,
+            salesOrderId: null,
+            shipmentId: null,
+          }
+        : {}),
+    }));
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token) {
+      return;
+    }
+
+    setIsSaving(true);
+    setStatus("Saving project...");
+    try {
+      const saved = mode === "create" ? await api.createProject(token, form) : await api.updateProject(token, projectId ?? "", form);
+      navigate(`/projects/${saved.id}`);
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to save project.";
+      setStatus(message);
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <form className="space-y-6" onSubmit={handleSubmit}>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Projects Editor</p>
+            <h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? "New Project" : "Edit Project"}</h3>
+            <p className="mt-2 max-w-2xl text-sm text-muted">Create a customer-linked program record that can anchor commercial documents, delivery work, and project files.</p>
+          </div>
+          <Link to={mode === "create" ? "/projects" : `/projects/${projectId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+            Cancel
+          </Link>
+        </div>
+      </section>
+      <section className="space-y-4 rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="grid gap-3 xl:grid-cols-2">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Project name</span>
+            <input value={form.name} onChange={(event) => updateField("name", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Customer</span>
+            <select value={form.customerId} onChange={(event) => updateField("customerId", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">Select customer</option>
+              {customerOptions.map((customer) => <option key={customer.id} value={customer.id}>{customer.name}</option>)}
+            </select>
+          </label>
+        </div>
+        <div className="grid gap-3 xl:grid-cols-4">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Status</span>
+            <select value={form.status} onChange={(event) => updateField("status", event.target.value as ProjectInput["status"])} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              {projectStatusOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Priority</span>
+            <select value={form.priority} onChange={(event) => updateField("priority", event.target.value as ProjectInput["priority"])} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              {projectPriorityOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Owner</span>
+            <select value={form.ownerId ?? ""} onChange={(event) => updateField("ownerId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">Unassigned</option>
+              {ownerOptions.map((owner) => <option key={owner.id} value={owner.id}>{owner.fullName}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Due date</span>
+            <input type="date" value={form.dueDate ? form.dueDate.slice(0, 10) : ""} onChange={(event) => updateField("dueDate", event.target.value ? new Date(event.target.value).toISOString() : null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+          </label>
+        </div>
+        <div className="grid gap-3 xl:grid-cols-3">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Quote</span>
+            <select value={form.salesQuoteId ?? ""} onChange={(event) => updateField("salesQuoteId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">No linked quote</option>
+              {quoteOptions.map((quote) => <option key={quote.id} value={quote.id}>{quote.documentNumber}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Sales order</span>
+            <select value={form.salesOrderId ?? ""} onChange={(event) => updateField("salesOrderId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">No linked sales order</option>
+              {orderOptions.map((order) => <option key={order.id} value={order.id}>{order.documentNumber}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Shipment</span>
+            <select value={form.shipmentId ?? ""} onChange={(event) => updateField("shipmentId", event.target.value || null)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              <option value="">No linked shipment</option>
+              {shipmentOptions.map((shipment) => <option key={shipment.id} value={shipment.id}>{shipment.shipmentNumber}</option>)}
+            </select>
+          </label>
+        </div>
+        <label className="block">
+          <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
+          <textarea value={form.notes} onChange={(event) => updateField("notes", event.target.value)} rows={5} className="w-full rounded-3xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+        </label>
+        <div className="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
+          <span className="min-w-0 text-sm text-muted">{status}</span>
+          <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
+            {isSaving ? "Saving..." : mode === "create" ? "Create project" : "Save changes"}
+          </button>
+        </div>
+      </section>
+    </form>
+  );
+}

client/src/modules/projects/ProjectListPage.tsx

@@ -0,0 +1,116 @@
+import { permissions } from "@mrp/shared";
+import type { ProjectPriority, ProjectStatus, ProjectSummaryDto } from "@mrp/shared/dist/projects/types.js";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { projectPriorityFilters, projectStatusFilters } from "./config";
+import { ProjectPriorityBadge } from "./ProjectPriorityBadge";
+import { ProjectStatusBadge } from "./ProjectStatusBadge";
+
+export function ProjectListPage() {
+  const { token, user } = useAuth();
+  const [projects, setProjects] = useState<ProjectSummaryDto[]>([]);
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"ALL" | ProjectStatus>("ALL");
+  const [priorityFilter, setPriorityFilter] = useState<"ALL" | ProjectPriority>("ALL");
+  const [status, setStatus] = useState("Load projects, linked customer work, and program ownership.");
+
+  const canManage = user?.permissions.includes(permissions.projectsWrite) ?? false;
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    setStatus("Loading projects...");
+    api
+      .getProjects(token, {
+        q: query || undefined,
+        status: statusFilter === "ALL" ? undefined : statusFilter,
+        priority: priorityFilter === "ALL" ? undefined : priorityFilter,
+      })
+      .then((nextProjects) => {
+        setProjects(nextProjects);
+        setStatus(nextProjects.length === 0 ? "No projects matched the current filters." : `${nextProjects.length} project(s) loaded.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load projects.";
+        setStatus(message);
+      });
+  }, [priorityFilter, query, statusFilter, token]);
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Projects</p>
+            <h3 className="mt-2 text-xl font-bold text-text">Program records</h3>
+            <p className="mt-2 max-w-3xl text-sm text-muted">Track long-running customer programs across commercial commitments, shipment deliverables, ownership, and due dates.</p>
+          </div>
+          {canManage ? (
+            <Link to="/projects/new" className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
+              New project
+            </Link>
+          ) : null}
+        </div>
+      </div>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <div className="grid gap-3 xl:grid-cols-[minmax(0,1.2fr)_0.45fr_0.45fr]">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Search</span>
+            <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Project number, name, customer" className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Status</span>
+            <select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as "ALL" | ProjectStatus)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              {projectStatusFilters.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Priority</span>
+            <select value={priorityFilter} onChange={(event) => setPriorityFilter(event.target.value as "ALL" | ProjectPriority)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
+              {projectPriorityFilters.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+            </select>
+          </label>
+        </div>
+        <div className="mt-5 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-muted">{status}</div>
+        {projects.length === 0 ? (
+          <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No projects are available for the current filters.</div>
+        ) : (
+          <div className="mt-5 overflow-hidden rounded-2xl border border-line/70">
+            <table className="min-w-full divide-y divide-line/70 text-sm">
+              <thead className="bg-page/80 text-left text-muted">
+                <tr>
+                  <th className="px-2 py-2">Project</th>
+                  <th className="px-2 py-2">Customer</th>
+                  <th className="px-2 py-2">Owner</th>
+                  <th className="px-2 py-2">Status</th>
+                  <th className="px-2 py-2">Priority</th>
+                  <th className="px-2 py-2">Due</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-line/70 bg-surface">
+                {projects.map((project) => (
+                  <tr key={project.id}>
+                    <td className="px-2 py-2">
+                      <Link to={`/projects/${project.id}`} className="font-semibold text-text hover:text-brand">{project.projectNumber}</Link>
+                      <div className="mt-1 text-xs text-muted">{project.name}</div>
+                    </td>
+                    <td className="px-2 py-2 text-muted">{project.customerName}</td>
+                    <td className="px-2 py-2 text-muted">{project.ownerName || "Unassigned"}</td>
+                    <td className="px-2 py-2"><ProjectStatusBadge status={project.status} /></td>
+                    <td className="px-2 py-2"><ProjectPriorityBadge priority={project.priority} /></td>
+                    <td className="px-2 py-2 text-muted">{project.dueDate ? new Date(project.dueDate).toLocaleDateString() : "No due date"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </section>
+  );
+}

client/src/modules/projects/ProjectPriorityBadge.tsx

@@ -0,0 +1,7 @@
+import type { ProjectPriority } from "@mrp/shared/dist/projects/types.js";
+
+import { projectPriorityPalette } from "./config";
+
+export function ProjectPriorityBadge({ priority }: { priority: ProjectPriority }) {
+  return <span className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em] ${projectPriorityPalette[priority]}`}>{priority}</span>;
+}

client/src/modules/projects/ProjectStatusBadge.tsx

@@ -0,0 +1,7 @@
+import type { ProjectStatus } from "@mrp/shared/dist/projects/types.js";
+
+import { projectStatusPalette } from "./config";
+
+export function ProjectStatusBadge({ status }: { status: ProjectStatus }) {
+  return <span className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em] ${projectStatusPalette[status]}`}>{status.replace("_", " ")}</span>;
+}

client/src/modules/projects/ProjectsPage.tsx

@@ -0,0 +1,5 @@
+import { ProjectListPage } from "./ProjectListPage";
+
+export function ProjectsPage() {
+  return <ProjectListPage />;
+}

client/src/modules/projects/config.ts

@@ -0,0 +1,54 @@
+import type { ProjectInput, ProjectPriority, ProjectStatus } from "@mrp/shared/dist/projects/types.js";
+
+export const projectStatusOptions: Array<{ value: ProjectStatus; label: string }> = [
+  { value: "PLANNED", label: "Planned" },
+  { value: "ACTIVE", label: "Active" },
+  { value: "ON_HOLD", label: "On Hold" },
+  { value: "AT_RISK", label: "At Risk" },
+  { value: "COMPLETE", label: "Complete" },
+];
+
+export const projectPriorityOptions: Array<{ value: ProjectPriority; label: string }> = [
+  { value: "LOW", label: "Low" },
+  { value: "MEDIUM", label: "Medium" },
+  { value: "HIGH", label: "High" },
+  { value: "CRITICAL", label: "Critical" },
+];
+
+export const projectStatusFilters: Array<{ value: "ALL" | ProjectStatus; label: string }> = [
+  { value: "ALL", label: "All statuses" },
+  ...projectStatusOptions,
+];
+
+export const projectPriorityFilters: Array<{ value: "ALL" | ProjectPriority; label: string }> = [
+  { value: "ALL", label: "All priorities" },
+  ...projectPriorityOptions,
+];
+
+export const projectStatusPalette: Record<ProjectStatus, string> = {
+  PLANNED: "border border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300",
+  ACTIVE: "border border-emerald-400/30 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+  ON_HOLD: "border border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300",
+  AT_RISK: "border border-rose-400/30 bg-rose-500/12 text-rose-700 dark:text-rose-300",
+  COMPLETE: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
+};
+
+export const projectPriorityPalette: Record<ProjectPriority, string> = {
+  LOW: "border border-slate-400/30 bg-slate-500/12 text-slate-700 dark:text-slate-300",
+  MEDIUM: "border border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300",
+  HIGH: "border border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300",
+  CRITICAL: "border border-rose-400/30 bg-rose-500/12 text-rose-700 dark:text-rose-300",
+};
+
+export const emptyProjectInput: ProjectInput = {
+  name: "",
+  status: "PLANNED",
+  priority: "MEDIUM",
+  customerId: "",
+  salesQuoteId: null,
+  salesOrderId: null,
+  shipmentId: null,
+  ownerId: null,
+  dueDate: null,
+  notes: "",
+};