Merge pull request #161 from andrewdwallo/development-3.x

Development 3.x

app/DTO/DocumentDTO.php

 
 namespace App\DTO;
 
+use App\Enums\Accounting\DocumentType;
 use App\Enums\Setting\Font;
 use App\Models\Accounting\Document;
 use App\Models\Setting\DocumentDefault;
         public ?string $discount,
         public ?string $tax,
         public string $total,
-        public string $amountDue,
+        public ?string $amountDue,
         public CompanyDTO $company,
         public ClientDTO $client,
         public iterable $lineItems,
 
         $currencyCode = $document->currency_code ?? CurrencyAccessor::getDefaultCurrency();
 
-        $discount = $document->discount_total > 0 ? self::formatToMoney($document->discount_total, $currencyCode) : null;
-        $tax = $document->tax_total > 0 ? self::formatToMoney($document->tax_total, $currencyCode) : null;
+        $discount = $document->discount_total > 0
+            ? self::formatToMoney($document->discount_total, $currencyCode)
+            : null;
 
-        if (! $discount && ! $tax) {
-            $subtotal = null;
-        } else {
-            $subtotal = self::formatToMoney($document->subtotal, $currencyCode);
-        }
+        $tax = $document->tax_total > 0
+            ? self::formatToMoney($document->tax_total, $currencyCode)
+            : null;
+
+        $subtotal = ($discount || $tax)
+            ? self::formatToMoney($document->subtotal, $currencyCode)
+            : null;
+
+        $amountDue = $document::documentType() !== DocumentType::Estimate ?
+            self::formatToMoney($document->amountDue(), $currencyCode) :
+            null;
 
         return new self(
             header: $document->header,
             discount: $discount,
             tax: $tax,
             total: self::formatToMoney($document->total, $currencyCode),
-            amountDue: self::formatToMoney($document->amountDue(), $currencyCode),
+            amountDue: $amountDue,
             company: CompanyDTO::fromModel($document->company),
             client: ClientDTO::fromModel($document->client),
             lineItems: $document->lineItems->map(fn ($item) => LineItemDTO::fromModel($item)),

app/DTO/DocumentLabelDTO.php

         public string $referenceNumber,
         public string $date,
         public string $dueDate,
-        public string $amountDue,
+        public ?string $amountDue,
     ) {}
 
     public function toArray(): array

app/DTO/DocumentPreviewDTO.php

 
 namespace App\DTO;
 
+use App\Enums\Accounting\DocumentType;
 use App\Enums\Setting\Font;
 use App\Enums\Setting\PaymentTerms;
 use App\Models\Setting\DocumentDefault;
 
         $paymentTerms = PaymentTerms::parse($data['payment_terms']) ?? $settings->payment_terms;
 
+        $amountDue = $settings->type !== DocumentType::Estimate ?
+            self::formatToMoney('950', null) :
+            null;
+
         return new self(
             header: $data['header'] ?? $settings->header ?? 'Invoice',
             subheader: $data['subheader'] ?? $settings->subheader,
             discount: self::formatToMoney('100', null),
             tax: self::formatToMoney('50', null),
             total: self::formatToMoney('950', null),
-            amountDue: self::formatToMoney('950', null),
+            amountDue: $amountDue,
             company: CompanyDTO::fromModel($company),
             client: ClientPreviewDTO::fake(),
             lineItems: LineItemPreviewDTO::fakeItems(),

app/Enums/Accounting/DocumentType.php

                 referenceNumber: 'Reference Number',
                 date: 'Estimate Date',
                 dueDate: 'Expiration Date',
-                amountDue: 'Grand Total',
+                amountDue: null,
             ),
             self::Bill => new DocumentLabelDTO(
                 title: self::Bill->getLabel(),

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(2),
+                DocumentPreview::make()
+                    ->template(static fn (Get $get) => Template::parse($get('template')))
+                    ->preview()
+                    ->columnSpan([
+                        'lg' => 2,
+                    ]),
             ])->columns(3);
     }
 

app/Filament/Company/Pages/Accounting/Transactions.php

 use App\Enums\Accounting\TransactionType;
 use App\Facades\Accounting;
 use App\Filament\Company\Pages\Service\ConnectedAccount;
+use App\Filament\Forms\Components\CustomTableRepeater;
 use App\Filament\Forms\Components\DateRangeSelect;
-use App\Filament\Forms\Components\JournalEntryRepeater;
 use App\Filament\Tables\Actions\ReplicateBulkAction;
 use App\Models\Accounting\Account;
 use App\Models\Accounting\JournalEntry;
                             ->label('Edit journal transaction')
                             ->modalHeading('Journal Entry')
                             ->modalWidth(MaxWidth::Screen)
+                            ->extraModalWindowAttributes([
+                                'class' => 'journal-transaction-modal',
+                            ])
                             ->form(fn (Form $form) => $this->journalTransactionForm($form))
                             ->afterFormFilled(function (Transaction $transaction) {
                                 $debitAmounts = $transaction->journalEntries->sumDebits()->getAmount();
             ]);
     }
 
-    protected function getJournalEntriesTableRepeater(): JournalEntryRepeater
+    protected function getJournalEntriesTableRepeater(): CustomTableRepeater
     {
-        return JournalEntryRepeater::make('journalEntries')
+        return CustomTableRepeater::make('journalEntries')
             ->relationship('journalEntries')
             ->hiddenLabel()
             ->columns(4)
             ->headers($this->getJournalEntriesTableRepeaterHeaders())
             ->schema($this->getJournalEntriesTableRepeaterSchema())
-            ->streamlined()
-            ->deletable(fn (JournalEntryRepeater $repeater) => $repeater->getItemsCount() > 2)
+            ->deletable(fn (CustomTableRepeater $repeater) => $repeater->getItemsCount() > 2)
             ->deleteAction(function (Forms\Components\Actions\Action $action) {
                 return $action
-                    ->action(function (array $arguments, JournalEntryRepeater $component): void {
+                    ->action(function (array $arguments, CustomTableRepeater $component): void {
                         $items = $component->getState();
 
                         $amount = $items[$arguments['item']]['amount'];
                         $component->callAfterStateUpdated();
                     });
             })
+            ->rules([
+                function () {
+                    return function (string $attribute, $value, \Closure $fail) {
+                        if (empty($value) || ! is_array($value)) {
+                            $fail('Journal entries are required.');
+
+                            return;
+                        }
+
+                        $hasDebit = false;
+                        $hasCredit = false;
+
+                        foreach ($value as $entry) {
+                            if (! isset($entry['type'])) {
+                                continue;
+                            }
+
+                            if (JournalEntryType::parse($entry['type'])->isDebit()) {
+                                $hasDebit = true;
+                            } elseif (JournalEntryType::parse($entry['type'])->isCredit()) {
+                                $hasCredit = true;
+                            }
+
+                            if ($hasDebit && $hasCredit) {
+                                break;
+                            }
+                        }
+
+                        if (! $hasDebit) {
+                            $fail('At least one debit entry is required.');
+                        }
+
+                        if (! $hasCredit) {
+                            $fail('At least one credit entry is required.');
+                        }
+                    };
+                },
+            ])
             ->minItems(2)
             ->defaultItems(2)
             ->addable(false)
             ->color($type->isDebit() ? 'primary' : 'gray')
             ->iconSize(IconSize::Small)
             ->iconPosition(IconPosition::Before)
-            ->action(function (JournalEntryRepeater $component) use ($type) {
+            ->action(function (CustomTableRepeater $component) use ($type) {
                 $state = $component->getState();
                 $newUuid = (string) Str::uuid();
                 $state[$newUuid] = $this->defaultEntry($type);

app/Filament/Company/Resources/Sales/EstimateResource/Pages/ViewEstimate.php

 use Filament\Support\Enums\FontWeight;
 use Filament\Support\Enums\IconPosition;
 use Filament\Support\Enums\IconSize;
-use Filament\Support\Enums\MaxWidth;
 use Illuminate\Support\HtmlString;
 
 class ViewEstimate extends ViewRecord
         'refresh' => '$refresh',
     ];
 
-    public function getMaxContentWidth(): MaxWidth | string | null
-    {
-        return MaxWidth::SixExtraLarge;
-    }
-
     protected function getHeaderActions(): array
     {
         return [

app/Filament/Company/Resources/Sales/InvoiceResource/Pages/ViewInvoice.php

         'refresh' => '$refresh',
     ];
 
-    public function getMaxContentWidth(): MaxWidth | string | null
-    {
-        return MaxWidth::SixExtraLarge;
-    }
-
     protected function getHeaderActions(): array
     {
         return [

app/Filament/Company/Resources/Sales/RecurringInvoiceResource/Pages/ViewRecurringInvoice.php

 use Filament\Support\Enums\FontWeight;
 use Filament\Support\Enums\IconPosition;
 use Filament\Support\Enums\IconSize;
-use Filament\Support\Enums\MaxWidth;
 use Illuminate\Support\HtmlString;
 use Illuminate\Support\Str;
 
 {
     protected static string $resource = RecurringInvoiceResource::class;
 
-    public function getMaxContentWidth(): MaxWidth | string | null
-    {
-        return MaxWidth::SixExtraLarge;
-    }
-
     protected function getHeaderActions(): array
     {
         return [

app/Filament/Forms/Components/CustomTableRepeater.php

 use Awcodes\TableRepeater\Components\TableRepeater;
 use Closure;
 use Filament\Forms\Components\Actions\Action;
+use Filament\Support\Enums\MaxWidth;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Contracts\View\View;
 
 class CustomTableRepeater extends TableRepeater
 {
 
     protected bool | Closure $reorderAtStart = false;
 
+    protected View | Htmlable | Closure | null $footerItem = null;
+
     /**
      * @var array<string> | Closure | null
      */
         return $this->evaluate($this->reorderAtStart) && $this->isReorderable();
     }
 
+    public function footerItem(View | Htmlable | Closure | null $footer = null): static
+    {
+        $this->footerItem = $footer;
+
+        return $this;
+    }
+
+    public function getFooterItem(): View | Htmlable | null
+    {
+        return $this->evaluate($this->footerItem);
+    }
+
+    public function hasFooterItem(): bool
+    {
+        return $this->footerItem !== null;
+    }
+
     /**
      * @param  array<string> | Closure | null  $attributes
      */
 
         $this->minItems(1);
 
+        $this->stackAt(MaxWidth::Large);
+
         $this->extraAttributes(function (): array {
             $attributes = [];
 

app/Filament/Forms/Components/DocumentHeaderSection.php

 
 namespace App\Filament\Forms\Components;
 
-use App\DTO\CompanyDTO;
 use Closure;
 use Filament\Forms\Components\FileUpload;
 use Filament\Forms\Components\Group;
 use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Split;
 use Filament\Forms\Components\TextInput;
-use Filament\Forms\Components\View;
 use Filament\Support\Enums\MaxWidth;
 use Illuminate\Support\Facades\Auth;
 use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
         $this->collapsible();
         $this->collapsed();
 
-        $company = Auth::user()->currentCompany;
-
         $this->schema([
             Split::make([
                 Group::make([
                         ->default(fn () => $this->getDefaultHeader()),
                     TextInput::make('subheader')
                         ->default(fn () => $this->getDefaultSubheader()),
-                    View::make('filament.forms.components.company-info')
-                        ->viewData([
-                            'companyDTO' => CompanyDTO::fromModel($company),
-                        ]),
                 ])->grow(true),
             ])->from('md'),
         ]);

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) {

app/View/Models/DocumentTotalViewModel.php

 
         $grandTotalInCents = $subtotalInCents + ($taxTotalInCents - $discountTotalInCents);
 
+        $amountDueInCents = $this->calculateAmountDueInCents($grandTotalInCents, $currencyCode);
+
         $conversionMessage = $this->buildConversionMessage($grandTotalInCents, $currencyCode, $defaultCurrencyCode);
 
+        $discountMethod = DocumentDiscountMethod::parse($this->data['discount_method']);
+        $isPerDocumentDiscount = $discountMethod->isPerDocument();
+
+        $taxTotal = $taxTotalInCents > 0
+            ? CurrencyConverter::formatCentsToMoney($taxTotalInCents, $currencyCode)
+            : null;
+
+        $discountTotal = ($isPerDocumentDiscount || $discountTotalInCents > 0)
+            ? CurrencyConverter::formatCentsToMoney($discountTotalInCents, $currencyCode)
+            : null;
+
+        $subtotal = ($taxTotal || $discountTotal)
+            ? CurrencyConverter::formatCentsToMoney($subtotalInCents, $currencyCode)
+            : null;
+
+        $grandTotal = CurrencyConverter::formatCentsToMoney($grandTotalInCents, $currencyCode);
+
+        $amountDue = $this->documentType !== DocumentType::Estimate
+            ? CurrencyConverter::formatCentsToMoney($amountDueInCents, $currencyCode)
+            : null;
+
         return [
-            'subtotal' => CurrencyConverter::formatCentsToMoney($subtotalInCents, $currencyCode),
-            'taxTotal' => CurrencyConverter::formatCentsToMoney($taxTotalInCents, $currencyCode),
-            'discountTotal' => CurrencyConverter::formatCentsToMoney($discountTotalInCents, $currencyCode),
-            'grandTotal' => CurrencyConverter::formatCentsToMoney($grandTotalInCents, $currencyCode),
+            'subtotal' => $subtotal,
+            'taxTotal' => $taxTotal,
+            'discountTotal' => $discountTotal,
+            'grandTotal' => $grandTotal,
+            'amountDue' => $amountDue,
+            'currencyCode' => $currencyCode,
             'conversionMessage' => $conversionMessage,
+            'isPerDocumentDiscount' => $isPerDocumentDiscount,
         ];
     }
 
             $defaultCurrencyCode
         );
     }
+
+    private function calculateAmountDueInCents(int $grandTotalInCents, string $currencyCode): int
+    {
+        $amountPaid = $this->data['amount_paid'] ?? '0.00';
+        $amountPaidInCents = CurrencyConverter::convertToCents($amountPaid, $currencyCode);
+
+        return $grandTotalInCents - $amountPaidInCents;
+    }
 }

resources/css/filament/company/theme.css

         box-shadow: none !important;
     }
 }
+
+.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/css/filament/company/tooltip.css

-.es-toolip .tippy-arrow {
+.es-tooltip .tippy-arrow {
     border-color: inherit;
 }
 
-.es-tooltip .tippy-box[data-placement^='right'] > .tippy-arrow::before {
+.es-tooltip .tippy-box > .tippy-arrow::before {
     transform: scale(1.75);
 }
 
-.es-tooltip .tippy-box[data-placement^='right'] > .tippy-arrow::after {
+.es-tooltip .tippy-box > .tippy-arrow::after {
     content: "";
     z-index: -1;
     position: absolute;
     border-color: transparent;
     border-style: solid;
+    border-width: 8px;
+    transform: scale(1.75);
+}
+
+.es-tooltip .tippy-box[data-placement^='right'] > .tippy-arrow::after {
+    left: -11px;
     top: 0;
     border-width: 8px 8px 8px 0;
     border-right-color: inherit;
-    left: -11px;
-    transform: scale(1.75);
 }
 
+.es-tooltip .tippy-box[data-placement^='left'] > .tippy-arrow::after {
+    right: -11px;
+    top: 0;
+    border-width: 8px 0 8px 8px;
+    border-right-color: transparent;
+    border-left-color: inherit;
+}
+
+.es-tooltip .tippy-box[data-placement^='top'] > .tippy-arrow::after {
+    bottom: -11px;
+    left: 0;
+    border-width: 8px 8px 0;
+    border-right-color: transparent;
+    border-top-color: inherit;
+}
+
+.es-tooltip .tippy-box[data-placement^='bottom'] > .tippy-arrow::after {
+    top: -11px;
+    left: 0;
+    border-width: 0 8px 8px;
+    border-right-color: transparent;
+    border-bottom-color: inherit;
+}
 
-.es-tooltip .tippy-box[data-theme~='light'][data-placement^='right'] {
+.es-tooltip .tippy-box {
     border-radius: 8px;
+}
+
+.es-tooltip .tippy-box[data-theme~='light'] {
     border: 1px solid #d4dde3;
-    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
-.es-tooltip .tippy-box[data-theme~='dark'][data-placement^='right'] {
-    border-radius: 8px;
+.es-tooltip .tippy-box[data-theme~='dark'] {
     border: 1px solid #555555;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .7);
 }
 
 .es-close-tooltip {

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

     'preview' => false,
 ])
 
-<div class="doc-template-container flex justify-center p-6">
-    <div
-        @class([
-            'doc-template-paper bg-[#ffffff] dark:bg-gray-800 rounded-sm shadow-xl',
-            'w-full max-w-[820px] min-h-[1066px] max-h-[1200px] overflow-y-auto' => $preview === false,
-            'w-[38.25rem] h-[49.5rem] overflow-hidden' => $preview === true,
-        ])
-        @style([
-            'scrollbar-width: thin;' => $preview === false,
-        ])
-    >
-        {{ $slot }}
+<div
+    @class([
+        'doc-template-container flex justify-center',
+    ])
+>
+    <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] overflow-y-auto',
+                'w-[51.25rem] h-[64rem]' => ! $preview,
+                'w-[48rem] min-h-[61.75rem] preview' => $preview,
+            ])
+        >
+            {{ $slot }}
+        </div>
     </div>
 </div>

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

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

resources/views/components/company/tables/reports/account-transactions.blade.php

     $iconPosition = \Filament\Support\Enums\IconPosition::After;
 @endphp
 
-<table class="w-full table-auto divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full table-auto min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <x-company.tables.header :headers="$report->getHeaders()" :alignmentClass="[$report, 'getAlignmentClass']"/>
     @foreach($report->getCategories() as $categoryIndex => $category)
         <tbody class="divide-y divide-gray-200 dark:divide-white/5">

resources/views/components/company/tables/reports/balance-sheet-summary.blade.php

-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">

resources/views/components/company/tables/reports/balance-sheet.blade.php

-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">

resources/views/components/company/tables/reports/cash-flow-statement-summary.blade.php

-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">
     @endforeach
 </table>
 
-<table class="w-full table-fixed divide-y border-t divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y border-t divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">

resources/views/components/company/tables/reports/cash-flow-statement.blade.php

-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">
     <x-company.tables.footer :totals="$report->getOverallTotals()" :alignment-class="[$report, 'getAlignmentClass']"/>
 </table>
 
-<table class="w-full table-fixed divide-y border-t divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y border-t divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">

resources/views/components/company/tables/reports/income-statement-summary.blade.php

-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">

resources/views/components/company/tables/reports/income-statement.blade.php

-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">

resources/views/components/tooltip.blade.php

             theme: $store.theme,
             placement: '{{ $placement }}',
             maxWidth: {{ $maxWidth }},
+            popperOptions: {
+                strategy: 'fixed',
+                modifiers: [
+                    {
+                        name: 'flip',
+                        enabled: true,
+                        options: {
+                            fallbackPlacements: ['left', 'top', 'bottom'],
+                        }
+                    },
+                    {
+                        name: 'preventOverflow',
+                        enabled: true,
+                        options: {
+                            boundary: 'viewport',
+                            padding: 8
+                        }
+                    }
+                ]
+            }
         }">
         <x-filament::icon-button
             :icon="$icon"

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="default-template-header">
+    <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
         </div>
     </x-company.document-template.header>
 
-    <x-company.document-template.metadata class="classic-template-metadata space-y-2">
+    <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-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 dark:text-gray-400">{{ $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">
-                <h3 class="text-gray-600 dark:text-gray-400 font-medium mb-1">BILL TO</h3>
-                <p class="text-xs font-bold">{{ $document->client->name }}</p>
+            <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-xs">
+            <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>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
-                        <td class="text-left pl-2">{{ $document->referenceNumber }}</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>
     <!-- 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-8">
+            <thead class="text-sm leading-relaxed">
             <tr>
-                <th class="text-left">{{ $document->columnLabel->items }}</th>
-                <th class="text-center">{{ $document->columnLabel->units }}</th>
-                <th class="text-right">{{ $document->columnLabel->price }}</th>
-                <th class="text-right">{{ $document->columnLabel->amount }}</th>
+                <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-xs border-t-2 border-b-2 border-dotted border-gray-300 leading-8">
+            <tbody class="text-sm border-y-2 border-dotted border-gray-300">
             @foreach($document->lineItems as $item)
                 <tr>
-                    <td class="text-left font-semibold">{{ $item->name }}</td>
-                    <td class="text-center">{{ $item->quantity }}</td>
-                    <td class="text-right">{{ $item->unitPrice }}</td>
-                    <td class="text-right">{{ $item->subtotal }}</td>
+                    <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-xs space-x-1 pt-2">
+        <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">
-                    <tr>
-                        <td class="text-right font-semibold py-2">Subtotal:</td>
-                        <td class="text-right py-2">{{ $document->subtotal }}</td>
-                    </tr>
+                    <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 dark:text-success-600">
+                        <tr class="text-success-800">
                             <td class="text-right py-2">Discount:</td>
                             <td class="text-right py-2">
                                 ({{ $document->discount }})
                         </tr>
                     @endif
                     <tr>
-                        <td class="text-right font-semibold border-t py-2">Total:</td>
+                        <td class="text-right font-semibold border-t py-2">{{ $document->amountDue ? 'Total' : 'Grand Total' }}:</td>
                         <td class="text-right border-t py-2">{{ $document->total }}</td>
                     </tr>
                     @if($document->amountDue)
     </x-company.document-template.line-items>
 
     <!-- Footer -->
-    <x-company.document-template.footer class="classic-template-footer text-xs">
-        <h4 class="font-semibold px-6 mb-2">Terms & Conditions</h4>
-        <p class="px-6 break-words line-clamp-4">{{ $document->terms }}</p>
+    <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>
 </x-company.document-template.container>

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 dark:text-gray-400">{{ $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
         </div>
     </x-company.document-template.header>
 
-    <x-company.document-template.metadata class="default-template-metadata space-y-2">
+    <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">
-                <h3 class="text-gray-600 dark:text-gray-400 font-medium mb-1">BILL TO</h3>
-                <p class="text-xs font-bold">{{ $document->client->name }}</p>
+            <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-xs">
+            <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>
-                    <tr>
-                        <td class="font-semibold text-right pr-2">{{ $document->label->referenceNumber }}:</td>
-                        <td class="text-left pl-2">{{ $document->referenceNumber }}</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>
     <!-- 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-8" style="background: {{ $document->accentColor }}">
+            <thead class="text-sm leading-relaxed" style="background: {{ $document->accentColor }}">
             <tr class="text-white">
-                <th class="text-left pl-6">{{ $document->columnLabel->items }}</th>
-                <th class="text-center">{{ $document->columnLabel->units }}</th>
-                <th class="text-right">{{ $document->columnLabel->price }}</th>
-                <th class="text-right pr-6">{{ $document->columnLabel->amount }}</th>
+                <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-xs border-b-2 border-gray-300 leading-8">
+            <tbody class="text-sm border-b-2 border-gray-300">
             @foreach($document->lineItems as $item)
                 <tr>
-                    <td class="text-left pl-6 font-semibold">{{ $item->name }}</td>
-                    <td class="text-center">{{ $item->quantity }}</td>
-                    <td class="text-right">{{ $item->unitPrice }}</td>
-                    <td class="text-right pr-6">{{ $item->subtotal }}</td>
+                    <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-xs leading-loose">
-            <tr>
-                <td class="pl-6" colspan="2"></td>
-                <td class="text-right font-semibold">Subtotal:</td>
-                <td class="text-right pr-6">{{ $document->subtotal }}</td>
-            </tr>
-            <tr class="text-success-800 dark:text-success-600">
-                <td class="pl-6" colspan="2"></td>
-                <td class="text-right">Discount (5%):</td>
-                <td class="text-right pr-6">({{ $document->discount }})</td>
-            </tr>
-            <tr>
-                <td class="pl-6" colspan="2"></td>
-                <td class="text-right">Tax:</td>
-                <td class="text-right pr-6">{{ $document->tax }}</td>
-            </tr>
-            <tr>
-                <td class="pl-6" colspan="2"></td>
-                <td class="text-right font-semibold border-t">Total:</td>
-                <td class="text-right border-t pr-6">{{ $document->total }}</td>
-            </tr>
+            <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" colspan="2"></td>
-                <td class="text-right font-semibold border-t-4 border-double">{{ $document->label->amountDue }}
-                    ({{ $document->currencyCode }}):
-                </td>
-                <td class="text-right border-t-4 border-double pr-6">{{ $document->amountDue }}</td>
+                <td class="pl-6 py-2" colspan="2"></td>
+                <td class="text-right font-semibold border-t py-2">{{ $document->amountDue ? 'Total' : 'Grand 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="default-template-footer min-h-48 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-20">
+    <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-6" :src="$document->logo"/>
+                <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-2 h-28 flex flex-col justify-end rounded-bl-sm"
+        <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-3xl font-bold text-white text-center uppercase">{{ $document->header }}</h1>
+                <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-6">
-        <div class="text-xs">
-            <h2 class="text-xs font-semibold">{{ $document->company->name }}</h2>
+    <x-company.document-template.metadata class="modern-template-metadata space-y-8">
+        <div class="text-sm">
+            <strong class="text-sm block">{{ $document->company->name }}</strong>
             @if($formattedAddress = $document->company->getFormattedAddressHtml())
                 {!! $formattedAddress !!}
             @endif
 
         <div class="flex justify-between items-end">
             <!-- Billing Details -->
-            <div class="text-xs">
-                <h3 class="text-gray-600 dark:text-gray-400 font-medium mb-1">BILL TO</h3>
-                <p class="text-xs font-bold"
+            <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())
                 @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="modern-template-line-items">
         <table class="w-full text-left table-fixed">
-            <thead class="text-xs leading-8">
-            <tr class="text-gray-600 dark:text-gray-400">
-                <th class="text-left pl-6 w-[50%]">{{ $document->columnLabel->items }}</th>
-                <th class="text-center w-[10%]">{{ $document->columnLabel->units }}</th>
-                <th class="text-right w-[20%]">{{ $document->columnLabel->price }}</th>
-                <th class="text-right pr-6 w-[20%]">{{ $document->columnLabel->amount }}</th>
+            <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-xs border-y-2">
+            <tbody class="text-sm border-y-2">
             @foreach($document->lineItems as $index => $item)
-                <tr @class(['bg-gray-100 dark:bg-gray-800' => $index % 2 === 0])>
-                    <td class="text-left pl-6 font-semibold py-2">
+                <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">{{ $item->description }}</div>
+                            <div class="text-gray-600 font-normal line-clamp-2 mt-1">{{ $item->description }}</div>
                         @endif
                     </td>
-                    <td class="text-center">{{ $item->quantity }}</td>
-                    <td class="text-right">{{ $item->unitPrice }}</td>
-                    <td class="text-right pr-6">{{ $item->subtotal }}</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-xs">
-            <tr>
-                <td class="pl-6 py-1" colspan="2"></td>
-                <td class="text-right font-semibold py-1">Subtotal:</td>
-                <td class="text-right pr-6 py-1">{{ $document->subtotal }}</td>
-            </tr>
+            <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 dark:text-success-600">
-                    <td class="pl-6 py-1" colspan="2"></td>
-                    <td class="text-right py-1">Discount:</td>
-                    <td class="text-right pr-6 py-1">
+                <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-1" colspan="2"></td>
-                    <td class="text-right py-1">Tax:</td>
-                    <td class="text-right pr-6 py-1">{{ $document->tax }}</td>
+                    <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-1" colspan="2"></td>
-                <td class="text-right font-semibold border-t py-1">Total:</td>
-                <td class="text-right border-t pr-6 py-1">{{ $document->total }}</td>
+                <td class="pl-6 py-2" colspan="2"></td>
+                <td class="text-right font-semibold border-t py-2">{{ $document->amountDue ? 'Total' : 'Grand 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-1" colspan="2"></td>
-                    <td class="text-right font-semibold border-t-4 border-double py-1">{{ $document->label->amountDue }}
+                    <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-1">{{ $document->amountDue }}</td>
+                    <td class="text-right border-t-4 border-double pr-6 py-2">{{ $document->amountDue }}</td>
                 </tr>
             @endif
             </tfoot>
     </x-company.document-template.line-items>
 
     <!-- Footer Notes -->
-    <x-company.document-template.footer class="modern-template-footer text-xs">
-        <h4 class="font-semibold px-6" style="color: {{ $document->accentColor }}">Terms & Conditions</h4>
+    <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">
+        <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>

resources/views/filament/company/pages/accounting/chart.blade.php

                     <div class="es-table__header-ctn"></div>
                     <div class="es-table__content overflow-x-auto">
                         <table
-                            class="es-table table-fixed w-full divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
+                            class="es-table w-full min-w-[70rem] divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                             <colgroup>
                                 <col span="1" style="width: 12.5%;">
                                 <col span="1" style="width: 20%;">

resources/views/filament/forms/components/custom-table-repeater.blade.php

             </div>
         @endif
 
-        @if ($addAction->isVisible() || filled($visibleExtraActions))
-            <ul
-                @class([
-                    'relative flex gap-4',
-                    match ($getAddActionAlignment()) {
-                        Alignment::Start, Alignment::Left => 'justify-start',
-                        Alignment::End, Alignment::Right => 'justify-end',
-                        default =>  'justify-center',
-                    },
-                ])
-            >
-                @if ($addAction->isVisible())
-                    <li>
-                        {{ $addAction }}
-                    </li>
+        @if ($addAction->isVisible() || filled($visibleExtraActions) || $hasFooterItem())
+            <div class="flex justify-between items-start">
+                <!-- Actions grouped to the left -->
+                @if ($addAction->isVisible() || filled($visibleExtraActions))
+                    <ul class="flex gap-4">
+                        @if ($addAction->isVisible())
+                            <li>
+                                {{ $addAction }}
+                            </li>
+                        @endif
+                        @if (filled($visibleExtraActions))
+                            @foreach ($visibleExtraActions as $extraAction)
+                                <li>
+                                    {{ $extraAction }}
+                                </li>
+                            @endforeach
+                        @endif
+                    </ul>
                 @endif
-                @if (filled($visibleExtraActions))
-                    @foreach ($visibleExtraActions as $extraAction)
-                        <li>
-                            {{ ($extraAction) }}
-                        </li>
-                    @endforeach
+
+                <!-- Container for Footer Item to the right -->
+                @if($hasFooterItem())
+                    <div>
+                        {{ $getFooterItem() }}
+                    </div>
                 @endif
-            </ul>
+            </div>
         @endif
     </div>
 </x-dynamic-component>

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/forms/components/document-totals.blade.php

     $type = $getType();
     $viewModel = new DocumentTotalViewModel($data, $type);
     extract($viewModel->buildViewData(), EXTR_SKIP);
-
-    $discountMethod = DocumentDiscountMethod::parse($data['discount_method']);
-    $isPerDocumentDiscount = $discountMethod->isPerDocument();
 @endphp
 
-<div class="totals-summary w-full sm:pr-14">
-    <table class="w-full text-right table-fixed hidden sm:table">
+<div class="totals-summary w-full lg:pl-[4rem] lg:pr-[6rem] py-8 lg:py-0">
+    <table class="w-full text-right table-fixed hidden lg:table">
         <colgroup>
-            <col class="w-[20%]"> {{-- Items --}}
-            <col class="w-[30%]"> {{-- Description --}}
+            <col class="w-[30%]"> {{-- Items --}}
             <col class="w-[10%]"> {{-- Quantity --}}
             <col class="w-[10%]"> {{-- Price --}}
-            <col class="w-[20%]"> {{-- Taxes --}}
+            <col class="w-[15%]">
+            <col class="w-[15%]"> {{-- Adjustments --}}
             <col class="w-[10%]"> {{-- Amount --}}
         </colgroup>
         <tbody>
+        @if($subtotal)
             <tr>
                 <td colspan="4"></td>
-                <td class="text-sm px-4 py-2 font-medium leading-6 text-gray-950 dark:text-white">Subtotal:</td>
-                <td class="text-sm pl-4 py-2 leading-6">{{ $subtotal }}</td>
+                <td class="text-sm p-2 font-semibold text-gray-950 dark:text-white">Subtotal:</td>
+                <td class="text-sm p-2">{{ $subtotal }}</td>
             </tr>
+        @endif
+        @if($taxTotal)
             <tr>
                 <td colspan="4"></td>
-                <td class="text-sm px-4 py-2 font-medium leading-6 text-gray-950 dark:text-white">Taxes:</td>
-                <td class="text-sm pl-4 py-2 leading-6">{{ $taxTotal }}</td>
+                <td class="text-sm p-2">Tax:</td>
+                <td class="text-sm p-2">{{ $taxTotal }}</td>
             </tr>
-            @if($isPerDocumentDiscount)
-                <tr>
-                    <td colspan="3" class="text-sm px-4 py-2 font-medium leading-6 text-gray-950 dark:text-white text-right">Discount:</td>
-                    <td colspan="2" class="text-sm px-4 py-2">
-                        <div class="flex justify-between space-x-2">
-                            @foreach($getChildComponentContainer()->getComponents() as $component)
-                                <div class="flex-1 text-left">{{ $component }}</div>
-                            @endforeach
-                        </div>
-                    </td>
-                    <td class="text-sm pl-4 py-2 leading-6">({{ $discountTotal }})</td>
-                </tr>
-            @else
-                <tr>
-                    <td colspan="4"></td>
-                    <td class="text-sm px-4 py-2 font-medium leading-6 text-gray-950 dark:text-white">Discounts:</td>
-                    <td class="text-sm pl-4 py-2 leading-6">({{ $discountTotal }})</td>
-                </tr>
-            @endif
-            <tr class="font-semibold">
+        @endif
+        @if($isPerDocumentDiscount)
+            <tr>
+                <td colspan="3" class="text-sm p-2">Discount:</td>
+                <td colspan="2" class="text-sm p-2">
+                    <div class="flex justify-between space-x-2">
+                        @foreach($getChildComponentContainer()->getComponents() as $component)
+                            <div class="flex-1 text-left">{{ $component }}</div>
+                        @endforeach
+                    </div>
+                </td>
+                <td class="text-sm p-2">({{ $discountTotal }})</td>
+            </tr>
+        @elseif($discountTotal)
+            <tr>
                 <td colspan="4"></td>
-                <td class="text-sm px-4 py-2 font-medium leading-6 text-gray-950 dark:text-white">Total:</td>
-                <td class="text-sm pl-4 py-2 leading-6">{{ $grandTotal }}</td>
+                <td class="text-sm p-2">Discount:</td>
+                <td class="text-sm p-2">({{ $discountTotal }})</td>
             </tr>
-            @if($conversionMessage)
-                <tr>
-                    <td colspan="6" class="text-sm pl-4 py-2 leading-6 text-gray-600">
-                        {{ $conversionMessage }}
-                    </td>
-                </tr>
-            @endif
+        @endif
+        <tr>
+            <td colspan="4"></td>
+            <td class="text-sm p-2 font-semibold text-gray-950 dark:text-white">{{ $amountDue ? 'Total' : 'Grand Total' }}:</td>
+            <td class="text-sm p-2">{{ $grandTotal }}</td>
+        </tr>
+        @if($amountDue)
+            <tr>
+                <td colspan="4"></td>
+                <td class="text-sm p-2 font-semibold text-gray-950 dark:text-white border-t-4 border-double">Amount Due
+                    ({{ $currencyCode }}):
+                </td>
+                <td class="text-sm p-2 border-t-4 border-double">{{ $amountDue }}</td>
+            </tr>
+        @endif
+        @if($conversionMessage)
+            <tr>
+                <td colspan="6" class="text-sm p-2 text-gray-600">
+                    {{ $conversionMessage }}
+                </td>
+            </tr>
+        @endif
         </tbody>
     </table>
 
     <!-- Mobile View -->
-    <div class="block sm:hidden p-5">
+    <div class="block lg:hidden">
         <div class="flex flex-col space-y-6">
-            <div class="flex justify-between items-center">
-                <span class="text-sm font-medium text-gray-950 dark:text-white">Subtotal:</span>
-                <span class="text-sm text-gray-950 dark:text-white">{{ $subtotal }}</span>
-            </div>
-            <div class="flex justify-between items-center">
-                <span class="text-sm font-medium text-gray-950 dark:text-white">Taxes:</span>
-                <span class="text-sm text-gray-950 dark:text-white">{{ $taxTotal }}</span>
-            </div>
+            @if($subtotal)
+                <div class="flex justify-between items-center">
+                    <span class="text-sm font-semibold text-gray-950 dark:text-white">Subtotal:</span>
+                    <span class="text-sm">{{ $subtotal }}</span>
+                </div>
+            @endif
+            @if($taxTotal)
+                <div class="flex justify-between items-center">
+                    <span class="text-sm">Tax:</span>
+                    <span class="text-sm">{{ $taxTotal }}</span>
+                </div>
+            @endif
             @if($isPerDocumentDiscount)
                 <div class="flex flex-col space-y-2">
-                    <span class="text-sm font-medium text-gray-950 dark:text-white">Discount:</span>
+                    <span class="text-sm">Discount:</span>
                     <div class="flex justify-between space-x-2">
                         @foreach($getChildComponentContainer()->getComponents() as $component)
                             <div class="w-1/2">{{ $component }}</div>
                         @endforeach
                     </div>
                 </div>
-            @else
+            @elseif($discountTotal)
                 <div class="flex justify-between items-center">
-                    <span class="text-sm font-medium text-gray-950 dark:text-white">Discounts:</span>
-                    <span class="text-sm text-gray-950 dark:text-white">({{ $discountTotal }})</span>
+                    <span class="text-sm">Discount:</span>
+                    <span class="text-sm">({{ $discountTotal }})</span>
                 </div>
             @endif
-            <div class="flex justify-between items-center font-semibold">
-                <span class="text-sm font-medium text-gray-950 dark:text-white">Total:</span>
-                <span class="text-sm text-gray-950 dark:text-white">{{ $grandTotal }}</span>
+            <div class="flex justify-between items-center">
+                <span class="text-sm font-semibold text-gray-950 dark:text-white">{{ $amountDue ? 'Total' : 'Grand Total' }}:</span>
+                <span class="text-sm">{{ $grandTotal }}</span>
             </div>
+            @if($amountDue)
+                <div class="flex justify-between items-center">
+                    <span
+                        class="text-sm font-semibold text-gray-950 dark:text-white">Amount Due ({{ $currencyCode }}):</span>
+                    <span class="text-sm">{{ $amountDue }}</span>
+                </div>
+            @endif
             @if($conversionMessage)
                 <div class="text-sm text-gray-600">
                     {{ $conversionMessage }}

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 dark:text-gray-400">{{ $document->subheader }}</p>
-        @endif
-
-        <div class="flex justify-between items-end">
-            <!-- Billing Details -->
-            <div class="text-sm">
-                <h3 class="text-gray-600 dark:text-gray-400 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 dark:text-success-600">
-                            <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="default-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 dark:text-gray-400">{{ $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 dark:text-gray-400 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 dark:text-success-600">
-                    <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 dark:text-gray-400 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 dark:text-gray-400">
-                <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 dark:bg-gray-800' => $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 dark:text-success-600">
-                    <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>