wip

app/Filament/Company/Resources/Accounting/BudgetResource/RelationManagers/BudgetItemsRelationManager.php

 
 namespace App\Filament\Company\Resources\Accounting\BudgetResource\RelationManagers;
 
-use App\Filament\Tables\Columns\DeferredTextInputColumn;
+use App\Filament\Tables\Columns\CustomTextInputColumn;
 use App\Models\Accounting\Budget;
 use App\Models\Accounting\BudgetAllocation;
 use App\Models\Accounting\BudgetItem;
                     ->titlePrefixedWithLabel(false)
                     ->collapsible(),
             ])
-            ->recordClasses(['budget-items-relation-manager'])
+            ->recordClasses(['is-spreadsheet'])
             ->defaultGroup('account.category')
             ->headerActions([
                 Action::make('saveBatchChanges')
                     ->label('Account')
                     ->limit(30)
                     ->searchable(),
-                DeferredTextInputColumn::make(self::TOTAL_COLUMN)
+                CustomTextInputColumn::make(self::TOTAL_COLUMN)
                     ->label('Total')
                     ->alignRight()
                     ->mask(RawJs::make('$money($input)'))
 
                         return CurrencyConverter::convertCentsToFormatSimple($total);
                     })
-                    ->batchMode()
+                    ->deferred()
+                    ->navigable()
                     ->summarize(
                         Summarizer::make()
                             ->using(function (\Illuminate\Database\Query\Builder $query) {
                 ...$allocationPeriods->map(function (BudgetAllocation $period) {
                     $alias = $period->start_date->format('Y_m_d');
 
-                    return DeferredTextInputColumn::make($alias)
+                    return CustomTextInputColumn::make($alias)
                         ->label($period->period)
                         ->alignRight()
-                        ->batchMode()
+                        ->deferred()
+                        ->navigable()
                         ->mask(RawJs::make('$money($input)'))
                         ->getStateUsing(function ($record) use ($alias) {
                             $key = "{$record->getKey()}.{$alias}";

app/Filament/Company/Resources/Purchases/BillResource/Pages/ListBills.php

     {
         return [
             Actions\Action::make('payBills')
-                ->label('Pay Bills')
-                ->icon('heroicon-o-credit-card')
-                ->color('primary')
-                ->url(fn () => BillResource::getUrl('pay-bills')),
+                ->outlined()
+                ->url(BillResource::getUrl('pay-bills')),
             Actions\CreateAction::make(),
         ];
     }

app/Filament/Company/Resources/Purchases/BillResource/Pages/PayBills.php

 use App\Enums\Accounting\BillStatus;
 use App\Enums\Accounting\PaymentMethod;
 use App\Filament\Company\Resources\Purchases\BillResource;
+use App\Filament\Tables\Columns\CustomTextInputColumn;
 use App\Models\Accounting\Bill;
 use App\Models\Accounting\Transaction;
 use App\Models\Banking\BankAccount;
+use App\Models\Common\Vendor;
+use App\Models\Setting\Currency;
 use App\Utilities\Currency\CurrencyAccessor;
 use App\Utilities\Currency\CurrencyConverter;
 use Filament\Actions;
 use Filament\Resources\Pages\ListRecords;
 use Filament\Support\RawJs;
 use Filament\Tables;
+use Filament\Tables\Columns\Summarizers\Summarizer;
 use Filament\Tables\Columns\TextColumn;
-use Filament\Tables\Columns\TextInputColumn;
-use Filament\Tables\Enums\FiltersLayout;
 use Filament\Tables\Table;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Query\Builder;
+use Illuminate\Support\Str;
 use Livewire\Attributes\Computed;
 
 /**
     {
         parent::mount();
 
-        $this->form->fill([
-            'bank_account_id' => BankAccount::where('enabled', true)->first()?->id,
-            'payment_date' => now(),
-            'payment_method' => PaymentMethod::Check,
-        ]);
+        $this->form->fill();
 
         $this->reset('tableFilters');
     }
     protected function getHeaderActions(): array
     {
         return [
-            Actions\Action::make('paySelected')
-                ->label('Pay Selected Bills')
-                ->icon('heroicon-o-credit-card')
+            Actions\Action::make('processPayments')
                 ->color('primary')
                 ->action(function () {
                     $data = $this->data;
-                    $selectedRecords = $this->getTableRecords();
+                    $tableRecords = $this->getTableRecords();
                     $paidCount = 0;
                     $totalPaid = 0;
 
-                    foreach ($selectedRecords as $bill) {
+                    /** @var Bill $bill */
+                    foreach ($tableRecords as $bill) {
                         if (! $bill->canRecordPayment()) {
                             continue;
                         }
                         }
 
                         $paymentData = [
-                            'posted_at' => $data['payment_date'],
+                            'posted_at' => $data['posted_at'],
                             'payment_method' => $data['payment_method'],
                             'bank_account_id' => $data['bank_account_id'],
                             'amount' => $paymentAmount,
                         $totalPaid += $paymentAmount;
                     }
 
-                    $totalFormatted = CurrencyConverter::formatCentsToMoney($totalPaid);
+                    $currencyCode = $this->getTableFilterState('currency_code')['value'];
+                    $totalFormatted = CurrencyConverter::formatCentsToMoney($totalPaid, $currencyCode, true);
 
                     Notification::make()
                         ->title('Bills paid successfully')
-                        ->body("Paid {$paidCount} bill(s) for a total of {$totalFormatted}")
+                        ->body("Paid {$paidCount} " . Str::plural('bill', $paidCount) . " for a total of {$totalFormatted}")
                         ->success()
                         ->send();
 
-                    // Clear payment amounts after successful payment
-                    foreach ($selectedRecords as $bill) {
-                        $this->paymentAmounts[$bill->id] = 0;
-                    }
+                    $this->reset('paymentAmounts');
 
                     $this->resetTable();
                 }),
     public function form(Form $form): Form
     {
         return $form
+            ->live()
             ->schema([
                 Forms\Components\Grid::make(3)
                     ->schema([
                         Forms\Components\Select::make('bank_account_id')
-                            ->label('Bank Account')
-                            ->options(function () {
+                            ->label('Account')
+                            ->options(static function () {
                                 return Transaction::getBankAccountOptionsFlat();
                             })
+                            ->default(fn () => BankAccount::where('enabled', true)->first()?->id)
                             ->selectablePlaceholder(false)
                             ->searchable()
                             ->softRequired(),
-                        Forms\Components\DatePicker::make('payment_date')
-                            ->label('Payment Date')
+                        Forms\Components\DatePicker::make('posted_at')
+                            ->label('Date')
                             ->default(now())
                             ->softRequired(),
                         Forms\Components\Select::make('payment_method')
-                            ->label('Payment Method')
+                            ->label('Payment method')
                             ->selectablePlaceholder(false)
                             ->options(PaymentMethod::class)
-                            ->default(PaymentMethod::Check)
-                            ->softRequired()
-                            ->live(),
+                            ->default(PaymentMethod::BankPayment)
+                            ->softRequired(),
                     ]),
             ])->statePath('data');
     }
                     ->with(['vendor'])
                     ->unpaid()
             )
-            ->selectable()
+            ->recordClasses(['is-spreadsheet'])
+            ->defaultSort('due_date')
+            ->paginated(false)
             ->columns([
                 TextColumn::make('vendor.name')
                     ->label('Vendor')
                     ->sortable(),
                 TextColumn::make('bill_number')
-                    ->label('Bill #')
+                    ->label('Bill number')
                     ->sortable(),
                 TextColumn::make('due_date')
-                    ->label('Due Date')
-                    ->date('M j, Y')
+                    ->label('Due date')
+                    ->defaultDateFormat()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('status')
+                    ->badge()
                     ->sortable(),
                 TextColumn::make('amount_due')
-                    ->label('Amount Due')
+                    ->label('Amount due')
                     ->currency(static fn (Bill $record) => $record->currency_code)
                     ->alignEnd()
-                    ->sortable(),
-                TextInputColumn::make('payment_amount')
-                    ->label('Payment Amount')
+                    ->sortable()
+                    ->summarize([
+                        Summarizer::make()
+                            ->using(function (Builder $query) {
+                                $totalAmountDue = $query->sum('amount_due');
+                                $bankAccountCurrency = $this->getSelectedBankAccount()->account->currency_code;
+                                $activeCurrency = $this->getTableFilterState('currency_code')['value'] ?? $bankAccountCurrency;
+
+                                if ($activeCurrency !== $bankAccountCurrency) {
+                                    $totalAmountDue = CurrencyConverter::convertBalance($totalAmountDue, $activeCurrency, $bankAccountCurrency);
+                                }
+
+                                return CurrencyConverter::formatCentsToMoney($totalAmountDue, $bankAccountCurrency, true);
+                            }),
+                        Summarizer::make()
+                            ->using(function (Builder $query) {
+                                $totalAmountDue = $query->sum('amount_due');
+                                $currencyCode = $this->getTableFilterState('currency_code')['value'];
+
+                                return CurrencyConverter::formatCentsToMoney($totalAmountDue, $currencyCode, true);
+                            })
+                            ->visible(function () {
+                                $activeCurrency = $this->getTableFilterState('currency_code')['value'] ?? null;
+                                $bankAccountCurrency = $this->getSelectedBankAccount()->account->currency_code;
+
+                                return $activeCurrency && $activeCurrency !== $bankAccountCurrency;
+                            }),
+                    ]),
+                CustomTextInputColumn::make('payment_amount')
+                    ->label('Payment amount')
                     ->alignEnd()
+                    ->navigable()
                     ->mask(RawJs::make('$money($input)'))
                     ->updateStateUsing(function (Bill $record, $state) {
-                        if (empty($state) || $state === '0.00') {
+                        if (! CurrencyConverter::isValidAmount($state, 'USD')) {
                             $this->paymentAmounts[$record->id] = 0;
 
                             return '0.00';
 
                         $paymentCents = CurrencyConverter::convertToCents($state, 'USD');
 
-                        // Validate payment doesn't exceed amount due
                         if ($paymentCents > $record->amount_due) {
-                            Notification::make()
-                                ->title('Invalid payment amount')
-                                ->body('Payment cannot exceed amount due')
-                                ->warning()
-                                ->send();
-
-                            $maxAmount = CurrencyConverter::convertCentsToFormatSimple($record->amount_due, 'USD');
-                            $this->paymentAmounts[$record->id] = $record->amount_due;
-
-                            return $maxAmount;
+                            $paymentCents = $record->amount_due;
                         }
 
                         $this->paymentAmounts[$record->id] = $paymentCents;
                         $paymentAmount = $this->paymentAmounts[$record->id] ?? 0;
 
                         return CurrencyConverter::convertCentsToFormatSimple($paymentAmount, 'USD');
-                    }),
-            ])
-            ->actions([
-                Tables\Actions\Action::make('setFullAmount')
-                    ->label('Pay Full')
-                    ->icon('heroicon-o-banknotes')
-                    ->color('primary')
-                    ->action(function (Bill $record) {
-                        $this->paymentAmounts[$record->id] = $record->amount_due;
-                    }),
-                Tables\Actions\Action::make('clearAmount')
-                    ->label('Clear')
-                    ->icon('heroicon-o-x-mark')
-                    ->color('gray')
-                    ->action(function (Bill $record) {
-                        $this->paymentAmounts[$record->id] = 0;
-                    }),
+                    })
+                    ->summarize([
+                        Summarizer::make()
+                            ->using(function () {
+                                $total = array_sum($this->paymentAmounts);
+                                $defaultCurrency = CurrencyAccessor::getDefaultCurrency();
+                                $activeCurrency = $this->getTableFilterState('currency_code')['value'] ?? $defaultCurrency;
+
+                                if ($activeCurrency !== $defaultCurrency) {
+                                    $total = CurrencyConverter::convertBalance($total, $activeCurrency, $defaultCurrency);
+                                }
+
+                                return CurrencyConverter::formatCentsToMoney($total, $defaultCurrency, true);
+                            }),
+                        Summarizer::make()
+                            ->using(fn () => $this->totalPaymentAmount)
+                            ->visible(function () {
+                                $activeCurrency = $this->getTableFilterState('currency_code')['value'] ?? null;
+                                $defaultCurrency = CurrencyAccessor::getDefaultCurrency();
+
+                                return $activeCurrency && $activeCurrency !== $defaultCurrency;
+                            }),
+                    ]),
             ])
             ->bulkActions([
                 Tables\Actions\BulkAction::make('setFullAmounts')
-                    ->label('Set Full Amounts')
+                    ->label('Set full amounts')
                     ->icon('heroicon-o-banknotes')
                     ->color('primary')
                     ->deselectRecordsAfterCompletion()
                         });
                     }),
                 Tables\Actions\BulkAction::make('clearAmounts')
-                    ->label('Clear Amounts')
+                    ->label('Clear amounts')
                     ->icon('heroicon-o-x-mark')
                     ->color('gray')
                     ->deselectRecordsAfterCompletion()
                     }),
             ])
             ->filters([
-                Tables\Filters\SelectFilter::make('currency')
+                Tables\Filters\SelectFilter::make('currency_code')
+                    ->label('Currency')
                     ->selectablePlaceholder(false)
                     ->default(CurrencyAccessor::getDefaultCurrency())
-                    ->relationship('currency', 'name')
+                    ->options(Currency::query()->pluck('name', 'code')->toArray())
                     ->searchable()
-                    ->preload(),
-                Tables\Filters\SelectFilter::make('vendor')
-                    ->relationship('vendor', 'name')
-                    ->searchable()
-                    ->preload(),
+                    ->resetState([
+                        'value' => CurrencyAccessor::getDefaultCurrency(),
+                    ])
+                    ->indicateUsing(function (Tables\Filters\SelectFilter $filter, array $state) {
+                        if (blank($state['value'] ?? null)) {
+                            return [];
+                        }
+
+                        $label = collect($filter->getOptions())
+                            ->mapWithKeys(fn (string | array $label, string $value): array => is_array($label) ? $label : [$value => $label])
+                            ->get($state['value']);
+
+                        if (blank($label)) {
+                            return [];
+                        }
+
+                        $indicator = $filter->getLabel();
+
+                        return Tables\Filters\Indicator::make("{$indicator}: {$label}")->removable(false);
+                    }),
+                Tables\Filters\SelectFilter::make('vendor_id')
+                    ->label('Vendor')
+                    ->options(fn () => Vendor::query()->pluck('name', 'id')->toArray())
+                    ->searchable(),
                 Tables\Filters\SelectFilter::make('status')
                     ->multiple()
                     ->options(BillStatus::getUnpaidOptions()),
-            ], layout: FiltersLayout::AboveContent)
-            ->defaultSort('due_date')
-            ->striped()
-            ->paginated(false);
+            ]);
     }
 
     protected function getPaymentAmount(Bill $record): int
     }
 
     #[Computed]
-    public function totalSelectedPaymentAmount(): string
+    public function totalPaymentAmount(): string
     {
         $total = array_sum($this->paymentAmounts);
 
-        $currencyCode = $this->getTableFilterState('currency')['value'];
+        $currencyCode = $this->getTableFilterState('currency_code')['value'];
+
+        return CurrencyConverter::formatCentsToMoney($total, $currencyCode, true);
+    }
+
+    public function getSelectedBankAccount(): BankAccount
+    {
+        $bankAccountId = $this->data['bank_account_id'];
+
+        $bankAccount = BankAccount::find($bankAccountId);
+
+        return $bankAccount ?: BankAccount::where('enabled', true)->first();
+    }
+
+    protected function handleTableFilterUpdates(): void
+    {
+        parent::handleTableFilterUpdates();
+
+        $visibleBillIds = $this->getTableRecords()->pluck('id')->toArray();
+        $visibleBillKeys = array_flip($visibleBillIds);
 
-        return CurrencyConverter::formatCentsToMoney($total, $currencyCode);
+        $this->paymentAmounts = array_intersect_key($this->paymentAmounts, $visibleBillKeys);
     }
 }

app/Filament/Tables/Columns/CustomTextInputColumn.php

+<?php
+
+namespace App\Filament\Tables\Columns;
+
+use Closure;
+use Filament\Tables\Columns\TextInputColumn;
+
+class CustomTextInputColumn extends TextInputColumn
+{
+    protected string $view = 'filament.tables.columns.custom-text-input-column';
+
+    protected bool | Closure $isDeferred = false;
+
+    protected bool | Closure $isNavigable = false;
+
+    public function deferred(bool | Closure $condition = true): static
+    {
+        $this->isDeferred = $condition;
+
+        return $this;
+    }
+
+    public function navigable(bool | Closure $condition = true): static
+    {
+        $this->isNavigable = $condition;
+
+        return $this;
+    }
+
+    public function isDeferred(): bool
+    {
+        return (bool) $this->evaluate($this->isDeferred);
+    }
+
+    public function isNavigable(): bool
+    {
+        return (bool) $this->evaluate($this->isNavigable);
+    }
+}

app/Filament/Tables/Columns/DeferredTextInputColumn.php

-<?php
-
-namespace App\Filament\Tables\Columns;
-
-use Closure;
-use Filament\Tables\Columns\TextInputColumn;
-
-class DeferredTextInputColumn extends TextInputColumn
-{
-    protected string $view = 'filament.tables.columns.deferred-text-input-column';
-
-    protected bool | Closure $batchMode = false;
-
-    public function batchMode(bool | Closure $condition = true): static
-    {
-        $this->batchMode = $condition;
-
-        return $this;
-    }
-
-    public function getBatchMode(): bool
-    {
-        return $this->evaluate($this->batchMode);
-    }
-}

resources/css/filament/company/theme.css

     z-index: -1;
 }
 
-.fi-ta-table:has(.budget-items-relation-manager) {
+.fi-ta-table:has(.is-spreadsheet) {
     .fi-ta-row {
         @apply divide-x divide-gray-200 dark:divide-gray-700;
     }
         }
     }
 
-    .fi-ta-cell:focus-within {
+    .fi-ta-cell:has(.fi-ta-text-input):focus-within {
         outline: 2px solid #2563eb;
         outline-offset: -2px;
         z-index: 1;

resources/views/filament/company/resources/purchases/bill-resource/pages/pay-bills.blade.php

-<x-filament-panels::page>
-    <div class="space-y-6">
-        <div class="bg-white rounded-lg border border-gray-200 p-6">
-            <div class="flex items-center justify-between mb-4">
+<x-filament-panels::page
+    @class([
+        'fi-resource-list-records-page',
+        'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
+    ])
+>
+    <div class="flex flex-col gap-y-6">
+        <x-filament::section>
+            <div class="flex items-center justify-between">
                 <div>
                     {{ $this->form }}
                 </div>
                 <div class="text-right">
-                    <div class="text-sm text-gray-500">Total Payment Amount</div>
-                    <div class="text-xl font-semibold text-gray-900" id="total-amount">{{ $this->totalSelectedPaymentAmount }}</div>
+                    <div class="text-sm uppercase text-gray-500 dark:text-gray-400">Total Payment Amount</div>
+                    <div class="text-3xl font-semibold text-gray-900 dark:text-white">{{ $this->totalPaymentAmount }}</div>
                 </div>
             </div>
-        </div>
+        </x-filament::section>
+
+        <x-filament-panels::resources.tabs />
+
+        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE, scopes: $this->getRenderHookScopes()) }}
 
         {{ $this->table }}
+
+        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER, scopes: $this->getRenderHookScopes()) }}
     </div>
 </x-filament-panels::page>

resources/views/filament/tables/columns/deferred-text-input-column.blade.php → resources/views/filament/tables/columns/custom-text-input-column.blade.php

     $isDisabled = $isDisabled();
     $state = $getState();
     $mask = $getMask();
-    $batchMode = $getBatchMode();
+    $isDeferred = $isDeferred();
+    $isNavigable = $isNavigable();
 
     $alignment = $getAlignment() ?? Alignment::Start;
 
         recordKey: @js($recordKey),
 
         state: @js($state),
+
+        navigateToRow(direction) {
+            const currentRow = $el.closest('tr');
+            const currentCell = $el.closest('td');
+            const currentColumnIndex = Array.from(currentRow.children).indexOf(currentCell);
+
+            const targetRow = direction === 'next'
+                ? currentRow.nextElementSibling
+                : currentRow.previousElementSibling;
+
+            if (targetRow && targetRow.children[currentColumnIndex]) {
+                const targetInput = targetRow.children[currentColumnIndex].querySelector('input[x-model=\'state\']');
+                if (targetInput) {
+                    targetInput.focus();
+                    targetInput.select();
+                }
+            }
+        },
+
+        navigateToColumn(direction) {
+            const currentCell = $el.closest('td');
+            const currentRow = $el.closest('tr');
+            const currentColumnIndex = Array.from(currentRow.children).indexOf(currentCell);
+
+            const targetCell = direction === 'next'
+                ? currentRow.children[currentColumnIndex + 1]
+                : currentRow.children[currentColumnIndex - 1];
+
+            if (targetCell) {
+                const targetInput = targetCell.querySelector('input[x-model=\'state\']');
+                if (targetInput) {
+                    targetInput.focus();
+                    targetInput.select();
+                }
+            }
+        }
     }"
     x-init="
         () => {
                 \Filament\Support\prepare_inherited_attributes(
                     $getExtraInputAttributeBag()
                         ->merge([
-                            'x-on:change' . ($type === 'number' ? '.debounce.1s' : null) => $batchMode ? '
+                            'x-on:change' . ($type === 'number' ? '.debounce.1s' : null) => $isDeferred ? '
                                 $wire.handleBatchColumnChanged({
                                     name: name,
                                     recordKey: recordKey,
 
                                 isLoading = false
                             ',
-                            'x-on:keydown.enter' => $batchMode ? '
+                            'x-on:keydown.enter' => $isDeferred ? '
                                 $wire.handleBatchColumnChanged({
                                     name: name,
                                     recordKey: recordKey,
                                 $nextTick(() => {
                                     $wire.saveBatchChanges();
                                 });
-                            ' : null,
+                            ' : ($isNavigable ? 'navigateToRow(\'next\')' : null),
+                            'x-on:keydown.arrow-down.prevent' => $isNavigable ? 'navigateToRow(\'next\')' : null,
+                            'x-on:keydown.arrow-up.prevent' => $isNavigable ? 'navigateToRow(\'prev\')' : null,
+                            'x-on:keydown.arrow-left.prevent' => $isNavigable ? 'navigateToColumn(\'prev\')' : null,
+                            'x-on:keydown.arrow-right.prevent' => $isNavigable ? 'navigateToColumn(\'next\')' : null,
                             'x-mask' . ($mask instanceof \Filament\Support\RawJs ? ':dynamic' : '') => filled($mask) ? $mask : null,
                         ])
                         ->class([