[Core]: Online PDF invoice template editor

[ririko5834]

SMART Plan — [Core] Online PDF invoice template editor

Related: #98 (split-panel live preview / template editor), #96 (inline PDF preview on the invoice edit page).

Specific

Provide an in-browser HTML editor (e.g. CodeMirror or Monaco) inside the Filament admin panel where an admin can edit the Blade/HTML source of invoice PDF templates. The editor displays available template variables (placeholders) in a sidebar reference panel. A Preview button renders the template with dummy data so the admin can see the result without leaving the editor.

Measurable

• A template editor page exists under the admin panel Settings section.
• The editor loads the current template source.
• Saving the editor content persists the template file (or a DB-backed template record).
• The Preview button renders the template with sample invoice data and displays the HTML inline (no download required).
• PHPUnit confirms the save endpoint persists the template content.

Achievable

1. Create a Filament EditTemplate page or custom page under Modules/Core/Filament/Admin/Pages/.
2. Embed a CodeMirror or Monaco editor via a Livewire component.
3. The "Save" action writes the template content to a configurable path or a templates database table.
4. The "Preview" action calls the PDF renderer with sample data and returns HTML via a Livewire modal.

Relevant

Template customisation currently requires direct file system access (SSH / FTP) which is inaccessible to non-technical users. An in-browser editor removes this barrier.

Time-bound

Sprint 6 — depends on the base PDF renderer being stable (#96, #190, #200).

---

Acceptance Criteria

• Template editor page accessible to admin users.
• CodeMirror / Monaco editor with HTML syntax highlighting.
• Sidebar panel lists available placeholders ({{ $invoice->invoice_number }}, etc.).
• Save action persists the template.
• Preview action renders the template with sample data.
• PHPUnit test: saving a template persists the content.

[clockwiseq]

This is an enhancement that I recommended a couple of years ago. Not sure what direction we go in with the v1 vs v2 (branch the code and start over) or if we continue on with the current code base and enhance it. Either way, this is one of my favorite requests as I have always felt that it would increase the user-base because business owners wouldn't have to depend on a PHP developer to create their own invoice templates.

[ririko5834]

The same thing should exist for PDF invoice templates.

With this, you could change the appearance of the templates, for example, make that custom client fields will be displayed in the templates

[clockwiseq]

Yeah, that was what I meant above. The template editor would allow you to modify and store the templates in the database and have a visual editor for ease-of-use. Those templates would be for the three (3) areas an invoice was displayed (web, email, PDF)

[OPGRBILLINGDEV]

Is underlyning technology selected for template editor ? What about pure CSS ?

Certain open source solutions exist in Git, such as rukavina's>
https://github.com/topics/css-editor

...and could be merged/tweeked/forked into/with 1.6.x or v2.

Has also features like - background image option for web nd PDF, which we do not need to extra-code into IP, just add editor which has such features.

Paralell CSS editor with wysiwig window, exist also in open-source CSS editor from sauravhathi>
https://github.com/sauravhathi/live-html-editor

[coderabbitai]

This issue is related to the Report Builder feature set. Cross-referencing with:

• [Reports]: Report Builder — bands + bricks #130 - Template Editor / Report Builder (primary issue covering template editing with drag-and-drop interface)
• [Reports]: Custom field support in Report Builder #133 - Custom field integration in Report Builder
• [Reports]: Reports module — v1 feature parity #145 - Reports

These issues share similar goals around providing visual editing capabilities for templates and reports without requiring coding knowledge.

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Get the current issue details
echo "=== Current Issue `#401` Details ==="
gh issue view 401 --repo InvoicePlane/InvoicePlane-v2 --json title,body,number,state

echo -e "\n\n=== Searching for issues related to 'report builder' ==="
# Search for issues containing "report builder"
gh issue list --repo InvoicePlane/InvoicePlane-v2 --search "report builder" --json number,title,state,body --limit 50

echo -e "\n\n=== Alternative search: 'report' ==="
# Also search for just "report" in case "report builder" doesn't match exactly
gh issue list --repo InvoicePlane/InvoicePlane-v2 --search "report in:title,body" --json number,title,state --limit 30

Length of output: 8878

---

🏁 Script executed:

#!/bin/bash

# Add a comment to issue `#401` that references the report builder issues
gh issue comment 401 --repo InvoicePlane/InvoicePlane-v2 --body "This issue is related to the Report Builder feature set. Cross-referencing with:

- `#130` - Template Editor / Report Builder (primary issue covering template editing with drag-and-drop interface)
- `#133` - Custom field integration in Report Builder
- `#145` - Reports

These issues share similar goals around providing visual editing capabilities for templates and reports without requiring coding knowledge."

Length of output: 82

---

@nielsdrost7, I've attached this issue to the report builder issues by creating cross-references. The following related issues are now linked:

• [Reports]: Report Builder — bands + bricks #130 - Template Editor / Report Builder (the primary issue covering drag-and-drop template editing)
• [Reports]: Custom field support in Report Builder #133 - Custom field integration in Report Builder
• 145 - Reports (general reports issue)

These issues share the common goal of providing visual editing capabilities for templates and reports without requiring coding knowledge. The cross-references create bidirectional links, making it easier to track all related work for the report builder feature set.

[nielsdrost7]

Planning Note — v2 Implementation

Story: As a company admin with no PHP knowledge, I want a visual drag-and-drop editor for invoice and quote PDF templates, so that I can customise the layout (logo position, colour scheme, field order) without editing Blade files.

v2 context: v2 generates PDFs from Blade templates using barryvdh/laravel-dompdf. A full drag-and-drop template editor is a substantial feature. The pragmatic v2 approach is a CSS/variable override system plus a template selector — giving 80% of the value at 20% of the complexity.

Acceptance Criteria:

• Company Settings → Invoice Templates has a list of available PDF templates (at least: default, classic, modern).
• Each template has configurable variables: primary colour, logo position (left/right), show/hide fields (e.g. hide IBAN).
• The selected template and its variables are stored per company.
• A preview of the rendered PDF is shown (using a sample invoice) when the admin changes template settings.
• The existing Blade templates are kept for advanced users who want to customise them directly.

Implementation:

• Company model gains pdf_template (string, default default) and pdf_template_options (JSON).
• Template Blade files: Modules/Core/resources/Templates/Views/templates/invoices/{template}.blade.php.
• Settings page: Filament Select for template choice + dynamic ColorPicker / Toggle fields driven by the selected template's config.
• PDF generation: InvoiceService::generatePdf($invoice) reads $invoice->company->pdf_template and passes pdf_template_options as Blade data.
• Preview endpoint: GET /{tenant}/invoice-template-preview — renders a mock invoice with current settings.

Post-v2 scope: A full drag-and-drop block editor (like Unlayer/GrapeJS) embedded in the settings page is a significant standalone feature that deserves its own tracking in the report builder epic (#130).

Test Scenarios (PHPUnit):

// PDF uses company's selected template
/* Arrange */ $this->company->update(['pdf_template' => 'modern']);
              $invoice = Invoice::factory()->for($this->company)->create();
/* Act */     $html = app(InvoiceService::class)->renderPdfHtml($invoice);
/* Assert */  $this->assertStringContainsString('modern-template', $html);

// Template options (colour) are passed to blade
/* Arrange */ $this->company->update(['pdf_template_options' => ['primary_color' => '#FF5733']]);
              $invoice = Invoice::factory()->for($this->company)->create();
/* Act */     $html = app(InvoiceService::class)->renderPdfHtml($invoice);
/* Assert */  $this->assertStringContainsString('#FF5733', $html);