From f555d04073c068ebb8f72b69bf605fce59cb4413 Mon Sep 17 00:00:00 2001
From: DasProffi <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 30 Jun 2025 13:10:57 +0200
Subject: [PATCH] fix: fix translation of unscheduled in German

---
 api-services/types/tasks/task.ts           |  21 ++++
 tasks/components/KanbanColumn.tsx          |   2 +-
 tasks/components/PillLabel.tsx             | 139 +++++++++++++++++++++
 tasks/components/cards/PatientCard.tsx     |   2 +-
 tasks/components/cards/WardCard.tsx        |   2 +-
 tasks/components/pill/PillLabel.tsx        |  63 ----------
 tasks/components/pill/PillLabelBox.tsx     |  59 ---------
 tasks/components/pill/PillLabelsColumn.tsx |  23 ----
 8 files changed, 163 insertions(+), 148 deletions(-)
 create mode 100644 tasks/components/PillLabel.tsx
 delete mode 100644 tasks/components/pill/PillLabel.tsx
 delete mode 100644 tasks/components/pill/PillLabelBox.tsx
 delete mode 100644 tasks/components/pill/PillLabelsColumn.tsx

diff --git a/api-services/types/tasks/task.ts b/api-services/types/tasks/task.ts
index 750b1d78e..7bd4c71e6 100644
--- a/api-services/types/tasks/task.ts
+++ b/api-services/types/tasks/task.ts
@@ -1,3 +1,5 @@
+import type { Translation } from '@helpwave/hightide'
+
 export type SubTaskDTO = {
   id: string,
   name: string,
@@ -10,6 +12,25 @@ export type CreateSubTaskDTO = SubTaskDTO & {
 
 export type TaskStatus = 'done' | 'inProgress' | 'todo'
 
+export type TaskStatusTranslation = Record<TaskStatus, string>
+
+const translation: Translation<TaskStatusTranslation> = {
+  en: {
+    done: 'Done',
+    inProgress: 'In Progress',
+    todo: 'Todo',
+  },
+  de: {
+    done: 'Fertig',
+    inProgress: 'In Arbeit',
+    todo: 'Todo',
+  }
+}
+
+export const TaskStatusUtil = {
+  translation
+}
+
 export type TaskDTO = {
   id: string,
   name: string,
diff --git a/tasks/components/KanbanColumn.tsx b/tasks/components/KanbanColumn.tsx
index 369b0db24..020f156a8 100644
--- a/tasks/components/KanbanColumn.tsx
+++ b/tasks/components/KanbanColumn.tsx
@@ -8,7 +8,7 @@ import type { TaskDTO, TaskStatus } from '@helpwave/api-services/types/tasks/tas
 import { emptyTask } from '@helpwave/api-services/types/tasks/task'
 import { Sortable } from './dnd-kit/Sortable'
 import { TaskCard } from './cards/TaskCard'
-import { PillLabel } from './pill/PillLabel'
+import { PillLabel } from './PillLabel'
 
 type KanbanColumnsTranslation = {
   addTask: string,
diff --git a/tasks/components/PillLabel.tsx b/tasks/components/PillLabel.tsx
new file mode 100644
index 000000000..ee830ece0
--- /dev/null
+++ b/tasks/components/PillLabel.tsx
@@ -0,0 +1,139 @@
+import clsx from 'clsx'
+import type { Translation } from '@helpwave/hightide'
+import { type PropsForTranslation, useTranslation } from '@helpwave/hightide'
+import type { TaskStatus, TaskStatusTranslation } from '@helpwave/api-services/types/tasks/task'
+import { TaskStatusUtil } from '@helpwave/api-services/types/tasks/task'
+
+//
+// PillLabel
+//
+
+type PillLabelTranslation = TaskStatusTranslation
+
+const defaultPillLabelTranslation: Translation<TaskStatusTranslation> = TaskStatusUtil.translation
+
+const mapping = {
+  todo: {
+    mainClassName: 'bg-tag-red-background text-tag-red-text',
+    iconClassName: 'bg-tag-red-icon',
+  },
+  inProgress: {
+    mainClassName: 'bg-tag-yellow-background text-tag-yellow-text',
+    iconClassName: 'bg-tag-yellow-icon',
+  },
+  done: {
+    mainClassName: 'bg-tag-green-background text-tag-green-text',
+    iconClassName: 'bg-tag-green-icon',
+  },
+} as const
+
+export type PillLabelProps = {
+  count?: number,
+  taskStatus?: TaskStatus,
+}
+
+/**
+ * A Label for showing a TaskState's information like the state name and the count of Tasks in this state
+ */
+export const PillLabel = ({
+                            overwriteTranslation,
+                            count,
+                            taskStatus = 'todo'
+                          }: PropsForTranslation<PillLabelTranslation, PillLabelProps>) => {
+  const state = mapping[taskStatus]
+  const translation = useTranslation(defaultPillLabelTranslation, overwriteTranslation)
+
+  return (
+    <div className={clsx(`row items-center justify-between pl-2 pr-3 py-1 rounded-lg text-sm`, state.mainClassName)}>
+      <div className="row gap-x-2 items-center">
+        <div className={clsx(`rounded-full w-2 h-2`, state.iconClassName)}/>
+        <span>{translation[taskStatus]}</span>
+      </div>
+      {count ?? '-'}
+    </div>
+  )
+}
+
+//
+// PillLabelsColumn
+//
+
+export type PillLabelsColumnProps = {
+  unscheduledCount?: number,
+  inProgressCount?: number,
+  doneCount?: number,
+}
+
+/**
+ * A column showing the all TaskStates with a PillLabel for each
+ */
+export const PillLabelsColumn = ({ unscheduledCount, inProgressCount, doneCount }: PillLabelsColumnProps) => {
+  return (
+    <div className="col gap-y-2">
+      <PillLabel count={unscheduledCount} taskStatus="todo"/>
+      <PillLabel count={inProgressCount} taskStatus="inProgress"/>
+      <PillLabel count={doneCount} taskStatus="done"/>
+    </div>
+  )
+}
+
+//
+// PillLabelBox
+//
+
+export type PillLabelBoxProps = {
+  unscheduled: number,
+  inProgress: number,
+  done: number,
+}
+
+/**
+ * A Label for showing all TaskState information like the state name and the count of all Tasks in this state.
+ *
+ * For each state unscheduled, in progress and done there will be a number
+ */
+export const PillLabelBox = ({ unscheduled, inProgress, done }: PillLabelBoxProps) => {
+  const between = '0.25rem'
+  const height = '0.75rem'
+  const borderStyle = {
+    borderTopWidth: height,
+    borderBottomWidth: height,
+    borderLeftWidth: between,
+    borderRightWidth: between,
+  }
+  return (
+    <div className="row gap-x-0 h-6">
+      <div
+        className="row rounded-l-md pl-2 pr-1 items-center bg-tag-red-background text-tag-red-text"
+      >
+        <div className="rounded-full w-2 h-2 bg-tag-red-icon mr-1"/>
+        {unscheduled}
+      </div>
+      <div
+        className="w-0 h-0 border-solid border-r-transparent border-b-transparent border-tag-red-background"
+        style={borderStyle}
+      />
+      <div
+        className="w-0 h-0 border-tag-yellow-background border-solid border-l-transparent border-t-transparent"
+        style={borderStyle}
+      />
+      <div className="row px-1 items-center bg-tag-yellow-background text-tag-yellow-text">
+        <div className="rounded-full w-2 h-2 mr-1 bg-tag-yellow-icon"/>
+        {inProgress}
+      </div>
+      <div
+        className="w-0 h-0 border-tag-yellow-background border-solid border-r-transparent border-b-transparent"
+        style={borderStyle}
+      />
+      <div
+        className="w-0 h-0 border-tag-green-background border-solid border-l-transparent border-t-transparent"
+        style={borderStyle}
+      />
+      <div
+        className="row bg-tag-green-background rounded-r-md pl-1 pr-2 items-center text-tag-green-text">
+        <div className="rounded-full w-2 h-2 bg-tag-green-icon mr-1"/>
+        {done}
+      </div>
+    </div>
+  )
+}
diff --git a/tasks/components/cards/PatientCard.tsx b/tasks/components/cards/PatientCard.tsx
index c91cf1bf9..11d9f880f 100644
--- a/tasks/components/cards/PatientCard.tsx
+++ b/tasks/components/cards/PatientCard.tsx
@@ -1,7 +1,7 @@
 
 import type { Translation } from '@helpwave/hightide'
 import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
-import { PillLabelsColumn } from '../pill/PillLabelsColumn'
+import { PillLabelsColumn } from '../PillLabel'
 import { DragCard, type DragCardProps } from './DragCard'
 import clsx from 'clsx'
 
diff --git a/tasks/components/cards/WardCard.tsx b/tasks/components/cards/WardCard.tsx
index 300be2f19..7d9ee2ed2 100644
--- a/tasks/components/cards/WardCard.tsx
+++ b/tasks/components/cards/WardCard.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { Bed } from 'lucide-react'
 import type { WardOverviewDTO } from '@helpwave/api-services/types/tasks/wards'
-import { PillLabelBox } from '../pill/PillLabelBox'
+import { PillLabelBox } from '../PillLabel'
 import { EditCard, type EditCardProps } from './EditCard'
 
 export type WardCardProps = EditCardProps & {
diff --git a/tasks/components/pill/PillLabel.tsx b/tasks/components/pill/PillLabel.tsx
deleted file mode 100644
index b38f15d31..000000000
--- a/tasks/components/pill/PillLabel.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import clsx from 'clsx'
-import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
-import type { TaskStatus } from '@helpwave/api-services/types/tasks/task'
-
-type PillLabelTranslation = {
-  text: string,
-}
-
-
-const mapping = {
-  todo: {
-    mainClassName: 'bg-tag-red-background text-tag-red-text',
-    iconClassName: 'bg-tag-red-icon',
-    translation: {
-      en: { text: 'unscheduled' },
-      de: { text: 'Nicht Geplant' }
-    }
-  },
-  inProgress: {
-    mainClassName: 'bg-tag-yellow-background text-tag-yellow-text',
-    iconClassName: 'bg-tag-yellow-icon',
-    translation: {
-      en: { text: 'in progress' },
-      de: { text: 'In Arbeit' }
-    }
-  },
-  done: {
-    mainClassName: 'bg-tag-green-background text-tag-green-text',
-    iconClassName: 'bg-tag-green-icon',
-    translation: {
-      en: { text: 'done' },
-      de: { text: 'Fertig' }
-    }
-  },
-} as const
-
-export type PillLabelProps = {
-  count?: number,
-  taskStatus?: TaskStatus,
-}
-
-/**
- * A Label for showing a TaskState's information like the state name and the count of Tasks in this state
- */
-const PillLabel = ({
-  overwriteTranslation,
-  count,
-  taskStatus = 'todo'
-}: PropsForTranslation<PillLabelTranslation, PillLabelProps>) => {
-  const state = mapping[taskStatus]
-  const translation = useTranslation(state.translation, overwriteTranslation)
-  return (
-    <div className={clsx(`row items-center justify-between pl-2 pr-3 py-1 rounded-lg text-sm`, state.mainClassName)}>
-      <div className="row gap-x-2 items-center">
-        <div className={clsx(`rounded-full w-2 h-2`, state.iconClassName)}/>
-        <span>{translation.text}</span>
-      </div>
-      {count ?? '-'}
-    </div>
-  )
-}
-
-export { PillLabel }
diff --git a/tasks/components/pill/PillLabelBox.tsx b/tasks/components/pill/PillLabelBox.tsx
deleted file mode 100644
index bdaabb53a..000000000
--- a/tasks/components/pill/PillLabelBox.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-
-
-export type PillLabelBoxProps = {
-  unscheduled: number,
-  inProgress: number,
-  done: number,
-}
-
-/**
- * A Label for showing all TaskState information like the state name and the count of all Tasks in this state.
- *
- * For each state unscheduled, in progress and done there will be a number
- */
-const PillLabelBox = ({ unscheduled, inProgress, done }: PillLabelBoxProps) => {
-  const between = '3.2px'
-  const height = '12px' // equivalent to 1.5rem / 2 = 24px / 2 = h-6 / 2 of tailwind
-  const borderStyle = {
-    borderTopWidth: height,
-    borderBottomWidth: height,
-    borderLeftWidth: between,
-    borderRightWidth: between,
-  }
-  return (
-    <div className="row gap-x-0 h-6">
-      <div
-        className="row rounded-l-md pl-2 pr-1 items-center bg-tag-red-background text-tag-red-text">
-        <div className="rounded-full w-2 h-2 bg-tag-red-icon mr-1"/>
-        {unscheduled}
-      </div>
-      <div
-        className="w-0 h-0 border-solid border-r-transparent border-b-transparent border-tag-red-background"
-        style={borderStyle}
-      />
-      <div
-        className="w-0 h-0 border-tag-yellow-background border-solid border-l-transparent border-t-transparent"
-        style={borderStyle}
-      />
-      <div className="row px-1 items-center bg-tag-yellow-background text-tag-yellow-text">
-        <div className="rounded-full w-2 h-2 mr-1 bg-tag-yellow-icon"/>
-        {inProgress}
-      </div>
-      <div
-        className="w-0 h-0 border-tag-yellow-background border-solid border-r-transparent border-b-transparent"
-        style={borderStyle}
-      />
-      <div
-        className="w-0 h-0 border-tag-green-background border-solid border-l-transparent border-t-transparent"
-        style={borderStyle}
-      />
-      <div
-        className="row bg-tag-green-background rounded-r-md pl-1 pr-2 items-center text-tag-green-text">
-        <div className="rounded-full w-2 h-2 bg-tag-green-icon mr-1"/>
-        {done}
-      </div>
-    </div>
-  )
-}
-
-export { PillLabelBox }
diff --git a/tasks/components/pill/PillLabelsColumn.tsx b/tasks/components/pill/PillLabelsColumn.tsx
deleted file mode 100644
index 65ac2c006..000000000
--- a/tasks/components/pill/PillLabelsColumn.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-
-import { PillLabel } from './PillLabel'
-
-export type PillLabelsColumnProps = {
-  unscheduledCount?: number,
-  inProgressCount?: number,
-  doneCount?: number,
-}
-
-/**
- * A column showing the all TaskStates with a PillLabel for each
- */
-const PillLabelsColumn = ({ unscheduledCount, inProgressCount, doneCount }: PillLabelsColumnProps) => {
-  return (
-    <div className="col gap-y-2">
-      <PillLabel count={unscheduledCount} taskStatus="todo"/>
-      <PillLabel count={inProgressCount} taskStatus="inProgress"/>
-      <PillLabel count={doneCount} taskStatus="done"/>
-    </div>
-  )
-}
-
-export { PillLabelsColumn }