Rollen Chunk 5: Genehmigungs-Status mit Eigen-UI

src/components/YearTable.tsx

@@ -107,20 +107,28 @@ export function YearTable({
   const selection = useDaySelection(onSelectDate, onRangeSelect);
 
   function renderCell(date: string) {
-    const request = vacationRequests.find(
+    const inRange = vacationRequests.filter(
       (item) => item.startDate <= date && date <= item.endDate,
     );
-    const vacation = request !== undefined;
+    const request =
+      inRange.find((item) => item.status === "bestätigt") ?? inRange[0];
+    const vacation =
+      request !== undefined && request.status === "bestätigt";
+    const requested =
+      request !== undefined && request.status === "beantragt";
     const sick = sickSet.has(date);
     const tooltip = sick
       ? `${date} (krank)`
-      : request && request.startDate !== request.endDate
-        ? `${date} (Urlaub ${shortGermanDate(request.startDate)}–${shortGermanDate(request.endDate)})`
-        : date;
+      : request && request.status === "beantragt"
+        ? `${date} (beantragt)`
+        : request && request.startDate !== request.endDate
+          ? `${date} (Urlaub ${shortGermanDate(request.startDate)}–${shortGermanDate(request.endDate)})`
+          : date;
     const classes = [
       "ycell",
       entries.has(date) ? "ycell-worked" : "",
       vacation && !sick ? "ycell-vacation" : "",
+      requested && !sick ? "ycell-requested" : "",
       sick ? "ycell-sick" : "",
       earnedDates.has(date) && !deductionDates.has(date)
         ? "ycell-overtime"