From 491cbf15b6e41707b9ce2191c6f89451f750b411 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Sun, 7 Apr 2024 17:18:58 +0200
Subject: [PATCH] Changes

---
 spaces/components/HistoryDisplay.vue          |  23 +-
 .../pages/absenceRequests/[mode]/[[id]].vue   |  30 ++-
 spaces/pages/calendar/[mode].vue              | 170 +-------------
 spaces/pages/customers/[mode]/[[id]].vue      | 209 ++++++++++--------
 spaces/pages/customers/index.vue              |   2 +-
 spaces/pages/vendors/[mode]/[[id]].vue        |  82 +++----
 spaces/stores/data.js                         |  24 +-
 7 files changed, 229 insertions(+), 311 deletions(-)

diff --git a/spaces/components/HistoryDisplay.vue b/spaces/components/HistoryDisplay.vue
index 1e46cc4..e30c7c7 100644
--- a/spaces/components/HistoryDisplay.vue
+++ b/spaces/components/HistoryDisplay.vue
@@ -8,6 +8,9 @@ const props = defineProps({
   elementId: {
     required: true,
     type: String
+  },
+  renderHeadline: {
+    type: Boolean
   }
 })
 const { metaSymbol } = useShortcuts()
@@ -45,6 +48,8 @@ const historyItems = computed(() => {
     items = dataStore.historyItems.filter(i => i.product === elementId)
   } else if(type === "profile") {
     items = dataStore.historyItems.filter(i => i.profile === elementId)
+  } else if(type === "absencerequest") {
+    items = dataStore.historyItems.filter(i => i.absenceRequest === elementId)
   }
 
   return items
@@ -80,6 +85,8 @@ const addHistoryItem = async () => {
     addHistoryItemData.value.product = elementId
   } else if(type === "profile") {
     addHistoryItemData.value.profile = elementId
+  } else if(type === "absencerequest") {
+    addHistoryItemData.value.absenceRequest = elementId
   }
 
 
@@ -137,13 +144,27 @@ const renderText = (text) => {
       </template>
     </UCard>
   </UModal>
-  <Toolbar>
+  <Toolbar
+    v-if="!renderHeadline"
+  >
     <UButton
         @click="showAddHistoryItemModal = true"
     >
       + Eintrag
     </UButton>
   </Toolbar>
+  <div v-else>
+    <div :class="`flex justify-between`">
+      <p class="text-2xl">Logbuch</p>
+      <UButton
+          @click="showAddHistoryItemModal = true"
+      >
+        + Eintrag
+      </UButton>
+    </div>
+    <UDivider class="mt-3"/>
+  </div>
+
 
   <div
       v-if="historyItems.length > 0"
diff --git a/spaces/pages/absenceRequests/[mode]/[[id]].vue b/spaces/pages/absenceRequests/[mode]/[[id]].vue
index a476016..9ccc9b6 100644
--- a/spaces/pages/absenceRequests/[mode]/[[id]].vue
+++ b/spaces/pages/absenceRequests/[mode]/[[id]].vue
@@ -1,5 +1,6 @@
 <script setup>
 import dayjs from "dayjs";
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
 
 definePageMeta({
   middleware: "auth"
@@ -49,9 +50,9 @@ const editItem = async () => {
 
 const cancelEditorCreate = () => {
   if(currentItem.value) {
-    router.push(`/tasks/show/${currentItem.value.id}`)
+    router.push(`/absenceRequests/show/${currentItem.value.id}`)
   } else {
-    router.push(`/tasks/`)
+    router.push(`/absenceRequests/`)
   }
 }
 setupPage()
@@ -62,13 +63,13 @@ setupPage()
     <template #right>
       <UButton
           v-if="mode === 'edit'"
-          @click="dataStore.updateItem('tasks',itemInfo)"
+          @click="dataStore.updateItem('absencerequests',itemInfo)"
       >
         Speichern
       </UButton>
       <UButton
           v-else-if="mode === 'create'"
-          @click="dataStore.createNewItem('tasks',itemInfo)"
+          @click="dataStore.createNewItem('absencerequests',itemInfo)"
       >
         Erstellen
       </UButton>
@@ -103,7 +104,7 @@ setupPage()
     </template>
   </UDashboardNavbar>
   <UTabs
-      :items="[{label: 'Informationen'}]"
+      :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
       v-if="currentItem && mode == 'show'"
       class="p-5"
   >
@@ -118,6 +119,13 @@ setupPage()
             <p>Notizen: {{currentItem.notes}}</p>
           </div>
         </div>
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
+              type="absencerequest"
+              v-if="currentItem"
+              :element-id="currentItem.id"
+          />
+        </div>
       </UCard>
     </template>
   </UTabs>
@@ -159,7 +167,11 @@ setupPage()
 
     <UFormGroup label="Start:">
       <UPopover :popper="{ placement: 'bottom-start' }">
-        <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY') : 'Datum auswählen'" />
+        <UButton
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY') : 'Datum auswählen'"
+            variant="outline"
+        />
 
         <template #panel="{ close }">
           <LazyDatePicker v-model="itemInfo.start" @close="close" />
@@ -169,7 +181,11 @@ setupPage()
 
     <UFormGroup label="Ende:">
       <UPopover :popper="{ placement: 'bottom-start' }">
-        <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY') : 'Datum auswählen'" />
+        <UButton
+            variant="outline"
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY') : 'Datum auswählen'"
+        />
 
         <template #panel="{ close }">
           <LazyDatePicker v-model="itemInfo.end" @close="close" />
diff --git a/spaces/pages/calendar/[mode].vue b/spaces/pages/calendar/[mode].vue
index 9a0498d..9223c4f 100644
--- a/spaces/pages/calendar/[mode].vue
+++ b/spaces/pages/calendar/[mode].vue
@@ -61,23 +61,6 @@ const convertResourceIds = () => {
 
   })
 }
-const createEvent = async () => {
-  const {data,error} = await supabase
-      .from("events")
-      .insert([newEventData.value])
-      .select()
-
-  if(error) {
-    console.log(error)
-  }
-
-  console.log("OK")
-  showNewEventModal.value = false
-  newEventData.value = {}
-  dataStore.fetchEvents()
-
-
-}
 
 //Calendar Config
 const calendarOptionsGrid = reactive({
@@ -96,23 +79,19 @@ const calendarOptionsGrid = reactive({
   weekNumbers: true,
   select: function(info) {
     console.log(info)
-    /*newEventData.value.resourceId = info.resource.id
-    if(info.resource.extendedProps){
-      newEventData.value.resourceType = info.resource.extendedProps.type
-    }*/
 
-    newEventData.value.start = info.startStr
-    newEventData.value.end = info.endStr
-    //showNewEventModal.value = true
 
     router.push(`/events/edit/?start=${info.startStr}&end=${info.endStr}&source=grid`)
 
   },
   eventClick: function (info){
     console.log(info)
-    router.push(`/events/show/${info.event.id}`)
-    //selectedEvent.value = info.event
-    //showEventModal.value = true
+    if(info.event.title.startsWith("Abw.:")){
+      router.push(`/absencerequests/show/${info.event.id}`)
+    } else {
+      router.push(`/events/show/${info.event.id}`)
+    }
+
   },
 })
 
@@ -130,28 +109,14 @@ const calendarOptionsTimeline = reactive({
   initialEvents: dataStore.getEventsByResource,
   selectable: true,
   select: function (info) {
-    /*let resourceObj = {}
-
-    resourceObj.id = info.resource.id
-    if(info.resource.extendedProps){
-      resourceObj.type = info.resource.extendedProps.type
-    }
-
-    console.log(resourceObj)*/
-
-    selectedResources.value = [info.resource.id]
-    newEventData.value.start = info.startStr
-    newEventData.value.end = info.endStr
-    console.log(newEventData.value)
-    convertResourceIds()
-    //showNewEventModal.value = true
-
     router.push(`/events/edit/?start=${info.startStr}&end=${info.endStr}&resources=${JSON.stringify([info.resource.id])}&source=timeline`)
   },
   eventClick: function (info){
-    router.push(`/events/show/${info.event.id}`)
-    //selectedEvent.value = info.event
-    //showEventModal.value = true
+    if(info.event.title.startsWith("Abw.:")){
+      router.push(`/absencerequests/show/${info.event.id}`)
+    } else {
+      router.push(`/events/show/${info.event.id}`)
+    }
   },
   resourceGroupField: "type",
   resourceOrder: "-type",
@@ -184,125 +149,12 @@ const calendarOptionsTimeline = reactive({
 </script>
 
 <template>
-  <!-- NEW EVENT MODAL  -->
-  <UModal
-      v-model="showNewEventModal"
-  >
-    <UCard>
-      <template #header>
-        Neuen Termin erstellen
-      </template>
-      <UFormGroup
-          label="Resource:"
-      >
-        <USelectMenu
-            v-model="selectedResources"
-            :options="resources"
-            option-attribute="title"
-            value-attribute="id"
-            multiple
-            @change="convertResourceIds"
-        >
-          <template #label>
-            <span v-if="selectedResources.length == 0">Keine Ressourcen ausgewählt</span>
-            <span v-else >{{ selectedResources.length }} ausgewählt</span>
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup
-          label="Titel:"
-      >
-        <UInput
-            v-model="newEventData.title"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Projekt:"
-      >
-        <USelectMenu
-            v-model="newEventData.project"
-            :options="dataStore.projects"
-            option-attribute="name"
-            value-attribute="id"
-            searchable
-            searchable-placeholder="Suche..."
-            :search-attributes="['name']"
-        >
-          <template #label>
-            {{dataStore.getProjectById(newEventData.project) ? dataStore.getProjectById(newEventData.project).name : "Kein Projekt ausgewählt"}}
-          </template>
-
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup
-          label="Typ:"
-      >
-        <USelectMenu
-            v-model="newEventData.type"
-            :options="eventTypes"
-            option-attribute="label"
-            value-attribute="label"
-        >
-
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup
-          label="Start:"
-      >
-        <UInput
-            v-model="newEventData.start"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Ende:"
-      >
-        <UInput
-            v-model="newEventData.end"
-        />
-      </UFormGroup>
-
-      <template #footer>
-        <UButton
-            @click="createEvent"
-        >
-          Erstellen
-        </UButton>
-      </template>
-
-    </UCard>
-  </UModal>
-
-  <!--SHOW EVENT MODAL  -->
-  <UModal
-      v-model="showEventModal"
-  >
-    <UCard>
-      <template #header>
-        {{selectedEvent.title}}
-      </template>
-
-      Start: {{dayjs(selectedEvent.startStr).format("DD.MM.YYYY HH:mm")}}<br>
-      Ende: {{dayjs(selectedEvent.endStr).format("DD.MM.YYYY HH:mm")}}
-
-      <DevOnly>
-        <UDivider class="my-3"/>
-        {{selectedEvent}}
-      </DevOnly>
-
-
-
-    </UCard>
-
-
-  </UModal>
-
   <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
     <template #right>
 
     </template>
   </UDashboardNavbar>
 
-
   <div v-if="mode === 'grid'" class="p-5">
     <FullCalendar
         :options="calendarOptionsGrid"
diff --git a/spaces/pages/customers/[mode]/[[id]].vue b/spaces/pages/customers/[mode]/[[id]].vue
index 031184f..fdc2f3b 100644
--- a/spaces/pages/customers/[mode]/[[id]].vue
+++ b/spaces/pages/customers/[mode]/[[id]].vue
@@ -50,7 +50,7 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')">
+  <UDashboardNavbar :title="currentItem ? `Kunde: ${currentItem.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')">
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -83,120 +83,141 @@ setupPage()
       <UBadge
           v-if="currentItem.active"
       >
-        Kunde aktiv
+        Aktiv
       </UBadge>
       <UBadge
           v-else
           color="red"
       >
-        Kunde gesperrt
+        Gesperrt
       </UBadge>
     </template>
   </UDashboardNavbar>
 
   <UTabs
       v-if="currentItem && mode == 'show'"
-      :items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}, {label: 'Ansprechpartner'}]"
+      :items="[{label: 'Informationen'}, /*{label: 'Logbuch'},*/ {label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}, {label: 'Ansprechpartner'}]"
       class="p-5"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
+      <div v-if="item.label === 'Informationen'" class="flex mt-5">
+        <div class="w-1/2 mr-5">
+          <UCard >
+            <div class="text-wrap">
+              <p>Kundennummer: {{currentItem.customerNumber}}</p>
+              <p>Typ: {{currentItem.isCompany ? 'Firma' : 'Privatperson'}}</p>
+              <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
+              <p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
+              <p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
+              <p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
+              <p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
+              <p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
+              <p>Notizen:<br> {{currentItem.notes}}</p>
+            </div>
 
+          </UCard>
+          <UCard class="mt-5">
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/contacts/create?customer=${currentItem.id}`)"
+              >
+                + Ansprechpartner
+              </UButton>
+            </Toolbar>
+            <UTable
+                :rows="dataStore.getContactsByCustomerId(currentItem.id)"
+                @select="(row) => router.push(`/contacts/show/${row.id}`)"
+                :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
 
-          <div class="text-wrap">
-            <p>Kundennummer: {{currentItem.customerNumber}}</p>
-            <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></p>
-            <p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}<br></p>
-            <p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}<br></p>
-            <p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}<br></p>
-            <p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}<br></p>
-            <p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}<br></p>
-            <p>Notizen: {{currentItem.notes}}</p>
-          </div>
-
-        </div>
-        <div v-else-if="item.label === 'Logbuch'">
-          <HistoryDisplay
-              type="customer"
-              v-if="currentItem"
-              :element-id="currentItem.id"
-          />
-        </div>
-        <div v-else-if="item.label === 'Projekte'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/projects/create?customer=${currentItem.id}`)"
             >
-              + Projekt
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getProjectsByCustomerId(currentItem.id)"
-              @select="(row) => router.push(`/projects/show/${row.id}`)"
-              :columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
 
-          >
-
-          </UTable>
+            </UTable>
+          </UCard>
         </div>
-        <div v-else-if="item.label === 'Objekte'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/plants/create?customer=${currentItem.id}`)"
-            >
-              + Objekt
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getPlantsByCustomerId(currentItem.id)"
-              @select="(row) => router.push(`/plants/show/${row.id}`)"
-              :columns="[{label: 'Name', key: 'name'}]"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
-
-          >
-
-          </UTable>
-        </div>
-        <div v-else-if="item.label === 'Verträge'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/contracts/create?customer=${currentItem.id}`)"
-            >
-              + Objekt
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getContractsByCustomerId(currentItem.id)"
-              @select="(row) => router.push(`/contracts/show/${row.id}`)"
-              :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
-
-          >
-
-          </UTable>
-        </div>
-        <div v-else-if="item.label === 'Ansprechpartner'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/contacts/create?customer=${currentItem.id}`)"
-            >
-              + Ansprechpartner
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getContactsByCustomerId(currentItem.id)"
-              @select="(row) => router.push(`/contacts/show/${row.id}`)"
-              :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
-
-          >
-
-          </UTable>
+        <div class="w-1/2">
+          <UCard class="h-full">
+            <HistoryDisplay
+                type="customer"
+                v-if="currentItem"
+                :element-id="currentItem.id"
+                :render-headline="true"
+            />
+          </UCard>
 
         </div>
-      </UCard>
+
+      </div>
+
+
+
+      <UCard class="mt-5" v-else>
+      <div v-if="item.label === 'Informationen'" class="flex">
+
+
+
+
+
+
+      </div>
+      <div v-else-if="item.label === 'Projekte'">
+        <Toolbar>
+          <UButton
+              @click="router.push(`/projects/create?customer=${currentItem.id}`)"
+          >
+            + Projekt
+          </UButton>
+        </Toolbar>
+        <UTable
+            :rows="dataStore.getProjectsByCustomerId(currentItem.id)"
+            @select="(row) => router.push(`/projects/show/${row.id}`)"
+            :columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
+
+        >
+          <template #phase-data="{row}">
+            {{row.phases ? row.phases.find(i => i.active).label : ""}}
+          </template>
+        </UTable>
+      </div>
+      <div v-else-if="item.label === 'Objekte'">
+        <Toolbar>
+          <UButton
+              @click="router.push(`/plants/create?customer=${currentItem.id}`)"
+          >
+            + Objekt
+          </UButton>
+        </Toolbar>
+        <UTable
+            :rows="dataStore.getPlantsByCustomerId(currentItem.id)"
+            @select="(row) => router.push(`/plants/show/${row.id}`)"
+            :columns="[{label: 'Name', key: 'name'}]"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
+
+        >
+
+        </UTable>
+      </div>
+      <div v-else-if="item.label === 'Verträge'">
+        <Toolbar>
+          <UButton
+              @click="router.push(`/contracts/create?customer=${currentItem.id}`)"
+          >
+            + Objekt
+          </UButton>
+        </Toolbar>
+        <UTable
+            :rows="dataStore.getContractsByCustomerId(currentItem.id)"
+            @select="(row) => router.push(`/contracts/show/${row.id}`)"
+            :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
+
+        >
+
+        </UTable>
+      </div>
+    </UCard>
+
     </template>
   </UTabs>
   <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5">
diff --git a/spaces/pages/customers/index.vue b/spaces/pages/customers/index.vue
index 6acf97a..08a8ebe 100644
--- a/spaces/pages/customers/index.vue
+++ b/spaces/pages/customers/index.vue
@@ -54,7 +54,7 @@
       <span v-else class="text-rose-500">Gesperrt</span>
     </template>
     <template #address-data="{row}">
-      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
+      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip ? row.infoData.zip : ""}}{{row.infoData.city ? `${row.infoData.city}, ` : ''}} {{row.infoData.country}}
     </template>
   </UTable>
 </template>
diff --git a/spaces/pages/vendors/[mode]/[[id]].vue b/spaces/pages/vendors/[mode]/[[id]].vue
index 48ed0e0..7478892 100644
--- a/spaces/pages/vendors/[mode]/[[id]].vue
+++ b/spaces/pages/vendors/[mode]/[[id]].vue
@@ -46,7 +46,7 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Lieferant erstellen' : 'Lieferant bearbeiten')">
+  <UDashboardNavbar :title="currentItem ? `Lieferant: ${currentItem.name}` : (mode === 'create' ? 'Lieferant erstellen' : 'Lieferant bearbeiten')">
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -77,51 +77,57 @@ setupPage()
     </template>
   </UDashboardNavbar>
   <UTabs
-    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Ansprechpartner'},{label: 'Dokumente'}]"
+    :items="[{label: 'Informationen'},{label: 'Dokumente'}]"
     v-if="currentItem && mode == 'show'"
     class="p-5"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
+      <div v-if="item.label === 'Informationen'" class="mt-5 flex">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <div v-if="currentItem.infoData" class="text-wrap">
+              <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
+              <p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
+              <p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
+              <p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
+              <p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
+              <p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
+            </div>
+          </UCard>
+          <UCard class="mt-5">
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
+              >
+                + Ansprechpartner
+              </UButton>
+            </Toolbar>
+            <UTable
+                :rows="dataStore.getContactsByVendorId(currentItem.id)"
+                @select="(row) => router.push(`/contacts/show/${row.id}`)"
+                :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
 
-
-          <div v-if="currentItem.infoData" class="text-wrap">
-            <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
-            <p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
-            <p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
-            <p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
-            <p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
-            <p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
-          </div>
-        </div>
-        <div v-else-if="item.label === 'Logbuch'">
-          <HistoryDisplay
-              type="vendor"
-              v-if="currentItem"
-              :element-id="currentItem.id"
-          />
-        </div>
-        <div v-else-if="item.label === 'Ansprechpartner'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
             >
-              + Ansprechpartner
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getContactsByVendorId(currentItem.id)"
-              @select="(row) => router.push(`/contacts/show/${row.id}`)"
-              :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
-
-          >
-
-          </UTable>
 
+            </UTable>
+          </UCard>
         </div>
-        <div v-else-if="item.label === 'Dokumente'">
+        <div class="w-1/2">
+          <UCard class="h-full">
+            <HistoryDisplay
+                type="vendor"
+                v-if="currentItem"
+                :element-id="currentItem.id"
+                :render-headline="true"
+            />
+          </UCard>
+        </div>
+      </div>
+
+
+      <UCard class="mt-5" v-else>
+        <div v-if="item.label === 'Dokumente'">
           <InputGroup>
             <DocumentUpload
                 type="vendor"
diff --git a/spaces/stores/data.js b/spaces/stores/data.js
index d7f8c58..726f435 100644
--- a/spaces/stores/data.js
+++ b/spaces/stores/data.js
@@ -35,7 +35,7 @@ export const useDataStore = defineStore('data', () => {
             labelSingle: "Vertrag",
             redirect:true
         },
-        absenceRequests: {
+        absencerequests: {
             label: "Abwesenheitsanträge",
             labelSingle: "Abwesenheitsantrag",
             redirect:true
@@ -174,7 +174,7 @@ export const useDataStore = defineStore('data', () => {
     const historyItems = ref([])
     const numberRanges = ref([])
     const notifications = ref([])
-    const absenceRequests = ref([])
+    const absencerequests = ref([])
     const accounts = ref([])
     const taxTypes = ref([])
     const plants = ref([])
@@ -369,7 +369,7 @@ export const useDataStore = defineStore('data', () => {
         historyItems.value = []
         numberRanges.value = []
         notifications.value = []
-        absenceRequests.value = []
+        absencerequests.value = []
         accounts.value = []
         taxTypes.value = []
         plants.value = []
@@ -647,7 +647,7 @@ export const useDataStore = defineStore('data', () => {
         notifications.value = (await supabase.from("notifications").select().eq('tenant', currentTenant.value).order("created_at", {ascending: false})).data
     }
     async function fetchAbsenceRequests () {
-        absenceRequests.value = (await supabase.from("absencerequests").select().eq('tenant', currentTenant.value)).data
+        absencerequests.value = (await supabase.from("absencerequests").select().eq('tenant', currentTenant.value)).data
     }
     async function fetchAccounts () {
         accounts.value = (await supabase.from("accounts").select()).data
@@ -957,14 +957,15 @@ export const useDataStore = defineStore('data', () => {
                     backgroundColor: "black"
                 }
             }),
-            ...absenceRequests.value.map(absence => {
+            ...absencerequests.value.map(absence => {
                 return  {
+                    id: absence.id,
                     resourceId: absence.user,
                     resourceType: "person",
-                    title: absence.reason,
+                    title: `Abw.: ${absence.reason}`,
                     start: dayjs(absence.start).toDate(),
                     end: dayjs(absence.end).add(1,'day').toDate(),
-                    allDay: true
+                    allDay: true,
                 }
             })
         ]
@@ -1017,11 +1018,12 @@ export const useDataStore = defineStore('data', () => {
                     backgroundColor: "black"
                 }
             }),*/
-            ...absenceRequests.value.map(absence => {
+            ...absencerequests.value.map(absence => {
                 return  {
+                    id: absence.id,
                     resourceId: absence.user,
                     resourceType: "person",
-                    title: absence.reason,
+                    title: `Abw.: ${absence.reason}`,
                     start: dayjs(absence.start).toDate(),
                     end: dayjs(absence.end).add(1,'day').toDate(),
                     allDay: true
@@ -1094,7 +1096,7 @@ export const useDataStore = defineStore('data', () => {
     })
 
     const getAbsenceRequestById = computed(() => (itemId) => {
-        return absenceRequests.value.find(item => item.id === itemId)
+        return absencerequests.value.find(item => item.id === itemId)
     })
 
     const getProfileById = computed(() => (itemId) => {
@@ -1183,7 +1185,7 @@ export const useDataStore = defineStore('data', () => {
         historyItems,
         numberRanges,
         notifications,
-        absenceRequests,
+        absencerequests,
         accounts,
         taxTypes,
         plants,