<report-body v-bind="$props"> <div class="grid-row"> <div class="grid-block"> <div class="columns"> <div class="size50"> <div class="size75"> <h1 class="title uppercase">{{$t('title')}}</h1> <table class="row-oriented"> <tbody> <tr> <td class="font gray uppercase">{{$t('clientId')}}</td> <th>{{client.id}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('date')}}</td> <th>{{formatDate(new Date(), '%d-%m-%Y')}}</th> </tr> </tbody> </table> </div> </div> <div class="size50"> <div class="panel"> <div class="header">{{$t('clientData')}}</div> <div class="body"> <h3 class="uppercase">{{client.socialName}}</h3> <div>{{client.street}}</div> <div>{{client.postcode}}, {{client.city}} ({{client.province}})</div> <div>{{client.country}}</div> </div> </div> </div> </div> <table class="column-oriented"> <thead> <tr> <th>{{$t('date')}}</th> <th>{{$t('concept')}}</th> <th class="number">{{$t('invoiced')}}</th> <th class="number">{{$t('payed')}}</th> <th class="number">{{$t('balance')}}</th> </tr> </thead> <tbody v-for="sale in sales" :key="sale.id"> <tr> <td>{{formatDate(sale.issued, '%d-%m-%Y')}}</td> <td>{{sale.ref}}</td> <td class="number">{{sale.debtOut}}</td> <td class="number">{{sale.debtIn}}</td> <td class="number">{{getBalance(sale)}}</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td class="number"> <strong class="pull-left">Total</strong> {{getTotalDebtOut() | currency('EUR', $i18n.locale)}} </td> <td class="number">{{getTotalDebtIn() | currency('EUR', $i18n.locale)}}</td> <td class="number">{{totalBalance | currency('EUR', $i18n.locale)}}</td> </tr> </tfoot> </table> </div> </div> <template v-slot:footer> <report-footer id="pageFooter" v-bind:left-text="$t('client', [client.id])" v-bind:center-text="client.socialName" v-bind="$props" > </report-footer> </template> </report-body>