better handling payment purpose

app/Domains/CostUnit/Views/Partials/ListInvoices.vue

@@ -89,12 +89,13 @@
 <template>
     <table v-if="localData.invoices.length > 0" class="invoice-list-table">
         <tr>
-            <td colspan="6">{{props.data.costUnit.name}}</td>
+            <td colspan="7">{{props.data.costUnit.name}}</td>
         </tr>
 
         <tr v-for="invoice in localData.invoices" :id="'invoice_' + invoice.id">
             <td>{{invoice.invoiceNumber}}</td>
-            <td>{{invoice.invoiceType}}</td>
+            <td>{{invoice.invoiceTypeShort}}</td>
+            <td style="max-width: 250px;">{{invoice.purpose}}</td>
             <td>
                 {{invoice.amount}}
             </td>
@@ -114,7 +115,7 @@
         </tr>
 
         <tr v-if="props.data.endpoint === 'approved'">
-            <td colspan="5"></td>
+            <td colspan="6"></td>
             <td>
                 <a style="font-size: 10pt;" class="link" @click="exportPayouts()">Genehmigte Abrechnungen exportieren</a>
             </td>