wip

app/Enums/Setting/Template.php

 
 namespace App\Enums\Setting;
 
+use App\Enums\Concerns\ParsesEnum;
 use Filament\Support\Contracts\HasLabel;
 
 enum Template: string implements HasLabel
 {
+    use ParsesEnum;
+
     case Default = 'default';
     case Modern = 'modern';
     case Classic = 'classic';

app/Filament/Company/Clusters/Settings/Resources/DocumentDefaultResource.php

 use App\Enums\Setting\Template;
 use App\Filament\Company\Clusters\Settings;
 use App\Filament\Company\Clusters\Settings\Resources\DocumentDefaultResource\Pages;
+use App\Filament\Forms\Components\DocumentPreview;
 use App\Models\Setting\DocumentDefault;
 use Filament\Forms;
 use Filament\Forms\Components\Component;
                             ->options(Template::class),
                         ...static::getColumnLabelsSchema(),
                     ])->columnSpan(1),
-                Forms\Components\Grid::make()
-                    ->schema([
-                        Forms\Components\ViewField::make('preview.default')
-                            ->columnSpan(2)
-                            ->hiddenLabel()
-                            ->visible(static fn (Get $get) => $get('template') === 'default')
-                            ->view('filament.company.components.document-templates.default'),
-                        Forms\Components\ViewField::make('preview.modern')
-                            ->columnSpan(2)
-                            ->hiddenLabel()
-                            ->visible(static fn (Get $get) => $get('template') === 'modern')
-                            ->view('filament.company.components.document-templates.modern'),
-                        Forms\Components\ViewField::make('preview.classic')
-                            ->columnSpan(2)
-                            ->hiddenLabel()
-                            ->visible(static fn (Get $get) => $get('template') === 'classic')
-                            ->view('filament.company.components.document-templates.classic'),
-                    ])->columnSpan([
+                DocumentPreview::make()
+                    ->template(static fn (Get $get) => Template::parse($get('template')))
+                    ->preview()
+                    ->columnSpan([
                         'lg' => 2,
                     ]),
             ])->columns(3);

app/Filament/Forms/Components/DocumentPreview.php

+<?php
+
+namespace App\Filament\Forms\Components;
+
+use App\Enums\Setting\Template;
+use Closure;
+use Filament\Forms\Components\Grid;
+
+class DocumentPreview extends Grid
+{
+    protected string $view = 'filament.forms.components.document-preview';
+
+    protected bool | Closure $isPreview = false;
+
+    protected Template | Closure $template = Template::Default;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+    }
+
+    public function preview(bool | Closure $condition = true): static
+    {
+        $this->isPreview = $condition;
+
+        return $this;
+    }
+
+    public function template(Template | Closure $template): static
+    {
+        $this->template = $template;
+
+        return $this;
+    }
+
+    public function isPreview(): bool
+    {
+        return (bool) $this->evaluate($this->isPreview);
+    }
+
+    public function getTemplate(): Template
+    {
+        return $this->evaluate($this->template);
+    }
+}

app/Filament/Infolists/Components/DocumentPreview.php

 use App\Enums\Accounting\DocumentType;
 use App\Enums\Setting\Template;
 use App\Models\Setting\DocumentDefault;
+use Closure;
 use Filament\Infolists\Components\Grid;
 
 class DocumentPreview extends Grid
 
     protected DocumentType $documentType = DocumentType::Invoice;
 
+    protected bool | Closure $isPreview = false;
+
     protected function setUp(): void
     {
         parent::setUp();
         return $this;
     }
 
+    public function preview(bool | Closure $condition = true): static
+    {
+        $this->isPreview = $condition;
+
+        return $this;
+    }
+
     public function getType(): DocumentType
     {
         return $this->documentType;
     }
 
+    public function isPreview(): bool
+    {
+        return (bool) $this->evaluate($this->isPreview);
+    }
+
     public function getTemplate(): Template
     {
         if ($this->documentType === DocumentType::RecurringInvoice) {

resources/css/filament/company/theme.css

 .doc-template-container {
     color: initial;
 }
+
+.doc-template-container .overflow-x-auto,
+.doc-template-paper {
+    scrollbar-width: thin;
+}
+
+.doc-template-paper.preview {
+    zoom: 0.5;
+}
+
+@media (min-width: 1024px) {
+    .doc-template-paper.preview {
+        zoom: 0.85;
+    }
+}
+
+.doc-template-paper:not(.preview) {
+    zoom: 0.65;
+}
+
+@media (min-width: 1024px) {
+    .doc-template-paper:not(.preview) {
+        zoom: 1;
+    }
+}

resources/views/components/company/document-template/container.blade.php

 <div
     @class([
         'doc-template-container flex justify-center',
-        'scale-[0.85] origin-top' => $preview === true,
     ])
 >
-    <div class="overflow-auto">
+    <div class="max-w-full overflow-x-auto shadow-xl ring-1 ring-gray-950/5 dark:ring-white/10">
         <div
             @class([
-                'doc-template-paper bg-[#ffffff] shadow-xl ring-1 ring-gray-950/5 dark:ring-white/10',
-                'w-[51.25rem] h-[64rem]' => $preview === false,
-                'w-[48rem] h-[61.75rem]' => $preview === true,
-            ])
-            @style([
-                'scrollbar-width: thin;' => $preview === false,
+                'doc-template-paper bg-[#ffffff] overflow-y-auto',
+                'w-[51.25rem] h-[64rem]' => ! $preview,
+                'w-[48rem] min-h-[61.75rem] preview' => $preview,
             ])
         >
             {{ $slot }}

resources/views/components/company/document-template/footer.blade.php

-<footer {{ $attributes->class(['doc-template-footer']) }}>
+<footer {{ $attributes->class(['doc-template-footer min-h-48']) }}>
     {{ $slot }}
 </footer>

resources/views/filament/company/components/document-templates/classic.blade.php

-@php
-    $data = $this->form->getRawState();
-    $document = \App\DTO\DocumentPreviewDTO::fromSettings($this->record, $data);
-@endphp
-
-{!! $document->getFontHtml() !!}
-
-<style>
-    .doc-template-paper {
-        font-family: '{{ $document->font->getLabel() }}', sans-serif;
-    }
-</style>
-
-<x-company.document-template.container class="classic-template-container" preview>
+<x-company.document-template.container class="classic-template-container" :preview="$preview">
     <!-- Header Section -->
     <x-company.document-template.header class="classic-template-header">
         <div class="w-2/3 text-left">
-            <div class="text-xs">
-                <strong class="text-xs block">{{ $document->company->name }}</strong>
+            <div class="text-sm">
+                <strong class="text-sm block">{{ $document->company->name }}</strong>
                 @if($formattedAddress = $document->company->getFormattedAddressHtml())
                     {!! $formattedAddress !!}
                 @endif
             <x-icons.document-header-decoration
                 color="{{ $document->accentColor }}"
                 text="{{ $document->header }}"
-                class="w-48"
+                class="w-60"
             />
             <hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
         </div>
         @if ($document->subheader)
-            <p class="text-xs text-center text-gray-600">{{ $document->subheader }}</p>
+            <p class="text-sm text-center text-gray-600">{{ $document->subheader }}</p>
         @endif
 
         <div class="flex justify-between items-end">
             <!-- Billing Details -->
-            <div class="text-xs">
+            <div class="text-sm">
                 <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
-                <p class="text-xs font-bold">{{ $document->client->name }}</p>
+                <p class="text-sm font-bold">{{ $document->client->name }}</p>
                 @if($formattedAddress = $document->client->getFormattedAddressHtml())
                     {!! $formattedAddress !!}
                 @endif
             </div>
 
-            <div class="text-xs">
+            <div class="text-sm">
                 <table class="min-w-full">
                     <tbody>
                     <tr>
     <!-- Line Items -->
     <x-company.document-template.line-items class="classic-template-line-items px-6">
         <table class="w-full text-left table-fixed">
-            <thead class="text-xs leading-relaxed">
+            <thead class="text-sm leading-relaxed">
             <tr>
                 <th class="text-left w-[50%] py-4">{{ $document->columnLabel->items }}</th>
                 <th class="text-center w-[10%] py-4">{{ $document->columnLabel->units }}</th>
                 <th class="text-right w-[20%] py-4">{{ $document->columnLabel->amount }}</th>
             </tr>
             </thead>
-            <tbody class="text-xs border-y-2 border-dotted border-gray-300">
+            <tbody class="text-sm border-y-2 border-dotted border-gray-300">
             @foreach($document->lineItems as $item)
                 <tr>
                     <td class="text-left font-semibold py-3">
         </table>
 
         <!-- Financial Details and Notes -->
-        <div class="flex justify-between text-xs space-x-1 pt-4">
+        <div class="flex justify-between text-sm space-x-1 pt-4">
             <!-- Notes Section -->
             <div class="w-[60%] py-2">
                 <p class="font-semibold">{{ $document->footer }}</p>
             <!-- Financial Summary -->
             <div class="w-[40%]">
                 <table class="w-full table-fixed whitespace-nowrap">
-                    <tbody class="text-xs">
+                    <tbody class="text-sm">
                     @if($document->subtotal)
                         <tr>
                             <td class="text-right font-semibold py-2">Subtotal:</td>
     </x-company.document-template.line-items>
 
     <!-- Footer -->
-    <x-company.document-template.footer class="classic-template-footer p-6 text-xs">
+    <x-company.document-template.footer class="classic-template-footer p-6 text-sm">
         <h4 class="font-semibold mb-2">Terms & Conditions</h4>
         <p class="break-words line-clamp-4">{{ $document->terms }}</p>
     </x-company.document-template.footer>

resources/views/filament/company/components/document-templates/default.blade.php

-@php
-    $data = $this->form->getRawState();
-    $document = \App\DTO\DocumentPreviewDTO::fromSettings($this->record, $data);
-@endphp
-
-{!! $document->getFontHtml() !!}
-
-<style>
-    .doc-template-paper {
-        font-family: '{{ $document->font->getLabel() }}', sans-serif;
-    }
-</style>
-
-<x-company.document-template.container class="default-template-container" preview>
+<x-company.document-template.container class="default-template-container" :preview="$preview">
 
     <x-company.document-template.header class="default-template-header border-b">
         <div class="w-1/3">
                 <div>
                     <h1 class="text-3xl font-light uppercase">{{ $document->header }}</h1>
                     @if ($document->subheader)
-                        <p class="text-xs text-gray-600">{{ $document->subheader }}</p>
+                        <p class="text-sm text-gray-600">{{ $document->subheader }}</p>
                     @endif
                 </div>
-                <div class="text-xs">
-                    <strong class="text-xs block">{{ $document->company->name }}</strong>
+                <div class="text-sm">
+                    <strong class="text-sm block">{{ $document->company->name }}</strong>
                     @if($formattedAddress = $document->company->getFormattedAddressHtml())
                         {!! $formattedAddress !!}
                     @endif
     <x-company.document-template.metadata class="default-template-metadata space-y-4">
         <div class="flex justify-between items-end">
             <!-- Billing Details -->
-            <div class="text-xs">
+            <div class="text-sm">
                 <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
-                <p class="text-xs font-bold">{{ $document->client->name }}</p>
+                <p class="text-sm font-bold">{{ $document->client->name }}</p>
                 @if($formattedAddress = $document->client->getFormattedAddressHtml())
                     {!! $formattedAddress !!}
                 @endif
             </div>
 
-            <div class="text-xs">
+            <div class="text-sm">
                 <table class="min-w-full">
                     <tbody>
                     <tr>
     <!-- Line Items Table -->
     <x-company.document-template.line-items class="default-template-line-items">
         <table class="w-full text-left table-fixed">
-            <thead class="text-xs leading-relaxed" style="background: {{ $document->accentColor }}">
+            <thead class="text-sm leading-relaxed" style="background: {{ $document->accentColor }}">
             <tr class="text-white">
                 <th class="text-left pl-6 w-[50%] py-2">{{ $document->columnLabel->items }}</th>
                 <th class="text-center w-[10%] py-2">{{ $document->columnLabel->units }}</th>
                 <th class="text-right pr-6 w-[20%] py-2">{{ $document->columnLabel->amount }}</th>
             </tr>
             </thead>
-            <tbody class="text-xs border-b-2 border-gray-300">
+            <tbody class="text-sm border-b-2 border-gray-300">
             @foreach($document->lineItems as $item)
                 <tr>
                     <td class="text-left pl-6 font-semibold py-3">
                 </tr>
             @endforeach
             </tbody>
-            <tfoot class="text-xs summary-section">
+            <tfoot class="text-sm summary-section">
             @if($document->subtotal)
                 <tr>
                     <td class="pl-6 py-2" colspan="2"></td>
     </x-company.document-template.line-items>
 
     <!-- Footer Notes -->
-    <x-company.document-template.footer class="classic-template-footer flex flex-col text-xs p-6">
+    <x-company.document-template.footer class="default-template-footer flex flex-col text-sm p-6">
         <div>
             <h4 class="font-semibold mb-2">Terms & Conditions</h4>
             <p class="break-words line-clamp-4">{{ $document->terms }}</p>

resources/views/filament/company/components/document-templates/modern.blade.php

-@php
-    $data = $this->form->getRawState();
-    $document = \App\DTO\DocumentPreviewDTO::fromSettings($this->record, $data);
-@endphp
-
-{!! $document->getFontHtml() !!}
-
-<style>
-    .doc-template-paper {
-        font-family: '{{ $document->font->getLabel() }}', sans-serif;
-    }
-</style>
-
-<x-company.document-template.container class="modern-template-container" preview>
+<x-company.document-template.container class="modern-template-container" :preview="$preview">
     <!-- Colored Header with Logo -->
     <x-company.document-template.header class="bg-gray-800 h-24">
         <!-- Logo -->
     <!-- Company Details -->
     <x-company.document-template.metadata class="modern-template-metadata space-y-8">
         <div class="text-sm">
-            <h2 class="text-lg font-semibold">{{ $document->company->name }}</h2>
+            <strong class="text-sm block">{{ $document->company->name }}</strong>
             @if($formattedAddress = $document->company->getFormattedAddressHtml())
                 {!! $formattedAddress !!}
             @endif

resources/views/filament/forms/components/document-preview.blade.php

+@php
+    $data = $this->form->getRawState();
+    $document = \App\DTO\DocumentPreviewDTO::fromSettings($this->record, $data);
+    $template = $getTemplate();
+    $preview = $isPreview();
+@endphp
+
+{!! $document->getFontHtml() !!}
+
+<style>
+    .doc-template-paper {
+        font-family: '{{ $document->font->getLabel() }}', sans-serif;
+    }
+</style>
+
+<div {{ $attributes }}>
+    @include("filament.company.components.document-templates.{$template->value}", [
+        'document' => $document,
+        'preview' => $preview,
+    ])
+</div>

resources/views/filament/infolists/components/document-preview.blade.php

 @php
     $document = \App\DTO\DocumentDTO::fromModel($getRecord());
     $template = $getTemplate();
+    $preview = $isPreview();
 @endphp
 
 {!! $document->getFontHtml() !!}
 </style>
 
 <div {{ $attributes }}>
-    @include("filament.infolists.components.document-templates.{$template->value}", [
+    @include("filament.company.components.document-templates.{$template->value}", [
         'document' => $document,
-        'preview' => false,
+        'preview' => $preview,
     ])
 </div>

resources/views/filament/infolists/components/document-templates/classic.blade.php

-<x-company.document-template.container class="classic-template-container">
-    <!-- Header Section -->
-    <x-company.document-template.header class="classic-template-header">
-        <div class="w-2/3 text-left">
-            <div class="text-sm">
-                <strong class="text-sm block">{{ $document->company->name }}</strong>
-                @if($formattedAddress = $document->company->getFormattedAddressHtml())
-                    {!! $formattedAddress !!}
-                @endif
-            </div>
-        </div>
-
-        <div class="w-1/3 flex justify-end">
-            @if($document->logo && $document->showLogo)
-                <x-company.document-template.logo :src="$document->logo"/>
-            @endif
-        </div>
-    </x-company.document-template.header>
-
-    <x-company.document-template.metadata class="classic-template-metadata space-y-4">
-        <div class="items-center flex">
-            <hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
-            <x-icons.document-header-decoration
-                color="{{ $document->accentColor }}"
-                text="{{ $document->header }}"
-                class="w-60"
-            />
-            <hr class="grow-[2] py-0.5 border-solid border-y-2" style="border-color: {{ $document->accentColor }};">
-        </div>
-        @if ($document->subheader)
-            <p class="text-sm text-center text-gray-600">{{ $document->subheader }}</p>
-        @endif
-
-        <div class="flex justify-between items-end">
-            <!-- Billing Details -->
-            <div class="text-sm">
-                <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
-                <p class="text-sm font-bold">{{ $document->client->name }}</p>
-                @if($formattedAddress = $document->client->getFormattedAddressHtml())
-                    {!! $formattedAddress !!}
-                @endif
-            </div>
-
-            <div class="text-sm">
-                <table class="min-w-full">
-                    <tbody>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->number }}:</td>
-                        <td class="text-left pl-2">{{ $document->number }}</td>
-                    </tr>
-                    @if($document->referenceNumber)
-                        <tr>
-                            <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
-                            <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
-                        </tr>
-                    @endif
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->date }}:</td>
-                        <td class="text-left pl-2">{{ $document->date }}</td>
-                    </tr>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->dueDate }}:</td>
-                        <td class="text-left pl-2">{{ $document->dueDate }}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </x-company.document-template.metadata>
-
-    <!-- Line Items -->
-    <x-company.document-template.line-items class="classic-template-line-items px-6">
-        <table class="w-full text-left table-fixed">
-            <thead class="text-sm leading-relaxed">
-            <tr>
-                <th class="text-left w-[50%] py-4">{{ $document->columnLabel->items }}</th>
-                <th class="text-center w-[10%] py-4">{{ $document->columnLabel->units }}</th>
-                <th class="text-right w-[20%] py-4">{{ $document->columnLabel->price }}</th>
-                <th class="text-right w-[20%] py-4">{{ $document->columnLabel->amount }}</th>
-            </tr>
-            </thead>
-            <tbody class="text-sm border-y-2 border-dotted border-gray-300">
-            @foreach($document->lineItems as $item)
-                <tr>
-                    <td class="text-left font-semibold py-3">
-                        {{ $item->name }}
-                        @if($item->description)
-                            <div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
-                        @endif
-                    </td>
-                    <td class="text-center py-3">{{ $item->quantity }}</td>
-                    <td class="text-right py-3">{{ $item->unitPrice }}</td>
-                    <td class="text-right py-3">{{ $item->subtotal }}</td>
-                </tr>
-            @endforeach
-            </tbody>
-        </table>
-
-        <!-- Financial Details and Notes -->
-        <div class="flex justify-between text-sm space-x-1 pt-4">
-            <!-- Notes Section -->
-            <div class="w-[60%] py-2">
-                <p class="font-semibold">{{ $document->footer }}</p>
-            </div>
-
-            <!-- Financial Summary -->
-            <div class="w-[40%]">
-                <table class="w-full table-fixed whitespace-nowrap">
-                    <tbody class="text-sm">
-                    @if($document->subtotal)
-                        <tr>
-                            <td class="text-right font-semibold py-2">Subtotal:</td>
-                            <td class="text-right py-2">{{ $document->subtotal }}</td>
-                        </tr>
-                    @endif
-                    @if($document->discount)
-                        <tr class="text-success-800">
-                            <td class="text-right py-2">Discount:</td>
-                            <td class="text-right py-2">
-                                ({{ $document->discount }})
-                            </td>
-                        </tr>
-                    @endif
-                    @if($document->tax)
-                        <tr>
-                            <td class="text-right py-2">Tax:</td>
-                            <td class="text-right py-2">{{ $document->tax }}</td>
-                        </tr>
-                    @endif
-                    <tr>
-                        <td class="text-right font-semibold border-t py-2">Total:</td>
-                        <td class="text-right border-t py-2">{{ $document->total }}</td>
-                    </tr>
-                    @if($document->amountDue)
-                        <tr>
-                            <td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
-                                ({{ $document->currencyCode }}):
-                            </td>
-                            <td class="text-right border-t-4 border-double py-2">{{ $document->amountDue }}</td>
-                        </tr>
-                    @endif
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </x-company.document-template.line-items>
-
-    <!-- Footer -->
-    <x-company.document-template.footer class="classic-template-footer min-h-48 p-6 text-sm">
-        <h4 class="font-semibold mb-2">Terms & Conditions</h4>
-        <p class="break-words line-clamp-4">{{ $document->terms }}</p>
-    </x-company.document-template.footer>
-</x-company.document-template.container>

resources/views/filament/infolists/components/document-templates/default.blade.php

-<x-company.document-template.container class="default-template-container">
-
-    <x-company.document-template.header class="default-template-header border-b">
-        <div class="w-1/3">
-            @if($document->logo && $document->showLogo)
-                <x-company.document-template.logo :src="$document->logo"/>
-            @endif
-        </div>
-
-        <div class="w-2/3 text-right">
-            <div class="space-y-4">
-                <div>
-                    <h1 class="text-3xl font-light uppercase">{{ $document->header }}</h1>
-                    @if ($document->subheader)
-                        <p class="text-sm text-gray-600">{{ $document->subheader }}</p>
-                    @endif
-                </div>
-                <div class="text-sm">
-                    <strong class="text-sm block">{{ $document->company->name }}</strong>
-                    @if($formattedAddress = $document->company->getFormattedAddressHtml())
-                        {!! $formattedAddress !!}
-                    @endif
-                </div>
-            </div>
-        </div>
-    </x-company.document-template.header>
-
-    <x-company.document-template.metadata class="default-template-metadata space-y-4">
-        <div class="flex justify-between items-end">
-            <!-- Billing Details -->
-            <div class="text-sm">
-                <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
-                <p class="text-sm font-bold">{{ $document->client->name }}</p>
-                @if($formattedAddress = $document->client->getFormattedAddressHtml())
-                    {!! $formattedAddress !!}
-                @endif
-            </div>
-
-            <div class="text-sm">
-                <table class="min-w-full">
-                    <tbody>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->number }}:</td>
-                        <td class="text-left pl-2">{{ $document->number }}</td>
-                    </tr>
-                    @if($document->referenceNumber)
-                        <tr>
-                            <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
-                            <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
-                        </tr>
-                    @endif
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->date }}:</td>
-                        <td class="text-left pl-2">{{ $document->date }}</td>
-                    </tr>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->dueDate }}:</td>
-                        <td class="text-left pl-2">{{ $document->dueDate }}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </x-company.document-template.metadata>
-
-    <!-- Line Items Table -->
-    <x-company.document-template.line-items class="default-template-line-items">
-        <table class="w-full text-left table-fixed">
-            <thead class="text-sm leading-relaxed" style="background: {{ $document->accentColor }}">
-            <tr class="text-white">
-                <th class="text-left pl-6 w-[50%] py-2">{{ $document->columnLabel->items }}</th>
-                <th class="text-center w-[10%] py-2">{{ $document->columnLabel->units }}</th>
-                <th class="text-right w-[20%] py-2">{{ $document->columnLabel->price }}</th>
-                <th class="text-right pr-6 w-[20%] py-2">{{ $document->columnLabel->amount }}</th>
-            </tr>
-            </thead>
-            <tbody class="text-sm border-b-2 border-gray-300">
-            @foreach($document->lineItems as $item)
-                <tr>
-                    <td class="text-left pl-6 font-semibold py-3">
-                        {{ $item->name }}
-                        @if($item->description)
-                            <div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
-                        @endif
-                    </td>
-                    <td class="text-center py-3">{{ $item->quantity }}</td>
-                    <td class="text-right py-3">{{ $item->unitPrice }}</td>
-                    <td class="text-right pr-6 py-3">{{ $item->subtotal }}</td>
-                </tr>
-            @endforeach
-            </tbody>
-            <tfoot class="text-sm summary-section">
-            @if($document->subtotal)
-                <tr>
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right font-semibold py-2">Subtotal:</td>
-                    <td class="text-right pr-6 py-2">{{ $document->subtotal }}</td>
-                </tr>
-            @endif
-            @if($document->discount)
-                <tr class="text-success-800">
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right py-2">Discount:</td>
-                    <td class="text-right pr-6 py-2">
-                        ({{ $document->discount }})
-                    </td>
-                </tr>
-            @endif
-            @if($document->tax)
-                <tr>
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right py-2">Tax:</td>
-                    <td class="text-right pr-6 py-2">{{ $document->tax }}</td>
-                </tr>
-            @endif
-            <tr>
-                <td class="pl-6 py-2" colspan="2"></td>
-                <td class="text-right font-semibold border-t py-2">Total:</td>
-                <td class="text-right border-t pr-6 py-2">{{ $document->total }}</td>
-            </tr>
-            @if($document->amountDue)
-                <tr>
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
-                        ({{ $document->currencyCode }}):
-                    </td>
-                    <td class="text-right border-t-4 border-double pr-6 py-2">{{ $document->amountDue }}</td>
-                </tr>
-            @endif
-            </tfoot>
-        </table>
-    </x-company.document-template.line-items>
-
-    <!-- Footer Notes -->
-    <x-company.document-template.footer class="classic-template-footer min-h-48 flex flex-col text-sm p-6">
-        <div>
-            <h4 class="font-semibold mb-2">Terms & Conditions</h4>
-            <p class="break-words line-clamp-4">{{ $document->terms }}</p>
-        </div>
-
-        @if($document->footer)
-            <div class="mt-auto text-center py-4">
-                <p class="font-semibold">{{ $document->footer }}</p>
-            </div>
-        @endif
-    </x-company.document-template.footer>
-</x-company.document-template.container>

resources/views/filament/infolists/components/document-templates/modern.blade.php

-<x-company.document-template.container class="modern-template-container">
-    <!-- Colored Header with Logo -->
-    <x-company.document-template.header class="bg-gray-800 h-24">
-        <!-- Logo -->
-        <div class="w-2/3">
-            @if($document->logo && $document->showLogo)
-                <x-company.document-template.logo class="ml-8" :src="$document->logo"/>
-            @endif
-        </div>
-
-        <!-- Ribbon Container -->
-        <div class="w-1/3 absolute right-0 top-0 p-3 h-32 flex flex-col justify-end rounded-bl-sm"
-             style="background: {{ $document->accentColor }};">
-            @if($document->header)
-                <h1 class="text-4xl font-bold text-white text-center uppercase">{{ $document->header }}</h1>
-            @endif
-        </div>
-    </x-company.document-template.header>
-
-    <!-- Company Details -->
-    <x-company.document-template.metadata class="modern-template-metadata space-y-8">
-        <div class="text-sm">
-            <h2 class="text-lg font-semibold">{{ $document->company->name }}</h2>
-            @if($formattedAddress = $document->company->getFormattedAddressHtml())
-                {!! $formattedAddress !!}
-            @endif
-        </div>
-
-        <div class="flex justify-between items-end">
-            <!-- Billing Details -->
-            <div class="text-sm">
-                <h3 class="text-gray-600 font-medium mb-1">BILL TO</h3>
-                <p class="text-sm font-bold"
-                   style="color: {{ $document->accentColor }}">{{ $document->client->name }}</p>
-
-                @if($formattedAddress = $document->client->getFormattedAddressHtml())
-                    {!! $formattedAddress !!}
-                @endif
-            </div>
-
-            <div class="text-sm">
-                <table class="min-w-full">
-                    <tbody>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->number }}:</td>
-                        <td class="text-left pl-2">{{ $document->number }}</td>
-                    </tr>
-                    @if($document->referenceNumber)
-                        <tr>
-                            <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
-                            <td class="text-left pl-2">{{ $document->referenceNumber }}</td>
-                        </tr>
-                    @endif
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->date }}:</td>
-                        <td class="text-left pl-2">{{ $document->date }}</td>
-                    </tr>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->dueDate }}:</td>
-                        <td class="text-left pl-2">{{ $document->dueDate }}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </x-company.document-template.metadata>
-
-    <!-- Line Items Table -->
-    <x-company.document-template.line-items class="modern-template-line-items">
-        <table class="w-full text-left table-fixed">
-            <thead class="text-sm leading-relaxed">
-            <tr class="text-gray-600">
-                <th class="text-left pl-6 w-[50%] py-4">{{ $document->columnLabel->items }}</th>
-                <th class="text-center w-[10%] py-4">{{ $document->columnLabel->units }}</th>
-                <th class="text-right w-[20%] py-4">{{ $document->columnLabel->price }}</th>
-                <th class="text-right pr-6 w-[20%] py-4">{{ $document->columnLabel->amount }}</th>
-            </tr>
-            </thead>
-            <tbody class="text-sm border-y-2">
-            @foreach($document->lineItems as $index => $item)
-                <tr @class(['bg-gray-100' => $index % 2 === 0])>
-                    <td class="text-left pl-6 font-semibold py-3">
-                        {{ $item->name }}
-                        @if($item->description)
-                            <div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
-                        @endif
-                    </td>
-                    <td class="text-center py-3">{{ $item->quantity }}</td>
-                    <td class="text-right py-3">{{ $item->unitPrice }}</td>
-                    <td class="text-right pr-6 py-3">{{ $item->subtotal }}</td>
-                </tr>
-            @endforeach
-            </tbody>
-            <tfoot class="text-sm summary-section">
-            @if($document->subtotal)
-                <tr>
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right font-semibold py-2">Subtotal:</td>
-                    <td class="text-right pr-6 py-2">{{ $document->subtotal }}</td>
-                </tr>
-            @endif
-            @if($document->discount)
-                <tr class="text-success-800">
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right py-2">Discount:</td>
-                    <td class="text-right pr-6 py-2">
-                        ({{ $document->discount }})
-                    </td>
-                </tr>
-            @endif
-            @if($document->tax)
-                <tr>
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right py-2">Tax:</td>
-                    <td class="text-right pr-6 py-2">{{ $document->tax }}</td>
-                </tr>
-            @endif
-            <tr>
-                <td class="pl-6 py-2" colspan="2"></td>
-                <td class="text-right font-semibold border-t py-2">Total:</td>
-                <td class="text-right border-t pr-6 py-2">{{ $document->total }}</td>
-            </tr>
-            @if($document->amountDue)
-                <tr>
-                    <td class="pl-6 py-2" colspan="2"></td>
-                    <td class="text-right font-semibold border-t-4 border-double py-2">{{ $document->label->amountDue }}
-                        ({{ $document->currencyCode }}):
-                    </td>
-                    <td class="text-right border-t-4 border-double pr-6 py-2">{{ $document->amountDue }}</td>
-                </tr>
-            @endif
-            </tfoot>
-        </table>
-    </x-company.document-template.line-items>
-
-    <!-- Footer Notes -->
-    <x-company.document-template.footer class="modern-template-footer">
-        <h4 class="font-semibold px-6 text-sm" style="color: {{ $document->accentColor }}">
-            Terms & Conditions
-        </h4>
-        <span class="border-t-2 my-2 border-gray-300 block w-full"></span>
-        <div class="flex justify-between space-x-4 px-6 text-sm">
-            <p class="w-1/2 break-words line-clamp-4">{{ $document->terms }}</p>
-            <p class="w-1/2 break-words line-clamp-4">{{ $document->footer }}</p>
-        </div>
-    </x-company.document-template.footer>
-</x-company.document-template.container>