wip

app/Filament/Company/Pages/Reports/AccountBalances.php

@@ -71,10 +71,7 @@ class AccountBalances extends BaseReportPage
     {
         return $form
             ->inlineLabel()
-            ->columns([
-                'lg' => 1,
-                '2xl' => 2,
-            ])
+            ->columns()
             ->live()
             ->schema([
                 $this->getDateRangeFormComponent(),

app/Filament/Company/Pages/Reports/AccountTransactions.php

@@ -9,6 +9,7 @@ use App\Services\ExportService;
 use App\Services\ReportService;
 use App\Support\Column;
 use App\Transformers\AccountTransactionReportTransformer;
+use Filament\Forms\Components\Actions;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Form;
 use Filament\Support\Enums\Alignment;
@@ -65,7 +66,7 @@ class AccountTransactions extends BaseReportPage
     public function form(Form $form): Form
     {
         return $form
-            ->columns(3)
+            ->columns(4)
             ->live()
             ->schema([
                 Select::make('account_id')
@@ -78,6 +79,12 @@ class AccountTransactions extends BaseReportPage
                     $this->getStartDateFormComponent(),
                     $this->getEndDateFormComponent(),
                 ])->label("\u{200B}"), // its too bad hiddenLabel removes spacing of the label
+                Actions::make([
+                    Actions\Action::make('loadReportData')
+                        ->label('Update Report')
+                        ->submit('loadReportData')
+                        ->keyBindings(['mod+s']),
+                ])->alignEnd()->verticallyAlignEnd(),
             ]);
     }
 

resources/css/filament/company/theme.css

@@ -18,7 +18,15 @@
 }
 
 .choices[data-type="select-one"] .choices__inner {
-    height: 2.25rem;
+    line-height: 1.5;
+    display: flex;
+    align-items: center;
+    min-height: 2.25rem;
+    box-sizing: border-box;
+}
+
+.choices__item {
+    cursor: pointer;
 }
 
 .table-repeater-container {
@@ -135,7 +143,7 @@
 
 .fi-body::before {
     content: '';
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -159,7 +167,7 @@
 
 :is(.dark .fi-body)::before {
     content: '';
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     background-image: radial-gradient(

resources/views/filament/company/pages/reports/account-transactions.blade.php

@@ -1,37 +1,21 @@
 <x-filament-panels::page>
-    <div class="flex flex-col gap-y-6">
-        <x-filament-tables::container>
-            <div class="p-6 divide-y divide-gray-200 dark:divide-white/5">
-                <form wire:submit.prevent="loadReportData">
-                    <div class="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-4 lg:gap-12">
-                        {{ $this->form }}
-                        @if($this->hasToggleableColumns())
-                            <x-filament-tables::column-toggle.dropdown
-                                class="my-auto"
-                                :form="$this->toggleTableColumnForm"
-                                :trigger-action="$this->toggleColumnsAction"
-                            />
-                        @endif
-                        <x-filament::button type="submit" class="flex-shrink-0 mt-6">
-                            Update Report
-                        </x-filament::button>
-                    </div>
-                </form>
-            </div>
-            <div class="divide-y divide-gray-200 overflow-x-auto overflow-y-hidden dark:divide-white/10 dark:border-t-white/10">
-                <div wire:init="loadReportData" class="flex items-center justify-center">
-                    <div wire:loading.delay wire:target="loadReportData">
-                        <x-filament::loading-indicator class="p-6 text-primary-700 dark:text-primary-300" />
-                    </div>
+    <x-filament-tables::container>
+        <form wire:submit="loadReportData" class="p-6">
+            {{ $this->form }}
+        </form>
+        <div class="divide-y divide-gray-200 overflow-x-auto overflow-y-hidden dark:divide-white/10 dark:border-t-white/10">
+            <div wire:init="loadReportData" class="flex items-center justify-center">
+                <div wire:loading.delay wire:target="loadReportData">
+                    <x-filament::loading-indicator class="p-6 text-primary-700 dark:text-primary-300" />
                 </div>
+            </div>
 
-                <div wire:loading.remove wire:target="loadReportData">
-                    @if($this->report)
-                        <x-company.tables.reports.account-transactions :report="$this->report" />
-                    @endif
-                </div>
+            <div wire:loading.remove wire:target="loadReportData">
+                @if($this->report)
+                    <x-company.tables.reports.account-transactions :report="$this->report" />
+                @endif
             </div>
-            <div class="es-table__footer-ctn border-t border-gray-200"></div>
-        </x-filament-tables::container>
-    </div>
+        </div>
+        <div class="es-table__footer-ctn border-t border-gray-200"></div>
+    </x-filament-tables::container>
 </x-filament-panels::page>

resources/views/filament/company/pages/reports/detailed-report.blade.php

@@ -1,37 +1,34 @@
 <x-filament-panels::page>
-    <div class="flex flex-col gap-y-6">
-        <x-filament-tables::container>
-            <div class="p-6 divide-y divide-gray-200 dark:divide-white/5">
-                <form wire:submit.prevent="loadReportData">
-                    <div class="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-4 lg:gap-12">
-                        {{ $this->form }}
-                        @if($this->hasToggleableColumns())
-                            <x-filament-tables::column-toggle.dropdown
-                                class="my-auto"
-                                :form="$this->toggleTableColumnForm"
-                                :trigger-action="$this->toggleColumnsAction"
-                            />
-                        @endif
-                        <x-filament::button type="submit" class="flex-shrink-0">
-                            Update Report
-                        </x-filament::button>
-                    </div>
-                </form>
-            </div>
-            <div class="divide-y divide-gray-200 overflow-x-auto overflow-y-hidden dark:divide-white/10 dark:border-t-white/10">
-                <div wire:init="loadReportData" class="flex items-center justify-center">
-                    <div wire:loading.delay wire:target="loadReportData">
-                        <x-filament::loading-indicator class="p-6 text-primary-700 dark:text-primary-300" />
-                    </div>
-                </div>
-
-                <div wire:loading.remove wire:target="loadReportData">
-                    @if($this->report)
-                        <x-company.tables.reports.detailed-report :report="$this->report" />
+    <x-filament-tables::container>
+        <div class="p-6 divide-y divide-gray-200 dark:divide-white/5">
+            <form wire:submit="loadReportData">
+                <div class="flex flex-col md:flex-row items-start md:items-center justify-center gap-4 md:gap-12">
+                    {{ $this->form }}
+                    @if($this->hasToggleableColumns())
+                        <x-filament-tables::column-toggle.dropdown
+                            :form="$this->toggleTableColumnForm"
+                            :trigger-action="$this->toggleColumnsAction"
+                        />
                     @endif
+                    <x-filament::button type="submit" wire:target="loadReportData" class="flex-shrink-0">
+                        Update Report
+                    </x-filament::button>
                 </div>
+            </form>
+        </div>
+        <div class="divide-y divide-gray-200 overflow-x-auto overflow-y-hidden dark:divide-white/10 dark:border-t-white/10">
+            <div wire:init="loadReportData" class="flex items-center justify-center">
+                <div wire:loading.delay wire:target="loadReportData">
+                    <x-filament::loading-indicator class="p-6 text-primary-700 dark:text-primary-300" />
+                </div>
+            </div>
+
+            <div wire:loading.remove wire:target="loadReportData">
+                @if($this->report)
+                    <x-company.tables.reports.detailed-report :report="$this->report" />
+                @endif
             </div>
-            <div class="es-table__footer-ctn border-t border-gray-200"></div>
-        </x-filament-tables::container>
-    </div>
+        </div>
+        <div class="es-table__footer-ctn border-t border-gray-200"></div>
+    </x-filament-tables::container>
 </x-filament-panels::page>

resources/views/vendor/filament-clusters/cluster.blade.php

@@ -0,0 +1,24 @@
+<x-dynamic-component
+    :component="$getFieldWrapperView()"
+    :field="$field"
+>
+    <x-filament::input.wrapper
+        @class([
+            "guava-fi-cl-cluster",
+            ...$field->getResponsiveClasses(),
+        ])
+    >
+        {{ $getChildComponentContainer() }}
+    </x-filament::input.wrapper>
+
+
+    @foreach($field->getChildComponents() as $child)
+        @if ($childStatePath = $child->getStatePath())
+            @if($errors->has($childStatePath) )
+                <x-filament-forms::field-wrapper.error-message>
+                    {{ $errors->first($childStatePath) }}
+                </x-filament-forms::field-wrapper.error-message>
+            @endif
+        @endif
+    @endforeach
+</x-dynamic-component>

resources/views/vendor/filament-clusters/components/field-wrapper.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{ $slot }}
+</div>