From fd6317373639a00268f1e0c027cf654cb369d813 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 7 Jul 2026 10:12:32 +0100
Subject: [PATCH] interim fix

---
 .../Company/Resources/views/_form.blade.php   |  39 ++---
 .../Company/Resources/views/index.blade.php   |  72 ++++++----
 resources/css/app.css                         | 133 ++++++++++++++----
 3 files changed, 168 insertions(+), 76 deletions(-)

diff --git a/Modules/Company/Resources/views/_form.blade.php b/Modules/Company/Resources/views/_form.blade.php
index e044d2d7..6316cd1b 100644
--- a/Modules/Company/Resources/views/_form.blade.php
+++ b/Modules/Company/Resources/views/_form.blade.php
@@ -1,6 +1,6 @@
 @csrf
 
-<div class="grid gap-5 md:grid-cols-2">
+<div class="grid gap-6 md:grid-cols-2">
     <div>
         <label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label>
         <input
@@ -47,30 +47,33 @@
         @enderror
     </div>
 
-    <div class="wms-select2-field">
+    <div class="wms-form-field wms-select2-field">
         <label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
-        <select
-            id="country_id"
-            name="country_id"
-            data-wms-select2
-            data-placeholder="Search and select a country"
-            class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
-        >
-            <option value="">Search and select a country</option>
-            @foreach ($countries as $country)
-                <option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)>
-                    {{ $country->effective_name ?? $country->name }}
-                </option>
-            @endforeach
-        </select>
+        <div class="mt-2">
+            <select
+                id="country_id"
+                name="country_id"
+                data-wms-select2
+                data-placeholder="Search and select country"
+                class="wms-country-select w-full"
+            >
+                <option value="">Search and select country</option>
+                @foreach ($countries as $country)
+                    <option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)>
+                        {{ $country->effective_name ?? $country->name }}
+                    </option>
+                @endforeach
+            </select>
+        </div>
+        <p class="mt-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">Start typing to filter the country list.</p>
         @error('country_id')
             <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
         @enderror
     </div>
 </div>
 
-<div class="mt-6 flex flex-wrap items-center gap-3">
-    <button class="rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 dark:bg-white dark:text-zinc-900">
+<div class="mt-8 flex flex-wrap items-center gap-3 border-t border-zinc-200 pt-6 dark:border-zinc-800">
+    <button class="inline-flex items-center justify-center rounded-xl bg-green-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-green-600/20 transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-green-500 dark:text-white dark:hover:bg-green-400 dark:focus:ring-offset-zinc-900">
         Save company
     </button>
 
diff --git a/Modules/Company/Resources/views/index.blade.php b/Modules/Company/Resources/views/index.blade.php
index b4515449..adb5d1f5 100644
--- a/Modules/Company/Resources/views/index.blade.php
+++ b/Modules/Company/Resources/views/index.blade.php
@@ -30,43 +30,55 @@
                 </a>
             </div>
 
-            <form method="POST" action="{{ route('platform.companies.store') }}" class="mt-5 grid gap-4 md:grid-cols-5">
+            <form method="POST" action="{{ route('platform.companies.store') }}" class="mt-6 grid gap-5 lg:grid-cols-12 lg:items-end">
                 @csrf
 
-                <input
-                    name="name"
-                    value="{{ old('name') }}"
-                    placeholder="Company name"
-                    class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
-                    required
-                >
+                <div class="lg:col-span-3">
+                    <label for="quick_company_name" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Company</label>
+                    <input
+                        id="quick_company_name"
+                        name="name"
+                        value="{{ old('name') }}"
+                        placeholder="Company name"
+                        class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+                        required
+                    >
+                </div>
 
-                <input
-                    name="billing_email"
-                    value="{{ old('billing_email') }}"
-                    placeholder="billing@example.com"
-                    type="email"
-                    class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
-                >
+                <div class="lg:col-span-3">
+                    <label for="quick_billing_email" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Billing email</label>
+                    <input
+                        id="quick_billing_email"
+                        name="billing_email"
+                        value="{{ old('billing_email') }}"
+                        placeholder="billing@example.com"
+                        type="email"
+                        class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+                    >
+                </div>
 
-                <select name="status" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" required>
-                    <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
-                    <option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
-                    <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
-                </select>
-
-                <div class="wms-select2-field">
-                    <select name="country_id" data-wms-select2 data-placeholder="Search country" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
-                    <option value="">Search country</option>
-                    @foreach ($countries as $country)
-                        <option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
-                            {{ $country->effective_name ?? $country->name }}
-                        </option>
-                    @endforeach
+                <div class="lg:col-span-2">
+                    <label for="quick_status" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Status</label>
+                    <select id="quick_status" name="status" class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" required>
+                        <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
+                        <option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
+                        <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
                     </select>
                 </div>
 
-                <button class="rounded-xl bg-zinc-900 px-4 py-2 font-semibold text-white dark:bg-white dark:text-zinc-900">
+                <div class="wms-select2-field lg:col-span-3">
+                    <label for="quick_country_id" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Country</label>
+                    <select id="quick_country_id" name="country_id" data-wms-select2 data-placeholder="Search country" class="wms-country-select w-full">
+                        <option value="">Search country</option>
+                        @foreach ($countries as $country)
+                            <option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
+                                {{ $country->effective_name ?? $country->name }}
+                            </option>
+                        @endforeach
+                    </select>
+                </div>
+
+                <button class="inline-flex h-11 items-center justify-center rounded-xl bg-green-600 px-5 text-sm font-bold text-white shadow-sm shadow-green-600/20 transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-green-500 dark:hover:bg-green-400 dark:focus:ring-offset-zinc-900 lg:col-span-1">
                     Create
                 </button>
             </form>
diff --git a/resources/css/app.css b/resources/css/app.css
index 5a7ff4d3..f677a995 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1414,90 +1414,142 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
 @layer components {
     .wms-select2-field .select2-container {
         width: 100% !important;
+        display: block;
     }
 
     .wms-select2-field .select2-container--default .select2-selection--single {
-        min-height: 2.875rem;
-        border-radius: 0.75rem;
-        border-color: rgb(212 212 216);
-        background: white;
-        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+        position: relative;
+        min-height: 2.75rem;
+        border: 1px solid rgb(212 212 216);
+        border-radius: 0.85rem;
+        background: linear-gradient(180deg, rgb(255 255 255), rgb(250 250 250));
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
         transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
     }
 
     .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        min-height: 2.75rem;
         padding-left: 0.95rem;
-        padding-right: 2.75rem;
+        padding-right: 3rem;
         color: rgb(24 24 27);
         font-size: 0.875rem;
-        font-weight: 600;
-        line-height: 2.875rem;
+        font-weight: 650;
+        line-height: 2.75rem;
     }
 
     .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
         color: rgb(113 113 122);
-        font-weight: 500;
+        font-weight: 550;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear {
+        position: absolute;
+        right: 2.6rem;
+        top: 0.62rem;
+        z-index: 2;
+        width: 1.35rem;
+        height: 1.35rem;
+        border-radius: 999px;
+        color: rgb(113 113 122);
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 1.25rem;
+        text-align: center;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear:hover {
+        background: rgb(244 244 245);
+        color: rgb(39 39 42);
     }
 
     .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
         top: 0.45rem;
-        right: 0.65rem;
-        width: 1.75rem;
-        height: 1.75rem;
-        border-radius: 0.55rem;
+        right: 0.55rem;
+        width: 1.85rem;
+        height: 1.85rem;
+        border-radius: 0.65rem;
         background: rgb(244 244 245);
+        border: 1px solid rgb(228 228 231);
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
+        border-color: rgb(82 82 91) transparent transparent transparent;
+        border-width: 5px 4px 0 4px;
+        margin-left: -4px;
+        margin-top: -2px;
+    }
+
+    .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+        border-color: transparent transparent rgb(82 82 91) transparent;
+        border-width: 0 4px 5px 4px;
     }
 
     .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
     .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
-        border-color: rgb(8 145 178);
-        box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28);
+        border-color: rgb(22 163 74);
+        background: white;
+        box-shadow: 0 0 0 4px rgb(34 197 94 / 0.14), 0 10px 24px rgb(15 23 42 / 0.08);
     }
 
     .select2-container--default .select2-dropdown {
         overflow: hidden;
+        margin-top: 0.35rem;
+        border: 1px solid rgb(212 212 216);
         border-radius: 1rem;
-        border-color: rgb(212 212 216);
         background: white;
         box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
     }
 
     .select2-container--default .select2-search--dropdown {
         padding: 0.75rem;
+        border-bottom: 1px solid rgb(244 244 245);
     }
 
     .select2-container--default .select2-search--dropdown .select2-search__field {
+        min-height: 2.5rem;
+        border: 1px solid rgb(212 212 216);
         border-radius: 0.75rem;
-        border-color: rgb(212 212 216);
-        padding: 0.55rem 0.75rem;
+        padding: 0.55rem 0.8rem;
+        background: rgb(250 250 250);
+        color: rgb(24 24 27);
         font-size: 0.875rem;
+        font-weight: 600;
         outline: none;
     }
 
     .select2-container--default .select2-search--dropdown .select2-search__field:focus {
-        border-color: rgb(8 145 178);
-        box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28);
+        border-color: rgb(22 163 74);
+        background: white;
+        box-shadow: 0 0 0 4px rgb(34 197 94 / 0.14);
+    }
+
+    .select2-container--default .select2-results > .select2-results__options {
+        max-height: 16rem;
+        padding: 0.35rem;
     }
 
     .select2-container--default .select2-results__option {
-        padding: 0.65rem 0.85rem;
+        margin: 0.1rem 0;
+        border-radius: 0.65rem;
+        padding: 0.65rem 0.8rem;
+        color: rgb(39 39 42);
         font-size: 0.875rem;
-        font-weight: 600;
+        font-weight: 650;
     }
 
     .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
-        background: rgb(8 145 178);
+        background: rgb(22 163 74);
         color: white;
     }
 
     .select2-container--default .select2-results__option--selected {
-        background: rgb(236 254 255);
-        color: rgb(14 116 144);
+        background: rgb(240 253 244);
+        color: rgb(21 128 61);
     }
 
     .dark .wms-select2-field .select2-container--default .select2-selection--single {
         border-color: rgb(63 63 70);
-        background: rgb(9 9 11);
+        background: linear-gradient(180deg, rgb(24 24 27), rgb(9 9 11));
     }
 
     .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
@@ -1509,13 +1561,34 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
     }
 
     .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
+        border-color: rgb(63 63 70);
         background: rgb(39 39 42);
     }
 
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
+        border-color: rgb(212 212 216) transparent transparent transparent;
+    }
+
+    .dark .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+        border-color: transparent transparent rgb(212 212 216) transparent;
+    }
+
+    .dark .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
+    .dark .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
+        border-color: rgb(34 197 94);
+        background: rgb(9 9 11);
+        box-shadow: 0 0 0 4px rgb(34 197 94 / 0.16);
+    }
+
     .dark .select2-container--default .select2-dropdown {
         border-color: rgb(63 63 70);
         background: rgb(24 24 27);
         color: rgb(244 244 245);
+        box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
+    }
+
+    .dark .select2-container--default .select2-search--dropdown {
+        border-bottom-color: rgb(39 39 42);
     }
 
     .dark .select2-container--default .select2-search--dropdown .select2-search__field {
@@ -1524,8 +1597,12 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
         color: white;
     }
 
+    .dark .select2-container--default .select2-results__option {
+        color: rgb(244 244 245);
+    }
+
     .dark .select2-container--default .select2-results__option--selected {
-        background: rgb(8 47 73);
-        color: rgb(165 243 252);
+        background: rgb(20 83 45);
+        color: rgb(220 252 231);
     }
 }