BETA for new DB

pages/staff/time/index.vue

@@ -26,6 +26,23 @@ const selectedUser = ref(platformIsNative ? auth.user.id : null)
 
 const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
 
+const typeLabel = {
+  work: "Arbeitszeit",
+  vacation: "Urlaub",
+  sick: "Krankheit",
+  holiday: "Feiertag",
+  other: "Sonstiges"
+}
+
+const typeColor = {
+  work: "gray",
+  vacation: "yellow",
+  sick: "rose",
+  holiday: "blue",
+  other: "gray"
+}
+
+
 async function loadUsers() {
   if (!canViewAll.value) return
   // Beispiel: User aus Supabase holen
@@ -171,28 +188,65 @@ onMounted(async () => {
           { key: 'started_at', label: 'Start' },
           { key: 'stopped_at', label: 'Ende' },
           { key: 'duration_minutes', label: 'Dauer' },
+          { key: 'user', label: 'Mitarbeiter' },
+          { key: 'type', label: 'Typ' },
           { key: 'description', label: 'Beschreibung' },
-        ]"
+          ]"
       >
         <template #state-data="{ row }">
           <span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
           <span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
           <span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
         </template>
-
-        <template #started_at-data="{ row }">
-          {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
+        <template #type-data="{ row }">
+          <UBadge :color="typeColor[row.type] || 'gray'">
+            {{ typeLabel[row.type] || row.type }}
+          </UBadge>
         </template>
 
+        <!-- START -->
+        <template #started_at-data="{ row }">
+          <!-- Urlaub / Krankheit → nur Tag -->
+          <span v-if="row.type === 'vacation' || row.type === 'sick'">
+            {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}
+          </span>
+
+          <!-- Arbeitszeit / andere → Datum + Uhrzeit -->
+          <span v-else>
+            {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
+          </span>
+        </template>
+
+
+        <!-- ENDE -->
         <template #stopped_at-data="{ row }">
-          <span v-if="row.stopped_at">
+          <span v-if="!row.stopped_at" class="text-primary-500 font-medium">
+            läuft...
+          </span>
+
+          <!-- Urlaub / Krankheit → nur Tag -->
+          <span v-else-if="row.type === 'vacation' || row.type === 'sick'">
+            {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}
+          </span>
+
+          <!-- Arbeitszeit / andere → Datum + Uhrzeit -->
+          <span v-else>
             {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}
           </span>
-          <span v-else class="text-primary-500 font-medium">läuft...</span>
         </template>
 
         <template #duration_minutes-data="{ row }">
-          {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
+
+          <!-- Urlaub / Krankheit → Tage anzeigen -->
+          <span v-if="row.type === 'vacation' || row.type === 'sick'">
+<!--            {{ useFormatDurationDays(row.startet_at, row.stopped_at) }}-->--
+          </span>
+
+          <!-- Arbeitszeit / andere → Minutenformat -->
+          <span v-else>
+            {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
+          </span>
+
         </template>
 
         <template #actions-data="{ row }">
@@ -218,6 +272,14 @@ onMounted(async () => {
             />
           </UTooltip>
         </template>
+        <template #user-data="{ row }">
+          {{users.find(i => i.user_id === row.user_id) ? users.find(i => i.user_id === row.user_id).full_name : ""}}
+        </template>
+        <template #description-data="{ row }">
+          <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
+          <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
+          <span v-else>{{row.description}}</span>
+        </template>
       </UTable>
     </UDashboardPanelContent>
   </template>
@@ -284,9 +346,16 @@ onMounted(async () => {
             @click="handleEdit(row)"
         >
           <div class="flex justify-between items-center">
-            <p class="font-semibold">
-              {{ row.description || 'Keine Beschreibung' }}
-            </p>
+            <div class="font-semibold flex items-center gap-2">
+              <span>{{ row.description || 'Keine Beschreibung' }}</span>
+
+              <UBadge
+                  :color="typeColor[row.type]"
+                  class="text-xs"
+              >
+                {{ typeLabel[row.type] }}
+              </UBadge>
+            </div>
 
             <UBadge
                 :color="{
@@ -359,5 +428,12 @@ onMounted(async () => {
   </template>
 
   <!-- MODAL -->
-  <StaffTimeEntryModal v-model="showModal" :entry="editEntry" @saved="load" />
+  <StaffTimeEntryModal
+      v-model="showModal"
+      :entry="editEntry"
+      @saved="load"
+      :users="users"
+      :can-select-user="canViewAll"
+      :default-user-id="selectedUser"
+  />
 </template>