From 4868f0343519e04307be98c5eabe06afa71f4aa4 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Mon, 26 Jan 2026 14:36:55 -0600
Subject: [PATCH 01/24] Rename Subject to Affected Item on activity monitor

---
 enferno/admin/templates/admin/activity.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/enferno/admin/templates/admin/activity.html b/enferno/admin/templates/admin/activity.html
index a9e9da1bd..53e897610 100644
--- a/enferno/admin/templates/admin/activity.html
+++ b/enferno/admin/templates/admin/activity.html
@@ -263,7 +263,7 @@
         { title: "{{_('User')}}", value: "user_id", width:50, sortable: false },
         { title: "{{_('Action')}}", value: "action", width:50, sortable: false },
         { title: "{{_('Status')}}", value: "status", width:50, sortable: false },
-        { title: "{{_('Subject')}}", value: "subject", width:50, sortable: false },
+        { title: "{{_('Affected Item')}}", value: "subject", width:50, sortable: false },
         { title: "{{_('Class')}}", value: "model", width:100, sortable: false },
         { title: "{{_('Details')}}", value: "details", width:200, sortable: false },
       ],

From 9cf9e988b3ec0d7ce40b19408792321a39e6774c Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:01:19 -0600
Subject: [PATCH 02/24] 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 da5cd3620..a4337f76a 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>
@@ -1751,6 +1752,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 b2af4924dc893079d80430b14f8116ccb07e3ce7 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:29:54 -0600
Subject: [PATCH 03/24] 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 3d95c1608a34a2a5c984666de0157a279bc60feb Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:31:31 -0600
Subject: [PATCH 04/24] 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 39db50e9560b01ddbf7791083b6b856a0db04902 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:35:42 -0600
Subject: [PATCH 05/24] 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 d9b648bb1..38bb20ed1 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>
 
 
@@ -1696,6 +1697,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 e277b96a1..00a1e032a 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 451474d7fd8f83e91c5a706fd4b623c80841e349 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 12:56:58 -0600
Subject: [PATCH 06/24] 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 a001ae35465d196a12674caf1a89b0c11484c3ae Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 13:13:37 -0600
Subject: [PATCH 07/24] add asterisk to locations form

---
 enferno/admin/templates/admin/locations.html   |  2 ++
 .../admin/partials/location_dialog.html        | 17 ++++++++++-------
 enferno/static/js/components/GeoMap.js         | 18 ++++++++++++++----
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/enferno/admin/templates/admin/locations.html b/enferno/admin/templates/admin/locations.html
index e6d6029fb..598f60718 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 f2ac952d8..d3c378492 100644
--- a/enferno/admin/templates/admin/partials/location_dialog.html
+++ b/enferno/admin/templates/admin/partials/location_dialog.html
@@ -14,7 +14,6 @@
                 <v-btn 
                     type="button" 
                     @click="validateForm"
-                    color="primary"
                     variant="elevated"
                     class="mx-2"
                     >
@@ -35,14 +34,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">
@@ -64,7 +64,8 @@
                                     item-value="id"
                                     :rules="[validationRules.required()]"
                                     :multiple="false"
-                                    label="{{ _('Location Type') }}">
+                                >
+                                    <template v-slot:label>{{ _('Location Type') }} <Asterisk /></template>
                                 </search-field>
 
 
@@ -81,7 +82,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>
@@ -131,7 +133,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 43c81e58b..48d8ea36f 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,
@@ -364,12 +368,18 @@ const GeoMap = Vue.defineComponent({
         <v-card-text>
           <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-text-field v-bind="inputProps" type="number" min="-90" max="90"
                           :rules="[validationRules.required()]"
-                          v-model.number="lat"></v-text-field>
-            <v-text-field v-bind="inputProps" type="number" min="-180" max="180" label="Longitude"
+                          v-model.number="lat"
+            >
+              <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"
                           :rules="[validationRules.required()]"
-                          v-model.number="lng"></v-text-field>
+                          v-model.number="lng"
+            >
+              <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 555e7bf9c93b87b5cbb387e5cedf15e03a733344 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:20:25 -0600
Subject: [PATCH 08/24] 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 1bd3e6e2f..1b6b6e37b 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>
 
 
@@ -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 b77761d949c35140abc75547e8c2e0955fd0a7ca Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:20:39 -0600
Subject: [PATCH 09/24] 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 a8e57061f..63ed63a51 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>
 
         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 5cabb3433c348b99c89452e10e95eddfa5ee29ac Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:20:51 -0600
Subject: [PATCH 10/24] 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 e98aabb79..3c60fdb2c 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>
 
         const {createApp} = Vue;
@@ -199,6 +199,7 @@
 
             data: () => ({
                 dialog: dialog,
+                validationRules: validationRules,
                 imDialog: false,
                 drawer: drawer,
                 loading: true,
@@ -301,31 +302,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 7636dd6151f9bf4b2c3dbb07338444b646fc79e5 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:21:24 -0600
Subject: [PATCH 11/24] 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 679ffe0503713bf7464c0334b8307849712465f5 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Tue, 27 Jan 2026 14:22:01 -0600
Subject: [PATCH 12/24] 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 c98dacd45..42b3a64ed 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 ab2421b3fa1fb7304ae6cbbc74d7f769fcfb1653 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 10:16:56 -0600
Subject: [PATCH 13/24] 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 b1a9cf095..1545710cb 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>
 
         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 fc559009788abba99e45d730f8a16ddafe5f795a Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 10:31:33 -0600
Subject: [PATCH 14/24] 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 1545710cb..52b211ae0 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 9362b3503..13b382483 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)';
+        };
     }
 };
 
@@ -157,6 +164,9 @@ const vuetifyConfig = {
         VApp: {
             class: 'bg-background',
         },
+        VColorInput: {
+            variant: 'outlined',
+        },
         VTextField: {
             variant: 'outlined',
         },

From d9de97e4330fa02ee2168f050ddaa5a301358093 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 10:33:48 -0600
Subject: [PATCH 15/24] 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 52b211ae0..05868976f 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 4f54956bf1acca9097e40ad7f9a2a2cd9315ffdb Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 11:39:15 -0600
Subject: [PATCH 16/24] 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 4969637113a252e20471ba0dedd11bec33815b23 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 11:54:27 -0600
Subject: [PATCH 17/24] add asterisk to change password form

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

diff --git a/enferno/templates/security/change_password.html b/enferno/templates/security/change_password.html
index 5804800b2..4f1d4be59 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,8 @@
   </v-container>
 </v-main>
 {% endblock content %} {% block js %}
+<script src="/static/js/components/Asterisk.js"></script>
+
 <script>
   const { createApp } = Vue;
   const { createVuetify } = Vuetify;
@@ -123,6 +128,8 @@
       },
     },
   });
+  
+  app.component('Asterisk', Asterisk)
 
   app.use(vuetify).mount('#app');
 </script>

From a7dba4c317ddab71d98d38436f46b3480a69bc9c Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 12:40:15 -0600
Subject: [PATCH 18/24] change notifications drawer width

---
 enferno/templates/notifications_drawer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/enferno/templates/notifications_drawer.html b/enferno/templates/notifications_drawer.html
index 87827b4e4..5f26f3330 100644
--- a/enferno/templates/notifications_drawer.html
+++ b/enferno/templates/notifications_drawer.html
@@ -2,7 +2,7 @@
         v-model="notifications.ui.drawerVisible"
         location="right"
         temporary
-        width="500"
+        width="624"
         :style="{ zIndex: 3000 }"
 >
 

From 812d3c189fc3665c465030b09dd9ca7be14e83e2 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 12:41:10 -0600
Subject: [PATCH 19/24] update texts on important notifications dialog, change
 button look, change list spacing

---
 .../templates/important_notifications_dialog.html   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/enferno/templates/important_notifications_dialog.html b/enferno/templates/important_notifications_dialog.html
index 75851dca3..5ad3e9e76 100644
--- a/enferno/templates/important_notifications_dialog.html
+++ b/enferno/templates/important_notifications_dialog.html
@@ -2,19 +2,22 @@
     v-model="notifications.ui.importantDialogVisible"
     :width="800"
     persistent
+    :style="{ zIndex: 3001 }"
 >
     <v-card variant="flat">
-        <v-toolbar class="position-sticky top-0" style="z-index: 2;" border flat title="{{ _('Important notifications') }}"></v-toolbar>
+        <v-toolbar class="position-sticky top-0" style="z-index: 2;" flat title="{{ _('Important System Notice') }}"></v-toolbar>
 
-        <v-card-text class="flex-grow-1 overflow-y-auto">
+        <v-card-text class="flex-grow-1 overflow-y-auto pa-0">
             <notifications-list :config="{ hideMarkAsReadButton: true, hideScrollFeedback: true, maxTitleLines: false, maxSubtitleLines: false }" :notifications="notifications.importantItems" :load-error="notifications.status.loadError" />
         </v-card-text>
 
-        <v-card-actions class="bg-surface border-t position-sticky bottom-0">
+        <v-card-actions class="position-sticky bottom-0">
             <v-spacer></v-spacer>
         
-            <v-btn :disabled="notifications.status.markingImportantAsRead" :loading="notifications.status.markingImportantAsRead" variant="flat" color="primary" @click="markAsReadImportantNotifications()">
-                Mark as read
+            <v-btn :disabled="notifications.status.markingImportantAsRead" :loading="notifications.status.markingImportantAsRead" variant="flat" @click="markAsReadImportantNotifications()"
+                class="text-medium-emphasis font-weight-medium"
+            >
+                {{ _('Review Later') }}
             </v-btn>
         </v-card-actions>
     </v-card>

From f5a16b4f11249b0d5f739cf56fcc9206a1461030 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 12:42:06 -0600
Subject: [PATCH 20/24] update urgent notification style, add new borders,
 change style of mark as read icon, show icon only on hover

---
 .../static/js/components/NotificationsList.js | 103 +++++++++---------
 1 file changed, 51 insertions(+), 52 deletions(-)

diff --git a/enferno/static/js/components/NotificationsList.js b/enferno/static/js/components/NotificationsList.js
index ea8aee8fd..0d453774a 100644
--- a/enferno/static/js/components/NotificationsList.js
+++ b/enferno/static/js/components/NotificationsList.js
@@ -47,16 +47,12 @@ const NotificationsList = Vue.defineComponent({
         },
         getListItemColorProps(notification) {
             if (!notification) return
-            const urgentUnreadProps = { variant: "flat", 'base-color': "error", class: 'text-white' }
-            const urgentReadProps = { variant: "tonal", 'base-color': "error" }
+            const urgentNotificationProps = { variant: "tonal", 'base-color': "error", class: 'text-white' }
             const unreadProps = { variant: "tonal", 'base-color': "primary" }
             const readProps = {}
             
             if (notification.is_urgent) {
-                if (notification.read_status) {
-                    return urgentReadProps
-                }
-                return urgentUnreadProps
+                return urgentNotificationProps
             }
 
             if (notification.read_status) {
@@ -114,55 +110,58 @@ const NotificationsList = Vue.defineComponent({
             </v-container>
 
             <v-list v-else density="default" lines="three" class="py-0">
-                <v-list-item
-                    v-for="(notification, index) in notifications"
-                    :key="index"
-                    class="py-3 mb-2 rounded-0"
-                    slim
-                    v-bind="getListItemColorProps(notification)"
-                >
-                    <template #prepend>
-                        <v-icon size="small">
-                            {{ getIconFromNotification(notification) }}
-                        </v-icon>
-                    </template>
+                <v-divider :thickness="2" class="border-opacity-25"></v-divider>
+                <v-hover v-for="(notification, index) in notifications" :key="index">
+                    <template v-slot:default="{ isHovering, props: hoverProps }">
+                        <v-list-item
+                            class="py-3 rounded-0"
+                            slim
+                            v-bind="{ ...getListItemColorProps(notification), ...hoverProps }"
+                        >
+                            <template #prepend>
+                                <v-icon size="small">
+                                    {{ getIconFromNotification(notification) }}
+                                </v-icon>
+                            </template>
 
-                    <v-list-item-title
-                        :class="{ 'font-weight-bold': !notification?.read_status }"
-                        class="text-body-1"
-                        :style="getLineClampStyles(config.maxTitleLines)"
-                        v-html="notification?.title"
-                    />
-                    <v-list-item-subtitle class="mt-1">
-                        <div
-                        class="text-caption"
-                        :style="getLineClampStyles(config.maxSubtitleLines)"
-                        v-html="notification?.message"
-                        />
-                        <div class="d-flex justify-space-between align-center mt-2">
-                            <span class="text-caption">{{ getDateFromNotification(notification) }}</span>
-                        </div>
-                    </v-list-item-subtitle>
+                            <v-list-item-title
+                                :class="{ 'font-weight-bold': !notification?.read_status }"
+                                class="text-body-1"
+                                :style="getLineClampStyles(config.maxTitleLines)"
+                                v-html="notification?.title"
+                            />
+                            <v-list-item-subtitle class="mt-1">
+                                <div
+                                class="text-caption"
+                                :style="getLineClampStyles(config.maxSubtitleLines)"
+                                v-html="notification?.message"
+                                />
+                                <div class="d-flex justify-space-between align-center mt-2">
+                                    <span class="text-caption">{{ getDateFromNotification(notification) }}</span>
+                                </div>
+                            </v-list-item-subtitle>
 
-                    <template v-if="!notification?.read_status && !config.hideMarkAsReadButton" #append>
-                        <div class="d-flex align-center ga-2">
-                            <v-tooltip location="bottom">
-                                <template #activator="{ props }">
-                                    <v-btn
-                                        v-bind="props"
-                                        icon
-                                        variant="text"
-                                        size="small"
-                                        @click="$emit('readNotification', notification)"
-                                    >
-                                        <v-icon size="16">mdi-email-open-outline</v-icon>
-                                    </v-btn>
-                                </template>
-                                {{ translations.markAsRead_ }}
-                            </v-tooltip>
-                        </div>
+                            <template v-if="!notification?.read_status && !config.hideMarkAsReadButton && isHovering" #append>
+                                <div class="d-flex align-center ga-2">
+                                    <v-tooltip location="bottom" :style="{ zIndex: 3002 }">
+                                        <template #activator="{ props }">
+                                            <v-btn
+                                                v-bind="props"
+                                                icon="mdi-email-open-outline"
+                                                variant="tonal"
+                                                density="comfortable"
+                                                @click="$emit('readNotification', notification)"
+                                                rounded="full"
+                                            ></v-btn>
+                                        </template>
+                                        {{ translations.markAsRead_ }}
+                                    </v-tooltip>
+                                </div>
+                            </template>
+                        </v-list-item>
+                        <v-divider :thickness="2" class="border-opacity-25"></v-divider>
                     </template>
-                </v-list-item>
+                </v-hover>
             </v-list>
 
             <v-alert

From 944f0ceabd06098ca805e9fc69586c4cb81370ee Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 13:09:58 -0600
Subject: [PATCH 21/24] implement mark all as read functionality on
 notifications drawer and dialog (endpoint already existed)

---
 .../static/js/components/NotificationsList.js |  7 +++--
 .../static/js/mixins/notification-mixin.js    | 29 +++++++++++++++++++
 enferno/templates/notifications_dialog.html   | 13 +++++++++
 enferno/templates/notifications_drawer.html   | 13 +++++++++
 4 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/enferno/static/js/components/NotificationsList.js b/enferno/static/js/components/NotificationsList.js
index 0d453774a..e6120349b 100644
--- a/enferno/static/js/components/NotificationsList.js
+++ b/enferno/static/js/components/NotificationsList.js
@@ -177,10 +177,11 @@ const NotificationsList = Vue.defineComponent({
                 <v-btn
                     v-if="notifications?.length && hasMore"
                     :loading="loadingMore"
-                    block
-                    rounded="0"
-                    height="48"
                     variant="text"
+                    class="font-weight-medium"
+                    block
+                    tile
+                    size="x-large"
                     @click="$emit('loadNotifications')"
                 >
                     {{ translations.loadMore_ }}
diff --git a/enferno/static/js/mixins/notification-mixin.js b/enferno/static/js/mixins/notification-mixin.js
index f88cf7a2f..6814dd10e 100644
--- a/enferno/static/js/mixins/notification-mixin.js
+++ b/enferno/static/js/mixins/notification-mixin.js
@@ -24,6 +24,7 @@ const notificationMixin = {
         initialLoading: false,
         loadingMore: false,
         markingImportantAsRead: false,
+        markingAllAsRead: false,
         loadError: false
       },
       ui: {
@@ -231,6 +232,34 @@ const notificationMixin = {
         this.notifications.unreadCount = previousUnreadCount;
       }
     },    
+    async markAllAsRead() {
+      if (this.notifications.status.markingAllAsRead) return; // Prevent duplicate calls
+      
+      const previousUnreadCount = this.notifications.unreadCount;
+      const previousNotifications = [...this.notifications.items];
+      const previousImportantNotifications = [...this.notifications.importantItems];
+
+      const readNotification = (notification) => { notification.read_status = true };
+
+      this.notifications.status.markingAllAsRead = true; // Add this flag
+      this.notifications.unreadCount = 0;
+      this.notifications.items.map(readNotification);
+      this.notifications.importantItems.map(readNotification);
+
+      try {
+        await axios.post(`/admin/api/notifications/mark-all-read`);
+      } catch (error) {
+        console.error(error);
+        this.showSnack(handleRequestError(error));
+
+        // Revert state if request failed
+        this.notifications.unreadCount = previousUnreadCount;
+        this.notifications.items = previousNotifications;
+        this.notifications.importantItems = previousImportantNotifications;
+      } finally {
+        this.notifications.status.markingAllAsRead = false;
+      }
+    },
     async refetchNotifications() {
       this.loadNotifications({ page: 1 });
     },
diff --git a/enferno/templates/notifications_dialog.html b/enferno/templates/notifications_dialog.html
index 8d9f4da6a..60ffc20ef 100644
--- a/enferno/templates/notifications_dialog.html
+++ b/enferno/templates/notifications_dialog.html
@@ -42,6 +42,19 @@
                 <div class="w-100">
                     <v-window v-model="notifications.ui.currentTab" style="min-height: calc(100vh - 251px);">
                         <v-window-item v-for="tab in ['all', 'unread', 'read']" :key="tab" :value="tab">
+                            <v-divider class="border-opacity-25"></v-divider>
+
+                            <v-btn
+                                @click="markAllAsRead()"
+                                :loading="notifications.status.markingAllAsRead"
+                                color="primary"
+                                variant="text"
+                                class="font-weight-medium"
+                                block
+                                tile
+                                size="x-large"
+                            >{{ _('Mark All as Read') }}</v-btn>
+
                             <notifications-list
                                 :config="{ hideScrollFeedback: false, maxTitleLines: false, maxSubtitleLines: false }"
                                 :notifications="notifications.items"
diff --git a/enferno/templates/notifications_drawer.html b/enferno/templates/notifications_drawer.html
index 5f26f3330..953980c8c 100644
--- a/enferno/templates/notifications_drawer.html
+++ b/enferno/templates/notifications_drawer.html
@@ -22,6 +22,19 @@
             </template>
         </v-toolbar>
 
+        <v-divider class="border-opacity-25"></v-divider>
+
+        <v-btn
+            @click="markAllAsRead()"
+            :loading="notifications.status.markingAllAsRead"
+            color="primary"
+            variant="text"
+            class="font-weight-medium"
+            block
+            tile
+            size="x-large"
+        >{{ _('Mark All as Read') }}</v-btn>
+
         <notifications-list
             :notifications="notifications.items"
             :initial-loading="notifications.status.initialLoading"

From 2c6eb941e55b9e1320ea31265a5e299bdb8521de Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 13:17:50 -0600
Subject: [PATCH 22/24] change text color, icon size and position

---
 enferno/static/js/components/NotificationsList.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/enferno/static/js/components/NotificationsList.js b/enferno/static/js/components/NotificationsList.js
index e6120349b..2a54b120e 100644
--- a/enferno/static/js/components/NotificationsList.js
+++ b/enferno/static/js/components/NotificationsList.js
@@ -119,7 +119,7 @@ const NotificationsList = Vue.defineComponent({
                             v-bind="{ ...getListItemColorProps(notification), ...hoverProps }"
                         >
                             <template #prepend>
-                                <v-icon size="small">
+                                <v-icon size="24" class="mt-n1">
                                     {{ getIconFromNotification(notification) }}
                                 </v-icon>
                             </template>
@@ -132,12 +132,12 @@ const NotificationsList = Vue.defineComponent({
                             />
                             <v-list-item-subtitle class="mt-1">
                                 <div
-                                class="text-caption"
+                                class="text-caption text-high-emphasis"
                                 :style="getLineClampStyles(config.maxSubtitleLines)"
                                 v-html="notification?.message"
                                 />
                                 <div class="d-flex justify-space-between align-center mt-2">
-                                    <span class="text-caption">{{ getDateFromNotification(notification) }}</span>
+                                    <span class="text-caption text-high-emphasis">{{ getDateFromNotification(notification) }}</span>
                                 </div>
                             </v-list-item-subtitle>
 

From 0981cb0ab390d38e8cdb8b73267456879e4a5993 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 13:29:39 -0600
Subject: [PATCH 23/24] disable mark all as read if all are read

---
 enferno/templates/notifications_dialog.html | 1 +
 enferno/templates/notifications_drawer.html | 1 +
 2 files changed, 2 insertions(+)

diff --git a/enferno/templates/notifications_dialog.html b/enferno/templates/notifications_dialog.html
index 60ffc20ef..0997c93e8 100644
--- a/enferno/templates/notifications_dialog.html
+++ b/enferno/templates/notifications_dialog.html
@@ -47,6 +47,7 @@
                             <v-btn
                                 @click="markAllAsRead()"
                                 :loading="notifications.status.markingAllAsRead"
+                                :disabled="!notifications.unreadCount"
                                 color="primary"
                                 variant="text"
                                 class="font-weight-medium"
diff --git a/enferno/templates/notifications_drawer.html b/enferno/templates/notifications_drawer.html
index 953980c8c..fbf06694e 100644
--- a/enferno/templates/notifications_drawer.html
+++ b/enferno/templates/notifications_drawer.html
@@ -27,6 +27,7 @@
         <v-btn
             @click="markAllAsRead()"
             :loading="notifications.status.markingAllAsRead"
+            :disabled="!notifications.unreadCount"
             color="primary"
             variant="text"
             class="font-weight-medium"

From 5b8b63b83a69ade001b15acfdedf98db8cac9e90 Mon Sep 17 00:00:00 2001
From: Daniel Apodaca <apodacaduron@gmail.com>
Date: Wed, 28 Jan 2026 13:30:01 -0600
Subject: [PATCH 24/24] tweak icon styles for urgent notifications

---
 enferno/static/js/components/NotificationsList.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/enferno/static/js/components/NotificationsList.js b/enferno/static/js/components/NotificationsList.js
index 2a54b120e..d9524160e 100644
--- a/enferno/static/js/components/NotificationsList.js
+++ b/enferno/static/js/components/NotificationsList.js
@@ -119,18 +119,18 @@ const NotificationsList = Vue.defineComponent({
                             v-bind="{ ...getListItemColorProps(notification), ...hoverProps }"
                         >
                             <template #prepend>
-                                <v-icon size="24" class="mt-n1">
+                                <v-icon size="24" :class="['mt-n1', { 'opacity-100': (!notification?.read_status || notification?.is_urgent) }]">
                                     {{ getIconFromNotification(notification) }}
                                 </v-icon>
                             </template>
 
                             <v-list-item-title
-                                :class="{ 'font-weight-bold': !notification?.read_status }"
+                                :class="{ 'font-weight-bold': (!notification?.read_status || notification?.is_urgent) }"
                                 class="text-body-1"
                                 :style="getLineClampStyles(config.maxTitleLines)"
                                 v-html="notification?.title"
                             />
-                            <v-list-item-subtitle class="mt-1">
+                            <v-list-item-subtitle class="mt-1" opacity="100">
                                 <div
                                 class="text-caption text-high-emphasis"
                                 :style="getLineClampStyles(config.maxSubtitleLines)"