Zwischenstand

2026-03-21 22:13:19 +01:00
parent b009ac845f
commit 68b2cbb0ee
64 changed files with 739 additions and 596 deletions
--- a/frontend/components/ArchiveButton.vue
+++ b/frontend/components/ArchiveButton.vue
@@ -39,33 +39,35 @@ const emitConfirm = () => {
    Archivieren
  </UButton>
  <UModal v-model:open="showModal">
-    <UCard>
-      <template #header>
-        <span class="text-md font-bold">Archivieren bestätigen</span>
-      </template>
-      Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
+    <template #content>
+      <UCard>
+        <template #header>
+          <span class="text-md font-bold">Archivieren bestätigen</span>
+        </template>
+        Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?

-      <template #footer>
-        <div class="text-right">
-          <UButtonGroup>
-            <UButton
-                variant="outline"
-                @click="showModal = false"
-            >
-              Abbrechen
-            </UButton>
-            <UButton
-                @click="emitConfirm"
-                class="ml-2"
-                color="rose"
-            >
-              Archivieren
-            </UButton>
-          </UButtonGroup>
+        <template #footer>
+          <div class="text-right">
+            <UButtonGroup>
+              <UButton
+                  variant="outline"
+                  @click="showModal = false"
+              >
+                Abbrechen
+              </UButton>
+              <UButton
+                  @click="emitConfirm"
+                  class="ml-2"
+                  color="error"
+              >
+                Archivieren
+              </UButton>
+            </UButtonGroup>

-        </div>
-      </template>
-    </UCard>
+          </div>
+        </template>
+      </UCard>
+    </template>
  </UModal>
 </template>

--- a/frontend/components/BankAccountAssignInput.vue
+++ b/frontend/components/BankAccountAssignInput.vue
@@ -49,7 +49,7 @@ const assignByIban = async () => {

  const match = accounts.value.find((a) => normalizeIban(a.iban) === search)
  if (!match) {
-    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "rose" })
+    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "error" })
    return
  }

@@ -68,7 +68,7 @@ const removeAssigned = (id) => {

 const createAndAssign = async () => {
  if (!createPayload.value.iban || !createPayload.value.bic || !createPayload.value.bankName) {
-    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "rose" })
+    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "error" })
    return
  }

@@ -141,42 +141,44 @@ loadAccounts()
  </div>

  <UModal v-model:open="showCreate">
-    <UCard>
-      <template #header>Neue Bankverbindung erstellen</template>
-      <div class="space-y-3">
-        <UFormGroup label="IBAN">
-          <InputGroup>
-            <UInput
-                v-model="createPayload.iban"
-                @blur="resolveCreatePayloadFromIban"
-                @keydown.enter.prevent="resolveCreatePayloadFromIban"
-            />
-            <UButton
-                color="gray"
-                variant="outline"
-                :loading="resolvingIban"
-                @click="resolveCreatePayloadFromIban"
-            >
-              Ermitteln
-            </UButton>
-          </InputGroup>
-        </UFormGroup>
-        <UFormGroup label="BIC">
-          <UInput v-model="createPayload.bic" />
-        </UFormGroup>
-        <UFormGroup label="Bankinstitut">
-          <UInput v-model="createPayload.bankName" />
-        </UFormGroup>
-        <UFormGroup label="Beschreibung (optional)">
-          <UInput v-model="createPayload.description" />
-        </UFormGroup>
-      </div>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
-          <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
+    <template #content>
+      <UCard>
+        <template #header>Neue Bankverbindung erstellen</template>
+        <div class="space-y-3">
+          <UFormField label="IBAN">
+            <InputGroup>
+              <UInput
+                  v-model="createPayload.iban"
+                  @blur="resolveCreatePayloadFromIban"
+                  @keydown.enter.prevent="resolveCreatePayloadFromIban"
+              />
+              <UButton
+                  color="gray"
+                  variant="outline"
+                  :loading="resolvingIban"
+                  @click="resolveCreatePayloadFromIban"
+              >
+                Ermitteln
+              </UButton>
+            </InputGroup>
+          </UFormField>
+          <UFormField label="BIC">
+            <UInput v-model="createPayload.bic" />
+          </UFormField>
+          <UFormField label="Bankinstitut">
+            <UInput v-model="createPayload.bankName" />
+          </UFormField>
+          <UFormField label="Beschreibung (optional)">
+            <UInput v-model="createPayload.description" />
+          </UFormField>
        </div>
-      </template>
-    </UCard>
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
+            <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
  </UModal>
 </template>
--- a/frontend/components/ButtonWithConfirm.vue
+++ b/frontend/components/ButtonWithConfirm.vue
@@ -50,7 +50,7 @@ const emitConfirm = () => {
              <UButton
                  @click="emitConfirm"
                  class="ml-2"
-                  color="rose"
+                  color="error"
              >
                Archivieren
              </UButton>
--- a/frontend/components/Calculator.vue
+++ b/frontend/components/Calculator.vue
@@ -51,8 +51,8 @@
      <div class="grid grid-cols-4 gap-2">
        <UTooltip text="Brutto (+19%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(19)">+19%</UButton></UTooltip>
        <UTooltip text="Brutto (+7%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(7)">+7%</UButton></UTooltip>
-        <UTooltip text="Netto (-19%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
-        <UTooltip text="Netto (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
+        <UTooltip text="Netto (-19%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
+        <UTooltip text="Netto (-7%)"><UButton color="error" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>

        <UTooltip text="Löschen"><UButton color="gray" variant="ghost" block @click="clear">C</UButton></UTooltip>
        <UTooltip text="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip>
--- a/frontend/components/DocumentDisplayModal.vue
+++ b/frontend/components/DocumentDisplayModal.vue
@@ -187,7 +187,7 @@ const moveFile = async () => {
        <div class="w-2/3 p-5" v-if="!false">
          <UButtonGroup>
            <ArchiveButton
-                color="rose"
+                color="error"
                variant="outline"
                type="files"
                @confirmed="archiveDocument"
@@ -203,7 +203,7 @@ const moveFile = async () => {
            </UButton>
          </UButtonGroup>

-          <UDivider>Zuweisungen</UDivider>
+          <USeparator label="Zuweisungen"/>
          <table class="w-full">
            <tr v-if="props.documentData.project">
              <td>Projekt</td>
@@ -279,7 +279,7 @@ const moveFile = async () => {
            </tr>
          </table>

-          <UDivider class="my-3">Datei zuweisen</UDivider>
+          <USeparator class="my-3" label="Datei zuweisen"/>

          <UFormGroup
              label="Resource auswählen"
@@ -308,7 +308,7 @@ const moveFile = async () => {



-          <UDivider class="my-5">Datei verschieben</UDivider>
+          <USeparator class="my-5" label="Datei verschieben"/>

          <InputGroup class="w-full">
            <USelectMenu
@@ -325,7 +325,7 @@ const moveFile = async () => {
            >Verschieben</UButton>
          </InputGroup>

-          <UDivider class="my-5">Dateityp</UDivider>
+          <USeparator class="my-5" label="Dateityp"/>

          <InputGroup class="w-full">
            <USelectMenu
@@ -337,7 +337,7 @@ const moveFile = async () => {
                @change="updateDocument"
            />
          </InputGroup>
-          <UDivider class="my-5">Dokumentenbox</UDivider>
+          <USeparator class="my-5" label="Dokumentenbox" />

          <InputGroup class="w-full">
            <USelectMenu
--- a/frontend/components/EntityEdit.vue
+++ b/frontend/components/EntityEdit.vue
@@ -211,6 +211,22 @@ const contentChanged = (content, datapoint) => {
  }
 }

+const getSelectItems = (datapoint) => {
+  return datapoint.selectManualOptions || loadedOptions.value[datapoint.selectDataType] || []
+}
+
+const getSelectValueKey = (datapoint) => {
+  return datapoint.selectValueAttribute || 'id'
+}
+
+const getSelectLabelKey = (datapoint) => {
+  return datapoint.selectOptionAttribute || 'label'
+}
+
+const getSelectSearchInput = (datapoint) => {
+  return datapoint.selectSearchAttributes ? { placeholder: 'Suche...' } : false
+}
+

 const createItem = async () => {
  let ret = null
@@ -264,7 +280,7 @@ const updateItem = async () => {
    </template>
    <template #right>
      <ArchiveButton
-          color="rose"
+          color="error"
          v-if="platform !== 'mobile'"
          variant="outline"
          :type="type"
@@ -336,12 +352,12 @@ const updateItem = async () => {
            v-for="(columnName,index) in dataType.inputColumns"
            :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
        >
-          <UDivider>{{ columnName }}</UDivider>
+          <USeparator :label="columnName"/>

          <div
              v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
          >
-            <UFormGroup
+            <UFormField
                v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
                :label="datapoint.label"
            >
@@ -354,7 +370,7 @@ const updateItem = async () => {
              </template>
              <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
                <UInput
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-if="['text','number'].includes(datapoint.inputType)"
@@ -367,25 +383,25 @@ const updateItem = async () => {
                    <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
                  </template>
                </UInput>
-                <UToggle
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+                <USwitch
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'bool'"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />
                <USelectMenu
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'select'"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                    :option-attribute="datapoint.selectOptionAttribute"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                    :searchable="datapoint.selectSearchAttributes"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :items="getSelectItems(datapoint)"
+                    :label-key="getSelectLabelKey(datapoint)"
+                    :value-key="getSelectValueKey(datapoint)"
+                    :search-input="getSelectSearchInput(datapoint)"
+                    :filter-fields="datapoint.selectSearchAttributes"
                    :multiple="datapoint.selectMultiple"
                >
                  <template #empty>
@@ -393,7 +409,7 @@ const updateItem = async () => {
                  </template>
                </USelectMenu>
                <UTextarea
-                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'textarea'"
@@ -401,9 +417,9 @@ const updateItem = async () => {
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    rows="4"
                />
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                  <UButton
-                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                      variant="outline"
@@ -411,17 +427,17 @@ const updateItem = async () => {

                  />

-                  <template #panel="{ close }">
+                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    />
                  </template>
                </UPopover>
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                  <UButton
-                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                      variant="outline"
@@ -429,10 +445,10 @@ const updateItem = async () => {

                  />

-                  <template #panel="{ close }">
+                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                        mode="datetime"
                    />
@@ -460,7 +476,7 @@ const updateItem = async () => {
              <InputGroup class="w-full" v-else>
                <UInput
                    class="flex-auto"
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-if="['text','number'].includes(datapoint.inputType)"
                    v-model="item[datapoint.key]"
@@ -472,34 +488,33 @@ const updateItem = async () => {
                    {{ datapoint.inputTrailing }}
                  </template>
                </UInput>
-                <UToggle
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+                <USwitch
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'bool'"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />
                <USelectMenu
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'select'"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                    :option-attribute="datapoint.selectOptionAttribute"
-                    :value-attribute="datapoint.selectValueAttribute || 'id'"
-                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                    :searchable="datapoint.selectSearchAttributes"
-                    :search-attributes="datapoint.selectSearchAttributes"
+                    :items="getSelectItems(datapoint)"
+                    :label-key="getSelectLabelKey(datapoint)"
+                    :value-key="getSelectValueKey(datapoint)"
+                    :search-input="getSelectSearchInput(datapoint)"
+                    :filter-fields="datapoint.selectSearchAttributes"
                    :multiple="datapoint.selectMultiple"
-                    searchable-placeholder="Suche..."
                >
                  <template #empty>
                    Keine Optionen verfügbar
                  </template>
                </USelectMenu>
                <UTextarea
-                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'textarea'"
@@ -507,37 +522,36 @@ const updateItem = async () => {
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    rows="4"
                />
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                  <UButton
-                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                      variant="outline"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  />

-                  <template #panel="{ close }">
+                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                        v-model="item[datapoint.key]" @close="close"
+                        v-model="item[datapoint.key]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    />
                  </template>
                </UPopover>
-                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                  <UButton
-                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                      variant="outline"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  />

-                  <template #panel="{ close }">
+                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                        v-model="item[datapoint.key]"
-                        @close="close"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                        mode="datetime"
                    />
@@ -572,11 +586,11 @@ const updateItem = async () => {
                    icon="i-heroicons-x-mark"
                />
              </InputGroup>
-            </UFormGroup>
+            </UFormField>
          </div>
        </div>
      </div>
-      <UFormGroup
+      <UFormField
          v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
          :label="datapoint.label"
      >
@@ -589,7 +603,7 @@ const updateItem = async () => {
        </template>
        <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
          <UInput
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-if="['text','number'].includes(datapoint.inputType)"
@@ -602,25 +616,25 @@ const updateItem = async () => {
              <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
            </template>
          </UInput>
-          <UToggle
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+          <USwitch
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'bool'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <USelectMenu
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'select'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-              :option-attribute="datapoint.selectOptionAttribute"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-              :searchable="datapoint.selectSearchAttributes"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :items="getSelectItems(datapoint)"
+              :label-key="getSelectLabelKey(datapoint)"
+              :value-key="getSelectValueKey(datapoint)"
+              :search-input="getSelectSearchInput(datapoint)"
+              :filter-fields="datapoint.selectSearchAttributes"
              :multiple="datapoint.selectMultiple"
          >
            <template #empty>
@@ -628,7 +642,7 @@ const updateItem = async () => {
            </template>
          </USelectMenu>
          <UTextarea
-              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'textarea'"
@@ -636,9 +650,9 @@ const updateItem = async () => {
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              rows="4"
          />
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
-                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
@@ -646,17 +660,17 @@ const updateItem = async () => {

            />

-            <template #panel="{ close }">
+            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
            </template>
          </UPopover>
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
            <UButton
-                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                variant="outline"
@@ -664,10 +678,10 @@ const updateItem = async () => {

            />

-            <template #panel="{ close }">
+            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  mode="datetime"
              />
@@ -695,7 +709,7 @@ const updateItem = async () => {
        <InputGroup class="w-full" v-else>
          <UInput
              class="flex-auto"
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="item[datapoint.key]"
@@ -707,34 +721,33 @@ const updateItem = async () => {
              {{ datapoint.inputTrailing }}
            </template>
          </UInput>
-          <UToggle
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+          <USwitch
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'bool'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <USelectMenu
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'select'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-              :option-attribute="datapoint.selectOptionAttribute"
-              :value-attribute="datapoint.selectValueAttribute || 'id'"
-              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-              :searchable="datapoint.selectSearchAttributes"
-              :search-attributes="datapoint.selectSearchAttributes"
+              :items="getSelectItems(datapoint)"
+              :label-key="getSelectLabelKey(datapoint)"
+              :value-key="getSelectValueKey(datapoint)"
+              :search-input="getSelectSearchInput(datapoint)"
+              :filter-fields="datapoint.selectSearchAttributes"
              :multiple="datapoint.selectMultiple"
-              searchable-placeholder="Suche..."
          >
            <template #empty>
              Keine Optionen verfügbar
            </template>
          </USelectMenu>
          <UTextarea
-              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'textarea'"
@@ -742,37 +755,36 @@ const updateItem = async () => {
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              rows="4"
          />
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
-                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
            />

-            <template #panel="{ close }">
+            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                  v-model="item[datapoint.key]" @close="close"
+                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
            </template>
          </UPopover>
-          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
            <UButton
-                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
            />

-            <template #panel="{ close }">
+            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key]"
-                  @close="close"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  mode="datetime"
              />
@@ -807,7 +819,7 @@ const updateItem = async () => {
              icon="i-heroicons-x-mark"
          />
        </InputGroup>
-      </UFormGroup>
+      </UFormField>
    </UForm>
  </UDashboardPanelContent>
 </template>
--- a/frontend/components/EntityList.vue
+++ b/frontend/components/EntityList.vue
@@ -110,12 +110,6 @@ const filteredRows = computed(() => {
 </script>

 <template>
-  <FloatingActionButton
-   :label="`+ ${dataType.labelSingle}`"
-   variant="outline"
-   v-if="platform === 'mobile'"
-   @click="router.push(`/standardEntity/${type}/create`)"
-  />
  <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
    <template #toggle>
      <div v-if="platform === 'mobile'"></div>
@@ -138,7 +132,7 @@ const filteredRows = computed(() => {
      <UButton
        icon="i-heroicons-x-mark"
        variant="outline"
-        color="rose"
+        color="error"
        @click="clearSearchString()"
        v-if="searchString.length > 0"
      />
@@ -169,7 +163,7 @@ const filteredRows = computed(() => {
          :ui-menu="{ width: 'min-w-max' }"
          @change="tempStore.modifyColumns(type,selectedColumns)"
      >
-        <template #label>
+        <template>
          Spalten
        </template>
      </USelectMenu>
--- a/frontend/components/EntityShowSubCreatedDocuments.vue
+++ b/frontend/components/EntityShowSubCreatedDocuments.vue
@@ -248,7 +248,7 @@ const selectItem = (item) => {
      </template>
    </Toolbar>
    <UTable
-        :rows="props.item.createddocuments.filter(i => !i.archived)"
+        :data="props.item.createddocuments.filter(i => !i.archived)"
        :columns="normalizeTableColumns(columns)"
        class="w-full"
        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
--- a/frontend/components/EntityShowSubInformation.vue
+++ b/frontend/components/EntityShowSubInformation.vue
@@ -65,7 +65,7 @@ const renderDatapointValue = (datapoint) => {
    </template>
    <UAlert
        v-if="props.item.archived"
-        color="rose"
+        color="error"
        variant="outline"
        :title="`${dataType.labelSingle} archiviert`"
        icon="i-heroicons-archive-box"
--- a/frontend/components/EntityShowSubOwnAccountsStatements.vue
+++ b/frontend/components/EntityShowSubOwnAccountsStatements.vue
@@ -77,7 +77,7 @@ const renderedAllocations = computed(() => {
  <UCard class="mt-5">
    <UTable
        v-if="props.item.statementallocations"
-        :rows="renderedAllocations"
+        :data="renderedAllocations"
        :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
        @select="(i) => selectAllocation(i)"
        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
--- a/frontend/components/EntityShowSubTimes.vue
+++ b/frontend/components/EntityShowSubTimes.vue
@@ -68,7 +68,7 @@ const columns = [
    <UTable
        class="mt-3"
        :columns="normalizeTableColumns(columns)"
-        :rows="props.item.times"
+        :data="props.item.times"
        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
    >
      <template #state-data="{row}">
--- a/frontend/components/EntityTable.vue
+++ b/frontend/components/EntityTable.vue
@@ -58,77 +58,101 @@
  const dataType = dataStore.dataTypes[props.type]

  const selectedItem = ref(0)
-  const sort = ref({
-    column: dataType.sortColumn || "date",
-    direction: 'desc'
-  })
+  const sorting = ref([{
+    id: dataType.sortColumn || "date",
+    desc: true
+  }])
  const normalizedColumns = computed(() => normalizeTableColumns(props.columns))
+  const truncateValue = (value, maxLength) => {
+    if (value === null || value === undefined || value === '') {
+      return '\u00A0'
+    }
+
+    const stringValue = String(value)
+    if (!maxLength || stringValue.length <= maxLength) {
+      return stringValue
+    }
+
+    return `${stringValue.substring(0, maxLength)}...`
+  }
+  const handleSortChange = (value) => {
+    const nextSort = Array.isArray(value) ? value[0] : undefined
+
+    if (!nextSort?.id) {
+      return
+    }
+
+    emit('sort', {
+      sort_column: nextSort.id,
+      sort_direction: nextSort.desc ? 'desc' : 'asc'
+    })
+  }
+  const handleSelect = (row) => {
+    router.push(getShowRoute(props.type, row.original.id))
+  }

 </script>

 <template>
  <UTable
      :loading="props.loading"
-      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
      sort-mode="manual"
-      v-model:sort="sort"
-      @update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})"
+      v-model:sorting="sorting"
+      @update:sorting="handleSortChange"
      v-if="dataType && columns"
-      :rows="props.rows"
+      :data="props.rows"
      :columns="normalizedColumns"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(getShowRoute(type, i.id))"
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+      :on-select="handleSelect"
+      :empty="`Keine ${dataType.label} anzuzeigen`"
  >
-<!--    <template
-        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
-        v-slot:[`${column.key}-header`]="{row}">
-      <span class="text-nowrap">{{column.label}}</span>
-    </template>-->
-    <template #name-data="{row}">
+    <template #name-cell="{ row }">
      <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">
-        <UTooltip
-            :text="row.name"
-        >
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold"
+      >
+        <UTooltip :text="row.original.name">
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
        </UTooltip>      </span>
-      <span v-else>
-        <UTooltip
-          :text="row.name"
-        >
-          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+      <span v-else class="block truncate">
+        <UTooltip :text="row.original.name">
+          <span class="block truncate">
+            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
+          </span>
        </UTooltip>
      </span>
    </template>
-    <template #fullName-data="{row}">
+    <template #fullName-cell="{ row }">
      <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.fullName}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
      </span>
-      <span v-else>
-        {{row.fullName}}
+      <span v-else class="block truncate">
+        {{ row.original.fullName }}
      </span>
    </template>
-    <template #licensePlate-data="{row}">
+    <template #licensePlate-cell="{ row }">
      <span
-          v-if="row.id === props.rows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
+          v-if="row.original.id === props.rows[selectedItem]?.id"
+          class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
      </span>
-      <span v-else>
-        {{row.licensePlate}}
+      <span v-else class="block truncate">
+        {{ row.original.licensePlate }}
      </span>
    </template>
    <template
        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
-        v-slot:[`${column.key}-data`]="{row}">
-      <component v-if="column.component" :is="column.component" :row="row"></component>
-      <span v-else-if="row[column.key]">
-        <UTooltip :text="row[column.key]">
-        {{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}}
-      </UTooltip>
+        v-slot:[`${column.key}-cell`]="{ row }">
+      <component v-if="column.component" :is="column.component" :row="row.original"></component>
+      <span v-else-if="row.original[column.key]" class="block truncate">
+        <UTooltip :text="String(row.original[column.key])">
+          <span class="block truncate">
+            {{ `${truncateValue(row.original[column.key], column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
+          </span>
+        </UTooltip>
      </span>

    </template>
--- a/frontend/components/EntityTableMobile.vue
+++ b/frontend/components/EntityTableMobile.vue
@@ -77,7 +77,7 @@

 <!--  <UTable
      v-if="dataType && columns"
-      :rows="props.rows"
+      :data="props.rows"
      :columns="props.columns"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
--- a/frontend/components/HelpSlideover.vue
+++ b/frontend/components/HelpSlideover.vue
@@ -132,7 +132,7 @@ const addContactRequest = async () => {
    toast.add({title: "Anfrage erfolgreich erstellt"})
    resetContactRequest()
  } else {
-    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
+    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"error"})
  }
  loadingContactRequest.value = false
 }
@@ -302,7 +302,7 @@ watch(isHelpSlideoverOpen, async (isOpen) => {
          </UButton>
          <UButton
            type="reset"
-            color="rose"
+            color="error"
            variant="outline"
            :disabled="!contactRequestData.title && !contactRequestData.message"
          >
--- a/frontend/components/HistoryDisplay.vue
+++ b/frontend/components/HistoryDisplay.vue
@@ -129,7 +129,7 @@ const renderText = (text) => {
        + Eintrag
      </UButton>
    </div>
-    <UDivider class="my-3"/>
+    <USeparator class="my-3"/>
  </div>

  <!-- ITEM LIST  -->
@@ -138,7 +138,7 @@ const renderText = (text) => {
        v-if="items.length > 0"
        v-for="(item,index) in items.slice().reverse()"
    >
-      <UDivider
+      <USeparator
          class="my-3"
          v-if="index !== 0"
      />
--- a/frontend/components/InboxList.vue
+++ b/frontend/components/InboxList.vue
@@ -86,7 +86,7 @@ defineShortcuts({
        </p>
      </div>

-      <UDivider />
+      <USeparator />
    </div>
  </UDashboardPanelContent>
 </template>
--- a/frontend/components/InboxMail.vue
+++ b/frontend/components/InboxMail.vue
@@ -34,7 +34,7 @@ defineProps({
      </p>
    </div>

-    <UDivider class="my-5" />
+    <USeparator class="my-5" />

    <div class="flex-1">
      <p class="text-lg">
@@ -42,7 +42,7 @@ defineProps({
      </p>
    </div>

-    <UDivider class="my-5" />
+    <USeparator class="my-5" />

    <form @submit.prevent>
      <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">
--- a/frontend/components/StaffTimeEntryModal.vue
+++ b/frontend/components/StaffTimeEntryModal.vue
@@ -116,7 +116,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
    emit('saved')
    isOpen.value = false
  } catch (error: any) {
-    toast.add({ title: 'Fehler', description: error.message, color: 'red' })
+    toast.add({ title: 'Fehler', description: error.message, color: 'error' })
  } finally {
    loading.value = false
  }
@@ -125,56 +125,62 @@ async function onSubmit(event: FormSubmitEvent<any>) {

 <template>
  <UModal v-model:open="isOpen">
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-        </div>
-      </template>
+    <template #content>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>

-      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+          <UFormField label="Typ" name="type">
+            <USelectMenu
+              v-model="state.type"
+              :items="types"
+              value-key="value"
+              label-key="label"
+            />
+          </UFormField>

-        <UFormGroup label="Typ" name="type">
-          <USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
-        </UFormGroup>
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Start Datum" name="start_date">
+              <div class="flex items-center gap-2">
+                <UInput type="date" v-model="state.start_date" class="flex-1" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
+              </div>
+            </UFormField>
+            <UFormField label="Start Zeit" name="start_time">
+              <UInput type="time" v-model="state.start_time" />
+            </UFormField>
+          </div>

-        <div class="grid grid-cols-2 gap-4">
-          <UFormGroup label="Start Datum" name="start_date">
-            <div class="flex items-center gap-2">
-              <UInput type="date" v-model="state.start_date" class="flex-1" />
-              <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
-            </div>
-          </UFormGroup>
-          <UFormGroup label="Start Zeit" name="start_time">
-            <UInput type="time" v-model="state.start_time" />
-          </UFormGroup>
-        </div>
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Ende Datum" name="end_date">
+              <div class="flex items-center gap-2">
+                <UInput type="date" v-model="state.end_date" class="flex-1" />
+                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
+              </div>
+            </UFormField>
+            <UFormField label="Ende Zeit" name="end_time">
+              <UInput type="time" v-model="state.end_time" />
+            </UFormField>
+          </div>
+          <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>

-        <div class="grid grid-cols-2 gap-4">
-          <UFormGroup label="Ende Datum" name="end_date">
-            <div class="flex items-center gap-2">
-              <UInput type="date" v-model="state.end_date" class="flex-1" />
-              <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
-            </div>
-          </UFormGroup>
-          <UFormGroup label="Ende Zeit" name="end_time">
-            <UInput type="time" v-model="state.end_time" />
-          </UFormGroup>
-        </div>
-        <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
+          <UFormField label="Beschreibung / Notiz" name="description">
+            <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
+          </UFormField>

-        <UFormGroup label="Beschreibung / Notiz" name="description">
-          <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
-        </UFormGroup>
-
-        <div class="flex justify-end gap-2 pt-4">
-          <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
-          <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
-        </div>
-      </UForm>
-    </UCard>
+          <div class="flex justify-end gap-2 pt-4">
+            <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
+            <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
+          </div>
+        </UForm>
+      </UCard>
+    </template>
  </UModal>
 </template>
--- a/frontend/components/Toolbar.vue
+++ b/frontend/components/Toolbar.vue
@@ -11,7 +11,7 @@
      <slot name="right"/>
    </InputGroup>
  </div>
-  <UDivider class="my-3"/>
+  <USeparator class="my-3"/>
 </template>

 <style scoped>
--- a/frontend/components/UDashboardPanelContent.vue
+++ b/frontend/components/UDashboardPanelContent.vue
@@ -0,0 +1,27 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  as: {
+    type: [String, Object],
+    default: 'div'
+  }
+})
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <component
+      :is="props.as"
+      v-bind="attrs"
+      :class="[
+        'min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5',
+        attrs.class
+      ]"
+  >
+    <slot />
+  </component>
+</template>
--- a/frontend/components/displayIncomeAndExpenditure.vue
+++ b/frontend/components/displayIncomeAndExpenditure.vue
@@ -243,26 +243,26 @@ loadData()
        <div class="flex flex-wrap items-center gap-2">
          <USelectMenu
            v-model="granularity"
-            :options="granularityOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="granularityOptions"
+            value-key="value"
+            label-key="label"
            class="w-28"
          />

          <USelectMenu
            v-model="selectedYear"
-            :options="yearOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="yearOptions"
+            value-key="value"
+            label-key="label"
            class="w-24"
          />

          <USelectMenu
            v-if="granularity === 'month'"
            v-model="selectedMonth"
-            :options="monthOptions"
-            value-attribute="value"
-            option-attribute="label"
+            :items="monthOptions"
+            value-key="value"
+            label-key="label"
            class="w-36"
          />
        </div>
@@ -288,26 +288,26 @@ loadData()
      <div class="flex flex-wrap items-center gap-2">
        <USelectMenu
          v-model="granularity"
-          :options="granularityOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="granularityOptions"
+          value-key="value"
+          label-key="label"
          class="w-28"
        />

        <USelectMenu
          v-model="selectedYear"
-          :options="yearOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="yearOptions"
+          value-key="value"
+          label-key="label"
          class="w-24"
        />

        <USelectMenu
          v-if="granularity === 'month'"
          v-model="selectedMonth"
-          :options="monthOptions"
-          value-attribute="value"
-          option-attribute="label"
+          :items="monthOptions"
+          value-key="value"
+          label-key="label"
          class="w-36"
        />
      </div>
--- a/frontend/components/displayOpenTasks.vue
+++ b/frontend/components/displayOpenTasks.vue
@@ -23,7 +23,7 @@ setupPage()
 <template>
  <UTable
      v-if="openTasks.length > 0"
-    :rows="openTasks"
+    :data="openTasks"
      :columns="normalizeTableColumns([{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}])"
      @select="(i) => router.push(`/tasks/show/${i.id}`)"
  />
--- a/frontend/components/displayRunningTime.vue
+++ b/frontend/components/displayRunningTime.vue
@@ -29,7 +29,7 @@ const startTime = async () => {
    await setupPage()
  } catch (error) {
    console.log(error)
-    toast.add({title: "Fehler beim starten der Projektzeit",color:"rose"})
+    toast.add({title: "Fehler beim starten der Projektzeit",color:"error"})
  }
 }

@@ -41,7 +41,7 @@ const stopStartedTime = async () => {
  } catch (error) {
    console.log(error)
    let errorId = await useError().logError(`${JSON.stringify(error)}`)
-    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"rose"})
+    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"error"})
  }
 }

--- a/frontend/components/displayRunningWorkingTime.vue
+++ b/frontend/components/displayRunningWorkingTime.vue
@@ -25,7 +25,7 @@ const startTime = async () => {
    await setupPage()
  } catch (error) {
    console.log(error)
-    toast.add({title: "Fehler beim starten der Zeit",color:"rose"})
+    toast.add({title: "Fehler beim starten der Zeit",color:"error"})
  }
 }

@@ -37,7 +37,7 @@ const stopStartedTime = async () => {
  } catch (error) {
    console.log(error)
    let errorId = await useError().logError(`${JSON.stringify(error)}`)
-    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"rose"})
+    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"error"})
  }
 }

--- a/frontend/components/materialComposing.vue
+++ b/frontend/components/materialComposing.vue
@@ -12,6 +12,10 @@ const props = defineProps({
 const products = ref([])
 const units = ref([])

+const productSearchInput = {
+  placeholder: 'Artikel suchen...'
+}
+
 const setup = async () => {
  products.value = await useEntities("products").select()
  units.value = await useEntities("units").selectSpecial()
@@ -80,16 +84,16 @@ const setRowData = (row) => {
      >
        <td>
          <USelectMenu
-              searchable
-              :search-attributes="['name']"
-            :options="products"
-            value-attribute="id"
-            option-attribute="name"
+            :items="products"
+            label-key="name"
+            value-key="id"
+            :search-input="productSearchInput"
+            :filter-fields="['name']"
            v-model="product.product"
-            :color="product.product ? 'primary' : 'rose'"
+            :color="product.product ? 'primary' : 'error'"
            @change="setRowData(product)"
          >
-            <template #label>
+            <template #default>
              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
            </template>
          </USelectMenu>
@@ -104,9 +108,9 @@ const setRowData = (row) => {
        </td>
        <td>
          <USelectMenu
-            :options="units"
-            value-attribute="id"
-            option-attribute="name"
+            :items="units"
+            label-key="name"
+            value-key="id"
            v-model="product.unit"
          ></USelectMenu>
        </td>
@@ -123,7 +127,7 @@ const setRowData = (row) => {
            icon="i-heroicons-x-mark"
            @click="removeProductFromMaterialComposition(product.id)"
            variant="outline"
-            color="rose"
+            color="error"
          />
        </td>
      </tr>
@@ -135,4 +139,4 @@ const setRowData = (row) => {
 td {
  margin-bottom: 0.5em;
 }
-</style>
+</style>
--- a/frontend/components/personalComposing.vue
+++ b/frontend/components/personalComposing.vue
@@ -12,6 +12,10 @@ const props = defineProps({
 const hourrates = ref([])
 const units = ref([])

+const hourrateSearchInput = {
+  placeholder: 'Stundensatz suchen...'
+}
+
 const setup = async () => {
  hourrates.value = await useEntities("hourrates").select()
  units.value = await useEntities("units").selectSpecial()
@@ -82,14 +86,14 @@ const setRowData = (row) => {
      >
        <td>
          <USelectMenu
-              searchable
-              :search-attributes="['name']"
-              :options="hourrates"
-              value-attribute="id"
-              option-attribute="name"
-              v-model="row.hourrate"
-              :color="row.hourrate ? 'primary' : 'rose'"
-              @change="setRowData(row)"
+            :items="hourrates"
+            label-key="name"
+            value-key="id"
+            :search-input="hourrateSearchInput"
+            :filter-fields="['name']"
+            v-model="row.hourrate"
+            :color="row.hourrate ? 'primary' : 'error'"
+            @change="setRowData(row)"
          >
 <!--            <template #label>
              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
@@ -106,10 +110,10 @@ const setRowData = (row) => {
        </td>
        <td>
          <USelectMenu
-            :options="units"
+            :items="units"
            disabled
-            value-attribute="id"
-            option-attribute="name"
+            label-key="name"
+            value-key="id"
            v-model="row.unit"
          ></USelectMenu>
        </td>
@@ -134,7 +138,7 @@ const setRowData = (row) => {
            icon="i-heroicons-x-mark"
            @click="removeRowFromPersonalComposition(row.id)"
            variant="outline"
-            color="rose"
+            color="error"
          />
        </td>
      </tr>
@@ -146,4 +150,4 @@ const setRowData = (row) => {
 td {
  margin-bottom: 0.5em;
 }
-</style>
+</style>