add report view

app/Exports/ServerLicenseExport.php

+<?php
+
+namespace App\Exports;
+
+use App\Models\ConfServerLicense;
+use Maatwebsite\Excel\Concerns\FromCollection;
+
+class ServerLicenseExport implements FromCollection
+{
+    /**
+    * @return \Illuminate\Support\Collection
+    */
+    public function collection()
+    {
+        return ConfServerLicense::all();
+    }
+}

app/Http/Controllers/ReportController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\ConfServerLicense;
+use Illuminate\Http\Request;
+
+class ReportController extends Controller
+{
+   
+
+    public function index() {
+        $menu = 'Report';
+        $currentContent = 'Report';
+        return view('home'  ,compact('menu', 'currentContent'));
+    }
+}

app/Http/Controllers/SmartUpdateController.php

@@ -155,7 +155,6 @@ class SmartUpdateController extends Controller
             $bgColor = $colorPack[($index % 2) + 2];
             $res .= "<tr>";
             foreach ($columns as $column) {
-                // $cellValue = iconv('UTF-8','TIS-620',  $row->$column);
                 $align = is_numeric(str_replace(',', '', $row->$column)) && $numberSortOpt === "YES" ? " align='right' " : '';
                 $res .= "<td valign='top' $align bgcolor='$bgColor' nowrap='nowrap'><font face='Arial, Helvetica, sans-serif' size=2>" . ($row->$column) . "</font></td>";
             }

app/Http/Livewire/CodeComparer.php

@@ -127,6 +127,8 @@ class CodeComparer extends Component
 
     public function render()
     {
+        //asdsda
+        
         return view('livewire.code-comparer');
     }
 }

app/Http/Livewire/Pages/Report/ReportIndex.php

+<?php
+
+namespace App\Http\Livewire\Pages\Report;
+
+use App\Models\ConfServerLicense;
+use Livewire\Component;
+
+class ReportIndex extends Component
+{
+    public $searchBy = [
+        'COMPANY' => 'Company',
+        'SNKEY' => 'Server Key',
+        'CUR_VERSION' => 'Current Version',
+        'STATUS' => 'Status',
+        'DATABASETYPE' => 'Database',
+        'PHP_VERSION_ID' => 'PHP Version'
+    ];
+
+    public $searchSelected;
+    public $keyword;
+    public $results;
+
+    public function filterReport()
+    {
+        $query = ConfServerLicense::select('ID', 'SNKEY', 'COMPANY', 'STATUS', 'CUR_VERSION', 'DATABASETYPE', 'LICENSEDATE');
+
+        if ($this->searchSelected && $this->keyword) {
+            $query->where($this->searchSelected, 'LIKE', '%' . $this->keyword . '%');
+        }
+
+        $this->results = $query->orderBy('ID', 'DESC')->get();
+    }
+
+    // public function exportReport()
+    // {
+    //     // ฟังก์ชันสำหรับการ export ข้อมูลเป็นไฟล์
+    //     return Excel::download(new ConfServerLicenseExport($this->results), 'report.xlsx');
+    // }
+    public function render()
+    {
+        $this->filterReport();
+        return view('livewire.pages.report.report-index');
+    }
+}

app/Http/Livewire/Pages/Role/RoleEdit.php

@@ -13,7 +13,9 @@ class RoleEdit extends Component
     public $permissions;
     public $roleId;
     public $role;
-    public $name, $description, $permission_lists = [];
+    public $name;
+    public $description;
+    public $permissionLists = [];
     protected $rules = [
         'role.name' => 'required',
     ];
@@ -24,22 +26,22 @@ class RoleEdit extends Component
         $this->role = Role::findOrFail($editRoleId);
         $this->name = $this->role->name;
         $this->description = $this->role->description;
-        $this->permission_lists = $this->role->permissions->pluck('id')->toArray();
+        $this->permissionLists = $this->role->permissions->pluck('id')->toArray();
         $this->permissions = Permission::all();
     }
     public function render()
     {
-        $permission_lists = $this->permission_lists;
-        return view('livewire.pages.role.role-edit', compact('permission_lists'));
+        $permissionLists = $this->permissionLists;
+        return view('livewire.pages.role.role-edit', compact('permissionLists'));
     }
 
     public function submitEditForm($selectedList)
     {
         // $this->validate();
-        $this->permission_lists = array_map('intval', $selectedList);
+        $this->permissionLists = array_map('intval', $selectedList);
         $this->role->name = $this->name;
         $this->role->description = $this->description;
-        $this->role->permissions()->sync($this->permission_lists);
+        $this->role->permissions()->sync($this->permissionLists);
         $this->role->save();
        
         $this->emit('showRoleList', 'Role successfully updated.');

app/Http/Livewire/Pages/Role/RoleIndex.php

@@ -62,7 +62,7 @@ class RoleIndex extends Component
     public function showRoleCreateForm()
     {
         if (!\Auth::user()->hasPermissions(['add-role'])) {
-            $this->showNoPermissionModal = TRUE;
+            $this->showNoPermissionModal = true;
             return;
         }
         $this->action = 'create';
@@ -71,7 +71,7 @@ class RoleIndex extends Component
     public function showRoleEditForm($roleId)
     {
         if (!\Auth::user()->hasPermissions(['edit-role'])) {
-            $this->showNoPermissionModal = TRUE;
+            $this->showNoPermissionModal = true;
             return;
         }
         $this->action = 'edit';
@@ -95,7 +95,7 @@ class RoleIndex extends Component
     public function deleteItem($deleteRoleId)
     {
         if (!\Auth::user()->hasPermissions(['delete-role'])) {
-            $this->showNoPermissionModal = TRUE;
+            $this->showNoPermissionModal = true;
             return;
         }
         $role = Role::find($deleteRoleId);
@@ -112,7 +112,7 @@ class RoleIndex extends Component
     public function deleteSelected($selectedRoles)
     {
         if (!\Auth::user()->hasPermissions(['delete-role'])) {
-            $this->showNoPermissionModal = TRUE;
+            $this->showNoPermissionModal = true;
             return;
         }
         $roleDeleted= Role::whereIn("id", $selectedRoles)->pluck('name')->toArray();

app/Http/Livewire/Pages/ServerLicense/ServerLicenseEdit.php

@@ -349,19 +349,21 @@ class ServerLicenseEdit extends Component
 
         $groupedData = [];
         $globalTemp = $this->globalList;
-
-        foreach ($globalTemp['profilecode'] as $index => $profileCode) {
-            if (isset($globalTemp['name'][$index]) && isset($globalTemp['value'][$index])) {
-                if (!isset($groupedData[$profileCode])) {
-                    $groupedData[$profileCode] = [];
+        if(!empty($globalTemp)) {
+            foreach ($globalTemp['profilecode'] as $index => $profileCode) {
+                if (isset($globalTemp['name'][$index]) && isset($globalTemp['value'][$index])) {
+                    if (!isset($groupedData[$profileCode])) {
+                        $groupedData[$profileCode] = [];
+                    }
+                    $groupedData[$profileCode][] = [
+                        'name' => $globalTemp['name'][$index],
+                        'value' => $globalTemp['value'][$index],
+                        'profilecode' => $profileCode
+                    ];
                 }
-                $groupedData[$profileCode][] = [
-                    'name' => $globalTemp['name'][$index],
-                    'value' => $globalTemp['value'][$index],
-                    'profilecode' => $profileCode
-                ];
             }
         }
+     
 
         $this->globalListGroup =  $groupedData;
     }

app/Http/Livewire/Pages/User/UserEdit.php

@@ -11,7 +11,7 @@ class UserEdit extends Component
     public $editUserId;
     public $userId;
     public $user;
-    public $username,  $first_name , $last_name, $phone ,$email, $current_password, $new_password, $new_password_confirmation ,$changePassword = false ;
+    public $username, $first_name , $last_name, $phone ,$email, $current_password, $new_password, $new_password_confirmation ,$changePassword = false ;
     public $group_lists;
 
     protected function rules()

app/Http/Livewire/Pages/User/UserIndex.php

@@ -64,10 +64,10 @@ class UserIndex extends Component
 
     public function showUserAddForm()
     {
-        if (!Auth::user()->hasPermissions(['add-user'])) {
-            $this->showNoPermissionModal = TRUE;
-            return;
-        }
+        // if (!Auth::user()->hasPermissions(['add-user'])) {
+        //     $this->showNoPermissionModal = TRUE;
+        //     return;
+        // }
         $this->action = 'create';
     }
 
@@ -102,10 +102,10 @@ class UserIndex extends Component
     }
     public function deleteItem($deleteUserId)
     {
-        if (!Auth::user()->hasPermissions(['delete-user'])) {
-            $this->showNoPermissionModal = TRUE;
-            return;
-        }
+        // if (!Auth::user()->hasPermissions(['delete-user'])) {
+        //     $this->showNoPermissionModal = TRUE;
+        //     return;
+        // }
         $user = User::find($deleteUserId);
 
         if ($user) {
@@ -119,10 +119,10 @@ class UserIndex extends Component
     }
     public function deleteSelected($selectedUsers)
     {
-        if (!Auth::user()->hasPermissions(['delete-user'])) {
-            $this->showNoPermissionModal = TRUE;
-            return;
-        }
+        // if (!Auth::user()->hasPermissions(['delete-user'])) {
+        //     $this->showNoPermissionModal = TRUE;
+        //     return;
+        // }
         $userDeleted = User::whereIn("id", $selectedUsers)->pluck('name')->toArray();
         $userStr = implode(",", $userDeleted);
         User::destroy($selectedUsers);

resources/views/livewire/main-container.blade.php

@@ -74,6 +74,10 @@
                 <livewire:pages.format-file-master.file-index wire:init />
             @break
 
+            @case('Report')
+                <livewire:pages.report.report-index wire:init />
+            @break
+
             @default
                 @livewire('code-comparer')
         @endswitch

resources/views/livewire/navbar.blade.php

@@ -7,16 +7,6 @@
                 @mouseleave="timer = setTimeout(() => open = false, 100)"
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                 <a href="/server-license">Server License Management</a>
-                {{-- <ul x-cloak x-show="open" @click="open = false" @mouseenter="clearTimeout(timer)"
-                    @mouseleave="timer = setTimeout(() => open = false, 100)"
-                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
-                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 1</a>
-                    </li>
-                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 2</a>
-                    </li>
-                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 3</a>
-                    </li>
-                </ul> --}}
             </li>
             <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                 @mouseleave="timer = setTimeout(() => open = false, 100)"
@@ -50,10 +40,7 @@
                 </ul>
 
             </li>
-            <li x-data="{ open: false }"
-                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
-                <a href="/format-file-master">Format File Master</a>
-            </li>
+
             {{-- <li x-data="{ open: false }"
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                 <a href="/test">Test</a>
@@ -62,11 +49,21 @@
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                 <a href="/news">News & Update</a>
             </li>
+
+            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
+                @mouseleave="timer = setTimeout(() => open = false, 100)"
+                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
+                <span class="cursor-pointer" @click.stop>Knowledge</span>
+                <ul x-cloak x-show="open" @click.stop="open = false" @mouseleave="open = false"
+                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
+                    <li><a href="/parameter" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Parameter</a></li>
+                </ul>
+
+            </li>
             <li x-data="{ open: false }"
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
-                <a href="/parameter">Parameter</a>
+                <a href="/report">Report</a>
             </li>
-
             <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                 @mouseleave="timer = setTimeout(() => open = false, 100)"
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
@@ -77,20 +74,31 @@
                     <li><a href="/role" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a>
                     <li><a href="/group" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Group</a></li>
                     <li><a href="/user" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">User</a></li>
-
+                    <li>
+                        <a href="/format-file-master" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Format
+                            File Master</a>
+                    </li>
+                </ul>
             </li>
-        </ul>
-        </li>
-        <li>
-            <form method="POST" action="{{ route('logout') }}">
-                @csrf
-                <a href="#" class="bg-primary text-white px-4 py-2 rounded"
-                    onclick="event.preventDefault(); this.closest('form').submit();">
-                    Logout
-                </a>
-            </form>
-        </li>
-        <span>Hello , {{ auth()->user()->username ?? '' }}</span>
+            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
+                @mouseleave="timer = setTimeout(() => open = false, 100)"
+                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white  cursor-pointer">
+                <i class="fa fa-user" aria-hidden="true"></i>
+                <span>Hello , {{ auth()->user()->username ?? '' }}</span>
+                <ul x-cloak x-show="open" @click="open = false" @mouseleave="open = false"
+                    class="absolute right-0 mt-2 w-full">
+                    <li class="float-right">
+                        <form method="POST" action="{{ route('logout') }}">
+                            @csrf
+                            <button class="bg-primary text-white px-4 py-2 rounded"
+                                onclick="event.preventDefault(); this.closest('form').submit();">
+                                Logout
+                            </button>
+                        </form>
+                    </li>
+                </ul>
+            </li>
+
         </ul>
     </div>
     {{-- @endif --}}

resources/views/livewire/pages/patch/patch-index.blade.php

 <div class="border-0 shadow-none">
-`    <div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
+    ` <div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
         class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
         <div class="flex justify-center items-center ">
             <div class="items-center h-100vh" style="align-content: center;">
@@ -8,7 +8,7 @@
 
         </div>
     </div>
-    <div class="m-2" >
+    <div class="m-2">
         {{-- <div wire:loading.class="flex" wire:loading.class.remove="hidden"
             class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
             <div class="flex justify-center items-center ">
@@ -35,7 +35,8 @@
                     </div>
                     <div class="flex justify-between">
                         <div class="px-2 ml-4">
-                            <button type="button" class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
+                            <button type="button"
+                                class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
                                 wire:click="showpatchAddForm">Add</button>
                         </div>
                         <div class="inline-flex flex-initial">
@@ -62,7 +63,8 @@
                                             @endforeach
                                         </select>
                                     </span>
-                                    <button type="button" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
+                                    <button type="button"
+                                        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
                                         wire:click="search">Search</button>
                                 </div>
                             </div>
@@ -71,7 +73,7 @@
 
                     <div class="mx-3 mt-3 px-4">
                         <div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
-                            <table class="is-hoverable table w-full text-left border-b" >
+                            <table class="is-hoverable table w-full text-left border-b">
                                 <thead>
                                     <tr>
                                         <th
@@ -118,8 +120,9 @@
                                         <tr
                                             class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                             <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                                <label class="inline-flex items-center space-x-2">
-                                                    <input
+                                                <label for="selectedPatch-{{ $patch->id }}"
+                                                    class="inline-flex items-center space-x-2">
+                                                    <input id="selectedPatch-{{ $patch->id }}"
                                                         class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary  focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                         type="checkbox" wire:model.defer="selectedPatch"
                                                         value="{{ $patch->id }}" />
@@ -165,9 +168,9 @@
                 <livewire:pages.patch.patch-edit :editPid="$editPid">
         @endif
         @push('script')
-        <script>
-            console.log("ddd")
-        </script>
+            <script>
+                console.log("ddd")
+            </script>
         @endpush
     </div>
 </div>

resources/views/livewire/pages/report/report-index.blade.php

+<div>
+    <div class="bg-white shadow-md rounded-lg p-6 w-full max-w-5xl mx-auto">
+        <form class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+            <!-- Search By -->
+            <div class="mb-4">
+                <label for="searchBy" class="block text-gray-700 font-medium">Search By</label>
+                <select id="searchBy" wire:model="searchSelected" class="form-select w-full">
+                    @foreach ($searchBy as $key => $value)
+                        <option value="{{ $key }}">{{ $value }}</option>
+                    @endforeach
+                </select>
+            </div>
+    
+            <!-- Keyword -->
+            <div class="mb-4">
+                <label for="keyword" class="block text-gray-700 font-medium">Keyword</label>
+                <input type="text" id="keyword" wire:model="keyword" class="form-input w-full" placeholder="Enter keyword">
+            </div>
+    
+            <!-- Search Button -->
+            <div class="flex justify-end col-span-2">
+                <button type="button" wire:click="filterReport"
+                    class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary-focus">
+                    Search
+                </button>
+            </div>
+        </form>
+    
+        <!-- Export Button -->
+        <div class="flex justify-end mb-4">
+            <button wire:click="exportReport" class="bg-green-500 text-white px-6 py-2 rounded-md hover:bg-green-700">
+                Export Report
+            </button>
+        </div>
+    
+        <!-- Table Display -->
+        <div class="overflow-x-auto">
+            <table class="min-w-full bg-white border border-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-6 py-3 border-b border-gray-200">ID</th>
+                        <th class="px-6 py-3 border-b border-gray-200">Server Key</th>
+                        <th class="px-6 py-3 border-b border-gray-200">Company</th>
+                        <th class="px-6 py-3 border-b border-gray-200">Status</th>
+                        <th class="px-6 py-3 border-b border-gray-200">Current Version</th>
+                        <th class="px-6 py-3 border-b border-gray-200">Database Type</th>
+                        <th class="px-6 py-3 border-b border-gray-200">License Date</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach ($results as $result)
+                        <tr>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->ID }}</td>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->SNKEY }}</td>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->COMPANY }}</td>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->STATUS }}</td>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->CUR_VERSION }}</td>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->DATABASETYPE }}</td>
+                            <td class="px-6 py-4 border-b border-gray-200">{{ $result->LICENSEDATE }}</td>
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
+    </div>
+    
+</div>

resources/views/livewire/pages/role/role-create.blade.php

@@ -16,7 +16,7 @@
             <div class="w-3/4 px-3 space-y-3 m-auto mb-4">
                 <div class="grid grid-cols-1">
                     <div class="flex items-center mb-2 ml-4">
-                        <label class="w-3/12 mr-2">
+                        <label for='name' class="w-3/12 mr-2">
                             <span>Name</span>
                         </label>
                         <span class="relative flex w-full">
@@ -30,7 +30,7 @@
                         </span>
                     </div>
                     <div class="flex items-center mb-2 ml-4">
-                        <label class="w-3/12 mr-2">
+                        <label for='description' class="w-3/12 mr-2">
                             <span>Description</span>
                         </label>
                         <span class="relative flex w-full">

resources/views/livewire/pages/role/role-edit.blade.php

 @php
-    $jsonPermissionLists = json_encode($permission_lists ?? []);
+    $jsonPermissionLists = json_encode($permissionLists ?? []);
 @endphp
 
 <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6" x-data="{
@@ -20,8 +20,8 @@
             <div class="w-3/4 px-3 space-y-3 m-auto mb-4">
                 <div class="grid grid-cols-1">
                     <div class="flex items-center mb-2 ml-4">
-                        <label class="w-3/12 mr-2">
-                            <span>Name</span>
+                        <label for="name" class="w-3/12 mr-2">
+                            <span id='name'>Name</span>
                         </label>
                         <span class="relative flex w-full">
                             <input
@@ -34,7 +34,7 @@
                         </span>
                     </div>
                     <div class="flex items-center mb-2 ml-4">
-                        <label class="w-3/12 mr-2">
+                        <label for='description' class="w-3/12 mr-2">
                             <span>Description</span>
                         </label>
                         <span class="relative flex w-full">
@@ -82,7 +82,7 @@
 
                             <div x-data="{
                                 allChecked: false,
-                                permissionList: @entangle('permission_lists'),
+                                permissionList: @entangle('permissionLists'),
                             
                                 toggleAll(group) {
                                     this.allChecked = !this.allChecked;

resources/views/livewire/pages/server-license/csv-mapping.blade.php

@@ -44,7 +44,7 @@
             </table>
             <div class="p-4">
                 <button wire:click="saveMapping"
-                    class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
+                    class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
                     Save
                 </button>
             </div>

resources/views/livewire/pages/server-license/global.blade.php

@@ -41,7 +41,7 @@
                             </table>
                             <div class="p-4">
                                 <button wire:click="saveGlobal"
-                                    class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
+                                    class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
                                     Save
                                 </button>
                             </div>

resources/views/livewire/pages/server-license/print-form.blade.php

@@ -74,7 +74,7 @@
             </table>
             <div class="p-4">
                 <button wire:click="saveLabel"
-                    class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
+                    class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
                     Save
                 </button>
             </div>

resources/views/livewire/pages/server-license/server-license-edit.blade.php

@@ -19,7 +19,7 @@
             </template>
         </div>
         <div class="flex flex-wrap -mx-3 w-full bg-main-container items-center justify-center " x-data="{ activeTab: 'form' }">
-            <div class="w-11/12 p-5 mb-6 shadow-md rounded-lg">
+            <div class="w-11/12 p-5 mb-6 shadow-md rounded-lg bg-white">
                 <div class="mb-4 border-b border-gray-200">
                     <ul class="flex flex-wrap -mb-px">
                         <li class="mr-2">