Managing own invoices

app/Domains/Invoice/Views/Partials/myInvoiceDetails/Header.vue

@@ -0,0 +1,100 @@
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  modeShow: {
+    type: Boolean,
+    required: true,
+  }
+})
+
+const emit = defineEmits(["accept", "deny", "fix", "reopen"])
+</script>
+
+<template>
+<span id="invoice_details_header">
+    <table>
+      <tr>
+        <td>Name:</td>
+        <td v-if="modeShow">{{props.data.contactName}}</td>
+        <td v-else style="width: 300px;">{{props.data.contactName}}</td>
+
+        <td v-if="modeShow" style="width: 250px;">Kostenstelle</td>
+        <td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>
+
+        <td>{{props.data.costUnitName}}</td>
+        <td rowspan="4" style="vertical-align: top;">
+          <button
+              v-if="props.data.status === 'new' && modeShow"
+              @click="emit('reject')"
+              class="button mareike-button mareike-deny-button"
+          >
+            Abrechnung zurückziehen
+          </button>
+          <button v-if="props.data.status === 'denied' && modeShow"
+                  @click="emit('delete')"
+                  class="button mareike-button mareike-deny-button"
+          >
+            Abrechnung Endgültig löschen
+          </button>
+        </td>
+      </tr>
+
+      <!-- Rest der Tabelle bleibt unverändert -->
+      <tr>
+        <td>E-Mail:</td>
+        <td>{{props.data.contactEmail}}</td>
+        <td>
+          Abrechnungsnummer
+          <label v-if="!modeShow"> (ursprünglich)</label>:
+        </td>
+
+        <td>{{props.data.invoiceNumber}}</td>
+      </tr>
+
+        <tr>
+        <td>Telefon:</td>
+        <td>{{props.data.contactPhone}}</td>
+            <td>
+          Abrechnungstyp
+          <label v-if="!modeShow"> (Ursprünglich)</label>:
+        </td>
+        <td>{{props.data.invoiceType}}</td>
+      </tr>
+
+      <tr>
+        <td>Kontoinhaber*in:</td>
+        <td>{{props.data.accountOwner}}</td>
+        <td>Gesamtbetrag
+          <label v-if="!modeShow"> (Ursprünglich)</label>:
+        </td>
+        <td><strong>{{props.data.amount}}</strong></td>
+      </tr>
+      <tr>
+        <td>IBAN:</td>
+        <td>{{props.data.accountIban}}</td>
+        <td>Buchungsinformationen:</td>
+          <td v-if="props.data.donation">Als Spende gebucht</td>
+          <td v-else-if="props.data.alreadyPaid">Beleg ohne Auszahlung</td>
+          <td v-else>Klassische Auszahlung</td>
+      </tr>
+      <tr>
+        <td>Status:</td>
+        <td>{{props.data.readableStatus}}</td>
+        <td>Anmerkungen:</td>
+        <td>
+          <span v-if="props.data.status === 'denied'">
+            {{props.data.deniedReason}}
+          </span>
+          <span v-else>{{props.data.comment}}</span>
+        </td>
+      </tr>
+    </table>
+  </span>
+</template>
+
+<style scoped>
+
+</style>