add server license create / edit /delete status = n

app/Http/Controllers/ServerLicenseController.php

@@ -7,6 +7,11 @@ use Illuminate\Http\Request;
 
 class ServerLicenseController extends Controller
 {
+    public function index() {
+        $menu = 'ServerLicense';
+        $currentContent = 'ServerLicense';
+        return view('home'  ,compact('menu', 'currentContent'));
+    }
     public function getAllServerKey()
     {
         $serverLicenses = ConfServerLicense::select('ID', 'SNKEY')->get();

app/Http/Livewire/Pages/SendPatch/SendPatchEdit.php

@@ -20,16 +20,47 @@ class SendPatchEdit extends Component
     public $searchSelected = 'SNKEY';
     public $keyword = '';
     public $selectedPenddings = [];
+    public $serverkey = '', $showSearch = false , $searchInProgress = false , $resultsServerkey = [];
+    public $serverKeyWaitingSend = [];
     protected $listeners = ['deletePatch', 'refreshComponent' => '$refresh'];
     public function mount($editPid)
     {
         // $this->PID = $editPid;
         $this->PID = 15670;
+        
         // $this->updateServerLists();
     }
 
+    public function updatedServerkey()
+    {
+        $this->showSearch = true;
+        if ($this->searchInProgress) {
+            $this->reset('resultsServerkey');
+        }
+
+        $this->searchInProgress = true;
+        $this->resultsServerkey = ConfServerLicense::where('SNKEY', 'LIKE', '%' . $this->serverkey . '%')->take(50)->get();
+        $this->searchInProgress = false;
+    }
+
+    public function selectResult($key)
+    {
+        $this->serverkey = $key;
+        $this->resultsServerkey = [];
+        $this->showSearch = false;
+        $temp= ConfServerLicense::where('SNKEY',  $key )->first();
+
+        $keys = array_column($this->serverKeyWaitingSend, 'key');
+        if (!in_array($key, $keys)) {
+            $this->serverKeyWaitingSend[] = ['id' => $temp->ID, 'key' => $key];
+        }
+        
+    }
+
+
     public function updatedSelectedOwnerType($value)
     {
+        dd($value);
         if (!empty($value)) {
             // อัปเดต serverKeyOption โดยพิจารณาจาก owner type ที่เลือก
             $this->serverKeyOption = $this->fetchServerKeyOption($value);

app/Http/Livewire/Pages/SendPatch/SendPatch.php → app/Http/Livewire/Pages/SendPatch/SendPatchIndex.php

@@ -9,7 +9,7 @@ use Illuminate\Support\Facades\DB;
 use App\Models\ConfSmartUpdate;
 use Illuminate\Support\Facades\Cache;
 
-class SendPatch extends Component
+class SendPatchIndex extends Component
 {
     use WithPagination;
     // protected $paginationTheme = 'bootstrap';
@@ -34,6 +34,7 @@ class SendPatch extends Component
 
     public function render()
     {
+        if ($this->action == 'list') {
             $numServerSubquery = DB::table('conf_server_pendding as p2')
                 ->select(DB::raw('count(p2.ServerID) as NUMSERVER'), 'p2.PatchID')
                 ->groupBy('p2.PatchID');
@@ -50,8 +51,9 @@ class SendPatch extends Component
             }
             $query->orderBy('p1.PID', 'DESC');
             $results = $query->paginate($this->perPage);
-
-        return view('livewire.pages.send-patch.send-patch', compact('results'));
+        }
+        $results = [];
+        return view('livewire.pages.send-patch.send-patch-index', compact('results'));
     }
 
     public function search()

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

+<?php
+
+namespace App\Http\Livewire\Pages\ServerLicense;
+
+use GuzzleHttp\Exception\RequestException;
+use App\Models\ConfSmartupdate;
+use App\Models\MasterPhpVer;
+use App\Models\TabPatchFile;
+use Livewire\Component;
+use GuzzleHttp\Client;
+use App\Models\ConfServerLicense;
+use Illuminate\Support\Facades\DB;
+class ServerLicenseCreate extends Component
+{
+
+    public $phpVersions = [];
+    public $teams = [];
+    public $sizings = [];
+    public $customerTypes = [];
+    public $dbTypes = [];
+    public $ownerTypes = [];
+    
+    public $serverKey;
+    public $teamId;
+    public $customerSize;
+    public $customerType;
+    public $company;
+    public $branch;
+    public $status;
+    public $licenseDate;
+    public $phpVersionId;
+    public $currentVersion;
+    public $installDate;
+    public $installVersion;
+    public $databaseType;
+    public $ownerType;
+    public $hscodeMethod;
+    public $customerUrl;
+    public $contact;
+    public $contactCustomerName;
+   
+
+    // protected $rules = [
+    //     'SNKEY' => 'required|string|max:255',
+    //     'NBTEAM' => 'required|integer',
+    //     'CUSTOMERSIZE' => 'required|integer',
+    //     'CUSTOMERTYPE' => 'required|integer',
+    //     'COMPANY' => 'required|string|max:255',
+    //     'BRANCH' => 'nullable|string|max:255',
+    //     'STATUS' => 'required|in:Y,N',
+    //     'LICENSEDATE' => 'required|date',
+    //     'PHP_VERSION_ID' => 'required|integer',
+    //     'CUR_VERSION' => 'required|string|max:255',
+    //     'INSTALL_DATE' => 'required|date',
+    //     'INSTALL_VERSION' => 'required|string|max:255',
+    //     'DATABASETYPE' => 'required|integer',
+    //     'OWNERTYPE' => 'required|integer',
+    //     'HSCODEMETHOD' => 'required|integer|in:1,2',
+    //     'CUSTOMERURL' => 'required|string|max:255',
+    //     'CONTACT' => 'required|string|max:255',
+    //     'CONTACTCUSTOMERNAME' => 'required|string|max:255',
+    // ];
+    public function mount()
+    {
+        $this->phpVersions  = DB::table('master_php_ver')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->teams = DB::table('master_team')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->sizings = DB::table('master_size')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->customerTypes  = DB::table('master_sizeType')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->dbTypes  = DB::table('master_dbtype')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->ownerTypes  = DB::table('conf_server_ownertype')
+            ->orderBy('owntypeid', 'asc')
+            ->get();
+    }
+
+   
+    public function save()
+    {
+        // $this->validate();
+
+        ConfServerLicense::create([
+            'SNKEY' => $this->serverKey,
+            'NBTEAM' => $this->teamId,
+            'CUSTOMERSIZE' => $this->customerSize,
+            'CUSTOMERTYPE' => $this->customerType,
+            'COMPANY' => $this->company,
+            'BRANCH' => $this->branch,
+            'STATUS' => $this->status,
+            'LICENSEDATE' => $this->licenseDate,
+            'PHP_VERSION_ID' => $this->phpVersionId,
+            'CUR_VERSION' => $this->currentVersion,
+            'INSTALL_DATE' => $this->installDate,
+            'INSTALL_VERSION' => $this->installVersion,
+            'DATABASETYPE' => $this->databaseType,
+            'OWNERTYPE' => $this->ownerType,
+            'HSCODEMETHOD' => $this->hscodeMethod,
+            'CUSTOMERURL' => $this->customerUrl,
+            'CONTACT' => $this->contact,
+            'CONTACTCUSTOMERNAME' => $this->contactCustomerName,
+        ]);
+    
+        return redirect()->route('server-license.index')->with('message', 'Server License saved successfully.');
+    }
+    
+
+    public function loadPage($page)
+    {
+        $this->emit('menuChanged', $page);
+    }
+    public function render()
+    {
+        return view('livewire.pages.server-license.server-license-create');
+    }
+}

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

+<?php
+
+namespace App\Http\Livewire\Pages\ServerLicense;
+
+use App\Models\ConfServerLicense;
+use Livewire\Component;
+use GuzzleHttp\Exception\RequestException;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\DB;
+
+class ServerLicenseEdit extends Component
+{
+    public $phpVersions = [];
+    public $teams = [];
+    public $sizings = [];
+    public $customerTypes = [];
+    public $dbTypes = [];
+    public $ownerTypes = [];
+
+    public $serverKey;
+    public $teamId;
+    public $customerSize;
+    public $customerType;
+    public $company;
+    public $branch;
+    public $status;
+    public $licenseDate;
+    public $phpVersionId;
+    public $currentVersion;
+    public $installDate;
+    public $installVersion;
+    public $databaseType;
+    public $ownerType;
+    public $hscodeMethod;
+    public $customerUrl;
+    public $contact;
+    public $contactCustomerName;
+    public $licenseId;
+    public $message;
+    protected $listeners = ['gotoModal'];
+    public $modalLoaded = false;
+
+    public function loadModal()
+    {
+        $this->modalLoaded = true;
+    }
+    public function mount($editId)
+    {
+        $this->licenseId  = $editId;
+        $this->loadData();
+    }
+
+    public function loadData()
+    {
+        $license = ConfServerLicense::find($this->licenseId);
+
+        if ($license) {
+            $this->serverKey = $license->SNKEY;
+            $this->teamId = $license->NBTEAM;
+            $this->customerSize = $license->CUSTOMERSIZE;
+            $this->customerType = $license->CUSTOMERTYPE;
+            $this->company = $license->COMPANY;
+            $this->branch = $license->BRANCH;
+            $this->status = $license->STATUS;
+            $this->licenseDate = $license->LICENSEDATE;
+            $this->phpVersionId = $license->PHP_VERSION_ID;
+            $this->currentVersion = $license->CUR_VERSION;
+            $this->installDate = $license->INSTALL_DATE;
+            $this->installVersion = $license->INSTALL_VERSION;
+            $this->databaseType = $license->DATABASETYPE;
+            $this->ownerType = $license->OWNERTYPE;
+            $this->hscodeMethod = $license->HSCODEMETHOD;
+            $this->customerUrl = $license->CUSTOMERURL;
+            $this->contact = $license->CONTACT;
+            $this->contactCustomerName = $license->CONTACTCUSTOMERNAME;
+        }
+
+        $this->phpVersions  = DB::table('master_php_ver')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->teams = DB::table('master_team')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->sizings = DB::table('master_size')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->customerTypes  = DB::table('master_sizeType')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->dbTypes  = DB::table('master_dbtype')
+            ->orderBy('id', 'asc')
+            ->get();
+
+        $this->ownerTypes  = DB::table('conf_server_ownertype')
+            ->orderBy('owntypeid', 'asc')
+            ->get();
+    }
+    public function updateLicense()
+    {
+        // dd( $this->teamId);
+        $license = ConfServerLicense::find($this->licenseId);
+
+        if ($license) {
+            $license->update([
+                'SNKEY' => $this->serverKey,
+                'NBTEAM' => $this->teamId,
+                'CUSTOMERSIZE' => $this->customerSize,
+                'CUSTOMERTYPE' => $this->customerType,
+                'COMPANY' => $this->company,
+                'BRANCH' => $this->branch,
+                'STATUS' => $this->status,
+                'LICENSEDATE' => $this->licenseDate,
+                'PHP_VERSION_ID' => $this->phpVersionId,
+                'CUR_VERSION' => $this->currentVersion,
+                'INSTALL_DATE' => $this->installDate,
+                'INSTALL_VERSION' => $this->installVersion,
+                'DATABASETYPE' => $this->databaseType,
+                'OWNERTYPE' => $this->ownerType,
+                'HSCODEMETHOD' => $this->hscodeMethod,
+                'CUSTOMERURL' => $this->customerUrl,
+                'CONTACT' => $this->contact,
+                'CONTACTCUSTOMERNAME' => $this->contactCustomerName,
+            ]);
+
+            $message = 'Server License updated successfully!';
+            $this->message = $message;
+            // session()->flash('message', 'Server License updated successfully!');
+        }
+    }
+    public function loadPage($page)
+    {
+        $this->emit('menuChanged', $page);
+    }
+
+
+    public function render()
+    {
+        return view('livewire.pages.server-license.server-license-edit');
+    }
+}

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

+<?php
+
+namespace App\Http\Livewire\Pages\ServerLicense;
+
+use App\Models\ConfServerLicense;
+use Livewire\Component;
+use Livewire\WithPagination;
+use App\Models\ConfSmartUpdate;
+
+class ServerLicenseIndex extends Component
+{
+    use WithPagination;
+    public $action  = 'list';
+    public $searchBy, $editId, $message, $keyword, $perPage = 10, $searchSelected = 'PID' , $selectedPatch = [] ;
+    protected $listeners = [ 'deleteItem', 'deleteSelected' ,'showpatchListForm'];
+    public function mount()
+    {
+        $this->searchBy = [
+            'COMPANY' => 'Company',
+            'SNKEY' => 'Serverkey',
+            'CUR_VERSION' => 'Current Version',
+            'STATUS' => 'Status',
+            'DATABASETYPE' => 'Database',
+            'PHP_VERSION_ID' => 'PHP Version'
+
+        ];
+    }
+    public function render()
+    {
+
+        $query = ConfServerLicense::select('ID', 'SNKEY', 'COMPANY', 'STATUS', 'CUR_VERSION', 'DATABASETYPE', 'LICENSEDATE');
+
+        if ($this->searchSelected && $this->keyword) {
+            $query->where($this->searchSelected, 'LIKE', '%' . $this->keyword . '%');
+        }
+        $query->orderBy('ID', 'DESC');
+        $results = $query->paginate($this->perPage);
+
+        return view('livewire.pages.server-license.server-license-index', compact('results'));
+    }
+    public function search()
+    {
+        $this->resetPage();
+    }
+    public function showServerLicenseListForm()
+    {
+        $this->action = 'list';
+    }
+
+    public function showServerLicenseAddForm()
+    {
+        $this->action = 'add';
+    }
+
+    public function showServerLicenseEditForm($id)
+    {
+        $this->editId = $id;
+        $this->action = 'edit';
+        // $this->emit('showpatchEditForm');
+    }
+
+    public function showDeleteModal($id)
+    {
+        $this->emit('showDeleteModal' ,$id); 
+    }
+
+    public function deleteItem($id) {
+    
+        $serverlicense = ConfServerLicense::where("ID", $id)->first();
+        $serverlicense->status = 'N';
+        $serverlicense->save();
+        $message = "Serverlicense status updated successfully";
+        $this->message = $message;
+    }
+ 
+}

app/Models/ConfServerLicense.php

@@ -7,6 +7,8 @@ use Illuminate\Database\Eloquent\Model;
 class ConfServerLicense extends Model
 {
     protected $table = 'conf_server_license';
+    public $timestamps = false;
+    protected $primaryKey = 'ID';
     protected $fillable = [
         'ID',
         'SNKEY',

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

-<div class="bg-main-container mt-1 z-0 " >
+<div class="bg-main-container mt-1 z-0 ">
 
     <link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
     <div wire:loading.class="" wire:loading.class.remove="hidden"
@@ -15,10 +15,12 @@
     <div wire:loading.remove class="bg-main-container mx-4">
         @if ($currentContent === 'Role')
             <livewire:pages.role.role-index />
+        @elseif ($currentContent === 'ServerLicense')
+            <livewire:pages.server-license.server-license-index />
         @elseif ($currentContent === 'User')
             <livewire:pages.user.user-index />
         @elseif ($currentContent === 'SendPatch')
-            <livewire:pages.send-patch.send-patch />
+            <livewire:pages.send-patch.send-patch-index />
         @elseif ($currentContent === 'SendMultiPatch')
             <livewire:pages.send-patch.send-multi-patch-list />
         @elseif ($currentContent === 'DeleteMultiPatch')

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

@@ -42,7 +42,7 @@
                             <div x-data="{ isInputActive: true }">
                                 <div class="flex gap-4 px-5 items-center">
                                     <button @click="isInputActive = !isInputActive"
-                                        class="btn  h-8 w-10 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container focus:bg-primary-focus active:bg-primary-focus  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
+                                        class="btn  h-8 w-10 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container primary-focus hover:text-main-container active:text-main-container focus:text-main-container  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
                                             viewBox="0 0 24 24" stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"

resources/views/livewire/pages/send-patch/send-patch-edit.blade-old.php

+<div class="border-0 shadow-none">
+     <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;">
+                <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+
+        </div>
+    </div>
+        <div class="bg-main-container rounded-md">
+            <div class="max-w-full mx-auto px-5 text-left flex flex-col items-start">
+                <h2 class="text-2xl  text-black ">
+                    Send Patch to Customer
+                </h2>
+                <a href="/send-patch" type="button" class="btn  m-3 text-white bg-primary px-3 py-2">Back</a>
+            </div>
+            <div class="" x-data="{ tomGReady: false }" x-show="tomGReady">
+                <div class="mb-4">
+                    <div class="grid grid-cols-4 gap-2 ">
+                        <div class="bg-white col-span-1 p-6 rounded-lg shadow-md">
+                            <!-- Server Information Group -->
+                            <div class="mb-6">
+                                <h3 class="text-lg font-medium text-gray-900 mb-2">Server Information</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="server_of" class="block text-sm font-medium text-gray-700">Server of</label>
+                                        <select id="server_of" name="server_of" wire:model="selectedOwnerType"
+                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                            <option value="">Please Select</option>
+                                            @foreach ($ownerType as $type)
+                                                <option value="{{ $type->owntype_code }}">{{ $type->owntype_description }}</option>
+                                            @endforeach
+                                        </select>
+                                    </div>
+                                   
+                                </div>
+                            </div>
+                        
+                            <!-- Company & Database Information Group -->
+                            <div class="mb-6">
+                                <h3 class="text-lg font-medium text-gray-900 mb-2">Company & Database Information</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="company" class="block text-sm font-medium text-gray-700">Company</label>
+                                        <input type="text" id="company" name="company"
+                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                    </div>
+                                    <div>
+                                        <label for="db_type" class="block text-sm font-medium text-gray-700">DB Type</label>
+                                        <input type="text" id="db_type" name="db_type"
+                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                    </div>
+                                </div>
+                            </div>
+                        
+                            <!-- Additional Information Group -->
+                            <div class="mb-6">
+                                <h3 class="text-lg font-medium text-gray-900 mb-2">Additional Information</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="cur_ver" class="block text-sm font-medium text-gray-700">Cur. Ver.</label>
+                                        <input type="text" id="cur_ver" name="cur_ver"
+                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                    </div>
+                                    <div>
+                                        <label for="hscode_method" class="block text-sm font-medium text-gray-700">HSCODE 2017 Method</label>
+                                        <select id="hscode_method" name="hscode_method"
+                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                            <option>Please Select</option>
+                                            <!-- Options -->
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        
+                            <!-- Company Select Group -->
+                            <div>
+                                <h3 class="text-lg font-medium text-gray-900 mb-2">Company Selection</h3>
+                                <div>
+                                    <label for="company_select" class="block text-sm font-medium text-gray-700">Company</label>
+                                    <select id="company_select" name="company_select"
+                                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                        <option>Please select company</option>
+                                        <!-- Options -->
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div wire:ignore class="col-span-3">
+                            <label for="server_key" class="block text-sm font-medium text-gray-700">Server Key</label>
+                            <input id="server_key" class="mt-1.5 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" 
+                                x-data="{
+                                    serverKeyLists: @entangle('server_lists'),
+                                    serverKeyOption: @entangle('serverKeyOption')
+                                }"
+                                x-init="serverKeyLists = [];
+                                const tempLicense = pages.serverLicenseSelect;
+                                tempLicense.serverkey.options = serverKeyOption;
+                                
+                                $el._x_tom = new Tom($el, {
+                                    ...tempLicense.serverkey,
+                                    onChange: (value) => {
+                                        serverKeyLists = value;
+                                    }
+                                });
+                                
+                                $el._x_tom.setValue(serverKeyLists);
+                                tomGReady = true;" 
+                                type="text" placeholder="Search Server Key">
+                        </div>
+                    </div>
+                   
+                </div>
+           
+                <div class="flex justify-end mb-4 space-x-2">
+                    <button type="button" wire:click="sendPatch"
+                    class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>
+                   
+                    {{-- <button class="btn bg-stone-600 text-white px-4 py-2 rounded hover:bg-stone-700">Resend</button> --}}
+
+                </div>
+                <div class="mb-4">
+                    <h3 class="text-xl font-medium leading-6 text-black">Server list</h3>
+                </div>
+                <div class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
+                    <button @click="isInputActive = !isInputActive"
+                        class="btn  h-8 w-14 rounded-full p-0  hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                    </button>
+                    <span class="w-64" x-show="isInputActive === true">
+                        <input
+                            class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2  placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
+                            placeholder="Search Keyword" type="text" wire:model="keyword" />
+                    </span>
+                    <span class="w-52" x-show="isInputActive === true">
+                        <select wire:model="searchSelected"
+                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
+                            <option value="SNKEY">Server Key</option>
+                            <option value="COMPANY">Company</option>
+                        </select>
+                    </span>
+                </div>
+                <div class="is-scrollbar-hidden min-w-full table-responsive">
+                    <table class="min-w-full is-hoverable table w-full divide-y divide-gray-200">
+                        <thead>
+                            <tr>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Choose</th>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Server ID</th>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Company</th>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Serverkey</th>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Status</th>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Task Date</th>
+                                <th
+                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
+                                    Action</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            @foreach ($results as $server)
+                                <tr>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <input type="checkbox"
+                                            class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        {{ $server->ServerID }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        {{ $server->COMPANY }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->STATUS }}
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        {{ $server->TaskDate }}</td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        @if ($server->TaskStatus == '999')
+                                            <button type="button" wire:click="resendPatch({{ $server->ServerID }})"
+                                                class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus  active:bg-info/25"><i
+                                                    class="fa fa-repeat" aria-hidden="true"></i></button>
+                                        @else
+                                            <button type="button" wire:click="deletePatch({{ $server->ServerID }})"
+                                                class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus  active:bg-info/25"><i
+                                                    class="fa fa-trash" aria-hidden="true"></i></button>
+                                        @endif
+
+                                    </td>
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+                <div class="mt-4">
+                    {{ $results->links('livewire.paginate-custom') }}
+                </div>
+            </div>
+        </div>
+</div>
\ No newline at end of file

resources/views/livewire/pages/send-patch/send-patch-edit.blade.php

-<div class="p-4 h-fit" x-data="{ tomGReady: false }" x-show="tomGReady">
+<div class="border-0 shadow-none">
+    <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;">
+                <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+
+        </div>
+    </div>
+    <div class="bg-main-container rounded-md">
+        <div class="max-w-full mx-auto px-5 text-left flex flex-col items-start">
+            <h2 class="text-2xl  text-black ">
+                Send Patch to Customer
+            </h2>
+            <a href="/send-patch" type="button" class="btn ml-1 my-3 text-white bg-primary px-3 py-2">Back</a>
+        </div>
+        <div class="" x-data="{ tomGReady: false , serverKeyWaitingSend : @entangle('serverKeyWaitingSend').defer }" x-show="true">
             <div class="mb-4">
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5">
+                <div class="grid grid-cols-12 gap-2 ">
+                    <div class="bg-main-container col-span-3 p-6 rounded-lg shadow-md">
+                        <!-- Server Information Group -->
+                        <div class="mb-6">
+                            <h3 class="text-lg font-medium text-gray-900 mb-2">Server Key</h3>
+                            <div class="grid grid-cols-1  gap-4"> 
+                                <div class="relative">
+                                    <div class="relative flex items-center w-full">
+                                        <input type="text"
+                                            class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
+                                            wire:model.debounce.500ms="serverkey" placeholder="Search for a server key">
+                                        <span wire:loading wire:target="serverkey" class="absolute right-3">
+                                            <svg class="animate-spin h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                                <path class="opacity-75" fill="currentColor"
+                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                                </path>
+                                            </svg>
+                                        </span>
+                                    </div>
+                                
+                                    @if (!empty($serverkey) && $showSearch)
+                                        <ul class="absolute left-0 right-0 mt-2 border border-gray-200 rounded-md max-h-64 overflow-auto z-50 bg-white">
+                                            @forelse($resultsServerkey as $result)
+                                                <li class="p-2 hover:bg-gray-100 cursor-pointer" wire:click="selectResult('{{ $result->SNKEY }}')">
+                                                    {{ $result->SNKEY }}
+                                                </li>
+                                            @empty
+                                                <li class="p-2 text-gray-500">No results found</li>
+                                            @endforelse
+                                        </ul>
+                                    @endif
+                                </div>
+                                
+                            </div>
+                        </div>
+                        <div class="mb-6">
+                            <h3 class="text-lg font-medium text-gray-900 mb-2">Server Information</h3>
+                            <div class="grid grid-cols-1  gap-4">
                                 <div>
-                <label for="server_of" class="block text-sm font-medium text-gray-700">Server of</label>
+                                    <label for="server_of" class="block text-sm font-medium text-gray-700">Server
+                                        of</label>
                                     <select id="server_of" name="server_of" wire:model="selectedOwnerType"
                                         class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                         <option value="">Please Select</option>
                                         @foreach ($ownerType as $type)
-                        <option value="{{ $type->owntype_code }}">{{ $type->owntype_description }}</option>
+                                            <option  value="{{ $type->owntype_code }}">{{ $type->owntype_description }}
+                                            </option>
                                         @endforeach
                                     </select>
                                 </div>
-            <div class="" wire:ignore>
-                <label for="server_key" class="block text-sm font-medium text-gray-700">Server Key:</label>
-                <input id="server_key" class="mt-1.5 relative flex w-full" x-data="{
-                    serverKeyLists: @entangle('server_lists'),
-                    serverKeyOption: @entangle('serverKeyOption')
-                }"
-                    x-init="serverKeyLists = [];
-                    const tempLicense = pages.serverLicenseSelect;
-                    tempLicense.serverkey.options = serverKeyOption;
-                    
-                    $el._x_tom = new Tom($el, {
-                        ...tempLicense.serverkey,
-                        onChange: (value) => {
-                            serverKeyLists = value;
-                        }
-                    });
 
-                    $el._x_tom.setValue(serverKeyLists);
-                    tomGReady = true;" type="text" placeholder="Search Server Key">
                             </div>
+                        </div>
+
+                        <!-- Company & Database Information Group -->
+                        <div class="mb-6">
+                            <h3 class="text-lg font-medium text-gray-900 mb-2">Company & Database Information</h3>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div>
-                <label for="company" class="block text-sm font-medium text-gray-700">Company</label>
+                                    <label for="company"
+                                        class="block text-sm font-medium text-gray-700">Company</label>
                                     <input type="text" id="company" name="company"
                                         class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                 </div>
                                 <div>
-                <label for="db_type" class="block text-sm font-medium text-gray-700">DB Type</label>
+                                    <label for="db_type" class="block text-sm font-medium text-gray-700">DB
+                                        Type</label>
                                     <input type="text" id="db_type" name="db_type"
                                         class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                 </div>
+                            </div>
+                        </div>
+
+                        <!-- Additional Information Group -->
+                        <div class="mb-6">
+                            <h3 class="text-lg font-medium text-gray-900 mb-2">Additional Information</h3>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div>
-                <label for="cur_ver" class="block text-sm font-medium text-gray-700">Cur. Ver.</label>
+                                    <label for="cur_ver" class="block text-sm font-medium text-gray-700">Cur.
+                                        Ver.</label>
                                     <input type="text" id="cur_ver" name="cur_ver"
                                         class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                 </div>
                                 <div>
-                <label for="hscode_method" class="block text-sm font-medium text-gray-700">HSCODE 2017 method</label>
+                                    <label for="hscode_method" class="block text-sm font-medium text-gray-700">HSCODE
+                                        2017 Method</label>
                                     <select id="hscode_method" name="hscode_method"
                                         class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                         <option>Please Select</option>
                                         <!-- Options -->
                                     </select>
                                 </div>
+                            </div>
+                        </div>
+
+                        <!-- Company Select Group -->
                         <div>
-                <label for="company_select" class="block text-sm font-medium text-gray-700">Company</label>
+                            <h3 class="text-lg font-medium text-gray-900 mb-2">Company Selection</h3>
+                            <div>
+                                <label for="company_select"
+                                    class="block text-sm font-medium text-gray-700">Company</label>
                                 <select id="company_select" name="company_select"
                                     class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                     <option>Please select company</option>
                                     <!-- Options -->
                                 </select>
                             </div>
-            <div class="flex space-x-2 mt-6">
-                {{-- <button class="btn bg-blue-500 text-white px-4 py-2 rounded">Add All List</button>
-                <button class="btn bg-red-500 text-white px-4 py-2 rounded">Delete All</button> --}}
+                        </div>
+                    </div>
+                    <div class="bg-main-container  p-6 rounded-lg shadow-md col-span-4">
+                        <h3 class="text-lg font-medium text-gray-900 mb-2">Server key waiting to send</h3>
+                        <div id="serverkey-list" class="overflow-y: auto">
+                            <div class="bg-gray m-3">
+                                @foreach ($serverKeyWaitingSend as $key => $serverkey)
+                                    <button class="bg-blue-500 text-white px-4 py-2 rounded m-1">{{ $serverkey["id"]. " : ".$serverkey["key"] }}</button>
+                                @endforeach
                             </div>
                         </div>
                     </div>
-    <div class="flex justify-end mb-4 space-x-2">
+                    <div class="grid grid-cols-1 place-items-center">
+                        <div class="rounded-lg">
+                            <div class="flex justify-center items-center mb-4 space-x-2">
                                 <button type="button" wire:click="sendPatch"
-            class="btn bg-stone-700 text-white px-4 py-2 rounded hover:bg-stone-800">Send</button>
-        <button
-            class="btn bg-white text-stone-700 border border-stone-700 px-4 py-2 rounded hover:bg-gray-100">Back</button>
-        {{-- <button class="btn bg-stone-600 text-white px-4 py-2 rounded hover:bg-stone-700">Resend</button> --}}
+                                    class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-main-container  p-6 rounded-lg shadow-md col-span-4"></div>
+                </div>
 
             </div>
+
+
             <div class="mb-4">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Server list</h3>
+                <h3 class="text-xl font-medium leading-6 text-black">Server list</h3>
             </div>
             <div class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
                 <button @click="isInputActive = !isInputActive"
@@ -101,30 +176,30 @@
                     </select>
                 </span>
             </div>
-    <div class="table-responsive">
-        <table class="min-w-full divide-y divide-gray-200">
+            <div class="is-scrollbar-hidden min-w-full table-responsive">
+                <table class="min-w-full is-hoverable table w-full divide-y divide-gray-200">
                     <thead>
                         <tr>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Choose</th>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Server ID</th>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Company</th>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Serverkey</th>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Status</th>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Task Date</th>
                             <th
-                        class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                 Action</th>
                         </tr>
                     </thead>
@@ -135,20 +210,25 @@
                                     <input type="checkbox"
                                         class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
                                 </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->ServerID }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->COMPANY }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->STATUS }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->TaskDate }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {{ $server->ServerID }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {{ $server->COMPANY }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->STATUS }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {{ $server->TaskDate }}</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                     @if ($server->TaskStatus == '999')
                                         <button type="button" wire:click="resendPatch({{ $server->ServerID }})"
-                                    class="btn bg-info text-white px-4 py-2 rounded"><i class="fa fa-repeat"
-                                        aria-hidden="true"></i></button>
+                                            class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus  active:bg-info/25"><i
+                                                class="fa fa-repeat" aria-hidden="true"></i></button>
                                     @else
                                         <button type="button" wire:click="deletePatch({{ $server->ServerID }})"
-                                    class="btn bg-info-focus text-white px-4 py-2 rounded"><i class="fa fa-trash"
-                                        aria-hidden="true"></i></button>
+                                            class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus  active:bg-info/25"><i
+                                                class="fa fa-trash" aria-hidden="true"></i></button>
                                     @endif
 
                                 </td>
@@ -160,4 +240,6 @@
             <div class="mt-4">
                 {{ $results->links('livewire.paginate-custom') }}
             </div>
+        </div>
+    </div>
 </div>

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

-<div>
-    <style>
-        table {
-            width: 100%;
-            table-layout: auto;
-        }
-
-        .table-responsive {
-            overflow-x: auto;
-        }
-    </style>
-    <main class="m-2">
-        <div wire:loading.class="flex" wire:loading.class.remove="hidden"
+<div class="border-0 shadow-none">
+    `    <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;">
                     <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
                 </div>
+    
+            </div>
         </div>
+    <main class="m-2">
         @if ($action === 'list')
             @if ($message)
                 <div class="alert alert-success">
@@ -26,14 +19,11 @@
                     </div>
                 </div>
             @endif
-            <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">
-
+            <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-main-container rounded-md">
                 <div class="pb-4">
                     <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-
-                            Patch Management(Send Patch to Customer)
+                        <h2 class="text-2xl  text-black ">
+                           Send Patch to Customer
                         </h2>
                     </div>
                     {{-- @include('components/search-by', ['searchBy' => $searchBy ?? []]) --}}
@@ -44,7 +34,7 @@
                             <div x-data="{ isInputActive: true }">
                                 <div class="flex gap-4 px-5 items-center">
                                     <button @click="isInputActive = !isInputActive"
-                                        class="btn  h-8 w-14 rounded-full p-0  hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
+                                        class="btn  h-8 w-14 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
                                             viewBox="0 0 24 24" stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
@@ -58,13 +48,13 @@
                                     </span>
                                     <span class="w-52" x-show="isInputActive === true">
                                         <select wire:model.defer="searchSelected"
-                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
+                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container  px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                                             @foreach ($searchBy as $key => $by)
                                                 <option value="{{ $key }}">{{ $by }}</option>
                                             @endforeach
                                         </select>
                                     </span>
-                                    <button type="button" class="bg-stone-700 text-white px-4 py-2 rounded" wire:click="search">Search</button>
+                                    <button type="button" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus" wire:click="search">Search</button>
                                 </div>
                             </div>
                         </div>
@@ -72,7 +62,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">
+                            <table class="is-hoverable table w-full text-left ">
                                 <thead>
                                     <tr>
                                         {{-- <th
@@ -80,35 +70,35 @@
                                         #
                                     </th> --}}
                                         <th
-                                            class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap rounded-tl-lg bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Patch ID
                                         </th>
                                         <th
-                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Patch Name
                                         </th>
                                         <th
-                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Description
                                         </th>
                                         <th
-                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Server
                                         </th>
                                         <th
-                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Date
                                         </th>
                                         <th
-                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Level
                                         </th>
                                         <th
-                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Remark
                                         </th>
                                         <th
-                                            class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            class="whitespace-nowrap rounded-tr-lg bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                             Action
                                         </th>
                                     </tr>
@@ -136,7 +126,7 @@
                                             <td class="whitespace-nowrap px-1 py-3 sm:px-2">
                                                 <div class="flex justify-center space-x-2">
                                                     <a wire:click="showpatchEditForm({{ $patch->PID }})"
-                                                        class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
+                                                        class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus  active:bg-info/25">
                                                         <i class="fa fa-edit"></i>
                                                     </a>
                                                 </div>

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

+<div class="bg-main-container">
+    <div class="max-w-full mx-auto px-5 ">
+        {{-- <div class="flex flex-wrap items-center"> --}}
+            <h2 class="text-2xl  text-black ">
+                Server License Management
+            </h2>
+            <a type="button" href="/server-license"
+                class="btn  m-3 text-white bg-primary px-3 py-2 hover:bg-primary-focus">Back</a>
+
+        {{-- </div> --}}
+        @if (session()->has('message'))
+            <div class="alert alert-success">
+                {{ session('message') }}
+            </div>
+        @endif
+        <div class="flex flex-wrap -mx-3 w-full bg-main-container items-center justify-center ">
+            <div class="w-4/5 p-5 mb-6 shadow-md rounded-lg">
+                <form>
+                    <!-- Server Key -->
+                    <div class="mb-4 flex items-center">
+                        <label for="serverKey" class="w-1/4 text-gray-700">Server Key</label>
+                        <input type="text" id="serverKey" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="serverKey">
+                    </div>
+
+                    <!-- Team -->
+                    <div class="mb-4 flex items-center">
+                        <label for="teamId" class="w-1/4 text-gray-700">Team</label>
+                        <select id="teamId" wire:model.defer="teamId"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            @foreach ($teams as $team)
+                                <option value="{{ $team->id }}">{{ $team->teamName }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Customer Sizing -->
+                    <div class="mb-4 flex items-center">
+                        <label for="customerSize" class="w-1/4 text-gray-700">Customer Sizing</label>
+                        <select id="customerSize" wire:model.defer="customerSize"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            @foreach ($sizings as $size)
+                                <option value="{{ $size->id }}">{{ $size->sizeName }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Customer Type -->
+                    <div class="mb-4 flex items-center">
+                        <label for="customerType" class="w-1/4 text-gray-700">Customer Type</label>
+                        <select id="customerType" wire:model.defer="customerType"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            @foreach ($customerTypes as $type)
+                                <option value="{{ $type->id }}">{{ $type->sizeTypeName }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Company -->
+                    <div class="mb-4 flex items-center">
+                        <label for="company" class="w-1/4 text-gray-700">Company</label>
+                        <input type="text" id="company" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="company">
+                    </div>
+
+                    <!-- Branch -->
+                    <div class="mb-4 flex items-center">
+                        <label for="branch" class="w-1/4 text-gray-700">Branch</label>
+                        <input type="text" id="branch" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="branch">
+                    </div>
+
+                    <!-- Status -->
+                    <div class="mb-4 flex items-center">
+                        <label class="w-1/4 text-gray-700">Status</label>
+                        <div class="flex items-center w-3/4">
+                            <label class="mr-4">
+                                <input type="radio" name="status" value="Y" wire:model.defer="status"> Yes
+                            </label>
+                            <label>
+                                <input type="radio" name="status" value="N" wire:model.defer="status"> No
+                            </label>
+                        </div>
+                    </div>
+
+                    <!-- Licensedate -->
+                    <div class="mb-4 flex items-center">
+                        <label for="licenseDate" class="w-1/4 text-gray-700">License Date</label>
+                        <input type="date" id="licenseDate" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="licenseDate">
+                    </div>
+
+                    <!-- PHP Version -->
+                    <div class="mb-4 flex items-center">
+                        <label for="phpVersionId" class="w-1/4 text-gray-700">PHP Version</label>
+                        <select id="phpVersionId" wire:model.defer="phpVersionId"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            @foreach ($phpVersions as $version)
+                                <option value="{{ $version->id }}">{{ $version->version }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Version ปัจจุบัน -->
+                    <div class="mb-4 flex items-center">
+                        <label for="currentVersion" class="w-1/4 text-gray-700">Version ปัจจุบัน</label>
+                        <input type="text" id="currentVersion" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="currentVersion">
+                    </div>
+
+                    <!-- วันที่ไป Install -->
+                    <div class="mb-4 flex items-center">
+                        <label for="installDate" class="w-1/4 text-gray-700">วันที่ไป Install</label>
+                        <input type="date" id="installDate" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="installDate">
+                    </div>
+
+                    <!-- Version ที่ลงครั้งแรก -->
+                    <div class="mb-4 flex items-center">
+                        <label for="installVersion" class="w-1/4 text-gray-700">Version ที่ลงครั้งแรก</label>
+                        <input type="text" id="installVersion" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="installVersion">
+                    </div>
+
+                    <!-- Database Type -->
+                    <div class="mb-4 flex items-center">
+                        <label for="databaseType" class="w-1/4 text-gray-700">Database Type</label>
+                        <select id="databaseType" wire:model.defer="databaseType"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            @foreach ($dbTypes as $db)
+                                <option value="{{ $db->id }}">{{ $db->dbName }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Server of -->
+                    <div class="mb-4 flex items-center">
+                        <label for="ownerType" class="w-1/4 text-gray-700">Server of</label>
+                        <select id="ownerType" wire:model.defer="ownerType"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            @foreach ($ownerTypes as $owner)
+                                <option value="{{ $owner->owntype_code }}">{{ $owner->owntype_description }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- HSCODE 2017 Method -->
+                    <div class="mb-4 flex items-center">
+                        <label for="hscodeMethod" class="w-1/4 text-gray-700">HSCODE 2017 Method</label>
+                        <select id="hscodeMethod" wire:model.defer="hscodeMethod"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md">
+                            <option value="1" {{ $hscodeMethod == '1' ? 'selected' : '' }}>Patch</option>
+                            <option value="2" {{ $hscodeMethod == '2' ? 'selected' : '' }}>Run script</option>
+                        </select>
+                    </div>
+
+                    <!-- URL / IP Address -->
+                    <div class="mb-4 flex items-center">
+                        <label for="customerUrl" class="w-1/4 text-gray-700">URL / IP Address</label>
+                        <input type="text" id="customerUrl" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="customerUrl">
+                    </div>
+
+                    <!-- Contact -->
+                    <div class="mb-4 flex items-center">
+                        <label for="contact" class="w-1/4 text-gray-700">Contact</label>
+                        <input type="text" id="contact" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                            wire:model.defer="contact">
+                    </div>
+
+                    <!-- Contact Customer Name -->
+                    <div class="mb-4 flex items-center">
+                        <label for="contactCustomerName" class="w-1/4 text-gray-700">Contact Customer Name</label>
+                        <input type="text" id="contactCustomerName"
+                            class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="contactCustomerName">
+                    </div>
+
+                    <!-- Save and Reset Buttons -->
+                    <div class="flex justify-center">
+                        <button type="button" wire:click="save"
+                            class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus">Save</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+    </div>
+</div>

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

+<div class="bg-main-container">
+    <div class="max-w-full mx-auto px-5 ">
+        {{-- <div class="flex flex-wrap items-center"> --}}
+        <h2 class="text-2xl  text-black ">
+            Server License Management
+        </h2>
+        <a type="button" href="/server-license"
+            class="btn  m-3 text-white bg-primary px-3 py-2 hover:bg-primary-focus">Back</a>
+
+        {{-- </div> --}}
+        @if ($message)
+            <div class="alert alert-success">
+                <div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show.transition.duration.500ms="show"
+                    class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
+                    {{ $message }}
+                </div>
+            </div>
+        @endif
+        <div class="flex flex-wrap -mx-3 w-full bg-main-container items-center justify-center " x-data="{ activeTab: 'form' }">
+            <div class="w-4/5 p-5 mb-6 shadow-md rounded-lg">
+                <div class="mb-4 border-b border-gray-200">
+                    <ul class="flex flex-wrap -mb-px">
+                        <li class="mr-2">
+                            <a href="#" @click.prevent="activeTab = 'form'"
+                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'form' }"
+                                class="inline-block py-2 px-4">Form</a>
+                        </li>
+                        <li class="mr-2">
+                            <a href="#" @click.prevent="activeTab = 'download'"
+                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'download' }"
+                                class="inline-block py-2 px-4">Download</a>
+                        </li>
+                    </ul>
+                </div>
+                <div x-show="activeTab === 'form'">
+                    <form>
+                        <!-- Server Key -->
+                        <div class="mb-4 flex items-center">
+                            <label for="serverKey" class="w-1/4 text-gray-700">Server Key</label>
+                            <input type="text" id="serverKey" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                                wire:model.defer="serverKey">
+                        </div>
+
+                        <!-- Team -->
+                        <div class="mb-4 flex items-center">
+                            <label for="teamId" class="w-1/4 text-gray-700">Team</label>
+                            <select id="teamId" wire:model.defer="teamId"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                @foreach ($teams as $team)
+                                    <option value="{{ is_object($team) ? $team->id : $team['id'] }}">
+                                        {{ is_object($team) ? $team->teamName : $team['teamName'] }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <!-- Customer Sizing -->
+                        <div class="mb-4 flex items-center">
+                            <label for="customerSize" class="w-1/4 text-gray-700">Customer Sizing</label>
+                            <select id="customerSize" wire:model.defer="customerSize"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                @foreach ($sizings as $size)
+                                    <option value="{{ is_object($size) ? $size->id : $size['id'] }}">
+                                        {{ is_object($size) ? $size->sizeName : $size['sizeName'] }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <!-- Customer Type -->
+                        <div class="mb-4 flex items-center">
+                            <label for="customerType" class="w-1/4 text-gray-700">Customer Type</label>
+                            <select id="customerType" wire:model.defer="customerType"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                @foreach ($customerTypes as $type)
+                                    <option value="{{ is_object($type) ? $type->id : $type['id'] }}">
+                                        {{ is_object($type) ? $type->sizeTypeName : $type['sizeTypeName'] }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <!-- Company -->
+                        <div class="mb-4 flex items-center">
+                            <label for="company" class="w-1/4 text-gray-700">Company</label>
+                            <input type="text" id="company" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                                wire:model.defer="company">
+                        </div>
+
+                        <!-- Branch -->
+                        <div class="mb-4 flex items-center">
+                            <label for="branch" class="w-1/4 text-gray-700">Branch</label>
+                            <input type="text" id="branch" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                                wire:model.defer="branch">
+                        </div>
+
+                        <!-- Status -->
+                        <div class="mb-4 flex items-center">
+                            <label class="w-1/4 text-gray-700">Status</label>
+                            <div class="flex items-center w-3/4">
+                                <label class="mr-4">
+                                    <input type="radio" name="status" value="Y" wire:model.defer="status"> Yes
+                                </label>
+                                <label>
+                                    <input type="radio" name="status" value="N" wire:model.defer="status"> No
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Licensedate -->
+                        <div class="mb-4 flex items-center">
+                            <label for="licenseDate" class="w-1/4 text-gray-700">License Date</label>
+                            <input type="date" id="licenseDate" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                                wire:model.defer="licenseDate">
+                        </div>
+
+                        <!-- PHP Version -->
+                        <div class="mb-4 flex items-center">
+                            <label for="phpVersionId" class="w-1/4 text-gray-700">PHP Version</label>
+                            <select id="phpVersionId" wire:model.defer="phpVersionId"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                @foreach ($phpVersions as $version)
+                                    <option value="{{ is_object($version) ? $version->id : $version['id'] }}">
+                                        {{ is_object($version) ? $version->version : $version['version'] }}</option>
+                                @endforeach
+
+                            </select>
+                        </div>
+
+                        <!-- Version ปัจจุบัน -->
+                        <div class="mb-4 flex items-center">
+                            <label for="currentVersion" class="w-1/4 text-gray-700">Version ปัจจุบัน</label>
+                            <input type="text" id="currentVersion"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="currentVersion">
+                        </div>
+
+                        <!-- วันที่ไป Install -->
+                        <div class="mb-4 flex items-center">
+                            <label for="installDate" class="w-1/4 text-gray-700">วันที่ไป Install</label>
+                            <input type="date" id="installDate"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="installDate">
+                        </div>
+
+                        <!-- Version ที่ลงครั้งแรก -->
+                        <div class="mb-4 flex items-center">
+                            <label for="installVersion" class="w-1/4 text-gray-700">Version ที่ลงครั้งแรก</label>
+                            <input type="text" id="installVersion"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="installVersion">
+                        </div>
+
+                        <!-- Database Type -->
+                        <div class="mb-4 flex items-center">
+                            <label for="databaseType" class="w-1/4 text-gray-700">Database Type</label>
+                            <select id="databaseType" wire:model.defer="databaseType"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                @foreach ($dbTypes as $db)
+                                    <option value="{{ is_object($db) ? $db->id : $db['id'] }}">
+                                        {{ is_object($db) ? $db->dbName : $db['dbName'] }}</option>
+                                @endforeach
+
+                            </select>
+                        </div>
+
+                        <!-- Server of -->
+                        <div class="mb-4 flex items-center">
+                            <label for="ownerType" class="w-1/4 text-gray-700">Server of</label>
+                            <select id="ownerType" wire:model.defer="ownerType"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                @foreach ($ownerTypes as $owner)
+                                    <option
+                                        value="{{ is_object($owner) ? $owner->owntype_code : $owner['owntype_code'] }}">
+                                        {{ is_object($owner) ? $owner->owntype_description : $owner['owntype_description'] }}
+                                    </option>
+                                @endforeach
+
+                            </select>
+                        </div>
+
+                        <!-- HSCODE 2017 Method -->
+                        <div class="mb-4 flex items-center">
+                            <label for="hscodeMethod" class="w-1/4 text-gray-700">HSCODE 2017 Method</label>
+                            <select id="hscodeMethod" wire:model.defer="hscodeMethod"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md">
+                                <option value="1" {{ $hscodeMethod == '1' ? 'selected' : '' }}>Patch</option>
+                                <option value="2" {{ $hscodeMethod == '2' ? 'selected' : '' }}>Run script
+                                </option>
+                            </select>
+                        </div>
+
+                        <!-- URL / IP Address -->
+                        <div class="mb-4 flex items-center">
+                            <label for="customerUrl" class="w-1/4 text-gray-700">URL / IP Address</label>
+                            <input type="text" id="customerUrl"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="customerUrl">
+                        </div>
+
+                        <!-- Contact -->
+                        <div class="mb-4 flex items-center">
+                            <label for="contact" class="w-1/4 text-gray-700">Contact</label>
+                            <input type="text" id="contact" class="w-3/4 p-2 border border-gray-300 rounded-md"
+                                wire:model.defer="contact">
+                        </div>
+
+                        <!-- Contact Customer Name -->
+                        <div class="mb-4 flex items-center">
+                            <label for="contactCustomerName" class="w-1/4 text-gray-700">Contact Customer Name</label>
+                            <input type="text" id="contactCustomerName"
+                                class="w-3/4 p-2 border border-gray-300 rounded-md"
+                                wire:model.defer="contactCustomerName">
+                        </div>
+
+                        <!-- Save and Reset Buttons -->
+                        <div class="flex justify-center">
+                            <button type="button" wire:click="updateLicense"
+                                class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus">Save</button>
+                        </div>
+                    </form>
+                </div>
+
+                <div x-show="activeTab === 'download'">
+                    test
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

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

+<div class="border-0 shadow-none">
+    ` <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;">
+                <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+
+        </div>
+    </div>
+    <div class="m-2">
+
+        @if ($action === 'list')
+            @if ($message)
+                <div class="alert alert-success">
+                    <div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)"
+                        x-show.transition.duration.500ms="show"
+                        class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
+                        {{ $message }}
+                    </div>
+                </div>
+            @endif
+            <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-main-container rounded-md">
+
+                <div class="pb-4">
+                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
+                        <h2 class="text-2xl  text-black ">
+                            Server License Management
+                        </h2>
+                    </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"
+                                wire:click="showServerLicenseAddForm">Add</button>
+                        </div>
+                        <div class="inline-flex flex-initial">
+                            <div x-data="{ isInputActive: true }">
+                                <div class="flex gap-4 px-5 items-center">
+                                    <button @click="isInputActive = !isInputActive"
+                                        class="btn  h-8 w-10 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container primary-focus hover:text-main-container active:text-main-container focus:text-main-container  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
+                                            viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                        </svg>
+                                    </button>
+                                    <span class="w-64" x-show="isInputActive === true">
+                                        <input
+                                            class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2  placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
+                                            placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
+                                    </span>
+                                    <span class="w-52" x-show="isInputActive === true">
+                                        <select wire:model.defer="searchSelected"
+                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
+                                            @foreach ($searchBy as $key => $by)
+                                                <option value="{{ $key }}">{{ $by }}</option>
+                                            @endforeach
+                                        </select>
+                                    </span>
+                                    <button type="button"
+                                        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
+                                        wire:click="search">Search</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <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">
+                                <thead>
+                                    <tr>
+                                        <th
+                                            class="whitespace-nowrap rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            #
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            Server Key
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            Company
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            Status
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            License Date
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            Current Version
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            Database
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap rounded-tr-lg bg-slate-300 px-2 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+
+                                    @foreach ($results as $license)
+                                        <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
+                                                        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="selectedLicense"
+                                                        value="{{ $license->ID }}" />
+                                                </label>
+                                            </td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $license->SNKEY }}</td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">
+                                                {{ \Illuminate\Support\Str::limit($license->COMPANY, 40) }}</td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $license->STATUS }}</td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $license->LICENSEDATE }}
+                                            </td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $license->CUR_VERSION }}
+                                            </td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">
+                                                {{ \Illuminate\Support\Str::limit($license->DATABASETYPE, 40) }}</td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">
+                                                <div class="flex justify-center space-x-2">
+                                                    <a wire:click="showServerLicenseEditForm({{ $license->ID }})"
+                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
+                                                        <i class="fa fa-edit"></i>
+                                                    </a>
+                                                    <a wire:click="showDeleteModal({{ $license->ID }})"
+                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
+                                                        <i class="fa fa-trash"></i>
+                                                    </a>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    @endforeach
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <livewire:delete-modal />
+                        {{ $results->links('livewire.paginate-custom') }}
+
+                    </div>
+                </div>
+            </div>
+        @elseif($action === 'add')
+            <livewire:pages.server-license.server-license-create />
+        @elseif($action === 'edit')
+            <livewire:pages.server-license.server-license-edit :editId="$editId" />
+        @endif
+        @push('script')
+            <script>
+                console.log("ddd")
+            </script>
+        @endpush
+    </div>
+</div>

routes/web.php

@@ -55,6 +55,7 @@ Route::middleware('auth')->group(function () {
     Route::get('/send-patch',  [SendPatchController::class, 'index']);
     Route::get('/send-multi-patch',  [SendPatchController::class, 'indexMulti']);
     Route::get('/delete-multi-patch',  [DeletePatchController::class, 'indexMulti']);
+    Route::get('/server-license',  [ServerLicenseController::class, 'index'])->name('server-license.index');
 
     Route::get('/exchange-rate',  [ExchangeRateController::class, 'index']);
     Route::get('/parameter',  [ParameterController::class, 'index']);
@@ -127,7 +128,7 @@ Route::middleware('auth')->group(function () {
        
    
     });
-    Route::get('send-patch' ,SendPatch::class)->name('send-patch');
+
 });