PluginProbe
Easy Invoice – Invoice Generator, PDF Quotes & Payments / 2.2.0
Easy Invoice – Invoice Generator, PDF Quotes & Payments v2.2.0
2.4.0 2.4.1 2.3.8 2.3.7 2.3.6 2.3.5 2.3.4 2.3.3 2.3.2 2.3.1 2.2.0 2.1.21 2.1.20 2.1.19 2.1.18 2.1.0 2.1.1 2.1.10 2.1.11 2.1.12 2.1.13 2.1.14 2.1.15 2.1.16 2.1.2 All 57 releases
easy-invoice / templates / invoice-templates / professional.php

professional.php in Easy Invoice – Invoice Generator, PDF Quotes & Payments 2.2.0, at templates/invoice-templates/professional.php

562 lines 16.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Professional Template - Sophisticated Design
4 * Professional, sophisticated, and business-focused invoice template
5 */
6
7 if (!$formatter && $invoice) {
8 $formatter = new \EasyInvoice\Helpers\InvoiceFormatter($invoice);
9 }
10
11 $text_settings = \EasyInvoice\Helpers\TemplateTextHelper::getInvoiceTextSettings();
12 $company_info = \EasyInvoice\Helpers\TemplateTextHelper::getCompanyInfo();
13 ?>
14 <style>
15 /* Professional Template - Sophisticated Design */
16 :root {
17 --primary-color: #1e40af;
18 --primary-light: #3b82f6;
19 --primary-dark: #1e3a8a;
20 --secondary-color: #64748b;
21 --accent-color: #f59e0b;
22 --success-color: #10b981;
23 --warning-color: #f59e0b;
24 --error-color: #ef4444;
25 --text-primary: #0f172a;
26 --text-secondary: #475569;
27 --text-muted: #64748b;
28 --border-color: #cbd5e1;
29 --border-light: #e2e8f0;
30 --background-primary: #ffffff;
31 --background-secondary: #f1f5f9;
32 --background-accent: #f8fafc;
33
34 --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
35 --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
36
37 --font-size-xs: 0.75rem;
38 --font-size-sm: 0.875rem;
39 --font-size-base: 1rem;
40 --font-size-lg: 1.125rem;
41 --font-size-xl: 1.25rem;
42 --font-size-2xl: 1.5rem;
43 --font-size-3xl: 1.875rem;
44 --font-size-4xl: 2.25rem;
45
46 --spacing-1: 0.25rem;
47 --spacing-2: 0.5rem;
48 --spacing-3: 0.75rem;
49 --spacing-4: 1rem;
50 --spacing-5: 1.25rem;
51 --spacing-6: 1.5rem;
52 --spacing-8: 2rem;
53 --spacing-10: 2.5rem;
54 --spacing-12: 3rem;
55 --spacing-16: 4rem;
56 --spacing-20: 5rem;
57
58 --radius-sm: 0.25rem;
59 --radius-md: 0.375rem;
60 --radius-lg: 0.5rem;
61 --radius-xl: 0.75rem;
62 --radius-2xl: 1rem;
63
64 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
65 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
66 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
67 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
68 --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
69 }
70
71 .template-professional {
72 font-family: var(--font-family);
73 background: var(--background-primary);
74 color: var(--text-primary);
75 max-width: 1000px;
76 margin: 0 auto;
77 padding: var(--spacing-8);
78 box-shadow: var(--shadow-2xl);
79 border-radius: var(--radius-2xl);
80 line-height: 1.6;
81 position: relative;
82 overflow: hidden;
83 }
84
85 .template-professional::before {
86 content: '';
87 position: absolute;
88 top: 0;
89 left: 0;
90 right: 0;
91 height: 8px;
92 background: var(--primary-color);
93 }
94
95 /* Header Section */
96 .template-professional .invoice-header {
97 display: grid;
98 grid-template-columns: 1fr auto;
99 gap: var(--spacing-8);
100 margin-bottom: var(--spacing-12);
101 padding-bottom: var(--spacing-8);
102 border-bottom: 2px solid var(--border-light);
103 position: relative;
104 }
105
106 .template-professional .invoice-header::after {
107 content: '';
108 position: absolute;
109 bottom: -2px;
110 left: 0;
111 width: 120px;
112 height: 2px;
113 background: var(--primary-color);
114 border-radius: var(--radius-sm);
115 }
116
117 .template-professional .company-info {
118 display: flex;
119 flex-direction: column;
120 gap: var(--spacing-4);
121 }
122
123 .template-professional .company-logo {
124 margin-bottom: 0;
125 }
126
127 .template-professional .logo-image {
128 max-height: 60px;
129 max-width: 200px;
130 object-fit: contain;
131 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
132 }
133
134 .template-professional .company-name {
135 font-family: var(--font-family-heading);
136 font-size: var(--font-size-2xl);
137 font-weight: 700;
138 color: var(--text-primary);
139 margin-bottom: var(--spacing-3);
140 line-height: 1.2;
141 }
142
143 .template-professional .company-details {
144 color: var(--text-secondary);
145 font-size: var(--font-size-sm);
146 line-height: 1.5;
147 }
148
149 .template-professional .invoice-meta {
150 display: flex;
151 flex-direction: column;
152 gap: var(--spacing-4);
153 background: var(--background-secondary);
154 padding: var(--spacing-6);
155 border-radius: var(--radius-lg);
156 border: 1px solid var(--border-color);
157 min-width: 300px;
158 }
159
160 .template-professional .invoice-title {
161 font-family: var(--font-family-heading);
162 font-size: var(--font-size-2xl);
163 font-weight: 700;
164 color: var(--primary-color);
165 margin-bottom: var(--spacing-4);
166 text-align: center;
167 text-transform: uppercase;
168 letter-spacing: -0.025em;
169 }
170
171 .template-professional .meta-item {
172 display: flex;
173 justify-content: space-between;
174 align-items: center;
175 padding: var(--spacing-3) 0;
176 border-bottom: 1px solid var(--border-light);
177 }
178
179 .template-professional .meta-item:last-child {
180 border-bottom: none;
181 }
182
183 .template-professional .meta-label {
184 font-size: var(--font-size-sm);
185 color: var(--text-secondary);
186 font-weight: 500;
187 }
188
189 .template-professional .meta-value {
190 font-size: var(--font-size-base);
191 color: var(--text-primary);
192 font-weight: 600;
193 }
194
195 /* Address Section */
196 .template-professional .address-section {
197 display: grid;
198 grid-template-columns: 1fr 1fr;
199 gap: var(--spacing-8);
200 margin-bottom: var(--spacing-12);
201 }
202
203 .template-professional .address-block {
204 background: var(--background-secondary);
205 padding: var(--spacing-6);
206 border-radius: var(--radius-lg);
207 border: 1px solid var(--border-color);
208 position: relative;
209 overflow: hidden;
210 }
211
212 .template-professional .address-block::before {
213 content: '';
214 position: absolute;
215 top: 0;
216 left: 0;
217 right: 0;
218 height: 3px;
219 background: var(--primary-color);
220 }
221
222 .template-professional .address-block h2 {
223 font-family: var(--font-family-heading);
224 font-size: var(--font-size-lg);
225 font-weight: 600;
226 color: var(--text-primary);
227 margin-bottom: var(--spacing-4);
228 text-transform: uppercase;
229 letter-spacing: 0.05em;
230 }
231
232 .template-professional .client-name {
233 font-weight: 600;
234 color: var(--text-primary);
235 font-size: var(--font-size-base);
236 margin-bottom: var(--spacing-2);
237 }
238
239 .template-professional .address-content {
240 color: var(--text-secondary);
241 font-size: var(--font-size-sm);
242 line-height: 1.5;
243 }
244
245 /* Invoice Items Table */
246 .template-professional .invoice-items {
247 width: 100%;
248 border-collapse: collapse;
249 margin-bottom: var(--spacing-12);
250 background: var(--background-primary);
251 border-radius: var(--radius-lg);
252 overflow: hidden;
253 box-shadow: var(--shadow-lg);
254 border: 1px solid var(--border-color);
255 }
256
257 .template-professional .invoice-items th {
258 background: var(--primary-color);
259 color: white;
260 font-weight: 600;
261 text-align: left;
262 padding: var(--spacing-4) var(--spacing-6);
263 font-size: var(--font-size-sm);
264 text-transform: uppercase;
265 letter-spacing: 0.05em;
266 }
267
268 .template-professional .invoice-items td {
269 padding: var(--spacing-4) var(--spacing-6);
270 border-bottom: 1px solid var(--border-light);
271 vertical-align: top;
272 }
273
274 .template-professional .invoice-items tr:last-child td {
275 border-bottom: none;
276 }
277
278 .template-professional .invoice-items tr:hover {
279 background: var(--background-accent);
280 }
281
282 .template-professional .item-name .item-title {
283 font-weight: 600;
284 color: var(--text-primary);
285 margin-bottom: var(--spacing-1);
286 }
287
288 .template-professional .item-description {
289 color: var(--text-muted);
290 font-size: var(--font-size-sm);
291 line-height: 1.4;
292 font-weight: normal;
293 }
294
295 .template-professional .item-quantity,
296 .template-professional .item-price,
297 .template-professional .item-total {
298 text-align: right;
299 font-weight: 500;
300 color: var(--text-primary);
301 }
302
303 /* Invoice Totals */
304 .template-professional .invoice-totals {
305 margin-left: auto;
306 width: 400px;
307 background: var(--background-secondary);
308 padding: var(--spacing-8);
309 border-radius: var(--radius-lg);
310 border: 1px solid var(--border-color);
311 box-shadow: var(--shadow-md);
312 }
313
314 .template-professional .invoice-total-row {
315 display: flex;
316 justify-content: space-between;
317 align-items: center;
318 padding: var(--spacing-3) 0;
319 border-bottom: 1px solid var(--border-light);
320 }
321
322 .template-professional .invoice-total-row:last-child {
323 border-bottom: none;
324 }
325
326 .template-professional .invoice-total-label {
327 font-weight: 500;
328 color: var(--text-secondary);
329 }
330
331 .template-professional .invoice-total-value {
332 font-weight: 600;
333 color: var(--text-primary);
334 }
335
336 .template-professional .invoice-grand-total {
337 font-size: var(--font-size-xl);
338 font-weight: 700;
339 color: var(--primary-color);
340 border-top: 2px solid var(--primary-color);
341 padding-top: var(--spacing-4);
342 margin-top: var(--spacing-4);
343 }
344
345 /* Notes Section */
346 .template-professional .invoice-notes {
347 margin-top: var(--spacing-8);
348 padding: var(--spacing-6);
349 background: var(--background-secondary);
350 border-radius: var(--radius-lg);
351 border: 1px solid var(--border-color);
352 }
353
354 .template-professional .invoice-notes h3 {
355 font-family: var(--font-family-heading);
356 font-size: var(--font-size-lg);
357 font-weight: 600;
358 color: var(--text-primary);
359 margin-bottom: var(--spacing-3);
360 border-bottom: 1px solid var(--border-color);
361 padding-bottom: var(--spacing-2);
362 }
363
364 .template-professional .notes-content {
365 color: var(--text-secondary);
366 font-size: var(--font-size-sm);
367 line-height: 1.6;
368 }
369
370 .template-professional .invoice-terms {
371 margin-top: var(--spacing-8);
372 padding: var(--spacing-6);
373 background: var(--background-secondary);
374 border-radius: var(--radius-lg);
375 border: 1px solid var(--border-color);
376 }
377
378 .template-professional .invoice-terms h3 {
379 font-family: var(--font-family-heading);
380 font-size: var(--font-size-lg);
381 font-weight: 600;
382 color: var(--text-primary);
383 margin-bottom: var(--spacing-3);
384 border-bottom: 1px solid var(--border-color);
385 padding-bottom: var(--spacing-2);
386 }
387
388 .template-professional .terms-content {
389 color: var(--text-secondary);
390 font-size: var(--font-size-sm);
391 line-height: 1.6;
392 }
393
394 /* Footer */
395 .template-professional .invoice-footer {
396 margin-top: var(--spacing-8);
397 padding-top: var(--spacing-6);
398 border-top: 2px solid var(--border-light);
399 text-align: center;
400 color: var(--text-secondary);
401 font-size: var(--font-size-sm);
402 }
403
404 .template-professional .invoice-footer p {
405 margin: 0;
406 font-size: var(--font-size-sm);
407 opacity: 0.9;
408 }
409
410 /* Responsive Design */
411 @media (max-width: 768px) {
412 .template-professional {
413 padding: var(--spacing-4);
414 }
415
416 .template-professional .invoice-header {
417 grid-template-columns: 1fr;
418 gap: var(--spacing-6);
419 }
420
421 .template-professional .invoice-meta {
422 min-width: auto;
423 }
424
425 .template-professional .address-section {
426 grid-template-columns: 1fr;
427 gap: var(--spacing-6);
428 }
429
430 .template-professional .invoice-totals {
431 width: 100%;
432 }
433 }
434 </style>
435
436 <div class="template template-professional">
437 <!-- Header -->
438 <div class="invoice-header">
439 <div class="company-info">
440 <div class="company-logo">
441 <?php if (!empty($company_info['logo'])): ?>
442 <img src="<?php echo esc_url($company_info['logo']); ?>" alt="<?php echo esc_attr($company_info['name']); ?>" class="logo-image">
443 <?php endif; ?>
444 </div>
445 <div class="company-name"><?php echo esc_html($company_info['name']); ?></div>
446 <div class="company-details">
447 <?php echo \EasyInvoice\Helpers\TemplateTextHelper::generateFromSection($company_info, false, 'details-only'); ?>
448 </div>
449 </div>
450
451 <div class="invoice-meta">
452 <div class="invoice-title"><?php echo esc_html($invoice->getTitle() ?: __('Invoice', 'easy-invoice')); ?></div>
453 <div class="meta-item">
454 <span class="meta-label"><?php echo esc_html($text_settings['invoice_number']); ?></span>
455 <span class="meta-value"><?php echo esc_html($invoice->getNumber()); ?></span>
456 </div>
457 <div class="meta-item">
458 <span class="meta-label"><?php echo esc_html($text_settings['invoice_date']); ?></span>
459 <span class="meta-value"><?php echo esc_html(\EasyInvoice\Controllers\SettingsController::formatDate($invoice->getIssueDate())); ?></span>
460 </div>
461 <div class="meta-item">
462 <span class="meta-label"><?php echo esc_html($text_settings['due_date']); ?></span>
463 <span class="meta-value"><?php echo esc_html(\EasyInvoice\Controllers\SettingsController::formatDate($invoice->getDueDate())); ?></span>
464 </div>
465 </div>
466 </div>
467
468 <!-- Address Section -->
469 <div class="address-section">
470 <div class="address-block">
471 <h2><?php echo esc_html($text_settings['to']); ?></h2>
472 <div class="address-content">
473 <div class="client-name"><?php echo esc_html($invoice->getCustomerName()); ?></div>
474 <?php if ($invoice->getCustomerAddress()): ?>
475 <?php echo nl2br(esc_html($invoice->getCustomerAddress())); ?><br>
476 <?php endif; ?>
477 <?php if ($invoice->getCustomerEmail()): ?>
478 <?php echo esc_html($invoice->getCustomerEmail()); ?><br>
479 <?php endif; ?>
480 </div>
481 </div>
482 </div>
483
484 <!-- Invoice Items -->
485 <table class="invoice-items">
486 <thead>
487 <tr>
488 <th><?php echo esc_html($text_settings['service']); ?></th>
489 <th><?php echo esc_html($text_settings['qty']); ?></th>
490 <th><?php echo esc_html($text_settings['rate_price']); ?></th>
491 <?php if (\EasyInvoice\Controllers\SettingsController::shouldShowInvoiceAdjustField()): ?>
492 <th><?php echo esc_html($text_settings['adjust']); ?> (%)</th>
493 <?php endif; ?>
494 <th><?php echo esc_html($text_settings['total']); ?></th>
495 </tr>
496 </thead>
497 <tbody>
498 <?php foreach ($invoice->getItems() as $item): ?>
499 <tr>
500 <td class="item-name">
501 <div class="item-title"><?php echo esc_html($item->getName()); ?></div>
502 <?php if ($item->getDescription()): ?>
503 <div class="item-description"><?php echo esc_html($item->getDescription()); ?></div>
504 <?php endif; ?>
505 </td>
506 <td class="item-quantity"><?php echo esc_html($item->getQuantity() ?: '0'); ?></td>
507 <td class="item-price"><?php echo esc_html($formatter->format($item->getPrice())); ?></td>
508 <?php if (\EasyInvoice\Controllers\SettingsController::shouldShowInvoiceAdjustField()): ?>
509 <td class="item-adjust"><?php
510 $adjust_percentage = $item->getAdjustPercentage();
511 if ($adjust_percentage != 0) {
512 echo esc_html($adjust_percentage > 0 ? '+' : '') . esc_html($adjust_percentage) . '%';
513 } else {
514 echo esc_html__('', 'easy-invoice');
515 }
516 ?></td>
517 <?php endif; ?>
518 <td class="item-total"><?php echo esc_html($formatter->format($item->getAmount())); ?></td>
519 </tr>
520 <?php endforeach; ?>
521 </tbody>
522 </table>
523
524 <!-- Invoice Totals -->
525 <div class="invoice-totals">
526 <?php echo \EasyInvoice\Helpers\TemplateTextHelper::generateTotalsSection($invoice, $text_settings, $formatter, 'invoice'); ?>
527 </div>
528
529 <!-- Notes -->
530 <?php if ($invoice->getNotes()): ?>
531 <div class="invoice-notes">
532 <h3><?php _e('Notes:', 'easy-invoice'); ?></h3>
533 <div class="notes-content">
534 <?php echo wp_kses_post($invoice->getNotes() ?: ''); ?>
535 </div>
536 </div>
537 <?php endif; ?>
538
539 <!-- Terms and Conditions -->
540 <?php
541 $terms_conditions = $invoice->getTerms() ?: \EasyInvoice\Controllers\SettingsController::getInvoiceTermsConditions();
542 if ($terms_conditions):
543 ?>
544 <div class="invoice-terms">
545 <h3><?php _e('Terms & Conditions:', 'easy-invoice'); ?></h3>
546 <div class="terms-content">
547 <?php echo wp_kses_post($terms_conditions); ?>
548 </div>
549 </div>
550 <?php endif; ?>
551
552 <!-- Footer -->
553 <div class="invoice-footer">
554 <?php
555 $invoice_footer_text = $invoice->getFooterText();
556 if (!$invoice_footer_text) {
557 $invoice_footer_text = \EasyInvoice\Controllers\SettingsController::getInvoiceFooterText();
558 }
559 ?>
560 <p><?php echo wp_kses_post($invoice_footer_text); ?></p>
561 </div>
562 </div>