update

inventory/models.py

@@ -223,7 +223,7 @@ class CarMake(models.Model, LocalizedNameMixin):
     name = models.CharField(max_length=255, blank=True, null=True)
     slug = models.SlugField(max_length=255, unique=True, blank=True, null=True)
     arabic_name = models.CharField(max_length=255, blank=True, null=True)
-    logo = models.ImageField(_("logo"), upload_to="car_make", blank=True, null=True,default="user-logo.png")
+    logo = models.ImageField(_("logo"), upload_to="car_make", blank=True, null=True,default="user-logo.jpg")
     is_sa_import = models.BooleanField(default=False)
     car_type = models.SmallIntegerField(choices=CarType.choices, blank=True, null=True)
 
@@ -593,7 +593,7 @@ class AdditionalServices(models.Model, LocalizedNameMixin):
 
 
 class Car(Base):
-    
+
     item_model = models.OneToOneField(
         ItemModel,
         models.DO_NOTHING,
@@ -1288,7 +1288,7 @@ class Staff(models.Model, LocalizedNameMixin):
         max_length=200, blank=True, null=True, verbose_name=_("Address")
     )
     logo = models.ImageField(
-        upload_to="logos/staff", blank=True, null=True, verbose_name=_("Image"),default="user-logo.png"
+        upload_to="logos/staff", blank=True, null=True, verbose_name=_("Image"),default="user-logo.jpg"
     )
     thumbnail = ImageSpecField(
         source="logo",
@@ -1661,7 +1661,7 @@ class Organization(models.Model, LocalizedNameMixin):
         max_length=200, blank=True, null=True, verbose_name=_("Address")
     )
     logo = models.ImageField(
-        upload_to="logos", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.png"
+        upload_to="logos", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.jpg"
     )
     thumbnail = ImageSpecField(
         source="logo",
@@ -2481,7 +2481,7 @@ class Vendor(models.Model, LocalizedNameMixin):
     email = models.EmailField(max_length=255, verbose_name=_("Email Address"))
     address = models.CharField(max_length=200, verbose_name=_("Address"))
     logo = models.ImageField(
-        upload_to="logos/vendors", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.png"
+        upload_to="logos/vendors", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.jpg"
     )
     thumbnail = ImageSpecField(
         source="logo",

templates/account/signup-wizard-nkp.html

@@ -3,7 +3,7 @@
 {% load i18n static %}
 {% block content %}
     <section class="main my-2">
-        <div class="container-fluid">
+        <div class="container" style="max-width:60rem;">
             <div class="row form-container" id="form-container">
                 <div class="col-12 ">
                     <a class="d-flex flex-center text-decoration-none mb-4"
@@ -23,7 +23,9 @@
                         <h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
                         <p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
                     </div>
-                    <div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
+                    <div data-signals="{ form1:{email:'',password:'',confirm_password:''}, form2:{name:'',arabic_name:'',phone_number:''}, form3:{crn:'',vrn:'',address:''}, form1_valid:true, form2_valid:true, form3_valid:true, email_valid:true, password_valid:true, phone_number_valid:true }"
+                         class="card theme-wizard"
+                         data-theme-wizard="data-theme-wizard">
                         <div class="card-header pt-3 pb-2 ">
                             <ul class="nav justify-content-between nav-wizard nav-wizard-success"
                                 role="tablist">
@@ -84,7 +86,7 @@
                             </ul>
                         </div>
                         <div class="card-body pt-4 pb-0">
-                            <div class="tab-content">
+                            <div class="tab-content" data-signals-current_form="1">
                                 <div class="tab-pane active"
                                      role="tabpanel"
                                      aria-labelledby="bootstrap-wizard-validation-tab1"
@@ -92,11 +94,57 @@
                                     <form class="needs-validation"
                                           id="wizardValidationForm1"
                                           novalidate="novalidate"
-                                          data-wizard-form="1">
+                                          data-wizard-form="1"
-                                        {{ form1|crispy }}
+                                          data-ref-f1>
-                                        <a class="fs-10 text-decoration-none"
+                                        <div class="mb-3">
-                                           href="{% url 'terms_and_privacy' %}"
+                                            <label for="email"
-                                           target="_blank">{{ _("Read Terms of Service and Privacy Policy") }}</a>
+                                                   data-class="{'text-danger':!$email_valid}"
+                                                   class="form-label">
+                                                {% trans "Email" %}
+                                                <span data-show="!$email_valid" class="text-danger">*</span>
+                                            </label>
+                                            <input data-on-input="$email_valid = validateEmail($form1.email)"
+                                                   data-on-blur="$email_valid = validateEmail($form1.email)"
+                                                   data-bind-form1.email
+                                                   data-class="{'is-invalid': !$email_valid , 'is-valid': ($email_valid && $form1.email)}"
+                                                   type="email"
+                                                   class="form-control"
+                                                   id="email"
+                                                   name="email"
+                                                   required>
+                                            <div class="invalid-feedback" data-show="!$email_valid">{% trans "Please enter a valid email address" %}</div>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="password" class="form-label">{% trans "Password" %}</label>
+                                            <input data-bind-form1.password
+                                                   type="password"
+                                                   data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   class="form-control"
+                                                   data-class="{'is-invalid':($form1.password.length && $form1.password.length < 8),'is-valid':$form1.password.length > 8 }"
+                                                   id="password"
+                                                   name="password"
+                                                   required>
+                                            <div class="invalid-feedback" data-show="!$password_valid">
+                                                {% trans "Password does not match. or length is less than 8 characters." %}
+                                            </div>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="confirm_password" class="form-label">{% trans "Confirm Password" %}</label>
+                                            <span class="text-danger" data-show="!$password_valid">*</span>
+                                            <input data-bind-form1.confirm_password
+                                                   data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   type="password"
+                                                   class="form-control"
+                                                   data-class="{'is-invalid':!$password_valid,'is-valid':($password_valid&& $form1.confirm_password)}"
+                                                   id="confirm_password"
+                                                   name="confirm_password"
+                                                   required>
+                                            <div class="invalid-feedback" data-show="!$password_valid">
+                                                {% trans "Password does not match. or length is less than 8 characters." %}
+                                            </div>
+                                        </div>
                                     </form>
                                 </div>
                                 <div class="tab-pane"
@@ -106,8 +154,39 @@
                                     <form class="needs-validation"
                                           id="wizardValidationForm2"
                                           novalidate="novalidate"
-                                          data-wizard-form="2">
+                                          data-wizard-form="2"
-                                        {{ form2|crispy }}
+                                          data-ref-f2>
+                                        <div class="mb-3">
+                                            <label for="name" class="form-label">{% trans "Name" %}</label>
+                                            <input data-bind-form2.name
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="name"
+                                                   name="name"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="arabic_name" class="form-label">{% trans "Arabic Name" %}</label>
+                                            <input data-bind-form2.arabic_name
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="arabic_name"
+                                                   name="arabic_name"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="phone_number" class="form-label">{% trans "Phone Number" %}</label>
+                                            <span data-show="!$phone_number_valid" class="text-danger">*</span>
+                                            <input data-bind-form2.phone_number
+                                                   type="tel"
+                                                   data-class="{'is-invalid':!$phone_number_valid}"
+                                                   class="form-control"
+                                                   id="phone_number"
+                                                   name="phone_number"
+                                                   required
+                                                   data-on-input="$phone_number_valid = validate_sa_phone_number($form2.phone_number)">
+                                            <div class="invalid-feedback" data-show="!$phone_number_valid">{% trans "Please enter a valid phone number" %}</div>
+                                        </div>
                                     </form>
                                 </div>
                                 <div class="tab-pane"
@@ -117,8 +196,34 @@
                                     <form class="needs-validation"
                                           id="wizardValidationForm3"
                                           novalidate="novalidate"
-                                          data-wizard-form="3">
+                                          data-wizard-form="3"
-                                        {{ form3|crispy }}
+                                          data-ref-f3>
+                                        <div class="mb-3">
+                                            <label for="crn" class="form-label">{% trans "CRN" %}</label>
+                                            <input data-bind-form3.crn
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="crn"
+                                                   name="crn"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="vrn" class="form-label">{% trans "VRN" %}</label>
+                                            <input data-bind-form3.vrn
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="vrn"
+                                                   name="vrn"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="address" class="form-label">{% trans "Address" %}</label>
+                                            <textarea data-bind-form3.address
+                                                      class="form-control"
+                                                      id="address"
+                                                      name="address"
+                                                      required></textarea>
+                                        </div>
                                     </form>
                                 </div>
                                 <div class="tab-pane"
@@ -146,22 +251,28 @@
                                                     <br>
                                                     {% trans 'anytime' %} {% trans 'anywhere' %}
                                                 </p>
-                                                <button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
+                                                <button data-on-click="sendFormData()"
+                                                        class="btn btn-primary px-6"
+                                                        id='submit_btn'>{% trans 'Submit' %}</button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="card-footer border-top-0"
+                        <div data-computed-form1_valid="validatePassword($form1.password,$form1.confirm_password) && validateEmail($form1.email)"
+                             class="card-footer border-top-0"
                              data-wizard-footer="data-wizard-footer">
                             <div class="d-flex pager wizard list-inline mb-0">
                                 <button class="d-none btn btn-link ps-0"
                                         type="button"
                                         data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
                                 <div class="flex-1 text-end">
-                                    <button class="btn btn-phoenix-primary px-6 px-sm-6 next"
+                                    <button data-attr-disabled="!$form1_valid"
-                                            type="submit"
+                                            data-attr-disabled="!$phone_number_valid"
+                                            class="btn btn-phoenix-primary px-6 px-sm-6 next"
+                                            type="button"
+                                            id="next_btn"
                                             data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
                                 </div>
                             </div>
@@ -177,160 +288,36 @@
     <script src="{% static 'js/phoenix.js' %}"></script>
 {% endblock content %}
 {% block customJS %}
-    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
+    <script src="{% static 'js/main.js' %}"></script>
+    <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
+    <script type="module"
+            src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"></script>
     <script>
-    const validator = new JustValidate('#wizardValidationForm1', {
+    function validatePassword(password, confirmPassword) {
-      validateBeforeSubmitting: true,
+      return password === confirmPassword && password.length > 7 && password !== '';
-    });
+    }
-    const validator1 = new JustValidate('#wizardValidationForm2', {
+    function validateEmail(email) {
-      validateBeforeSubmitting: true,
+      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    });
+      return emailRegex.test(email) && email !== '';
-
+    }
-    validator1.addField('#wizardValidationForm2 [name="phone_number"]', [
+    function validateform2(name,arabic_name,phone_number) {
-      {
+      if (name === '' || arabic_name === '' || phone_number === '' || phone_number.length < 10 || !phone_number.startsWith('056')) {
-        rule: 'required',
+        return false;
-      },
-      {
-        rule: 'customRegexp',
-        value: /^05\d{8}$/,
-        errorMessage: '{% trans 'Please enter a valid phone number' %}',
-      },
-      {
-        rule: 'maxLength',
-        value: 10,
-        errorMessage: '{% trans 'Please enter a valid phone number' %}',
-      },
-
-    ]);
-
-    validator.addField('#wizardValidationForm1 [name="email"]', [
-      {
-        rule: 'required',
-      },
-      {
-        rule: 'email',
-      },
-    ]);
-
-    validator.addField('#wizardValidationForm1 [name="password"]', [
-      {
-        rule: 'required',
-      },
-      {
-        rule: 'minLength',
-        value: 6,
-      },
-
-    ]);
-    validator.addField('#wizardValidationForm1 [name="confirm_password"]', [
-      {
-        rule: 'required',
-      },
-      {
-        rule: 'minLength',
-        value: 6,
-        errorMessage: '{% trans 'Password does not match' %}',
-      },
-      {
-        validator: (value, context) => {
-          if (value !== document.querySelector('#id_password').value) {
-            return false;
-          }
-          return true;
-        },
-      },
-    ])
-    validator.addField('#wizardValidationForm1 [name="terms"]', [
-      {
-        rule: 'required',
-      },
-    ])
-
-
-    /*
-    validator = new JustValidate('#wizardValidationForm1', {
-      rules: {
-        email: {
-          required: true,
-          email: true,
-        },
-        password: {
-          required: true,
-          min: 6,
-        },
-        confirm_password: {
-          required: true,
-          min: 6,
-          equalTo: '#password',
-        },
-      },
-      messages: {
-        name: {
-          required: 'Please enter your name',
-        },
-        email: {
-          required: 'Please enter your email',
-          email: 'Please enter a valid email address',
-        },
-        password: {
-          required: 'Please enter your password',
-          min: 'Password must be at least 6 characters',
-        },
-        confirm_password: {
-          required: 'Please confirm your password',
-          min: 'Password must be at least 6 characters',
-          equalTo: 'Passwords do not match',
-        },
-        }
-    })
-        */
-    const url = "{% url 'account_signup' %}";
-    let submit_btn = document.getElementById('submit_btn');
-    const csrftoken = getCookie('csrftoken');
-
-    submit_btn.addEventListener('click', async () => {
-      const allFormData = getAllFormData();
-
-      try {
-        showLoading();
-        const response = await fetch(url, {
-          method: 'POST',
-          headers: {
-            'X-CSRFToken': csrftoken,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(allFormData),
-        });
-        hideLoading();
-        const data = await response.json();
-        if (response.ok) {
-          notify("success","Account created successfully");
-          setTimeout(() => {
-            window.location.href = "{% url 'account_login' %}";
-          }, 1000);
-        } else {
-          notify("error",data.error);
-        }
-      } catch (error) {
-        notify("error",error);
       }
-
+      return true
-    });
+    }
-
+    function validate_sa_phone_number(phone_number) {
+      const phone_numberRegex = /^056[0-9]{7}$/;
+      return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
+    }
     function getAllFormData() {
-      const forms = document.querySelectorAll('form');
+      const forms = document.querySelectorAll('.needs-validation');
       const formData = {};
-
+      forms.forEach(form => {
-      forms.forEach((form, index) => {
+        const fields = form.querySelectorAll('input,textarea,select');
-        const formId = form.id || `form${index + 1}`;
+        fields.forEach(field => {
-        formData[formId] = {};
+          formData[field.name] = field.value;
-
+        });
-        const formElements = form.elements;
-        for (let element of formElements) {
-          if (element.name) {
-            formData[formId][element.name] = element.value;
-          }
-        }
       });
       return formData;
     }
@@ -370,5 +357,33 @@
       }
       return cookieValue;
     }
+    async function sendFormData() {
+      const formData = getAllFormData();
+      const url = "{% url 'account_signup' %}";
+      const csrftoken = getCookie('csrftoken');
+      try {
+        showLoading();
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: {
+            'X-CSRFToken': '{{csrf_token}}',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(formData),
+        });
+        hideLoading();
+        const data = await response.json();
+        if (response.ok) {
+          notify("success","Account created successfully");
+          setTimeout(() => {
+            window.location.href = "{% url 'account_login' %}";
+          }, 1000);
+        } else {
+          notify("error",data.error);
+        }
+      } catch (error) {
+        notify("error",error);
+      }
+    }
     </script>
 {% endblock customJS %}

templates/account/signup-wizard.html

@@ -307,7 +307,7 @@
       return true
     }
     function validate_sa_phone_number(phone_number) {
-      const phone_numberRegex = /^056[0-9]{7}$/;
+      const phone_numberRegex = /^05[0-9]{8}$/;
       return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
     }
     function getAllFormData() {

templates/base.html

@@ -66,7 +66,7 @@
                   rel="stylesheet"
                   id="user-style-default">
         {% endif %}
-        
+
 
         <script src="{% static 'js/main.js' %}"></script>
         <script src="{% static 'js/jquery.min.js' %}"></script>
@@ -83,7 +83,7 @@
                 {% include "plans/expiration_messages.html" %}
                 {% block period_navigation %}
                 {% endblock period_navigation %}
-                <div id="main_content" class="fade-me-in" hx-boost="false" hx-target="#main_content" hx-select="#main_content" hx-swap="innerHTML transition:true" hx-select-oob="#toast-container" hx-history-elt>
+                <div id="main_content" class="fade-me-in" hx-boost="true" hx-target="#main_content" hx-select="#main_content" hx-swap="innerHTML transition:true" hx-select-oob="#toast-container" hx-history-elt>
                      <div id="spinner" class="htmx-indicator spinner-bg">
                         <img src="{% static 'spinner.svg' %}" width="100" height="100" alt="">
                     </div>

templates/empty-illustration-page.html

@@ -1,18 +1,18 @@
 {% load static %}
-
+{% load i18n %}
 
 <style>
-   
+
     .empty-state-container {
         background-color: #ffffff;
-        padding: 40px;
+        padding: 50px;
-        border-radius: 15px; /* Rounded corners */
+        border-radius: 5px; /* Rounded corners */
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow */
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtle shadow */
         text-align: center;
-        max-width: 80rem; /* Max width for content - made wider */
+        max-width: 70rem; /* Max width for content - made wider */
         width: 90%; /* Fluid width */
-        margin: 10px auto; /* Added margin-top and auto for horizontal centering */
+        margin: 0px auto; /* Added margin-top and auto for horizontal centering */
-        max-height: auto; /* Added min-height to control the height */
+        max-height: 80vh; /* Added min-height to control the height */
         display: flex; /* Use flexbox for vertical centering of content */
         flex-direction: column; /* Stack children vertically */
         justify-content: center; /* Center content vertically */
@@ -20,8 +20,8 @@
     }
     .empty-state-image {
         max-width: 50%; /* Responsive image size */
-        height: auto;
+        height: auto%;
-        margin-bottom: 10px;
+
         border-radius: 10px; /* Rounded corners for image */
     }
     .empty-state-title {
@@ -42,14 +42,16 @@
     <img src="{% static 'images/logos/no-content-new.jpg' %}" alt="No-empty-state-image" class="empty-state-image">
 
     <!-- Title -->
-    <h3 class="empty-state-title">No {{ value|capfirst }} Yet</h3>
+    <h3 class="empty-state-title">{% trans "No" %} {{ value|capfirst }} {% trans "Yet" %}</h3>
 
     <!-- Description -->
     <p class="empty-state-text">
-        It looks like you haven't added any {{ value }} to your account.
+        {% trans "It looks like you haven't added any {{ value }} to your account.
-        Click the button below to get started and add your first {{ value }}!
+        Click the button below to get started and add your first {{ value }}!" %}
     </p>
 
     <!-- Call to Action Button -->
-    <a class="btn btn-lg btn-primary" href="{{ url }}">Create New {{ value|capfirst }} </a>
+    <a class="btn btn-lg btn-primary" href="{{ url }}">
+        <i class="fa fa-plus me-2"></i>{% trans "Create New " %}{{ value|capfirst }}
+    </a>
 </div>

templates/users/user_list.html

@@ -55,7 +55,7 @@
                                             {% if user.logo %}
                                                 <img class="avatar-img rounded-circle"
                                                      src="{{user.thumbnail.url}}"
-                                                     onerror="this.src='/static/user-logo.png'"
+                                                     onerror="this.src='/static/user-logo.jpg'"
                                                      alt="Logo">
                                             {% endif %}
                                         </div>