From 0ae45a4810674d4789ada32d8899353bd206478d Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:01:19 -0600
Subject: [PATCH 01/26] add asterisk to bulletin dialog required fields

---
 enferno/admin/templates/admin/bulletins.html  |  2 ++
 .../admin/partials/bulletin_dialog.html       | 28 +++++++++++++------
 enferno/static/js/components/Asterisk.js      |  3 ++
 enferno/static/js/components/DualField.js     | 15 +++++++---
 4 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 enferno/static/js/components/Asterisk.js

diff --git a/enferno/admin/templates/admin/bulletins.html b/enferno/admin/templates/admin/bulletins.html
index 7e78d80d2..399386a07 100644
--- a/enferno/admin/templates/admin/bulletins.html
+++ b/enferno/admin/templates/admin/bulletins.html
@@ -433,6 +433,7 @@
     <script src="/static/js/components/EventsSection.js"></script>
     <script src="/static/js/components/ReadMore.js"></script>
     <script src="/static/js/components/FieldRenderer.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
 
 
     <script src="/static/js/components/MissingPersonCard.js"></script>
@@ -1758,6 +1759,7 @@
         app.component('IdNumberDynamicField', IdNumberDynamicField);
         app.component('EventsSection', EventsSection);
         app.component('FieldRenderer', FieldRenderer);
+        app.component('Asterisk', Asterisk);
 
         app.use(router).use(vuetify);
         router.isReady().then(() => {
diff --git a/enferno/admin/templates/admin/partials/bulletin_dialog.html b/enferno/admin/templates/admin/partials/bulletin_dialog.html
index 39217c019..71f67ace6 100644
--- a/enferno/admin/templates/admin/partials/bulletin_dialog.html
+++ b/enferno/admin/templates/admin/partials/bulletin_dialog.html
@@ -81,13 +81,17 @@
                             <div v-if="movableDynamicFields({ entityType: 'bulletin' }).length" class="form-grid mt-4">
                                 <template v-for="(field, index) in movableDynamicFields({ entityType: 'bulletin' })" :key="field.id">
                                     <div v-if="isFieldActive(field, 'title')" :class="[fieldClass(field), 'px-3 py-2']">
-                                        <dual-field v-model:original="editedItem.title" v-model:translation="editedItem.title_ar"
-                                            label-original="{{ _('Original Title') }}" label-translation="{{ _('Original Title (Ar)') }}" :rules="[
+                                        <dual-field v-model:original="editedItem.title" v-model:translation="editedItem.title_ar" label-translation="{{ _('Original Title (Ar)') }}"
+                                            :rules="[
                                                 validationRules.atLeastOneRequired(editedItem.title, '{{ _('Original Title is required.') }}'),
                                                 validationRules.maxLength(255),
                                             ]"
                                             v-bind="serverErrorPropsForDualField(serverErrors, 'item.title', 'item.title_ar')"
-                                        ></dual-field>
+                                        >
+                                            <template v-slot:label-original>
+                                                {{ _('Original Title') }} <Asterisk />
+                                            </template>
+                                        </dual-field>
                                     </div>
                                     <div v-else-if="isFieldActive(field, 'sjac_title')" :class="[fieldClass(field), 'px-3 py-2']">
                                         <dual-field v-model:original="editedItem.sjac_title" v-model:translation="editedItem.sjac_title_ar"
@@ -151,12 +155,14 @@
                                     <div v-else-if="isFieldActive(field, 'source_link')" :class="[fieldClass(field), 'px-3 py-2']">
                                         <v-sheet class="d-flex align-center">
                                             <v-text-field class="mx-2" :disabled="source_disabled" v-model="editedItem.source_link"
-                                                label="{{ _('Source Link') }}" :rules="[
+                                                :rules="[
                                                 validationRules.required('{{ _('Source link is required unless unavailable.')}}'),
                                                     validationRules.maxLength(255)
                                                 ]"
                                                 v-bind="serverErrorPropsForField(serverErrors, 'item.source_link')"
-                                            ></v-text-field>
+                                            >
+                                                <template v-slot:label>{{ _('Source Link') }} <Asterisk v-if="!source_disabled" /></template>
+                                            </v-text-field>
                                         
                                             <v-checkbox class="mx-2" label="{{ _('Not Available') }}" v-model="source_alt">
                                             </v-checkbox>
@@ -172,7 +178,9 @@
                                 <template v-for="(field, index) in fixedDynamicFields({ entityType: 'bulletin' })" :key="field.id">
                                     <div v-if="isFieldActive(field, 'comments')" :class="fieldClass(field)">
                                         <v-textarea required class="h-100" :rules="[validationRules.required()]" outlined v-model="editedItem.comments"
-                                            label="{{ _('Comments') }}" v-bind="serverErrorPropsForField(serverErrors, 'item.comments')">
+                                            v-bind="serverErrorPropsForField(serverErrors, 'item.comments')"
+                                        >
+                                            <template v-slot:label>{{ _('Comments') }} <Asterisk /></template>
                                         </v-textarea>
                                     </div>
                                     <div v-else-if="isFieldActive(field, 'status')" :class="fieldClass(field)">
@@ -185,9 +193,11 @@
                                     <v-select :color="editedItem.roles?.length ? 'blue darken-1' : 'error'"
                                         :prepend-icon="editedItem.roles?.length ? 'mdi-lock' : 'mdi-lock-open'" chips :disabled="unrestricted"
                                         item-title="name" return-object :items="allowedRoles" multiple v-model="editedItem.roles"
-                                        label="{{ _('Restrict Bulletin to Access Group(s)') }}" :rules="
-                                                                                                                    !unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []
-                                                                                                                " clearable></v-select>
+                                        :rules="!unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []"
+                                        clearable
+                                    >
+                                        <template v-slot:label>{{ _('Restrict Bulletin to Access Group(s)') }} <Asterisk v-if="!unrestricted" /></template>
+                                    </v-select>
                                     <v-checkbox color="error" @change="unrestricted? editedItem.roles = [] : null" class="mx-2"
                                         label="{{ _('No Access Groups') }}" v-model="unrestricted">
                                     </v-checkbox>
diff --git a/enferno/static/js/components/Asterisk.js b/enferno/static/js/components/Asterisk.js
new file mode 100644
index 000000000..ed7eb17aa
--- /dev/null
+++ b/enferno/static/js/components/Asterisk.js
@@ -0,0 +1,3 @@
+const Asterisk = Vue.defineComponent({
+  template: `<span class="text-error">*</span>`,
+});
\ No newline at end of file
diff --git a/enferno/static/js/components/DualField.js b/enferno/static/js/components/DualField.js
index 2291ed390..00d657bbb 100644
--- a/enferno/static/js/components/DualField.js
+++ b/enferno/static/js/components/DualField.js
@@ -79,7 +79,6 @@ const DualField = Vue.defineComponent({
     <v-sheet class="d-flex">
       <v-text-field
           v-if="isOriginalVisible"
-          :label="labelOriginal"
           v-model="localOriginal"
           @update:modelValue="$emit('update:original', $event)"
           variant="outlined"
@@ -88,6 +87,10 @@ const DualField = Vue.defineComponent({
           :rules="[...rulesOriginal, ...rules]"
           :error-messages="errorMessagesOriginal"
       >
+        <template v-slot:label>
+          <slot v-if="$slots['label-original']" name="label-original"></slot>
+          <template v-else>{{ labelOriginal }}</template>
+        </template>
         <template v-slot:append v-if="allowUnknown">
           <v-tooltip location="top" :text="unknownTooltip">
             <template v-slot:activator="{ props }">
@@ -100,7 +103,6 @@ const DualField = Vue.defineComponent({
 
       <v-text-field
           v-else
-          :label="labelTranslation"
           v-model="localTranslation"
           @update:modelValue="$emit('update:translation', $event)"
           variant="outlined"
@@ -108,7 +110,12 @@ const DualField = Vue.defineComponent({
           @click:append-inner="toggleField"
           :rules="[...rulesTranslation, ...rules]"
           :error-messages="errorMessagesTranslation"
-      ></v-text-field>
+      >
+        <template v-slot:label>
+          <slot v-if="$slots['label-translation']" name="label-translation"></slot>
+          <template v-else>{{ labelTranslation }}</template>
+        </template>
+      </v-text-field>
     </v-sheet>
   `,
-});
+});
\ No newline at end of file

From 5d1524fe0763cfef7db32de6c74192f1e534509e Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:29:54 -0600
Subject: [PATCH 02/26] allow passing a slot to date and search components

---
 enferno/static/js/components/PopDateField.js      | 7 ++++++-
 enferno/static/js/components/PopDateRangeField.js | 7 ++++++-
 enferno/static/js/components/PopDateTimeField.js  | 7 ++++++-
 enferno/static/js/components/SearchField.js       | 5 ++++-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/enferno/static/js/components/PopDateField.js b/enferno/static/js/components/PopDateField.js
index 2ec35389c..ad86f2da2 100644
--- a/enferno/static/js/components/PopDateField.js
+++ b/enferno/static/js/components/PopDateField.js
@@ -19,6 +19,11 @@ const PopDateField = {
     }
   },
   template: `
-    <v-date-input :placeholder="$root.dateFormats.standardDate" :display-format="(date) => $root.formatDate(date, $root.dateFormats.standardDate)" :input-format="$root.dateFormats.standardDate" class="flex-fill" :label="label" v-bind="$attrs" :rules="rules ?? [validationRules.date()]" variant="outlined" hide-actions v-model="date" @click:clear="$emit('update:modelValue', null)" clearable></v-date-input>
+    <v-date-input :placeholder="$root.dateFormats.standardDate" :display-format="(date) => $root.formatDate(date, $root.dateFormats.standardDate)" :input-format="$root.dateFormats.standardDate" class="flex-fill" v-bind="$attrs" :rules="rules ?? [validationRules.date()]" variant="outlined" hide-actions v-model="date" @click:clear="$emit('update:modelValue', null)" clearable>
+      <template v-slot:label>
+        <slot v-if="$slots['label']" name="label"></slot>
+        <template v-else>{{ label }}</template>
+      </template>
+    </v-date-input>
   `
 };
diff --git a/enferno/static/js/components/PopDateRangeField.js b/enferno/static/js/components/PopDateRangeField.js
index 195f26e19..4164ee4c5 100644
--- a/enferno/static/js/components/PopDateRangeField.js
+++ b/enferno/static/js/components/PopDateRangeField.js
@@ -29,6 +29,11 @@ const PopDateRangeField = {
   },
 
   template: `
-    <v-date-input :placeholder="$root.dateFormats.standardDate + ' - ' + $root.dateFormats.standardDate" :display-format="(date) => $root.formatDate(date, $root.dateFormats.standardDate)" :input-format="$root.dateFormats.standardDate" v-bind="$attrs" multiple="range" :label="label" variant="outlined" v-model="dates" @click:clear="$emit('update:modelValue', [])" clearable></v-date-input>
+    <v-date-input :placeholder="$root.dateFormats.standardDate + ' - ' + $root.dateFormats.standardDate" :display-format="(date) => $root.formatDate(date, $root.dateFormats.standardDate)" :input-format="$root.dateFormats.standardDate" v-bind="$attrs" multiple="range" variant="outlined" v-model="dates" @click:clear="$emit('update:modelValue', [])" clearable>
+      <template v-slot:label>
+        <slot v-if="$slots['label']" name="label"></slot>
+        <template v-else>{{ label }}</template>
+      </template>
+    </v-date-input>
   `
 };
diff --git a/enferno/static/js/components/PopDateTimeField.js b/enferno/static/js/components/PopDateTimeField.js
index e0b780fbf..5e04ed18a 100644
--- a/enferno/static/js/components/PopDateTimeField.js
+++ b/enferno/static/js/components/PopDateTimeField.js
@@ -75,7 +75,12 @@ const PopDateTimeField = Vue.defineComponent({
 
   template: `
       <v-sheet class="d-flex">
-        <pop-date-field :label="label" v-bind="$attrs" v-model="dt" :rules="rules"></pop-date-field>
+        <pop-date-field v-bind="$attrs" v-model="dt" :rules="rules">
+          <template v-slot:label>
+            <slot v-if="$slots['label']" name="label"></slot>
+            <template v-else>{{ label }}</template>
+          </template>
+        </pop-date-field>
         <v-text-field  variant="plain"  class="mt-2 ml-2 flex-0-0" @update:modelValue="emitInput" v-model="tm" type="time" :label="timeLabel"></v-text-field>
       </v-sheet>
     `,
diff --git a/enferno/static/js/components/SearchField.js b/enferno/static/js/components/SearchField.js
index 4bdb0316c..9a9931013 100644
--- a/enferno/static/js/components/SearchField.js
+++ b/enferno/static/js/components/SearchField.js
@@ -93,7 +93,6 @@ const SearchField = Vue.defineComponent({
       hide-no-data
       no-filter
       item-color="secondary"
-      :label="label"
       :items="items"
       :item-title="itemTitle"
       :item-value="itemValue"
@@ -108,6 +107,10 @@ const SearchField = Vue.defineComponent({
       :loading="loading"
       :rules="rules"
     >
+      <template v-slot:label>
+        <slot v-if="$slots['label']" name="label"></slot>
+        <template v-else>{{ label }}</template>
+      </template>
       <template v-if="showCopyIcon" v-slot:append>
         <v-btn icon="mdi-content-copy" variant="plain" @click="copyValue"></v-btn>
       </template>

From 8474a77f27fb587d771afeffd190751dbd3c3f8f Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:31:31 -0600
Subject: [PATCH 03/26] refactor events section to add dynamic asterisks and
 red outlines dynamically depending on selected values, this makes it clear to
 users what fields are required

---
 enferno/admin/templates/admin/jsapi.jinja2    |   2 +
 enferno/static/js/components/EventsSection.js | 227 +++++++++++++-----
 2 files changed, 166 insertions(+), 63 deletions(-)

diff --git a/enferno/admin/templates/admin/jsapi.jinja2 b/enferno/admin/templates/admin/jsapi.jinja2
index 348f0aa90..242abe8f1 100644
--- a/enferno/admin/templates/admin/jsapi.jinja2
+++ b/enferno/admin/templates/admin/jsapi.jinja2
@@ -40,6 +40,7 @@ markFieldAsRequired_: "{{ _('Make the field required') }}",
 markFieldAsSearchable_: "{{ _('Make the field searchable') }}",
 showField_: "{{ _('Show Field') }}",
 hideField_: "{{ _('Hide Field') }}",
+requiredFields_: "{{ _('Required fields') }}",
 showOption_: "{{ _('Show Option') }}",
 hideOption_: "{{ _('Hide Option') }}",
 deleteField_: "{{ _('Delete Field') }}",
@@ -121,6 +122,7 @@ status_: "{{ _('Status') }}",
 restrictToAccessGroups_: "{{ _('Restrict Actor to Access Group(s)') }}",
 noAccessAccessGroups_: "{{ _('No Access Access Groups') }}",
 profile_: "{{ _('Profile') }}",
+location_: "{{ _('Location') }}",
 
 showMore_: "{{ _('Show more') }}",
 showLess_: "{{ _('Show less') }}",
diff --git a/enferno/static/js/components/EventsSection.js b/enferno/static/js/components/EventsSection.js
index 5ab1865ba..8f52b641e 100644
--- a/enferno/static/js/components/EventsSection.js
+++ b/enferno/static/js/components/EventsSection.js
@@ -36,29 +36,69 @@ const EventsSection = Vue.defineComponent({
       }
       return () => true;
     },
+    hasDateOrLocation() {
+      const e = this.editedEvent;
+      return !!(e.location || e.from_date || e.to_date);
+    },
+    hasTitleOrType() {
+      const e = this.editedEvent;
+      return !!(e.title || e.title_ar || e.eventtype);
+    },
+    // Show asterisk only if the group is not yet satisfied
+    showTitleTypeAsterisk() {
+      return !this.hasTitleOrType;
+    },
+    showLocationDateAsterisk() {
+      return !this.hasDateOrLocation;
+    },
+    // Validation rules for groups
+    titleOrTypeRule() {
+      return () => this.hasTitleOrType || this.translations.titleOrTypeRequired_;
+    },
+    locationOrDateRule() {
+      return () => this.hasDateOrLocation || this.translations.locationOrDateRequired_;
+    },
+  },
+  watch: {
+    // Watch for changes in title/type group
+    'editedEvent.title'() {
+      this.validateTitleTypeGroup();
+    },
+    'editedEvent.title_ar'() {
+      this.validateTitleTypeGroup();
+    },
+    'editedEvent.eventtype'() {
+      this.validateTitleTypeGroup();
+    },
+    // Watch for changes in location/date group
+    'editedEvent.location'() {
+      this.validateLocationDateGroup();
+    },
+    'editedEvent.from_date'() {
+      this.validateLocationDateGroup();
+    },
+    'editedEvent.to_date'() {
+      this.validateLocationDateGroup();
+    },
   },
   methods: {
-    checkEventFormRules() {
-      const e = this.editedEvent;
-
-      const hasDateOrLocation = !!(e.location || e.from_date || e.to_date);
-      const hasTitleOrType = !!(e.title || e.title_ar || e.eventtype);
-
-      const missing = [];
-      if (!hasDateOrLocation) missing.push(this.translations.locationOrDateRequired_);
-      if (!hasTitleOrType) missing.push(this.translations.titleOrTypeRequired_);
-
-      if (missing.length > 0) {
-        this.$root.showSnack(missing.join('<br />'));
-        return false;
-      }
-
-      return true;
+    validateTitleTypeGroup() {
+      // Trigger validation on the next tick to ensure the form is updated
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.validate();
+        }
+      });
+    },
+    validateLocationDateGroup() {
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.validate();
+        }
+      });
     },
     validateFormAndSave() {
       this.$refs.form.validate().then(({ valid, errors }) => {
-        if (!this.checkEventFormRules()) return
-
         if (valid) {
           this.saveEvent();
         } else {
@@ -87,7 +127,6 @@ const EventsSection = Vue.defineComponent({
 
       this.$nextTick(() => {
         this.editedEvent = Object.assign({}, item);
-
         this.editedEventIndex = index;
       });
     },
@@ -161,7 +200,13 @@ const EventsSection = Vue.defineComponent({
                 <v-spacer></v-spacer>
 
                 <template #append>
-                    <v-btn variant="elevated" @click="validateFormAndSave" class="mx-2">{{ translations.save_ }}</v-btn>
+                    <v-btn 
+                        variant="elevated" 
+                        @click="validateFormAndSave" 
+                        class="mx-2"
+                    >
+                        {{ translations.save_ }}
+                    </v-btn>
                     <v-btn icon="mdi-close" @click="closeEvent"></v-btn>
                 </template>
             </v-toolbar>
@@ -169,26 +214,50 @@ const EventsSection = Vue.defineComponent({
             <v-form @submit.prevent="validateFormAndSave" ref="form" v-model="valid">
                 <v-card-text>
                     <v-container>
+                        <!-- Info banner explaining requirements -->
+                        <v-alert 
+                            type="info" 
+                            variant="tonal" 
+                            density="compact" 
+                            class="mb-6"
+                        >
+                            <div class="text-body-2">
+                                <strong>{{ translations.requiredFields_ }}:</strong>
+                                <div class="mt-1">
+                                    • {{ translations.titleOrTypeRequired_ }}
+                                </div>
+                                <div>
+                                    • {{ translations.locationOrDateRequired_ }}
+                                </div>
+                            </div>
+                        </v-alert>
+
                         <v-row>
                             <v-col cols="12" md="6">
-                                <dual-field v-model:original="editedEvent.title"
-                                            v-model:translation="editedEvent.title_ar"
-                                            :label-original="translations.title_"
-                                            :label-translation="translations.titleAr_"
-                                            :rules="[
-                                              validationRules.maxLength(255),
-                                            ]"
-                                ></dual-field>
+                                <dual-field 
+                                    v-model:original="editedEvent.title"
+                                    v-model:translation="editedEvent.title_ar"
+                                    :rules="[
+                                        validationRules.maxLength(255),
+                                        titleOrTypeRule
+                                    ]"
+                                >
+                                    <template #label-original>
+                                        {{ translations.title_ }} <Asterisk v-if="showTitleTypeAsterisk" />
+                                    </template>
+                                    <template #label-translation>
+                                        {{ translations.titleAr_ }} <Asterisk v-if="showTitleTypeAsterisk" />
+                                    </template>
+                                </dual-field>
                             </v-col>
 
                             <v-col cols="12" md="6">
-                                <dual-field v-model:original="editedEvent.comments"
-                                            v-model:translation="editedEvent.comments_ar"
-                                            :label-original="translations.comments_"
-                                            :label-translation="translations.commentsAr_"
-                                            :rules="[
-                                                validationRules.maxLength(255),
-                                            ]"
+                                <dual-field 
+                                    v-model:original="editedEvent.comments"
+                                    v-model:translation="editedEvent.comments_ar"
+                                    :label-original="translations.comments_"
+                                    :label-translation="translations.commentsAr_"
+                                    :rules="[validationRules.maxLength(255)]"
                                 ></dual-field>
                             </v-col>
                         </v-row>
@@ -196,47 +265,79 @@ const EventsSection = Vue.defineComponent({
                         <v-row>
                             <v-col cols="12" md="8">
                                 <location-search-field
-                                        v-model="editedEvent.location"
-                                        api="/admin/api/locations/"
-                                        item-title="full_string"
-                                        item-value="id"
-                                        :multiple="false"
-                                        :show-copy-icon="advFeatures"
-                                        :label="translations.location_"
-                                ></location-search-field>
-
-
+                                    v-model="editedEvent.location"
+                                    api="/admin/api/locations/"
+                                    item-title="full_string"
+                                    item-value="id"
+                                    :multiple="false"
+                                    :show-copy-icon="advFeatures"
+                                    :rules="[locationOrDateRule]"
+                                >
+                                    <template v-slot:label>
+                                        {{ translations.location_ }} <Asterisk v-if="showLocationDateAsterisk" />
+                                    </template>
+                                </location-search-field>
                             </v-col>
-                            <v-col md="4">
-
+                            
+                            <v-col cols="12" md="4">
                                 <search-field
-                                        v-model="editedEvent.eventtype"
-                                        api="/admin/api/eventtypes/"
-                                        :query-params="eventParams"
-                                        item-title="title"
-                                        item-value="id"
-                                        :multiple="false"
-                                        :label="translations.eventType_"
-                                ></search-field>
-
-
+                                    v-model="editedEvent.eventtype"
+                                    api="/admin/api/eventtypes/"
+                                    :query-params="eventParams"
+                                    item-title="title"
+                                    item-value="id"
+                                    :multiple="false"
+                                    :rules="[titleOrTypeRule]"
+                                >
+                                    <template v-slot:label>
+                                        {{ translations.eventType_ }} <Asterisk v-if="showTitleTypeAsterisk" />
+                                    </template>
+                                </search-field>
                             </v-col>
                         </v-row>
 
                         <v-row>
                             <v-col cols="12" md="6">
-                                <pop-date-time-field :rules="[validationRules.date(), validationRules.dateBeforeOtherDate(editedEvent.to_date)]" :allowed-dates="allowedDateFrom" :time-label="translations.time_" :label="translations.from_" v-model="editedEvent.from_date"></pop-date-time-field>
+                                <pop-date-time-field 
+                                    v-model="editedEvent.from_date"
+                                    :rules="[
+                                        validationRules.date(), 
+                                        validationRules.dateBeforeOtherDate(editedEvent.to_date),
+                                        locationOrDateRule
+                                    ]" 
+                                    :allowed-dates="allowedDateFrom" 
+                                    :time-label="translations.time_"
+                                >
+                                    <template #label>
+                                        {{ translations.from_ }} <Asterisk v-if="showLocationDateAsterisk" />
+                                    </template>
+                                </pop-date-time-field>
                             </v-col>
+                            
                             <v-col cols="12" md="6">
-                                <pop-date-time-field :rules="[validationRules.date(), validationRules.dateAfterOtherDate(editedEvent.from_date)]" :allowed-dates="allowedDateTo" :time-label="translations.time_" :label="translations.to_" v-model="editedEvent.to_date"></pop-date-time-field>
+                                <pop-date-time-field 
+                                    v-model="editedEvent.to_date"
+                                    :rules="[
+                                        validationRules.date(), 
+                                        validationRules.dateAfterOtherDate(editedEvent.from_date),
+                                        locationOrDateRule
+                                    ]" 
+                                    :allowed-dates="allowedDateTo" 
+                                    :time-label="translations.time_"
+                                >
+                                    <template #label>
+                                        {{ translations.to_ }} <Asterisk v-if="showLocationDateAsterisk" />
+                                    </template>
+                                </pop-date-time-field>
                             </v-col>
                         </v-row>
+                        
                         <v-row>
                             <v-col md="4">
                                 <v-switch
-                                        color="primary"
-                                        :label="translations.estimatedTime_"
-                                        v-model="editedEvent.estimated"
+                                    color="primary"
+                                    :label="translations.estimatedTime_"
+                                    v-model="editedEvent.estimated"
                                 ></v-switch>
                             </v-col>
                         </v-row>
@@ -248,4 +349,4 @@ const EventsSection = Vue.defineComponent({
     </div>
     </div>
     `,
-});
+});
\ No newline at end of file

From 6db3e5077678d59a456d48a057f62cd1c3cb2613 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:35:42 -0600
Subject: [PATCH 04/26] import asterisk on actors and incidents

---
 enferno/admin/templates/admin/actors.html    | 2 ++
 enferno/admin/templates/admin/incidents.html | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/enferno/admin/templates/admin/actors.html b/enferno/admin/templates/admin/actors.html
index 5d3a755be..0f49cd0f8 100644
--- a/enferno/admin/templates/admin/actors.html
+++ b/enferno/admin/templates/admin/actors.html
@@ -369,6 +369,7 @@
     <script src="/static/js/components/PdfViewer.js"></script>
     <script src="/static/js/components/SnapshotDialog.js"></script>
     <script src="/static/js/components/Visualization.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
     <script src="/static/js/force-graph.min.js"></script>
 
 
@@ -1698,6 +1699,7 @@
         app.component('EventsSection', EventsSection);
         app.component('ReadMore', ReadMore);
         app.component('FieldRenderer', FieldRenderer);
+        app.component('Asterisk', Asterisk);
 
         app.component('RelatedBulletinsCard', RelatedBulletinsCard);
         app.component('RelatedActorsCard', RelatedActorsCard);
diff --git a/enferno/admin/templates/admin/incidents.html b/enferno/admin/templates/admin/incidents.html
index 94223c511..598448f1c 100644
--- a/enferno/admin/templates/admin/incidents.html
+++ b/enferno/admin/templates/admin/incidents.html
@@ -354,6 +354,7 @@
     <script src="/static/js/components/RelationEditorCard.js"></script>
     <script src="/static/js/components/EventsSection.js"></script>
     <script src="/static/js/components/FieldRenderer.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
 
     <script src="/static/js/components/PdfViewer.js"></script>
     <script src="/static/js/components/ImageViewer.js"></script>
@@ -1556,6 +1557,7 @@
         app.component('RelationEditorCard', RelationEditorCard);
         app.component('EventsSection', EventsSection);
         app.component('FieldRenderer', FieldRenderer);
+        app.component('Asterisk', Asterisk);
 
         app.use(router).use(vuetify);
         router.isReady().then(() => {

From ec1bb8443fa7cab7586726b83f1decd3230223c4 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:56:58 -0600
Subject: [PATCH 05/26] add asterisk to actor and incident form

---
 .../admin/partials/actor_dialog.html          | 31 +++++++++++--------
 .../admin/partials/incident_dialog.html       | 19 +++++++-----
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/enferno/admin/templates/admin/partials/actor_dialog.html b/enferno/admin/templates/admin/partials/actor_dialog.html
index 6d524b4f8..0c4958898 100644
--- a/enferno/admin/templates/admin/partials/actor_dialog.html
+++ b/enferno/admin/templates/admin/partials/actor_dialog.html
@@ -54,29 +54,31 @@
                                     <dual-field
                                         v-model:original="editedItem.name"
                                         v-model:translation="editedItem.name_ar"
-                                        label-original="{{ _('Name') }}"
-                                        label-translation="{{ _('Name (AR)') }}"
                                         :allow-unknown="true"
                                         :rules="[
                                             validationRules.required(),
                                             validationRules.maxLength(255),
                                         ]"
                                         v-bind="serverErrorPropsForDualField(serverErrors, 'item.name', 'item.name_ar')"
-                                    ></dual-field>
+                                    >
+                                        <template v-slot:label-original>{{ _('Name') }} <Asterisk /></template>
+                                        <template v-slot:label-translation>{{ _('Name (AR)') }} <Asterisk /></template>
+                                    </dual-field>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'first_name') && editedItem.type === 'Person'" :class="[fieldClass(field), 'px-3 py-2']">
                                     <dual-field
                                         v-model:original="editedItem.first_name"
                                         v-model:translation="editedItem.first_name_ar"
-                                        label-original="{{ _('First Name') }}"
-                                        label-translation="{{ _('First Name (AR)') }}"
                                         :allow-unknown="true"
                                         :rules="[
                                             validationRules.required(),
                                             validationRules.maxLength(255),
                                         ]"
                                         v-bind="serverErrorPropsForDualField(serverErrors, 'item.first_name', 'item.first_name_ar')"
-                                    ></dual-field>
+                                    >
+                                        <template v-slot:label-original>{{ _('First Name') }} <Asterisk /></template>
+                                        <template v-slot:label-translation>{{ _('First Name (AR)') }} <Asterisk /></template>
+                                    </dual-field>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'middle_name') && editedItem.type === 'Person'" :class="[fieldClass(field), 'px-3 py-2']">
                                     <dual-field
@@ -94,15 +96,16 @@
                                     <dual-field
                                         v-model:original="editedItem.last_name"
                                         v-model:translation="editedItem.last_name_ar"
-                                        label-original="{{ _('Last Name') }}"
-                                        label-translation="{{ _('Last Name (AR)') }}"
                                         :allow-unknown="true"
                                         :rules="[
                                             validationRules.required(),
                                             validationRules.maxLength(255),
                                         ]"
                                         v-bind="serverErrorPropsForDualField(serverErrors, 'item.last_name', 'item.last_name_ar')"
-                                    ></dual-field>
+                                    >
+                                        <template v-slot:label-original>{{ _('Last Name') }} <Asterisk /></template>
+                                        <template v-slot:label-translation>{{ _('Last Name (AR)') }} <Asterisk /></template>
+                                    </dual-field>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'nickname')" :class="[fieldClass(field), 'px-3 py-2']">
                                     <dual-field
@@ -909,9 +912,10 @@
                             <template v-for="(field, index) in fixedDynamicFields({ entityType: 'actor' })" :key="field.id">
                                 <div v-if="isFieldActive(field, 'comments')" :class="fieldClass(field)">
                                     <v-textarea required class="h-100" :rules="[validationRules.required()]" outlined v-model="editedItem.comments"
-                                        label="{{ _('Comments') }}"
                                         v-bind="serverErrorPropsForField(serverErrors, 'item.comments')"
-                                    ></v-textarea>
+                                    >
+                                        <template v-slot:label>{{ _('Comments') }} <Asterisk /></template>
+                                    </v-textarea>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'status')" :class="fieldClass(field)">
                                     <v-select :disabled="statusDisabled" item-title="tr" item-value="en" :items="statusItems" class="mx-2"
@@ -931,12 +935,13 @@
                                             :items="allowedRoles"
                                             multiple
                                             v-model="editedItem.roles"
-                                            label="{{ _('Restrict Actor to Access Group(s)') }}"
                                             :rules="
                                                 !unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []
                                             "
                                             clearable
-                                    ></v-select>
+                                    >
+                                        <template v-slot:label>{{ _('Restrict Actor to Access Group(s)') }} <Asterisk v-if="!unrestricted" /></template>
+                                    </v-select>
                                     <v-checkbox
                                             color="error"
                                             @change="unrestricted? editedItem.roles = [] : null"
diff --git a/enferno/admin/templates/admin/partials/incident_dialog.html b/enferno/admin/templates/admin/partials/incident_dialog.html
index 7396745ea..ce8c8d675 100644
--- a/enferno/admin/templates/admin/partials/incident_dialog.html
+++ b/enferno/admin/templates/admin/partials/incident_dialog.html
@@ -33,13 +33,14 @@
                                     <dual-field
                                         v-model:original="editedItem.title"
                                         v-model:translation="editedItem.title_ar"
-                                        label-original="{{ _('Title') }}"
                                         :rules="[
-                                            validationRules.atLeastOneRequired(editedItem.title, '{{ _('Original Title is required.') }}'),
+                                            validationRules.atLeastOneRequired(editedItem.title, '{{ _('Title is required.') }}'),
                                             validationRules.maxLength(255),
                                         ]"
                                         v-bind="serverErrorPropsForDualField(serverErrors, 'item.title', 'item.title_ar')"
-                                    ></dual-field>
+                                    >
+                                        <template v-slot:label-original>{{ _('Title') }} <Asterisk /></template>
+                                    </dual-field>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'description')" :class="[fieldClass(field), 'px-3 py-2']">
                                     <tinymce-editor :init="tinyConfig" v-model="editedItem.description"></tinymce-editor>
@@ -169,7 +170,9 @@
                             <template v-for="(field, index) in fixedDynamicFields({ entityType: 'incident' })" :key="field.id">
                                 <div v-if="isFieldActive(field, 'comments')" :class="fieldClass(field)">
                                     <v-textarea required class="h-100" :rules="[validationRules.required()]" outlined v-model="editedItem.comments"
-                                        label="{{ _('Comments') }}" v-bind="serverErrorPropsForField(serverErrors, 'item.comments')">
+                                        v-bind="serverErrorPropsForField(serverErrors, 'item.comments')"
+                                    >
+                                        <template v-slot:label>{{ _('Comments') }} <Asterisk /></template>
                                     </v-textarea>
                                 </div>
                                 <div v-else-if="isFieldActive(field, 'status')" :class="fieldClass(field)">
@@ -182,9 +185,11 @@
                                 <v-select :color="editedItem.roles?.length ? 'blue darken-1' : 'error'"
                                     :prepend-icon="editedItem.roles?.length ? 'mdi-lock' : 'mdi-lock-open'" chips :disabled="unrestricted"
                                     item-title="name" return-object :items="allowedRoles" multiple v-model="editedItem.roles"
-                                    label="{{ _('Restrict Bulletin to Access Group(s)') }}" :rules="
-                                                                                                                !unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []
-                                                                                                            " clearable></v-select>
+                                    :rules="!unrestricted ? [validationRules.required('{{ _('Access Group(s) are required unless unrestricted.')}}')] : []"
+                                    clearable
+                                >
+                                    <template v-slot:label>{{ _('Restrict Incident to Access Group(s)') }} <Asterisk v-if="!unrestricted" /></template>
+                                </v-select>
                                 <v-checkbox color="error" @change="unrestricted? editedItem.roles = [] : null" class="mx-2"
                                     label="{{ _('No Access Groups') }}" v-model="unrestricted">
                                 </v-checkbox>

From a149ceee014c3a58a42768595a95624627a60c0c Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 13:13:37 -0600
Subject: [PATCH 06/26] add asterisk to locations form

---
 enferno/admin/templates/admin/locations.html     |  2 ++
 .../admin/partials/location_dialog.html          | 16 ++++++++++------
 enferno/static/js/components/GeoMap.js           | 16 ++++++++++++----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/enferno/admin/templates/admin/locations.html b/enferno/admin/templates/admin/locations.html
index 18f4e62b2..2d70e8478 100644
--- a/enferno/admin/templates/admin/locations.html
+++ b/enferno/admin/templates/admin/locations.html
@@ -159,6 +159,7 @@
     <script src="/static/js/components/DualField.js"></script>
     <script src="/static/js/components/LocationSearchBox.js"></script>
     <script src="/static/js/components/ReadMore.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
 
     {% if config.GOOGLE_MAPS_API_KEY %}
         {{ '<script src="https://maps.googleapis.com/maps/api/js?key='|safe + config.GOOGLE_MAPS_API_KEY + '&loading=async" async defer></script>'|safe }}
@@ -544,6 +545,7 @@
         app.component('GeoMap', GeoMap);
         app.component('GlobalMap', GlobalMap);
         app.component('ReadMore', ReadMore);
+        app.component('Asterisk', Asterisk);
         app.use(router).use(vuetify).mount('#app');
     </script>
 {% endblock %}
diff --git a/enferno/admin/templates/admin/partials/location_dialog.html b/enferno/admin/templates/admin/partials/location_dialog.html
index 1762da9c2..f75cdbb31 100644
--- a/enferno/admin/templates/admin/partials/location_dialog.html
+++ b/enferno/admin/templates/admin/partials/location_dialog.html
@@ -31,14 +31,15 @@
                         <v-col cols="12" md="6">
                             <dual-field v-model:original="editedItem.title"
                                         v-model:translation="editedItem.title_ar"
-                                        label-original="{{ _('Title') }}"
-                                        label-translation="{{ _('Title (Ar)') }}"
                                         :rules="[
                                             validationRules.required('{{_('Title or Title (Ar) is required')}}'),
                                             validationRules.maxLength(255),
                                         ]"
                                         v-bind="$root.serverErrorPropsForDualField($root.serverErrors, 'item.title', 'item.title_ar')"
-                            ></dual-field>
+                            >
+                                <template v-slot:label-original>{{ _('Title') }} <Asterisk /></template>
+                                <template v-slot:label-translation>{{ _('Title (AR)') }} <Asterisk /></template>
+                            </dual-field>
                         </v-col>
 
                         <v-col cols="12" md="6">
@@ -60,7 +61,8 @@
                                     item-value="id"
                                     :rules="[validationRules.required()]"
                                     :multiple="false"
-                                    label="{{ _('Location Type') }}">
+                                >
+                                    <template v-slot:label>{{ _('Location Type') }} <Asterisk /></template>
                                 </search-field>
 
 
@@ -77,7 +79,8 @@
                                     @update:model-value="restrictSearch"
                                     :multiple="false"
                                     :rules="editedItem.location_type?.title === 'Administrative Location' ? [validationRules.required()] : []"
-                                    label="{{ _('Admin Level') }}">
+                                >
+                                    <template v-slot:label>{{ _('Admin Level') }} <Asterisk v-if="editedItem.location_type?.title === 'Administrative Location'" /></template>
                                 </search-field>
 
                         </v-col>
@@ -127,7 +130,8 @@
                     <v-row>
                         <v-col cols="12" md="12">
                             <geo-map
-                                    :edit-mode="true"
+                                edit-mode
+                                use-asterisk
                                 class="flex-grow-1"
                                 v-model="editedItem.latlng"
                                 :map-height="300">
diff --git a/enferno/static/js/components/GeoMap.js b/enferno/static/js/components/GeoMap.js
index 85ad5cbeb..f0bf3c423 100644
--- a/enferno/static/js/components/GeoMap.js
+++ b/enferno/static/js/components/GeoMap.js
@@ -18,6 +18,10 @@ const GeoMap = Vue.defineComponent({
       type: Boolean,
       default: true,
     },
+    useAsterisk: {
+      type: Boolean,
+      default: false,
+    },
     radiusControls: {
       type: Boolean,
       default: false,
@@ -373,19 +377,23 @@ const GeoMap = Vue.defineComponent({
           <h3 v-if="title" class="mb-5">{{ title }}</h3>
           <div v-if="editMode" class="d-flex" style="column-gap: 20px;">
             <v-text-field
-              v-bind="inputProps" type="number" min="-90" max="90" label="Latitude"
+              v-bind="inputProps" type="number" min="-90" max="90"
               :rules="[validationRules.required()]"
               v-model.number="lat"
               append-inner-icon="mdi-content-copy"
               @click:append-inner="copyToClipboard(lat)"
-            ></v-text-field>
+            >
+              <template v-slot:label>{{ translations.latitude_ }} <span v-if="useAsterisk" class="text-error">*</span></template>  
+            </v-text-field>
             <v-text-field
-              v-bind="inputProps" type="number" min="-180" max="180" label="Longitude"
+              v-bind="inputProps" type="number" min="-180" max="180"
               :rules="[validationRules.required()]"
               v-model.number="lng"
               append-inner-icon="mdi-content-copy"
               @click:append-inner="copyToClipboard(lng)"
-            ></v-text-field>
+            >
+              <template v-slot:label>{{ translations.longitude_ }} <span v-if="useAsterisk" class="text-error">*</span></template>
+            </v-text-field>
             <v-btn icon variant="flat" v-if="lat && lng" @click="clearMarker">
               <v-icon>mdi-close</v-icon>
             </v-btn>

From 7ac5071eabe0035140302dfd5f4faa0b11452947 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:20:25 -0600
Subject: [PATCH 07/26] add asterisks and required field to sources page

---
 enferno/admin/templates/admin/sources.html | 181 +++++++++++----------
 1 file changed, 96 insertions(+), 85 deletions(-)

diff --git a/enferno/admin/templates/admin/sources.html b/enferno/admin/templates/admin/sources.html
index 38d6fad29..a86a161d7 100644
--- a/enferno/admin/templates/admin/sources.html
+++ b/enferno/admin/templates/admin/sources.html
@@ -47,71 +47,73 @@
                                                 </v-btn>
 
                                                 <v-dialog v-model="dialog" max-width="770px">
-
                                                     <v-card :title="formTitle">
-
-                                                        <v-card-text>
-                                                            <v-container>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="4">
-                                                                        <v-text-field
-                                                                                v-model="editedItem.title"
-                                                                                label="{{ _('Title') }}"
-                                                                        ></v-text-field>
-                                                                    </v-col>
-
-                                                                    <v-col cols="12" md="6">
-
-                                                                        <search-field
-                                                                                v-model="editedItem.parent"
-                                                                                api="/admin/api/sources/"
-                                                                                item-title="title"
-                                                                                item-value="id"
-                                                                                :multiple="false"
-                                                                                :return-object="true"
-                                                                                label="{{ _('Parent') }}"
-                                                                        ></search-field>
-                                                                    </v-col>
-                                                                    <v-col cols="12" md="2">
-                                                                        <v-text-field
-                                                                                v-model="editedItem.etl_id"
-                                                                                label="{{ _('Origin ID') }}"
-                                                                                disabled
-                                                                        ></v-text-field>
-
-                                                                    </v-col>
-                                                                </v-row>
-                                                                <v-row>
-
-                                                                    <v-col cols="12" md="12">
-                                                                        <v-textarea
-                                                                                outlined
-                                                                                v-model="editedItem.comments"
-                                                                                label="{{ _('Comments') }}"
-
-                                                                        ></v-textarea>
-                                                                    </v-col>
-                                                                </v-row>
-                                                            </v-container>
-                                                        </v-card-text>
-
-                                                        <v-card-actions>
-                                                            <v-spacer></v-spacer>
-                                                            <v-btn
-                                                                    color="blue darken-1"
-                                                                    text
-                                                                    @click="close"
-                                                            >{{ _('Cancel') }}
-                                                            </v-btn
-                                                            >
-                                                            <v-btn
-                                                                    color="blue darken-1"
-                                                                    text
-                                                                    @click="save"
-                                                            >{{ _('Save') }}
-                                                            </v-btn
-                                                            >
-                                                        </v-card-actions>
+                                                        <v-form ref="form" @submit.prevent="save">
+                                                            <v-card-text>
+                                                                <v-container>
+                                                                    <v-row>
+                                                                        <v-col cols="12" md="4">
+                                                                            <v-text-field
+                                                                                    v-model="editedItem.title"
+                                                                                    :rules="[validationRules.required()]"
+                                                                            >
+                                                                                <template v-slot:label>{{ _('Title') }} <Asterisk /></template>
+                                                                            </v-text-field>
+                                                                        </v-col>
+
+                                                                        <v-col cols="12" md="6">
+
+                                                                            <search-field
+                                                                                    v-model="editedItem.parent"
+                                                                                    api="/admin/api/sources/"
+                                                                                    item-title="title"
+                                                                                    item-value="id"
+                                                                                    :multiple="false"
+                                                                                    :return-object="true"
+                                                                                    label="{{ _('Parent') }}"
+                                                                            ></search-field>
+                                                                        </v-col>
+                                                                        <v-col cols="12" md="2">
+                                                                            <v-text-field
+                                                                                    v-model="editedItem.etl_id"
+                                                                                    label="{{ _('Origin ID') }}"
+                                                                                    disabled
+                                                                            ></v-text-field>
+
+                                                                        </v-col>
+                                                                    </v-row>
+                                                                    <v-row>
+
+                                                                        <v-col cols="12" md="12">
+                                                                            <v-textarea
+                                                                                    outlined
+                                                                                    v-model="editedItem.comments"
+                                                                                    label="{{ _('Comments') }}"
+
+                                                                            ></v-textarea>
+                                                                        </v-col>
+                                                                    </v-row>
+                                                                </v-container>
+                                                            </v-card-text>
+
+                                                            <v-card-actions>
+                                                                <v-spacer></v-spacer>
+                                                                <v-btn
+                                                                        color="blue darken-1"
+                                                                        text
+                                                                        @click="close"
+                                                                >{{ _('Cancel') }}
+                                                                </v-btn
+                                                                >
+                                                                <v-btn
+                                                                        color="blue darken-1"
+                                                                        text
+                                                                        type="submit"
+                                                                >{{ _('Save') }}
+                                                                </v-btn
+                                                                >
+                                                            </v-card-actions>
+                                                        </v-form>
                                                     </v-card>
                                                 </v-dialog>
 
@@ -193,6 +195,7 @@
 
 {% endblock %} {% block js %}
     <script src="/static/js/components/SearchField.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
     <script nonce="{{ csp_nonce() }}">
 
 
@@ -206,6 +209,7 @@
             
             data: () => ({
                 dialog: dialog,
+                validationRules: validationRules,
                 imDialog: false,
                 drawer: drawer,
                 parents: [],
@@ -325,32 +329,39 @@
                 },
 
                 save() {
-                    if (this.editedIndex > -1) {
-                        Object.assign(this.items[this.editedIndex], this.editedItem);
-                        //update record
-                        api.put(`/admin/api/source/${this.editedItem.id}`, {item: this.editedItem})
-                            .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh()
-                                this.close();
-                            })
-                    } else {
-                        //create new record
-                        axios
-                            .post("/admin/api/source/", {item: this.editedItem})
-                            .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh();
-                                this.close();
-
-                            })
-                    }
-
+                    this.$refs.form.validate().then(({ valid }) => {
+                        if (!valid) {
+                            this.showSnack("{{ _('Please review form for errors.') }}");
+                            return;
+                        }
+
+                        if (this.editedIndex > -1) {
+                            Object.assign(this.items[this.editedIndex], this.editedItem);
+                            //update record
+                            api.put(`/admin/api/source/${this.editedItem.id}`, {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh()
+                                    this.close();
+                                })
+                        } else {
+                            //create new record
+                            axios
+                                .post("/admin/api/source/", {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh();
+                                    this.close();
+
+                                })
+                        }
+                    });
                 }
             }
         });
 
         app.component('SearchField', SearchField)
+        app.component('Asterisk', Asterisk)
 
         app.use(vuetify).mount("#app")
     </script>

From e6e78dd902ce3daf9db9452503687c8c9dc11d3b Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:20:39 -0600
Subject: [PATCH 08/26] add asterisk and form with required fields to labels

---
 enferno/admin/templates/admin/labels.html | 274 +++++++++++-----------
 1 file changed, 141 insertions(+), 133 deletions(-)

diff --git a/enferno/admin/templates/admin/labels.html b/enferno/admin/templates/admin/labels.html
index 3ecf9f0b8..3672e385d 100644
--- a/enferno/admin/templates/admin/labels.html
+++ b/enferno/admin/templates/admin/labels.html
@@ -49,122 +49,119 @@
 
                                                 <v-dialog v-model="dialog" max-width="900px">
                                                     <v-card :title="formTitle" class="pa-4">
-                                                        <v-card-text>
-                                                            <v-container>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="6">
-                                                                        <v-text-field
-                                                                                variant="solo"
-                                                                                v-model="editedItem.title"
-                                                                                label="{{ _('Title') }}"
-                                                                        ></v-text-field>
-                                                                    </v-col>
-                                                                    <v-col cols="12" md="6">
-                                                                        <v-text-field
-                                                                                variant="solo"
-                                                                                v-model="editedItem.title_ar"
-                                                                                label="{{ _('Title (AR)') }}"
-                                                                        ></v-text-field>
-                                                                    </v-col>
-                                                                </v-row>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="6">
-                                                                        <v-text-field
-                                                                                variant="solo"
-                                                                                v-model="editedItem.comments"
-                                                                                label="{{ _('Comments') }}"
-                                                                        ></v-text-field>
-                                                                    </v-col>
-                                                                    <v-col cols="12" md="6">
-                                                                        <v-text-field
-                                                                                variant="solo"
-                                                                                v-model="editedItem.comments_ar"
-                                                                                label="{{ _('Comments (AR)') }}"
-                                                                        ></v-text-field>
-                                                                    </v-col>
-                                                                </v-row>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="6">
-
-
-                                                                        <search-field
-                                                                                api="/admin/api/labels/"
-                                                                                item-title="title"
-                                                                                label="{{ _('Parent') }}"
-                                                                                v-model="editedItem.parent"
-                                                                                item-value="id"
-                                                                                :multiple="false"
-                                                                                label="{{ _('Labels') }}"
-                                                                                :query-params="{ fltr: 'all' }"
-                                                                        ></search-field>
-
-
-                                                                    </v-col>
-                                                                    <v-col cols="12" md="6">
-
-                                                                    </v-col>
-                                                                </v-row>
-
-                                                                <v-row>
-                                                                    <v-col cols="12" md="2">
-                                                                        <v-checkbox
-                                                                                v-model="editedItem.verified"
-                                                                                label="{{ _('Verified Labels') }}"
-                                                                        ></v-checkbox>
-
-                                                                    </v-col>
-                                                                    <v-col cols="12" md="2">
-                                                                        <v-checkbox
-                                                                                v-model="editedItem.for_bulletin"
-                                                                                label="{{ _('Bulletin') }}"
-                                                                        ></v-checkbox>
-
-                                                                    </v-col>
-
-                                                                    <v-col cols="12" md="2">
-                                                                        <v-checkbox
-                                                                                v-model="editedItem.for_actor"
-                                                                                label="{{ _('Actor') }}"
-                                                                        ></v-checkbox>
-
-                                                                    </v-col>
-
-                                                                    <v-col cols="12" md="2">
-                                                                        <v-checkbox
-                                                                                v-model="editedItem.for_incident"
-                                                                                label="{{ _('Incident') }}"
-                                                                        ></v-checkbox>
-
-                                                                    </v-col>
-
-                                                                    <v-col cols="12" md="2">
-                                                                        <v-checkbox
-                                                                                v-model="editedItem.for_offline"
-                                                                                label="{{ _('Offline') }}"
-                                                                        ></v-checkbox>
-
-                                                                    </v-col>
-
-                                                                </v-row>
-                                                            </v-container>
-                                                        </v-card-text>
-
-                                                        <v-card-actions>
-                                                            <v-spacer></v-spacer>
-                                                            <v-btn
-                                                                    color=" darken-1"
-
-                                                                    @click="close"
-                                                            >{{ _('Cancel') }}</v-btn
-                                                            >
-                                                            <v-btn
-                                                                    color="primary darken-1"
-
-                                                                    variant="elevated"
-                                                                    @click="save"
-                                                            >{{ _('Save') }}</v-btn
-                                                            >
-                                                        </v-card-actions>
+                                                        <v-form ref="form" @submit.prevent="save">
+                                                            <v-card-text>
+                                                                <v-container>
+                                                                    <v-row>
+                                                                        <v-col cols="12" md="6">
+                                                                            <v-text-field
+                                                                                    v-model="editedItem.title"
+                                                                                    :rules="[validationRules.required()]"
+                                                                            >
+                                                                                <template v-slot:label>{{ _('Title') }} <Asterisk /></template>
+                                                                            </v-text-field>
+                                                                        </v-col>
+                                                                        <v-col cols="12" md="6">
+                                                                            <v-text-field
+                                                                                    v-model="editedItem.title_ar"
+                                                                                    label="{{ _('Title (AR)') }}"
+                                                                            ></v-text-field>
+                                                                        </v-col>
+                                                                    </v-row>
+                                                                    <v-row>
+                                                                        <v-col cols="12" md="6">
+                                                                            <v-text-field
+                                                                                    v-model="editedItem.comments"
+                                                                                    label="{{ _('Comments') }}"
+                                                                            ></v-text-field>
+                                                                        </v-col>
+                                                                        <v-col cols="12" md="6">
+                                                                            <v-text-field
+                                                                                    v-model="editedItem.comments_ar"
+                                                                                    label="{{ _('Comments (AR)') }}"
+                                                                            ></v-text-field>
+                                                                        </v-col>
+                                                                    </v-row>
+                                                                    <v-row>
+                                                                        <v-col cols="12" md="6">
+
+
+                                                                            <search-field
+                                                                                    api="/admin/api/labels/"
+                                                                                    item-title="title"
+                                                                                    label="{{ _('Parent') }}"
+                                                                                    v-model="editedItem.parent"
+                                                                                    item-value="id"
+                                                                                    :multiple="false"
+                                                                                    :query-params="{ fltr: 'all' }"
+                                                                            ></search-field>
+
+
+                                                                        </v-col>
+                                                                        <v-col cols="12" md="6">
+
+                                                                        </v-col>
+                                                                    </v-row>
+
+                                                                    <v-row>
+                                                                        <v-col cols="12" md="2">
+                                                                            <v-checkbox
+                                                                                    v-model="editedItem.verified"
+                                                                                    label="{{ _('Verified Labels') }}"
+                                                                            ></v-checkbox>
+
+                                                                        </v-col>
+                                                                        <v-col cols="12" md="2">
+                                                                            <v-checkbox
+                                                                                    v-model="editedItem.for_bulletin"
+                                                                                    label="{{ _('Bulletin') }}"
+                                                                            ></v-checkbox>
+
+                                                                        </v-col>
+
+                                                                        <v-col cols="12" md="2">
+                                                                            <v-checkbox
+                                                                                    v-model="editedItem.for_actor"
+                                                                                    label="{{ _('Actor') }}"
+                                                                            ></v-checkbox>
+
+                                                                        </v-col>
+
+                                                                        <v-col cols="12" md="2">
+                                                                            <v-checkbox
+                                                                                    v-model="editedItem.for_incident"
+                                                                                    label="{{ _('Incident') }}"
+                                                                            ></v-checkbox>
+
+                                                                        </v-col>
+
+                                                                        <v-col cols="12" md="2">
+                                                                            <v-checkbox
+                                                                                    v-model="editedItem.for_offline"
+                                                                                    label="{{ _('Offline') }}"
+                                                                            ></v-checkbox>
+
+                                                                        </v-col>
+
+                                                                    </v-row>
+                                                                </v-container>
+                                                            </v-card-text>
+
+                                                            <v-card-actions>
+                                                                <v-spacer></v-spacer>
+                                                                <v-btn
+                                                                        color=" darken-1"
+                                                                        @click="close"
+                                                                >{{ _('Cancel') }}</v-btn
+                                                                >
+                                                                <v-btn
+                                                                        color="primary darken-1"
+                                                                        variant="elevated"
+                                                                        type="submit"
+                                                                >{{ _('Save') }}</v-btn
+                                                                >
+                                                            </v-card-actions>
+                                                        </v-form>
                                                     </v-card>
                                                 </v-dialog>
 
@@ -252,6 +249,7 @@
 
 {% endblock %} {% block js %}
     <script src="/static/js/components/SearchField.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
     <script nonce="{{ csp_nonce() }}">
 
         const {createApp} = Vue;
@@ -263,6 +261,7 @@
             mixins: [globalMixin],
             data: () => ({
                 dialog: dialog,
+                validationRules: validationRules,
                 imDialog: false,
                 drawer: drawer,
                 loading: true,
@@ -377,26 +376,35 @@
                 },
 
                 save() {
-                    if (this.editedIndex > -1) {
-                        Object.assign(this.items[this.editedIndex], this.editedItem);
-                        api.put(`/admin/api/label/${this.editedItem.id}`, {item: this.editedItem})
-                            .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh()
-                            })
-                    } else {
-                        axios
-                            .post("/admin/api/label/", {item: this.editedItem})
-                            .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh()
-                            });
-                    }
-                    this.close();
+                    this.$refs.form.validate().then(({ valid }) => {
+                        if (!valid) {
+                            this.showSnack("{{ _('Please review form for errors.') }}");
+                            return;
+                        }
+
+                        if (this.editedIndex > -1) {
+                            Object.assign(this.items[this.editedIndex], this.editedItem);
+                            api.put(`/admin/api/label/${this.editedItem.id}`, {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh()
+                                    this.close();
+                                })
+                        } else {
+                            axios
+                                .post("/admin/api/label/", {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh()
+                                    this.close();
+                                });
+                        }
+                    });
                 }
             }
         });
         app.component('SearchField', SearchField);
+        app.component('Asterisk', Asterisk);
         app.use(vuetify).mount('#app');
     </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file

From 2887926be100d9d53304b4051e4ec0c03690546c Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:20:51 -0600
Subject: [PATCH 09/26] add asterisk and form with required fields to
 eventtypes

---
 enferno/admin/templates/admin/eventtypes.html | 169 +++++++++---------
 1 file changed, 89 insertions(+), 80 deletions(-)

diff --git a/enferno/admin/templates/admin/eventtypes.html b/enferno/admin/templates/admin/eventtypes.html
index 0575decd8..d66fbfa13 100644
--- a/enferno/admin/templates/admin/eventtypes.html
+++ b/enferno/admin/templates/admin/eventtypes.html
@@ -38,73 +38,72 @@
                                         </v-btn>
 
                                         <v-dialog v-model="dialog" max-width="500px">
-
                                             <v-card>
                                                 <v-card-title block>
                                                     <span class="headline">${ formTitle }</span>
-
-
                                                 </v-card-title>
 
-                                                <v-card-text>
-                                                    <v-container>
-                                                        <v-row>
-                                                            <v-col cols="12" md="6">
-                                                                <v-text-field
-                                                                        variant="solo"
-                                                                        v-model="editedItem.title"
-                                                                        label="{{ _('Title') }}"
-                                                                ></v-text-field>
-                                                            </v-col>
-                                                            <v-col cols="12" md="6">
-                                                                <v-text-field
-                                                                        variant="solo"
-                                                                        v-model="editedItem.title_ar"
-                                                                        label="{{ _('Title (AR)') }}"
-                                                                ></v-text-field>
-                                                            </v-col>
-                                                        </v-row>
-                                                        <v-row>
-                                                            <v-col cols="12" md="6">
-                                                                <v-checkbox label="{{ _('For Actors') }}"
-                                                                            v-model="editedItem.for_actor">
-                                                                </v-checkbox>
-
-                                                            </v-col>
-                                                            <v-col cols="12" md="6">
-                                                                <v-checkbox label="{{ _('For Bulletins') }}"
-                                                                            v-model="editedItem.for_bulletin">
-                                                                </v-checkbox>
-
-                                                            </v-col>
+                                                <v-form ref="form" @submit.prevent="save">
+                                                    <v-card-text>
+                                                        <v-container>
                                                             <v-row>
-                                                                <v-col>
-                                                                    <v-textarea variant="solo"
-                                                                                v-model="editedItem.comments"
-                                                                                label="{{ _('Comments') }}">
-
-                                                                    </v-textarea>
+                                                                <v-col cols="12" md="6">
+                                                                    <v-text-field
+                                                                            v-model="editedItem.title"
+                                                                            :rules="[validationRules.required()]"
+                                                                    >
+                                                                        <template v-slot:label>{{ _('Title') }} <Asterisk /></template>
+                                                                    </v-text-field>
+                                                                </v-col>
+                                                                <v-col cols="12" md="6">
+                                                                    <v-text-field
+                                                                            v-model="editedItem.title_ar"
+                                                                            label="{{ _('Title (AR)') }}"
+                                                                    ></v-text-field>
                                                                 </v-col>
                                                             </v-row>
-                                                        </v-row>
-                                                    </v-container>
-                                                </v-card-text>
+                                                            <v-row>
+                                                                <v-col cols="12" md="6">
+                                                                    <v-checkbox label="{{ _('For Actors') }}"
+                                                                                v-model="editedItem.for_actor">
+                                                                    </v-checkbox>
 
-                                                <v-card-actions>
-                                                    <v-spacer></v-spacer>
-                                                    <v-btn
-                                                            color="blue darken-1"
-                                                            text
-                                                            @click="close"
-                                                    >{{ _('Cancel') }}</v-btn
-                                                    >
-                                                    <v-btn
-                                                            color="blue darken-1"
-                                                            text
-                                                            @click="save"
-                                                    >{{ _('Save') }}</v-btn
-                                                    >
-                                                </v-card-actions>
+                                                                </v-col>
+                                                                <v-col cols="12" md="6">
+                                                                    <v-checkbox label="{{ _('For Bulletins') }}"
+                                                                                v-model="editedItem.for_bulletin">
+                                                                    </v-checkbox>
+
+                                                                </v-col>
+                                                                <v-row>
+                                                                    <v-col>
+                                                                        <v-textarea
+                                                                                    v-model="editedItem.comments"
+                                                                                    label="{{ _('Comments') }}">
+
+                                                                        </v-textarea>
+                                                                    </v-col>
+                                                                </v-row>
+                                                            </v-row>
+                                                        </v-container>
+                                                    </v-card-text>
+
+                                                    <v-card-actions>
+                                                        <v-spacer></v-spacer>
+                                                        <v-btn
+                                                                color="blue darken-1"
+                                                                text
+                                                                @click="close"
+                                                        >{{ _('Cancel') }}</v-btn
+                                                        >
+                                                        <v-btn
+                                                                color="blue darken-1"
+                                                                text
+                                                                type="submit"
+                                                        >{{ _('Save') }}</v-btn
+                                                        >
+                                                    </v-card-actions>
+                                                </v-form>
                                             </v-card>
                                         </v-dialog>
 
@@ -186,6 +185,7 @@
     </v-main>
 
 {% endblock %} {% block js %}
+    <script src="/static/js/components/Asterisk.js"></script>
     <script nonce="{{ csp_nonce() }}">
         const {createApp} = Vue;
         const {createVuetify} = Vuetify;
@@ -198,6 +198,7 @@
 
             data: () => ({
                 dialog: dialog,
+                validationRules: validationRules,
                 imDialog: false,
                 drawer: drawer,
                 loading: true,
@@ -300,31 +301,39 @@
                 },
 
                 save() {
-                    if (this.editedIndex > -1) {
-                        Object.assign(this.items[this.editedIndex], this.editedItem);
-                        api.put(`/admin/api/eventtype/${this.editedItem.id}`, {item: this.editedItem})
+                    this.$refs.form.validate().then(({ valid }) => {
+                        if (!valid) {
+                            this.showSnack("{{ _('Please review form for errors.') }}");
+                            return;
+                        }
+
+                        if (this.editedIndex > -1) {
+                            Object.assign(this.items[this.editedIndex], this.editedItem);
+                            api.put(`/admin/api/eventtype/${this.editedItem.id}`, {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh();
+                                    this.close();
+                                }).catch(err => {
+                                this.showSnack(this.parseValidationError(err?.response?.data));
+                            })
+
+                        } else {
+                            
+                            api.post("/admin/api/eventtype/", {item: this.editedItem})
                             .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh();
-                                this.close();
-                            }).catch(err => {
-                            this.showSnack(this.parseValidationError(err?.response?.data));
-                        })
-
-                    } else {
-                        
-                        api.post("/admin/api/eventtype/", {item: this.editedItem})
-                        .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh();
-                                this.close();
-                            }).catch(err => {
-                            this.showSnack(this.parseValidationError(err?.response?.data));
-                        })
-                    }
+                                    this.showSnack(response.data);
+                                    this.refresh();
+                                    this.close();
+                                }).catch(err => {
+                                this.showSnack(this.parseValidationError(err?.response?.data));
+                            })
+                        }
+                    });
                 }
             }
         });
+        app.component('Asterisk', Asterisk);
         app.use(vuetify).mount("#app")
     </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file

From 2aa6979053fb95f7d62f3ea5ac41f9c13fa9104c Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:21:24 -0600
Subject: [PATCH 10/26] refactor editable table to support form and dynamic
 required fields with asterisks

---
 enferno/static/js/components/EditableTable.js | 72 +++++++++++++------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/enferno/static/js/components/EditableTable.js b/enferno/static/js/components/EditableTable.js
index 087da935f..3f50da308 100644
--- a/enferno/static/js/components/EditableTable.js
+++ b/enferno/static/js/components/EditableTable.js
@@ -49,6 +49,10 @@ const EditableTable = Vue.defineComponent({
       type: Array,
       default: () => ['title'],
     },
+    requiredFields: {
+      type: Array,
+      default: () => [],
+    },
     columnsList: {
       type: Array,
       default: () => ['code', 'title', 'title_tr', 'reverse_title', 'reverse_title_tr'],
@@ -80,6 +84,7 @@ const EditableTable = Vue.defineComponent({
 
         <v-dialog v-model="dialogState.isOpen" max-width="900px">
           <v-card :title="dialogTitles[dialogState.mode]">
+            <v-form ref="form" @submit.prevent="itemSave">
               <v-card-text>
                   <v-container>
                       <v-row>
@@ -87,10 +92,14 @@ const EditableTable = Vue.defineComponent({
                           <v-col v-if="isEditable(dialogState.item) && editableColumns.includes(column)" cols="12" md="6">
                             <v-text-field
                               variant="outlined"
-                              :label="getHeaderTextById(column)"
                               v-model="dialogState.item[column]"
                               :autofocus="index === 0"
-                            ></v-text-field>
+                              :rules="isRequired(column) ? [validationRules.required()] : []"
+                            >
+                              <template v-slot:label>
+                                {{ getHeaderTextById(column) }} <Asterisk v-if="isRequired(column)" />
+                              </template>
+                            </v-text-field>
                           </v-col>
                         </template>
                       </v-row>
@@ -105,11 +114,12 @@ const EditableTable = Vue.defineComponent({
                   <v-btn
                     :loading="dialogState.isLoading"
                     color="primary"
-                    @click="itemSave()"
+                    type="submit"
                     variant="elevated"
                   >Save</v-btn
                   >
               </v-card-actions>
+            </v-form>
           </v-card>
       </v-dialog>
       </div>
@@ -119,6 +129,7 @@ const EditableTable = Vue.defineComponent({
       itemList: [],
       editableItem: {},
       translations: window.translations,
+      validationRules: validationRules,
       isLoadingList: false,
       dialogState: {
         isLoading: false,
@@ -168,27 +179,39 @@ const EditableTable = Vue.defineComponent({
     },
 
     itemSave() {
-      this.dialogState.isLoading = true;
-      const endpoint = this.dialogState.item?.id ? `${this.saveEndpoint}/${this.dialogState.item.id}` : this.saveEndpoint;
-      const method = this.dialogState.item?.id ? 'put' : 'post';
+      this.$refs.form.validate().then(({ valid }) => {
+        if (!valid) {
+          this.$root.showSnack(this.translations.pleaseReviewFormForErrors_);
+          return;
+        }
 
-      // fix for location admin levels
-      if(this.itemHeaders.find(header => header.value === 'code') && !this.dialogState.item?.id){
-        const maxCode = this.itemList.reduce((acc, item) => acc > item.code ? acc : item.code, 0);
-        this.dialogState.item.code = Number(maxCode) + 1;
-      }
+        this.dialogState.isLoading = true;
+        const endpoint = this.dialogState.item?.id ? `${this.saveEndpoint}/${this.dialogState.item.id}` : this.saveEndpoint;
+        const method = this.dialogState.item?.id ? 'put' : 'post';
 
-      axios[method](endpoint, { item: this.dialogState.item })
-        .then((res) => {
-          this.loadItems();
-          this.$root.showSnack(res.data);
-          this.$emit('items-updated', this.itemList);
-          this.dialogState.isOpen = false;
-        })
-        .finally(() => {
-          this.dialogState.item = {};
-          this.dialogState.isLoading = false;
-        });
+        // fix for location admin levels
+        if(this.itemHeaders.find(header => header.value === 'code') && !this.dialogState.item?.id){
+          const maxCode = this.itemList.reduce((acc, item) => acc > item.code ? acc : item.code, 0);
+          this.dialogState.item.code = Number(maxCode) + 1;
+        }
+
+        axios[method](endpoint, { item: this.dialogState.item })
+          .then((res) => {
+            this.loadItems();
+            this.$root.showSnack(res.data);
+            this.$emit('items-updated', this.itemList);
+            this.dialogState.isOpen = false;
+            // Only clear on success
+            this.dialogState.item = {};
+          })
+          .catch((err) => {
+            // Show error but keep dialog open and data intact
+            this.$root.showSnack(err.response?.data?.message || this.translations.errorOccurred_ || 'An error occurred');
+          })
+          .finally(() => {
+            this.dialogState.isLoading = false;
+          });
+      });
     },
 
     itemCancel() {
@@ -227,5 +250,8 @@ const EditableTable = Vue.defineComponent({
     isEditable(item) {
       return !this.noEditActionIds.includes(item?.id);
     },
+    isRequired(column) {
+      return this.requiredFields.includes(column);
+    },
   },
-});
+});
\ No newline at end of file

From ccb2a4ef3754a38602e63d34a0174e14050640cb Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:22:01 -0600
Subject: [PATCH 11/26] pass required fields to component data page and fix
 infinite loop on navigation items

---
 .../admin/templates/admin/component-data.html | 108 ++++++++++--------
 1 file changed, 61 insertions(+), 47 deletions(-)

diff --git a/enferno/admin/templates/admin/component-data.html b/enferno/admin/templates/admin/component-data.html
index 87a080cbf..cdcdd21ea 100644
--- a/enferno/admin/templates/admin/component-data.html
+++ b/enferno/admin/templates/admin/component-data.html
@@ -29,7 +29,7 @@ <h1 class="text-h6 mb-5">{{ _('Component Data Management') }}</h1>
                             <div class="overflow-y-auto" style="max-height: calc(100dvh - 248px);">
                                 <div v-if="tabState.child === 'administrative-levels'">
                                     <editable-table :height="`calc(100vh - ${showLalWarning ? '701px' : '628px'})`" title="{{ _('Location Administrative Levels') }}"
-                                        :item-headers="alHeaders" :editable-columns="['code', 'title']"
+                                        :item-headers="alHeaders" :editable-columns="['code', 'title']" :required-fields="['title']"
                                         :no-delete-action-ids="noDeleteIdsForLocationAdminLevels"
                                         delete-endpoint="/admin/api/location-admin-level"
                                         save-endpoint="/admin/api/location-admin-level"
@@ -90,7 +90,9 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Location Types') }}"
                                         :item-headers="ltHeaders" :no-action-ids="[1,2]" delete-endpoint="/admin/api/location-type"
                                         save-endpoint="/admin/api/location-type"
-                                        load-endpoint="/admin/api/location-types/?per_page=1000">
+                                        load-endpoint="/admin/api/location-types/?per_page=1000"
+                                        :required-fields="['title']"
+                                    >
                                     </editable-table>
                                 </div>
                             </div>
@@ -110,7 +112,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Countries') }}"
                                         :item-headers="countryHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/country" save-endpoint="/admin/api/country"
-                                        load-endpoint="/admin/api/countries/?per_page=1000">
+                                        load-endpoint="/admin/api/countries/?per_page=1000" :required-fields="['title']">
                                     </editable-table>
                                 </div>
 
@@ -118,7 +120,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Ethnographic Information') }}"
                                         :item-headers="ethnoHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/ethnography" save-endpoint="/admin/api/ethnography"
-                                        load-endpoint="/admin/api/ethnographies/?per_page=1000">
+                                        load-endpoint="/admin/api/ethnographies/?per_page=1000" :required-fields="['title']">
                                     </editable-table>
                                 </div>
 
@@ -126,7 +128,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Dialects') }}"
                                         :item-headers="dialectHeaders" :editable-columns="['title','title_tr']"
                                         delete-endpoint="/admin/api/dialect" save-endpoint="/admin/api/dialect"
-                                        load-endpoint="/admin/api/dialects/?per_page=1000">
+                                        load-endpoint="/admin/api/dialects/?per_page=1000" :required-fields="['title']">
                                     </editable-table>
                                 </div>
                             </div>
@@ -146,6 +148,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Actor to Actor Relations') }}"
                                         :item-headers="revRelationHeaders"
                                         :editable-columns="['title','title_tr', 'reverse_title', 'reverse_title_tr']"
+                                        :required-fields="['title', 'reverse_title']"
                                         delete-endpoint="/admin/api/atoainfo" save-endpoint="/admin/api/atoainfo"
                                         load-endpoint="/admin/api/atoainfos/?per_page=1000">
                                     </editable-table>
@@ -154,6 +157,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'actor-to-bulletin'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Actor to Bulletin Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/atobinfo" save-endpoint="/admin/api/atobinfo"
                                         load-endpoint="/admin/api/atobinfos/?per_page=1000">
                                     </editable-table>
@@ -162,6 +166,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'bulletin-to-bulletin'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Bulletin to Bulletin Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/btobinfo" save-endpoint="/admin/api/btobinfo"
                                         load-endpoint="/admin/api/btobinfos/?per_page=1000">
                                     </editable-table>
@@ -170,6 +175,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'incident-to-bulletin'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Incident to Bulletin Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/itobinfo" save-endpoint="/admin/api/itobinfo"
                                         load-endpoint="/admin/api/itobinfos/?per_page=1000">
                                     </editable-table>
@@ -178,6 +184,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'incident-to-actor'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Incident to Actor Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/itoainfo" save-endpoint="/admin/api/itoainfo"
                                         load-endpoint="/admin/api/itoainfos/?per_page=1000">
                                     </editable-table>
@@ -186,6 +193,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'incident-to-incident'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Incident to Incident Relations') }}"
                                         :item-headers="relationHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/itoiinfo" save-endpoint="/admin/api/itoiinfo"
                                         load-endpoint="/admin/api/itoiinfos/?per_page=1000">
                                     </editable-table>
@@ -196,6 +204,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             <div class="overflow-y-auto" style="max-height: calc(100dvh - 180px);">
                                 <editable-table height="calc(100vh - 307px)" title="{{ _('Media Categories') }}"
                                     :item-headers="mediaHeaders" :editable-columns="['title','title_tr']"
+                                    :required-fields="['title']"
                                     delete-endpoint="/admin/api/mediacategory" save-endpoint="/admin/api/mediacategory"
                                     load-endpoint="/admin/api/mediacategories/?per_page=1000">
                                 </editable-table>
@@ -205,6 +214,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                             <div class="overflow-y-auto" style="max-height: calc(100dvh - 180px);">
                                 <editable-table height="calc(100vh - 307px)" title="{{ _('Geo Location Types') }}"
                                     :item-headers="geoHeaders" :editable-columns="['title','title_tr']"
+                                    :required-fields="['title']"
                                     delete-endpoint="/admin/api/geolocationtype" save-endpoint="/admin/api/geolocationtype"
                                     load-endpoint="/admin/api/geolocationtypes/?per_page=1000">
                                 </editable-table>
@@ -222,6 +232,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'id-number-types'">
                                     <editable-table title="{{ _('ID Number Types') }}" :item-headers="idNumberTypeHeaders"
                                         :editable-columns="['title','title_tr']" delete-endpoint="/admin/api/idnumbertype"
+                                        :required-fields="['title']"
                                         save-endpoint="/admin/api/idnumbertype" load-endpoint="/admin/api/idnumbertypes/?per_page=1000">
                                     </editable-table>
                                 </div>
@@ -242,6 +253,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'potential-violation'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Potential Violation Categories') }}"
                                         :item-headers="potentialHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/potentialviolation" save-endpoint="/admin/api/potentialviolation"
                                         load-endpoint="/admin/api/potentialviolation/?per_page=1000">
                                     </editable-table>
@@ -250,6 +262,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                                 <div v-if="tabState.child === 'claimed-violation'">
                                     <editable-table height="calc(100vh - 375px)" title="{{ _('Claimed Violation Categories') }}"
                                         :item-headers="claimedHeaders" :editable-columns="['title','title_tr']"
+                                        :required-fields="['title']"
                                         delete-endpoint="/admin/api/claimedviolation" save-endpoint="/admin/api/claimedviolation"
                                         load-endpoint="/admin/api/claimedviolation/?per_page=1000">
                                     </editable-table>
@@ -275,6 +288,7 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
 {% endif %}
 <script src="/static/js/Leaflet.GoogleMutant.js"></script>
 <script src="/static/js/components/EditableTable.js"></script>
+<script src="/static/js/components/Asterisk.js"></script>
 <script src="/static/js/Sortable.min.js"></script>
 <script src="/static/js/vuedraggable.umd.js"></script>
 
@@ -290,17 +304,12 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
         delimiters: delimiters,
         mixins: [globalMixin],
         mounted() {
-            this.setInitialTabStateKey()
+            // Initialize tabs from URL on first load
+            this.syncTabsFromHash();
 
-            this.$router.afterEach((to) => {
-                const [main, child] = to.hash.slice(1).split('/');
-
-                const mainKey = main && main in this.tabsMap ? main : Object.keys(this.tabsMap)[0];
-                const nested = this.tabsMap[mainKey]?.nestedTabsMap || {};
-                const childKey = child && child in nested ? child : Object.keys(nested)[0] || null;
-
-                this.tabState.main = mainKey;
-                this.tabState.child = Object.keys(nested).length ? childKey : null;
+            // Update tabs when user navigates (back/forward buttons)
+            this.$router.afterEach(() => {
+                this.syncTabsFromHash();
             });
         },
         data() {
@@ -385,21 +394,16 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                 },
                 deep: true
             },
-            'tabState.main'(mainKey) {
-                const nested = this.tabsMap?.[mainKey]?.nestedTabsMap;
-
-                this.tabState.main = mainKey;
-                this.tabState.child = nested
-                    ? nested[this.tabState.child]
-                        ? this.tabState.child
-                        : Object.keys(nested)[0]
-                    : null;
-
-                this.updateHash();
+            'tabState.main'(newVal, oldVal) {
+                // Only update hash if change came from user interaction (not from syncTabsFromHash)
+                if (oldVal !== null) {
+                    this.updateHashFromTabs();
+                }
             },
-
-            'tabState.child'() {
-                this.updateHash();
+            'tabState.child'(newVal, oldVal) {
+                if (oldVal !== null) {
+                    this.updateHashFromTabs();
+                }
             }
         },
 
@@ -422,23 +426,6 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
 
                 return [...base, ...(fieldMaps[type] || customFields), { title: "{{ _('Actions') }}", value: 'actions', align: 'end' }];
             },
-            updateHash() {
-                const { main, child } = this.tabState;
-                const hash = [main, child].filter(Boolean).join('/');
-                this.$router.push({ name: 'component-data', hash: `#${hash}` });
-            },
-            setInitialTabStateKey() {
-                const main = this.tabState.main || Object.keys(this.tabsMap)[0];
-                const nested = this.tabsMap[main]?.nestedTabsMap || {};
-                const child = this.tabState.child || Object.keys(nested)[0] || null;
-
-                const hash = [main, child].filter(Boolean).join('/');
-
-                this.$router.replace({
-                    name: 'component-data',
-                    hash: `#${hash}` 
-                });
-            },
             onDragEnd() {
                 if (this.isOrderChanged) {
                     this.showLalWarning = true;
@@ -475,11 +462,38 @@ <h3 class="text-subtitle-1 mb-2">{{ _('Full Location text format') }}
                     this.$root.showSnack(response.data);
                     this.showLalWarning = false;
                 });
-            }
+            },
+            updateHashFromTabs() {
+                const { main, child } = this.tabState;
+                const hash = [main, child].filter(Boolean).join('/');
+                
+                // Only push if hash actually changed
+                if (this.$route.hash !== `#${hash}`) {
+                    this.$router.push({ 
+                        name: 'component-data', 
+                        hash: `#${hash}` 
+                    });
+                }
+            },
+            syncTabsFromHash() {
+                const hash = this.$route.hash.slice(1); // Remove '#'
+                const [main, child] = hash ? hash.split('/') : [];
+
+                // Validate and set main tab
+                const mainKey = main && main in this.tabsMap ? main : Object.keys(this.tabsMap)[0];
+                
+                // Validate and set child tab
+                const nested = this.tabsMap[mainKey]?.nestedTabsMap || {};
+                const childKey = child && child in nested ? child : Object.keys(nested)[0] || null;
+
+                this.tabState.main = mainKey;
+                this.tabState.child = childKey;
+            },
         }
     });
     app.component('EditableTable', EditableTable);
     app.component('Draggable', draggable);
+    app.component('Asterisk', Asterisk);
     app.use(router).use(vuetify).mount('#app');
 </script>
 {% endblock %}
\ No newline at end of file

From 4b93a8cc972e124783d7caf7c15a9e4c00b49117 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 10:16:56 -0600
Subject: [PATCH 12/26] make group name required using form and add asterisk to
 label

---
 enferno/admin/templates/admin/roles.html | 63 +++++++++++++-----------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/enferno/admin/templates/admin/roles.html b/enferno/admin/templates/admin/roles.html
index ac2742f34..e14bbb682 100644
--- a/enferno/admin/templates/admin/roles.html
+++ b/enferno/admin/templates/admin/roles.html
@@ -39,14 +39,17 @@
                                                     <span class="headline">${ formTitle }</span>
                                                 </v-card-title>
 
+                                                <v-form ref="form" @submit.prevent="save">
                                                 <v-card-text>
                                                     <v-container>
                                                         <v-row>
                                                             <v-col cols="12" md="6">
                                                                 <v-text-field
                                                                         v-model="editedItem.name"
-                                                                        label="{{ _('Group Name') }}"
-                                                                ></v-text-field>
+                                                                        :rules="[validationRules.required()]"
+                                                                >
+                                                                    <template v-slot:label>{{ _('Group Name') }} <Asterisk /></template>
+                                                                </v-text-field>
                                                             </v-col>
                                                             <v-col cols="12" md="6">
                                                                 <v-text-field 
@@ -54,7 +57,6 @@
                                                                     v-model="editedItem.color" 
                                                                     persistent-hint
                                                                     hint="{{ _('Useful to easily identify groups in data tables.') }}"
-                                                                    v-mask="mask"
                                                                 >
                                                                     <template v-slot:append>
                                                                         <v-menu v-model="menu" top
@@ -100,13 +102,13 @@
                                                     >
                                                     <v-btn
                                                             color="primary"
-
                                                             variant="elevated"
-                                                            @click="save"
+                                                            type="submit"
                                                     >{{ _('Save') }}
                                                     </v-btn
                                                     >
                                                 </v-card-actions>
+                                                </v-form>
                                             </v-card>
                                         </v-dialog>
 
@@ -166,8 +168,6 @@
 
                                 <template v-slot:item.color="{item}">
                                     <v-avatar size="24" v-if="item.color"  :style="'background:' + item.color"></v-avatar>
-
-
                                 </template>
                                 <template v-slot:item.action="{ item }">
                                     <template v-if="!['Admin','Mod','DA'].includes(item.name)">
@@ -191,6 +191,7 @@
 
 
 {% endblock %} {% block js %}
+    <script src="/static/js/components/Asterisk.js"></script>
     <script nonce="{{ csp_nonce() }}">
 
         const {createApp} = Vue;
@@ -203,9 +204,9 @@
 
             data: () => ({
 
-                mask: '!#XXXXXXXX',
                 menu: false,
                 dialog: dialog,
+                validationRules: validationRules,
                 imDialog: false,
                 drawer: drawer,
                 loading: true,
@@ -231,13 +232,11 @@
                 defaultItem: {
                     title: "",
                     color: '#439d92',
-
                 }
             }),
 
             computed: {
                 swatchStyle() {
-                    const {color, menu} = this
                     return {
                         backgroundColor: this.editedItem.color,
                         cursor: 'pointer',
@@ -245,7 +244,7 @@
                         width: '24px',
                         margin: '2px',
                         border: '1px dotted #ddd',
-                        borderRadius: menu ? '50%' : '4px',
+                        borderRadius: this.menu ? '50%' : '4px',
                         transition: 'border-radius 200ms ease-in-out'
                     }
                 },
@@ -322,26 +321,34 @@
                 },
 
                 save() {
-                    if (this.editedIndex > -1) {
-                        Object.assign(this.items[this.editedIndex], this.editedItem);
-                        api.put(`/admin/api/role/${this.editedItem.id}`, {item: this.editedItem})
-                            .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh()
-                                this.close();
-                            });
-                    } else {
-                        axios
-                            .post("/admin/api/role/", {item: this.editedItem})
-                            .then(response => {
-                                this.showSnack(response.data);
-                                this.refresh()
-                                this.close()
-                            });
-                    }
+                    this.$refs.form.validate().then(({ valid }) => {
+                        if (!valid) {
+                            this.showSnack("{{ _('Please review form for errors.') }}");
+                            return;
+                        }
+
+                        if (this.editedIndex > -1) {
+                            Object.assign(this.items[this.editedIndex], this.editedItem);
+                            api.put(`/admin/api/role/${this.editedItem.id}`, {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh()
+                                    this.close();
+                                });
+                        } else {
+                            axios
+                                .post("/admin/api/role/", {item: this.editedItem})
+                                .then(response => {
+                                    this.showSnack(response.data);
+                                    this.refresh()
+                                    this.close()
+                                });
+                        }
+                    });
                 }
             }
         });
+        app.component('Asterisk', Asterisk);
         app.use(vuetify).mount("#app")
     </script>
 {% endblock %}
\ No newline at end of file

From 4e4f73813e1eb24d507076f3dcc195a73906b932 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 10:31:33 -0600
Subject: [PATCH 13/26] make group color required, replace input for color
 input and add hex validation

---
 enferno/admin/templates/admin/roles.html | 44 +++++-------------------
 enferno/static/js/common/config.js       | 10 ++++++
 2 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/enferno/admin/templates/admin/roles.html b/enferno/admin/templates/admin/roles.html
index e14bbb682..9fb609e45 100644
--- a/enferno/admin/templates/admin/roles.html
+++ b/enferno/admin/templates/admin/roles.html
@@ -52,31 +52,17 @@
                                                                 </v-text-field>
                                                             </v-col>
                                                             <v-col cols="12" md="6">
-                                                                <v-text-field 
-                                                                    label="{{ _('Group Color') }}"
-                                                                    v-model="editedItem.color" 
+                                                                <v-color-input
+                                                                    v-model="editedItem.color"
                                                                     persistent-hint
                                                                     hint="{{ _('Useful to easily identify groups in data tables.') }}"
+                                                                    color-pip
+                                                                    autocomplete="off"
+                                                                    mode="hex"
+                                                                    :rules="[validationRules.required(), validationRules.hexColor()]"
                                                                 >
-                                                                    <template v-slot:append>
-                                                                        <v-menu v-model="menu" top
-                                                                                nudge-bottom="105"
-                                                                                nudge-left="16"
-                                                                                :close-on-content-click="false">
-                                                                            <template v-slot:activator="{ props }">
-                                                                                <div :style="swatchStyle"
-                                                                                v-bind="props"></div>
-                                                                            </template>
-                                                                            <v-card>
-                                                                                <v-card-text class="pa-0">
-                                                                                    <v-color-picker
-                                                                                            v-model="editedItem.color"></v-color-picker>
-                                                                                </v-card-text>
-                                                                            </v-card>
-                                                                        </v-menu>
-                                                                    </template>
-                                                                </v-text-field>
-
+                                                                    <template v-slot:label>{{ _('Group Color') }} <Asterisk /></template>
+                                                                </v-color-input>
                                                             </v-col>
                                                         </v-row>
 
@@ -203,8 +189,6 @@
             mixins: [globalMixin],
 
             data: () => ({
-
-                menu: false,
                 dialog: dialog,
                 validationRules: validationRules,
                 imDialog: false,
@@ -236,18 +220,6 @@
             }),
 
             computed: {
-                swatchStyle() {
-                    return {
-                        backgroundColor: this.editedItem.color,
-                        cursor: 'pointer',
-                        height: '24px',
-                        width: '24px',
-                        margin: '2px',
-                        border: '1px dotted #ddd',
-                        borderRadius: this.menu ? '50%' : '4px',
-                        transition: 'border-radius 200ms ease-in-out'
-                    }
-                },
                 formTitle() {
                     return this.editedIndex === -1 ? "{{_('New Group')}}" : "{{_('Edit Group')}}";
                 }
diff --git a/enferno/static/js/common/config.js b/enferno/static/js/common/config.js
index 48ceb759f..8f6115a54 100644
--- a/enferno/static/js/common/config.js
+++ b/enferno/static/js/common/config.js
@@ -100,6 +100,13 @@ const validationRules = {
             }, 350);
           });
         };
+    },
+    hexColor() {
+        return (value) => {
+            if (!value) return true; // Optional field
+            const hexPattern = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+            return hexPattern.test(value) || 'Invalid hex color format (e.g., #F53, #FF5733, or #FF5733FF)';
+        };
     }
 };
 
@@ -161,6 +168,9 @@ const vuetifyConfig = {
         VApp: {
             class: 'bg-background',
         },
+        VColorInput: {
+            variant: 'outlined',
+        },
         VTextField: {
             variant: 'outlined',
         },

From 96cd56015eec021206e254506fcb2c19cca893f4 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 10:33:48 -0600
Subject: [PATCH 14/26] rename keys from title to name

---
 enferno/admin/templates/admin/roles.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/enferno/admin/templates/admin/roles.html b/enferno/admin/templates/admin/roles.html
index 9fb609e45..9faaeb46a 100644
--- a/enferno/admin/templates/admin/roles.html
+++ b/enferno/admin/templates/admin/roles.html
@@ -211,10 +211,10 @@
                 itemsLength: 10,
                 editedIndex: -1,
                 editedItem: {
-                    title: ""
+                    name: ""
                 },
                 defaultItem: {
-                    title: "",
+                    name: "",
                     color: '#439d92',
                 }
             }),

From d567f55369b74f03129a287f6fcec80a84020621 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 11:39:15 -0600
Subject: [PATCH 15/26] add asterisks to required fields in shortactordialog

---
 enferno/admin/templates/admin/jsapi.jinja2    |  2 +-
 .../static/js/components/ShortActorDialog.js  | 23 +++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/enferno/admin/templates/admin/jsapi.jinja2 b/enferno/admin/templates/admin/jsapi.jinja2
index 242abe8f1..3d26e2624 100644
--- a/enferno/admin/templates/admin/jsapi.jinja2
+++ b/enferno/admin/templates/admin/jsapi.jinja2
@@ -119,7 +119,7 @@ to_: "{{ _('To') }}",
 comments_: "{{ _('Comments') }}",
 commentsAr_: "{{ _('Comments (Ar)') }}",
 status_: "{{ _('Status') }}",
-restrictToAccessGroups_: "{{ _('Restrict Actor to Access Group(s)') }}",
+restrictActorToAccessGroups_: "{{ _('Restrict Actor to Access Group(s)') }}",
 noAccessAccessGroups_: "{{ _('No Access Access Groups') }}",
 profile_: "{{ _('Profile') }}",
 location_: "{{ _('Location') }}",
diff --git a/enferno/static/js/components/ShortActorDialog.js b/enferno/static/js/components/ShortActorDialog.js
index 9f8199c08..8a6ae4674 100644
--- a/enferno/static/js/components/ShortActorDialog.js
+++ b/enferno/static/js/components/ShortActorDialog.js
@@ -237,15 +237,16 @@ const ShortActorDialog = Vue.defineComponent({
                               <dual-field
                                   v-model:original="editedItem.first_name"
                                   v-model:translation="editedItem.first_name_ar"
-                                  :label-original="translations.firstName_"
-                                  :label-translation="translations.firstNameAr_"
                                   :allow-unknown="true"
                                   :rules="[
                                     validationRules.required(),
                                     validationRules.maxLength(255),
                                   ]"
                                   v-bind="$root.serverErrorPropsForDualField(serverErrors, 'item.first_name', 'item.first_name_ar')"
-                              />
+                              >
+                                <template v-slot:label-original>{{ translations.firstName_ }} <Asterisk /></template>
+                                <template v-slot:label-translation>{{ translations.firstNameAr_ }} <Asterisk /></template>
+                              </dual-field>
                           </div>
                           <div style="min-width: 0;">
                               <dual-field
@@ -261,15 +262,16 @@ const ShortActorDialog = Vue.defineComponent({
                               <dual-field
                                   v-model:original="editedItem.last_name"
                                   v-model:translation="editedItem.last_name_ar"
-                                  :label-original="translations.lastName_"
-                                  :label-translation="translations.lastNameAr_"
                                   :allow-unknown="true"
                                   :rules="[
                                       validationRules.required(),
                                       validationRules.maxLength(255),
                                   ]"
                                   v-bind="$root.serverErrorPropsForDualField(serverErrors, 'item.last_name', 'item.last_name_ar')"
-                              ></dual-field>
+                              >
+                                <template v-slot:label-original>{{ translations.lastName_ }} <Asterisk /></template>
+                                <template v-slot:label-translation>{{ translations.lastNameAr_ }} <Asterisk /></template>
+                              </dual-field>
                           </div>
                           <div style="min-width: 0;">
                             <dual-field
@@ -471,7 +473,9 @@ const ShortActorDialog = Vue.defineComponent({
                           </div>
 
                           <div style="min-width: 0;">
-                              <v-textarea outlined v-model="editedItem.comments" :rules="[validationRules.required()]" :label="translations.comments_"></v-textarea>
+                              <v-textarea outlined v-model="editedItem.comments" :rules="[validationRules.required()]">
+                                <template v-slot:label>{{ translations.comments_ }} <Asterisk /></template>
+                              </v-textarea>
                           </div>
 
                           <div style="min-width: 0;">
@@ -487,12 +491,13 @@ const ShortActorDialog = Vue.defineComponent({
                                   :items="allowedRoles"
                                   multiple
                                   v-model="editedItem.roles"
-                                  :label="translations.restrictToAccessGroups_"
                                   :rules="
                                     !unrestricted ? [validationRules.required(translations.accessGroupsRequired_)] : []
                                   "
                                   clearable
-                              ></v-select>
+                              >
+                                <template v-slot:label>{{ translations.restrictActorToAccessGroups_ }} <Asterisk v-if="!unrestricted" /></template>
+                              </v-select>
                               <v-checkbox color="error" @change="unrestricted ? editedItem.roles = [] : null" class="mx-2" :label="translations.noAccessAccessGroups_" v-model="unrestricted"> </v-checkbox>
                             </div>
                           </div>

From 6e1f044eadba2f01d085598e987aecf85a59630f Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 11:54:27 -0600
Subject: [PATCH 16/26] add asterisk to change password form

---
 .../templates/security/change_password.html   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/enferno/templates/security/change_password.html b/enferno/templates/security/change_password.html
index c28789ee7..8eacb448a 100755
--- a/enferno/templates/security/change_password.html
+++ b/enferno/templates/security/change_password.html
@@ -13,11 +13,12 @@
           {% if active_password %}
           <v-text-field
             v-model="form.password"
-            label="{{ _('Current Password') }}"
             type="password"
             name="password"
             :rules="[validationRules.required()]"
-          ></v-text-field>
+          >
+            <template v-slot:label>{{ _('Current Password') }} <Asterisk /></template>
+          </v-text-field>
           {% else %}
           <v-card-title>
             {{ _fsdomain('You do not currently have a password - this will add one.') }}
@@ -26,7 +27,6 @@
 
           <v-text-field
             v-model="form.new_password"
-            label="{{ _('New Password') }}"
             type="password"
             name="new_password"
             :class="isStrongPassword ? 'text-success' : undefined"
@@ -37,15 +37,18 @@
                 validationRules.checkPassword({ onResponse: onPasswordCheckResponse })
             ]"
             @input="isStrongPassword = false"
-          ></v-text-field>
+          >
+            <template v-slot:label>{{ _('New Password') }} <Asterisk /></template>
+          </v-text-field>
 
           <v-text-field
             v-model="form.new_password_confirm"
-            label="{{ _('Retype Password') }}"
             type="password"
             name="new_password_confirm"
-            :rules="[validationRules.matchesField(form.new_password)]"
-          ></v-text-field>
+            :rules="[validationRules.required(), validationRules.matchesField(form.new_password)]"
+          >
+            <template v-slot:label>{{ _('Retype Password') }} <Asterisk /></template>
+          </v-text-field>
         </v-card-text>
 
         <v-card-actions class="pa-4 justify-end">
@@ -68,6 +71,7 @@
   </v-container>
 </v-main>
 {% endblock content %} {% block js %}
+<script src="/static/js/components/Asterisk.js"></script>
 <script nonce="{{ csp_nonce() }}">
   const { createApp } = Vue;
   const { createVuetify } = Vuetify;
@@ -123,6 +127,8 @@
       },
     },
   });
+  
+  app.component('Asterisk', Asterisk)
 
   app.use(vuetify).mount('#app');
 </script>

From 9af15eebf07b5309d877a994d9f9690eee3062cc Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 08:42:31 -0600
Subject: [PATCH 17/26] add asterisk to import csv dialog and required
 validation

---
 enferno/admin/templates/admin/locations.html  | 22 ++++++++++++++-----
 .../admin/partials/location_dialog.html       |  5 ++---
 enferno/static/js/common/config.js            |  3 +++
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/enferno/admin/templates/admin/locations.html b/enferno/admin/templates/admin/locations.html
index 2d70e8478..c8641349d 100644
--- a/enferno/admin/templates/admin/locations.html
+++ b/enferno/admin/templates/admin/locations.html
@@ -69,9 +69,7 @@
                                                 <v-dialog
                                                         v-model="imDialog"
                                                         width="500">
-
-
-
+                                                    <v-form @submit.prevent="validateImportCSV" ref="csvForm">
                                                     <v-card>
                                                         <v-card-title>
                                                             <span class="headline">{{ _('Import CSV') }}</span>
@@ -84,7 +82,9 @@
                                                                         <v-file-input
                                                                                 v-model="csvFile" show-size
                                                                                 accept=".csv"
-                                                                                label="{{ _('Select CSV File') }}">
+                                                                                :rules="[validationRules.required()]"
+                                                                        >
+                                                                            <template v-slot:label>{{ _('Select CSV File') }} <Asterisk /></template>
                                                                         </v-file-input>
                                                                     </v-col>
                                                                 </v-row>
@@ -98,11 +98,12 @@
                                                                 {{ _('Cancel') }}
                                                             </v-btn>
                                                             <v-btn
-                                                                    @click="importCSV">
+                                                                    type="submit">
                                                                 {{ _('Save') }}
                                                             </v-btn>
                                                         </v-card-actions>
                                                     </v-card>
+                                                    </v-form>
                                                 </v-dialog>
                                             </v-toolbar>
                                         </template>
@@ -519,6 +520,17 @@
                     }
                 },
                 
+                validateImportCSV() {
+                    this.$refs.csvForm.validate().then(({ valid, errors }) => {
+                        if (valid) {
+                            this.importCSV();
+                        } else {
+                            this.showSnack("{{ _('Please review the form for errors.')}}")
+                            scrollToFirstError()
+                        }
+                    });
+                },
+
                 validateForm() {
                     this.$refs.form.validate().then(({ valid, errors }) => {
                         if (valid) {
diff --git a/enferno/admin/templates/admin/partials/location_dialog.html b/enferno/admin/templates/admin/partials/location_dialog.html
index f75cdbb31..0c45b1dc2 100644
--- a/enferno/admin/templates/admin/partials/location_dialog.html
+++ b/enferno/admin/templates/admin/partials/location_dialog.html
@@ -1,5 +1,5 @@
 <v-dialog :retain-focus="false" no-click-animation persistent v-if="dialog" v-model="dialog" fullscreen>
-    <v-form @submit.prevent="save"  ref="form" v-model="valid">
+    <v-form @submit.prevent="validateForm" ref="form">
         <v-card v-if="dialog" class="overflow-hidden card-edit">
             <v-toolbar
                 color="primary"
@@ -9,8 +9,7 @@
             </v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-btn 
-                    type="button" 
-                    @click="validateForm"
+                    type="submit" 
                     variant="elevated"
                     class="mx-2"
                     >
diff --git a/enferno/static/js/common/config.js b/enferno/static/js/common/config.js
index 8f6115a54..c104bd3f7 100644
--- a/enferno/static/js/common/config.js
+++ b/enferno/static/js/common/config.js
@@ -168,6 +168,9 @@ const vuetifyConfig = {
         VApp: {
             class: 'bg-background',
         },
+        VFileInput: {
+            variant: 'outlined',
+        },
         VColorInput: {
             variant: 'outlined',
         },

From ffcf4e3253bcf7360f6618b89038cf7f66d231de Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 08:48:18 -0600
Subject: [PATCH 18/26] add asterisk to import csv dialog and required
 validation souces page

---
 enferno/admin/templates/admin/sources.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/enferno/admin/templates/admin/sources.html b/enferno/admin/templates/admin/sources.html
index a86a161d7..ff3127e2c 100644
--- a/enferno/admin/templates/admin/sources.html
+++ b/enferno/admin/templates/admin/sources.html
@@ -131,6 +131,7 @@
                                                     </template>
                                                     {% endif %}
 
+                                                    <v-form ref="csvForm" @submit.prevent="validateImportCSV">
                                                     <v-card>
                                                         <v-card-title>
                                                             <span class="headline">{{ _('Import CSV') }}</span>
@@ -142,7 +143,10 @@
                                                                     <v-col cols="12" md="12">
                                                                         <v-file-input v-model="csvFile" show-size
                                                                                       accept=".csv"
-                                                                                      label="{{ _('Select CSV File') }}"></v-file-input>
+                                                                                      :rules="[validationRules.required()]"
+                                                                        >
+                                                                            <template v-slot:label>{{ _('Select CSV File') }} <Asterisk /></template>
+                                                                        </v-file-input>
 
                                                                     </v-col>
                                                                 </v-row>
@@ -161,12 +165,13 @@
                                                             <v-btn
                                                                     color="blue darken-1"
                                                                     text
-                                                                    @click="importCSV"
+                                                                    type="submit"
                                                             >{{ _('Save') }}
                                                             </v-btn
                                                             >
                                                         </v-card-actions>
                                                     </v-card>
+                                                    </v-form>
 
                                                 </v-dialog>
 
@@ -328,6 +333,17 @@
                     }, 300);
                 },
 
+                validateImportCSV() {
+                    this.$refs.csvForm.validate().then(({ valid, errors }) => {
+                        if (valid) {
+                            this.importCSV();
+                        } else {
+                            this.showSnack("{{ _('Please review the form for errors.')}}")
+                            scrollToFirstError()
+                        }
+                    });
+                },
+
                 save() {
                     this.$refs.form.validate().then(({ valid }) => {
                         if (!valid) {

From e16c0aaeb91a410057ed433f7716a35f3c689b93 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 09:28:37 -0600
Subject: [PATCH 19/26] unify import csv dialogs and add asterisk and form
 validation

---
 enferno/admin/templates/admin/eventtypes.html | 67 ++------------
 enferno/admin/templates/admin/jsapi.jinja2    |  2 +
 enferno/admin/templates/admin/labels.html     | 67 ++------------
 enferno/admin/templates/admin/locations.html  | 78 ++--------------
 enferno/admin/templates/admin/sources.html    | 88 ++-----------------
 .../static/js/components/ImportCsvDialog.js   | 76 ++++++++++++++++
 6 files changed, 98 insertions(+), 280 deletions(-)
 create mode 100644 enferno/static/js/components/ImportCsvDialog.js

diff --git a/enferno/admin/templates/admin/eventtypes.html b/enferno/admin/templates/admin/eventtypes.html
index d66fbfa13..ad681e851 100644
--- a/enferno/admin/templates/admin/eventtypes.html
+++ b/enferno/admin/templates/admin/eventtypes.html
@@ -107,56 +107,9 @@
                                             </v-card>
                                         </v-dialog>
 
-                                        <v-dialog v-model="imDialog" width="500">
-
-                                            {% if current_user.roles_in(['Admin']) %}
-                                                <template v-slot:activator="{ props }">
-                                                    <v-btn
-                                                            color="secondary"
-                                                            variant="elevated"
-                                                            class="ma-2"
-                                                            v-bind="props">
-                                                        {{ _('Import CSV') }}
-                                                    </v-btn>
-                                                </template>
-                                            {% endif %}
-
-                                            <v-card>
-                                                <v-card-title>
-                                                    <span class="headline">{{ _('Import CSV') }}</span>
-                                                </v-card-title>
-
-                                                <v-card-text>
-                                                    <v-container>
-                                                        <v-row>
-                                                            <v-col cols="12" md="12">
-                                                                <v-file-input v-model="csvFile" show-size
-                                                                              accept=".csv"
-                                                                              label="{{ _('Select CSV File') }}"></v-file-input>
-
-                                                            </v-col>
-                                                        </v-row>
-                                                    </v-container>
-                                                </v-card-text>
-
-                                                <v-card-actions>
-                                                    <v-spacer></v-spacer>
-                                                    <v-btn
-                                                            color="blue darken-1"
-                                                            text
-                                                            @click="imDialog=false"
-                                                    >{{ _('Cancel') }}</v-btn
-                                                    >
-                                                    <v-btn
-                                                            color="blue darken-1"
-                                                            text
-                                                            @click="importCSV"
-                                                    >{{ ('Save') }}</v-btn
-                                                    >
-                                                </v-card-actions>
-                                            </v-card>
-
-                                        </v-dialog>
+                                        {% if current_user.roles_in(['Admin']) %}
+                                        <import-csv-dialog endpoint="/admin/api/eventtype/import/" @import="refresh()"></import-csv-dialog>
+                                        {% endif %}
 
                                     </v-toolbar>
                                 </template>
@@ -186,6 +139,7 @@
 
 {% endblock %} {% block js %}
     <script src="/static/js/components/Asterisk.js"></script>
+    <script src="/static/js/components/ImportCsvDialog.js"></script>
     <script nonce="{{ csp_nonce() }}">
         const {createApp} = Vue;
         const {createVuetify} = Vuetify;
@@ -256,18 +210,6 @@
                     });
                 },
 
-                importCSV() {
-                    const reqData = new FormData();
-                    reqData.append('csv', this.csvFile)
-                    api.post('/admin/api/eventtype/import/', reqData).then(response => {
-
-                        this.imDialog = false;
-                        this.refresh();
-                        this.showSnack(response.data);
-                    })
-
-                },
-
                 editItem(item) {
                     this.editedIndex = this.items.indexOf(item);
                     this.editedItem = Object.assign({}, item);
@@ -334,6 +276,7 @@
             }
         });
         app.component('Asterisk', Asterisk);
+        app.component('ImportCsvDialog', ImportCsvDialog);
         app.use(vuetify).mount("#app")
     </script>
 {% endblock %}
\ No newline at end of file
diff --git a/enferno/admin/templates/admin/jsapi.jinja2 b/enferno/admin/templates/admin/jsapi.jinja2
index 3d26e2624..d2e3d9ee3 100644
--- a/enferno/admin/templates/admin/jsapi.jinja2
+++ b/enferno/admin/templates/admin/jsapi.jinja2
@@ -92,6 +92,8 @@ locationOrDateRequired_: "{{ _('Location or Date is required') }}",
 titleOrTypeRequired_: "{{ _('Title or Event Type is required') }}",
 preview_ : "{{ _('Preview') }}",
 pleaseReviewFormForErrors_ : "{{ _('Please review the form for errors.') }}",
+importCsv_ : "{{ _('Import CSV') }}",
+selectCsvFile_ : "{{ _('Select CSV file') }}",
 accessGroupsRequired_ : "{{ _('Access Group(s) are required unless unrestricted.') }}",
 saveActor_: "{{ _('Save Actor') }}",
 title_: "{{ _('Title') }}",
diff --git a/enferno/admin/templates/admin/labels.html b/enferno/admin/templates/admin/labels.html
index 3672e385d..b4692adcc 100644
--- a/enferno/admin/templates/admin/labels.html
+++ b/enferno/admin/templates/admin/labels.html
@@ -165,56 +165,9 @@
                                                     </v-card>
                                                 </v-dialog>
 
-                                                <v-dialog v-model="imDialog" width="500">
-
-                                                    {% if current_user.roles_in(['Admin']) %}
-                                                    <template v-slot:activator="{ props }">
-                                                        <v-btn
-                                                            color="secondary"
-                                                            variant="elevated"
-                                                            class="ma-2"
-                                                            v-bind="props">
-                                                            {{ _('Import CSV') }}
-                                                        </v-btn>
-                                                    </template>
-                                                    {% endif %}
-                                                    
-                                                    <v-card>
-                                                        <v-card-title>
-                                                            <span class="headline">{{ _('Import CSV') }}</span>
-                                                        </v-card-title>
-
-                                                        <v-card-text>
-                                                            <v-container>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="12">
-                                                                        <v-file-input v-model="csvFile" show-size
-                                                                                      accept=".csv"
-                                                                                      label="{{ _('Select CSV File') }}"></v-file-input>
-
-                                                                    </v-col>
-                                                                </v-row>
-                                                            </v-container>
-                                                        </v-card-text>
-
-                                                        <v-card-actions>
-                                                            <v-spacer></v-spacer>
-                                                            <v-btn
-                                                                    color="blue darken-1"
-                                                                    text
-                                                                    @click="imDialog=false"
-                                                            >{{ _('Cancel') }}</v-btn
-                                                            >
-                                                            <v-btn
-                                                                    color="blue darken-1"
-                                                                    text
-                                                                    @click="importCSV"
-                                                            >{{ _('Save') }}</v-btn
-                                                            >
-                                                        </v-card-actions>
-                                                    </v-card>
-
-                                                </v-dialog>
+                                                {% if current_user.roles_in(['Admin']) %}
+                                                <import-csv-dialog endpoint="/admin/api/label/import/" @import="refresh()"></import-csv-dialog>
+                                                {% endif %}
 
                                             </v-toolbar>
                                         </template>
@@ -250,6 +203,7 @@
 {% endblock %} {% block js %}
     <script src="/static/js/components/SearchField.js"></script>
     <script src="/static/js/components/Asterisk.js"></script>
+    <script src="/static/js/components/ImportCsvDialog.js"></script>
     <script nonce="{{ csp_nonce() }}">
 
         const {createApp} = Vue;
@@ -265,7 +219,6 @@
                 imDialog: false,
                 drawer: drawer,
                 loading: true,
-                csvFile: null,
                 options: {},
 
                 headers: [
@@ -330,17 +283,6 @@
                     this.refresh()
                 },
 
-                importCSV() {
-                    const reqData = new FormData();
-                    reqData.append('csv', this.csvFile)
-                    api.post('/admin/api/label/import/', reqData).then(response => {
-                        this.imDialog = false;
-                        this.refresh();
-                        this.showSnack(response.data);
-                    })
-
-                },
-
                 searchParents: debounce(function (evt) {
 
                     api.get(`/admin/api/labels/?q=${evt.target.value}`).then(response => {
@@ -405,6 +347,7 @@
         });
         app.component('SearchField', SearchField);
         app.component('Asterisk', Asterisk);
+        app.component('ImportCsvDialog', ImportCsvDialog);
         app.use(vuetify).mount('#app');
     </script>
 {% endblock %}
\ No newline at end of file
diff --git a/enferno/admin/templates/admin/locations.html b/enferno/admin/templates/admin/locations.html
index c8641349d..4a3dfc28e 100644
--- a/enferno/admin/templates/admin/locations.html
+++ b/enferno/admin/templates/admin/locations.html
@@ -53,58 +53,11 @@
                                                     {{ _('New Location') }}
                                                 </v-btn>
 
-                                                {% if current_user.has_role('Admin') %}
-                                                        <v-btn
-                                                            @click="imDialog=true"
-                                                            variant="elevated"
-
-                                                            class="ma-2"
-                                                            >
-                                                            {{ _('Import CSV') }}
-                                                        </v-btn>
-                                                    {% endif %}
-
                                                 {% include 'admin/partials/location_dialog.html' %}
 
-                                                <v-dialog
-                                                        v-model="imDialog"
-                                                        width="500">
-                                                    <v-form @submit.prevent="validateImportCSV" ref="csvForm">
-                                                    <v-card>
-                                                        <v-card-title>
-                                                            <span class="headline">{{ _('Import CSV') }}</span>
-                                                        </v-card-title>
-
-                                                        <v-card-text>
-                                                            <v-container>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="12">
-                                                                        <v-file-input
-                                                                                v-model="csvFile" show-size
-                                                                                accept=".csv"
-                                                                                :rules="[validationRules.required()]"
-                                                                        >
-                                                                            <template v-slot:label>{{ _('Select CSV File') }} <Asterisk /></template>
-                                                                        </v-file-input>
-                                                                    </v-col>
-                                                                </v-row>
-                                                            </v-container>
-                                                        </v-card-text>
-
-                                                        <v-card-actions>
-                                                            <v-spacer></v-spacer>
-                                                            <v-btn
-                                                                    @click="imDialog=false">
-                                                                {{ _('Cancel') }}
-                                                            </v-btn>
-                                                            <v-btn
-                                                                    type="submit">
-                                                                {{ _('Save') }}
-                                                            </v-btn>
-                                                        </v-card-actions>
-                                                    </v-card>
-                                                    </v-form>
-                                                </v-dialog>
+                                                {% if current_user.roles_in(['Admin']) %}
+                                                <import-csv-dialog endpoint="/admin/api/location/import/" @import="refresh()"></import-csv-dialog>
+                                                {% endif %}
                                             </v-toolbar>
                                         </template>
 
@@ -161,6 +114,7 @@
     <script src="/static/js/components/LocationSearchBox.js"></script>
     <script src="/static/js/components/ReadMore.js"></script>
     <script src="/static/js/components/Asterisk.js"></script>
+    <script src="/static/js/components/ImportCsvDialog.js"></script>
 
     {% if config.GOOGLE_MAPS_API_KEY %}
         {{ '<script src="https://maps.googleapis.com/maps/api/js?key='|safe + config.GOOGLE_MAPS_API_KEY + '&loading=async" async defer></script>'|safe }}
@@ -420,18 +374,6 @@
                         });
                 },
 
-                importCSV() {
-                    const reqData = new FormData();
-                    reqData.append('csv', this.csvFile)
-                    api.post('/admin/api/location/import/', reqData).then(response => {
-
-                        this.imDialog = false;
-                        this.refresh();
-                        this.showSnack(response.data);
-
-                    })
-                },
-
                 newItem() {
 
                     this.editedItem = JSON.parse(JSON.stringify(this.defaultItem));
@@ -519,17 +461,6 @@
                         })
                     }
                 },
-                
-                validateImportCSV() {
-                    this.$refs.csvForm.validate().then(({ valid, errors }) => {
-                        if (valid) {
-                            this.importCSV();
-                        } else {
-                            this.showSnack("{{ _('Please review the form for errors.')}}")
-                            scrollToFirstError()
-                        }
-                    });
-                },
 
                 validateForm() {
                     this.$refs.form.validate().then(({ valid, errors }) => {
@@ -558,6 +489,7 @@
         app.component('GlobalMap', GlobalMap);
         app.component('ReadMore', ReadMore);
         app.component('Asterisk', Asterisk);
+        app.component('ImportCsvDialog', ImportCsvDialog);
         app.use(router).use(vuetify).mount('#app');
     </script>
 {% endblock %}
diff --git a/enferno/admin/templates/admin/sources.html b/enferno/admin/templates/admin/sources.html
index ff3127e2c..dbd8f2854 100644
--- a/enferno/admin/templates/admin/sources.html
+++ b/enferno/admin/templates/admin/sources.html
@@ -117,64 +117,9 @@
                                                     </v-card>
                                                 </v-dialog>
 
-                                                <v-dialog v-model="imDialog" width="500">
-
-                                                    {% if current_user.roles_in(['Admin']) %}
-                                                    <template v-slot:activator="{ props }">
-                                                        <v-btn
-                                                            color="secondary"
-                                                            variant="elevated"
-                                                            class="ma-2"
-                                                            v-bind="props">
-                                                            {{ _('Import CSV') }}
-                                                        </v-btn>
-                                                    </template>
-                                                    {% endif %}
-
-                                                    <v-form ref="csvForm" @submit.prevent="validateImportCSV">
-                                                    <v-card>
-                                                        <v-card-title>
-                                                            <span class="headline">{{ _('Import CSV') }}</span>
-                                                        </v-card-title>
-
-                                                        <v-card-text>
-                                                            <v-container>
-                                                                <v-row>
-                                                                    <v-col cols="12" md="12">
-                                                                        <v-file-input v-model="csvFile" show-size
-                                                                                      accept=".csv"
-                                                                                      :rules="[validationRules.required()]"
-                                                                        >
-                                                                            <template v-slot:label>{{ _('Select CSV File') }} <Asterisk /></template>
-                                                                        </v-file-input>
-
-                                                                    </v-col>
-                                                                </v-row>
-                                                            </v-container>
-                                                        </v-card-text>
-
-                                                        <v-card-actions>
-                                                            <v-spacer></v-spacer>
-                                                            <v-btn
-                                                                    color="blue darken-1"
-                                                                    text
-                                                                    @click="imDialog=false"
-                                                            >{{ _('Cancel') }}
-                                                            </v-btn
-                                                            >
-                                                            <v-btn
-                                                                    color="blue darken-1"
-                                                                    text
-                                                                    type="submit"
-                                                            >{{ _('Save') }}
-                                                            </v-btn
-                                                            >
-                                                        </v-card-actions>
-                                                    </v-card>
-                                                    </v-form>
-
-                                                </v-dialog>
-
+                                                {% if current_user.roles_in(['Admin']) %}
+                                                <import-csv-dialog endpoint="/admin/api/source/import/" @import="refresh()"></import-csv-dialog>
+                                                {% endif %}
                                             </v-toolbar>
                                         </template>
                                         <template #['item.comments']="{ item }">
@@ -201,6 +146,7 @@
 {% endblock %} {% block js %}
     <script src="/static/js/components/SearchField.js"></script>
     <script src="/static/js/components/Asterisk.js"></script>
+    <script src="/static/js/components/ImportCsvDialog.js"></script>
     <script nonce="{{ csp_nonce() }}">
 
 
@@ -215,12 +161,10 @@
             data: () => ({
                 dialog: dialog,
                 validationRules: validationRules,
-                imDialog: false,
                 drawer: drawer,
                 parents: [],
                 loading: true,
                 parentLoading: false,
-                csvFile: null,
                 options: {},
 
                 headers: [
@@ -285,18 +229,6 @@
                     this.refresh()
                 },
 
-                importCSV() {
-                    const reqData = new FormData();
-                    reqData.append('csv', this.csvFile)
-                    api.post('/admin/api/source/import/', reqData).then(response => {
-
-                        this.imDialog = false;
-                        this.refresh();
-                        this.showSnack(response.data);
-                    })
-
-                },
-
                 newItem() {
 
                     this.editedItem = Object.assign({}, this.defaultItem);
@@ -333,17 +265,6 @@
                     }, 300);
                 },
 
-                validateImportCSV() {
-                    this.$refs.csvForm.validate().then(({ valid, errors }) => {
-                        if (valid) {
-                            this.importCSV();
-                        } else {
-                            this.showSnack("{{ _('Please review the form for errors.')}}")
-                            scrollToFirstError()
-                        }
-                    });
-                },
-
                 save() {
                     this.$refs.form.validate().then(({ valid }) => {
                         if (!valid) {
@@ -378,6 +299,7 @@
 
         app.component('SearchField', SearchField)
         app.component('Asterisk', Asterisk)
+        app.component('ImportCsvDialog', ImportCsvDialog)
 
         app.use(vuetify).mount("#app")
     </script>
diff --git a/enferno/static/js/components/ImportCsvDialog.js b/enferno/static/js/components/ImportCsvDialog.js
new file mode 100644
index 000000000..00b56e4cb
--- /dev/null
+++ b/enferno/static/js/components/ImportCsvDialog.js
@@ -0,0 +1,76 @@
+const ImportCsvDialog = Vue.defineComponent({
+    props: {
+        endpoint: {
+            type: String,
+            required: true
+        }
+    },
+    emits: ['import'],
+    data: () => {
+      return {
+        validationRules: validationRules,
+        translations: window.translations,
+        dialog: false,
+        csvFile: null,
+      };
+    },
+    methods: {
+        importCSV() {
+            const reqData = new FormData();
+            reqData.append('csv', this.csvFile)
+            api.post(this.endpoint, reqData).then(response => {
+                this.$emit('import')
+                this.$root.showSnack(response.data);
+                this.close();
+            })
+        },
+        validateImportCSV() {
+            this.$refs.csvForm.validate().then(({ valid }) => {
+                if (valid) {
+                    this.importCSV();
+                } else {
+                    this.$root.showSnack(this.translations.pleaseReviewFormForErrors_)
+                    scrollToFirstError()
+                }
+            });
+        },
+        close() {
+            this.dialog = false;
+            this.csvFile = null;
+        }
+    },
+    template: `
+        <v-dialog v-model="dialog" width="500" @after-leave="close()">
+            <template v-slot:activator="{ props }">
+                <v-btn
+                        color="secondary"
+                        variant="elevated"
+                        class="ma-2"
+                        v-bind="props">
+                    {{ translations.importCsv_ }}
+                </v-btn>
+            </template>
+
+            <v-form ref="csvForm" @submit.prevent="validateImportCSV">
+                <v-card>
+                    <v-card-title>
+                        <span class="headline">{{ translations.importCsv_ }}</span>
+                    </v-card-title>
+
+                    <v-card-text>
+                        <v-file-input v-model="csvFile" show-size accept=".csv" :rules="[validationRules.required()]">
+                            <template v-slot:label>{{ translations.selectCsvFile_ }} <Asterisk /></template>
+                        </v-file-input>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn @click="close()">{{ translations.cancel_ }}</v-btn>
+                        <v-btn color="primary" variant="flat" type="submit">{{ translations.save_ }}</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-form>
+        </v-dialog>
+      `,
+  });
+  
\ No newline at end of file

From 801d783090cc660b155d44d09aaa14d2dd30f357 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 09:38:42 -0600
Subject: [PATCH 20/26] add import csv dialog to roles page

---
 enferno/admin/templates/admin/roles.html | 67 ++----------------------
 1 file changed, 3 insertions(+), 64 deletions(-)

diff --git a/enferno/admin/templates/admin/roles.html b/enferno/admin/templates/admin/roles.html
index 9faaeb46a..48856ae25 100644
--- a/enferno/admin/templates/admin/roles.html
+++ b/enferno/admin/templates/admin/roles.html
@@ -98,57 +98,7 @@
                                             </v-card>
                                         </v-dialog>
 
-                                        <v-dialog
-                                                v-model="imDialog"
-                                                width="500"
-                                        >
-                                            <template v-slot:activator="{ props }">
-                                                <v-btn
-                                                    color="secondary"
-                                                    variant="elevated"
-                                                    class="ma-2"
-                                                    v-bind="props">
-                                                    {{ _('Import CSV') }}
-                                                </v-btn>
-                                            </template>
-
-                                            <v-card>
-                                                <v-card-title>
-                                                    <span class="headline">{{ _('Import CSV') }}</span>
-                                                </v-card-title>
-
-                                                <v-card-text>
-                                                    <v-container>
-                                                        <v-row>
-                                                            <v-col cols="12" md="12">
-                                                                <v-file-input v-model="csvFile" show-size
-                                                                              accept=".csv"
-                                                                              label="{{ _('Select CSV File') }}"></v-file-input>
-
-                                                            </v-col>
-                                                        </v-row>
-                                                    </v-container>
-                                                </v-card-text>
-
-                                                <v-card-actions>
-                                                    <v-spacer></v-spacer>
-                                                    <v-btn
-                                                            color="blue darken-1"
-                                                            text
-                                                            @click="imDialog=false"
-                                                    >{{ _('Cancel') }}</v-btn
-                                                    >
-                                                    <v-btn
-                                                            color="blue darken-1"
-                                                            text
-                                                            @click="importCSV"
-                                                    >{{ _('Save') }}</v-btn
-                                                    >
-                                                </v-card-actions>
-                                            </v-card>
-
-                                        </v-dialog>
-
+                                        <import-csv-dialog endpoint="/admin/api/role/import/" @import="refresh()"></import-csv-dialog>
                                     </v-toolbar>
                                 </template>
 
@@ -178,6 +128,7 @@
 
 {% endblock %} {% block js %}
     <script src="/static/js/components/Asterisk.js"></script>
+    <script src="/static/js/components/ImportCsvDialog.js"></script>
     <script nonce="{{ csp_nonce() }}">
 
         const {createApp} = Vue;
@@ -191,10 +142,8 @@
             data: () => ({
                 dialog: dialog,
                 validationRules: validationRules,
-                imDialog: false,
                 drawer: drawer,
                 loading: true,
-                csvFile: null,
                 options: {},
 
                 headers: [
@@ -245,17 +194,6 @@
                         this.loading = false;
                     });
                 },
-
-                importCSV() {
-                    const reqData = new FormData();
-                    reqData.append('csv', this.csvFile)
-                    api.post('/admin/api/role/import/', reqData).then(response => {
-                        this.imDialog = false;
-                        this.refresh();
-                        this.showSnack(response.data);
-                    })
-
-                },
                 newItem() {
 
                     this.editedItem = Object.assign({}, this.defaultItem);
@@ -321,6 +259,7 @@
             }
         });
         app.component('Asterisk', Asterisk);
+        app.component('ImportCsvDialog', ImportCsvDialog);
         app.use(vuetify).mount("#app")
     </script>
 {% endblock %}
\ No newline at end of file

From 9e4044acfa215c28056cab0978d1e2d7892f202d Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 14:22:13 -0600
Subject: [PATCH 21/26] replace span in geomap for shared Asterisk component
 and import it in other places

---
 enferno/admin/templates/admin/activity.html              | 2 ++
 enferno/admin/templates/admin/system-administration.html | 2 ++
 enferno/deduplication/templates/deduplication.html       | 2 ++
 enferno/static/js/components/GeoMap.js                   | 4 ++--
 enferno/templates/setup_wizard.html                      | 2 ++
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/enferno/admin/templates/admin/activity.html b/enferno/admin/templates/admin/activity.html
index f8e3a28c6..f2174f427 100644
--- a/enferno/admin/templates/admin/activity.html
+++ b/enferno/admin/templates/admin/activity.html
@@ -154,6 +154,7 @@
     <script src="/static/js/mixins/media-mixin.js"></script>
     <script src="/static/js/mixins/form-builder-mixin.js"></script>
 
+    <script src="/static/js/components/Asterisk.js"></script>
     <script src="/static/js/components/GeoMap.js"></script>
     <script src="/static/js/components/GlobalMap.js"></script>
     <script src="/static/js/components/GeoLocations.js"></script>
@@ -399,6 +400,7 @@
   app.component('UniField', UniField);
   app.component('DualField', DualField);
 
+  app.component('Asterisk', Asterisk);
   app.component('GeoMap', GeoMap);
   app.component('GeoLocations', GeoLocations);
   app.component('GlobalMap', GlobalMap);
diff --git a/enferno/admin/templates/admin/system-administration.html b/enferno/admin/templates/admin/system-administration.html
index ee396f7ee..876432a0e 100644
--- a/enferno/admin/templates/admin/system-administration.html
+++ b/enferno/admin/templates/admin/system-administration.html
@@ -1075,6 +1075,7 @@ <h4 class="subtitle-2 mb-n1">{{ _('Enable Mail System') }}</h4>
 {% block js %}
 
     <script src="/static/js/diff-tool.js"></script>
+    <script src="/static/js/components/Asterisk.js"></script>
     <script src="/static/js/components/GeoMap.js"></script>
     <script src="/static/js/components/ShowDetails.js"></script>
     <script src="/static/js/components/DiffRenderer.js"></script>
@@ -1403,6 +1404,7 @@ <h4 class="subtitle-2 mb-n1">{{ _('Enable Mail System') }}</h4>
                 }
             }
         });
+        app.component('Asterisk', Asterisk);
         app.component('GeoMap', GeoMap);
         app.component('ShowDetails', ShowDetails);
         app.component('DiffRenderer', DiffRenderer);
diff --git a/enferno/deduplication/templates/deduplication.html b/enferno/deduplication/templates/deduplication.html
index f6211f47d..02236ce12 100644
--- a/enferno/deduplication/templates/deduplication.html
+++ b/enferno/deduplication/templates/deduplication.html
@@ -108,6 +108,7 @@
 <script src="/static/js/mixins/media-mixin.js"></script>
 <script src="/static/js/mixins/form-builder-mixin.js"></script>
 
+<script src="/static/js/components/Asterisk.js"></script>
 <script src="/static/js/components/GeoMap.js"></script>
 <script src="/static/js/components/GlobalMap.js"></script>
 <script src="/static/js/components/GeoLocations.js"></script>
@@ -318,6 +319,7 @@
     app.component('UniField', UniField);
     app.component('DualField', DualField);
 
+    app.component('Asterisk', Asterisk);
     app.component('GeoMap', GeoMap);
     app.component('GeoLocations', GeoLocations);
     app.component('GlobalMap', GlobalMap);
diff --git a/enferno/static/js/components/GeoMap.js b/enferno/static/js/components/GeoMap.js
index f0bf3c423..18bff36ac 100644
--- a/enferno/static/js/components/GeoMap.js
+++ b/enferno/static/js/components/GeoMap.js
@@ -383,7 +383,7 @@ const GeoMap = Vue.defineComponent({
               append-inner-icon="mdi-content-copy"
               @click:append-inner="copyToClipboard(lat)"
             >
-              <template v-slot:label>{{ translations.latitude_ }} <span v-if="useAsterisk" class="text-error">*</span></template>  
+              <template v-slot:label>{{ translations.latitude_ }} <Asterisk v-if="useAsterisk" /></template>  
             </v-text-field>
             <v-text-field
               v-bind="inputProps" type="number" min="-180" max="180"
@@ -392,7 +392,7 @@ const GeoMap = Vue.defineComponent({
               append-inner-icon="mdi-content-copy"
               @click:append-inner="copyToClipboard(lng)"
             >
-              <template v-slot:label>{{ translations.longitude_ }} <span v-if="useAsterisk" class="text-error">*</span></template>
+              <template v-slot:label>{{ translations.longitude_ }} <Asterisk v-if="useAsterisk" /></template>
             </v-text-field>
             <v-btn icon variant="flat" v-if="lat && lng" @click="clearMarker">
               <v-icon>mdi-close</v-icon>
diff --git a/enferno/templates/setup_wizard.html b/enferno/templates/setup_wizard.html
index 44967a709..c45d279d4 100644
--- a/enferno/templates/setup_wizard.html
+++ b/enferno/templates/setup_wizard.html
@@ -473,6 +473,7 @@ <h2 class="mt-1 subtitle-2 mb-2">{{ _('Two Factor Authentication Policies') }}</
 
 <script src="/static/leaflet-fullscreen/leaflet.fullscreen.min.js"></script>
 
+<script src="/static/js/components/Asterisk.js"></script>
 <script src="/static/js/components/GeoMap.js"></script>
 <script src="/static/js/components/EditableTable.js"></script>
 
@@ -661,6 +662,7 @@ <h2 class="mt-1 subtitle-2 mb-2">{{ _('Two Factor Authentication Policies') }}</
             },
         });
 
+        app.component('Asterisk', Asterisk);
         app.component('EditableTable', EditableTable);
         app.component('GeoMap', GeoMap);
 

From d7403b22f86023fce0fc099fbc6b9b35d2efd8cb Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 16:14:59 -0600
Subject: [PATCH 22/26] add semantic text to asterisk

---
 enferno/static/js/components/Asterisk.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/enferno/static/js/components/Asterisk.js b/enferno/static/js/components/Asterisk.js
index ed7eb17aa..75d058ac2 100644
--- a/enferno/static/js/components/Asterisk.js
+++ b/enferno/static/js/components/Asterisk.js
@@ -1,3 +1,3 @@
 const Asterisk = Vue.defineComponent({
-  template: `<span class="text-error">*</span>`,
+  template: `<span class="text-error" aria-label="required">*</span>`,
 });
\ No newline at end of file

From cab88651e7a436d3da483f287a9d1182154caa34 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 16:22:24 -0600
Subject: [PATCH 23/26] add translation to hex validator

---
 enferno/admin/templates/admin/jsapi.jinja2 | 1 +
 enferno/static/js/common/config.js         | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/enferno/admin/templates/admin/jsapi.jinja2 b/enferno/admin/templates/admin/jsapi.jinja2
index d2e3d9ee3..3c724b808 100644
--- a/enferno/admin/templates/admin/jsapi.jinja2
+++ b/enferno/admin/templates/admin/jsapi.jinja2
@@ -84,6 +84,7 @@ allUnsavedEditsHaveBeenDiscarded_: "{{ _('All unsaved edits in the form have bee
 reviewAndConfirmChanges_: "{{ _('Review & Confirm Changes') }}",
 youreAboutToDeleteAField_: "{{ _('You\'re about to delete a field') }}",
 fieldsSavedSuccessfully_: "{{ _('Fields saved successfully') }}",
+invalidHexColorFormat_: "{{ _('Invalid hex color format (e.g., #F53, #FF5733, or #FF5733FF)') }}",
 
 cancel_ : "{{ _('Cancel') }}",
 titleOrTitleArRequired_ : "{{ _('Title or Title (Ar) is required') }}",
diff --git a/enferno/static/js/common/config.js b/enferno/static/js/common/config.js
index c104bd3f7..da9c90bba 100644
--- a/enferno/static/js/common/config.js
+++ b/enferno/static/js/common/config.js
@@ -101,11 +101,11 @@ const validationRules = {
           });
         };
     },
-    hexColor() {
+    hexColor: (message = window.translations.invalidHexColorFormat_) => {
         return (value) => {
             if (!value) return true; // Optional field
             const hexPattern = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
-            return hexPattern.test(value) || 'Invalid hex color format (e.g., #F53, #FF5733, or #FF5733FF)';
+            return hexPattern.test(value) || message;
         };
     }
 };

From 0f26a80f61f8c825c423b03f2f9ca58ee243308d Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Thu, 29 Jan 2026 16:31:26 -0600
Subject: [PATCH 24/26] scroll to first error of closest dialog first

---
 enferno/static/js/common/config.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/enferno/static/js/common/config.js b/enferno/static/js/common/config.js
index da9c90bba..f8ee32dcd 100644
--- a/enferno/static/js/common/config.js
+++ b/enferno/static/js/common/config.js
@@ -125,8 +125,25 @@ function isValidLength(value, limit, type) {
     return type === "max" ? length <= limit : length >= limit;
 }
 
-function scrollToFirstError() {
-  const wrapper = document.querySelector(".v-input--error");
+function scrollToFirstError(containerRef = null) {
+  // If a container ref is provided, search within it; otherwise search in the topmost dialog
+  let container = containerRef;
+  
+  if (!container) {
+    // Find all open dialogs
+    const dialogs = document.querySelectorAll('.v-dialog.v-overlay--active');
+    
+    if (dialogs.length === 0) {
+      // No dialogs open, search in the main document
+      container = document;
+    } else {
+      // Get the topmost dialog (last in DOM order, highest z-index)
+      container = dialogs[dialogs.length - 1];
+    }
+  }
+
+  // Find the first error within the container
+  const wrapper = container.querySelector(".v-input--error");
   if (!wrapper) return;
 
   wrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });

From 5bd81f766511c826f8a6a2b74bdf7860edd498ec Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 11 Mar 2026 17:39:29 -0600
Subject: [PATCH 25/26] remove extra }

---
 enferno/admin/templates/admin/labels.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/enferno/admin/templates/admin/labels.html b/enferno/admin/templates/admin/labels.html
index 66cdc5eca..315c66100 100644
--- a/enferno/admin/templates/admin/labels.html
+++ b/enferno/admin/templates/admin/labels.html
@@ -435,8 +435,6 @@
                             });
                         }
                     });
-                }
-                    
                 },
             }
         });

From dc165bc551ff248a3d06eecc7f80d03029e7840e Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 11 Mar 2026 17:40:57 -0600
Subject: [PATCH 26/26] add missing form

---
 enferno/admin/templates/admin/labels.html | 152 +++++++++++-----------
 1 file changed, 77 insertions(+), 75 deletions(-)

diff --git a/enferno/admin/templates/admin/labels.html b/enferno/admin/templates/admin/labels.html
index 315c66100..83f374512 100644
--- a/enferno/admin/templates/admin/labels.html
+++ b/enferno/admin/templates/admin/labels.html
@@ -121,82 +121,84 @@
 
                 <!-- Create/Edit dialog -->
                 <v-dialog v-model="dialog" max-width="790px">
-                    <v-card :title="formTitle">
-                        <v-card-text class="pt-6">
-                                <v-row>
-                                    <v-col cols="12" md="6">
-                                        <v-text-field v-model="editedItem.title" :rules="[validationRules.required()]">
-                                            <template v-slot:label>{{ _('Title') }} <Asterisk /></template>
-                                            <template v-if="editedItem.parent" v-slot:append-inner>
-                                                <v-tooltip location="bottom">
-                                                    <template v-slot:activator="{ props }">
-                                                        <v-btn
-                                                            icon="mdi-subdirectory-arrow-right"
-                                                            density="comfortable"
-                                                            variant="text"
-                                                            @click="prependParentName"
-                                                            v-bind="props"
-                                                        ></v-btn>
-                                                    </template>
-                                                    {{ _('Add parent name to title') }}
-                                                </v-tooltip>
-                                            </template>
-                                        </v-text-field>
-                                    </v-col>
-                                    <v-col cols="12" md="6">
-                                        <v-text-field v-model="editedItem.title_ar" label="{{ _('Title (AR)') }}"></v-text-field>
-                                    </v-col>
-                                </v-row>
-                                <v-row>
-                                    <v-col cols="12" md="6">
-                                        <v-text-field v-model="editedItem.comments" label="{{ _('Comments') }}"></v-text-field>
-                                    </v-col>
-                                    <v-col cols="12" md="6">
-                                        <v-text-field v-model="editedItem.comments_ar" label="{{ _('Comments (AR)') }}"></v-text-field>
-                                    </v-col>
-                                </v-row>
-                                <v-row>
-                                    <v-col cols="12" md="6">
-                                        <search-field
-                                            api="/admin/api/labels/"
-                                            item-title="title"
-                                            item-subtitle="path"
-                                            label="{{ _('Parent') }}"
-                                            v-model="editedItem.parent"
-                                            :filter-items="filterCircularParents"
-                                            item-value="id"
-                                            :multiple="false"
-                                            :query-params="parentQueryParams"
-                                        ></search-field>
-                                    </v-col>
-                                </v-row>
-                                <div class="mb-3">{{ _('Available In') }}</div>
-                                <v-row>
-                                    <v-col
-                                        v-for="opt in availabilityOptions"
-                                        :key="opt.key"
-                                        cols="12"
-                                        md="2"
-                                    >
-                                        <v-btn
-                                        @click="editedItem[opt.key] = !editedItem[opt.key]"
-                                        :prepend-icon="editedItem[opt.key] ? 'mdi-check' : undefined"
-                                        :variant="editedItem[opt.key] ? 'flat' : 'outlined'"
-                                        :color="editedItem[opt.key] ? 'primary' : undefined"
-                                        :class="['w-100', editedItem[opt.key] ? '' : 'border-thin opacity-50']"
+                    <v-form ref="form" @submit.prevent="save">
+                        <v-card :title="formTitle">
+                            <v-card-text class="pt-6">
+                                    <v-row>
+                                        <v-col cols="12" md="6">
+                                            <v-text-field v-model="editedItem.title" :rules="[validationRules.required()]">
+                                                <template v-slot:label>{{ _('Title') }} <Asterisk /></template>
+                                                <template v-if="editedItem.parent" v-slot:append-inner>
+                                                    <v-tooltip location="bottom">
+                                                        <template v-slot:activator="{ props }">
+                                                            <v-btn
+                                                                icon="mdi-subdirectory-arrow-right"
+                                                                density="comfortable"
+                                                                variant="text"
+                                                                @click="prependParentName"
+                                                                v-bind="props"
+                                                            ></v-btn>
+                                                        </template>
+                                                        {{ _('Add parent name to title') }}
+                                                    </v-tooltip>
+                                                </template>
+                                            </v-text-field>
+                                        </v-col>
+                                        <v-col cols="12" md="6">
+                                            <v-text-field v-model="editedItem.title_ar" label="{{ _('Title (AR)') }}"></v-text-field>
+                                        </v-col>
+                                    </v-row>
+                                    <v-row>
+                                        <v-col cols="12" md="6">
+                                            <v-text-field v-model="editedItem.comments" label="{{ _('Comments') }}"></v-text-field>
+                                        </v-col>
+                                        <v-col cols="12" md="6">
+                                            <v-text-field v-model="editedItem.comments_ar" label="{{ _('Comments (AR)') }}"></v-text-field>
+                                        </v-col>
+                                    </v-row>
+                                    <v-row>
+                                        <v-col cols="12" md="6">
+                                            <search-field
+                                                api="/admin/api/labels/"
+                                                item-title="title"
+                                                item-subtitle="path"
+                                                label="{{ _('Parent') }}"
+                                                v-model="editedItem.parent"
+                                                :filter-items="filterCircularParents"
+                                                item-value="id"
+                                                :multiple="false"
+                                                :query-params="parentQueryParams"
+                                            ></search-field>
+                                        </v-col>
+                                    </v-row>
+                                    <div class="mb-3">{{ _('Available In') }}</div>
+                                    <v-row>
+                                        <v-col
+                                            v-for="opt in availabilityOptions"
+                                            :key="opt.key"
+                                            cols="12"
+                                            md="2"
                                         >
-                                            ${opt.label}
-                                        </v-btn>
-                                    </v-col>
-                                </v-row>
-
-                        </v-card-text>
-                        <v-card-actions class="mt-4 px-6 pb-5">
-                            <v-spacer></v-spacer>
-                            <v-btn @click="close">{{ _('Cancel') }}</v-btn>
-                            <v-btn color="primary" variant="elevated" @click="save">{{ _('Save') }}</v-btn>
-                        </v-card-actions>
-                    </v-card>
+                                            <v-btn
+                                            @click="editedItem[opt.key] = !editedItem[opt.key]"
+                                            :prepend-icon="editedItem[opt.key] ? 'mdi-check' : undefined"
+                                            :variant="editedItem[opt.key] ? 'flat' : 'outlined'"
+                                            :color="editedItem[opt.key] ? 'primary' : undefined"
+                                            :class="['w-100', editedItem[opt.key] ? '' : 'border-thin opacity-50']"
+                                            >
+                                                ${opt.label}
+                                            </v-btn>
+                                        </v-col>
+                                    </v-row>
+
+                            </v-card-text>
+                            <v-card-actions class="mt-4 px-6 pb-5">
+                                <v-spacer></v-spacer>
+                                <v-btn @click="close">{{ _('Cancel') }}</v-btn>
+                                <v-btn color="primary" variant="elevated" @click="save">{{ _('Save') }}</v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-form>
                 </v-dialog>
 
                 <!-- Import CSV dialog -->