feat(plan): drive category select and view label from DB categories

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/components/PlanCellModal.tsx

@@ -7,7 +7,7 @@ import ConfirmModal from "./ConfirmModal";
 import useReducedMotion from "../hooks/useReducedMotion";
 import {
   ResolvedCell,
-  PLAN_CATEGORIES,
+  PlanCategory,
   planCategoryLabel,
   cellProjectLabel,
 } from "../lib/queries/plan";
@@ -61,6 +61,7 @@ interface Props {
   open: boolean;
   mode: PlanCellModalMode;
   projects: Project[];
+  categories: PlanCategory[];
   onClose: () => void;
   onSaveEntry: (body: any) => Promise<void>;
   onUpdateEntry: (id: number, body: any) => Promise<void>;
@@ -112,6 +113,7 @@ function EditForm(props: Props) {
   }
 
   const isOverride = mode.kind === "edit-override";
+  const activeCategories = props.categories.filter((c) => c.is_active);
 
   const initial = (() => {
     if (mode.kind === "create") {
@@ -292,8 +294,8 @@ function EditForm(props: Props) {
             value={category}
             onChange={(e) => setCategory(e.target.value)}
           >
-            {PLAN_CATEGORIES.map((c) => (
-              <option key={c.value} value={c.value}>
+            {activeCategories.map((c) => (
+              <option key={c.key} value={c.key}>
                 {c.label}
               </option>
             ))}
@@ -419,7 +421,7 @@ function DayInRangeModal(
 }
 
 function ViewModal(props: Props) {
-  const { mode, onClose, projects } = props;
+  const { mode, onClose, projects, categories } = props;
   if (mode.kind !== "view") return null;
   const c = mode.cell;
   // Prefer the server-embedded project label; fall back to the projects-list
@@ -440,7 +442,11 @@ function ViewModal(props: Props) {
         <strong>Datum:</strong> {formatDate(c.shift_date)}
       </p>
       <p>
-        <strong>Kategorie:</strong> {planCategoryLabel(c.category)}
+        <strong>Kategorie:</strong>{" "}
+        {planCategoryLabel(
+          c.category,
+          Object.fromEntries(categories.map((x) => [x.key, x])),
+        )}
       </p>
       <p>
         <strong>Projekt:</strong> {projectLabel || "—"}