ERB to PDF Playground - Live Preview & Export

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoices</title>
    <link rel="stylesheet" href="/assets/invoice.css">
  </head>
  <body>
    <div class="invoice-container">
      <h1>Invoices</h1>
      <% if @invoices.any? %>
        <table>
          <thead>
            <tr>
              <th>Invoice ID</th>

<th>Customer</th>

<th>Date Issued</th>

<th>Status</th>

<th>Total Amount</th>

<th>Actions</th>
            </tr>
          </thead>

<td>
                  <% if invoice.attachments.any? %>
                    <a
                      class="download-link"
                      href="<%= invoice.attachments.first.url %>"
                      target="_blank"
                    >Download PDF</a>
                  <% end %>
                </td>
              </tr>

<tr>
                <td colspan="7">
                  <strong>Items:</strong>
                  <ul>
                    <% invoice.items.each do |item| %>
                      <li><%= item.description %>
                        -
                        <%= item.quantity %>
                        ×
                        <%= number_to_currency(item.unit_price, unit: "$") %></li>
                    <% end %>
                  </ul>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      <% else %>
        <p>No invoices found.</p>
      <% end %>
    </div>
  </body>
</html>

h1 {
    text-align: center;
    color: #343a40;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    overflow: hidden;
}

th, td {
    padding: 2px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #007bff;
    color: white;
    text-transform: uppercase;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

ul {
    padding: 10px;
    list-style-type: none;
}

ul li {
    padding: 5px 0;
}

.download-link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.download-link:hover {
    text-decoration: underline;
}

.status-pending {
    color: #ff9800;
    font-weight: bold;
}

.status-paid {
    color: #4caf50;
    font-weight: bold;
}

.status-overdue {
    color: #f44336;
    font-weight: bold;
}

.invoice-container {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.notes {
    font-style: italic;
    color: #6c757d;
}

.terms {
    font-size: 14px;
    color: #dc3545;
    font-weight: bold;
}

{
  "invoices": [
    {
      "tax": {
        "rate": 0.1,
        "amount": 112.0
      },
      "items": [
        {
          "item_id": "ITEM-001",
          "quantity": 1,
          "unit_price": 1000.0,
          "description": "Web Development Services",
          "total_price": 1000.0
        },
        {
          "item_id": "ITEM-002",
          "quantity": 12,
          "unit_price": 10.0,
          "description": "Hosting Fee",
          "total_price": 120.0
        }
      ],
      "notes": "Thank you for your business!",
      "terms": "Payment due within 14 days.",
      "status": "Pending",
      "currency": "USD",
      "customer": {
        "name": "John Doe",
        "email": "john.doe@example.com",
        "phone": "+1-555-123-4567",
        "address": {
          "city": "New York",
          "state": "NY",
          "street": "123 Main St",
          "country": "USA",
          "zip_code": "10001"
        },
        "customer_id": "CUST-123"
      },
      "discount": {
        "amount": 50.0,
        "description": "Loyalty Discount"
      },
      "due_date": "2025-02-23",
      "sub_total": 1120.0,
      "invoice_id": "INV-1001",
      "attachments": [
        {
          "url": "https://example.com/invoices/invoice-1001.pdf",
          "file_name": "invoice-1001.pdf"
        }
      ],
      "date_issued": "2025-02-09",
      "total_amount": 1182.0,
      "payment_method": "Credit Card"
    },
    {
      "tax": {
        "rate": 0.1,
        "amount": 100.0
      },
      "items": [
        {
          "item_id": "ITEM-003",
          "quantity": 2,
          "unit_price": 500.0,
          "description": "Graphic Design Services",
          "total_price": 1000.0
        }
      ],
      "notes": "Paid in full.",
      "terms": "No outstanding balance.",
      "status": "Paid",
      "currency": "USD",
      "customer": {
        "name": "Alice Smith",
        "email": "alice.smith@example.com",
        "phone": "+1-555-987-6543",
        "address": {
          "city": "Los Angeles",
          "state": "CA",
          "street": "456 Oak St",
          "country": "USA",
          "zip_code": "90001"
        },
        "customer_id": "CUST-456"
      },
      "discount": {
        "amount": 0.0,
        "description": "No Discount"
      },
      "due_date": "2025-02-24",
      "sub_total": 1000.0,
      "invoice_id": "INV-1002",
      "attachments": [
        {
          "url": "https://example.com/invoices/invoice-1002.pdf",
          "file_name": "invoice-1002.pdf"
        }
      ],
      "date_issued": "2025-02-10",
      "total_amount": 1100.0,
      "payment_method": "PayPal"
    },
    {
      "tax": {
        "rate": 0.1,
        "amount": 130.0
      },
      "items": [
        {
          "item_id": "ITEM-004",
          "quantity": 1,
          "unit_price": 800.0,
          "description": "SEO Optimization",
          "total_price": 800.0
        },
        {
          "item_id": "ITEM-005",
          "quantity": 5,
          "unit_price": 100.0,
          "description": "Content Writing",
          "total_price": 500.0
        }
      ],
      "notes": "Payment overdue. Late fees may apply.",
      "terms": "Due within 14 days. Late payments incur a 5% fee.",
      "status": "Overdue",
      "currency": "USD",
      "customer": {
        "name": "Michael Johnson",
        "email": "michael.j@example.com",
        "phone": "+1-555-222-3333",
        "address": {
          "city": "Chicago",
          "state": "IL",
          "street": "789 Pine St",
          "country": "USA",
          "zip_code": "60601"
        },
        "customer_id": "CUST-789"
      },
      "discount": {
        "amount": 100.0,
        "description": "Referral Discount"
      },
      "due_date": "2025-02-25",
      "sub_total": 1300.0,
      "invoice_id": "INV-1003",
      "attachments": [
        {
          "url": "https://example.com/invoices/invoice-1003.pdf",
          "file_name": "invoice-1003.pdf"
        }
      ],
      "date_issued": "2025-02-11",
      "total_amount": 1330.0,
      "payment_method": "Bank Transfer"
    }
  ]
}