From 4698351e58c0038c2e0186b60610cd5e041b6892 Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Sun, 14 Dec 2025 08:18:51 +0545
Subject: [PATCH] feat(clients/partials): improve client form functionality and
 validation

Enhancements to the client form include phone number validation and interface improvements. The short code field is now auto-generated and disabled, while the phone input uses a proper widget with real-time validation.

**New Features**
- Added **Phone Number Validation** using libphonenumber-js with real-time feedback
- Implemented **Phone Input Widget** with country code selection

**Enhancements & Refinements**
- **Short Code Field** changed to read-only with "Auto-generated" placeholder
- Updated form styling for **Phone Input** using `join` container class
- Added phone validation script to automatically highlight valid/invalid entries

**Bug Fixes**
- Fixed potential inconsistency in phone number handling by replacing manual input with proper form widget
---
 templates/clients/partials/client_form.html | 40 ++++++++++++++++++---
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/templates/clients/partials/client_form.html b/templates/clients/partials/client_form.html
index 83586e4..d3ceb57 100644
--- a/templates/clients/partials/client_form.html
+++ b/templates/clients/partials/client_form.html
@@ -72,7 +72,8 @@
                 <div>
                     <label class="label-text" for="{{ form.short_code.id_for_label }}">Short Code</label>
                     <input type="text" name="{{ form.short_code.name }}" id="{{ form.short_code.id_for_label }}"
-                        value="{{ form.short_code.value|default:'' }}" class="input w-full" placeholder="Optional" />
+                        value="{{ form.short_code.value|default:'' }}" class="input w-full bg-base-200"
+                        placeholder="Auto-generated" disabled />
                     {% if form.short_code.errors %}
                     <p class="text-error text-sm mt-1">{{ form.short_code.errors.0 }}</p>
                     {% endif %}
@@ -106,9 +107,9 @@
                 </div>
                 <div>
                     <label class="label-text" for="{{ form.phone.id_for_label }}">Phone</label>
-                    <!-- Using simple input for phone to avoid widget complexity for now -->
-                    <input type="tel" name="{{ form.phone.name }}_0" id="{{ form.phone.id_for_label }}_0"
-                        value="{{ form.phone.value.0|default:'' }}" class="input w-full" placeholder="Phone Number" />
+                    <div class="join w-full">
+                        {{ form.phone }}
+                    </div>
                     {% if form.phone.errors %}
                     <p class="text-error text-sm mt-1">{{ form.phone.errors.0 }}</p>
                     {% endif %}
@@ -150,11 +151,42 @@
     </form>
 </div>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.10.49/libphonenumber-js.min.js"></script>
 <script>
     (function () {
         const stepper = document.getElementById('wizard-validation-horizontal');
         if (!stepper) return;
 
+        // Phone Validation Logic
+        const phoneSelect = stepper.querySelector('select[name$="_0"]');
+        const phoneInput = stepper.querySelector('input[name$="_1"]');
+
+        if (phoneSelect && phoneInput) {
+            const validatePhone = () => {
+                const country = phoneSelect.value;
+                const number = phoneInput.value;
+
+                // Clear previous validation styles
+                phoneInput.classList.remove('input-error', 'input-success');
+
+                if (!number) return; // Allow empty if not required, or handle required check separately
+
+                try {
+                    if (libphonenumber.isValidPhoneNumber(number, country)) {
+                        phoneInput.classList.add('input-success');
+                    } else {
+                        phoneInput.classList.add('input-error');
+                    }
+                } catch (e) {
+                    console.error("Phone validation error:", e);
+                    phoneInput.classList.add('input-error');
+                }
+            };
+
+            phoneInput.addEventListener('input', validatePhone);
+            phoneSelect.addEventListener('change', validatePhone);
+        }
+
         const navItems = stepper.querySelectorAll('[data-stepper-nav-item]');
         const contentItems = stepper.querySelectorAll('[data-stepper-content-item]');
         const backBtn = stepper.querySelector('[data-stepper-back-btn]');