From 61793838bb32271c8de82002bb96041c99028b48 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Fri, 5 Jan 2024 18:06:09 +0100
Subject: [PATCH] Many Changes Introduced Plants Some Polishing Some Resources
 got Query Params Extended GlobalSearch.vue Removed Jobs

---
 spaces/app.vue                                |  11 +-
 spaces/components/GlobalSearch.vue            |  24 +-
 spaces/components/noAutoLoad/BlockEditor.vue  |  64 +++
 .../noAutoLoad/EditorJsOwn.client.vue         |  53 ++
 spaces/nuxt.config.ts                         |   2 +-
 spaces/pages/contacts/[mode]/[[id]].vue       |   6 +
 spaces/pages/customers/[mode]/[[id]].vue      |  14 +
 spaces/pages/employees/timetracking.vue       |  38 +-
 spaces/pages/plants/[mode]/[[id]].vue         | 185 ++++++
 spaces/pages/{jobs => plants}/index.vue       |  19 +-
 spaces/pages/projects/[mode]/[[id]].vue       | 528 ++++++++++++++++++
 .../{[id].vue => [mode]/deprecated.vue}       |   0
 spaces/pages/projects/index.vue               | 158 ++----
 spaces/pages/tasks.vue                        | 324 -----------
 .../pages/{jobs => tasks}/[mode]/[[id]].vue   | 113 ++--
 spaces/pages/tasks/index.vue                  | 113 ++++
 spaces/pages/vendorinvoices/index.vue         |   2 +-
 spaces/pages/vendors/[mode]/[[id]].vue        |   8 +
 spaces/stores/data.ts                         |  46 +-
 19 files changed, 1166 insertions(+), 542 deletions(-)
 create mode 100644 spaces/components/noAutoLoad/BlockEditor.vue
 create mode 100644 spaces/components/noAutoLoad/EditorJsOwn.client.vue
 create mode 100644 spaces/pages/plants/[mode]/[[id]].vue
 rename spaces/pages/{jobs => plants}/index.vue (69%)
 create mode 100644 spaces/pages/projects/[mode]/[[id]].vue
 rename spaces/pages/projects/{[id].vue => [mode]/deprecated.vue} (100%)
 delete mode 100644 spaces/pages/tasks.vue
 rename spaces/pages/{jobs => tasks}/[mode]/[[id]].vue (50%)
 create mode 100644 spaces/pages/tasks/index.vue

diff --git a/spaces/app.vue b/spaces/app.vue
index e3607ea..e861dd1 100644
--- a/spaces/app.vue
+++ b/spaces/app.vue
@@ -115,16 +115,16 @@ const navLinks = [
         to: "/projects",
         icon: "i-heroicons-clipboard-document-check"
       },
-      {
-        label: "Jobs",
-        to: "/jobs",
-        icon: "i-heroicons-square-3-stack-3d"
-      },
       {
         label: "Verträge",
         to: "/contracts",
         icon: "i-heroicons-clipboard-document"
       },
+      {
+        label: "Anlagen",
+        to: "/plants",
+        icon: "i-heroicons-clipboard-document"
+      },
     ]
   },
   {
@@ -525,7 +525,6 @@ const items = [
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  height: 85vh;
   overflow-y: scroll;
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
diff --git a/spaces/components/GlobalSearch.vue b/spaces/components/GlobalSearch.vue
index 3558064..d19d393 100644
--- a/spaces/components/GlobalSearch.vue
+++ b/spaces/components/GlobalSearch.vue
@@ -23,7 +23,7 @@ const actions = [
   {
     id: 'new-customer',
     label: 'Kunde hinzufügen',
-    icon: 'i-heroicons-document-plus',
+    icon: 'i-heroicons-user-group',
     to: "/customers/create" ,
   },
   {
@@ -35,9 +35,21 @@ const actions = [
   {
     id: 'new-contact',
     label: 'Ansprechpartner hinzufügen',
-    icon: 'i-heroicons-user',
+    icon: 'i-heroicons-user-group',
     to: "/contacts/create" ,
   },
+  {
+    id: 'new-task',
+    label: 'Aufgabe hinzufügen',
+    icon: 'i-heroicons-rectangle-stack',
+    to: "/tasks/create" ,
+  },
+  {
+    id: 'new-plant',
+    label: 'Anlage hinzufügen',
+    icon: 'i-heroicons-clipboard-document',
+    to: "/plants/create" ,
+  },
   {
     id: 'new-product',
     label: 'Artikel hinzufügen',
@@ -67,6 +79,14 @@ const groups = computed(() =>
       key: "products",
       label: "Artikel",
       commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
+    },{
+      key: "tasks",
+      label: "Aufgaben",
+      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
+    },{
+      key: "plants",
+      label: "Anlagen",
+      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
     }
     ].filter(Boolean))
 
diff --git a/spaces/components/noAutoLoad/BlockEditor.vue b/spaces/components/noAutoLoad/BlockEditor.vue
new file mode 100644
index 0000000..3b42300
--- /dev/null
+++ b/spaces/components/noAutoLoad/BlockEditor.vue
@@ -0,0 +1,64 @@
+<script setup>
+
+const props = defineProps({
+  data: {
+    required: true,
+    type: Object
+  }
+})
+
+const {data} = props
+
+const changesSaved = ref(true)
+
+
+
+
+const default_data = {
+  time: 1660335428612,
+  blocks: [
+    {
+      id: "MnGi61oxdF",
+      type: "header",
+      data: {
+        text: "Willkommen im Dokumentations Editor",
+        level: 1,
+      },
+    }
+
+  ],
+  version: "1.0.0",
+};
+const newProjectDescription = ref(data|| default_data.value);
+
+const saveProjectDescription = async () => {
+  //Update Project Description
+  /*const {data:updateData,error:updateError} = await supabase
+      .from("projects")
+      .update({description: newProjectDescription.value})
+      .eq('id',currentProject.id)
+      .select()
+
+  console.log(updateData)
+  console.log(updateError)*/
+
+
+
+};
+</script>
+
+<template>
+  <UButton
+      :disabled="false/*newProjectDescription.time === currentProject.description.time*/"
+      @click="saveProjectDescription"
+  >
+    Speichern
+  </UButton>
+  <client-only><EditorJsOwn v-model="newProjectDescription" /></client-only>
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/components/noAutoLoad/EditorJsOwn.client.vue b/spaces/components/noAutoLoad/EditorJsOwn.client.vue
new file mode 100644
index 0000000..ca6069b
--- /dev/null
+++ b/spaces/components/noAutoLoad/EditorJsOwn.client.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="editor"></div>
+</template>
+
+<script setup>
+import EditorJS from "@editorjs/editorjs";
+import Header from "@editorjs/header";
+import List from "@editorjs/list";
+
+import { onMounted } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    default: {},
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+onMounted(() => {
+  const editor = new EditorJS({
+    holder: "editor",
+    minHeight: 0,
+    tools: {
+      header: Header,
+      list: List,
+    },
+    onChange: (api, event) => {
+      api.saver.save().then(async (data) => {
+        emit("update:modelValue", data);
+      });
+    },
+    data: props.modelValue,
+    logLevel: "ERROR",
+  });
+});
+</script>
+
+<style>
+.codex-editor path {
+  stroke: #69c350;
+}
+
+/*.ce-block {
+  margin-bottom: 1em;
+}
+
+.ce-paragraph, .ce-header {
+  outline: 1px solid #69c350 !important;
+  border-radius: 5px;
+  padding: .5em;
+
+}*/
+</style>
\ No newline at end of file
diff --git a/spaces/nuxt.config.ts b/spaces/nuxt.config.ts
index 0e43e18..054a3b1 100644
--- a/spaces/nuxt.config.ts
+++ b/spaces/nuxt.config.ts
@@ -32,7 +32,7 @@ export default defineNuxtConfig({
     },
     vite: {
         optimizeDeps: {
-            include: ["@editorjs/editorjs"],
+            include: ["@editorjs/editorjs", "dayjs"],
         },
     },
     ui: {
diff --git a/spaces/pages/contacts/[mode]/[[id]].vue b/spaces/pages/contacts/[mode]/[[id]].vue
index 10a2de8..ac37ff7 100644
--- a/spaces/pages/contacts/[mode]/[[id]].vue
+++ b/spaces/pages/contacts/[mode]/[[id]].vue
@@ -30,7 +30,13 @@ const setupPage = () => {
 
   if(mode.value === "edit") itemInfo.value = currentContact
 
+  if(mode.value === "create") {
+    let query = route.query
 
+    if(query.customer) itemInfo.value.customer = Number(query.customer)
+    if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
+
+  }
 
 }
 
diff --git a/spaces/pages/customers/[mode]/[[id]].vue b/spaces/pages/customers/[mode]/[[id]].vue
index ab9b755..c36413c 100644
--- a/spaces/pages/customers/[mode]/[[id]].vue
+++ b/spaces/pages/customers/[mode]/[[id]].vue
@@ -112,6 +112,20 @@ setupPage()
       {{currentCustomer.name}}
     </template>
 
+    <InputGroup>
+      <UButton
+        @click="router.push(`/projects/create?customer=${currentCustomer.id}`)"
+      >
+        + Projekt
+      </UButton>
+      <UButton
+        @click="router.push(`/contacts/create?customer=${currentCustomer.id}`)"
+      >
+        + Ansprechpartner
+      </UButton>
+    </InputGroup>
+
+
     Kundennummer: {{currentCustomer.customerNumber}} <br>
 
     <UDivider
diff --git a/spaces/pages/employees/timetracking.vue b/spaces/pages/employees/timetracking.vue
index 320f4c0..c2f8fce 100644
--- a/spaces/pages/employees/timetracking.vue
+++ b/spaces/pages/employees/timetracking.vue
@@ -70,10 +70,6 @@ const columns = [
     key: "projectId",
     label: "Projekt"
   },
-  {
-    key: "job",
-    label: "Job"
-  },
   {
     key: "notes",
     label: "Notizen"
@@ -211,20 +207,6 @@ const format = (date) => {
       </USelectMenu>
     </UFormGroup>
 
-    <UFormGroup
-        label="Job:"
-    >
-      <USelectMenu
-          :options="dataStore.jobs"
-          option-attribute="title"
-          value-attribute="id"
-          v-model="runningTimeInfo.job"
-      >
-        <template #label>
-          {{ dataStore.jobs.find(job => job.id === runningTimeInfo.job) ? dataStore.jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
-        </template>
-      </USelectMenu>
-    </UFormGroup>
 
     <UFormGroup
         label="Kategorie:"
@@ -315,20 +297,6 @@ const format = (date) => {
           </template>
         </USelectMenu>
       </UFormGroup>
-      <UFormGroup
-          label="Job:"
-      >
-        <USelectMenu
-            :options="dataStore.jobs"
-            option-attribute="title"
-            value-attribute="id"
-            v-model="createTimeInfo.job"
-        >
-          <template #label>
-            {{ dataStore.jobs.find(job => job.id === runningTimeInfo.job) ? dataStore.jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
       <UFormGroup
           label="Typ:"
       >
@@ -380,12 +348,12 @@ const format = (date) => {
     <template #end-data="{row}">
       {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
     </template>
+    <template #duration-data="{row}">
+      {{`${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h`}}
+    </template>
     <template #projectId-data="{row}">
       {{dataStore.projects.find(project => project.id === row.projectId) ? dataStore.projects.find(project => project.id === row.projectId).name : ""}}
     </template>
-    <template #job-data="{row}">
-      {{dataStore.jobs.find(job => job.id === row.job) ? dataStore.jobs.find(job => job.id === row.job).title : ""}}
-    </template>
   </UTable>
 </template>
 
diff --git a/spaces/pages/plants/[mode]/[[id]].vue b/spaces/pages/plants/[mode]/[[id]].vue
new file mode 100644
index 0000000..765ab6c
--- /dev/null
+++ b/spaces/pages/plants/[mode]/[[id]].vue
@@ -0,0 +1,185 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+let currentItem = null
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  customer: 0,
+
+})
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem = dataStore.getPlantById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem
+
+
+
+}
+
+const createItem = async () => {
+  const {data,error} = await supabase
+      .from("plants")
+      .insert([itemInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {
+      id: 0,
+      title: "",
+    }
+    toast.add({title: "Anlage erfolgreich erstellt"})
+    await dataStore.fetchPlants()
+    router.push(`/plants/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editItem = async () => {
+  router.push(`/plants/edit/${currentItem.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  mode.value = "show"
+  itemInfo.value = {
+    id: 0,
+    infoData: {}
+  }
+}
+
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("plants")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  }
+
+
+  router.push(`/plants/show/${currentItem.id}`)
+  toast.add({title: "Anlage erfolgreich gespeichert"})
+  dataStore.fetchPlants()
+}
+
+
+
+setupPage()
+</script>
+
+<template>
+  <UCard v-if="currentItem && mode == 'show'" class="h-full">
+    <template #header>
+      {{currentItem.name}}
+    </template>
+
+    <InputGroup>
+      <UButton
+        @click="router.push(`/projects/create?plant=${currentItem.id}`)"
+      >
+        + Projekt
+      </UButton>
+    </InputGroup>
+
+    {{currentItem}}
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'show' && currentItem.id"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+      <UButton
+          color="red"
+          class="ml-2"
+          disabled
+      >
+        Archivieren
+      </UButton>
+      <!-- TODO: Kunde archivieren        -->
+    </template>
+
+
+
+  </UCard>
+  <UCard v-else-if="mode === 'edit' || mode === 'create'" class="h-full">
+    <template #header v-if="mode === 'edit'">
+      {{itemInfo.name}}
+    </template>
+
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Kundennummer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.customer"
+          :options="dataStore.customers"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="updateItem"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="createItem"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/pages/jobs/index.vue b/spaces/pages/plants/index.vue
similarity index 69%
rename from spaces/pages/jobs/index.vue
rename to spaces/pages/plants/index.vue
index ab45c1a..e838bcc 100644
--- a/spaces/pages/jobs/index.vue
+++ b/spaces/pages/plants/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="main">
 
-    <UButton @click="router.push(`/jobs/create/`)">+ Job</UButton>
+    <UButton @click="router.push(`/plants/create/`)">+ Anlage</UButton>
 
     <UTable
-        :rows="dataStore.jobs"
+        :rows="dataStore.plants"
         :columns="columns"
-        @select="selectJob"
+        @select="selectItem"
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
       <template #customer-data="{row}">
@@ -29,12 +29,8 @@ const mode = ref("show")
 
 const columns = [
   {
-    key: "title",
-    label: "Titel",
-    sortable: true
-  },{
-    key: "state",
-    label: "Status",
+    key: "name",
+    label: "Name",
     sortable: true
   },{
     key: "customer",
@@ -44,9 +40,8 @@ const columns = [
 ]
 
 
-const selectJob = (job) => {
-  console.log(job)
-  router.push(`/jobs/show/${job.id} `)
+const selectItem = (item) => {
+  router.push(`/plants/show/${item.id} `)
 }
 </script>
 
diff --git a/spaces/pages/projects/[mode]/[[id]].vue b/spaces/pages/projects/[mode]/[[id]].vue
new file mode 100644
index 0000000..6b381cb
--- /dev/null
+++ b/spaces/pages/projects/[mode]/[[id]].vue
@@ -0,0 +1,528 @@
+<script setup>
+import * as dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+let currentItem = ref(null)
+
+const tabItems = [
+  /*{
+    key: "phases",
+    label: "Phasen"
+  },*/{
+    key: "tasks",
+    label: "Aufgaben"
+  },/*{
+    key: "forms",
+    label: "Formulare"
+  },*/{
+    key: "documents",
+    label: "Dokumente"
+  },{
+    key: "timetracking",
+    label: "Zeiterfassung"
+  }/*,{
+    key: "material",
+    label: "Material"
+  }*/
+]
+
+const timeTableRows = [
+  {
+    key:"user",
+    label: "Benutzer"
+  },{
+    key:"start",
+    label: "Start"
+  },{
+    key:"end",
+    label:"Ende"
+  },{
+    key:"duration",
+    label: "Dauer"
+  },{
+    key: "type",
+    label: "Typ"
+  },{
+    key:"notes",
+    label: "Notizen"
+  },
+]
+
+const taskColumns = [
+  {
+    key: "name",
+    label: "Name"
+  },{
+    key: "description",
+    label: "Beschreibung"
+  },{
+    key: "categorie",
+    label: "Kategorie"
+  }, {
+    key: "user",
+    label: "Benutzer"
+  }
+]
+
+
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  customer: 0,
+
+})
+
+const uploadModalOpen = ref(false)
+const fileUploadFormData = ref({
+  tags: ["Dokument"],
+  folder: "Projekte",
+  usedInResource: {
+    type: "Projekt",
+  }
+})
+const tags = dataStore.getDocumentTags
+
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem.value = dataStore.getProjectById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem.value
+
+  if(mode.value === "create") {
+    let query = route.query
+
+    if(query.customer) itemInfo.value.customer = Number(query.customer)
+
+    if(query.plant) {
+      itemInfo.value.plant = Number(query.plant)
+      itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
+    }
+  }
+
+
+}
+
+const createItem = async () => {
+  const {data,error} = await supabase
+      .from("projects")
+      .insert([itemInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {
+      id: 0,
+      title: "",
+    }
+    toast.add({title: "Projekt erfolgreich erstellt"})
+    await dataStore.fetchProjects()
+    router.push(`/projects/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editItem = async () => {
+  router.push(`/projects/edit/${currentItem.value.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  if(currentItem.value) {
+    router.push(`/projects/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/projects/`)
+  }
+}
+
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("projects")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  }
+
+
+  router.push(`/projects/show/${currentItem.value.id}`)
+  toast.add({title: "Projekt erfolgreich gespeichert"})
+  dataStore.fetchProjects()
+}
+
+const uploadFile = async () => {
+  const file = document.getElementById("fileUploadInput").files[0]
+
+  const {data,error} = await supabase
+      .storage
+      .from("documents")
+      .upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/${file.name}`,file)
+
+  console.log(data)
+  const returnPath = data.path
+
+  if(error) {
+
+  } else {
+    console.log(returnPath)
+    const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
+    console.log(files)
+    const fileId = files.find(temp => returnPath.includes(temp.name)).id
+
+    fileUploadFormData.value.object = fileId
+    fileUploadFormData.value.path = returnPath
+    fileUploadFormData.value.usedInResource.id = currentProject.id
+    console.log(fileUploadFormData.value)
+
+    const {data,error} = await supabase
+        .from("documents")
+        .insert([fileUploadFormData.value])
+        .select()
+    console.log(data)
+    console.log(error)
+  }
+
+  uploadModalOpen.value = false;
+}
+
+
+const projectHours = () => {
+  let hours = 0
+  dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
+    hours += Number(dayjs(item.end).diff(item.start,'hour',true).toFixed(2))
+  })
+
+  return hours
+}
+
+
+setupPage()
+</script>
+
+<template>
+  <UCard v-if="currentItem && mode == 'show'">
+    <template #header>
+      {{currentItem.name}}
+    </template>
+
+    <UTabs :items="tabItems" class="w-full">
+      <template #item="{ item }">
+        <!--
+                  <div v-if="item.key === 'phases'" class="space-y-3">
+                    <p>Hier wird aktuell noch gearbeitet</p>
+                    &lt;!&ndash;          <div id="phaseList">
+                      <a
+                          v-for="phase in []"
+                          @click="selectedPhase = phase"
+                      >
+                        <div
+                            class="phaseContainer"
+                        >
+                          <span>{{phase.name}} - {{phase.position}}</span>
+                        </div>
+
+                        <a class="plusIcon" @click="addPhase(phase)">
+
+                          <UDivider icon="i-heroicons-plus-circle"/>
+                        </a>
+                      </a>
+                    </div>&ndash;&gt;
+
+                  </div>
+        -->
+        <div v-if="item.key === 'tasks'" class="space-y-3">
+          <InputGroup>
+            <UButton
+              @click="router.push(`/tasks/create?project=${currentItem.id}`)"
+            >
+              + Aufgabe
+            </UButton>
+          </InputGroup>
+
+          <UTable
+              :rows="dataStore.getTasksByProjectId(currentItem.id)"
+              :columns="taskColumns"
+              @select="(row) => {
+              router.push(`/tasks/show/${row.id}`)
+            }"
+          >
+            <template #user-data="{row}">
+              {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
+            </template>
+          </UTable>
+
+        </div>
+
+        <div v-else-if="item.key === 'forms'" class="space-y-3">
+          <UButton
+              @click="formModalOpen = true"
+          >
+            + Formular
+          </UButton>
+          <UModal
+              v-model="formModalOpen"
+          >
+            <UCard>
+              <template #header>
+                Formular hinzufügen
+              </template>
+              <UFormGroup>
+                <USelectMenu
+                    :options="forms"
+                    option-attribute="name"
+                    value-attribute="id"
+                    v-model="newFormSubmissionData.formType"
+                />
+              </UFormGroup>
+              <template #footer>
+                <UButton
+                    @click="addNewFormSubmission"
+                >
+                  Hinzufügen
+                </UButton>
+              </template>
+            </UCard>
+          </UModal>
+
+
+          <UAccordion :items="formSubmissionsComposed">
+            <template #item="{item}">
+
+              <p class="my-3">Formular Link: <a :href="'https://app.spaces.software/formSubmissions/' + item.id">{{'https://app.spaces.software/formSubmissions/' + item.id}}</a></p>
+
+
+              <div v-if="Object.keys(item.values).length == 0">
+                <p>Es wurden noch keine Daten über das Formular abgegeben</p>
+              </div>
+
+              <table v-else>
+                <tr v-for="key in Object.keys(item.values)">
+                  <td>{{key}}</td>
+                  <td>{{ item.values[key] }}</td>
+                </tr>
+              </table>
+
+            </template>
+          </UAccordion>
+        </div>
+        <div v-else-if="item.key === 'documents'" class="space-y-3">
+          <UButton
+              @click="uploadModalOpen = true"
+          >
+            Hochladen
+          </UButton>
+          <UModal
+              v-model="uploadModalOpen"
+          >
+            <UCard class="p-4">
+
+              <template #header>
+                Datei hochladen
+              </template>
+
+              <UFormGroup
+                  label="Datei:"
+              >
+                <UInput
+                    type="file"
+                    id="fileUploadInput"
+                />
+              </UFormGroup>
+              <!--          <UFormGroup
+                          label="Name:"
+                          class="mt-3"
+                        >
+                          <UInput
+                              v-model="fileUploadFormData.name"
+                          />
+                        </UFormGroup>-->
+              <UFormGroup
+                  label="Tags:"
+                  class="mt-3"
+              >
+                <USelectMenu
+                    multiple
+                    searchable
+                    searchable-placeholder="Suchen..."
+                    :options="tags"
+                    v-model="fileUploadFormData.tags"
+                />
+              </UFormGroup>
+              <!--<UFormGroup
+                  label="Ordner:"
+                  class="mt-3"
+              >
+                <USelectMenu
+                    :options="folders"
+                    v-model="fileUploadFormData.folder"
+                    value-attribute="label"
+
+                />
+              </UFormGroup>-->
+
+              <template #footer>
+                <UButton
+                    class="mt-3"
+                    @click="uploadFile"
+                >Hochladen</UButton>
+              </template>
+
+
+            </UCard>
+
+          </UModal>
+
+
+          <div class="documentList">
+            <DocumentDisplay
+                v-for="document in dataStore.getDocumentsByProjectId(currentItem.id)"
+                :document="document"
+            />
+          </div>
+        </div>
+
+        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
+          Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
+          <UTable
+              :rows="dataStore.getTimesByProjectId(currentItem.id)"
+              :columns="timeTableRows"
+              :empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
+          >
+            <template #user-data="{row}">
+              {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
+            </template>
+            <template #duration-data="{row}">
+              {{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
+            </template>
+            <template #start-data="{row}">
+              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+            </template>
+            <template #end-data="{row}">
+              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+            </template>
+
+          </UTable>
+        </div>
+        <!--
+                  <div v-else-if="item.key === 'material'" class="space-y-3">
+                    <p>Hier wird aktuell noch gearbeitet</p>
+                  </div>
+        -->
+      </template>
+    </UTabs>
+
+
+
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'show' && currentItem.id"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+
+
+
+  </UCard>
+  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
+    <template #header v-if="mode === 'edit'">
+      {{itemInfo.name}}
+    </template>
+
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Kundennummer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.customer"
+          :options="dataStore.customers"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+    <UFormGroup
+        label="Anlage:"
+    >
+      <USelectMenu
+          v-model="itemInfo.plant"
+          :options="dataStore.plants"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Anlage auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+    <UFormGroup
+      label="Notizen:"
+    >
+      <UTextarea
+        v-model="itemInfo.notes"
+      />
+    </UFormGroup>
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="updateItem"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="createItem"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/pages/projects/[id].vue b/spaces/pages/projects/[mode]/deprecated.vue
similarity index 100%
rename from spaces/pages/projects/[id].vue
rename to spaces/pages/projects/[mode]/deprecated.vue
diff --git a/spaces/pages/projects/index.vue b/spaces/pages/projects/index.vue
index 87b1683..abfac66 100644
--- a/spaces/pages/projects/index.vue
+++ b/spaces/pages/projects/index.vue
@@ -1,63 +1,28 @@
 <template>
-  <div id="main">
-    <UButton @click="showCreateProject = true">+ Projekt</UButton>
-    <UModal v-model="showCreateProject">
-      <UCard>
-        <template #header>
-          Projekt erstellen
-        </template>
+  <InputGroup>
+    <UButton @click="router.push(`/projects/create/`)">+ Projekt</UButton>
 
-        <UFormGroup
-            label="Name:"
-        >
-          <UInput
-              v-model="createProjectData.name"
-          />
-        </UFormGroup>
-        <UFormGroup
-            label="Kunde:"
-        >
-          <USelectMenu
-              v-model="createProjectData.customer"
-              :options="dataStore.customers"
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              :search-attributes="['name']"
-          />
-        </UFormGroup>
-        <UFormGroup
-            label="Notizen:"
-        >
-          <UTextarea
-              v-model="createProjectData.notes"
-          />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton
-              @click="createProject"
-          >
-            Erstellen
-          </UButton>
-        </template>
-      </UCard>
-    </UModal>
-    <!-- TODO: USelect im Modal anpassen -->
-    <UTable
-        :rows="dataStore.projects"
-        :columns="projectColumns"
-        @select="selectProject"
-
-    >
-      <template #customer-data="{row}">
-        {{dataStore.customers.find(customer => customer.id == row.customer ) ? dataStore.customers.find(customer => customer.id == row.customer ).name : row.id}}
-      </template>
+    <UInput
+        v-model="searchString"
+        placeholder="Suche..."
+    />
+  </InputGroup>
 
 
-    </UTable>
-  </div>
 
+  <UTable
+      :rows="filteredRows"
+      @select="selectItem"
+      :columns="itemColumns"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+  >
+    <template #customer-data="{row}">
+      {{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
+    </template>
+    <template #plant-data="{row}">
+      {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
+    </template>
+  </UTable>
 </template>
 
 <script setup>
@@ -65,78 +30,57 @@
 definePageMeta({
   middleware: "auth"
 })
-
 const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
 
-const projectColumns = [
+const itemColumns = [
   {
-    key: 'measure',
-    label: "Gewerk",
-    sortable: true
-  },
-  {
-    key: 'name',
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "customer",
-    label: "Kundennummer",
-    sortable: true
+    key: "measure",
+    label: "Gewerk"
+  },{
+    key: "name",
+    label: "Name"
   },
   {
     key: "notes",
     label: "Notizen",
     sortable: true
+  },
+  {
+    key: "customer",
+    label: "Kunde",
+    sortable: true
+  },
+  {
+    key: "plant",
+    label: "Anlage",
+    sortable: true
   }
 ]
 
-const selectProject = (project) => {
-  router.push(`/projects/${project.id} `)
+const selectItem = (item) => {
+  console.log(item)
+  router.push(`/projects/show/${item.id} `)
 }
 
-const showCreateProject = ref(false)
-const createProjectData = ref({
-  phases: []
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return dataStore.projects
+  }
+
+  return dataStore.projects.filter(product => {
+    return Object.values(product).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
 })
 
-let selectedItem = ref({})
-
-const selectItem = (item) => {
-  selectedItem.value = item
-  console.log(item)
-}
-
-const createProject = async () => {
-  const {data,error} = await supabase
-      .from("projects")
-      .insert([createProjectData.value])
-      .select()
-
-  if(error) console.log(error)
-
-  showCreateProject.value = false
-  createProjectData.value = {phases: []}
-  dataStore.fetchProjects()
-
-
-}
 
 </script>
 
 <style scoped>
-/*#main {
-  display: flex;
-  flex-direction: row;
-}
-#left {
-  width: 25vw;
-}
 
-#right {
-  width: 60vw;
-  padding-left: 3vw;
-}*/
 </style>
\ No newline at end of file
diff --git a/spaces/pages/tasks.vue b/spaces/pages/tasks.vue
deleted file mode 100644
index 892a745..0000000
--- a/spaces/pages/tasks.vue
+++ /dev/null
@@ -1,324 +0,0 @@
-<template>
-  <UPage>
-    <!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
-    <UModal
-        v-model="showCreateTask"
-    >
-      <UCard>
-        <template #header>
-          Aufgabe erstellen
-        </template>
-
-        <UFormGroup
-            label="Titel:"
-            class="mt-2"
-        >
-          <UInput
-              v-model="createTaskData.name"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Beschreibung:"
-            class="mt-2"
-        >
-          <UTextarea
-              v-model="createTaskData.description"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Kategorie:"
-            class="mt-2"
-        >
-          <USelectMenu
-              :options="taskCategories"
-              v-model="createTaskData.categorie"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Benutzer:"
-            class="mt-2"
-        >
-          <USelectMenu
-              :options="dataStore.profiles"
-              value-attribute="id"
-              option-attribute="fullName"
-              v-model="createTaskData.user"
-          />
-        </UFormGroup>
-
-
-        <template #footer>
-          <UButton
-              @click="createTask"
-          >
-            Erstellen
-          </UButton>
-        </template>
-
-      </UCard>
-    </UModal>
-
-    <UModal
-        v-model="showTaskModal"
-    >
-      <UCard>
-        <template #header>
-          {{taskData.name}}
-        </template>
-        <p>{{taskData.description}}</p>
-        <p>Erstellt am: {{taskData.created_at}}</p>
-        <UBadge
-            v-for="user in taskData.users"
-            class="mr-2"
-        >
-          {{user}}
-        </UBadge>
-        <template #footer>
-          <UFormGroup
-            label="Status ändern:"
-          >
-            <USelectMenu
-                :options="taskCategories"
-                @change="updateTask"
-                v-model="taskData.categorie"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Projekt:"
-          >
-            <USelectMenu
-                :options="dataStore.projects"
-                @change="updateTask"
-                v-model="taskData.project"
-                option-attribute="name"
-                value-attribute="id"
-                searchable
-                :search-attributes="['name']"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="Benutzer ändern:"
-          >
-            <USelectMenu
-                :options="dataStore.profiles"
-                @change="updateTask"
-                v-model="taskData.user"
-                option-attribute="firstName"
-                value-attribute="id"
-            >
-              <template #label>
-                {{dataStore.profiles.find(profile => profile.id === taskData.user) ? dataStore.profiles.find(profile => profile.id === taskData.user).fullName : 'Kein Benutzer ausgewählt'}}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-
-        </template>
-      </UCard>
-    </UModal>
-
-    <div class="flex items-center gap-1">
-      <UButton @click="showCreateTask = true">+ Aufgabe</UButton>
-
-      <UInput
-          v-model="searchString"
-          placeholder="Suche..."
-      />
-
-      <UCheckbox
-        label="Erledigte Anzeigen"
-        v-model="showDoneTasks"
-      />
-    </div>
-
-   <UTable
-     :rows="filteredRows"
-     :columns="taskColumns"
-     @select="inspectTask"
-     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-   >
-     <template #created_at-data="{row}">
-       {{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}
-     </template>
-      <template #user-data="{row}">
-        {{dataStore.profiles.find(profile => profile.id === row.user ) ? dataStore.profiles.find(profile => profile.id === row.user ).fullName : row.user}}
-      </template>
-     <template #project-data="{row}">
-       {{dataStore.projects.find(item => item.id === row.project) ? dataStore.projects.find(item => item.id === row.project).name : "" }}
-     </template>
-   </UTable>
-
-
-
-
-  </UPage>
-</template>
-
-<script setup>
-
-import * as dayjs from "dayjs";
-
-definePageMeta({
-  middleware: "auth",
-})
-
-const dataStore = useDataStore()
-const toast = useToast()
-const supabase = useSupabaseClient()
-
-const taskColumns = [
-  {
-    key:"created_at",
-    label: "Erstellt am:",
-    sortable: true
-  },
-  {
-    key:"name",
-    label: "Name:",
-    sortable: true
-  },
-  {
-    key:"user",
-    label: "Benutzer:",
-    sortable: true
-  },
-  {
-    key:"description",
-    label: "Beschreibung:",
-    sortable: true
-  },
-  {
-    key:"categorie",
-    label: "Kategorie:",
-    sortable: true
-  },
-  {
-    key:"project",
-    label: "Projekt:",
-    sortable: true
-  }
-]
-
-const showDoneTasks = ref(false)
-const searchString = ref("")
-const filteredRows = computed(() => {
-
-  let filteredTasks = dataStore.tasks.filter(task =>  !showDoneTasks.value ? task.categorie !== "Erledigt" : task.categorie === "Erledigt")
-
-  if(!searchString.value) {
-    return filteredTasks
-  }
-
-  return filteredTasks.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
-})
-
-
-const showCreateTask = ref(false)
-const taskCategories = ["Offen","In Bearbeitung", "Dringend","Erledigt"]
-
-const createTaskData = ref({
-  name: "",
-  description: "",
-  categorie: "Offen",
-  user: ""
-  /*users: ["86e67794-0ea8-41b0-985a-1072e84f56e9"]*/
-})
-
-const taskData = ref({})
-const showTaskModal = ref(false)
-
-const createTask = async () => {
-  //await create('tasks', createTaskData.value)
-  const {data,error} = await supabase
-      .from("tasks")
-      .insert([createTaskData.value])
-      .select()
-
-  console.log(error)
-
-  showCreateTask.value = false
-  createTaskData.value = {}
-  dataStore.fetchTasks()
-}
-
-const updateTask = async () => {
-
-  console.log(taskData.value)
-  const {data,error} = await supabase
-      .from("tasks")
-      .update(taskData.value)
-      .eq('id',taskData.value.id)
-      .select()
-  console.log(data)
-
-  if(error) {
-    console.log(error)
-  } else {
-    toast.add({title: "Aufgabe aktualisiert"})
-    taskData.value = {}
-    showTaskModal.value = false
-    dataStore.fetchTasks()
-  }
-
-}
-
-const inspectTask = (task) => {
-  taskData.value = task
-  showTaskModal.value = true
-}
-
-</script>
-
-<style scoped>
-
-#main {
-
-}
-
-h3 {
-  font-size: large;
-  font-weight: bold;
-}
-
-#menuBar {
-  display: flex;
-  flex-direction: row;
-}
-
-#taskCatList {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 65vh;
-}
-
-.taskScrollList {
-  height: 60vh;
-  overflow: auto;
-  padding: 3px
-}
-
-#catNew {
-  width: 30%;
-}
-#catInProgress {
-  width: 30%;
-  border-left: 2px solid #69c350;
-  margin-left: 1em;
-  padding-left: 1em;
-
-}
-#catUrgent {
-  width: 30%;
-  border-left: 2px solid #69c350;
-  margin-left: 1em;
-  padding-left: 1em;
-}
-</style>
\ No newline at end of file
diff --git a/spaces/pages/jobs/[mode]/[[id]].vue b/spaces/pages/tasks/[mode]/[[id]].vue
similarity index 50%
rename from spaces/pages/jobs/[mode]/[[id]].vue
rename to spaces/pages/tasks/[mode]/[[id]].vue
index ee03024..8bf2ead 100644
--- a/spaces/pages/jobs/[mode]/[[id]].vue
+++ b/spaces/pages/tasks/[mode]/[[id]].vue
@@ -19,23 +19,30 @@ const itemInfo = ref({
   customer: 0,
 
 })
-const states = ["Offen", "In Bearbeitung", "Erledigt"]
+const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
 
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = dataStore.getJobById(Number(useRoute().params.id))
+    currentItem = dataStore.getTaskById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem
 
+  if(mode.value === "create") {
+    let query = route.query
+    if(query.project) itemInfo.value.project = Number(query.project)
+    if(query.plant) itemInfo.value.plant = Number(query.plant)
+
+  }
+
 
 
 }
 
 const createItem = async () => {
   const {data,error} = await supabase
-      .from("jobs")
+      .from("tasks")
       .insert([itemInfo.value])
       .select()
 
@@ -47,29 +54,29 @@ const createItem = async () => {
       id: 0,
       title: "",
     }
-    toast.add({title: "Job erfolgreich erstellt"})
-    await dataStore.fetchJobs()
-    router.push(`/jobs/show/${data[0].id}`)
+    toast.add({title: "Aufgabe erfolgreich erstellt"})
+    await dataStore.fetchTasks()
+    router.push(`/tasks/show/${data[0].id}`)
     setupPage()
   }
 }
 
 const editItem = async () => {
-  router.push(`/jobs/edit/${currentItem.id}`)
+  router.push(`/tasks/edit/${currentItem.id}`)
   setupPage()
 }
 
 const cancelEditorCreate = () => {
-  mode.value = "show"
-  itemInfo.value = {
-    id: 0,
-    infoData: {}
+  if(currentItem) {
+    router.push(`/tasks/show/${currentItem.id}`)
+  } else {
+    router.push(`/tasks/`)
   }
 }
 
 const updateItem = async () => {
   const {error} = await supabase
-      .from("jobs")
+      .from("tasks")
       .update(itemInfo.value)
       .eq('id',itemInfo.value.id)
 
@@ -78,9 +85,9 @@ const updateItem = async () => {
   }
 
 
-  router.push(`/jobs/show/${currentItem.id}`)
-  toast.add({title: "Job erfolgreich gespeichert"})
-  dataStore.fetchJobs()
+  router.push(`/tasks/show/${currentItem.id}`)
+  toast.add({title: "Aufgabe erfolgreich gespeichert"})
+  dataStore.fetchTasks()
 }
 
 
@@ -93,12 +100,15 @@ setupPage()
     <UCard v-if="currentItem && mode == 'show'" >
       <template #header>
         <UBadge>
-          {{currentItem.state}}
+          {{currentItem.categorie}}
         </UBadge>
 
-        {{currentItem.title}}
+        {{currentItem.name}}
       </template>
 
+      {{currentItem}}<br>
+
+
       Beschreibung:<br>
       {{currentItem.description}}<br>
 
@@ -113,57 +123,86 @@ setupPage()
         >
           Bearbeiten
         </UButton>
-        <UButton
-            color="red"
-            class="ml-2"
-            disabled
-        >
-          Archivieren
-        </UButton>
-        <!-- TODO: Kunde archivieren        -->
       </template>
 
 
 
     </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
-        {{itemInfo.title}}
+    <UCard v-else-if="mode === 'edit' || mode === 'create'" >
+      <template #header v-if="mode === 'edit'">
+        {{itemInfo.name}}
       </template>
 
       <UFormGroup
-          label="Titel:"
+          label="Name:"
       >
         <UInput
-            v-model="itemInfo.title"
+            v-model="itemInfo.name"
         />
       </UFormGroup>
 
       <UFormGroup
-          label="Status:"
+          label="Kategorie:"
       >
         <USelectMenu
-            v-model="itemInfo.state"
-            :options="states"
+            v-model="itemInfo.categorie"
+            :options="categories"
         />
       </UFormGroup>
 
       <UFormGroup
-          label="Kundennummer:"
+          label="Benutzer:"
       >
         <USelectMenu
-            v-model="itemInfo.customer"
-            :options="dataStore.customers"
+            v-model="itemInfo.user"
+            :options="dataStore.profiles"
+            option-attribute="fullName"
+            value-attribute="id"
+            searchable-placeholder="Suche..."
+            searchable
+            :search-attributes="['fullName']"
+        >
+          <template #label>
+            {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Projekt:"
+      >
+        <USelectMenu
+            v-model="itemInfo.project"
+            :options="dataStore.projects"
             option-attribute="name"
             value-attribute="id"
+            searchable-placeholder="Suche..."
             searchable
             :search-attributes="['name']"
         >
           <template #label>
-            {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+            {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
           </template>
         </USelectMenu>
       </UFormGroup>
+      <UFormGroup
+          label="Anlage:"
+      >
+        <USelectMenu
+            v-model="itemInfo.plant"
+            :options="dataStore.plants"
+            option-attribute="name"
+            value-attribute="id"
+            searchable-placeholder="Suche..."
+            searchable
+            :search-attributes="['name']"
+        >
+          <template #label>
+            {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Keine Anlage ausgewählt"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+
 
 
       <UFormGroup
diff --git a/spaces/pages/tasks/index.vue b/spaces/pages/tasks/index.vue
new file mode 100644
index 0000000..0fd8f94
--- /dev/null
+++ b/spaces/pages/tasks/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <div id="main">
+
+    <InputGroup>
+      <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
+
+      <UCheckbox
+          label="Erledigte Anzeigen"
+          v-model="showDone"
+      />
+    </InputGroup>
+
+    <UTable
+        :rows="filteredRows"
+        :columns="columns"
+        @select="selectItem"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+    >
+      <template #created_at-data="{row}">
+        {{row.created_at ? dayjs(row.created_at).format("DD.MM.YY HH:mm") : ''}}
+      </template>
+      <template #user-data="{row}">
+        {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
+      </template>
+      <template #project-data="{row}">
+        {{dataStore.projects.find(i => i.id === row.project) ? dataStore.projects.find(i => i.id === row.project).name : ""}}
+      </template>
+      <template #customer-data="{row}">
+        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
+      </template>
+    </UTable>
+
+  </div>
+</template>
+
+<script setup>
+import * as dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+const mode = ref("show")
+
+const columns = [
+  {
+    key: "created_at",
+    label: "Erstellt am:",
+    sortable: true
+  },{
+    key: "name",
+    label: "Name:",
+    sortable: true
+  },{
+    key: "categorie",
+    label: "Kategorie:",
+    sortable: true
+  },{
+    key: "description",
+    label: "Beschreibung:",
+    sortable: true
+  },{
+    key: "user",
+    label: "Benutzer:",
+    sortable: true
+  },{
+    key: "project",
+    label: "Projekt:",
+    sortable: true
+  },{
+    key: "plant",
+    label: "Anlage:",
+    sortable: true
+  }
+]
+
+const searchString = ref('')
+const showDone = ref(false)
+
+
+const filteredRows = computed(() => {
+  let tasks = dataStore.tasks
+
+  if(!showDone.value) {
+    tasks = tasks.filter(i => i.categorie !== "Erledigt")
+  }
+
+  if(!searchString.value) {
+    return tasks
+  }
+
+  return tasks.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
+
+const selectItem = (item) => {
+  router.push(`/tasks/show/${item.id} `)
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/pages/vendorinvoices/index.vue b/spaces/pages/vendorinvoices/index.vue
index 8e57b6d..e927c6f 100644
--- a/spaces/pages/vendorinvoices/index.vue
+++ b/spaces/pages/vendorinvoices/index.vue
@@ -36,7 +36,7 @@
         {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
       </template>
       <template #date-data="{row}">
-        {{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}
+        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
       </template>
       <template #dueDate-data="{row}">
         {{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}
diff --git a/spaces/pages/vendors/[mode]/[[id]].vue b/spaces/pages/vendors/[mode]/[[id]].vue
index 97a4d97..052eab7 100644
--- a/spaces/pages/vendors/[mode]/[[id]].vue
+++ b/spaces/pages/vendors/[mode]/[[id]].vue
@@ -94,6 +94,14 @@ setupPage()
         {{currentItem.name}}
       </template>
 
+      <InputGroup>
+        <UButton
+            @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
+        >
+          + Ansprechpartner
+        </UButton>
+      </InputGroup>
+
       Information: <br>
       <div v-if="currentItem.infoData">
         <span v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></span>
diff --git a/spaces/stores/data.ts b/spaces/stores/data.ts
index 149ee7f..caaee29 100644
--- a/spaces/stores/data.ts
+++ b/spaces/stores/data.ts
@@ -36,7 +36,6 @@ export const useDataStore = defineStore('data', () => {
     const movements = ref([])
     const forms = ref([])
     const contracts = ref([])
-    const jobs = ref([])
     const formSubmits = ref([])
     const contacts = ref([])
     const vehicles = ref([])
@@ -50,6 +49,7 @@ export const useDataStore = defineStore('data', () => {
     const absenceRequests = ref([])
     const accounts = ref([])
     const taxTypes = ref([])
+    const plants = ref([])
 
     async function fetchData () {
         fetchDocuments()
@@ -59,7 +59,6 @@ export const useDataStore = defineStore('data', () => {
         await fetchTasks()
         await fetchProjects()
         await fetchTimes()
-        await fetchJobs()
         await fetchCustomers()
         await fetchContracts()
         await fetchContacts()
@@ -81,6 +80,7 @@ export const useDataStore = defineStore('data', () => {
         await fetchAbsenceRequests()
         await fetchAccounts()
         await fetchTaxTypes()
+        await fetchPlants()
         loaded.value = true
     }
 
@@ -101,7 +101,6 @@ export const useDataStore = defineStore('data', () => {
         movements.value= []
         forms.value= []
         contracts.value= []
-        jobs.value= []
         formSubmits.value= []
         contacts.value= []
         vehicles.value= []
@@ -115,6 +114,7 @@ export const useDataStore = defineStore('data', () => {
         absenceRequests.value = []
         accounts.value = []
         taxTypes.value = []
+        plants.value = []
     }
 
     async function fetchOwnTenant () {
@@ -172,9 +172,6 @@ export const useDataStore = defineStore('data', () => {
     async function fetchTimes () {
         times.value = (await supabase.from("times").select()).data
     }
-    async function fetchJobs () {
-        jobs.value = (await supabase.from("jobs").select()).data
-    }
     async function fetchHistoryItems () {
         historyItems.value = (await supabase.from("historyItems").select()).data
     }
@@ -199,6 +196,9 @@ export const useDataStore = defineStore('data', () => {
     async function fetchTaxTypes () {
         taxTypes.value = (await supabase.from("taxTypes").select()).data
     }
+    async function fetchPlants () {
+        plants.value = (await supabase.from("plants").select()).data
+    }
 
     async function fetchDocuments () {
         documents.value = (await supabase.from("documents").select()).data
@@ -383,8 +383,8 @@ export const useDataStore = defineStore('data', () => {
         return customers.value.find(item => item.id === itemId)
     })
 
-    const getJobById = computed(() => (itemId:string) => {
-        return jobs.value.find(item => item.id === itemId)
+    const getTaskById = computed(() => (itemId:string) => {
+        return tasks.value.find(item => item.id === itemId)
     })
 
     const getAbsenceRequestById = computed(() => (itemId:string) => {
@@ -399,17 +399,28 @@ export const useDataStore = defineStore('data', () => {
         return accounts.value.find(item => item.id === accountId)
     })
 
+    const getPlantById = computed(() => (plantId:string) => {
+        return plants.value.find(item => item.id === plantId)
+    })
+
     const getProjectById = computed(() => (itemId:string) => {
-        let project = projects.value.find(project => project.id === itemId)
+        if(projects.value.find(i => i.id === itemId)) {
+            let project = projects.value.find(project => project.id === itemId)
 
-        let projectHours = 0
+            /*let projectHours = 0
+
+            let projectTimes = times.value.filter(time => time.projectId === itemId)
+            projectTimes.forEach(time => projectHours += time.duration)
+
+            project.projectHours = projectHours*/
+
+            return project
+        } else {
+            return null
+        }
 
-        let projectTimes = times.value.filter(time => time.projectId === itemId)
-        projectTimes.forEach(time => projectHours += time.duration)
 
-        project.projectHours = projectHours
 
-        return project
     })
 
     return {
@@ -428,7 +439,6 @@ export const useDataStore = defineStore('data', () => {
         movements,
         forms,
         contracts,
-        jobs,
         formSubmits,
         contacts,
         vehicles,
@@ -442,6 +452,7 @@ export const useDataStore = defineStore('data', () => {
         absenceRequests,
         accounts,
         taxTypes,
+        plants,
         //Functions
         fetchData,
         clearStore,
@@ -463,7 +474,6 @@ export const useDataStore = defineStore('data', () => {
         fetchMovements,
         fetchVehicles,
         fetchTimes,
-        fetchJobs,
         fetchHistoryItems,
         fetchVendors,
         fetchVendorInvoices,
@@ -471,6 +481,7 @@ export const useDataStore = defineStore('data', () => {
         fetchNotifications,
         fetchDocuments,
         fetchAbsenceRequests,
+        fetchPlants,
         addHistoryItem,
         //Getters
         getOpenTasksCount,
@@ -498,11 +509,12 @@ export const useDataStore = defineStore('data', () => {
         getDocumentById,
         getSpaceById,
         getCustomerById,
-        getJobById,
+        getTaskById,
         getAbsenceRequestById,
         getProjectById,
         getProfileById,
         getAccountById,
+        getPlantById
     }