wip

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;
 
 
         $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/View/Models/DocumentTotalViewModel.php

 
         $grandTotalInCents = $subtotalInCents + ($taxTotalInCents - $discountTotalInCents);
 
+        // Amount Due is the same as Grand Total for now, but can be modified later to account for payments
+        $amountDueInCents = $grandTotalInCents;
+
         $conversionMessage = $this->buildConversionMessage($grandTotalInCents, $currencyCode, $defaultCurrencyCode);
 
         return [
             'taxTotal' => CurrencyConverter::formatCentsToMoney($taxTotalInCents, $currencyCode),
             'discountTotal' => CurrencyConverter::formatCentsToMoney($discountTotalInCents, $currencyCode),
             'grandTotal' => CurrencyConverter::formatCentsToMoney($grandTotalInCents, $currencyCode),
+            'amountDue' => CurrencyConverter::formatCentsToMoney($amountDueInCents, $currencyCode),
+            'currencyCode' => $currencyCode,
             'conversionMessage' => $conversionMessage,
         ];
     }

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

     $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>
             <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>
             <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">
+                    <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 pl-4 py-2 leading-6">({{ $discountTotal }})</td>
+                    <td class="text-sm p-2">({{ $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>
+                    <td class="text-sm p-2">Discount:</td>
+                    <td class="text-sm p-2">({{ $discountTotal }})</td>
                 </tr>
             @endif
-            <tr class="font-semibold">
+            <tr>
+                <td colspan="4"></td>
+                <td class="text-sm p-2 font-semibold text-gray-950 dark:text-white">Total:</td>
+                <td class="text-sm p-2">{{ $grandTotal }}</td>
+            </tr>
+            <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 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>
             @if($conversionMessage)
                 <tr>
-                    <td colspan="6" class="text-sm pl-4 py-2 leading-6 text-gray-600">
+                    <td colspan="6" class="text-sm p-2 text-gray-600">
                         {{ $conversionMessage }}
                     </td>
                 </tr>
     </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>
+                <span class="text-sm font-semibold text-gray-950 dark:text-white">Subtotal:</span>
+                <span class="text-sm">{{ $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>
+                <span class="text-sm">Tax:</span>
+                <span class="text-sm">{{ $taxTotal }}</span>
             </div>
             @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>
                 </div>
             @else
                 <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">Total:</span>
+                <span class="text-sm">{{ $grandTotal }}</span>
+            </div>
+            <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>
             @if($conversionMessage)
                 <div class="text-sm text-gray-600">