Sub pages using the Tabs component

[oliverbj]

Package

Panel builder

Package Version

v3

How can we help you?

Hi.

I have a custom page, which I've created called "CompanyOverview". It's a simple page, with a blade view like so:

<x-filament-panels::page>
    <div class="flex flex-col gap-4" x-data="{ tab: 'shipments' }">
        <x-filament::tabs label="Content tabs">
            <x-filament::tabs.item @click="tab = 'shipments'" :alpine-active="'tab === \'shipments\''">
                Shipments
            </x-filament::tabs.item>
            <x-filament::tabs.item @click="tab = 'summary'" :alpine-active="'tab === \'summary\''">
                Summary
            </x-filament::tabs.item>

        </x-filament::tabs>    

        <div>
            <div x-show="tab === 'shipments'" x-cloak>
                <livewire:intercompany.table-shipment :filters="$filters" />
            </div>
            <div x-show="tab === 'summary'" x-cloak>
                
            </div>

        </div>
        
    </div>
</x-filament-panels::page>

As you can see, on this page, I simply include a Livewire component in my first tab. This component just renders a standard Filament table:

//table-shipments.blade.php
<div>
    {{ $this->table }}
</div>

Now, I want to add some other content under the Summary tab. Under here, I would like to render a lot of different widgets (it's basically an analytics page). So, I was thinking that it would be nice to be able to utilize just another custom page (or dashboard even), so I could just add the widgets using the getHeaderWidgets() method, and don't worry about the Blade / HTML part.

I have tried to create a custom page CompanySummary.php:

use Filament\Pages\Page;

class CompanySummary extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.app.pages.company-summary';

    protected function getHeaderWidgets(): array
    {
        return [
           //I will place my widgets here.
        ];
    }

}

<div x-show="tab === 'summary'" x-cloak>
    @include('filament.app.pages.company-summary')
</div>

It renders the new page, however, it includes it as a new page within my existing page (e.g., two titles and filter actions) - where I essentially, would also like to use my original page filters'.

Is this possible?