From a3bec6a9b1fb557208d8d0613d5d4465de182f23 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Fri, 28 Mar 2025 17:05:08 +0100
Subject: [PATCH] Introduced EntityShowSubComponents

---
 components/EntityShow.vue                    | 470 ++-----------------
 components/EntityShowSub.vue                 | 118 +++++
 components/EntityShowSubCostCentreReport.vue |  28 ++
 components/EntityShowSubCreatedDocuments.vue | 228 +++++++++
 components/EntityShowSubFiles.vue            |  63 +++
 components/EntityShowSubHistoryDisplay.vue   |  37 ++
 components/EntityShowSubInformation.vue      |  70 +++
 components/EntityShowSubPhases.vue           | 160 +++++++
 8 files changed, 745 insertions(+), 429 deletions(-)
 create mode 100644 components/EntityShowSub.vue
 create mode 100644 components/EntityShowSubCostCentreReport.vue
 create mode 100644 components/EntityShowSubCreatedDocuments.vue
 create mode 100644 components/EntityShowSubFiles.vue
 create mode 100644 components/EntityShowSubHistoryDisplay.vue
 create mode 100644 components/EntityShowSubInformation.vue
 create mode 100644 components/EntityShowSubPhases.vue

diff --git a/components/EntityShow.vue b/components/EntityShow.vue
index e42bc5e..a15ef55 100644
--- a/components/EntityShow.vue
+++ b/components/EntityShow.vue
@@ -1,5 +1,4 @@
 <script setup>
-import dayjs from "dayjs";
 
 const props = defineProps({
   type: {
@@ -37,95 +36,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 =""
@@ -232,362 +149,57 @@ const getAvailableQueryStringData = (keys) => {
       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"
+        />
 
-          </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?${getAvailableQueryStringData()}`)"
-              >
-                + 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?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
-              >
-                + 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"/>
       </div>
 
+      <EntityShowSubFiles
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          v-else-if="tab.label === 'Dateien'"
+          :top-level-type="type"
+          type="files"
+          @updateNeeded="emit('updateNeeded')"
+      />
+      <EntityShowSubPhases
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="tab.label === 'Phasen'"
+          :query-string-data="getAvailableQueryStringData()"
+          @updateNeeded="emit('updateNeeded')"
+      />
+      <EntityShowSubCreatedDocuments
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="tab.label === 'Ausgangsbelege'"
+          :query-string-data="getAvailableQueryStringData()"
+      />
+      <EntityShowSubCostCentreReport
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="tab.label === 'Auswertung Kostenstelle'"
+      />
 
-
+      <EntityShowSub
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          :tab-label="tab.label"
+          :top-level-type="type"
+          v-else
+      />
     </template>
-
   </UTabs>
 
 </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>
\ No newline at end of file
diff --git a/components/EntityShowSub.vue b/components/EntityShowSub.vue
new file mode 100644
index 0000000..d98a5a9
--- /dev/null
+++ b/components/EntityShowSub.vue
@@ -0,0 +1,118 @@
+<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
+  }
+})
+
+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="height: 80vh">
+    <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>
\ No newline at end of file
diff --git a/components/EntityShowSubCostCentreReport.vue b/components/EntityShowSubCostCentreReport.vue
new file mode 100644
index 0000000..6ba114a
--- /dev/null
+++ b/components/EntityShowSubCostCentreReport.vue
@@ -0,0 +1,28 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" style="height: 80vh">
+    <costcentre-display :item="props.item"/>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/EntityShowSubCreatedDocuments.vue b/components/EntityShowSubCreatedDocuments.vue
new file mode 100644
index 0000000..0d790e8
--- /dev/null
+++ b/components/EntityShowSubCreatedDocuments.vue
@@ -0,0 +1,228 @@
+<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
+  }
+})
+
+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="height: 80vh">
+    <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>
\ No newline at end of file
diff --git a/components/EntityShowSubFiles.vue b/components/EntityShowSubFiles.vue
new file mode 100644
index 0000000..df19a97
--- /dev/null
+++ b/components/EntityShowSubFiles.vue
@@ -0,0 +1,63 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  topLevelType: {
+    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="height: 80vh">
+    <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>
\ No newline at end of file
diff --git a/components/EntityShowSubHistoryDisplay.vue b/components/EntityShowSubHistoryDisplay.vue
new file mode 100644
index 0000000..3aa9b7b
--- /dev/null
+++ b/components/EntityShowSubHistoryDisplay.vue
@@ -0,0 +1,37 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+
+const dataType = dataStore.dataTypes[props.topLevelType]
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" style="height: 80vh">
+    <HistoryDisplay
+        :type="props.topLevelType.substring(0,props.topLevelType.length-1)"
+        v-if="props.item.id"
+        :element-id="props.item.id"
+        render-headline
+    />
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/EntityShowSubInformation.vue b/components/EntityShowSubInformation.vue
new file mode 100644
index 0000000..b34d05a
--- /dev/null
+++ b/components/EntityShowSubInformation.vue
@@ -0,0 +1,70 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    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="height: 80vh">
+    <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>
\ No newline at end of file
diff --git a/components/EntityShowSubPhases.vue b/components/EntityShowSubPhases.vue
new file mode 100644
index 0000000..5bb92e0
--- /dev/null
+++ b/components/EntityShowSubPhases.vue
@@ -0,0 +1,160 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    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="height: 80vh">
+    <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>
\ No newline at end of file