|
|
@@ -18,12 +18,12 @@
|
|
18
|
18
|
<!-- Logo -->
|
|
19
|
19
|
<div class="w-2/3">
|
|
20
|
20
|
@if($document->logo && $document->showLogo)
|
|
21
|
|
- <x-company.document-template.logo class="ml-6" :src="$document->logo"/>
|
|
|
21
|
+ <x-company.document-template.logo class="ml-8" :src="$document->logo"/>
|
|
22
|
22
|
@endif
|
|
23
|
23
|
</div>
|
|
24
|
24
|
|
|
25
|
25
|
<!-- Ribbon Container -->
|
|
26
|
|
- <div class="w-1/3 absolute right-0 top-0 p-2 h-28 flex flex-col justify-end rounded-bl-sm"
|
|
|
26
|
+ <div class="w-1/3 absolute right-0 top-0 p-3 h-28 flex flex-col justify-end rounded-bl-sm"
|
|
27
|
27
|
style="background: {{ $document->accentColor }};">
|
|
28
|
28
|
@if($document->header)
|
|
29
|
29
|
<h1 class="text-3xl font-bold text-white text-center uppercase">{{ $document->header }}</h1>
|
|
|
@@ -32,9 +32,9 @@
|
|
32
|
32
|
</x-company.document-template.header>
|
|
33
|
33
|
|
|
34
|
34
|
<!-- Company Details -->
|
|
35
|
|
- <x-company.document-template.metadata class="modern-template-metadata space-y-6">
|
|
|
35
|
+ <x-company.document-template.metadata class="modern-template-metadata space-y-8">
|
|
36
|
36
|
<div class="text-xs">
|
|
37
|
|
- <h2 class="text-xs font-semibold">{{ $document->company->name }}</h2>
|
|
|
37
|
+ <h2 class="text-base font-semibold">{{ $document->company->name }}</h2>
|
|
38
|
38
|
@if($formattedAddress = $document->company->getFormattedAddressHtml())
|
|
39
|
39
|
{!! $formattedAddress !!}
|
|
40
|
40
|
@endif
|
|
|
@@ -82,63 +82,65 @@
|
|
82
|
82
|
<!-- Line Items Table -->
|
|
83
|
83
|
<x-company.document-template.line-items class="modern-template-line-items">
|
|
84
|
84
|
<table class="w-full text-left table-fixed">
|
|
85
|
|
- <thead class="text-xs leading-8">
|
|
|
85
|
+ <thead class="text-xs leading-relaxed">
|
|
86
|
86
|
<tr class="text-gray-600">
|
|
87
|
|
- <th class="text-left pl-6 w-[50%]">{{ $document->columnLabel->items }}</th>
|
|
88
|
|
- <th class="text-center w-[10%]">{{ $document->columnLabel->units }}</th>
|
|
89
|
|
- <th class="text-right w-[20%]">{{ $document->columnLabel->price }}</th>
|
|
90
|
|
- <th class="text-right pr-6 w-[20%]">{{ $document->columnLabel->amount }}</th>
|
|
|
87
|
+ <th class="text-left pl-6 w-[50%] py-4">{{ $document->columnLabel->items }}</th>
|
|
|
88
|
+ <th class="text-center w-[10%] py-4">{{ $document->columnLabel->units }}</th>
|
|
|
89
|
+ <th class="text-right w-[20%] py-4">{{ $document->columnLabel->price }}</th>
|
|
|
90
|
+ <th class="text-right pr-6 w-[20%] py-4">{{ $document->columnLabel->amount }}</th>
|
|
91
|
91
|
</tr>
|
|
92
|
92
|
</thead>
|
|
93
|
93
|
<tbody class="text-xs border-y-2">
|
|
94
|
94
|
@foreach($document->lineItems as $index => $item)
|
|
95
|
95
|
<tr @class(['bg-gray-100' => $index % 2 === 0])>
|
|
96
|
|
- <td class="text-left pl-6 font-semibold py-2">
|
|
|
96
|
+ <td class="text-left pl-6 font-semibold py-3">
|
|
97
|
97
|
{{ $item->name }}
|
|
98
|
98
|
@if($item->description)
|
|
99
|
|
- <div class="text-gray-600 font-normal line-clamp-2">{{ $item->description }}</div>
|
|
|
99
|
+ <div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
|
|
100
|
100
|
@endif
|
|
101
|
101
|
</td>
|
|
102
|
|
- <td class="text-center">{{ $item->quantity }}</td>
|
|
103
|
|
- <td class="text-right">{{ $item->unitPrice }}</td>
|
|
104
|
|
- <td class="text-right pr-6">{{ $item->subtotal }}</td>
|
|
|
102
|
+ <td class="text-center py-3">{{ $item->quantity }}</td>
|
|
|
103
|
+ <td class="text-right py-3">{{ $item->unitPrice }}</td>
|
|
|
104
|
+ <td class="text-right pr-6 py-3">{{ $item->subtotal }}</td>
|
|
105
|
105
|
</tr>
|
|
106
|
106
|
@endforeach
|
|
107
|
107
|
</tbody>
|
|
108
|
|
- <tfoot class="text-xs">
|
|
109
|
|
- <tr>
|
|
110
|
|
- <td class="pl-6 py-1" colspan="2"></td>
|
|
111
|
|
- <td class="text-right font-semibold py-1">Subtotal:</td>
|
|
112
|
|
- <td class="text-right pr-6 py-1">{{ $document->subtotal }}</td>
|
|
113
|
|
- </tr>
|
|
|
108
|
+ <tfoot class="text-xs summary-section">
|
|
|
109
|
+ @if($document->subtotal)
|
|
|
110
|
+ <tr>
|
|
|
111
|
+ <td class="pl-6 py-2" colspan="2"></td>
|
|
|
112
|
+ <td class="text-right font-semibold py-2">Subtotal:</td>
|
|
|
113
|
+ <td class="text-right pr-6 py-2">{{ $document->subtotal }}</td>
|
|
|
114
|
+ </tr>
|
|
|
115
|
+ @endif
|
|
114
|
116
|
@if($document->discount)
|
|
115
|
117
|
<tr class="text-success-800">
|
|
116
|
|
- <td class="pl-6 py-1" colspan="2"></td>
|
|
117
|
|
- <td class="text-right py-1">Discount:</td>
|
|
118
|
|
- <td class="text-right pr-6 py-1">
|
|
|
118
|
+ <td class="pl-6 py-2" colspan="2"></td>
|
|
|
119
|
+ <td class="text-right py-2">Discount:</td>
|
|
|
120
|
+ <td class="text-right pr-6 py-2">
|
|
119
|
121
|
({{ $document->discount }})
|
|
120
|
122
|
</td>
|
|
121
|
123
|
</tr>
|
|
122
|
124
|
@endif
|
|
123
|
125
|
@if($document->tax)
|
|
124
|
126
|
<tr>
|
|
125
|
|
- <td class="pl-6 py-1" colspan="2"></td>
|
|
126
|
|
- <td class="text-right py-1">Tax:</td>
|
|
127
|
|
- <td class="text-right pr-6 py-1">{{ $document->tax }}</td>
|
|
|
127
|
+ <td class="pl-6 py-2" colspan="2"></td>
|
|
|
128
|
+ <td class="text-right py-2">Tax:</td>
|
|
|
129
|
+ <td class="text-right pr-6 py-2">{{ $document->tax }}</td>
|
|
128
|
130
|
</tr>
|
|
129
|
131
|
@endif
|
|
130
|
132
|
<tr>
|
|
131
|
|
- <td class="pl-6 py-1" colspan="2"></td>
|
|
132
|
|
- <td class="text-right font-semibold border-t py-1">Total:</td>
|
|
133
|
|
- <td class="text-right border-t pr-6 py-1">{{ $document->total }}</td>
|
|
|
133
|
+ <td class="pl-6 py-2" colspan="2"></td>
|
|
|
134
|
+ <td class="text-right font-semibold border-t py-2">Total:</td>
|
|
|
135
|
+ <td class="text-right border-t pr-6 py-2">{{ $document->total }}</td>
|
|
134
|
136
|
</tr>
|
|
135
|
137
|
@if($document->amountDue)
|
|
136
|
138
|
<tr>
|
|
137
|
|
- <td class="pl-6 py-1" colspan="2"></td>
|
|
138
|
|
- <td class="text-right font-semibold border-t-4 border-double py-1">{{ $document->label->amountDue }}
|
|
|
139
|
+ <td class="pl-6 py-2" colspan="2"></td>
|
|
|
140
|
+ <td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
|
|
139
|
141
|
({{ $document->currencyCode }}):
|
|
140
|
142
|
</td>
|
|
141
|
|
- <td class="text-right border-t-4 border-double pr-6 py-1">{{ $document->amountDue }}</td>
|
|
|
143
|
+ <td class="text-right border-t-4 border-double pr-6 py-2">{{ $document->amountDue }}</td>
|
|
142
|
144
|
</tr>
|
|
143
|
145
|
@endif
|
|
144
|
146
|
</tfoot>
|
|
|
@@ -146,10 +148,12 @@
|
|
146
|
148
|
</x-company.document-template.line-items>
|
|
147
|
149
|
|
|
148
|
150
|
<!-- Footer Notes -->
|
|
149
|
|
- <x-company.document-template.footer class="modern-template-footer text-xs">
|
|
150
|
|
- <h4 class="font-semibold px-6" style="color: {{ $document->accentColor }}">Terms & Conditions</h4>
|
|
|
151
|
+ <x-company.document-template.footer class="modern-template-footer">
|
|
|
152
|
+ <h4 class="font-semibold px-6 text-xs" style="color: {{ $document->accentColor }}">
|
|
|
153
|
+ Terms & Conditions
|
|
|
154
|
+ </h4>
|
|
151
|
155
|
<span class="border-t-2 my-2 border-gray-300 block w-full"></span>
|
|
152
|
|
- <div class="flex justify-between space-x-4 px-6">
|
|
|
156
|
+ <div class="flex justify-between space-x-4 px-6 text-xs">
|
|
153
|
157
|
<p class="w-1/2 break-words line-clamp-4">{{ $document->terms }}</p>
|
|
154
|
158
|
<p class="w-1/2 break-words line-clamp-4">{{ $document->footer }}</p>
|
|
155
|
159
|
</div>
|
Andrew Wallo
5 月之前