Operation processes on invoices

app/Domains/Invoice/Views/Partials/invoiceDetails/DistanceAllowance.vue

@@ -0,0 +1,78 @@
+<script setup>
+const props = defineProps({
+  invoice: {
+    type: Object,
+    default: () => ({})
+  }
+})
+</script>
+
+<template>
+  <table class="travel_allowance">
+      <tr><td colspan="2">
+          Abrechnung einer Reisekostenpauschale
+      </td></tr>
+      <tr>
+          <th>Reiseroute</th>
+          <td>{{props.invoice.travelRoute}}</td>
+      </tr>
+
+    <tr>
+      <th>Gesamte Wegstrecke</th>
+      <td>{{props.invoice.distance}} km</td>
+    </tr>
+
+    <tr>
+      <th>Kilometerpauschale</th>
+      <td>{{props.invoice.distanceAllowance}} Euro  / km</td>
+    </tr>
+
+      <tr>
+          <th>Gesamtbetrag</th>
+          <td style="font-weight: bold">{{props.invoice.amount}}</td>
+      </tr>
+
+      <tr>
+      <th>Marterialtransport</th>
+      <td>{{props.invoice.transportation}}</td>
+    </tr>
+
+    <tr>
+      <th>Hat Personen mitgenommen</th>
+      <td>{{props.invoice.passengers}}</td>
+    </tr>
+  </table>
+
+</template>
+
+<style scoped>
+    .travel_allowance {
+        border-spacing: 0;
+    }
+
+    .travel_allowance tr th {
+        width: 300px !important;
+        border-left: 1px solid #ccc;
+        padding-left: 20px;
+    }
+
+    .travel_allowance tr td,
+    .travel_allowance tr th  {
+        font-family: sans-serif;
+        line-height: 1.8em;
+        border-bottom: 1px solid #ccc;
+        padding: 10px;
+    }
+
+    .travel_allowance tr td:last-child {
+        border-right: 1px solid #ccc;
+    }
+
+    .travel_allowance tr:first-child td:first-child {
+        margin-bottom: 10px;
+        font-weight: bold;
+        background: linear-gradient(to bottom, #fff, #f6f7f7);
+        border-top: 1px solid #ccc;
+        border-left: 1px solid #ccc !important;
+    }
+</style>