Update invoice preview templates

app/Filament/Company/Pages/Setting/Invoice.php

 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\Component;
 use Filament\Forms\Components\FileUpload;
-use Filament\Forms\Components\Group;
+use Filament\Forms\Components\Grid;
 use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Textarea;
         return Section::make('Template')
             ->description('Choose the template and edit the column names.')
             ->schema([
-                Group::make()
+                Grid::make(1)
                     ->schema([
                         FileUpload::make('logo')
                             ->openable()
-                            ->maxSize(2048)
+                            ->maxSize(1024)
                             ->localizeLabel()
                             ->visibility('public')
                             ->disk('public')
                             ->directory('logos/document')
                             ->imageResizeMode('contain')
-                            ->imageCropAspectRatio('1:1')
-                            ->panelAspectRatio('1:1')
-                            ->panelLayout('compact')
+                            ->imageCropAspectRatio('3:2')
+                            ->panelAspectRatio('3:2')
+                            ->panelLayout('integrated')
                             ->removeUploadedFileButtonPosition('center bottom')
                             ->uploadButtonPosition('center bottom')
                             ->uploadProgressIndicatorPosition('center bottom')
                                 static fn (TemporaryUploadedFile $file): string => (string) str($file->getClientOriginalName())
                                     ->prepend(Auth::user()->currentCompany->id . '_'),
                             )
-                            ->extraAttributes(['class' => 'w-32 h-32'])
-                            ->acceptedFileTypes(['image/png', 'image/jpeg']),
+                            ->extraAttributes([
+                                'class' => 'aspect-[3/2] w-[9.375rem] max-w-full',
+                            ])
+                            ->acceptedFileTypes(['image/png', 'image/jpeg', 'image/gif']),
                         Checkbox::make('show_logo')
                             ->localizeLabel(),
                         ColorPicker::make('accent_color')
                             ->hiddenLabel()
                             ->disabled(static fn (callable $get) => $get('amount_name.option') !== 'other')
                             ->nullable(),
-                    ])->columns(1),
-                Group::make()
+                    ])->columnSpan(1),
+                Grid::make()
                     ->schema([
                         ViewField::make('preview.default')
+                            ->columnSpan(2)
                             ->hiddenLabel()
                             ->visible(static fn (callable $get) => $get('template') === 'default')
                             ->view('filament.company.components.invoice-layouts.default'),
                         ViewField::make('preview.modern')
+                            ->columnSpan(2)
                             ->hiddenLabel()
                             ->visible(static fn (callable $get) => $get('template') === 'modern')
                             ->view('filament.company.components.invoice-layouts.modern'),
                         ViewField::make('preview.classic')
+                            ->columnSpan(2)
                             ->hiddenLabel()
                             ->visible(static fn (callable $get) => $get('template') === 'classic')
                             ->view('filament.company.components.invoice-layouts.classic'),

app/Models/Setting/DocumentDefault.php

 use Database\Factories\Setting\DocumentDefaultFactory;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Casts\AsArrayObject;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\Factory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Support\Facades\Storage;
 use Wallo\FilamentCompanies\FilamentCompanies;
 
 class DocumentDefault extends Model
         'amount_name' => AsArrayObject::class,
     ];
 
+    protected $appends = [
+        'logo_url',
+    ];
+
+    protected function logoUrl(): Attribute
+    {
+        return Attribute::get(static function (mixed $value, array $attributes): ?string {
+            return $attributes['logo'] ? Storage::disk('public')->url($attributes['logo']) : null;
+        });
+    }
+
     public function company(): BelongsTo
     {
         return $this->belongsTo(FilamentCompanies::companyModel(), 'company_id');

app/Models/Setting/Localization.php

 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use NumberFormatter;
 use ResourceBundle;
-use Symfony\Component\Intl\Languages;
 use Wallo\FilamentCompanies\FilamentCompanies;
 use Wallo\Transmatic\Facades\Transmatic;
 

app/Observers/CurrencyObserver.php

 use App\Events\CurrencyRateChanged;
 use App\Events\DefaultCurrencyChanged;
 use App\Models\Setting\Currency;
-use Illuminate\Support\Facades\Log;
 
 class CurrencyObserver
 {
         }
 
         if ($currency->wasChanged('rate')) {
-            Log::info('Currency rate changed');
             event(new CurrencyRateChanged($currency));
         }
     }

app/Services/CurrencyService.php

 
 class CurrencyService implements CurrencyHandler
 {
-    protected string|null $api_key;
+    protected ?string $api_key;
 
-    protected string|null $base_url;
+    protected ?string $base_url;
 
     protected Client $client;
 
-    public function __construct(string|null $api_key, string|null $base_url, Client $client)
+    public function __construct(?string $api_key, ?string $base_url, Client $client)
     {
         $this->api_key = $api_key;
         $this->base_url = $base_url;

app/View/Models/InvoiceViewModel.php

 
     public function logo(): ?string
     {
-        return $this->invoice->logo ?? null;
+        return $this->invoice->logo_url;
     }
 
     public function show_logo(): bool

composer.lock

         },
         {
             "name": "aws/aws-crt-php",
-            "version": "v1.2.3",
+            "version": "v1.2.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/awslabs/aws-crt-php.git",
-                "reference": "5545a4fa310aec39f54279fdacebcce33b3ff382"
+                "reference": "eb0c6e4e142224a10b08f49ebf87f32611d162b2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/awslabs/aws-crt-php/zipball/5545a4fa310aec39f54279fdacebcce33b3ff382",
-                "reference": "5545a4fa310aec39f54279fdacebcce33b3ff382",
+                "url": "https://api.github.com/repos/awslabs/aws-crt-php/zipball/eb0c6e4e142224a10b08f49ebf87f32611d162b2",
+                "reference": "eb0c6e4e142224a10b08f49ebf87f32611d162b2",
                 "shasum": ""
             },
             "require": {
             ],
             "support": {
                 "issues": "https://github.com/awslabs/aws-crt-php/issues",
-                "source": "https://github.com/awslabs/aws-crt-php/tree/v1.2.3"
+                "source": "https://github.com/awslabs/aws-crt-php/tree/v1.2.4"
             },
-            "time": "2023-10-16T20:10:06+00:00"
+            "time": "2023-11-08T00:42:13+00:00"
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.287.0",
+            "version": "3.288.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "06978bfc63111fccd78b364238bf214b4ade8d18"
+                "reference": "a1dfa12c7165de0b731ae8074c4ba1f3ae733f89"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/06978bfc63111fccd78b364238bf214b4ade8d18",
-                "reference": "06978bfc63111fccd78b364238bf214b4ade8d18",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/a1dfa12c7165de0b731ae8074c4ba1f3ae733f89",
+                "reference": "a1dfa12c7165de0b731ae8074c4ba1f3ae733f89",
                 "shasum": ""
             },
             "require": {
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.287.0"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.288.1"
             },
-            "time": "2023-11-17T20:03:36+00:00"
+            "time": "2023-11-22T19:35:38+00:00"
         },
         {
             "name": "aws/aws-sdk-php-laravel",
         },
         {
             "name": "doctrine/dbal",
-            "version": "3.7.1",
+            "version": "3.7.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/doctrine/dbal.git",
-                "reference": "5b7bd66c9ff58c04c5474ab85edce442f8081cb2"
+                "reference": "0ac3c270590e54910715e9a1a044cc368df282b2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/doctrine/dbal/zipball/5b7bd66c9ff58c04c5474ab85edce442f8081cb2",
-                "reference": "5b7bd66c9ff58c04c5474ab85edce442f8081cb2",
+                "url": "https://api.github.com/repos/doctrine/dbal/zipball/0ac3c270590e54910715e9a1a044cc368df282b2",
+                "reference": "0ac3c270590e54910715e9a1a044cc368df282b2",
                 "shasum": ""
             },
             "require": {
                 "doctrine/coding-standard": "12.0.0",
                 "fig/log-test": "^1",
                 "jetbrains/phpstorm-stubs": "2023.1",
-                "phpstan/phpstan": "1.10.35",
+                "phpstan/phpstan": "1.10.42",
                 "phpstan/phpstan-strict-rules": "^1.5",
                 "phpunit/phpunit": "9.6.13",
                 "psalm/plugin-phpunit": "0.18.4",
             ],
             "support": {
                 "issues": "https://github.com/doctrine/dbal/issues",
-                "source": "https://github.com/doctrine/dbal/tree/3.7.1"
+                "source": "https://github.com/doctrine/dbal/tree/3.7.2"
             },
             "funding": [
                 {
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-10-06T05:06:20+00:00"
+            "time": "2023-11-19T08:06:58+00:00"
         },
         {
             "name": "doctrine/deprecations",
         },
         {
             "name": "filament/actions",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/actions.git",
-                "reference": "7fc130d8eafcd231f4ff19ffda4aacca0423e22e"
+                "reference": "9d233cd7ab0353bdd293178d3ecd72adfedf9b58"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/actions/zipball/7fc130d8eafcd231f4ff19ffda4aacca0423e22e",
-                "reference": "7fc130d8eafcd231f4ff19ffda4aacca0423e22e",
+                "url": "https://api.github.com/repos/filamentphp/actions/zipball/9d233cd7ab0353bdd293178d3ecd72adfedf9b58",
+                "reference": "9d233cd7ab0353bdd293178d3ecd72adfedf9b58",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-14T12:07:19+00:00"
+            "time": "2023-11-21T10:53:03+00:00"
         },
         {
             "name": "filament/filament",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/panels.git",
-                "reference": "7a7c432db38ccb29fb3591609f896da265f54aeb"
+                "reference": "5a2f300db927972cd14c613496f412672a83eef6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/panels/zipball/7a7c432db38ccb29fb3591609f896da265f54aeb",
-                "reference": "7a7c432db38ccb29fb3591609f896da265f54aeb",
+                "url": "https://api.github.com/repos/filamentphp/panels/zipball/5a2f300db927972cd14c613496f412672a83eef6",
+                "reference": "5a2f300db927972cd14c613496f412672a83eef6",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-18T17:32:25+00:00"
+            "time": "2023-11-22T10:40:13+00:00"
         },
         {
             "name": "filament/forms",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/forms.git",
-                "reference": "ed55409ba339e921d21d1c99816767d3c6e3f391"
+                "reference": "927e53280d5d2cad493a0a9e486fd86b5252492a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/forms/zipball/ed55409ba339e921d21d1c99816767d3c6e3f391",
-                "reference": "ed55409ba339e921d21d1c99816767d3c6e3f391",
+                "url": "https://api.github.com/repos/filamentphp/forms/zipball/927e53280d5d2cad493a0a9e486fd86b5252492a",
+                "reference": "927e53280d5d2cad493a0a9e486fd86b5252492a",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-16T11:21:55+00:00"
+            "time": "2023-11-22T10:39:50+00:00"
         },
         {
             "name": "filament/infolists",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/infolists.git",
-                "reference": "c4585485e32e8eca21d11855cbc512e2703e3879"
+                "reference": "3a2d085af84d97c5861cd23f6c553f1600c2de4b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/infolists/zipball/c4585485e32e8eca21d11855cbc512e2703e3879",
-                "reference": "c4585485e32e8eca21d11855cbc512e2703e3879",
+                "url": "https://api.github.com/repos/filamentphp/infolists/zipball/3a2d085af84d97c5861cd23f6c553f1600c2de4b",
+                "reference": "3a2d085af84d97c5861cd23f6c553f1600c2de4b",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-16T11:21:58+00:00"
+            "time": "2023-11-22T10:39:48+00:00"
         },
         {
             "name": "filament/notifications",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/notifications.git",
-                "reference": "65ac499a30fe00e9e2b21cd873e7a10e28f9efb8"
+                "reference": "88324fa22de9d3b9cc94e3feebb786fe00a35b31"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/notifications/zipball/65ac499a30fe00e9e2b21cd873e7a10e28f9efb8",
-                "reference": "65ac499a30fe00e9e2b21cd873e7a10e28f9efb8",
+                "url": "https://api.github.com/repos/filamentphp/notifications/zipball/88324fa22de9d3b9cc94e3feebb786fe00a35b31",
+                "reference": "88324fa22de9d3b9cc94e3feebb786fe00a35b31",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-14T12:07:17+00:00"
+            "time": "2023-11-21T10:52:57+00:00"
         },
         {
             "name": "filament/spatie-laravel-tags-plugin",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/spatie-laravel-tags-plugin.git",
         },
         {
             "name": "filament/support",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/support.git",
-                "reference": "25e220044d467a335250a45d1e9a081f6bd9aad2"
+                "reference": "c84e267ab68bea6899a46330f69f88b4d449171a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/support/zipball/25e220044d467a335250a45d1e9a081f6bd9aad2",
-                "reference": "25e220044d467a335250a45d1e9a081f6bd9aad2",
+                "url": "https://api.github.com/repos/filamentphp/support/zipball/c84e267ab68bea6899a46330f69f88b4d449171a",
+                "reference": "c84e267ab68bea6899a46330f69f88b4d449171a",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-18T17:32:24+00:00"
+            "time": "2023-11-22T10:40:22+00:00"
         },
         {
             "name": "filament/tables",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/tables.git",
-                "reference": "94552ed5cf5089c69cc23eb7159704151760c837"
+                "reference": "e57a670396f564f7aa840fe3f81705777d94a2b5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/tables/zipball/94552ed5cf5089c69cc23eb7159704151760c837",
-                "reference": "94552ed5cf5089c69cc23eb7159704151760c837",
+                "url": "https://api.github.com/repos/filamentphp/tables/zipball/e57a670396f564f7aa840fe3f81705777d94a2b5",
+                "reference": "e57a670396f564f7aa840fe3f81705777d94a2b5",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-15T11:34:47+00:00"
+            "time": "2023-11-22T10:40:18+00:00"
         },
         {
             "name": "filament/widgets",
-            "version": "v3.0.98",
+            "version": "v3.0.101",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filamentphp/widgets.git",
-                "reference": "d441b9f583b3261ed5e09cd407913dd1f3a5a70d"
+                "reference": "a1612c8992598fdc5c800eaa80697a9b82f79d7e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filamentphp/widgets/zipball/d441b9f583b3261ed5e09cd407913dd1f3a5a70d",
-                "reference": "d441b9f583b3261ed5e09cd407913dd1f3a5a70d",
+                "url": "https://api.github.com/repos/filamentphp/widgets/zipball/a1612c8992598fdc5c800eaa80697a9b82f79d7e",
+                "reference": "a1612c8992598fdc5c800eaa80697a9b82f79d7e",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/filamentphp/filament/issues",
                 "source": "https://github.com/filamentphp/filament"
             },
-            "time": "2023-11-14T12:07:39+00:00"
+            "time": "2023-11-20T15:19:04+00:00"
         },
         {
             "name": "fruitcake/php-cors",
         },
         {
             "name": "laravel/framework",
-            "version": "v10.32.1",
+            "version": "v10.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "b30e44f20d244f7ba125283e14a8bbac167f4e5b"
+                "reference": "4536872e3e5b6be51b1f655dafd12c9a4fa0cfe8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/b30e44f20d244f7ba125283e14a8bbac167f4e5b",
-                "reference": "b30e44f20d244f7ba125283e14a8bbac167f4e5b",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/4536872e3e5b6be51b1f655dafd12c9a4fa0cfe8",
+                "reference": "4536872e3e5b6be51b1f655dafd12c9a4fa0cfe8",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2023-11-14T22:57:08+00:00"
+            "time": "2023-11-21T14:49:31+00:00"
         },
         {
             "name": "laravel/prompts",
         },
         {
             "name": "livewire/livewire",
-            "version": "v3.1.0",
+            "version": "v3.2.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/livewire/livewire.git",
-                "reference": "db1e02c645ae12a7cdee9b1ea0d65bf3aafc0f08"
+                "reference": "95083c0b61c1910ad28c4628e0dfa9c227eb1c41"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/livewire/livewire/zipball/db1e02c645ae12a7cdee9b1ea0d65bf3aafc0f08",
-                "reference": "db1e02c645ae12a7cdee9b1ea0d65bf3aafc0f08",
+                "url": "https://api.github.com/repos/livewire/livewire/zipball/95083c0b61c1910ad28c4628e0dfa9c227eb1c41",
+                "reference": "95083c0b61c1910ad28c4628e0dfa9c227eb1c41",
                 "shasum": ""
             },
             "require": {
             "description": "A front-end framework for Laravel.",
             "support": {
                 "issues": "https://github.com/livewire/livewire/issues",
-                "source": "https://github.com/livewire/livewire/tree/v3.1.0"
+                "source": "https://github.com/livewire/livewire/tree/v3.2.1"
             },
             "funding": [
                 {
                     "type": "github"
                 }
             ],
-            "time": "2023-11-03T15:05:18+00:00"
+            "time": "2023-11-20T17:05:06+00:00"
         },
         {
             "name": "masterminds/html5",
         },
         {
             "name": "squirephp/model",
-            "version": "v3.4.2",
+            "version": "v3.4.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/squirephp/model.git",
         },
         {
             "name": "squirephp/repository",
-            "version": "v3.4.2",
+            "version": "v3.4.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/squirephp/repository.git",
         },
         {
             "name": "laravel/sail",
-            "version": "v1.26.0",
+            "version": "v1.26.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/sail.git",
-                "reference": "c60fe037004e272efd0d81f416ed2bfc623d70b4"
+                "reference": "7a82f5aa364dbee3fd9c52fc464cf0bdd11150ed"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/sail/zipball/c60fe037004e272efd0d81f416ed2bfc623d70b4",
-                "reference": "c60fe037004e272efd0d81f416ed2bfc623d70b4",
+                "url": "https://api.github.com/repos/laravel/sail/zipball/7a82f5aa364dbee3fd9c52fc464cf0bdd11150ed",
+                "reference": "7a82f5aa364dbee3fd9c52fc464cf0bdd11150ed",
                 "shasum": ""
             },
             "require": {
                 "issues": "https://github.com/laravel/sail/issues",
                 "source": "https://github.com/laravel/sail"
             },
-            "time": "2023-10-18T13:57:15+00:00"
+            "time": "2023-11-20T15:56:47+00:00"
         },
         {
             "name": "mockery/mockery",
         },
         {
             "name": "phpunit/php-code-coverage",
-            "version": "10.1.8",
+            "version": "10.1.9",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/php-code-coverage.git",
-                "reference": "84838eed9ded511f61dc3e8b5944a52d9017b297"
+                "reference": "a56a9ab2f680246adcf3db43f38ddf1765774735"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/84838eed9ded511f61dc3e8b5944a52d9017b297",
-                "reference": "84838eed9ded511f61dc3e8b5944a52d9017b297",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/a56a9ab2f680246adcf3db43f38ddf1765774735",
+                "reference": "a56a9ab2f680246adcf3db43f38ddf1765774735",
                 "shasum": ""
             },
             "require": {
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues",
                 "security": "https://github.com/sebastianbergmann/php-code-coverage/security/policy",
-                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/10.1.8"
+                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/10.1.9"
             },
             "funding": [
                 {
                     "type": "github"
                 }
             ],
-            "time": "2023-11-15T13:31:15+00:00"
+            "time": "2023-11-23T12:23:20+00:00"
         },
         {
             "name": "phpunit/php-file-iterator",
         },
         {
             "name": "theseer/tokenizer",
-            "version": "1.2.1",
+            "version": "1.2.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/theseer/tokenizer.git",
-                "reference": "34a41e998c2183e22995f158c581e7b5e755ab9e"
+                "reference": "b2ad5003ca10d4ee50a12da31de12a5774ba6b96"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/theseer/tokenizer/zipball/34a41e998c2183e22995f158c581e7b5e755ab9e",
-                "reference": "34a41e998c2183e22995f158c581e7b5e755ab9e",
+                "url": "https://api.github.com/repos/theseer/tokenizer/zipball/b2ad5003ca10d4ee50a12da31de12a5774ba6b96",
+                "reference": "b2ad5003ca10d4ee50a12da31de12a5774ba6b96",
                 "shasum": ""
             },
             "require": {
             "description": "A small library for converting tokenized PHP source code into XML and potentially other formats",
             "support": {
                 "issues": "https://github.com/theseer/tokenizer/issues",
-                "source": "https://github.com/theseer/tokenizer/tree/1.2.1"
+                "source": "https://github.com/theseer/tokenizer/tree/1.2.2"
             },
             "funding": [
                 {
                     "type": "github"
                 }
             ],
-            "time": "2021-07-28T10:34:58+00:00"
+            "time": "2023-11-20T00:12:19+00:00"
         }
     ],
     "aliases": [],

package-lock.json

             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001563",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001563.tgz",
-            "integrity": "sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==",
+            "version": "1.0.30001564",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
+            "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
             "dev": true,
             "funding": [
                 {
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.588",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.588.tgz",
-            "integrity": "sha512-soytjxwbgcCu7nh5Pf4S2/4wa6UIu+A3p03U2yVr53qGxi1/VTR3ENI+p50v+UxqqZAfl48j3z55ud7VHIOr9w==",
+            "version": "1.4.594",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz",
+            "integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ==",
             "dev": true
         },
         "node_modules/esbuild": {
             }
         },
         "node_modules/postcss-load-config": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
-            "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+            "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
             "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
             "dependencies": {
-                "lilconfig": "^2.0.5",
-                "yaml": "^2.1.1"
+                "lilconfig": "^3.0.0",
+                "yaml": "^2.3.4"
             },
             "engines": {
                 "node": ">= 14"
             },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            },
             "peerDependencies": {
                 "postcss": ">=8.0.9",
                 "ts-node": ">=9.0.0"
                 }
             }
         },
+        "node_modules/postcss-load-config/node_modules/lilconfig": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+            "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+            "dev": true,
+            "engines": {
+                "node": ">=14"
+            }
+        },
         "node_modules/postcss-nested": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",

resources/css/filament/company/tailwind.config.js

     content: [
         './app/Filament/Company/**/*.php',
         './resources/views/filament/company/**/*.blade.php',
+        './resources/views/components/company/**/*.blade.php',
         './vendor/filament/**/*.blade.php',
         './vendor/andrewdwallo/filament-companies/resources/views/**/*.blade.php',
         './vendor/andrewdwallo/filament-selectify/resources/views/**/*.blade.php',
                 platinum: '#E8E9EB',
                 moonlight: '#F6F5F3',
                 translucent: 'rgba(54, 54, 52, 0.06)',
-            }
+            },
         }
     }
 }

resources/views/components/company/invoice/container.blade.php

+<div class="inv-container flex justify-center p-6">
+    <div class="inv-paper bg-[#ffffff] dark:bg-gray-800 rounded-sm shadow-xl w-[38.25rem] h-[49.5rem] overflow-hidden">
+        {{ $slot }}
+    </div>
+</div>

resources/views/components/company/invoice/footer.blade.php

+<footer {{ $attributes->class(['inv-footer text-xs text-gray-600 dark:text-gray-300']) }}>
+    {{ $slot }}
+</footer>

resources/views/components/company/invoice/header.blade.php

+<header {{ $attributes->class(['inv-header flex py-2 relative']) }}>
+    {{ $slot }}
+</header>

resources/views/components/company/invoice/line-items.blade.php

+<div {{ $attributes->class(['inv-line-items py-6']) }}>
+    {{ $slot }}
+</div>

resources/views/components/company/invoice/logo.blade.php

+@props([
+    'shape' => 'square',
+    'size' => 'md',
+])
+
+<img {{
+    $attributes
+        ->class([
+            'inv-logo object-contain',
+            match ($size) {
+                'sm' => 'max-h-8',
+                'md' => 'max-h-16',
+                'lg' => 'max-h-24',
+                'xl' => 'max-h-32',
+                default => $size,
+            },
+            match ($shape) {
+                'square' => 'rounded-none',
+                'rounded' => 'rounded-md',
+                'circle' => 'rounded-full',
+                default => $shape,
+            },
+        ])
+}}
+/>
+

resources/views/components/company/invoice/metadata.blade.php

+<section {{ $attributes->class(['inv-metadata px-6 pt-4']) }}>
+    {{ $slot }}
+</section>

resources/views/components/icons/decor-border-left.blade.php

+@props([
+    'color' => 'currentColor',
+])
+
+<svg xmlns="http://www.w3.org/2000/svg" height="72" width="28" viewBox="0 0 28 72" aria-hidden="true" {{ $attributes }}>
+    <g fill="none" stroke-width="2" stroke="{{ $color }}">
+        <path d="M183 57.038v-42.076c-.33.025-.664.038-1 .038-7.18 0-13-5.82-13-13 0-.336.013-.67.038-1h-154.076c.025.33.038.664.038 1 0 7.18-5.82 13-13 13-.336 0-.67-.013-1-.038v42.076c.33-.025.664-.038 1-.038 7.18 0 13 5.82 13 13 0 .336-.013.67-.038 1h154.076c-.025-.33-.038-.664-.038-1 0-7.18 5.82-13 13-13 .336 0 .67.013 1 .038z" />
+        <path d="M177 51.503v-31.007c-.33.024-.664.037-1 .037-7.18 0-13-5.626-13-12.567 0-.325.013-.648.038-.967h-142.076c.025.319.038.641.038.967 0 6.94-5.82 12.567-13 12.567-.336 0-.67-.012-1-.037v31.007c.33-.024.664-.037 1-.037 7.18 0 13 5.626 13 12.567 0 .325-.013.648-.038.967h142.076c-.025-.319-.038-.641-.038-.967 0-6.94 5.82-12.567 13-12.567.336 0 .67.012 1 .037z" />
+    </g>
+</svg>

resources/views/components/icons/decor-border-right.blade.php

+@props([
+    'color' => 'currentColor',
+])
+
+<svg xmlns="http://www.w3.org/2000/svg" height="72" width="28" viewBox="0 0 28 72" aria-hidden="true" {{ $attributes }}>
+    <g fill="none" stroke-width="2" stroke="{{ $color }}">
+        <path d="M27 57.038v-42.076c-.33.025-.664.038-1 .038-7.18 0-13-5.82-13-13 0-.336.013-.67.038-1h-154.076c.025.33.038.664.038 1 0 7.18-5.82 13-13 13-.336 0-.67-.013-1-.038v42.076c.33-.025.664-.038 1-.038 7.18 0 13 5.82 13 13 0 .336-.013.67-.038 1h154.076c-.025-.33-.038-.664-.038-1 0-7.18 5.82-13 13-13 .336 0 .67.013 1 .038z"></path>
+        <path d="M21 51.503v-31.007c-.33.024-.664.037-1 .037-7.18 0-13-5.626-13-12.567 0-.325.013-.648.038-.967h-142.076c.025.319.038.641.038.967 0 6.94-5.82 12.567-13 12.567-.336 0-.67-.012-1-.037v31.007c.33-.024.664-.037 1-.037 7.18 0 13 5.626 13 12.567 0 .325-.013.648-.038.967h142.076c-.025-.319-.038-.641-.038-.967 0-6.94 5.82-12.567 13-12.567.336 0 .67.012 1 .037z"></path>
+    </g>
+</svg>

resources/views/filament/company/components/invoice-layouts/classic.blade.php

 {!! $font_html !!}
 
 <style>
-    .paper {
+    .inv-paper {
         font-family: '{{ $font_family }}', sans-serif;
     }
 </style>
 
-<div class="print-template flex justify-center p-6">
-    <div class="paper bg-[#ffffff] dark:bg-gray-950 p-8 rounded-lg shadow-[0_0_10px_rgba(0,0,0,0.1)] w-[612px] h-[791px]">
-
-        <!-- Header Section -->
-        <div class="flex justify-between items-start pb-3">
-            <!-- Logo -->
-            <div style="width: 20%;" class="text-left">
-                @if($logo && $show_logo)
-                    <img src="{{ URL::asset($logo) }}" alt="logo" style="width: 100%; height: auto">
-                @endif
-            </div>
-
-            <!-- Company Details -->
-            <div style="width: 60%;" class="text-right text-xs text-gray-600 dark:text-gray-200 space-y-1">
-                <h2 class="text-xl font-bold text-gray-800 dark:text-white">{{ $company_name }}</h2>
-                @if($company_address && $company_city && $company_state)
+<x-company.invoice.container class="classic-template-container">
+    <!-- Header Section -->
+    <x-company.invoice.header class="default-template-header">
+        <div class="w-2/3 text-left ml-6">
+            <div class="text-xs">
+                <h2 class="text-base font-semibold">{{ $company_name }}</h2>
+                @if($company_address && $company_city && $company_state && $company_zip)
                     <p>{{ $company_address }}</p>
                     <p>{{ $company_city }}, {{ $company_state }} {{ $company_zip }}</p>
                     <p>{{ $company_country }}</p>
             </div>
         </div>
 
-        <!-- Empty line for spacing -->
-        <div class="my-4"></div>
-
-        <!-- Invoice Title/Header Centered -->
-        <div class="text-center" style="height: 60px;">
-            <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">{{ $header }}</h1>
-            @if ($subheader)
-                <p class="text-sm text-gray-600">{{ $subheader }}</p>
+        <div class="w-1/3 flex justify-end mr-6">
+            @if($logo && $show_logo)
+                <x-company.invoice.logo :src="$logo" />
             @endif
         </div>
+    </x-company.invoice.header>
 
-        <!-- Billing and Invoice Summary -->
-        <div class="flex justify-between pt-4">
-            <!-- Label for Billing and Invoice Details -->
-            <div class="text-base text-gray-600 dark:text-gray-200 mb-2">
-                <h4 class="font-semibold">Bill To:</h4>
+    <x-company.invoice.metadata class="classic-template-metadata">
+        <div class="items-center flex">
+            <hr class="grow-[2] py-0.5 border-double border-y-2" style="border-color: {{ $accent_color }};">
+            <div class="items-center flex mx-5">
+                <x-icons.decor-border-left color="{{ $accent_color }}" />
+                <div class="px-2.5 border-double border-y-2 py-1 -mx-3" style="border-color: {{ $accent_color }};">
+                    <div class="px-2.5 border-double border-y-2 py-3" style="border-color: {{ $accent_color }};">
+                        <div class="inline text-2xl font-semibold" style="color: {{ $accent_color }};">{{ $header }}</div>
+                    </div>
+                </div>
+                <x-icons.decor-border-right color="{{ $accent_color }}" />
             </div>
+            <hr class="grow-[2] py-0.5 border-double border-y-2" style="border-color: {{ $accent_color }};">
         </div>
+        <div class="mt-2 text-sm text-center text-gray-600 dark:text-gray-400">{{ $subheader }}</div>
 
-        <div class="flex justify-between" style="height: 60px;">
+        <div class="flex justify-between items-end">
             <!-- Billing Details -->
-            <table style="width: 65%">
-                <tbody class="text-xs text-left p-1">
-                <tr>
-                    <td>John Doe</td>
-                </tr>
-                <tr>
-                    <td>123 Main Street</td>
-                </tr>
-                <tr>
-                    <td>New York, NY 10001</td>
-                </tr>
-                </tbody>
-            </table>
-
-            <!-- Invoice Details -->
-            <table style="width: 35%">
-                <tbody class="text-xs text-right p-1">
-                <tr>
-                    <td>Invoice No:</td>
-                    <td>{{ $invoice_number }}</td>
-                </tr>
-                <tr>
-                    <td>Invoice Date:</td>
-                    <td>{{ $invoice_date }}</td>
-                </tr>
-                <tr>
-                    <td>Invoice Due:</td>
-                    <td>{{ $invoice_due_date }}</td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-
+            <div class="text-xs">
+                <h3 class="text-gray-600 dark:text-gray-400 font-medium tracking-tight mb-1">BILL TO</h3>
+                <p class="text-base font-bold">John Doe</p>
+                <p>123 Main Street</p>
+                <p>New York, New York 10001</p>
+                <p>United States</p>
+            </div>
 
-        <!-- Line Items -->
-        <div class="my-8">
-            <table class="w-full text-sm border-collapse">
-                <thead class="border-b-2">
+            <div class="text-xs">
+                <table class="min-w-full">
+                    <tbody>
                     <tr>
-                        <th class="p-2 w-1/12 text-center">#</th>
-                        <th class="p-2 w-5/12 text-left">{{ $item_name }}</th>
-                        <th class="p-2 w-2/12 text-right">{{ $unit_name }}</th>
-                        <th class="p-2 w-2/12 text-right">{{ $price_name }}</th>
-                        <th class="p-2 w-2/12 text-right">{{ $amount_name }}</th>
+                        <td class="font-semibold text-right pr-2">Invoice Number:</td>
+                        <td class="text-left pl-2">{{ $invoice_number }}</td>
                     </tr>
-                </thead>
-                <tbody class="text-xs">
-                    <tr class="border-b">
-                        <td class="p-2 text-center">1</td>
-                        <td class="p-2 text-left">Web Development</td>
-                        <td class="p-2 text-right">10</td>
-                        <td class="p-2 text-right">$100.00</td>
-                        <td class="p-2 text-right">$1000.00</td>
-                    </tr>
-                    <tr class="border-b">
-                        <td class="p-2 text-center">2</td>
-                        <td class="p-2 text-left">Consulting</td>
-                        <td class="p-2 text-right">5</td>
-                        <td class="p-2 text-right">$200.00</td>
-                        <td class="p-2 text-right">$1000.00</td>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Invoice Date:</td>
+                        <td class="text-left pl-2">{{ $invoice_date }}</td>
                     </tr>
-                    <tr class="border-b">
-                        <td class="p-2 text-center">3</td>
-                        <td class="p-2 text-left">Design Services</td>
-                        <td class="p-2 text-right">8</td>
-                        <td class="p-2 text-right">$125.00</td>
-                        <td class="p-2 text-right">$1000.00</td>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Payment Due:</td>
+                        <td class="text-left pl-2">{{ $invoice_due_date }}</td>
                     </tr>
-                </tbody>
-            </table>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </x-company.invoice.metadata>
 
-            <!-- Financial Details and Notes -->
-            <div class="flex justify-between text-xs">
-                <!-- Notes Section -->
-                <div class="w-8/12 border rounded p-2 mt-4">
-                    <h4 class="font-semibold mb-2">Notes:</h4>
-                    <p>{{ $footer }}</p>
-                </div>
+    <!-- Line Items -->
+    <x-company.invoice.line-items class="classic-template-line-items px-6">
+        <table class="w-full text-left table-fixed">
+            <thead class="text-sm leading-8">
+            <tr>
+                <th class="text-left">{{ $item_name }}</th>
+                <th class="text-center">{{ $unit_name }}</th>
+                <th class="text-right">{{ $price_name }}</th>
+                <th class="text-right">{{ $amount_name }}</th>
+            </tr>
+            </thead>
+            <tbody class="text-xs border-t-2 border-b-2 border-dotted border-gray-300 leading-8">
+            <tr>
+                <td class="text-left font-semibold">Item 1</td>
+                <td class="text-center">2</td>
+                <td class="text-right">$150.00</td>
+                <td class="text-right">$300.00</td>
+            </tr>
+            <tr>
+                <td class="text-left font-semibold">Item 2</td>
+                <td class="text-center">3</td>
+                <td class="text-right">$200.00</td>
+                <td class="text-right">$600.00</td>
+            </tr>
+            <tr>
+                <td class="text-left font-semibold">Item 3</td>
+                <td class="text-center">1</td>
+                <td class="text-right">$180.00</td>
+                <td class="text-right">$180.00</td>
+            </tr>
+            </tbody>
+        </table>
 
-                <!-- Financial Summary -->
-                <div class="w-4/12 mt-2">
-                    <table class="w-full border-collapse">
-                        <tbody class="text-right">
-                            <tr>
-                                <td class="p-2">Subtotal:</td>
-                                <td class="p-2">$3000.00</td>
-                            </tr>
-                            <tr>
-                                <td class="p-2">Tax:</td>
-                                <td class="p-2">$300.00</td>
-                            </tr>
-                            <tr>
-                                <td class="p-2">Total:</td>
-                                <td class="p-2">$3300.00</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+        <!-- Financial Details and Notes -->
+        <div class="flex justify-between text-xs space-x-1">
+            <!-- Notes Section -->
+            <div class="w-1/2 border border-dashed border-gray-300 p-2 mt-4">
+                <h4 class="font-semibold mb-2">Notes</h4>
+                <p>{{ $footer }}</p>
             </div>
-        </div>
 
-        <!-- Footer -->
-        <div class="flex justify-between mt-8 border-t-2 pt-4">
-            <div class="text-xs text-gray-600 dark:text-gray-300">
-                <h4 class="font-semibold mb-2">Terms & Conditions:</h4>
-                <p>{{ $terms }}</p>
+            <!-- Financial Summary -->
+            <div class="w-1/2 mt-2">
+                <table class="w-full table-fixed">
+                    <tbody class="text-xs leading-loose">
+                        <tr>
+                            <td class="text-right font-semibold">Subtotal:</td>
+                            <td class="text-right">$1080.00</td>
+                        </tr>
+                        <tr class="text-success-800 dark:text-success-600">
+                            <td class="text-right">Discount (5%):</td>
+                            <td class="text-right">($54.00)</td>
+                        </tr>
+                        <tr>
+                            <td class="text-right">Sales Tax (10%):</td>
+                            <td class="text-right">$102.60</td>
+                        </tr>
+                        <tr>
+                            <td class="text-right font-semibold">Total:</td>
+                            <td class="text-right">$1128.60</td>
+                        </tr>
+                        <tr>
+                            <td class="text-right font-semibold">Amount Due (USD):</td>
+                            <td class="text-right">$1128.60</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
-    </div>
-</div>
+    </x-company.invoice.line-items>
+
+    <!-- Footer -->
+    <x-company.invoice.footer class="classic-template-footer">
+        <h4 class="font-semibold px-6 mb-2">Terms & Conditions</h4>
+        <p class="px-6 break-words line-clamp-4">{{ $terms }}</p>
+    </x-company.invoice.footer>
+</x-company.invoice.container>

resources/views/filament/company/components/invoice-layouts/default.blade.php

 {!! $font_html !!}
 
 <style>
-    .paper {
+    .inv-paper {
         font-family: '{{ $font_family }}', sans-serif;
     }
 </style>
 
-<div class="print-template flex justify-center p-6">
-    <div class="paper bg-[#ffffff] dark:bg-gray-950 p-8 rounded-lg shadow-[0_0_10px_rgba(0,0,0,0.1)] w-[612px] h-[791px]">
+<x-company.invoice.container class="default-template-container">
 
-        <!-- Header: Logo on the left and Company details on the right -->
-        <div class="flex mb-4">
-            <div class="w-2/5">
-                @if($logo && $show_logo)
-                    <div class="text-left">
-                        <img src="{{ \Illuminate\Support\Facades\URL::asset($logo) }}" alt="logo" style="width: 120px; height: auto">
-                    </div>
-                @endif
-            </div>
-
-            <!-- Company Details -->
-            <div class="w-3/5">
-                <div class="text-xs text-gray-600 dark:text-gray-200 text-right space-y-1">
-                    <h2 class="text-xl font-bold text-gray-800 dark:text-white">{{ $company_name }}</h2>
-                    @if($company_address && $company_city && $company_state && $company_zip)
-                        <p>{{ $company_address }}</p>
-                        <p>{{ $company_city }}, {{ $company_state }} {{ $company_zip }}</p>
-                        <p>{{ $company_country }}</p>
-                    @endif
-                </div>
-            </div>
+    <x-company.invoice.header class="default-template-header border-b-2 p-6 pb-4">
+        <div class="w-2/3">
+            @if($logo && $show_logo)
+                <x-company.invoice.logo :src="$logo" />
+            @endif
         </div>
 
-        <!-- Border Line -->
-        <div class="border-b-2 my-4" style="border-color: {{ $accent_color }}"></div>
-
-        <!-- Invoice Details -->
-        <div class="flex mb-4">
-            <div class="w-2/5">
-                <div class="text-left">
-                    <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">{{ $header }}</h1>
-                    @if ($subheader)
-                        <p class="text-sm text-gray-600 dark:text-gray-100">{{ $subheader }}</p>
-                    @endif
-                </div>
-            </div>
-
-            <div class="w-3/5">
-                <div class="text-right">
-                    <p>
-                        <span class="text-xs font-semibold text-gray-500 dark:text-gray-100">No: </span>
-                        <span class="text-xs text-gray-700 dark:text-white">{{ $invoice_number }}</span>
-                    </p>
-                    <p>
-                        <span class="text-xs font-semibold text-gray-500 dark:text-gray-100">Date: </span>
-                        <span class="text-xs text-gray-500 dark:text-white">{{ $invoice_date }}</span>
-                    </p>
-                    <p>
-                        <span class="text-xs font-semibold text-gray-500 dark:text-gray-100">Due Date: </span>
-                        <span class="text-xs text-gray-500 dark:text-white">{{ $invoice_due_date }}</span>
-                    </p>
-                </div>
+        <div class="w-1/3 text-right">
+            <div class="text-xs">
+                <h2 class="font-semibold">{{ $company_name }}</h2>
+                @if($company_address && $company_city && $company_state && $company_zip)
+                    <p>{{ $company_address }}</p>
+                    <p>{{ $company_city }}, {{ $company_state }} {{ $company_zip }}</p>
+                    <p>{{ $company_country }}</p>
+                @endif
             </div>
         </div>
+    </x-company.invoice.header>
 
-        <!-- Billing Details -->
-        <div class="text-xs text-gray-600 dark:text-gray-200 mb-4">
-            <h3 class="text-base font-semibold text-gray-600 dark:text-gray-200 mb-2">BILL TO</h3>
-            <p class="text-sm text-gray-800 dark:text-white font-semibold">John Doe</p>
-            <p>123 Main Street</p>
-            <p>New York, NY 10001</p>
+    <x-company.invoice.metadata class="default-template-metadata space-y-6">
+        <div>
+            <h1 class="text-3xl font-light uppercase">{{ $header }}</h1>
+            @if ($subheader)
+                <h2 class="text-sm text-gray-600 dark:text-gray-400">{{ $subheader }}</h2>
+            @endif
         </div>
 
-        <!-- Line Items Table -->
-        <div class="mb-4">
-            <table class="w-full border-collapse text-sm">
-                <thead>
-                    <tr style="color: {{ $accent_color }}">
-                        <th class="text-left p-2 w-1/2">{{ $item_name }}</th>
-                        <th class="text-center p-2 w-1/6">{{ $unit_name }}</th>
-                        <th class="text-center p-2 w-1/6">{{ $price_name }}</th>
-                        <th class="text-center p-2 w-1/6">{{ $amount_name }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr class="bg-gray-200/75 dark:bg-gray-800">
-                        <td class="p-2">Item 1</td>
-                        <td class="p-2 text-center">2</td>
-                        <td class="p-2 text-center">$150.00</td>
-                        <td class="p-2 text-center">$300.00</td>
+        <div class="flex justify-between items-end">
+            <!-- Billing Details -->
+            <div class="text-xs">
+                <h3 class="text-gray-600 dark:text-gray-400 font-medium tracking-tight mb-1">BILL TO</h3>
+                <p class="text-base font-bold">John Doe</p>
+                <p>123 Main Street</p>
+                <p>New York, New York 10001</p>
+                <p>United States</p>
+            </div>
+
+            <div class="text-xs">
+                <table class="min-w-full">
+                    <tbody>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Invoice Number:</td>
+                        <td class="text-left pl-2">{{ $invoice_number }}</td>
                     </tr>
                     <tr>
-                        <td class="p-2">Item 2</td>
-                        <td class="p-2 text-center">3</td>
-                        <td class="p-2 text-center">$200.00</td>
-                        <td class="p-2 text-center">$600.00</td>
+                        <td class="font-semibold text-right pr-2">Invoice Date:</td>
+                        <td class="text-left pl-2">{{ $invoice_date }}</td>
                     </tr>
-                    <tr class="bg-gray-200/75 dark:bg-gray-800">
-                        <td class="p-2">Item 3</td>
-                        <td class="p-2 text-center">1</td>
-                        <td class="p-2 text-center">$200.00</td>
-                        <td class="p-2 text-center">$200.00</td>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Payment Due:</td>
+                        <td class="text-left pl-2">{{ $invoice_due_date }}</td>
                     </tr>
-                </tbody>
-            </table>
+                    </tbody>
+                </table>
+            </div>
         </div>
+    </x-company.invoice.metadata>
 
-        <!-- Total Amount -->
-        <div class="text-right mb-8">
-            <p class="text-sm text-gray-600 dark:text-gray-200">Subtotal: $1100.00</p>
-            <p class="text-sm text-gray-600 dark:text-gray-200">Tax: $110.00</p>
-            <p class="text-lg font-semibold text-gray-800 dark:text-white">Total: $1210.00</p>
-        </div>
+    <!-- Line Items Table -->
+    <x-company.invoice.line-items class="default-template-line-items">
+        <table class="w-full text-left table-fixed">
+            <thead class="text-sm leading-8" style="background: {{ $accent_color }}">
+                <tr class="text-white">
+                    <th class="text-left pl-6">{{ $item_name }}</th>
+                    <th class="text-center">{{ $unit_name }}</th>
+                    <th class="text-right">{{ $price_name }}</th>
+                    <th class="text-right pr-6">{{ $amount_name }}</th>
+                </tr>
+            </thead>
+            <tbody class="text-xs border-b-2 border-gray-300 leading-8">
+            <tr>
+                <td class="text-left pl-6 font-semibold">Item 1</td>
+                <td class="text-center">2</td>
+                <td class="text-right">$150.00</td>
+                <td class="text-right pr-6">$300.00</td>
+            </tr>
+            <tr>
+                <td class="text-left pl-6 font-semibold">Item 2</td>
+                <td class="text-center">3</td>
+                <td class="text-right">$200.00</td>
+                <td class="text-right pr-6">$600.00</td>
+            </tr>
+            <tr>
+                <td class="text-left pl-6 font-semibold">Item 3</td>
+                <td class="text-center">1</td>
+                <td class="text-right">$180.00</td>
+                <td class="text-right pr-6">$180.00</td>
+            </tr>
+            </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">$1080.00</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">($54.00)</td>
+                </tr>
+                <tr>
+                    <td class="pl-6" colspan="2"></td>
+                    <td class="text-right">Sales Tax (10%):</td>
+                    <td class="text-right pr-6">$102.60</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">$1128.60</td>
+                </tr>
+                <tr>
+                    <td class="pl-6" colspan="2"></td>
+                    <td class="text-right font-semibold border-t-4 border-double">Amount Due (USD):</td>
+                    <td class="text-right border-t-4 border-double pr-6">$1128.60</td>
+                </tr>
+            </tfoot>
+        </table>
+    </x-company.invoice.line-items>
 
-        <!-- Footer Notes -->
-        <div class="pt-6 text-gray-600 dark:text-gray-300 text-xs">
-            <p>{{ $footer }}</p>
-            <div class="mt-2 border-t-2 border-gray-300 py-2">
-                <h4 class="font-semibold text-gray-700 dark:text-gray-100 mb-2">Terms & Conditions:</h4>
-                <p>{{ $terms }}</p>
-            </div>
-        </div>
-    </div>
-</div>
+    <!-- Footer Notes -->
+    <x-company.invoice.footer class="default-template-footer">
+        <p class="px-6">{{ $footer }}</p>
+        <span class="border-t-2 my-2 border-gray-300 block w-full"></span>
+        <h4 class="font-semibold px-6 mb-2">Terms & Conditions</h4>
+        <p class="px-6 break-words line-clamp-4">{{ $terms }}</p>
+    </x-company.invoice.footer>
+</x-company.invoice.container>

resources/views/filament/company/components/invoice-layouts/modern.blade.php

 {!! $font_html !!}
 
 <style>
-    .paper {
+    .inv-paper {
         font-family: '{{ $font_family }}', sans-serif;
     }
 </style>
 
-<div class="print-template flex justify-center p-6">
-    <div class="paper bg-[#ffffff] dark:bg-gray-950 p-8 rounded-lg shadow-[0_0_10px_rgba(0,0,0,0.1)] w-[612px] h-[791px]">
+<x-company.invoice.container class="modern-template-container">
 
-        <!-- Colored Header with Logo -->
-        <div class="flex">
-            <div class="text-white py-3 flex items-start justify-start bg-gray-800" style="height: 80px; width: 85%;">
-                @if($logo && $show_logo)
-                    <div class="text-left">
-                        <img src="{{ \Illuminate\Support\Facades\URL::asset($logo) }}" alt="logo" style="width: 120px; height: auto">
-                    </div>
-                @endif
-            </div>
-
-            <!-- Ribbon Container -->
-            <div class="text-white flex flex-col justify-end p-2" style="background: {{ $accent_color }}; width: 30%; height: 120px; margin-left: -15%;">
-                @if($header)
-                    <div class="text-center align-bottom">
-                        <h1 class="text-3xl font-bold">{{ $header }}</h1>
-                    </div>
-                @endif
-            </div>
+    <!-- Colored Header with Logo -->
+    <x-company.invoice.header class="bg-gray-800 h-20">
+        <!-- Logo -->
+        <div class="w-2/3">
+            @if($logo && $show_logo)
+                <x-company.invoice.logo class="ml-6" :src="$logo" />
+            @endif
         </div>
 
-        <!-- Company Details -->
-        <div class="flex justify-between">
-            <div class="text-xs text-gray-600 dark:text-gray-200 space-y-1">
-                <h2 class="text-xl font-bold text-gray-800 dark:text-white">{{ $company_name }}</h2>
-                @if($company_address && $company_city && $company_state && $company_zip)
-                    <p>{{ $company_address }}</p>
-                    <p>{{ $company_city }}, {{ $company_state }} {{ $company_zip }}</p>
-                    <p>{{ $company_country }}</p>
-                @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" style="background: {{ $accent_color }};">
+            @if($header)
+                <h1 class="text-3xl font-bold text-white text-center uppercase">{{ $header }}</h1>
+            @endif
+        </div>
+    </x-company.invoice.header>
 
-            <table class="mt-6" style="width: 35%; height: 100px">
-                <thead class="border-b-2" style="border-color: {{ $accent_color }}">
-                <tr class="p-1">
-                    <th class="text-xs text text-gray-500 text-right">Total Due</th>
-                    <th class="text-xs text-gray-500 text-left">:</th>
-                    <th class="text-sm font-semibold text-gray-800 dark:text-white text-right">USD $1100.00</th>
-                </tr>
-                </thead>
-                <tr>
-                    <td colspan="3" class="py-1"></td>
-                </tr>
-                <tbody class="text-xs text-gray-500 dark:text-white">
-                <tr class="p-1">
-                    <td class="text-right">Invoice No</td>
-                    <td class="text-left">:</td>
-                    <td class="text-right">{{ $invoice_number }}</td>
-                </tr>
-                <tr class="p-1">
-                    <td class="text-right">Invoice Date</td>
-                    <td class="text-left">:</td>
-                    <td class="text-right">{{ $invoice_date }}</td>
-                </tr>
-                <tr class="p-1">
-                    <td class="text-right">Invoice Due</td>
-                    <td class="text-left">:</td>
-                    <td class="text-right">{{ $invoice_due_date }}</td>
-                </tr>
-                </tbody>
-            </table>
+    <!-- Company Details -->
+    <x-company.invoice.metadata class="modern-template-metadata space-y-6">
+        <div class="text-xs">
+            <h2 class="text-base font-semibold">{{ $company_name }}</h2>
+            @if($company_address && $company_city && $company_state && $company_zip)
+                <p>{{ $company_address }}</p>
+                <p>{{ $company_city }}, {{ $company_state }} {{ $company_zip }}</p>
+                <p>{{ $company_country }}</p>
+            @endif
         </div>
 
-        <!-- Billing Details -->
-        <div class="text-xs text-gray-600 dark:text-gray-200 mb-4">
-            <h3 class="text-base font-semibold text-gray-600 dark:text-gray-200 tracking-tight mb-2">BILL TO</h3>
-            <p class="text-lg font-semibold" style="color: {{ $accent_color }}">John Doe</p>
-            <p>123 Main Street</p>
-            <p>New York, NY 10001</p>
+        <div class="flex justify-between items-end">
+            <!-- Billing Details -->
+            <div class="text-xs">
+                <h3 class="text-gray-600 dark:text-gray-400 font-medium tracking-tight mb-1">BILL TO</h3>
+                <p class="text-base font-bold" style="color: {{ $accent_color }}">John Doe</p>
+                <p>123 Main Street</p>
+                <p>New York, New York 10001</p>
+                <p>United States</p>
+            </div>
+
+            <div class="text-xs">
+                <table class="min-w-full">
+                    <tbody>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Invoice Number:</td>
+                        <td class="text-left pl-2">{{ $invoice_number }}</td>
+                    </tr>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Invoice Date:</td>
+                        <td class="text-left pl-2">{{ $invoice_date }}</td>
+                    </tr>
+                    <tr>
+                        <td class="font-semibold text-right pr-2">Payment Due:</td>
+                        <td class="text-left pl-2">{{ $invoice_due_date }}</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
+    </x-company.invoice.metadata>
 
-        <!-- Line Items Table -->
-        <div class="mb-8">
-            <table class="w-full border-collapse text-sm">
-                <thead style="background: {{ $accent_color }};">
-                <tr class="text-[#ffffff]">
-                    <th class="text-left p-2 w-1/12">No</th>
-                    <th class="text-left p-2 w-7/12">{{ $item_name }}</th>
-                    <th class="text-left p-2 w-1/6">{{ $unit_name }}</th>
-                    <th class="text-left p-2 w-1/6">{{ $price_name }}</th>
-                    <th class="text-left p-2 w-1/6">{{ $amount_name }}</th>
-                </tr>
-                </thead>
-                <tbody class="text-xs">
-                <tr class="border-b border-gray-300">
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">01</td>
-                    <td class="p-2">Item 1</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">2</td>
-                    <td class="p-2">$150.00</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">$300.00</td>
-                </tr>
-                <tr class="border-b border-gray-300">
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">02</td>
-                    <td class="p-2">Item 2</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">3</td>
-                    <td class="p-2">$200.00</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">$600.00</td>
+    <!-- Line Items Table -->
+    <x-company.invoice.line-items class="modern-template-line-items">
+        <table class="w-full text-left table-fixed">
+            <thead class="text-sm leading-8">
+            <tr class="text-gray-600 dark:text-gray-400">
+                <th class="text-left pl-6">{{ $item_name }}</th>
+                <th class="text-center">{{ $unit_name }}</th>
+                <th class="text-right">{{ $price_name }}</th>
+                <th class="text-right pr-6">{{ $amount_name }}</th>
+            </tr>
+            </thead>
+            <tbody class="text-xs border-t-2 border-b-2 leading-8">
+            <tr class="bg-gray-100 dark:bg-gray-800">
+                <td class="text-left pl-6 font-semibold">Item 1</td>
+                <td class="text-center">2</td>
+                <td class="text-right">$150.00</td>
+                <td class="text-right pr-6">$300.00</td>
+            </tr>
+            <tr>
+                <td class="text-left pl-6 font-semibold">Item 2</td>
+                <td class="text-center">3</td>
+                <td class="text-right">$200.00</td>
+                <td class="text-right pr-6">$600.00</td>
+            </tr>
+            <tr class="bg-gray-100 dark:bg-gray-800">
+                <td class="text-left pl-6 font-semibold">Item 3</td>
+                <td class="text-center">1</td>
+                <td class="text-right">$180.00</td>
+                <td class="text-right pr-6">$180.00</td>
+            </tr>
+            </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">$1080.00</td>
                 </tr>
-                <tr class="border-b border-gray-300">
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">03</td>
-                    <td class="p-2">Item 3</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">1</td>
-                    <td class="p-2">$180.00</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">$180.00</td>
+                <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">($54.00)</td>
                 </tr>
                 <tr>
-                    <td class="p-2"></td>
-                    <td class="p-2"></td>
-                    <td class="p-2"></td>
-                    <td class="p-2">Subtotal:</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">$1000.00</td>
+                    <td class="pl-6" colspan="2"></td>
+                    <td class="text-right">Sales Tax (10%):</td>
+                    <td class="text-right pr-6">$102.60</td>
                 </tr>
                 <tr>
-                    <td class="p-2"></td>
-                    <td class="p-2"></td>
-                    <td class="p-2"></td>
-                    <td class="p-2">Tax:</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">$100.00</td>
+                    <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">$1128.60</td>
                 </tr>
                 <tr>
-                    <td class="p-2"></td>
-                    <td class="p-2"></td>
-                    <td class="p-2"></td>
-                    <td class="p-2">Total:</td>
-                    <td class="p-2 bg-gray-100 dark:bg-gray-800">$1100.00</td>
+                    <td class="pl-6" colspan="2"></td>
+                    <td class="text-right font-semibold border-t-4 border-double">Amount Due (USD):</td>
+                    <td class="text-right border-t-4 border-double pr-6">$1128.60</td>
                 </tr>
-                </tbody>
-            </table>
-        </div>
+            </tfoot>
+        </table>
+    </x-company.invoice.line-items>
 
-        <!-- Footer Notes -->
-        <div class="text-gray-600 dark:text-gray-300 text-xs">
-            <h4 class="font-semibold text-gray-700 dark:text-gray-100 mb-2" style="color: {{ $accent_color }}">Terms & Conditions:</h4>
-            <div class="flex mt-2 justify-between py-2 border-t-2 border-gray-300">
-                <div class="w-1/2">
-                    <p>{{ $terms }}</p>
-                </div>
-                <div class="w-1/2 text-right">
-                    <p>{{ $footer }}</p>
-                </div>
-            </div>
+    <!-- Footer Notes -->
+    <x-company.invoice.footer class="modern-template-footer">
+        <h4 class="font-semibold px-6" style="color: {{ $accent_color }}">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">
+            <p class="w-1/2 break-words line-clamp-4">{{ $terms }}</p>
+            <p class="w-1/2 break-words line-clamp-4">{{ $footer }}</p>
         </div>
-    </div>
-</div>
+    </x-company.invoice.footer>
+</x-company.invoice.container>