KTV/app/Livewire/Tables/RoomStatusLogTable.php

<?php

namespace App\Livewire\Tables;

use App\Models\RoomStatusLog;
use Illuminate\Support\Carbon;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;

final class RoomStatusLogTable extends PowerGridComponent
{
    public string $tableName = 'room-status-log-table';

    public bool $showFilters = false;
    public function boot(): void
    {
        config(['livewire-powergrid.filter' => 'outside']);
    }

    public function setUp(): array
    {
        $actions = [];
        $header = PowerGrid::header()
            ->withoutLoading()
            ->showToggleColumns();
        $header->includeViewOnTop('livewire.headers.room-status-log');
            
        $actions[]=$header;
        $actions[]=PowerGrid::footer()->showPerPage()->showRecordCount();     
        return $actions;
    }

    public function datasource(): Builder
    {
        return RoomStatusLog::with(['room', 'branch'])->latest();
    }

    public function relationSearch(): array
    {
        return [
            'branch' => ['name'],
            'room'   => ['name'],
            'user'   => ['name'],
        ];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('id')
            ->add('branch_name', function (RoomStatusLog $model) {
                return $model->branch?->name;
            })
            ->add('room_name', function (RoomStatusLog $model) {
                return $model->room?->type->labelPowergridFilter().$model->room?->name;
            })
            ->add('user_name', function (RoomStatusLog $model){
                return $model->user?->name;
            })
            ->add('is_online_img', fn ($model) => 
                [
                    $model->is_online ? 'check-circle' : 'x-circle' => [
                        'text-color' => $model->is_online ? 'text-green-600' : 'text-red-600',
                    ],
                ])
            ->add('status_str',function (RoomStatusLog $model){
                return $model->status->labelPowergridFilter();
            })
            ->add('started_at')
            ->add('ended_at')
            ->add('message')
            ->add('source')
            ->add('created_at');
    }

    public function columns(): array
    {
        $column=[];
        $column[]=Column::make(__('room-status-log.id'), 'id');
        $column[]=Column::make(__('room-status-log.branch'), 'branch_name');
        $column[]=Column::make(__('room-status-log.room'), 'room_name');
        $column[]=Column::make(__('room-status-log.user'), 'user_name');
        $column[]=Column::make(__('room-status-log.is_online'), 'is_online_img')->template();
        $column[]=Column::make(__('room-status-log.status'), 'status_str');
        $column[]=Column::make(__('room-status-log.started_at'), 'started_at');
        $column[]=Column::make(__('room-status-log.ended_at'), 'ended_at');
        $column[]=Column::make(__('room-status-log.message'), 'message');
        $column[]=Column::make(__('room-status-log.source'), 'source');
        $column[]=Column::make(__('room-status-log.created_at'), 'created_at');
        return $column;
    }
    public function rowTemplates(): array
    {
        return [
            'check-circle' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 {{ text-color }}">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>',
            'x-circle' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 {{ text-color }}">
                <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>',
        ];
    }

    public function filters(): array
    {
        return [
            
        ];
    }
}