* Page for single contract

feature: #9

src/components/tabs/ClientTab.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="bg-zinc-50">
+    <div class="py-2">
+      <table class="w-full table-auto">
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
+          <td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.name }}</td>
+        </tr>
+        <tr class="pt-5 border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Address:</td>
+          <td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.address }}</td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Anschprechpartner:</td>
+          <td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.contactPerson }}</td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Email:</td>
+          <td class="w-full pl-3 text-lg max-sm:text-base py-2">
+            <a v-bind:href="'mailto:' + contract.client.email">
+              <font-awesome-icon class="pl-1 h-5 mt-1" icon='fa-solid fa-envelope'/>
+            </a>
+          </td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Nummer:</td>
+          <td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.phone }}</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    contract: {
+      type: Object
+    }
+  }
+}
+</script>

src/components/tabs/CommentsTab.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bg-zinc-50">
+    <div class="flex flex-row justify-center py-5">
+      <ul class="justify-around">
+        <li v-for="comment in contract.comments" class="bg-white rounded-lg shadow-2xl mb-4">
+          <div class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
+            <div class="relative flex gap-4">
+              <font-awesome-icon icon="fa-solid fa-user-large" class="relative  -mb-4 bg-white  h-11 w-11" />
+              <div class="flex flex-col w-full">
+                <div class="flex flex-row justify-between">
+                  <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{comment.name}}</p>
+                  <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
+                </div>
+                <p class="text-gray-400 text-sm">{{new Date(comment.date).toDateString() }}</p>
+              </div>
+            </div>
+            <p class="-mt-4 text-gray-500"> {{comment.message}} </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex justify-center">
+
+    <div class="py-4 mb-10 shadow-2xl">
+      <form class="w-full max-w-xl bg-white rounded-lg px-4 pt-2">
+        <div class="flex flex-wrap -mx-3 mb-6">
+          <h2 class="px-4 pt-3 pb-2 text-gray-800 text-lg">Add comment</h2>
+          <div class="w-full md:w-full px-3 mb-2 mt-2">
+            <textarea class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white" name="body" placeholder='Type Your Comment' required></textarea>
+          </div>
+          <div class="w-full md:w-full flex items-start md:w-full px-3">
+            <div class="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
+            <div class="-mr-1">
+              <input type='submit' class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100" value='Post Comment'>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    contract: {
+      type: Object
+    }
+  }
+}
+</script>

src/components/tabs/ContractTab.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="bg-zinc-50">
+    <div class="py-2">
+      <table class="w-full table-auto">
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">ID:</td>
+          <td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.id }}</td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
+          <td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.name }}</td>
+        </tr>
+        <tr class="pt-5 border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Status:</td>
+          <td class="w-full pl-2 text-lg max-sm:text-base py-2">
+            <span class="px-3 py-1 text-sm rounded-full bg-cyan-300 text-slate-800 bg-cyan-200 font-semibold">
+              {{ contract.status }}
+            </span>
+          </td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Mitarbeiter:</td>
+          <td class="w-full pl-2 text-lg max-sm:text-base py-2">
+            <ul class="list-disc pl-4">
+              <li v-for="person in contract.mitarbeiter">
+                {{ person.name }}({{ person.role }}) {{person.phone}}
+                <a v-bind:href="'mailto:' + person.email">
+                  <font-awesome-icon class="pl-1 h-5 mt-1" icon='fa-solid fa-envelope'/>
+                </a>
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Unterlagen:</td>
+          <td class="w-full pl-2 text-lg max-sm:text-base py-2">
+            <ul class="list-disc pl-4">
+              <li v-for="document in contract.unterlagen">
+                <a v-bind:href='document.url' class="underline">
+                  {{ document.name }}
+                  <font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" />
+                </a>
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr class="border-b">
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beschreibung:</td>
+          <td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.beschreibung }}</td>
+        </tr>
+        <tr>
+          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
+          <td class="w-full pl-2 text-lg py-2">
+            <li v-for="(example, index) in contract.examples">
+              <a v-bind:href='example' class="underline">
+                Link {{ index + 1 }}
+                <font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" />
+              </a>
+            </li>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    contract: {
+      type: Object
+    }
+  }
+}
+</script>