From 9a11a8f001f4e3f3f1c2ab66b995536692e2801d Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Fri, 5 Jun 2026 13:51:27 +0200
Subject: [PATCH] feat(plan): show project name instead of raw id in cell

---
 src/admin/components/PlanGrid.tsx       | 20 ++++++++++++--
 src/admin/components/PlanRangeChips.tsx | 35 ++++++++++++++++++-------
 src/admin/pages/PlanWork.tsx            |  7 ++++-
 src/admin/plan.css                      | 25 ++++++++++++++++++
 4 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/src/admin/components/PlanGrid.tsx b/src/admin/components/PlanGrid.tsx
index 46483a0..13aa9fe 100644
--- a/src/admin/components/PlanGrid.tsx
+++ b/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>
                 );
diff --git a/src/admin/components/PlanRangeChips.tsx b/src/admin/components/PlanRangeChips.tsx
index 16ec9d7..796b49d 100644
--- a/src/admin/components/PlanRangeChips.tsx
+++ b/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>
   );
 }
diff --git a/src/admin/pages/PlanWork.tsx b/src/admin/pages/PlanWork.tsx
index d7c4415..456af20 100644
--- a/src/admin/pages/PlanWork.tsx
+++ b/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}
diff --git a/src/admin/plan.css b/src/admin/plan.css
index d6dfd80..1db18a7 100644
--- a/src/admin/plan.css
+++ b/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;