From 426e8d86df267e8e99fb955f2d498092db59e55b Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Sun, 6 Mar 2022 16:08:44 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                      |  14 +-
 ayanova/src/store.js                          |   2 +-
 ayanova/src/views/adm-user.vue                |   2 +-
 ayanova/src/views/cust-user.vue               |   2 +-
 .../views/customer-notify-subscription.vue    | 541 +++++++++++-------
 ayanova/src/views/home-user-settings.vue      |   8 +-
 6 files changed, 354 insertions(+), 215 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 40e64c69..79dbda31 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -29,8 +29,9 @@ How to implement auto notifications if can report and send from server
 		Add customer tags to match to send auto subscription
 		Add optional report to appropriate subscriptions
 		add text message, has templates like v7 did
-		Also in that same form be able to set the impersonation values like what time zone, what currency symbol what language id if not server default whatever is needed for reporting
-			defaults to local current user's settings, language setting etc and saves them
+		Also in that same form be able to set the impersonation values that are *actually* used by the report code:
+			CurrencyName, LanguageName, TimeZoneName, hour12, translationid
+				defaults to local current user's settings, language setting etc and saves them
 		MUST HAVE feature click a button to see which current customers this would send to based on tags!!!
 			ideally it would display in the form live as any changes are made and if the customer has no email it would highl8ight that somehow
 		NICE TO HAVE FEATURE would also be available backwards from the Customer to view a list of things they will be notified about based on their tags and subscriptions set up
@@ -48,7 +49,14 @@ How to implement auto notifications if can report and send from server
 				Quote status changed (attach quote report), work order status changed (attach wo report) , wo follow up x days after closed (no report)
 
 		Set file name of attached report, maybe user can template that? Or use biz object name file friendly morphed
-CASES
+
+
+OTHER B4BETA
+
+test user color in home user and in adm-user with new record and exsiting just to confirm it's ok
+cases
+
+
 
 
 # OUTSTANDING BEFORE RELEASE
diff --git a/ayanova/src/store.js b/ayanova/src/store.js
index 8d5a6caf..205a252f 100644
--- a/ayanova/src/store.js
+++ b/ayanova/src/store.js
@@ -38,7 +38,7 @@ export default new Vuex.Store({
       timeZoneOverride: null, //use browser tz by default
       currencyName: "USD",
       hour12: true,
-      // uiColor: "#000000",
+      uiColor: "#000000",
       emailAddress: null,
       mapUrlTemplate: null
     },
diff --git a/ayanova/src/views/adm-user.vue b/ayanova/src/views/adm-user.vue
index a330510a..81397fff 100644
--- a/ayanova/src/views/adm-user.vue
+++ b/ayanova/src/views/adm-user.vue
@@ -441,7 +441,7 @@ export default {
         phone2: null,
         phone3: null,
         mapUrlTemplate: null,
-        // uiColor: "#000000",
+        uiColor: "#000000",
         languageOverride: null,
         timeZoneOverride: null,
         currencyName: "USD",
diff --git a/ayanova/src/views/cust-user.vue b/ayanova/src/views/cust-user.vue
index 5265abab..42cfe77e 100644
--- a/ayanova/src/views/cust-user.vue
+++ b/ayanova/src/views/cust-user.vue
@@ -429,7 +429,7 @@ export default {
         phone2: null,
         phone3: null,
         mapUrlTemplate: null,
-        // uiColor: "#000000",
+        //uiColor: "#000000",
         languageOverride: null,
         timeZoneOverride: null,
         currencyName: "USD",
diff --git a/ayanova/src/views/customer-notify-subscription.vue b/ayanova/src/views/customer-notify-subscription.vue
index c5ae92a3..d93d662d 100644
--- a/ayanova/src/views/customer-notify-subscription.vue
+++ b/ayanova/src/views/customer-notify-subscription.vue
@@ -3,217 +3,335 @@
     <v-row v-if="formState.ready">
       <v-col>
         <v-form ref="form">
-          <v-row>
-            <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-            <v-col cols="12" sm="6" lg="4" xl="3">
-              <gz-tag-picker
-                ref="customerTags"
-                v-model="obj.customerTags"
-                :label="$ay.t('CustomerTags')"
-                :readonly="formState.readOnly"
-                data-cy="customerTags"
-                :error-messages="form().serverErrors(this, 'customerTags')"
-                @input="fieldValueChanged('customerTags')"
-              ></gz-tag-picker>
-            </v-col>
-            <v-col cols="12" sm="6" lg="4" xl="3">
-              <v-select
-                ref="eventType"
-                v-model="obj.eventType"
-                :items="selectLists.eventTypes"
-                item-text="name"
-                item-value="id"
-                :readonly="formState.readOnly"
-                :label="$ay.t('NotifyEventType')"
-                data-cy="eventType"
-                :rules="[form().integerValid(this, 'eventType')]"
-                :error-messages="form().serverErrors(this, 'eventType')"
-                @input="fieldValueChanged('eventType')"
-              ></v-select>
-            </v-col>
-            <v-col v-if="showWoStatus" cols="12" sm="6" lg="4" xl="3">
-              <v-autocomplete
-                v-model="obj.idValue"
-                :items="selectLists.wostatus"
-                item-text="name"
-                item-value="id"
-                :label="$ay.t('WorkOrderStatus')"
-              >
-                <template v-slot:item="data">
-                  <v-list-item-avatar>
-                    <v-icon :color="data.item.color">$ayiFlag</v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title
-                      ><span class="text-subtitle-2">{{ data.item.name }}</span
-                      ><v-icon
-                        v-if="data.item.locked"
-                        small
-                        color="disabled"
-                        class="ml-2"
-                        >$ayiLock</v-icon
-                      >
-                      <v-icon
-                        v-if="data.item.completed"
-                        color="disabled"
-                        class="ml-1"
-                        small
-                        >$ayiCheckCircle</v-icon
-                      ></v-list-item-title
+          <v-tabs v-model="tab" mobile-breakpoint="100">
+            <v-tab>{{ $ay.t("NotifyEventType") }}</v-tab>
+            <v-tab>{{ $ay.t("NotificationSettings") }}</v-tab>
+            <v-tabs-items v-model="tab">
+              <v-tab-item class="mt-4 ml-2">
+                <v-row>
+                  <gz-error
+                    :error-box-message="formState.errorBoxMessage"
+                  ></gz-error>
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <gz-tag-picker
+                      ref="customerTags"
+                      v-model="obj.customerTags"
+                      :label="$ay.t('CustomerTags')"
+                      :readonly="formState.readOnly"
+                      data-cy="customerTags"
+                      :error-messages="
+                        form().serverErrors(this, 'customerTags')
+                      "
+                      @input="fieldValueChanged('customerTags')"
+                    ></gz-tag-picker>
+                  </v-col>
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <v-select
+                      ref="eventType"
+                      v-model="obj.eventType"
+                      :items="selectLists.eventTypes"
+                      item-text="name"
+                      item-value="id"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('NotifyEventType')"
+                      data-cy="eventType"
+                      :rules="[form().integerValid(this, 'eventType')]"
+                      :error-messages="form().serverErrors(this, 'eventType')"
+                      @input="fieldValueChanged('eventType')"
+                    ></v-select>
+                  </v-col>
+                  <v-col v-if="showWoStatus" cols="12" sm="6" lg="4" xl="3">
+                    <v-autocomplete
+                      v-model="obj.idValue"
+                      :items="selectLists.wostatus"
+                      item-text="name"
+                      item-value="id"
+                      :label="$ay.t('WorkOrderStatus')"
                     >
-                    <v-list-item-subtitle>
-                      {{ data.item.notes }}</v-list-item-subtitle
+                      <template v-slot:item="data">
+                        <v-list-item-avatar>
+                          <v-icon :color="data.item.color">$ayiFlag</v-icon>
+                        </v-list-item-avatar>
+                        <v-list-item-content>
+                          <v-list-item-title
+                            ><span class="text-subtitle-2">{{
+                              data.item.name
+                            }}</span
+                            ><v-icon
+                              v-if="data.item.locked"
+                              small
+                              color="disabled"
+                              class="ml-2"
+                              >$ayiLock</v-icon
+                            >
+                            <v-icon
+                              v-if="data.item.completed"
+                              color="disabled"
+                              class="ml-1"
+                              small
+                              >$ayiCheckCircle</v-icon
+                            ></v-list-item-title
+                          >
+                          <v-list-item-subtitle>
+                            {{ data.item.notes }}</v-list-item-subtitle
+                          >
+                        </v-list-item-content>
+                        <v-list-item-action> </v-list-item-action>
+                      </template>
+                    </v-autocomplete>
+                  </v-col>
+                  <v-col v-if="showQuoteStatus" cols="12" sm="6" lg="4" xl="3">
+                    <v-autocomplete
+                      v-model="obj.idValue"
+                      :items="selectLists.quotestatus"
+                      item-text="name"
+                      item-value="id"
+                      :label="$ay.t('QuoteQuoteStatusType')"
                     >
-                  </v-list-item-content>
-                  <v-list-item-action> </v-list-item-action>
-                </template>
-              </v-autocomplete>
-            </v-col>
-            <v-col v-if="showQuoteStatus" cols="12" sm="6" lg="4" xl="3">
-              <v-autocomplete
-                v-model="obj.idValue"
-                :items="selectLists.quotestatus"
-                item-text="name"
-                item-value="id"
-                :label="$ay.t('QuoteQuoteStatusType')"
-              >
-                <template v-slot:item="data">
-                  <v-list-item-avatar>
-                    <v-icon :color="data.item.color">$ayiFlag</v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title
-                      ><span class="text-subtitle-2">{{ data.item.name }}</span
-                      ><v-icon
-                        v-if="data.item.locked"
-                        small
-                        color="disabled"
-                        class="ml-2"
-                        >$ayiLock</v-icon
-                      >
-                      <v-icon
-                        v-if="data.item.completed"
-                        color="disabled"
-                        class="ml-1"
-                        small
-                        >$ayiCheckCircle</v-icon
-                      ></v-list-item-title
-                    >
-                    <v-list-item-subtitle>
-                      {{ data.item.notes }}</v-list-item-subtitle
-                    >
-                  </v-list-item-content>
-                  <v-list-item-action> </v-list-item-action>
-                </template>
-              </v-autocomplete>
-            </v-col>
+                      <template v-slot:item="data">
+                        <v-list-item-avatar>
+                          <v-icon :color="data.item.color">$ayiFlag</v-icon>
+                        </v-list-item-avatar>
+                        <v-list-item-content>
+                          <v-list-item-title
+                            ><span class="text-subtitle-2">{{
+                              data.item.name
+                            }}</span
+                            ><v-icon
+                              v-if="data.item.locked"
+                              small
+                              color="disabled"
+                              class="ml-2"
+                              >$ayiLock</v-icon
+                            >
+                            <v-icon
+                              v-if="data.item.completed"
+                              color="disabled"
+                              class="ml-1"
+                              small
+                              >$ayiCheckCircle</v-icon
+                            ></v-list-item-title
+                          >
+                          <v-list-item-subtitle>
+                            {{ data.item.notes }}</v-list-item-subtitle
+                          >
+                        </v-list-item-content>
+                        <v-list-item-action> </v-list-item-action>
+                      </template>
+                    </v-autocomplete>
+                  </v-col>
 
-            <v-col v-if="showDecValue" cols="12" sm="6" lg="4" xl="3">
-              <gz-decimal
-                ref="decValue"
-                v-model="obj.decValue"
-                :readonly="formState.readOnly"
-                :label="$ay.t('Total')"
-                data-cy="decValue"
-                :rules="[
-                  form().decimalValid(this, 'decValue'),
-                  form().required(this, 'decValue')
-                ]"
-                :error-messages="form().serverErrors(this, 'decValue')"
-                @input="fieldValueChanged('decValue')"
-              ></gz-decimal>
-            </v-col>
+                  <v-col v-if="showDecValue" cols="12" sm="6" lg="4" xl="3">
+                    <gz-decimal
+                      ref="decValue"
+                      v-model="obj.decValue"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('Total')"
+                      data-cy="decValue"
+                      :rules="[
+                        form().decimalValid(this, 'decValue'),
+                        form().required(this, 'decValue')
+                      ]"
+                      :error-messages="form().serverErrors(this, 'decValue')"
+                      @input="fieldValueChanged('decValue')"
+                    ></gz-decimal>
+                  </v-col>
 
-            <v-col v-if="showIntegerDecValue" cols="12" sm="6" lg="4" xl="3">
-              <v-text-field
-                ref="decValue"
-                v-model="obj.decValue"
-                :readonly="formState.readOnly"
-                :clearable="!formState.readOnly"
-                :label="$ay.t('UiFieldDataTypesInteger')"
-                data-cy="decValue"
-                :rules="[form().integerValid(this, 'decValue')]"
-                :error-messages="form().serverErrors(this, 'decValue')"
-                type="number"
-                @click:clear="fieldValueChanged('decValue')"
-                @input="fieldValueChanged('decValue')"
-              ></v-text-field>
-            </v-col>
+                  <v-col
+                    v-if="showIntegerDecValue"
+                    cols="12"
+                    sm="6"
+                    lg="4"
+                    xl="3"
+                  >
+                    <v-text-field
+                      ref="decValue"
+                      v-model="obj.decValue"
+                      :readonly="formState.readOnly"
+                      :clearable="!formState.readOnly"
+                      :label="$ay.t('UiFieldDataTypesInteger')"
+                      data-cy="decValue"
+                      :rules="[form().integerValid(this, 'decValue')]"
+                      :error-messages="form().serverErrors(this, 'decValue')"
+                      type="number"
+                      @click:clear="fieldValueChanged('decValue')"
+                      @input="fieldValueChanged('decValue')"
+                    ></v-text-field>
+                  </v-col>
 
-            <v-col v-if="showAgeValue" cols="12" sm="6" lg="4" xl="3">
-              <gz-duration-picker
-                ref="ageValue"
-                v-model="obj.ageValue"
-                :readonly="formState.readOnly"
-                :label="$ay.t('Duration')"
-                :show-seconds="false"
-                data-cy="ageValue"
-                :error-messages="form().serverErrors(this, 'ageValue')"
-                @input="fieldValueChanged('ageValue')"
-              ></gz-duration-picker>
-            </v-col>
+                  <v-col v-if="showAgeValue" cols="12" sm="6" lg="4" xl="3">
+                    <gz-duration-picker
+                      ref="ageValue"
+                      v-model="obj.ageValue"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('Duration')"
+                      :show-seconds="false"
+                      data-cy="ageValue"
+                      :error-messages="form().serverErrors(this, 'ageValue')"
+                      @input="fieldValueChanged('ageValue')"
+                    ></gz-duration-picker>
+                  </v-col>
 
-            <v-col v-if="showAyaType" cols="12" sm="6" lg="4" xl="3">
-              <v-select
-                ref="ayaType"
-                v-model="obj.ayaType"
-                :items="selectLists.coreAyaTypes"
-                item-text="name"
-                item-value="id"
-                :readonly="formState.readOnly"
-                :label="$ay.t('AyaType')"
-                data-cy="ayaType"
-                :rules="[form().integerValid(this, 'ayaType')]"
-                :error-messages="form().serverErrors(this, 'ayaType')"
-                @input="fieldValueChanged('ayaType')"
-              ></v-select>
-            </v-col>
-            <!-- :menu-props="{ contentClass: 'cyAyaType' }" -->
-            <v-col v-if="showAdvanceNotice" cols="12" sm="6" lg="4" xl="3">
-              <gz-duration-picker
-                ref="advanceNotice"
-                v-model="obj.advanceNotice"
-                :readonly="formState.readOnly"
-                :label="$ay.t('NotifySubscriptionPendingSpan')"
-                :show-seconds="false"
-                data-cy="advanceNotice"
-                :error-messages="form().serverErrors(this, 'advanceNotice')"
-                @input="fieldValueChanged('advanceNotice')"
-              ></gz-duration-picker>
-            </v-col>
+                  <v-col v-if="showAyaType" cols="12" sm="6" lg="4" xl="3">
+                    <v-select
+                      ref="ayaType"
+                      v-model="obj.ayaType"
+                      :items="selectLists.coreAyaTypes"
+                      item-text="name"
+                      item-value="id"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('AyaType')"
+                      data-cy="ayaType"
+                      :rules="[form().integerValid(this, 'ayaType')]"
+                      :error-messages="form().serverErrors(this, 'ayaType')"
+                      @input="fieldValueChanged('ayaType')"
+                    ></v-select>
+                  </v-col>
+                  <!-- :menu-props="{ contentClass: 'cyAyaType' }" -->
+                  <v-col
+                    v-if="showAdvanceNotice"
+                    cols="12"
+                    sm="6"
+                    lg="4"
+                    xl="3"
+                  >
+                    <gz-duration-picker
+                      ref="advanceNotice"
+                      v-model="obj.advanceNotice"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('NotifySubscriptionPendingSpan')"
+                      :show-seconds="false"
+                      data-cy="advanceNotice"
+                      :error-messages="
+                        form().serverErrors(this, 'advanceNotice')
+                      "
+                      @input="fieldValueChanged('advanceNotice')"
+                    ></gz-duration-picker>
+                  </v-col>
 
-            <v-col
-              v-if="showWorkOrderReportSelector"
-              cols="12"
-              sm="6"
-              lg="4"
-              xl="3"
-            >
-              <gz-pick-list
-                ref="linkReportId"
-                v-model="obj.linkReportId"
-                :aya-type="ayaTypes().Report"
-                :variant="ayaTypes().WorkOrder.toString()"
-                :readonly="formState.readOnly"
-                :label="$ay.t('AttachReport')"
-                data-cy="linkReportId"
-                :error-messages="form().serverErrors(this, 'linkReportId')"
-                @input="fieldValueChanged('linkReportId')"
-              ></gz-pick-list>
-            </v-col>
+                  <v-col
+                    v-if="showWorkOrderReportSelector"
+                    cols="12"
+                    sm="6"
+                    lg="4"
+                    xl="3"
+                  >
+                    <gz-pick-list
+                      ref="linkReportId"
+                      v-model="obj.linkReportId"
+                      :aya-type="ayaTypes().Report"
+                      :variant="ayaTypes().WorkOrder.toString()"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('AttachReport')"
+                      data-cy="linkReportId"
+                      :error-messages="
+                        form().serverErrors(this, 'linkReportId')
+                      "
+                      @input="fieldValueChanged('linkReportId')"
+                    ></gz-pick-list>
+                  </v-col>
 
-            <v-col v-if="showTags" cols="12">
-              <gz-tag-picker
-                ref="tags"
-                v-model="obj.tags"
-                :label="$ay.t('TaggedWith')"
-                :readonly="formState.readOnly"
-                data-cy="tags"
-                :error-messages="form().serverErrors(this, 'tags')"
-                @input="fieldValueChanged('tags')"
-              ></gz-tag-picker>
-            </v-col>
-          </v-row>
+                  <v-col v-if="showTags" cols="12">
+                    <gz-tag-picker
+                      ref="tags"
+                      v-model="obj.tags"
+                      :label="$ay.t('TaggedWith')"
+                      :readonly="formState.readOnly"
+                      data-cy="tags"
+                      :error-messages="form().serverErrors(this, 'tags')"
+                      @input="fieldValueChanged('tags')"
+                    ></gz-tag-picker>
+                  </v-col>
+                </v-row>
+              </v-tab-item>
+              <v-tab-item class="mt-4 ml-2">
+                <v-row>
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <v-select
+                      ref="translationId"
+                      v-model="obj.translationId"
+                      :items="selectLists.translations"
+                      item-text="name"
+                      item-value="id"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('Translation')"
+                      :error-messages="
+                        form().serverErrors(this, 'translationId')
+                      "
+                      @input="fieldValueChanged('translationId')"
+                    ></v-select>
+                  </v-col>
+
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <v-checkbox
+                      ref="hour12"
+                      v-model="obj.hour12"
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('Hour12')"
+                      :error-messages="form().serverErrors(this, 'hour12')"
+                      @change="fieldValueChanged('hour12')"
+                    ></v-checkbox>
+                  </v-col>
+
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <v-text-field
+                      ref="currencyName"
+                      v-model="obj.currencyName"
+                      :hint="
+                        optionsObj.currencyName == null ||
+                        optionsObj.currencyName == ''
+                          ? locale().getCurrencyName()
+                          : ''
+                      "
+                      persistent-hint
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('CurrencyCode')"
+                      :error-messages="
+                        form().serverErrors(this, 'currencyName')
+                      "
+                      append-outer-icon="$ayiQuestionCircle"
+                      @input="fieldValueChanged('currencyName')"
+                      @click:append-outer="goHelp()"
+                    ></v-text-field>
+                  </v-col>
+
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <v-text-field
+                      ref="languageOverride"
+                      v-model="obj.languageOverride"
+                      :hint="locale().getResolvedLanguage()"
+                      persistent-hint
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('LanguageCode')"
+                      :error-messages="
+                        form().serverErrors(this, 'languageOverride')
+                      "
+                      append-outer-icon="$ayiQuestionCircle"
+                      @input="fieldValueChanged('languageOverride')"
+                      @click:append-outer="goHelp()"
+                    ></v-text-field>
+                  </v-col>
+
+                  <v-col cols="12" sm="6" lg="4" xl="3">
+                    <v-text-field
+                      ref="timeZoneOverride"
+                      v-model="obj.timeZoneOverride"
+                      :hint="locale().getResolvedTimeZoneName()"
+                      persistent-hint
+                      :readonly="formState.readOnly"
+                      :label="$ay.t('TimeZone')"
+                      :error-messages="
+                        form().serverErrors(this, 'timeZoneOverride')
+                      "
+                      append-outer-icon="$ayiQuestionCircle"
+                      @input="fieldValueChanged('timeZoneOverride')"
+                      @click:append-outer="goHelp()"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-tab-item>
+            </v-tabs-items>
+          </v-tabs>
         </v-form>
       </v-col>
     </v-row>
@@ -238,6 +356,11 @@ export default {
       obj: {
         id: 0,
         concurrency: 0,
+        languageOverride: null,
+        timeZoneOverride: null,
+        currencyName: "USD",
+        hour12: true,
+        translationId: 1,
         ayaType: 0,
         eventType: 0,
         advanceNotice: "00:00:00",
@@ -258,7 +381,8 @@ export default {
         serverError: {}
       },
       rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.CustomerNotifySubscription
+      ayaType: window.$gz.type.CustomerNotifySubscription,
+      tab: 0
     };
   },
   computed: {
@@ -704,7 +828,14 @@ async function fetchTranslatedText() {
     "Total",
     "UiFieldDataTypesInteger",
     "QuoteQuoteStatusType",
-    "AttachReport"
+    "AttachReport",
+    "NotificationSettings",
+    "NotifyEventType",
+    "CurrencyCode",
+    "LanguageCode",
+    "TimeZone",
+    "Hour12",
+    "Translation"
   ]);
 }
 
diff --git a/ayanova/src/views/home-user-settings.vue b/ayanova/src/views/home-user-settings.vue
index e297f851..86e7cdbe 100644
--- a/ayanova/src/views/home-user-settings.vue
+++ b/ayanova/src/views/home-user-settings.vue
@@ -173,21 +173,20 @@
             ></v-text-field>
           </v-col>
 
-          <!-- <v-col cols="12" sm="6" lg="4" xl="3">
-          
+          <v-col cols="12" sm="6" lg="4" xl="3">
             <span class="text-caption">
               {{ $ay.t("UserColor") }}
             </span>
             <v-color-picker
+              ref="uiColor"
               v-model="obj.uiColor"
               :readonly="formState.readOnly"
               hide-mode-switch
               mode="hexa"
               :error-messages="form().serverErrors(this, 'uiColor')"
-              ref="uiColor"
               @input="fieldValueChanged('uiColor')"
             ></v-color-picker>
-          </v-col> -->
+          </v-col>
         </v-row>
       </v-form>
     </v-col>
@@ -216,6 +215,7 @@ export default {
         phone2: null,
         phone3: null,
         mapUrlTemplate: null,
+        uiColor: "#000000",
         languageOverride: null,
         timeZoneOverride: null,
         currencyName: null,