feat(plan): show project name instead of raw id in cell

src/admin/components/PlanGrid.tsx

@@ -1,9 +1,11 @@
 import { GridData, ResolvedCell } from "../lib/queries/plan";
+import type { Project } from "../lib/queries/projects";
 import PlanRangeChips from "./PlanRangeChips";
 
 interface Props {
   data: GridData | undefined;
   canEdit: boolean;
+  projects: Project[];
   onCellClick: (
     userId: number,
     date: string,
@@ -32,7 +34,12 @@ function isWeekend(dateStr: string): boolean {
   return day === 0 || day === 6;
 }
 
-export default function PlanGrid({ data, canEdit, onCellClick }: Props) {
+export default function PlanGrid({
+  data,
+  canEdit,
+  projects,
+  onCellClick,
+}: Props) {
   if (!data)
     return (
       <div className="admin-loading">
@@ -72,7 +79,16 @@ export default function PlanGrid({ data, canEdit, onCellClick }: Props) {
                       className={cls}
                       onClick={() => onCellClick(u.id, date, cell)}
                     >
-                      <PlanRangeChips cell={cell} readonly={!canEdit} />
+                      <PlanRangeChips
+                        cell={cell}
+                        project={
+                          cell?.project_id
+                            ? (projects.find((p) => p.id === cell.project_id) ??
+                              null)
+                            : null
+                        }
+                        readonly={!canEdit}
+                      />
                     </button>
                   </td>
                 );

src/admin/components/PlanRangeChips.tsx

@@ -1,7 +1,9 @@
 import { ResolvedCell } from "../lib/queries/plan";
+import type { Project } from "../lib/queries/projects";
 
 interface Props {
   cell: ResolvedCell | null;
+  project: Project | null;
   readonly?: boolean;
 }
 
@@ -15,19 +17,32 @@ const CATEGORY_LABELS: Record<string, string> = {
   other: "Jiné",
 };
 
-export default function PlanRangeChips({ cell, readonly }: Props) {
+export default function PlanRangeChips({ cell, project, readonly }: Props) {
+  void readonly;
   if (!cell) return null;
+  const projectLabel = project
+    ? project.project_number
+      ? `${project.project_number} — ${project.name}`
+      : project.name
+    : null;
+  const projectTitle = project
+    ? project.project_number
+      ? `${project.project_number} — ${project.name}`
+      : project.name
+    : undefined;
   return (
-    <div>
-      <span className={`plan-chip plan-chip--${cell.category}`}>
-        {CATEGORY_LABELS[cell.category] ?? cell.category}
-      </span>
-      {cell.project_id && (
-        <span style={{ marginLeft: 6, fontSize: 12, fontWeight: 600 }}>
-          {`#${cell.project_id}`}
+    <div className="plan-chip-block">
+      <div className="plan-chip-line">
+        <span className={`plan-chip plan-chip--${cell.category}`}>
+          {CATEGORY_LABELS[cell.category] ?? cell.category}
         </span>
-      )}
-      {cell.note && <span className="plan-cell-note">{cell.note}</span>}
+        {projectLabel && (
+          <span className="plan-chip-project" title={projectTitle}>
+            {projectLabel}
+          </span>
+        )}
+      </div>
+      {cell.note && <div className="plan-cell-note">{cell.note}</div>}
     </div>
   );
 }