調整包廂控制頁

新增包廂設定頁刪除分店頁面 20250611
2025-06-11 17:37:31 +08:00 · 2025-06-11 17:37:31 +08:00 · 751c65bccf
commit 751c65bccf
parent 5f5da47396
19 changed files with 365 additions and 164 deletions
--- a/app/Enums/RoomType.php
+++ b/app/Enums/RoomType.php
@ -23,7 +23,7 @@ enum RoomType: string {
    public function labels(): string
    {
        return match($this) {
-            self::Unset => __('enums.room.status.Unset'),
+            self::Unset => __('enums.Unset'),
            self::PC => "PC",
            self::SVR => "SVR",
        };
--- a/app/Livewire/Forms/BranchTable.php
+++ b/app/Livewire/Forms/BranchTable.php
@ -1,89 +0,0 @@
-<?php
-
-namespace App\Livewire\Forms;
-
-use App\Models\Branch;
-use App\Jobs\ExportSqliteBranchJob;
-use Illuminate\Support\Carbon;
-use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Blade;
-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;
-use PowerComponents\LivewirePowerGrid\Traits\WithExport; 
-use PowerComponents\LivewirePowerGrid\Components\SetUp\Exportable; 
-use PowerComponents\LivewirePowerGrid\Facades\Rule;
-use Livewire\Attributes\On;
-use WireUi\Traits\WireUiActions;
-
-final class BranchTable extends PowerGridComponent
-{
-    use WithExport, WireUiActions;
-    public string $tableName = 'branch-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.header.admin.branch') ;
-        
-        $actions[]=$header;
-        $actions[]=PowerGrid::footer()->showPerPage()->showRecordCount();
-        return $actions;
-    }
-
-    public function datasource(): Builder
-    {
-        return Branch::query();
-    }
-
-    public function relationSearch(): array
-    {
-        return [];
-    }
-
-    public function fields(): PowerGridFields
-    {
-        return PowerGrid::fields()
-            ->add('id')
-            ->add('name')
-            ->add('external_ip')
-            ->add('enable')
-            ->add('created_at_formatted', fn (Branch $model) => Carbon::parse($model->created_at)->format('d/m/Y H:i:s'));
-    }
-
-    public function columns(): array
-    {
-        $column=[];
-        $column[]=Column::make(__('branches.no'), 'id');
-        $column[]=Column::make(__('branches.name'), 'name')->sortable()->searchable();
-        $column[]=Column::make(__('branches.external_ip'), 'external_ip')->sortable()->searchable();
-        $column[]=Column::make(__('branches.enable'), 'enable');
-        $column[]=Column::make('Created at', 'created_at_formatted', 'created_at')->sortable()->hidden(true, false);
-        return $column;
-    }
-    
-    public function filters(): array
-    {
-        return [
-            Filter::inputText('name')->placeholder(__('branches.name')),
-            Filter::inputText('external_ip')->placeholder(__('branches.external_ip')),
-            Filter::boolean('enable')->label('✅', '❌'),
-            Filter::datetimepicker('created_at'),
-        ];
-    }
-}
--- a/app/Livewire/Forms/Modals/RoomDetailModal.php
+++ b/app/Livewire/Forms/Modals/RoomDetailModal.php
@ -1,6 +1,6 @@
 <?php

-namespace App\Livewire\Admin;
+namespace App\Livewire\Forms\Modals;

 use App\Models\Room;
 use App\Models\Branch;
@ -113,6 +113,6 @@ class RoomDetailModal extends Component
    
    public function render()
    {
-        return view('livewire.admin.room-detail-modal');
+        return view('livewire.forms.modals.room-detail-modal');
    }
 }
--- a/app/Livewire/Forms/RoomForm.php
+++ b/app/Livewire/Forms/RoomForm.php
@ -0,0 +1,125 @@
+<?php
+
+namespace App\Livewire\Forms;
+
+use Illuminate\Validation\Rule;
+use Illuminate\Support\Facades\Auth;
+
+use Livewire\Component;
+use WireUi\Traits\WireUiActions;
+
+use App\Models\Room;
+use App\Enums\RoomType;
+
+class RoomForm extends Component
+{
+    use WireUiActions;
+    
+    protected $listeners = ['openModal','closeModal', 'deleteRoom'];
+
+    public bool $canCreate;
+    public bool $canEdit;
+    public bool $canDelect;
+
+    public bool $showModal = false;
+    public ?int $roomId = null;
+
+    public array $typeOptions =[];
+    
+    public array $fields = [
+        'floor' =>'',
+        'type' =>'',
+        'name' =>''
+    ];
+    
+
+    public function mount()
+    {
+        $this->typeOptions = collect(RoomType::cases())->map(fn ($type) => [
+            'name' => $type->labels(),
+            'value' => $type->value,
+        ])->toArray();
+        $this->canCreate = Auth::user()?->can('room-edit') ?? false;
+        $this->canEdit = Auth::user()?->can('room-edit') ?? false;
+        $this->canDelect = Auth::user()?->can('room-delete') ?? false;
+    }
+
+    public function openModal($id = null)
+    {
+        $this->resetFields();
+
+        if ($id) {
+            $room = Room::findOrFail($id);
+            $this->roomId = $room->id;
+            $this->fields = $room->only(array_keys($this->fields));
+        }
+    
+        $this->showModal = true;
+    }
+
+    public function closeModal()
+    {
+        $this->resetFields();
+        $this->showModal = false;
+    }
+    
+    public function save()
+    {
+        $description ="無權修改";
+        if ($this->roomId) {
+            if ($this->canEdit) {
+                $room = Room::findOrFail($this->roomId);
+                $room->update($this->fields);
+                $description='分店已更新';
+            }
+        } else {
+            if ($this->canCreate) {
+                $room = Room::create([
+                    'floor' => $this->fields['floor'],
+                    'type' => $this->fields['type'],
+                    'name' => $this->fields['name'],
+                ]);
+                $description='分店已新增';
+            }
+        }
+        $this->notification()->send([
+            'icon' => 'success',
+            'title' => '成功',
+            'description' => $description,
+        ]);
+        $this->resetFields();
+        $this->showModal = false;
+        $this->dispatch('pg:eventRefresh-room-table');
+    }
+    
+    public function deleteBranch($id)
+    {
+        if ($this->canDelect) {
+            Room::findOrFail($id)->delete();
+            $this->notification()->send([
+                'icon' => 'success',
+                'title' => '成功',
+                'description' => '分店已刪除',
+            ]);
+            
+            $this->dispatch('pg:eventRefresh-room-table');
+        }
+    }
+
+    public function resetFields()
+    {
+        foreach ($this->fields as $key => $value) {
+            if ($key == 'enable') {
+                $this->fields[$key] = true;
+            } else {
+                $this->fields[$key] = '';
+            }
+        }
+        $this->branchId = null;
+    }
+
+    public function render()
+    {
+        return view('livewire.forms.room-form');
+    }
+}
--- a/app/Livewire/Forms/RoomGridForm.php
+++ b/app/Livewire/Forms/RoomGridForm.php
@ -1,6 +1,6 @@
 <?php

-namespace App\Livewire\Admin;
+namespace App\Livewire\Forms;

 use App\Models\Room;
 use App\Models\Branch;
@ -11,7 +11,7 @@ use Illuminate\Database\Eloquent\Collection;



-class RoomGrid extends Component
+class RoomGridForm extends Component
 {
    public $branchName="";
    public array $roomTypes;
@ -34,8 +34,8 @@ class RoomGrid extends Component
            $rooms = Room::where('branch_id', $branch->id)->get();
            $floors = $rooms->pluck('floor')->unique()->sort()->values()->toArray();
        }
-
-        return view('livewire.admin.room-grid', [
+        
+        return view('livewire.forms.room-grid-form', [
            'rooms' => $rooms,
            'floors' => $floors,
        ]);
--- a/app/Livewire/Forms/RoomTable.php
+++ b/app/Livewire/Forms/RoomTable.php
@ -3,7 +3,10 @@
 namespace App\Livewire\Forms;

 use App\Models\Room;
-use Illuminate\Support\Carbon;
+use App\Enums\RoomType;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Database\Eloquent\Builder;
 use PowerComponents\LivewirePowerGrid\Button;
 use PowerComponents\LivewirePowerGrid\Column;
@ -11,29 +14,63 @@ use PowerComponents\LivewirePowerGrid\Facades\Filter;
 use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
 use PowerComponents\LivewirePowerGrid\PowerGridFields;
 use PowerComponents\LivewirePowerGrid\PowerGridComponent;
+use PowerComponents\LivewirePowerGrid\Traits\WithExport; 
+use PowerComponents\LivewirePowerGrid\Components\SetUp\Exportable; 
+use Livewire\Attributes\On;
+use WireUi\Traits\WireUiActions;

 final class RoomTable extends PowerGridComponent
 {
+    use WithExport, WireUiActions;
    public string $tableName = 'room-table';
+    public bool $canCreate;
+    public bool $canEdit;
+    public bool $canDownload;
+    public bool $canDelect;

    public bool $showFilters = false;
    public function boot(): void
    {
        config(['livewire-powergrid.filter' => 'outside']);
+        //權限設定
+        $this->canCreate = Auth::user()?->can('room-edit') ?? false;
+        $this->canEdit = Auth::user()?->can('room-edit') ?? false;
+        $this->canDownload=Auth::user()?->can('room-delete') ?? false;
+        $this->canDelect = Auth::user()?->can('room-delete') ?? false;
    }

    public function setUp(): array
    {
+        if($this->canDownload || $this->canDelect){
+            $this->showCheckBox();
+        }
        $actions = [];
+        if($this->canDownload){
+            $actions[]=PowerGrid::exportable(fileName: $this->tableName.'-file') 
+                ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV);
+        }
        $header = PowerGrid::header()
            ->withoutLoading()
            ->showToggleColumns();
-        $header->includeViewOnTop('livewire.header.admin.room');
-            
+        if($this->canCreate){
+            $header->includeViewOnTop('livewire.header.admin.room');
+        }  
        $actions[]=$header;
        $actions[]=PowerGrid::footer()->showPerPage()->showRecordCount();     
        return $actions;
    }
+    public function header(): array
+    {
+        $actions = [];
+        if ($this->canDelect) {
+            $actions[]=Button::add('bulk-delete')
+                ->slot('Bulk delete (<span x-text="window.pgBulkActions.count(\'' . $this->tableName . '\')"></span>)')
+                ->icon('solid-trash',['id' => 'my-custom-icon-id', 'class' => 'font-bold'])
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatch('bulkDelete.' . $this->tableName, []);
+        }
+        return $actions;
+    } 

    public function datasource(): Builder
    {
@ -50,50 +87,58 @@ final class RoomTable extends PowerGridComponent
        return PowerGrid::fields()
            ->add('id')
            ->add('floor')
-            ->add('room_name',function (Room $model){
-                return $model->type->labelPowergridFilter().$model->name;
+            ->add('type_str',function(Room $model){
+                if ($this->canEdit) {
+                    return Blade::render(
+                        '<x-select-category type="occurrence" :options=$options  :modelId=$modelId :fieldName=$fieldName :selected=$selected/>', 
+                        [
+                            'options' => RoomType::options(), 
+                            'modelId' => intval($model->id),
+                            'fieldName'=>'type', 
+                            'selected' => $model->type->value
+                        ]
+                    );
+                }
+                return $model->type->labelPowergridFilter();
            })
-            ->add('is_online')
+            ->add('name')
+            ->add('internal_ip')
+            ->add('is_online', fn ($model) => $model->is_online===true ? '在線' : '斷線')
            ->add('status_str',function (Room $model){
                return $model->status->labelPowergridFilter();
            })
-            ->add('started_at_formatted', fn (Room $model) => Carbon::parse($model->started_at)->format('Y/m/d H:i:s'))
-            ->add('ended_at_formatted', fn (Room $model) => Carbon::parse($model->ended_at)->format('Y/m/d H:i:s'))
+            ->add('str_started_at', fn (Room $model) => $model->str_started_at())
+            ->add('str_ended_at', fn (Room $model) => $model->str_ended_at())
            ->add('created_at');
    }

    public function columns(): array
    {
-        return [
-            Column::make('Id', 'id'),
-            Column::make('Floor', 'floor')
-                ->sortable()
-                ->searchable(),
+        $column=[];
+        $column[]=Column::make(__('rooms.id'), 'id');
+        $column[]=Column::make(__('rooms.floor'), 'floor')->sortable()->searchable()->editOnClick(
+                hasPermission: $this->canEdit,
+                dataField: 'floor',
+                fallback: 'N/A',
+                saveOnMouseOut: true
+            );
+        $column[]=Column::make(__('rooms.type'), 'type_str','room.type')->sortable()->searchable();
+        $column[]=Column::make(__('rooms.name'), 'name')->sortable()->searchable()
+            ->editOnClick(
+                hasPermission: $this->canEdit,
+                dataField: 'name',
+                fallback: 'N/A',
+                saveOnMouseOut: true
+            );
+        $column[]=Column::make(__('rooms.isOnline'), 'internal_ip');
+        $column[]=Column::make(__('rooms.isOnline'), 'is_online');
+        $column[]=Column::make(__('rooms.status'), 'status_str','room.status')->sortable()->searchable()->hidden(true, false);
+        $column[]=Column::make(__('rooms.started_at'), 'str_started_at', 'started_at')->sortable()->hidden(true, false);
+        $column[]=Column::make(__('rooms.ended_at'), 'str_ended_at', 'ended_at')->sortable()->hidden(true, false);
+        $column[]=Column::make(__('rooms.created_at'), 'created_at')->sortable()->searchable();
+        $column[]=Column::action('Action');

-            Column::make('Name', 'room_name')
-                ->sortable()
-                ->searchable(),
-
-            Column::make('Is online', 'is_online')
-                ->sortable()
-                ->searchable(),
-
-            Column::make('Status', 'status_str')
-                ->sortable()
-                ->searchable(),
-
-            Column::make('Started at', 'started_at_formatted', 'started_at')
-                ->sortable(),
-
-            Column::make('Ended at', 'ended_at_formatted', 'ended_at')
-                ->sortable(),
-
-            Column::make('Created at', 'created_at')
-                ->sortable()
-                ->searchable(),
-
-            Column::action('Action')
-        ];
+        return $column;
    }

    public function filters(): array
@ -101,24 +146,87 @@ final class RoomTable extends PowerGridComponent
        return [
            Filter::datetimepicker('started_at'),
            Filter::datetimepicker('ended_at'),
+            Filter::boolean('is_online')
+                ->label('在線', '斷線'),
        ];
    }

-    #[\Livewire\Attributes\On('edit')]
-    public function edit($rowId): void
+    #[On('bulkDelete.{tableName}')]
+    public function bulkDelete(): void
    {
-        $this->js('alert('.$rowId.')');
+        if ($this->canDelect) {
+            $this->js('alert(window.pgBulkActions.get(\'' . $this->tableName . '\'))');
+            if($this->checkboxValues){
+                Branch::destroy($this->checkboxValues);
+                $this->js('window.pgBulkActions.clearAll()'); // clear the count on the interface.
+            }
+        }
+    } 
+    #[On('categoryChanged')]
+    public function categoryChanged($value,$fieldName, $modelId): void
+    {
+        if ($fieldName == 'type' && $this->canEdit) {
+            $this->noUpdated($modelId,$fieldName,$value);
+        }
+    }
+    #[On('onUpdatedEditable')]
+    public function onUpdatedEditable($id, $field, $value): void
+    {
+        if($field === 'floor' && $this->canEdit){
+            if (!is_numeric($value)) {
+                $this->notification()->send([
+                    'icon' => 'error',
+                    'title' => '無效輸入',
+                    'description' => '樓層必須是數字',
+                ]);
+                return;
+            }
+            $this->noUpdated($id,$field,$value);
+        }else if ($field === 'name' && $this->canEdit) {
+            $this->noUpdated($id,$field,$value);
+        }
+    }
+    
+    private function noUpdated($id,$field,$value){
+        dd($id,$field,$value);
+        $room = Room::find($id);
+        if ($room) {
+            $room->{$field} = $value;
+            $room->save(); // 明確觸發 saving
+        }
+        $this->notification()->send([
+            'icon' => 'success',
+            'title' => $id.'.'.__('room.'.$field).':'.$value,
+            'description' => '已經寫入',
+        ]);
    }

    public function actions(Room $row): array
    {
-        return [
-            Button::add('edit')
-                ->slot('Edit: '.$row->id)
-                ->id()
-                ->class('pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700')
-                ->dispatch('edit', ['rowId' => $row->id])
-        ];
+        $actions = [];
+        
+        if ($this->canEdit) {
+            $actions[] =Button::add('edit')
+                ->slot(__('rooms.edit'))
+                ->icon('solid-pencil-square')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('forms.room-form', 'openModal', ['id' => $row->id]);
+        }
+        if($this->canDelect){
+            $actions[] =Button::add('delete')
+                ->slot(__('rooms.delete'))
+                ->icon('solid-trash')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('forms.room-form', 'deleteRoom', ['id' => $row->id]);
+        }
+        if ($row->type->value === 'pc') {
+            $actions[] = Button::add('room-settings')
+                ->slot('包廂設定')
+                ->icon('solid-cog')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('forms.modals.room-detail-modal', 'openModal', ['roomId' => $row->id]);
+        }
+        return $actions;
    }

    /*
--- a/app/Models/Room.php
+++ b/app/Models/Room.php
@ -2,6 +2,7 @@

 namespace App\Models;

+use Illuminate\Support\Carbon;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use App\Traits\LogsModelActivity;
@ -38,10 +39,10 @@ class Room extends Model
        'ended_at',
    ];

-    protected $hidden = [
-        'internal_ip',
-        'port',
-    ];
+    //protected $hidden = [
+    //    'internal_ip',
+    //    'port',
+    //];

    protected $casts = [
        'floor' => 'int',
@ -59,7 +60,7 @@ class Room extends Model
    public function str_started_at(){
        $str ="Not Set";
        if($this->started_at !=null){
-            $str = $this->started_at;
+            Carbon::parse($this->started_at)->format('Y/m/d H:i:s');
        }
        return $str;
    }
@ -67,7 +68,7 @@ class Room extends Model
    public function str_ended_at(){
        $str ="Not Set";
        if($this->ended_at !=null){
-            $str = $this->ended_at;
+            Carbon::parse($this->ended_at)->format('Y/m/d H:i:s');
        }
        return $str;
    }
--- a/resources/lang/zh-tw/enums.php
+++ b/resources/lang/zh-tw/enums.php
@ -1,6 +1,7 @@
 <?php

 return [
+    'Unset' => '未定義',
    'user.gender.Male' =>'男',
    'user.gender.Female' =>'女',
    'user.gender.Other' =>'其他',
--- a/resources/lang/zh-tw/room.php
+++ b/resources/lang/zh-tw/room.php
@ -1,7 +0,0 @@
-<?php
-
-return [
-    'active' => '正常',
-    'error' => '維修',
-    
-];
--- a/resources/lang/zh-tw/rooms.php
+++ b/resources/lang/zh-tw/rooms.php
@ -0,0 +1,29 @@
+<?php
+
+return [
+    'list' => '包廂列表',
+    'CreateNew' => '新增包廂',
+    'EditRoom' => '編輯包廂',
+    'create' => '新增',
+    'edit' => '編輯',
+    'delete' => '刪除',
+
+    'id' =>'編號',
+    'floor' =>'樓層',
+    'type' =>'型別',
+    'name' =>'名稱',
+    'isOnline' =>'在線',
+    'status' =>'狀態',
+    'started_at' =>'開始於',
+    'ended_at' =>'結束於',
+    'created_at' =>'建立於',
+    'active' => '正常',
+    'error' => '維修',
+
+    'select_type' =>'選擇型別',
+    
+    'actions' => '操作',
+    'view' => '查看',
+    'submit' => '提交',
+    'cancel' => '取消',
+];
--- a/resources/views/components/room-card-svr.blade.php
+++ b/resources/views/components/room-card-svr.blade.php
@ -8,6 +8,6 @@
        
    </div>
    <div class="text-sm text-{{ $room->is_online ?  'green-600': 'red-600' }} text-center">
-        {{ $room->is_online ? __('room.active') : __('room.error') }}
+        {{ $room->is_online ? __('rooms.active') : __('rooms.error') }}
    </div>
 </div>
--- a/resources/views/components/room-card.blade.php
+++ b/resources/views/components/room-card.blade.php
@ -8,7 +8,7 @@
@endphp

 <div class="border p-2 rounded shadow-md h-32 relative cursor-pointer bg-amber-50"
-     wire:click="$dispatchTo('admin.room-detail-modal','openModal', { roomId: {{ $room->id }} })">
+     wire:click="$dispatchTo('forms.modals.room-detail-modal','openModal', { roomId: {{ $room->id }} })">
    {{-- 房間名稱 + 線上狀態圓點 --}}
    <div class="font-bold flex items-center gap-1">
        <span class="w-2.5 h-2.5 rounded-full inline-block 
@ -19,7 +19,7 @@
    </div>
    @if(!$room->is_online)
        <div class="text-sm text-red-600 text-center">
-            {{ __('room.error') }}
+            {{ __('rooms.error') }}
        </div>
    @else
        <div class="text-sm text-{{ $statusColors[$room->status->value] ?? 'gray-500' }} text-center">
--- a/resources/views/livewire/admin/room-grids.blade.php
+++ b/resources/views/livewire/admin/room-grids.blade.php
@ -1,4 +1,4 @@

 <x-layouts.admin>
-    <livewire:admin.room-grid />
+    <livewire:forms.room-grid-form />
 </x-layouts.admin>
--- a/resources/views/livewire/admin/rooms.blade.php
+++ b/resources/views/livewire/admin/rooms.blade.php
@ -1,4 +1,7 @@

 <x-layouts.admin>
+    <x-wireui:notifications/>
    <livewire:forms.room-table/>
+    <livewire:forms.room-form />
+    <livewire:forms.modals.room-detail-modal />
 </x-layouts.admin>
--- a/resources/views/livewire/forms/modals/room-detail-modal.blade.php
+++ b/resources/views/livewire/forms/modals/room-detail-modal.blade.php
--- a/resources/views/livewire/forms/room-form.blade.php
+++ b/resources/views/livewire/forms/room-form.blade.php
@ -0,0 +1,21 @@
+<x-wireui:modal-card title="{{ $roomId ? __('rooms.EditRoom') : __('rooms.CreateNew') }}" blur wire:model.defer="showModal">
+    <div class="space-y-4">
+        <x-wireui:input type="number" label="{{__('rooms.floor')}}" wire:model.defer="fields.floor" />
+        <x-wireui:select
+            label="{{__('rooms.type')}}"
+            wire:model.defer="fields.type"
+            placeholder="{{__('rooms.select_type')}}"
+            :options="$typeOptions"
+            option-label="name"
+            option-value="value"
+        />
+        <x-wireui:input label="{{__('rooms.name')}}" wire:model.defer="fields.name" />
+    </div>
+    <x-slot name="footer">
+        <div class="flex justify-between w-full">
+            <x-wireui:button flat label="{{__('rooms.cancel')}}" wire:click="closeModal" />
+            <x-wireui:button primary label="{{__('rooms.submit')}}" wire:click="save" />
+        </div>
+    </x-slot>
+</x-wireui:modal-card>
+    
--- a/resources/views/livewire/forms/room-grid-form.blade.php
+++ b/resources/views/livewire/forms/room-grid-form.blade.php
@ -46,5 +46,5 @@
        </div>
    </div>
    <x-wireui:notifications/>
-    <livewire:admin.room-detail-modal />
+    <livewire:forms.modals.room-detail-modal />
 </x-wireui:card>
--- a/resources/views/livewire/header/admin/branch.blade.php
+++ b/resources/views/livewire/header/admin/branch.blade.php
@ -1,2 +0,0 @@
-<x-admin.section-header title="{{ __('branches.list') }}">
-</x-admin.section-header>
--- a/resources/views/livewire/header/admin/room.blade.php
+++ b/resources/views/livewire/header/admin/room.blade.php
@ -1,2 +1,13 @@
-<x-admin.section-header title="{{ __('room.list') }}">
+@php
+use App\Models\Branch;
+$branch= Branch::findOrFail(1);
+@endphp
+
+<x-admin.section-header title="{{ $branch->name .' '. __('rooms.list').' '. $branch->external_ip}}">
+    <x-wireui:button
+        wire:click="$dispatchTo('forms.room-form', 'openModal')"
+        icon="plus"
+        label="{{ __('rooms.CreateNew') }}"
+        class="bg-blue-600 text-white"
+    />
 </x-admin.section-header>