singleloginsystem/resources/views/components/dashboard/users/⚡assignments.blade.php

<?php

use App\Data\Ui\TableHeader;
use App\Data\Users\UserData;
use App\Data\Ui\ManageRoles\RoleData;
use App\Data\Ui\ManageRoles\ServiceData;
use App\Enums\RolesStatusEnum;
use Livewire\Component;
use Spatie\LaravelData\Attributes\DataCollectionOf;
use Spatie\LaravelData\DataCollection;

new class extends Component {
    /** @var DataCollection<int, TableHeader> */
    #[DataCollectionOf(TableHeader::class)]
    public DataCollection $header;

    /** @var DataCollection<int, UserData>|null */
    #[DataCollectionOf(UserData::class)]
    public ?DataCollection $users = null;

    public function mount(): void
    {
        $this->header = TableHeader::collect([
            new TableHeader('name', 'User'),
            new TableHeader('role.name', 'Role'),
            new TableHeader('role.service', 'Service Access'),
            new TableHeader('status', 'Status'),
        ], DataCollection::class);

        $this->users = UserData::collect([
            new UserData(
                name: 'Priya Rao',
                email: 'priya@example.com',
                active: true,
                roles: RoleData::collect([
                    new RoleData(
                        name: 'Super Admin',
                        users: UserData::collect([], DataCollection::class),
                        services: ServiceData::collect([
                            new ServiceData(name: 'AWS Core'),
                            new ServiceData(name: 'GitHub Enterprise'),
                        ], DataCollection::class),
                        status: RolesStatusEnum::Active,
                    ),
                    new RoleData(
                        name: 'HR Manager',
                        users: UserData::collect([], DataCollection::class),
                        services: ServiceData::collect([
                            new ServiceData(name: 'Keka'),
                            new ServiceData(name: 'Outlook'),
                        ], DataCollection::class),
                        status: RolesStatusEnum::Active,
                    )
                ], DataCollection::class)
            ),

            new UserData(
                name: 'Kushal Saha',
                email: 'kushal@example.com',
                active: true,
                roles: RoleData::collect([
                    new RoleData(
                        name: 'Backend Developer',
                        users: UserData::collect([], DataCollection::class),
                        services: ServiceData::collect([
                            new ServiceData(name: 'Forge'),
                        ], DataCollection::class),
                        status: RolesStatusEnum::Active,
                    )
                ], DataCollection::class)
            ),

            new UserData(
                name: 'Alex Johnson',
                email: 'alex@example.com',
                active: false,
                roles: RoleData::collect([
                    new RoleData(
                        name: 'Guest Viewer',
                        users: UserData::collect([], DataCollection::class),
                        services: ServiceData::collect([
                            new ServiceData(name: 'Analytics Dashboard'),
                        ], DataCollection::class),
                        status: RolesStatusEnum::Active,
                    )
                ], DataCollection::class)
            )
        ], DataCollection::class);
    }
};
?>

<div>
    <x-shared.card title="User Assignments" icon="lucide-users" class="p-0">
        <x-slot:actions>
            <x-shared.button icon="lucide-plus">
                {{ __('Assign user') }}
            </x-shared.button>
        </x-slot:actions>

        <x-mary-table :headers="$header->toArray()" :rows="$users->items()">
            @scope('cell_name', $row)
            <x-shared.avatar :placeholder="$row->name" :title="$row->name" :subtitle="$row->email"/>
            @endscope
            @scope('cell_role.name', $row)
            <div class="flex space-x-2">
                @foreach ($row->roles as $role)
                    <x-shared.badge>
                        {{$role->name}}
                    </x-shared.badge>
                @endforeach
            </div>
            @endscope

            @scope('cell_role.service', $row)
            <div class="flex space-x-2 text-sm">
                @foreach ($row->roles as $role)
                    @foreach($role->services as $service)
                        {{$service->name}},
                    @endforeach
                @endforeach
            </div>
            @endscope

            @scope('cell_status', $row)
            @if($row->active)
                <x-shared.badge class="bg-lime-200 text-lime-800 font-bold">Active</x-shared.badge>
            @else
                <x-shared.badge class="bg-orange-200 text-orange-800 font-bold">Not Active</x-shared.badge>
            @endif
            @endscope

            @scope('actions', $row)
            <x-shared.button icon="lucide-square-pen"/>
            @endscope
        </x-mary-table>
    </x-shared.card>
</div>