invoicemgmt-1.0.0/templates/node--invoice--full.html.twig

{#
/**
 * @file
 * Modern invoice template for invoice nodes.
 *
 * Available variables:
 * - invoice_data: Array containing all invoice configuration and data
 * - client_data: Array containing client information
 * - node: The invoice node entity
 */
#}

{{ attach_library('invoicemgmt/invoice-styles') }}

<style>
  :root {
    --primary-color: {{ invoice_data.primary_color }};
    --secondary-color: {{ invoice_data.secondary_color }};
    --accent-color: {{ invoice_data.accent_color }};
  }
  
  .invoice-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
  }
  
  
  .items-total {
    border-left-color: var(--accent-color) !important;
  }
  
  .invoice-notes,
  .invoice-terms,
  .payment-info {
    border-left-color: var(--accent-color) !important;
  }
</style>


<div class="invoice-container">
  <div class="invoice-header">
    <div class="invoice-header-left">
      {% if invoice_data.logo %}
        <div class="company-logo">
          <img src="{{ invoice_data.logo.url }}" alt="{{ invoice_data.seller_name }}" />
        </div>
      {% endif %}
      <div class="company-info">
        <h1 class="company-name">{{ invoice_data.seller_name }}</h1>
        <div class="company-address">{{ invoice_data.seller_address|nl2br }}</div>
      </div>
    </div>
    <div class="invoice-header-right">
      <div class="invoice-title">
        <h2>INVOICE</h2>
      </div>
      <div class="invoice-meta">
        <div class="invoice-number">
          <strong>Invoice #:</strong> {{ content.field_invoice_number.0 }}
        </div>
        <div class="invoice-date">
            <strong>Date:</strong> {{ content.field_invoice_date.0['#markup']|date('M d, Y')|default(node.created.value|date('M d, Y')) }}
        </div>
        <div class="due-date">
          <strong>Due Date:</strong> {{ content.field_due_date.0['#markup']|date('M d, Y')|default(node.created.value|date('M d, Y')) }}
        </div>
      </div>
    </div>
  </div>

  <div class="invoice-parties">
    <div class="bill-to">
      <h3>Bill To:</h3>
      {% if client_data %}
        <div class="client-info">
          <div class="client-name">{{ client_data.title }}</div>
          {% if client_data.field_client_email %}
            <div class="client-email">{{ client_data.field_client_email }}</div>
          {% endif %}
          {% if client_data.field_client_phone %}
            <div class="client-phone">{{ client_data.field_client_phone }}</div>
          {% endif %}
          {% if client_data.field_client_address %}
            <div class="client-address">{{ client_data.field_client_address|nl2br }}</div>
          {% endif %}
        </div>
      {% else %}
        <div class="client-info">
          {{ content.field_client }}
        </div>
      {% endif %}
    </div>
    
    <div class="invoice-status">
      {% if content.field_invoice_status %}
        <div class="status-badge status-{{ content.field_invoice_status.0['#markup']|lower|replace(' ', '-') }}">
          {{ content.field_invoice_status.0 }}
        </div>
      {% endif %}
    </div>
  </div>

  {% if invoice_items %}
    <div class="invoice-items">
      <table class="items-table">
        <thead>
          <tr>
            <th class="item-serial">#</th>
            <th class="item-description">Item Description</th>
            <th class="item-amount">Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for item in invoice_items %}
            <tr>
              <td class="item-serial">{{ loop.index }}</td>
              <td class="item-description">{{ item.field_item_name }}</td>
              <td class="item-amount">{{ invoice_data.currency_symbol }}{{ item.field_amount }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      
      <div class="items-total">
        <div class="items-total-row">
          <span class="items-total-label">Items Total:</span>
          <span class="items-total-value">{{ invoice_data.currency_symbol }}{{ invoice_items_total }}</span>
        </div>
      </div>
    </div>
  {% endif %}

  <div class="invoice-totals">
    <div class="totals-section">
      {% if content.field_subtotal %}
        <div class="total-row">
          <span class="total-label">Subtotal:</span>
          <span class="total-value">{{ invoice_data.currency_symbol }}{{ content.field_subtotal.0 }}</span>
        </div>
      {% endif %}
      
      {% if content.field_tax_amount %}
        <div class="total-row">
          <span class="total-label">Tax:</span>
          <span class="total-value">{{ invoice_data.currency_symbol }}{{ content.field_tax_amount.0 }}</span>
        </div>
      {% endif %}
      
      {% if content.field_discount %}
        <div class="total-row">
          <span class="total-label">Discount:</span>
          <span class="total-value">-{{ invoice_data.currency_symbol }}{{ content.field_discount.0 }}</span>
        </div>
      {% endif %}
      
      {% if content.field_total_amount %}
        <div class="total-row total-final">
          <span class="total-label">Total Amount:</span>
          <span class="total-value">{{ invoice_data.currency_symbol }}{{ content.field_total_amount.0 }}</span>
        </div>
      {% endif %}
    </div>
  </div>

  {% if content.field_invoice_notes %}
    <div class="invoice-notes">
      <h4>Notes:</h4>
      <div class="notes-content">
        {{ content.field_invoice_notes }}
      </div>
    </div>
  {% endif %}

  {% if invoice_data.terms_conditions %}
    <div class="invoice-terms">
      <h4>Terms & Conditions:</h4>
      <div class="terms-content">
        {{ invoice_data.terms_conditions|nl2br }}
      </div>
    </div>
  {% endif %}

  {% if invoice_data.bank_details %}
    <div class="payment-info">
      <h4>Payment Information:</h4>
      <div class="bank-details">
        {{ invoice_data.bank_details|nl2br }}
      </div>
    </div>
  {% endif %}

  <div class="invoice-footer">
    <p class="thank-you">{{ invoice_data.footer_text|nl2br }}</p>
    <div class="invoice-timestamp">
      Generated on {{ "now"|date('M d, Y \\a\\t g:i A') }}
    </div>
  </div>
</div>