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>
   );
 }

src/admin/pages/PlanWork.tsx

@@ -448,7 +448,12 @@ export default function PlanWork() {
         </div>
       )}
 
-      <PlanGrid data={grid} canEdit={canEdit} onCellClick={openCell} />
+      <PlanGrid
+        data={grid}
+        projects={projects}
+        canEdit={canEdit}
+        onCellClick={openCell}
+      />
 
       <PlanCellModal
         key={modalKey}

src/admin/plan.css

@@ -116,6 +116,31 @@
   line-height: 1.3;
 }
 
+.plan-chip-block {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: left;
+  width: 100%;
+}
+
+.plan-chip-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.plan-chip-project {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text, #1f2937);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
 .plan-toolbar {
   display: flex;
   gap: 12px;