Merge pull request #219 from frappe/develop

chore: Merge develop to main

crm/api/__init__.py

@@ -1,5 +1,7 @@
+from bs4 import BeautifulSoup
 import frappe
 from frappe.translate import get_all_translations
+from frappe.utils import cstr
 
 
 @frappe.whitelist(allow_guest=True)
@@ -9,4 +11,37 @@ def get_translations():
 	else:
 		language = frappe.db.get_single_value("System Settings", "language")
 
-	return get_all_translations(language)
+	return get_all_translations(language)
+
+
+@frappe.whitelist()
+def get_user_signature():
+	user = frappe.session.user
+	user_email_signature = (
+		frappe.db.get_value(
+			"User",
+			user,
+			"email_signature",
+		)
+		if user
+		else None
+	)
+
+	signature = user_email_signature or frappe.db.get_value(
+		"Email Account",
+		{"default_outgoing": 1, "add_signature": 1},
+		"signature",
+	)
+
+	if not signature:
+		return
+
+	soup = BeautifulSoup(signature, "html.parser")
+	html_signature = soup.find("div", {"class": "ql-editor read-mode"})
+	_signature = None
+	if html_signature:
+		_signature = html_signature.renderContents()
+	content = ""
+	if (cstr(_signature) or signature):
+		content = f'<br><p class="signature">{signature}</p>'
+	return content

crm/api/doc.py

@@ -534,8 +534,10 @@ def get_assigned_users(doctype, name, default_assigned_to=None):
 
 
 @frappe.whitelist()
-def get_fields(doctype: str):
+def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
 	not_allowed_fieldtypes = list(frappe.model.no_value_fields) + ["Read Only"]
+	if allow_all_fieldtypes:
+		not_allowed_fieldtypes = []
 	fields = frappe.get_meta(doctype).fields
 
 	_fields = []
@@ -553,6 +555,7 @@ def get_fields(doctype: str):
 				"type": field.fieldtype,
 				"value": field.fieldname,
 				"options": field.options,
+				"mandatory": field.reqd,
 			})
 
 	return _fields

crm/api/session.py

@@ -5,7 +5,7 @@ import frappe
 def get_users():
 	users = frappe.qb.get_query(
 		"User",
-		fields=["name", "email", "enabled", "user_image", "full_name", "user_type"],
+		fields=["name", "email", "enabled", "user_image", "first_name", "last_name", "full_name", "user_type"],
 		order_by="full_name asc",
 		distinct=True,
 	).run(as_dict=1)

crm/api/whatsapp.py

@@ -96,6 +96,12 @@ def is_whatsapp_enabled():
         return False
     return frappe.get_cached_value("WhatsApp Settings", "WhatsApp Settings", "enabled")
 
+@frappe.whitelist()
+def is_whatsapp_installed():
+    if not frappe.db.exists("DocType", "WhatsApp Settings"):
+        return False
+    return True
+
 
 @frappe.whitelist()
 def get_whatsapp_messages(reference_doctype, reference_name):

crm/fcrm/doctype/twilio_settings/twilio_settings.json

@@ -7,17 +7,17 @@
  "editable_grid": 1,
  "engine": "InnoDB",
  "field_order": [
+  "section_break_ssqj",
+  "enabled",
+  "column_break_avmt",
+  "record_calls",
   "section_break_malx",
   "account_sid",
   "api_key",
   "api_secret",
   "column_break_idds",
   "auth_token",
-  "twiml_sid",
+  "twiml_sid"
-  "section_break_ssqj",
-  "enabled",
-  "column_break_avmt",
-  "record_calls"
  ],
  "fields": [
   {
@@ -84,7 +84,7 @@
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2024-01-13 14:24:16.726645",
+ "modified": "2024-06-11 17:42:38.256260",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "Twilio Settings",

frappe-ui

@@ -1 +1 @@
-Subproject commit d7ad7bd0d09f25a446da984e6006479ea218acd0
+Subproject commit 0c0212cc5bbac151cffc6dc73dfbdf7b69d45ec2

frontend/package.json

@@ -13,7 +13,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.59",
+    "frappe-ui": "^0.1.61",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

frontend/src/components/Activities.vue

@@ -479,22 +479,26 @@
             </div>
             <div class="flex gap-0.5">
               <Tooltip :text="__('Reply')">
-                <Button
+                <div>
-                  variant="ghost"
+                  <Button
-                  class="text-gray-700"
+                    variant="ghost"
-                  @click="reply(activity.data)"
+                    class="text-gray-700"
-                >
+                    @click="reply(activity.data)"
-                  <ReplyIcon class="h-4 w-4" />
+                  >
-                </Button>
+                    <ReplyIcon class="h-4 w-4" />
+                  </Button>
+                </div>
               </Tooltip>
               <Tooltip :text="__('Reply All')">
-                <Button
+                <div>
-                  variant="ghost"
+                  <Button
-                  class="text-gray-700"
+                    variant="ghost"
-                  @click="reply(activity.data, true)"
+                    class="text-gray-700"
-                >
+                    @click="reply(activity.data, true)"
-                  <ReplyAllIcon class="h-4 w-4" />
+                  >
-                </Button>
+                    <ReplyAllIcon class="h-4 w-4" />
+                  </Button>
+                </div>
               </Tooltip>
             </div>
           </div>

frontend/src/components/CommunicationArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between gap-3 border-t sm:px-10 px-4 py-2.5">
+  <div class="flex justify-between gap-3 border-t px-4 py-2.5 sm:px-10">
     <div class="flex gap-1.5">
       <Button
         ref="sendEmailRef"
@@ -102,7 +102,7 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import { usersStore } from '@/stores/users'
 import { useStorage } from '@vueuse/core'
-import { call } from 'frappe-ui'
+import { call, createResource } from 'frappe-ui'
 import { ref, watch, computed, nextTick } from 'vue'
 
 const props = defineProps({
@@ -138,11 +138,29 @@ const subject = computed(() => {
   return `${prefix} (#${doc.value.data.name})`
 })
 
+const signature = createResource({
+  url: 'crm.api.get_user_signature',
+  cache: 'user-email-signature',
+  auto: true,
+})
+
+function setSignature(editor) {
+  signature.data = signature.data.replace(/\n/g, '<br>')
+  let emailContent = editor.getHTML()
+  emailContent = emailContent.startsWith('<p></p>')
+    ? emailContent.slice(7)
+    : emailContent
+  editor.commands.setContent(signature.data + emailContent)
+  editor.commands.focus('start')
+}
+
 watch(
   () => showEmailBox.value,
   (value) => {
     if (value) {
-      newEmailEditor.value.editor.commands.focus()
+      let editor = newEmailEditor.value.editor
+      editor.commands.focus()
+      setSignature(editor)
     }
   }
 )
@@ -248,5 +266,9 @@ function toggleCommentBox() {
   showCommentBox.value = !showCommentBox.value
 }
 
-defineExpose({ show: showEmailBox, showComment: showCommentBox, editor: newEmailEditor })
+defineExpose({
+  show: showEmailBox,
+  showComment: showCommentBox,
+  editor: newEmailEditor,
+})
 </script>

frontend/src/components/Controls/DatePicker.vue

@@ -1,268 +0,0 @@
-<template>
-  <Popover
-    @open="selectCurrentMonthYear"
-    class="flex w-full [&>div:first-child]:w-full"
-  >
-    <template #target="{ togglePopover }">
-      <input
-        readonly
-        type="text"
-        :placeholder="placeholder"
-        :value="value && formatter ? formatter(value) : value"
-        @focus="!readonly ? togglePopover() : null"
-        :class="[
-          'form-input  block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500',
-          inputClass,
-        ]"
-        v-bind="$attrs"
-      />
-    </template>
-    <template #body="{ togglePopover }">
-      <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="flex items-center p-1 text-gray-500">
-          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
-            <FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
-          </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
-            {{ formatMonth }}
-          </div>
-          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-right"
-              class="h-4 w-4"
-            />
-          </Button>
-        </div>
-        <div class="flex items-center justify-center gap-1 p-1">
-          <TextInput
-            class="text-sm"
-            type="text"
-            :value="value"
-            @change="
-              selectDate(getDate($event.target.value)) || togglePopover()
-            "
-          />
-          <Button
-            :label="__('Today')"
-            class="text-sm"
-            @click="selectDate(getDate()) || togglePopover()"
-          />
-        </div>
-        <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
-        >
-          <div class="flex items-center text-xs uppercase">
-            <div
-              class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
-              :key="i"
-            >
-              {{ __(d) }}
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            v-for="(week, i) in datesAsWeeks"
-            :key="i"
-          >
-            <div
-              v-for="date in week"
-              :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
-              :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'font-extrabold text-gray-900':
-                  toValue(date) === toValue(today),
-                'bg-gray-800 text-white hover:bg-gray-800':
-                  toValue(date) === value,
-              }"
-              @click="
-                () => {
-                  selectDate(date)
-                  togglePopover()
-                }
-              "
-            >
-              {{ __(date.getDate()) }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end p-1">
-          <Button
-            :label="__('Clear')"
-            class="text-sm"
-            @click="
-              () => {
-                selectDate('')
-                togglePopover()
-              }
-            "
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import { Popover } from 'frappe-ui'
-export default {
-  name: 'DatePicker',
-  props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
-  emits: ['change'],
-  components: {
-    Popover,
-  },
-  data() {
-    return {
-      currentYear: null,
-      currentMonth: null,
-    }
-  },
-  created() {
-    this.selectCurrentMonthYear()
-  },
-  computed: {
-    today() {
-      return this.getDate()
-    },
-    datesAsWeeks() {
-      let datesAsWeeks = []
-      let dates = this.dates.slice()
-      while (dates.length) {
-        let week = dates.splice(0, 7)
-        datesAsWeeks.push(week)
-      }
-      return datesAsWeeks
-    },
-    dates() {
-      if (!(this.currentYear && this.currentMonth)) {
-        return []
-      }
-      let monthIndex = this.currentMonth - 1
-      let year = this.currentYear
-
-      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
-      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
-      let leftPaddingCount = firstDayOfMonth.getDay()
-      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
-
-      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
-      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
-      let daysInMonth = this.getDaysInMonth(monthIndex, year)
-      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
-
-      let dates = [
-        ...leftPadding,
-        firstDayOfMonth,
-        ...datesInMonth,
-        ...rightPadding,
-      ]
-      if (dates.length < 42) {
-        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
-        dates = dates.concat(...finalPadding)
-      }
-      return dates
-    },
-    formatMonth() {
-      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      let month = __(
-        date.toLocaleString('en-US', {
-          month: 'long',
-        })
-      )
-      return `${month}, ${date.getFullYear()}`
-    },
-  },
-  methods: {
-    selectDate(date) {
-      this.$emit('change', this.toValue(date))
-    },
-    selectCurrentMonthYear() {
-      let date = this.value ? this.getDate(this.value) : this.getDate()
-      if (date === 'Invalid Date') {
-        date = this.getDate()
-      }
-      this.currentYear = date.getFullYear()
-      this.currentMonth = date.getMonth() + 1
-    },
-    prevMonth() {
-      this.changeMonth(-1)
-    },
-    nextMonth() {
-      this.changeMonth(1)
-    },
-    changeMonth(adder) {
-      this.currentMonth = this.currentMonth + adder
-      if (this.currentMonth < 1) {
-        this.currentMonth = 12
-        this.currentYear = this.currentYear - 1
-      }
-      if (this.currentMonth > 12) {
-        this.currentMonth = 1
-        this.currentYear = this.currentYear + 1
-      }
-    },
-    getDatesAfter(date, count) {
-      let incrementer = 1
-      if (count < 0) {
-        incrementer = -1
-        count = Math.abs(count)
-      }
-      let dates = []
-      while (count) {
-        date = this.getDate(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + incrementer
-        )
-        dates.push(date)
-        count--
-      }
-      if (incrementer === -1) {
-        return dates.reverse()
-      }
-      return dates
-    },
-
-    getDaysInMonth(monthIndex, year) {
-      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      let daysInMonth = daysInMonthMap[monthIndex]
-      if (monthIndex === 1 && this.isLeapYear(year)) {
-        return 29
-      }
-      return daysInMonth
-    },
-
-    isLeapYear(year) {
-      if (year % 400 === 0) return true
-      if (year % 100 === 0) return false
-      if (year % 4 === 0) return true
-      return false
-    },
-
-    toValue(date) {
-      if (!date) {
-        return ''
-      }
-
-      // toISOString is buggy and reduces the day by one
-      // this is because it considers the UTC timestamp
-      // in order to circumvent that we need to use luxon/moment
-      // but that refactor could take some time, so fixing the time difference
-      // as suggested in this answer.
-      // https://stackoverflow.com/a/16084846/3541205
-      date.setHours(0, -date.getTimezoneOffset(), 0, 0)
-      return date.toISOString().slice(0, 10)
-    },
-
-    getDate(...args) {
-      let d = new Date(...args)
-      return d
-    },
-  },
-}
-</script>

frontend/src/components/Controls/DateRangePicker.vue

@@ -1,311 +0,0 @@
-<template>
-  <Popover
-    @open="selectCurrentMonthYear"
-    class="flex w-full [&>div:first-child]:w-full"
-  >
-    <template #target="{ togglePopover }">
-      <input
-        readonly
-        type="text"
-        :placeholder="placeholder"
-        :value="formatter ? formatDates(value) : value"
-        @focus="!readonly ? togglePopover() : null"
-        :class="[
-          'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm  placeholder-gray-500 ',
-          inputClass,
-        ]"
-      />
-    </template>
-    <template #body="{ togglePopover }">
-      <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="flex items-center p-1 text-gray-500">
-          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
-            <FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
-          </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
-            {{ formatMonth }}
-          </div>
-          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-right"
-              class="h-4 w-4"
-            />
-          </Button>
-        </div>
-        <div class="flex items-center justify-center gap-1 p-1">
-          <TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
-          <TextInput class="w-28 text-sm" type="text" v-model="toDate" />
-        </div>
-        <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
-        >
-          <div class="flex items-center text-xs uppercase">
-            <div
-              class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
-              :key="i"
-            >
-              {{ __(d) }}
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            v-for="(week, i) in datesAsWeeks"
-            :key="i"
-          >
-            <div
-              v-for="date in week"
-              :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
-              :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'text-gray-900': date.getMonth() === currentMonth - 1,
-                'font-extrabold text-gray-900':
-                  toValue(date) === toValue(today),
-                'rounded-none bg-gray-100': isInRange(date),
-                'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
-                  fromDate && toValue(date) === toValue(fromDate),
-                'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
-                  toDate && toValue(date) === toValue(toDate),
-              }"
-              @click="() => handleDateClick(date)"
-            >
-              {{ date.getDate() }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end space-x-1 p-1">
-          <Button
-            :label="__('Clear')"
-            @click="() => clearDates() | togglePopover()"
-            :disabled="!fromDate || !toDate"
-          />
-          <Button
-            variant="solid"
-            :label="__('Apply')"
-            :disabled="!fromDate || !toDate"
-            @click="() => selectDates() | togglePopover()"
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import { Popover } from 'frappe-ui'
-export default {
-  name: 'DateRangePicker',
-  props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
-  emits: ['change'],
-  components: {
-    Popover,
-  },
-  data() {
-    const fromDate = this.value ? this.value[0] : ''
-    const toDate = this.value ? this.value[1] : ''
-    return {
-      currentYear: null,
-      currentMonth: null,
-      fromDate,
-      toDate,
-    }
-  },
-  created() {
-    this.selectCurrentMonthYear()
-  },
-  computed: {
-    today() {
-      return this.getDate()
-    },
-    datesAsWeeks() {
-      let datesAsWeeks = []
-      let dates = this.dates.slice()
-      while (dates.length) {
-        let week = dates.splice(0, 7)
-        datesAsWeeks.push(week)
-      }
-      return datesAsWeeks
-    },
-    dates() {
-      if (!(this.currentYear && this.currentMonth)) {
-        return []
-      }
-      let monthIndex = this.currentMonth - 1
-      let year = this.currentYear
-
-      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
-      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
-      let leftPaddingCount = firstDayOfMonth.getDay()
-      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
-
-      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
-      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
-      let daysInMonth = this.getDaysInMonth(monthIndex, year)
-      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
-
-      let dates = [
-        ...leftPadding,
-        firstDayOfMonth,
-        ...datesInMonth,
-        ...rightPadding,
-      ]
-      if (dates.length < 42) {
-        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
-        dates = dates.concat(...finalPadding)
-      }
-      return dates
-    },
-    formatMonth() {
-      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      let month = __(
-        date.toLocaleString('en-US', {
-          month: 'long',
-        })
-      )
-      return `${month}, ${date.getFullYear()}`
-    },
-  },
-  methods: {
-    handleDateClick(date) {
-      if (this.fromDate && this.toDate) {
-        this.fromDate = this.toValue(date)
-        this.toDate = ''
-      } else if (this.fromDate && !this.toDate) {
-        this.toDate = this.toValue(date)
-      } else {
-        this.fromDate = this.toValue(date)
-      }
-      this.swapDatesIfNecessary()
-    },
-    selectDates() {
-      if (!this.fromDate && !this.toDate) {
-        return this.$emit('change', '')
-      }
-      this.$emit('change', `${this.fromDate},${this.toDate}`)
-    },
-    swapDatesIfNecessary() {
-      if (!this.fromDate || !this.toDate) {
-        return
-      }
-      // if fromDate is greater than toDate, swap them
-      let fromDate = this.getDate(this.fromDate)
-      let toDate = this.getDate(this.toDate)
-      if (fromDate > toDate) {
-        let temp = fromDate
-        fromDate = toDate
-        toDate = temp
-      }
-      this.fromDate = this.toValue(fromDate)
-      this.toDate = this.toValue(toDate)
-    },
-    selectCurrentMonthYear() {
-      let date = this.toDate ? this.getDate(this.toDate) : this.today
-      this.currentYear = date.getFullYear()
-      this.currentMonth = date.getMonth() + 1
-    },
-    prevMonth() {
-      this.changeMonth(-1)
-    },
-    nextMonth() {
-      this.changeMonth(1)
-    },
-    changeMonth(adder) {
-      this.currentMonth = this.currentMonth + adder
-      if (this.currentMonth < 1) {
-        this.currentMonth = 12
-        this.currentYear = this.currentYear - 1
-      }
-      if (this.currentMonth > 12) {
-        this.currentMonth = 1
-        this.currentYear = this.currentYear + 1
-      }
-    },
-    getDatesAfter(date, count) {
-      let incrementer = 1
-      if (count < 0) {
-        incrementer = -1
-        count = Math.abs(count)
-      }
-      let dates = []
-      while (count) {
-        date = this.getDate(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + incrementer
-        )
-        dates.push(date)
-        count--
-      }
-      if (incrementer === -1) {
-        return dates.reverse()
-      }
-      return dates
-    },
-
-    getDaysInMonth(monthIndex, year) {
-      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      let daysInMonth = daysInMonthMap[monthIndex]
-      if (monthIndex === 1 && this.isLeapYear(year)) {
-        return 29
-      }
-      return daysInMonth
-    },
-
-    isLeapYear(year) {
-      if (year % 400 === 0) return true
-      if (year % 100 === 0) return false
-      if (year % 4 === 0) return true
-      return false
-    },
-
-    toValue(date) {
-      if (!date) {
-        return ''
-      }
-      if (typeof date === 'string') {
-        return date
-      }
-
-      // toISOString is buggy and reduces the day by one
-      // this is because it considers the UTC timestamp
-      // in order to circumvent that we need to use luxon/moment
-      // but that refactor could take some time, so fixing the time difference
-      // as suggested in this answer.
-      // https://stackoverflow.com/a/16084846/3541205
-      date.setHours(0, -date.getTimezoneOffset(), 0, 0)
-      return date.toISOString().slice(0, 10)
-    },
-
-    getDate(...args) {
-      let d = new Date(...args)
-      return d
-    },
-
-    isInRange(date) {
-      if (!this.fromDate || !this.toDate) {
-        return false
-      }
-      return (
-        date >= this.getDate(this.fromDate) && date <= this.getDate(this.toDate)
-      )
-    },
-
-    formatDates(value) {
-      if (!value) {
-        return ''
-      }
-      const values = value.split(',')
-      return this.formatter(values[0]) + ' to ' + this.formatter(values[1])
-    },
-    clearDates() {
-      this.fromDate = ''
-      this.toDate = ''
-      this.selectDates()
-    },
-  },
-}
-</script>

frontend/src/components/Controls/DatetimePicker.vue

@@ -1,379 +0,0 @@
-<template>
-  <Popover
-    @open="selectCurrentMonthYear"
-    class="flex w-full [&>div:first-child]:w-full"
-  >
-    <template #target="{ togglePopover }">
-      <Input
-        readonly
-        type="text"
-        :placeholder="placeholder"
-        :value="value && formatter ? formatter(value) : value"
-        @focus="!readonly ? togglePopover() : null"
-        :class="inputClass"
-        v-bind="$attrs"
-      />
-    </template>
-    <template #body="{ togglePopover }">
-      <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="flex items-center p-1 text-gray-500">
-          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
-            <FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
-          </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
-            {{ formatMonth }}
-          </div>
-          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-right"
-              class="h-4 w-4"
-            />
-          </Button>
-        </div>
-        <div class="flex items-center justify-center gap-1 p-1">
-          <TextInput
-            class="text-sm"
-            type="text"
-            :value="value"
-            @change="updateDate($event.target.value) || togglePopover()"
-          />
-          <Button
-            :label="__('Now')"
-            class="text-sm"
-            @click="selectDate(getDate(), false, true) || togglePopover()"
-          />
-        </div>
-        <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
-        >
-          <div class="flex items-center text-xs uppercase">
-            <div
-              class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
-              :key="i"
-            >
-              {{ __(d) }}
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            v-for="(week, i) in datesAsWeeks"
-            :key="i"
-          >
-            <div
-              v-for="date in week"
-              :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
-              :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'font-extrabold text-gray-900':
-                  toValue(date) === toValue(today),
-                'bg-gray-800 text-white hover:bg-gray-800':
-                  toValue(date) === value,
-              }"
-              @click="
-                () => {
-                  selectDate(date)
-                  togglePopover()
-                }
-              "
-            >
-              {{ date.getDate() }}
-            </div>
-          </div>
-        </div>
-        <div class="flex items-center justify-around gap-2 p-1">
-          <div>
-            {{ twoDigit(hour) }} : {{ twoDigit(minute) }} :
-            {{ twoDigit(second) }}
-          </div>
-          <div class="flex flex-col items-center justify-center">
-            <div class="slider flex min-h-4 items-center justify-center">
-              <TextInput
-                v-model="hour"
-                name="hours"
-                type="range"
-                min="0"
-                max="23"
-                step="1"
-                @change="() => changeTime() || togglePopover()"
-              />
-            </div>
-            <div class="slider flex min-h-4 items-center justify-center">
-              <TextInput
-                v-model="minute"
-                name="minutes"
-                type="range"
-                min="0"
-                max="59"
-                step="1"
-                @change="() => changeTime() || togglePopover()"
-              />
-            </div>
-            <div class="slider flex min-h-4 items-center justify-center">
-              <TextInput
-                v-model="second"
-                name="seconds"
-                type="range"
-                min="0"
-                max="59"
-                step="1"
-                @change="() => changeTime() || togglePopover()"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end p-1">
-          <Button
-            :label="__('Clear')"
-            class="text-sm"
-            @click="
-              () => {
-                selectDate('')
-                togglePopover()
-              }
-            "
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import { Popover } from 'frappe-ui'
-export default {
-  name: 'DatePicker',
-  props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
-  emits: ['change'],
-  components: {
-    Popover,
-  },
-  data() {
-    return {
-      currentYear: null,
-      currentMonth: null,
-      hour: 0,
-      minute: 0,
-      second: 0,
-    }
-  },
-  created() {
-    this.selectCurrentMonthYear()
-  },
-  computed: {
-    today() {
-      return this.getDate()
-    },
-    datesAsWeeks() {
-      let datesAsWeeks = []
-      let dates = this.dates.slice()
-      while (dates.length) {
-        let week = dates.splice(0, 7)
-        datesAsWeeks.push(week)
-      }
-      return datesAsWeeks
-    },
-    dates() {
-      if (!(this.currentYear && this.currentMonth)) {
-        return []
-      }
-      let monthIndex = this.currentMonth - 1
-      let year = this.currentYear
-
-      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
-      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
-      let leftPaddingCount = firstDayOfMonth.getDay()
-      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
-
-      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
-      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
-      let daysInMonth = this.getDaysInMonth(monthIndex, year)
-      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
-
-      let dates = [
-        ...leftPadding,
-        firstDayOfMonth,
-        ...datesInMonth,
-        ...rightPadding,
-      ]
-      if (dates.length < 42) {
-        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
-        dates = dates.concat(...finalPadding)
-      }
-      return dates
-    },
-    formatMonth() {
-      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      let month = __(
-        date.toLocaleString('en-US', {
-          month: 'long',
-        })
-      )
-      return `${month}, ${date.getFullYear()}`
-    },
-  },
-  methods: {
-    changeTime() {
-      let date = this.value ? this.getDate(this.value) : this.getDate()
-      this.selectDate(date, true)
-    },
-    selectDate(date, isTimeChange = false, isNow = false) {
-      if (!isTimeChange) {
-        let currentDate =
-          this.value && !isNow ? this.getDate(this.value) : this.getDate()
-        this.hour = currentDate.getHours()
-        this.minute = currentDate.getMinutes()
-        this.second = currentDate.getSeconds()
-      }
-      this.$emit('change', this.toValue(date))
-    },
-    selectCurrentMonthYear() {
-      let date = this.value ? this.getDate(this.value) : this.getDate()
-      if (date === 'Invalid Date') {
-        date = this.getDate()
-      }
-      this.currentYear = date.getFullYear()
-      this.currentMonth = date.getMonth() + 1
-      this.hour = date.getHours()
-      this.minute = date.getMinutes()
-      this.second = date.getSeconds()
-    },
-    prevMonth() {
-      this.changeMonth(-1)
-    },
-    nextMonth() {
-      this.changeMonth(1)
-    },
-    changeMonth(adder) {
-      this.currentMonth = this.currentMonth + adder
-      if (this.currentMonth < 1) {
-        this.currentMonth = 12
-        this.currentYear = this.currentYear - 1
-      }
-      if (this.currentMonth > 12) {
-        this.currentMonth = 1
-        this.currentYear = this.currentYear + 1
-      }
-    },
-    getDatesAfter(date, count) {
-      let incrementer = 1
-      if (count < 0) {
-        incrementer = -1
-        count = Math.abs(count)
-      }
-      let dates = []
-      while (count) {
-        date = this.getDate(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + incrementer
-        )
-        dates.push(date)
-        count--
-      }
-      if (incrementer === -1) {
-        return dates.reverse()
-      }
-      return dates
-    },
-    getDaysInMonth(monthIndex, year) {
-      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      let daysInMonth = daysInMonthMap[monthIndex]
-      if (monthIndex === 1 && this.isLeapYear(year)) {
-        return 29
-      }
-      return daysInMonth
-    },
-    isLeapYear(year) {
-      if (year % 400 === 0) return true
-      if (year % 100 === 0) return false
-      if (year % 4 === 0) return true
-      return false
-    },
-    twoDigit(number) {
-      return number.toString().padStart(2, '0')
-    },
-    toValue(date) {
-      if (!date) return ''
-
-      date.setHours(this.hour, this.minute, this.second, 0)
-      // "YYYY-MM-DD HH:MM:SS"
-      return `${date.getFullYear()}-${this.twoDigit(
-        date.getMonth() + 1
-      )}-${this.twoDigit(date.getDate())} ${this.twoDigit(
-        date.getHours()
-      )}:${this.twoDigit(date.getMinutes())}:${this.twoDigit(
-        date.getSeconds()
-      )}`
-    },
-    getDate(...args) {
-      let d = new Date(...args)
-      return d
-    },
-    updateDate(date) {
-      date = this.getDate(date)
-      this.hour = date.getHours()
-      this.minute = date.getMinutes()
-      this.second = date.getSeconds()
-      this.selectDate(date, true)
-    },
-  },
-}
-</script>
-
-<style scoped>
-.slider {
-  --trackHeight: 1px;
-  --thumbRadius: 10px;
-}
-:deep(.slider input[type='range']) {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 100%;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-}
-
-:deep(.slider input[type='range']::-webkit-slider-runnable-track) {
-  appearance: none;
-  background: #000;
-  height: var(--trackHeight);
-  border-radius: 999px;
-}
-
-:deep(.slider input[type='range']:focus-visible) {
-  outline: none;
-}
-
-:deep(.slider input[type='range']::-webkit-slider-thumb) {
-  width: var(--thumbRadius);
-  height: var(--thumbRadius);
-  margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
-  background: #fff;
-  border-radius: 3px;
-  pointer-events: all;
-  appearance: none;
-  outline: 1px solid #777777;
-  z-index: 1;
-}
-
-:deep(.slider:hover input[type='range']::-webkit-slider-thumb) {
-  outline: 1px solid #000;
-}
-:deep(.slider input[type='range']::-webkit-slider-thumb) {
-  width: var(--thumbRadius);
-  height: var(--thumbRadius);
-  margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
-  background: #fff;
-  border-radius: 3px;
-  pointer-events: all;
-  appearance: none;
-  z-index: 1;
-}
-</style>

frontend/src/components/Controls/MultiselectInput.vue

@@ -93,7 +93,8 @@ import {
   ComboboxOption,
 } from '@headlessui/vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { Popover, createResource } from 'frappe-ui'
+import Popover from '@/components/frappe-ui/Popover.vue'
+import { createResource } from 'frappe-ui'
 import { ref, computed, nextTick } from 'vue'
 import { watchDebounced } from '@vueuse/core'
 

frontend/src/components/Fields.vue

@@ -15,7 +15,7 @@
         "
       >
         <div v-for="field in section.fields" :key="field.name">
-          <div class="mb-2 text-sm text-gray-600">
+          <div v-if="field.type != 'Check'" class="mb-2 text-sm text-gray-600">
             {{ __(field.label) }}
             <span class="text-red-500" v-if="field.mandatory">*</span>
           </div>
@@ -32,6 +32,25 @@
               <IndicatorIcon :class="field.prefix" />
             </template>
           </FormControl>
+          <div
+            v-else-if="field.type == 'Check'"
+            class="flex items-center gap-2"
+          >
+            <FormControl
+              class="form-control"
+              type="checkbox"
+              v-model="data[field.name]"
+              @change="(e) => (data[field.name] = e.target.checked)"
+              :disabled="Boolean(field.read_only)"
+            />
+            <label
+              class="text-sm text-gray-600"
+              @click="data[field.name] = !data[field.name]"
+            >
+              {{ __(field.label) }}
+              <span class="text-red-500" v-if="field.mandatory">*</span>
+            </label>
+          </div>
           <Link
             v-else-if="field.type === 'Link'"
             class="form-control"
@@ -113,6 +132,30 @@
               </template>
             </NestedPopover>
           </div>
+          <DateTimePicker
+            v-else-if="field.type === 'Datetime'"
+            v-model="data[field.name]"
+            :placeholder="__(field.placeholder || field.label)"
+            input-class="border-none"
+          />
+          <DatePicker
+            v-else-if="field.type === 'Date'"
+            v-model="data[field.name]"
+            :placeholder="__(field.placeholder || field.label)"
+            input-class="border-none"
+          />
+          <FormControl
+            v-else-if="['Small Text', 'Text', 'Long Text'].includes(field.type)"
+            type="textarea"
+            :placeholder="__(field.placeholder || field.label)"
+            v-model="data[field.name]"
+          />
+          <FormControl
+            v-else-if="['Int'].includes(field.type)"
+            type="number"
+            :placeholder="__(field.placeholder || field.label)"
+            v-model="data[field.name]"
+          />
           <FormControl
             v-else
             type="text"
@@ -132,8 +175,7 @@ import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
-import { Tooltip } from 'frappe-ui'
+import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
-import { isMobileView } from '@/composables/settings'
 
 const { getUser } = usersStore()
 

frontend/src/components/Filter.vue

@@ -34,10 +34,10 @@
             v-for="(f, i) in filters"
             :key="i"
             id="filter-list"
-            class="sm:mb-3 mb-4"
+            class="mb-4 sm:mb-3"
           >
             <div v-if="isMobileView" class="flex flex-col gap-2">
-              <div class="flex w-full items-center justify-between -mb-2">
+              <div class="-mb-2 flex w-full items-center justify-between">
                 <div class="text-base text-gray-600">
                   {{ i == 0 ? __('Where') : __('And') }}
                 </div>
@@ -102,7 +102,7 @@
                   <component
                     :is="getValSelect(f)"
                     v-model="f.value"
-                    @change.stop="(v) => updateValue(v, f)"
+                    @change="(v) => updateValue(v, f)"
                     :placeholder="__('John Doe')"
                   />
                 </div>
@@ -155,14 +155,18 @@
   </NestedPopover>
 </template>
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
-import DateRangePicker from '@/components/Controls/DateRangePicker.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import { FormControl, createResource, Tooltip } from 'frappe-ui'
+import {
+  FormControl,
+  createResource,
+  Tooltip,
+  DatePicker,
+  DateTimePicker,
+  DateRangePicker,
+} from 'frappe-ui'
 import { h, computed, onMounted } from 'vue'
 import { isMobileView } from '@/composables/settings'
 
@@ -395,10 +399,11 @@ function getValSelect(f) {
   } else if (typeNumber.includes(fieldtype)) {
     return h(FormControl, { type: 'number' })
   } else if (typeDate.includes(fieldtype) && operator == 'between') {
-    return h(DateRangePicker, { value: f.value })
+    return h(DateRangePicker, { value: f.value, iconLeft: '' })
   } else if (typeDate.includes(fieldtype)) {
-    return h(fieldtype == 'Date' ? DatePicker : DatetimePicker, {
+    return h(fieldtype == 'Date' ? DatePicker : DateTimePicker, {
       value: f.value,
+      iconLeft: '',
     })
   } else {
     return h(FormControl, { type: 'text' })

frontend/src/components/IconPicker.vue

@@ -64,8 +64,8 @@
   </Popover>
 </template>
 <script setup>
+import Popover from '@/components/frappe-ui/Popover.vue'
 import { gemoji } from 'gemoji'
-import { Popover } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const search = ref('')

frontend/src/components/Modals/EditValueModal.vue

@@ -34,10 +34,9 @@
 </template>
 
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import { FormControl, call, createResource, TextEditor } from 'frappe-ui'
+import { FormControl, call, createResource, TextEditor, DatePicker } from 'frappe-ui'
 import { ref, computed, onMounted, h } from 'vue'
 
 const typeCheck = ['Check']

frontend/src/components/Modals/TaskModal.vue

@@ -91,11 +91,9 @@
               </Tooltip>
             </template>
           </Link>
-          <DatetimePicker
+          <DateTimePicker
             class="datepicker w-36"
-            icon-left="calendar"
+            v-model="_task.due_date"
-            :value="_task.due_date"
-            @change="(val) => (_task.due_date = val)"
             :placeholder="__('01/04/2024 11:30 PM')"
             input-class="border-none"
           />
@@ -120,8 +118,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
+import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
-import { TextEditor, Dropdown, Tooltip, call } from 'frappe-ui'
 import { ref, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 

frontend/src/components/QuickFilterField.vue

@@ -25,7 +25,7 @@
   <component
     v-else-if="['Date', 'Datetime'].includes(filter.type)"
     class="border-none"
-    :is="filter.type === 'Date' ? DatePicker : DatetimePicker"
+    :is="filter.type === 'Date' ? DatePicker : DateTimePicker"
     :value="filter.value"
     @change="(v) => updateFilter(filter, v)"
     :placeholder="filter.label"
@@ -39,10 +39,8 @@
   />
 </template>
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
 import Link from '@/components/Controls/Link.vue'
-import { TextInput, FormControl } from 'frappe-ui'
+import { TextInput, FormControl, DatePicker, DateTimePicker } from 'frappe-ui'
 import { useDebounceFn } from '@vueuse/core'
 
 const props = defineProps({

frontend/src/components/Settings/ProfileImageEditor.vue

@@ -0,0 +1,64 @@
+<template>
+  <FileUploader
+    @success="(file) => setUserImage(file.file_url)"
+    :validateFile="validateFile"
+  >
+    <template v-slot="{ file, progress, error, uploading, openFileSelector }">
+      <div class="flex flex-col items-center">
+        <button
+          class="group relative rounded-full border-2"
+          @click="openFileSelector"
+        >
+          <div
+            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-gray-600 transition-opacity"
+            :class="[
+              uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+              'drop-shadow-sm',
+            ]"
+          >
+            <span
+              class="inline-block rounded-md bg-gray-900/60 px-2 py-1 text-white"
+            >
+              {{
+                uploading
+                  ? `Uploading ${progress}%`
+                  : profile.user_image
+                  ? 'Change Image'
+                  : 'Upload Image'
+              }}
+            </span>
+          </div>
+          <img
+            v-if="profile.user_image"
+            class="h-64 w-64 rounded-full object-cover"
+            :src="profile.user_image"
+            alt="Profile Photo"
+          />
+          <div v-else class="h-64 w-64 rounded-full bg-gray-100"></div>
+        </button>
+        <ErrorMessage class="mt-4" :message="error" />
+        <div class="mt-4 flex items-center gap-4">
+          <Button v-if="profile.user_image" @click="setUserImage(null)">
+            Remove
+          </Button>
+        </div>
+      </div>
+    </template>
+  </FileUploader>
+</template>
+<script setup>
+import { FileUploader } from 'frappe-ui'
+
+const profile = defineModel()
+
+function setUserImage(url) {
+  profile.value.user_image = url
+}
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
+}
+</script>

frontend/src/components/Settings/ProfileSettings.vue

@@ -0,0 +1,100 @@
+<template>
+  <div v-if="profile" class="flex w-full items-center justify-between">
+    <div class="flex items-center gap-4">
+      <Avatar
+        class="!size-16"
+        :image="profile.user_image"
+        :label="profile.full_name"
+      />
+      <div class="flex flex-col gap-1">
+        <span class="text-2xl font-semibold">{{ profile.full_name }}</span>
+        <span class="text-base text-gray-700">{{ profile.email }}</span>
+      </div>
+    </div>
+    <Button :label="__('Edit profile')" @click="showProfileModal = true" />
+    <Dialog
+      :options="{ title: __('Edit Profile') }"
+      v-model="showProfileModal"
+      @after-leave="editingProfilePhoto = false"
+    >
+      <template #body-content>
+        <div v-if="user" class="space-y-4">
+          <ProfileImageEditor v-model="profile" v-if="editingProfilePhoto" />
+          <template v-else>
+            <div class="flex items-center gap-4">
+              <Avatar
+                size="lg"
+                :image="profile.user_image"
+                :label="profile.full_name"
+              />
+              <Button
+                :label="__('Edit Profile Photo')"
+                @click="editingProfilePhoto = true"
+              />
+            </div>
+            <FormControl label="First Name" v-model="profile.first_name" />
+            <FormControl label="Last Name" v-model="profile.last_name" />
+          </template>
+        </div>
+      </template>
+      <template #actions>
+        <Button
+          v-if="editingProfilePhoto"
+          class="mb-2 w-full"
+          @click="editingProfilePhoto = false"
+          :label="__('Back')"
+        />
+        <Button
+          variant="solid"
+          class="w-full"
+          :loading="loading"
+          @click="updateUser"
+          :label="__('Save')"
+        />
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script setup>
+import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
+import { usersStore } from '@/stores/users'
+import { Dialog, Avatar, createResource } from 'frappe-ui'
+import { ref, computed, onMounted } from 'vue'
+
+const { getUser, users } = usersStore()
+
+const user = computed(() => getUser() || {})
+
+const showProfileModal = ref(false)
+
+const editingProfilePhoto = ref(false)
+const profile = ref({})
+const loading = ref(false)
+
+function updateUser() {
+  loading.value = true
+  const fieldname = {
+    first_name: profile.value.first_name,
+    last_name: profile.value.last_name,
+    user_image: profile.value.user_image,
+  }
+  createResource({
+    url: 'frappe.client.set_value',
+    params: {
+      doctype: 'User',
+      name: user.value.name,
+      fieldname,
+    },
+    auto: true,
+    onSuccess: () => {
+      loading.value = false
+      showProfileModal.value = false
+      users.reload()
+    },
+  })
+}
+
+onMounted(() => {
+  profile.value = { ...user.value }
+})
+</script>

frontend/src/components/Settings/SettingsModal.vue

@@ -0,0 +1,93 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '5xl' }">
+    <template #body>
+      <div class="flex h-[calc(100vh_-_8rem)]">
+        <div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
+          <h1 class="px-2 pt-2 text-lg font-semibold">
+            {{ __('Settings') }}
+          </h1>
+          <nav class="mt-3 space-y-1">
+            <SidebarLink
+              v-for="tab in tabs"
+              :icon="tab.icon"
+              :label="__(tab.label)"
+              class="w-full"
+              :class="
+                activeTab?.label == tab.label
+                  ? 'bg-white shadow-sm'
+                  : 'hover:bg-gray-100'
+              "
+              @click="activeTab = tab"
+            />
+          </nav>
+          <div
+            class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+          >
+            <span>{{ __('Integrations') }}</span>
+          </div>
+          <nav class="space-y-1">
+            <SidebarLink
+              v-for="i in integrations"
+              :icon="i.icon"
+              :label="__(i.label)"
+              class="w-full"
+              :class="
+                activeTab?.label == i.label
+                  ? 'bg-white shadow-sm'
+                  : 'hover:bg-gray-100'
+              "
+              @click="activeTab = i"
+            />
+          </nav>
+        </div>
+        <div class="flex flex-1 flex-col overflow-y-auto p-8">
+          <component :is="activeTab.component" v-if="activeTab" />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
+import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
+import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import { isWhatsappInstalled } from '@/composables/settings'
+import { Dialog } from 'frappe-ui'
+import { ref, markRaw, computed } from 'vue'
+
+const show = defineModel()
+
+let tabs = [
+  {
+    label: 'Profile',
+    icon: ContactsIcon,
+    component: markRaw(ProfileSettings),
+  },
+]
+
+let integrations = computed(() => {
+  let items = [
+    {
+      label: 'Twilio',
+      icon: PhoneIcon,
+      component: markRaw(TwilioSettings),
+    },
+  ]
+
+  if (isWhatsappInstalled.value) {
+    items.push({
+      label: 'WhatsApp',
+      icon: WhatsAppIcon,
+      component: markRaw(WhatsAppSettings),
+    })
+  }
+
+  return items
+})
+
+const activeTab = ref(tabs[0])
+</script>

frontend/src/components/Settings/SettingsPage.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="flex h-full flex-col gap-8">
+    <h2 class="flex gap-2 text-xl font-semibold leading-none">
+      <div>{{ __(doctype) }}</div>
+      <Badge
+        :label="__('Not Saved')"
+        variant="subtle"
+        theme="orange"
+        v-if="data.isDirty"
+      />
+    </h2>
+    <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
+      <Fields
+        v-if="data?.doc && sections"
+        :sections="sections"
+        :data="data.doc"
+      />
+    </div>
+    <div v-else class="flex flex-1 items-center justify-center">
+      <Spinner />
+    </div>
+    <div class="flex flex-row-reverse">
+      <Button
+        :loading="data.save.loading"
+        :label="__('Update')"
+        variant="solid"
+        @click="update"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import Fields from '@/components/Fields.vue'
+import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
+import { computed } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
+
+const fields = createResource({
+  url: 'crm.api.doc.get_fields',
+  cache: ['fields', props.doctype],
+  params: {
+    doctype: props.doctype,
+    allow_all_fieldtypes: true,
+  },
+  auto: true,
+})
+
+const data = createDocumentResource({
+  doctype: props.doctype,
+  name: props.doctype,
+  fields: ['*'],
+  cache: props.doctype,
+  auto: true,
+})
+
+const sections = computed(() => {
+  if (!fields.data) return []
+  let _sections = []
+  let fieldsData = fields.data
+
+  if (fieldsData[0].type !== 'Section Break') {
+    _sections.push({
+      label: 'General',
+      columns: 1,
+      fields: [],
+    })
+  }
+  fieldsData.forEach((field) => {
+    if (field.type === 'Section Break') {
+      _sections.push({
+        label: field.value,
+        columns: 1,
+        fields: [],
+      })
+    } else if (field.type === 'Column Break') {
+      _sections[_sections.length - 1].columns += 1
+    } else {
+      _sections[_sections.length - 1].fields.push({
+        ...field,
+        name: field.value,
+      })
+    }
+  })
+
+  return _sections
+})
+
+function update() {
+  data.save.submit()
+}
+</script>

frontend/src/components/Settings/TwilioSettings.vue

@@ -0,0 +1,6 @@
+<template>
+  <SettingsPage doctype="Twilio Settings" />
+</template>
+<script setup>
+import SettingsPage from '@/components/Settings/SettingsPage.vue'
+</script>

frontend/src/components/Settings/WhatsAppSettings.vue

@@ -0,0 +1,6 @@
+<template>
+  <SettingsPage doctype="WhatsApp Settings" />
+</template>
+<script setup>
+import SettingsPage from '@/components/Settings/SettingsPage.vue'
+</script>

frontend/src/components/UserDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dropdown :options="dropdownOptions">
+  <Dropdown :options="dropdownOptions" v-bind="$attrs">
     <template v-slot="{ open }">
       <button
         class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
@@ -44,9 +44,11 @@
       </button>
     </template>
   </Dropdown>
+  <SettingsModal v-model="showSettingsModal" />
 </template>
 
 <script setup>
+import SettingsModal from '@/components/Settings/SettingsModal.vue'
 import CRMLogo from '@/components/Icons/CRMLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
@@ -65,6 +67,8 @@ const { getUser } = usersStore()
 
 const user = computed(() => getUser() || {})
 
+const showSettingsModal = ref(false)
+
 let dropdownOptions = ref([
   {
     group: 'Manage',
@@ -88,9 +92,14 @@ let dropdownOptions = ref([
     ],
   },
   {
-    group: 'Logout',
+    group: 'Others',
     hideLabel: true,
     items: [
+      {
+        icon: 'settings',
+        label: computed(() => __('Settings')),
+        onClick: () => (showSettingsModal.value = true),
+      },
       {
         icon: 'log-out',
         label: computed(() => __('Log out')),

frontend/src/components/frappe-ui/Popover.vue

@@ -0,0 +1,277 @@
+<template>
+  <div ref="reference">
+    <div
+      ref="target"
+      :class="['flex', $attrs.class]"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+      @mouseover="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <slot
+        name="target"
+        v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+      />
+    </div>
+    <teleport to="#frappeui-popper-root">
+      <div
+        ref="popover"
+        class="relative z-[100]"
+        :class="[popoverContainerClass, popoverClass]"
+        :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
+        @mouseover="pointerOverTargetOrPopup = true"
+        @mouseleave="onMouseleave"
+      >
+        <transition v-bind="popupTransition">
+          <div v-show="isOpen">
+            <slot
+              name="body"
+              v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+            >
+              <div class="rounded-lg border border-gray-100 bg-white shadow-xl">
+                <slot
+                  name="body-main"
+                  v-bind="{
+                    togglePopover,
+                    updatePosition,
+                    open,
+                    close,
+                    isOpen,
+                  }"
+                />
+              </div>
+            </slot>
+          </div>
+        </transition>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+
+export default {
+  name: 'Popover',
+  inheritAttrs: false,
+  props: {
+    show: {
+      default: undefined,
+    },
+    trigger: {
+      type: String,
+      default: 'click', // click, hover
+    },
+    hoverDelay: {
+      type: Number,
+      default: 0,
+    },
+    leaveDelay: {
+      type: Number,
+      default: 0,
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
+    popoverClass: [String, Object, Array],
+    transition: {
+      default: null,
+    },
+    hideOnBlur: {
+      default: true,
+    },
+  },
+  emits: ['open', 'close', 'update:show'],
+  expose: ['open', 'close'],
+  data() {
+    return {
+      popoverContainerClass: 'body-container',
+      showPopup: false,
+      targetWidth: null,
+      pointerOverTargetOrPopup: false,
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+  },
+  created() {
+    if (typeof window === 'undefined') return
+    if (!document.getElementById('frappeui-popper-root')) {
+      const root = document.createElement('div')
+      root.id = 'frappeui-popper-root'
+      document.body.appendChild(root)
+    }
+  },
+  mounted() {
+    this.listener = (e) => {
+      const clickedElement = e.target
+      const reference = this.$refs.reference
+      const popoverBody = this.$refs.popover
+      const insideClick =
+        clickedElement === reference ||
+        clickedElement === popoverBody ||
+        reference?.contains(clickedElement) ||
+        popoverBody?.contains(clickedElement)
+      if (insideClick) {
+        return
+      }
+
+      const root = document.getElementById('frappeui-popper-root')
+      const insidePopoverRoot = root.contains(clickedElement)
+      if (!insidePopoverRoot) {
+        return this.close()
+      }
+
+      const bodyClass = `.${this.popoverContainerClass}`
+      const clickedElementBody = clickedElement?.closest(bodyClass)
+      const currentPopoverBody = reference?.closest(bodyClass)
+      const isSiblingClicked =
+        clickedElementBody &&
+        currentPopoverBody &&
+        clickedElementBody === currentPopoverBody
+
+      if (isSiblingClicked) {
+        this.close()
+      }
+    }
+    if (this.hideOnBlur) {
+      document.addEventListener('click', this.listener)
+      document.addEventListener('mousedown', this.listener)
+    }
+    this.$nextTick(() => {
+      this.targetWidth = this.$refs['target'].clientWidth
+    })
+  },
+  beforeDestroy() {
+    this.popper && this.popper.destroy()
+    document.removeEventListener('click', this.listener)
+    document.removeEventListener('mousedown', this.listener)
+  },
+  computed: {
+    showPropPassed() {
+      return this.show != null
+    },
+    isOpen: {
+      get() {
+        if (this.showPropPassed) {
+          return this.show
+        }
+        return this.showPopup
+      },
+      set(val) {
+        val = Boolean(val)
+        if (this.showPropPassed) {
+          this.$emit('update:show', val)
+        } else {
+          this.showPopup = val
+        }
+        if (val === false) {
+          this.$emit('close')
+        } else if (val === true) {
+          this.$emit('open')
+        }
+      },
+    },
+    popupTransition() {
+      let templates = {
+        default: {
+          enterActiveClass: 'transition duration-150 ease-out',
+          enterFromClass: 'translate-y-1 opacity-0',
+          enterToClass: 'translate-y-0 opacity-100',
+          leaveActiveClass: 'transition duration-150 ease-in',
+          leaveFromClass: 'translate-y-0 opacity-100',
+          leaveToClass: 'translate-y-1 opacity-0',
+        },
+      }
+      if (typeof this.transition === 'string') {
+        return templates[this.transition]
+      }
+      return this.transition
+    },
+  },
+  methods: {
+    setupPopper() {
+      if (!this.popper) {
+        this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
+          placement: this.placement,
+        })
+      } else {
+        this.updatePosition()
+      }
+    },
+    updatePosition() {
+      this.popper && this.popper.update()
+    },
+    togglePopover(flag) {
+      if (flag instanceof Event) {
+        flag = null
+      }
+      if (flag == null) {
+        flag = !this.isOpen
+      }
+      flag = Boolean(flag)
+      if (flag) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    open() {
+      this.isOpen = true
+      this.$nextTick(() => this.setupPopper())
+    },
+    close() {
+      this.isOpen = false
+    },
+    onMouseover() {
+      this.pointerOverTargetOrPopup = true
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer)
+        this.leaveTimer = null
+      }
+      if (this.trigger === 'hover') {
+        if (this.hoverDelay) {
+          this.hoverTimer = setTimeout(() => {
+            if (this.pointerOverTargetOrPopup) {
+              this.open()
+            }
+          }, Number(this.hoverDelay) * 1000)
+        } else {
+          this.open()
+        }
+      }
+    },
+    onMouseleave(e) {
+      this.pointerOverTargetOrPopup = false
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer)
+        this.hoverTimer = null
+      }
+      if (this.trigger === 'hover') {
+        if (this.leaveTimer) {
+          clearTimeout(this.leaveTimer)
+        }
+        if (this.leaveDelay) {
+          this.leaveTimer = setTimeout(() => {
+            if (!this.pointerOverTargetOrPopup) {
+              this.close()
+            }
+          }, Number(this.leaveDelay) * 1000)
+        } else {
+          if (!this.pointerOverTargetOrPopup) {
+            this.close()
+          }
+        }
+      }
+    },
+  },
+}
+</script>

frontend/src/composables/settings.js

@@ -2,6 +2,7 @@ import { createResource } from 'frappe-ui'
 import { computed, ref } from 'vue'
 
 export const whatsappEnabled = ref(false)
+export const isWhatsappInstalled = ref(false)
 createResource({
   url: 'crm.api.whatsapp.is_whatsapp_enabled',
   cache: 'Is Whatsapp Enabled',
@@ -10,6 +11,15 @@ createResource({
     whatsappEnabled.value = Boolean(data)
   },
 })
+createResource({
+  url: 'crm.api.whatsapp.is_whatsapp_installed',
+  cache: 'Is Whatsapp Installed',
+  auto: true,
+  onSuccess: (data) => {
+    isWhatsappInstalled.value = Boolean(data)
+  },
+})
+
 export const callEnabled = ref(false)
 createResource({
   url: 'crm.integrations.twilio.api.is_enabled',

frontend/src/stores/users.js

@@ -40,6 +40,8 @@ export const usersStore = defineStore('crm-users', () => {
         name: email,
         email: email,
         full_name: email.split('@')[0],
+        first_name: email.split('@')[0],
+        last_name: '',
         user_image: null,
         role: null,
       }