Merge branch 'devWithMobile' into dev

components/EntityEdit.vue

@@ -7,6 +7,10 @@ const props = defineProps({
     required: true,
     type: String
   },
+  mode: {
+    required: true,
+    type: String
+  },
   createQuery: {
     type: Object
   },
@@ -82,8 +86,12 @@ const setupCreate = () => {
 setupCreate()
 
 const setupQuery = () => {
+  console.log("setupQuery")
+  console.log(props.mode)
   if(props.mode === "create" && (route.query || props.createQuery)) {
 
+    console.log(route.query)
+
     let data = !props.inModal ? route.query : props.createQuery
 
     Object.keys(data).forEach(key => {

components/EntityList.vue

@@ -1,5 +1,7 @@
 <script setup>
 import {useTempStore} from "~/stores/temp.js";
+import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
+import EntityTable from "~/components/EntityTable.vue";
 
 const props = defineProps({
   type: {
@@ -9,6 +11,9 @@ const props = defineProps({
   items: {
     required: true,
     type: Array
+  },
+  platform: {
+    required: true,
   }
 })
 
@@ -53,11 +58,6 @@ const tempStore = useTempStore()
 
 const dataType = dataStore.dataTypes[type]
 
-//Old
-
-const selectedItem = ref(0)
-
-
 const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
 const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
 
@@ -104,7 +104,16 @@ const filteredRows = computed(() => {
 </script>
 
 <template>
+  <FloatingActionButton
+   :label="`+ ${dataType.labelSingle}`"
+   variant="outline"
+   v-if="platform === 'mobile'"
+   @click="router.push(`/mobile/standardEntity/${type}/create`)"
+  />
   <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
     <template #right>
       <UInput
           id="searchinput"
@@ -129,7 +138,7 @@ const filteredRows = computed(() => {
       />
 
       <UButton
-          v-if="useRole().checkRight(`${type}-create`)"
+          v-if="platform !== 'mobile' && useRole().checkRight(`${type}-create`)"
           @click="router.push(`/standardEntity/${type}/create`)"
           class="ml-3"
       >+ {{dataType.labelSingle}}</UButton>
@@ -172,53 +181,11 @@ const filteredRows = computed(() => {
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-  <UTable
-      :rows="filteredRows"
-      :columns="columns"
-      class="w-full"
-      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `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}">
-      <span
-          v-if="row.id === filteredRows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.name}}
-      </span>
-      <span v-else>
-        {{row.name}}
-      </span>
-    </template>
-    <template #fullName-data="{row}">
-      <span
-          v-if="row.id === filteredRows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.fullName}}
-      </span>
-      <span v-else>
-        {{row.fullName}}
-      </span>
-    </template>
-    <template #licensePlate-data="{row}">
-      <span
-          v-if="row.id === filteredRows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
-      </span>
-      <span v-else>
-        {{row.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>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
-    </template>
-  </UTable>
+  <EntityTable
+    :type="props.type"
+    :columns="columns"
+    :rows="filteredRows"
+  />
 </template>
 
 <style scoped>

components/EntityShow.vue

@@ -1,5 +1,4 @@
 <script setup>
-import dayjs from "dayjs";
 
 const props = defineProps({
   type: {
@@ -12,6 +11,9 @@ const props = defineProps({
   },
   inModal: {
     type: Boolean,
+  },
+  platform: {
+    type: String,
   }
 })
 
@@ -37,95 +39,13 @@ const emit = defineEmits(["updateNeeded"])
 
 const router = useRouter()
 const dataStore = useDataStore()
-const profileStore = useProfileStore()
-const supabase = useSupabaseClient()
-const files = useFiles()
 const modal = useModal()
 
 const dataType = dataStore.dataTypes[type]
 
-const availableFiles = ref([])
-
-const setup = async () => {
-  if(props.item.files) {
-    availableFiles.value = await files.selectSomeDocuments(props.item.files.map(i => i.id)) || []
-  }
-}
-
-setup()
-
-
 const openTab = ref(0)
 
-const renderedPhases = computed(() => {
-  console.log(props.item.phases)
-  if(type === "projects" && props.item.phases) {
-    return props.item.phases.map((phase,index,array) => {
 
-      let isAvailable = false
-
-      if(phase.active) {
-        isAvailable = true
-      } else if(index > 0 && array[index-1].active ){
-        isAvailable = true
-      } else if(index > 1 && array[index-1].optional && array[index-2].active){
-        isAvailable = true
-      } else if(array.findIndex(i => i.active) > index) {
-        isAvailable = true
-      } else if(phase.label === "Abgeschlossen") {
-        isAvailable = true
-      }
-
-
-      return {
-        ...phase,
-        label: phase.optional ? `${phase.label}(optional)`: phase.label,
-        disabled: !isAvailable,
-        defaultOpen: phase.active ? true : false
-      }
-    })
-  } else {
-    return []
-  }
-})
-
-const changeActivePhase = async (key) => {
-  let item = await useSupabaseSelectSingle("projects",props.item.id,'*')
-
-  let phaseLabel = ""
-
-  item.phases = item.phases.map(p => {
-    if(p.active) p.active = false
-
-    if(p.key === key) {
-      p.active = true
-      p.activated_at = dayjs().format()
-      p.activated_by = profileStore.activeProfile.id
-      phaseLabel = p.label
-    }
-
-    return p
-  })
-
-  const {error:updateError} = await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
-
-  console.log(updateError)
-
-
-  const {error} = await supabase.from("historyitems").insert({
-    createdBy: profileStore.activeProfile.id,
-    tenant: profileStore.currentTenant,
-    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
-    project: item.id
-  })
-
-  emit("updateNeeded")
-
-}
-
-const invoiceDeliveryNotes = () => {
-  router.push(`/createDocument/edit?type=invoices&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
-}
 
 const getAvailableQueryStringData = (keys) => {
   let returnString =""
@@ -172,7 +92,27 @@ const getAvailableQueryStringData = (keys) => {
 
 <template>
   <UDashboardNavbar
-      v-if="!props.inModal"
+      v-if="props.inModal"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium']"
+      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          @click="modal.close()"
+          color="red"
+          class="ml-2"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardNavbar
+      v-else-if="!props.inModal && platform !== 'mobile'"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #left>
@@ -206,388 +146,171 @@ const getAvailableQueryStringData = (keys) => {
     </template>
   </UDashboardNavbar>
   <UDashboardNavbar
-      v-else
+      v-else-if="!props.inModal && platform === 'mobile'"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
+<!--    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+          Zurück
+      </UButton>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/standardEntity/${type}`)"
+      >
+          Übersicht
+      </UButton>
+    </template>-->
+    <template #toggle>
+      <div></div>
+    </template>
     <template #center>
       <h1
           v-if="item"
-          :class="['text-xl','font-medium']"
+          :class="['text-xl','font-medium','text-truncate']"
       >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
     </template>
     <template #right>
       <UButton
-          @click="modal.close()"
-          color="red"
-          class="ml-2"
-          icon="i-heroicons-x-mark"
-          variant="outline"
-      />
+          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
+      >
+        Bearbeiten
+      </UButton>
     </template>
   </UDashboardNavbar>
+
   <UTabs
       :items="dataType.showTabs"
-      v-if="props.item.id"
+      v-if="props.item.id && platform !== 'mobile'"
       class="p-5"
       v-model="openTab"
   >
     <template #item="{item:tab}">
-      <div class="scroll">
-        <div v-if="tab.label === 'Informationen'" class="flex flex-row mt-5">
-          <UCard class="w-1/2 mr-5">
-            <UAlert
-                v-if="item.archived"
-                color="rose"
-                variant="outline"
-                :title="`${dataType.labelSingle} archiviert`"
-                icon="i-heroicons-archive-box"
-                class="mb-5"
-            />
-            <div class="text-wrap">
-              <table class="w-full">
-                <tbody>
-                <tr
-                    v-for="datapoint in dataType.templateColumns"
-                >
-                  <td>{{datapoint.label}}:</td>
-                  <td>
-                    <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
-                    <div v-else>
-                      <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
-                      <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
-                    </div>
-                  </td>
-                </tr>
-                </tbody>
+      <div v-if="tab.label === 'Informationen'" class="flex flex-row">
 
-              </table>
-            </div>
+        <EntityShowSubInformation
+            :top-level-type="type"
+            :item="props.item"
+            class="w-1/2 mr-5"
+            :platform="platform"
+        />
 
-          </UCard>
-          <UCard class="w-1/2">
-            <HistoryDisplay
-                :type="type.substring(0,type.length-1)"
-                v-if="props.item.id"
-                :element-id="props.item.id"
-                render-headline
-            />
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Dateien'">
-          <UCard class="mt-5">
-            <Toolbar>
-              <DocumentUpload
-                  :type="type.substring(0,type.length-1)"
-                  :element-id="item.id"
-                  @uploadFinished="emit('updateNeeded')"
-              />
-            </Toolbar>
-
-            <DocumentList
-                :key="props.item.files.length"
-                :documents="availableFiles"
-                v-if="availableFiles.length > 0"
-            />
-            <UAlert
-              v-else
-              icon="i-heroicons-x-mark"
-              title="Keine Dateien verfügbar"
-            />
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Projekte'">
-          <UCard class="mt-5">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/standardEntity/projects/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
-              >
-                + Projekt
-              </UButton>
-            </Toolbar>
-            <UTable
-                :rows="props.item.projects"
-                @select="(row) => router.push(`/standardEntity/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>
-
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Ansprechpartner'">
-          <UCard class="mt-5">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/standardEntity/contacts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
-              >
-                + Ansprechpartner
-              </UButton>
-            </Toolbar>
-            <UTable
-                :rows="props.item.contacts"
-                @select="(row) => router.push(`/standardEntity/contacts/show/${row.id}`)"
-                :columns="[{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
-
-            >
-
-            </UTable>
-
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Objekte'">
-          <UCard class="mt-5">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
-              >
-                + Objekt
-              </UButton>
-              <UButton
-                  v-if="type === 'customers'"
-                  @click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
-              >
-                + Kundenadresse als Objekt
-              </UButton>
-            </Toolbar>
-            <UTable
-                :rows="props.item.plants"
-                @select="(row) => router.push(`/standardEntity/plants/show/${row.id}`)"
-                :columns="[{label: 'Name', key: 'name'}]"
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
-
-            >
-
-            </UTable>
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Aufgaben'">
-          <UCard class="mt-5">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/standardEntity/tasks/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
-              >
-                + Aufgabe
-              </UButton>
-            </Toolbar>
-            <UTable
-                :rows="props.item.tasks"
-                @select="(row) => router.push(`/standardEntity/tasks/show/${row.id}`)"
-                :columns="[{label: 'Name', key: 'name'}]"
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
-            />
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Verträge'">
-          <UCard class="mt-5">
-            <Toolbar>
-              <UButton
-                  @click="router.push(`/standardEntity/contracts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
-              >
-                + Vertrag
-              </UButton>
-            </Toolbar>
-            <UTable
-                :rows="props.item.contracts"
-                @select="(row) => router.push(`/standardEntity/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>
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Überprüfungen'">
-          <UCard class="mt-5">
-            <UTable
-                :rows="props.item.checks"
-                :columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
-                class="w-full"
-                :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-                @select="(i) => router.push(`/checks/show/${i.id}`) "
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
-            >
-              <template #rhythm-data="{row}">
-                {{row.distance}}
-                <span v-if="row.distanceUnit === 'dayjs'">Tage</span>
-                <span v-if="row.distanceUnit === 'years'">Jahre</span>
-              </template>
-            </UTable>
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Phasen'">
-          <UCard class="mt-5">
-            <UAccordion
-                :items="renderedPhases"
-            >
-              <template #default="{item,index,open}">
-                <UButton
-                    variant="ghost"
-                    :color="item.active ? 'primary' : 'white'"
-                    class="mb-1"
-                    :disabled="true"
-                >
-                  <template #leading>
-                    <div class="w-6 h-6  flex items-center justify-center -my-1">
-                      <UIcon :name="item.icon" class="w-4 h-4 " />
-                    </div>
-                  </template>
-
-                  <span class="truncate"> {{item.label}}</span>
-
-                  <template #trailing>
-                    <UIcon
-                        name="i-heroicons-chevron-right-20-solid"
-                        class="w-5 h-5 ms-auto transform transition-transform duration-200"
-                        :class="[open && 'rotate-90']"
-                    />
-                  </template>
-
-                </UButton>
-              </template>
-              <template #item="{item, index}">
-                <UCard class="mx-5">
-                  <template #header>
-                    <span class="dark:text-white text-black">{{item.label}}</span>
-                  </template>
-                  <InputGroup>
-                    <!-- TODO: Reactive Change Phase                  -->
-                    <UButton
-                        v-if="!item.activated_at && index !== 0 "
-                        @click="changeActivePhase(item.key)"
-                    >
-                      Phase aktivieren
-                    </UButton>
-                    <UButton
-                        v-if="item.active"
-                        v-for="button in item.quickactions"
-                        @click="router.push(`${button.link}&customer=${props.item.customer.id}&project=${props.item.id}`)"
-                    >
-                      {{button.label}}
-                    </UButton>
-                  </InputGroup>
-
-                  <div>
-                    <p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
-                    <p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
-                    <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
-                  </div>
-                </UCard>
-
-
-              </template>
-            </UAccordion>
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Ausgangsbelege'">
-          <UCard class="mt-5">
-
-            <Toolbar>
-              <UButton
-                @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
-              >
-                + Angebot
-              </UButton>
-              <UButton
-                @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
-              >
-                + Auftragsbestätigung
-              </UButton>
-              <UButton
-                @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
-              >
-                + Lieferschein
-              </UButton>
-              <UButton
-                @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
-              >
-                + Abschlagsrechnung
-              </UButton>
-              <UButton
-                @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
-              >
-                + Rechnung
-              </UButton>
-              <UButton
-                @click="invoiceDeliveryNotes"
-                v-if="type === 'projects'"
-              >
-                Lieferscheine abrechnen
-              </UButton>
-            </Toolbar>
-
-            <UTable
-              :rows="props.item.createddocuments"
-              :columns="[{key:'state',label: 'Status'},{key:'type',label: 'Typ'},{key:'documentNumber',label: 'Nummer'},{key:'documentDate',label: 'Datum'},{key:'description',label: 'Beschreibung'}]"
-              @select="(i) => router.push(i.state === 'Entwurf' ? `/createDocument/edit/${i.id}`:`/createDocument/show/${i.id}`)"
-            >
-              <template #documentDate-data="{row}">
-                {{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
-              </template>
-              <template #type-data="{row}">
-                {{dataStore.documentTypesForCreation[row.type].labelSingle}}
-              </template>
-            </UTable>
-
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Termine'">
-          <UCard class="mt-5">
-
-            <Toolbar>
-              <UButton
-                @click="router.push(`/standardEntity/events/create/?${getAvailableQueryStringData()}`)"
-              >
-                + Termin
-              </UButton>
-            </Toolbar>
-
-            <UTable
-              :rows="props.item.events"
-              @select="(i) => router.push(`/standardEntity/events/show/${i.id}`)"
-              :columns="[{key:'name',label: 'Name'},{key:'eventtype',label: 'Typ'},{key:'startDate',label: 'Start'},{key:'endDate',label: 'Ende'},{key:'notes',label: 'Notizen'}]"
-            >
-              <template #startDate-data="{row}">
-                {{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
-              </template>
-              <template #endDate-data="{row}">
-                {{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
-              </template>
-            </UTable>
-
-          </UCard>
-        </div>
-        <div v-else-if="tab.label === 'Auswertung Kostenstelle'">
-          <UCard class="mt-5">
-
-            <costcentre-display :item="props.item"/>
-
-          </UCard>
-        </div>
+        <EntityShowSubHistoryDisplay
+            :top-level-type="type"
+            :item="props.item"
+            class="w-1/2"
+            :platform="platform"
+        />
       </div>
 
+      <EntityShowSubFiles
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          v-else-if="tab.label === 'Dateien'"
+          :top-level-type="type"
+          type="files"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <EntityShowSubPhases
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="tab.label === 'Phasen'"
+          :query-string-data="getAvailableQueryStringData()"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <EntityShowSubCreatedDocuments
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="tab.label === 'Ausgangsbelege'"
+          :query-string-data="getAvailableQueryStringData()"
+          :platform="platform"
+      />
+      <EntityShowSubCostCentreReport
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="tab.label === 'Auswertung Kostenstelle'"
+          :platform="platform"
+      />
 
-
+      <EntityShowSub
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          :tab-label="tab.label"
+          :top-level-type="type"
+          v-else
+          :platform="platform"
+      />
     </template>
-
   </UTabs>
+  <UDashboardPanelContent v-else style="overflow-x: hidden;">
+    <div v-for="sub in dataType.showTabs" :key="sub.key">
+      <div v-if="sub.label === 'Informationen'">
+
+        <EntityShowSubInformation
+            :top-level-type="type"
+            :item="props.item"
+            :platform="platform"
+        />
+
+        <EntityShowSubHistoryDisplay
+            :top-level-type="type"
+            :item="props.item"
+            :platform="platform"
+        />
+      </div>
+
+      <EntityShowSubFiles
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          v-else-if="sub.label === 'Dateien'"
+          :top-level-type="type"
+          type="files"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <EntityShowSubPhases
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="sub.label === 'Phasen'"
+          :query-string-data="getAvailableQueryStringData()"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <EntityShowSubCreatedDocuments
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="sub.label === 'Ausgangsbelege'"
+          :query-string-data="getAvailableQueryStringData()"
+          :platform="platform"
+      />
+      <EntityShowSubCostCentreReport
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="sub.label === 'Auswertung Kostenstelle'"
+          :platform="platform"
+      />
+
+      <EntityShowSub
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          :tab-label="sub.label"
+          :top-level-type="type"
+          v-else
+          :platform="platform"
+      />
+    </div>
+
+  </UDashboardPanelContent>
 
 </template>
 
 <style scoped>
-td {
-  border-bottom: 1px solid lightgrey;
-  vertical-align: top;
-  padding-bottom: 0.15em;
-  padding-top: 0.15em;
-}
 
-.scroll {
-  height: 80vh;
-  overflow-y: scroll;
-  padding: 0.3em;
-}
+
 </style>

components/EntityShowSub.vue

@@ -0,0 +1,125 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  tabLabel: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+let type = ref("")
+
+
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+let dataType = null
+
+const selectedColumns = ref(null)
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+const loaded = ref(false)
+
+const setup = () => {
+  if(!props.type && props.tabLabel ) {
+    if(props.tabLabel === "Aufgaben") {
+      type.value = "tasks"
+    } else if(props.tabLabel === "Projekte") {
+      type.value = "projects"
+    } else if(props.tabLabel === "Termine") {
+      type.value = "events"
+    } else if(props.tabLabel === "Objekte") {
+      type.value = "plants"
+    } else if(props.tabLabel === "Ansprechpartner") {
+      type.value = "contacts"
+    } else if(props.tabLabel === "Verträge") {
+      type.value = "contracts"
+    } else if(props.tabLabel === "Überprüfungen") {
+      type.value = "checks"
+    }
+  } else {
+    type.value = props.type
+  }
+
+  dataType = dataStore.dataTypes[type.value]
+
+  selectedColumns.value = tempStore.columns[type.value] ? tempStore.columns[type.value] : dataType.templateColumns.filter(i => !i.disabledInTable)
+
+  loaded.value = true
+}
+
+setup()
+
+
+</script>
+
+<template>
+  <UCard class="mt-5" v-if="loaded" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>{{dataType.label}}</span>
+    </template>
+    <Toolbar>
+      <UButton
+          @click="router.push(`/standardEntity/${type}/create?${props.queryStringData}`)"
+      >
+        + {{dataType.labelSingle}}
+      </UButton>
+      <UButton
+          v-if="props.topLevelType === 'customers' && type === 'plants'"
+          @click="router.push(`/standardEntity/plants/create?${props.queryStringData}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
+      >
+        + Kundenadresse als Objekt
+      </UButton>
+
+      <template #right>
+        <USelectMenu
+            v-model="selectedColumns"
+            icon="i-heroicons-adjustments-horizontal-solid"
+            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            multiple
+            class="hidden lg:block"
+            by="key"
+            :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
+            :ui-menu="{ width: 'min-w-max' }"
+            @change="tempStore.modifyColumns(type,selectedColumns)"
+        >
+          <template #label>
+            Spalten
+          </template>
+        </USelectMenu>
+      </template>
+
+    </Toolbar>
+    <EntityTable
+      :type="type"
+      :columns="columns"
+      :rows="props.item[type]"
+    />
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>

components/EntityShowSubCostCentreReport.vue

@@ -0,0 +1,35 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Auswertung</span>
+    </template>
+    <costcentre-display :item="props.item"/>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>

components/EntityShowSubCreatedDocuments.vue

@@ -0,0 +1,235 @@
+<script setup>
+
+import dayjs from "dayjs";
+import {useSum} from "~/composables/useSum.js";
+import {useSupabaseSelect} from "~/composables/useSupabase.js";
+defineShortcuts({
+  /*'/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },*/
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/standardEntity/${props.topLevelType}/show/${props.item.createddocuments.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < props.item.createddocuments.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = props.item.createddocuments.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+const createddocuments = ref([])
+
+const setup = async () => {
+  createddocuments.value = await useSupabaseSelect("createddocuments")
+}
+setup()
+
+const templateColumns = [
+  {
+    key: "reference",
+    label: "Referenz",
+    sortable: true
+  },
+  {
+    key: 'type',
+    label: "Typ",
+    sortable: true
+  },{
+    key: 'state',
+    label: "Status",
+    sortable: true
+  },
+  {
+    key: "date",
+    label: "Datum",
+    sortable: true
+  },
+  {
+    key: "dueDate",
+    label: "Fällig",
+    sortable: true
+  }
+]
+const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
+
+const selectedItem = ref(0)
+
+const getAvailableQueryStringData = (keys) => {
+  let returnString = props.queryStringData
+
+  function addParam (key,value) {
+    if(returnString.length  === 0) {
+      returnString += `${key}=${value}`
+    } else {
+      returnString += `&${key}=${value}`
+
+    }
+  }
+
+  if(keys) {
+    Object.keys(keys).forEach(key => {
+      addParam(key, keys[key])
+    })
+  }
+
+  return returnString
+
+}
+
+const invoiceDeliveryNotes = () => {
+  router.push(`/createDocument/edit?type=invoices&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
+}
+
+
+</script>
+
+<template>
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Ausgangsbelege</span>
+    </template>
+    <Toolbar>
+      <UButton
+          @click="invoiceDeliveryNotes"
+          v-if="props.topLevelType === 'projects'"
+      >
+        Lieferscheine abrechnen
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
+      >
+        + Angebot
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
+      >
+        + Auftragsbestätigung
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
+      >
+        + Lieferschein
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
+      >
+        + Abschlagsrechnung
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
+      >
+        + Rechnung
+      </UButton>
+
+      <template #right>
+        <USelectMenu
+            v-model="selectedColumns"
+            icon="i-heroicons-adjustments-horizontal-solid"
+            :options="templateColumns"
+            multiple
+            class="hidden lg:block"
+            by="key"
+            @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
+        >
+          <template #label>
+            Spalten
+          </template>
+        </USelectMenu>
+      </template>
+    </Toolbar>
+
+    <UTable
+        :rows="props.item.createddocuments"
+        :columns="columns"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="selectItem"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+    >
+      <template #type-data="{row}">
+        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      </template>
+      <template #state-data="{row}">
+        <span
+            v-if="row.state === 'Entwurf'"
+            class="text-rose-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+            v-if="row.state === 'Gebucht'"
+            class="text-cyan-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+            v-if="row.state === 'Abgeschlossen'"
+            class="text-primary-500"
+        >
+          {{row.state}}
+        </span>
+      </template>
+      <template #reference-data="{row}">
+        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
+        <span v-else>{{row.documentNumber}}</span>
+      </template>
+      <template #date-data="{row}">
+        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
+        <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+      </template>
+      <template #dueDate-data="{row}">
+        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+      </template>
+<!--      <template #amount-data="{row}">
+        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+      </template>-->
+    </UTable>
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>

components/EntityShowSubFiles.vue

@@ -0,0 +1,70 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(["updateNeeded"])
+
+const files = useFiles()
+
+
+const availableFiles = ref([])
+
+const setup = async () => {
+  if(props.item.files) {
+    availableFiles.value = await files.selectSomeDocuments(props.item.files.map(i => i.id)) || []
+  }
+}
+
+setup()
+
+</script>
+
+<template>
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Dateien</span>
+    </template>
+    <Toolbar>
+      <DocumentUpload
+          :type="props.type.substring(0,props.type.length-1)"
+          :element-id="props.item.id"
+          @uploadFinished="emit('updateNeeded')"
+      />
+    </Toolbar>
+
+    <DocumentList
+        :key="props.item.files.length"
+        :documents="availableFiles"
+        v-if="availableFiles.length > 0"
+    />
+    <UAlert
+        v-else
+        icon="i-heroicons-x-mark"
+        title="Keine Dateien verfügbar"
+    />
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>

components/EntityShowSubHistoryDisplay.vue

@@ -0,0 +1,42 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+
+const dataType = dataStore.dataTypes[props.topLevelType]
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <HistoryDisplay
+        :type="props.topLevelType.substring(0,props.topLevelType.length-1)"
+        v-if="props.item.id"
+        :element-id="props.item.id"
+        render-headline
+    />
+<!--TODO Workaround für die Höhe finden? Evt unterseite oder Modal oder ganz nach unten    -->
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>

components/EntityShowSubInformation.vue

@@ -0,0 +1,77 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+const dataType = dataStore.dataTypes[props.topLevelType]
+
+// const selectedColumns = ref(tempStore.columns[props.topLevelType] ? tempStore.columns[props.topLevelType] : dataType.templateColumns.filter(i => !i.disabledInTable))
+// const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Informationen</span>
+    </template>
+    <UAlert
+        v-if="props.item.archived"
+        color="rose"
+        variant="outline"
+        :title="`${dataType.labelSingle} archiviert`"
+        icon="i-heroicons-archive-box"
+        class="mb-5"
+    />
+    <div class="text-wrap">
+      <table class="w-full">
+        <tbody>
+        <tr
+            v-for="datapoint in dataType.templateColumns"
+        >
+          <td>{{datapoint.label}}:</td>
+          <td>
+            <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
+            <div v-else>
+              <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
+              <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+
+      </table>
+    </div>
+
+  </UCard>
+
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>

components/EntityShowSubPhases.vue

@@ -0,0 +1,167 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(["updateNeeded"]);
+
+const router = useRouter()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+
+const renderedPhases = computed(() => {
+  if(props.topLevelType === "projects" && props.item.phases) {
+    return props.item.phases.map((phase,index,array) => {
+
+      let isAvailable = false
+
+      if(phase.active) {
+        isAvailable = true
+      } else if(index > 0 && array[index-1].active ){
+        isAvailable = true
+      } else if(index > 1 && array[index-1].optional && array[index-2].active){
+        isAvailable = true
+      } else if(array.findIndex(i => i.active) > index) {
+        isAvailable = true
+      } else if(phase.label === "Abgeschlossen") {
+        isAvailable = true
+      }
+
+
+      return {
+        ...phase,
+        label: phase.optional ? `${phase.label}(optional)`: phase.label,
+        disabled: !isAvailable,
+        defaultOpen: phase.active ? true : false
+      }
+    })
+  } else {
+    return []
+  }
+})
+
+const changeActivePhase = async (key) => {
+  let item = await useSupabaseSelectSingle("projects",props.item.id,'*')
+
+  let phaseLabel = ""
+
+  item.phases = item.phases.map(p => {
+    if(p.active) p.active = false
+
+    if(p.key === key) {
+      p.active = true
+      p.activated_at = dayjs().format()
+      p.activated_by = profileStore.activeProfile.id
+      phaseLabel = p.label
+    }
+
+    return p
+  })
+
+  const {error:updateError} = await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
+
+
+
+  const {error} = await supabase.from("historyitems").insert({
+    createdBy: profileStore.activeProfile.id,
+    tenant: profileStore.currentTenant,
+    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
+    project: item.id
+  })
+
+  emit("updateNeeded")
+
+}
+
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Phasen</span>
+    </template>
+    <UAccordion
+        :items="renderedPhases"
+    >
+      <template #default="{item,index,open}">
+        <UButton
+            variant="ghost"
+            :color="item.active ? 'primary' : 'white'"
+            class="mb-1"
+            :disabled="true"
+        >
+          <template #leading>
+            <div class="w-6 h-6  flex items-center justify-center -my-1">
+              <UIcon :name="item.icon" class="w-4 h-4 " />
+            </div>
+          </template>
+
+          <span class="truncate"> {{item.label}}</span>
+
+          <template #trailing>
+            <UIcon
+                name="i-heroicons-chevron-right-20-solid"
+                class="w-5 h-5 ms-auto transform transition-transform duration-200"
+                :class="[open && 'rotate-90']"
+            />
+          </template>
+
+        </UButton>
+      </template>
+      <template #item="{item, index}">
+        <UCard class="mx-5">
+          <template #header>
+            <span class="dark:text-white text-black">{{item.label}}</span>
+          </template>
+          <InputGroup>
+            <!-- TODO: Reactive Change Phase                  -->
+            <UButton
+                v-if="!item.activated_at && index !== 0 "
+                @click="changeActivePhase(item.key)"
+            >
+              Phase aktivieren
+            </UButton>
+            <UButton
+                v-if="item.active"
+                v-for="button in item.quickactions"
+                @click="router.push(`${button.link}&${props.queryStringData}`)"
+            >
+              {{button.label}}
+            </UButton>
+          </InputGroup>
+
+          <div>
+            <p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
+            <p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
+            <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
+          </div>
+        </UCard>
+
+
+      </template>
+    </UAccordion>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>

components/EntityTable.vue

@@ -0,0 +1,110 @@
+<script setup>
+  defineShortcuts({
+    /*'/': () => {
+      //console.log(searchinput)
+      //searchinput.value.focus()
+      document.getElementById("searchinput").focus()
+    },*/
+    'Enter': {
+      usingInput: true,
+      handler: () => {
+        router.push(`/standardEntity/${props.type}/show/${props.rows.value[selectedItem.value].id}`)
+      }
+    },
+    'arrowdown': () => {
+      if(selectedItem.value < props.rows.length - 1) {
+        selectedItem.value += 1
+      } else {
+        selectedItem.value = 0
+      }
+    },
+    'arrowup': () => {
+      if(selectedItem.value === 0) {
+        selectedItem.value = props.rows.length - 1
+      } else {
+        selectedItem.value -= 1
+      }
+    }
+  })
+
+  const props = defineProps({
+    rows: {
+      type: Array,
+      required: true,
+      default: []
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    }
+  })
+
+  const dataStore = useDataStore()
+
+  const router = useRouter()
+
+  const dataType = dataStore.dataTypes[props.type]
+
+  const selectedItem = ref(0)
+
+
+</script>
+
+<template>
+  <UTable
+      v-if="dataType && columns"
+      :rows="props.rows"
+      :columns="props.columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `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}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.name}}
+      </span>
+      <span v-else>
+        {{row.name}}
+      </span>
+    </template>
+    <template #fullName-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.fullName}}
+      </span>
+      <span v-else>
+        {{row.fullName}}
+      </span>
+    </template>
+    <template #licensePlate-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.licensePlate}}
+      </span>
+      <span v-else>
+        {{row.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>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>

components/Toolbar.vue

@@ -3,9 +3,14 @@
 </script>
 
 <template>
-  <InputGroup>
-    <slot/>
-  </InputGroup>
+  <div class="flex flex-row justify-between">
+    <InputGroup>
+      <slot />
+    </InputGroup>
+    <InputGroup>
+      <slot name="right"/>
+    </InputGroup>
+  </div>
   <UDivider class="my-3"/>
 </template>
 

components/displayWelcome.vue

@@ -0,0 +1,26 @@
+<script setup>
+
+const supabase = useSupabaseClient()
+const router = useRouter()
+const profileStore = useProfileStore()
+
+const tenant = ref({})
+
+const setupPage = async () => {
+  tenant.value = (await supabase.from("tenants").select().eq("id",profileStore.currentTenant).single()).data
+}
+
+setupPage()
+
+</script>
+
+<template>
+  <div>
+    <h1 class="font-bold text-xl">Willkommen zurück {{profileStore.activeProfile.fullName}}</h1>
+    <span v-if="tenant.id">bei {{tenant.name}}</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/mobile/FloatingActionButton.vue

@@ -0,0 +1,47 @@
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+  },
+  variant: {
+    type: String,
+    default: 'solid'
+  },
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  pos: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['click'])
+
+</script>
+
+<template>
+  <UButton
+      id="fab"
+      :icon="props.icon"
+      :label="props.label"
+      :variant="props.variant"
+      :color="props.color"
+      @click="emit('click')"
+      :style="`bottom: ${15 + props.pos * 5}vh;`"
+      class="bg-white dark:bg-gray-950"
+  />
+</template>
+
+<style scoped>
+#fab {
+  position: fixed;
+  right: 15px;
+  z-index: 5;
+}
+</style>