Filament custom list Page

To achieve the desired layout in your Filament project, you can follow these steps:

1. Create a Custom Page for Categories: First, you'll need to create a custom page in Filament to display the grid of categories. You can use Filament's page resource to create a custom page.

2. Display Categories in a Grid: On this custom page, you can use a grid layout to display each category as a col-3 box. You can achieve this using Blade components or a custom view.

3. Handle Category Clicks: When a user clicks on a category, you can redirect them to a standard Filament resource list view that is filtered by the selected category.

4. Filter Habits by Category: In the Filament resource for habits, you can use query string filters to filter habits by the selected category.

Here's a basic implementation outline:

Step 1: Create a Custom Page for Categories

Create a new Filament page using the command:

php artisan make:filament-page CategoryGrid

Step 2: Implement the Category Grid

In the CategoryGrid page, you can use a Blade view to display the categories. Here's an example of how you might structure the Blade view:

<x-filament::page>
    <div class="grid grid-cols-3 gap-4">
        @foreach($categories as $category)
            <div class="col-span-1 border p-4">
                <img src="{{ $category->image_url }}" alt="{{ $category->name }}" class="w-full h-32 object-cover">
                <h3 class="text-lg font-bold mt-2">{{ $category->name }}</h3>
                <a href="{{ route('filament.resources.habits.index', ['category' => $category->id]) }}" class="text-blue-500">View Habits</a>
            </div>
        @endforeach
    </div>
</x-filament::page>

Step 3: Pass Categories to the View

In the CategoryGrid page class, pass the categories to the view:

use Filament\Pages\Page;
use App\Models\Category;

class CategoryGrid extends Page
{
    protected static string $view = 'filament.pages.category-grid';

    public function mount()
    {
        $this->categories = Category::all();
    }
}

Step 4: Filter Habits by Category

In your HabitResource, you can add a query string filter to filter habits by category:

use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
use App\Models\Habit;

class HabitResource extends Resource
{
    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                // Define your columns here
            ])
            ->filters([
                Tables\Filters\SelectFilter::make('category')
                    ->options(Category::all()->pluck('name', 'id'))
                    ->query(function ($query, $value) {
                        return $query->where('category_id', $value);
                    }),
            ]);
    }
}

Step 5: Route Configuration

Ensure your routes are correctly set up to handle the redirection from the category grid to the filtered habits list.

By following these steps, you should be able to create a custom list page in Filament that displays categories in a grid and allows users to view habits filtered by category.