diff --git a/package.json b/package.json
index ced8a48fdd..ab062ed6fe 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
     "build": "vite build",
     "format": "prettier --write --list-different src/**/*.{js,vue}",
     "lint": "eslint src/",
+    "lint:test": "eslint tests/",
     "lint:fix": "npm run lint -- --fix",
+    "lint:test:fix": "npm run lint:test -- --fix",
     "preview": "vite preview",
     "test": "npm run test:unit",
     "test:unit": "vitest tests/unit",
diff --git a/src/components/widgets/AddComment.vue b/src/components/widgets/AddComment.vue
index 9eaa3a513e..23b8ec54dd 100644
--- a/src/components/widgets/AddComment.vue
+++ b/src/components/widgets/AddComment.vue
@@ -1,6 +1,6 @@
 <template>
   <article
-    ref="wrapper"
+    ref="wrapperRef"
     @drop="onDrop"
     @dragover="onDragover"
     @dragleave="onDragleave"
@@ -90,7 +90,7 @@
           </template>
         </template>
         <textarea
-          ref="comment-textarea"
+          ref="commentTextareaRef"
           class="textarea flexrow-item"
           :disabled="isLoading"
           :placeholder="$t('comments.add_comment')"
@@ -129,7 +129,7 @@
         </label>
         <input
           id="input-link"
-          ref="input-link"
+          ref="inputLinkRef"
           class="input flexrow-item filler preview-link"
           placeholder="https://..."
           type="url"
@@ -319,7 +319,7 @@
     </div>
 
     <add-attachment-modal
-      ref="add-attachment-modal"
+      ref="addAttachmentModalRef"
       :active="modals.addCommentAttachment"
       :is-loading="loading.addCommentAttachment"
       :is-error="errors.addCommentAttachment"
@@ -354,9 +354,21 @@
   </article>
 </template>
 
-<script>
+<script setup>
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeMount,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import AtTa from 'vue-at/dist/vue-at-textarea'
-import { mapGetters } from 'vuex'
 
 import drafts from '@/lib/drafts'
 import { remove } from '@/lib/models'
@@ -365,6 +377,8 @@ import { replaceTimeWithTimecode } from '@/lib/render'
 import preferences from '@/lib/preferences'
 import strings from '@/lib/string'
 
+import { useAtMentionsMembers } from '@/composables/atMentions'
+
 import AddAttachmentModal from '@/components/modals/AddAttachmentModal.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import Checklist from '@/components/widgets/Checklist.vue'
@@ -377,641 +391,543 @@ import ToggleButton from '@/components/widgets/ToggleButton.vue'
 
 const REVISION_NUMBER_REGEX = /v(\d+)/gi
 
-export default {
-  name: 'add-comment',
-
-  components: {
-    AtTa,
-    AddAttachmentModal,
-    ButtonSimple,
-    Checklist,
-    ConfirmModal,
-    ComboboxStatus,
-    EmojiButton,
-    PeopleAvatar,
-    TaskTypeName,
-    ToggleButton
+const props = defineProps({
+  frame: {
+    type: Number,
+    default: 0
   },
-
-  emits: [
-    'add-comment',
-    'add-preview',
-    'annotation-snapshots-requested',
-    'clear-files',
-    'file-drop',
-    'remove-preview'
-  ],
-
-  inject: ['draftComment'],
-
-  data() {
-    return {
-      isFrameAddition: false,
-      membersForAts: { '@': [], '#': [] },
-      isDragging: false,
-      errors: {
-        addCommentAttachment: false
-      },
-      loading: {
-        addCommentAttachment: false
-      },
-      modals: {
-        addCommentAttachment: false,
-        confirmFeedbackPublish: false
-      }
-    }
+  isError: {
+    type: Boolean,
+    default: null
   },
-
-  props: {
-    frame: {
-      type: Number,
-      default: 0
-    },
-    isError: {
-      type: Boolean,
-      default: null
-    },
-    isMaxRetakesError: {
-      type: Boolean,
-      default: null
-    },
-    isMovie: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: null
-    },
-    task: {
-      type: Object,
-      default: () => {}
-    },
-    taskStatus: {
-      type: Array,
-      default: () => []
-    },
-    taskTypes: {
-      type: Array,
-      default: () => []
-    },
-    team: {
-      type: Array,
-      default: () => []
-    },
-    fps: {
-      type: Number,
-      default: 25
-    },
-    revision: {
-      type: Number,
-      default: 1
-    },
-    time: {
-      type: Number,
-      default: 0
-    },
-    previewForms: {
-      type: Array,
-      default: () => []
-    }
+  isMaxRetakesError: {
+    type: Boolean,
+    default: null
   },
-
-  beforeMount() {
-    if (!this.attachments) {
-      this.attachments = []
-    }
-    if (!this.checklist) {
-      this.checklist = []
-    }
+  isMovie: {
+    type: Boolean,
+    default: false
   },
+  isLoading: {
+    type: Boolean,
+    default: null
+  },
+  task: {
+    type: Object,
+    default: () => {}
+  },
+  taskStatus: {
+    type: Array,
+    default: () => []
+  },
+  taskTypes: {
+    type: Array,
+    default: () => []
+  },
+  team: {
+    type: Array,
+    default: () => []
+  },
+  fps: {
+    type: Number,
+    default: 25
+  },
+  revision: {
+    type: Number,
+    default: 1
+  },
+  time: {
+    type: Number,
+    default: 0
+  },
+  previewForms: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits([
+  'add-comment',
+  'add-preview',
+  'annotation-snapshots-requested',
+  'clear-files',
+  'file-drop',
+  'remove-preview'
+])
+
+const store = useStore()
+const route = useRoute()
+const draftComment = inject('draftComment')
+
+const wrapperRef = ref(null)
+const commentTextareaRef = ref(null)
+const inputLinkRef = ref(null)
+const addAttachmentModalRef = ref(null)
+
+const { membersForAts, atOptionsFilter } = useAtMentionsMembers(
+  () => props.team,
+  () => props.taskTypes
+)
+
+const isFrameAddition = ref(false)
+const isDragging = ref(false)
+const errors = reactive({
+  addCommentAttachment: false
+})
+const loading = reactive({
+  addCommentAttachment: false
+})
+const modals = reactive({
+  addCommentAttachment: false,
+  confirmFeedbackPublish: false
+})
+
+const isCurrentUserArtist = computed(() => store.getters.isCurrentUserArtist)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const productionMap = computed(() => store.getters.productionMap)
+const taskStatusForCurrentUser = computed(
+  () => store.getters.taskStatusForCurrentUser
+)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const uploadProgress = computed(() => store.getters.uploadProgress)
+
+const attachments = computed({
+  get: () => draftComment.attachments,
+  set: value => {
+    draftComment.attachments = value
+  }
+})
 
-  mounted() {
-    if (!this.isCurrentUserClient) {
-      this.isFrameAddition = false
-    } else {
-      this.isFrameAddition = preferences.getBoolPreference(
-        'comments:add-frame-when-posting',
-        false
-      )
-    }
-    const production = this.productionMap.get(this.task.project_id)
-    this.mode =
-      production?.is_publish_default_for_artists && this.isCurrentUserArtist
-        ? 'publish'
-        : 'status'
-
-    this.$nextTick(() => {
-      ;[
-        'drag',
-        'dragstart',
-        'dragend',
-        'dragover',
-        'dragenter',
-        'dragleave',
-        'drop'
-      ].forEach(evt => {
-        if (this.$refs.wrapper) {
-          this.$refs.wrapper.addEventListener(evt, e => {
-            e.preventDefault()
-            e.stopPropagation()
-          })
-        }
-      })
+const checklist = computed({
+  get: () => draftComment.checklist,
+  set: value => {
+    draftComment.checklist = value
+  }
+})
+
+const link = computed({
+  get: () => draftComment.link,
+  set: value => {
+    draftComment.link = value
+  }
+})
+
+const mode = computed({
+  get: () => draftComment.mode,
+  set: value => {
+    draftComment.mode = value
+  }
+})
+
+const nextRevision = computed({
+  get: () => draftComment.nextRevision,
+  set: value => {
+    draftComment.nextRevision = value
+  }
+})
+
+const showCommentArea = computed({
+  get: () => draftComment.showCommentArea,
+  set: value => {
+    draftComment.showCommentArea = value
+  }
+})
+
+const showLinkField = computed({
+  get: () => draftComment.showLinkField,
+  set: value => {
+    draftComment.showLinkField = value
+  }
+})
+
+const task_status_id = computed({
+  get: () => draftComment.task_status_id,
+  set: value => {
+    draftComment.task_status_id = value
+  }
+})
+
+const text = computed({
+  get: () => draftComment.text,
+  set: value => {
+    draftComment.text = value
+    drafts.setTaskDraft(props.task.id, text.value)
+  }
+})
+
+const getAttachmentModal = () => {
+  return addAttachmentModalRef.value
+}
+
+const isConcept = computed(() => {
+  return route.path.includes('concept')
+})
+
+const isValidForm = computed(() => {
+  return Boolean(
+    mode.value === 'status' ||
+    (mode.value === 'publish' &&
+      props.previewForms.length &&
+      (nextRevision.value === undefined ||
+        nextRevision.value > props.revision) &&
+      (!showLinkField.value ||
+        !link.value ||
+        inputLinkRef.value?.checkValidity()))
+  )
+})
+
+const shortenText = strings.shortenText
+
+const toggleLinkField = (reset = false) => {
+  showLinkField.value = !showLinkField.value
+  if (showLinkField.value) {
+    nextTick(() => {
+      inputLinkRef.value?.focus()
     })
-    window.addEventListener('paste', this.onPaste, false)
-  },
+  }
+  if (reset) {
+    link.value = null
+  }
+}
 
-  beforeUnmount() {
-    window.removeEventListener('paste', this.onPaste, false)
-  },
+const runAddComment = (
+  textVal,
+  attachmentsVal,
+  checklistVal,
+  taskStatusId,
+  revisionVal,
+  linkVal,
+  force = false
+) => {
+  if (!isValidForm.value) {
+    return
+  }
+  const taskStatus = taskStatusMap.value.get(task_status_id.value)
+  if (
+    taskStatus.is_feedback_request &&
+    props.previewForms.length === 0 &&
+    !force
+  ) {
+    modals.confirmFeedbackPublish = true
+    return
+  }
 
-  computed: {
-    ...mapGetters([
-      'departmentMap',
-      'isCurrentUserArtist',
-      'isCurrentUserClient',
-      'productionDepartmentIds',
-      'productionMap',
-      'taskStatusForCurrentUser',
-      'taskStatusMap',
-      'taskTypeMap',
-      'uploadProgress'
-    ]),
-
-    attachments: {
-      get() {
-        return this.draftComment.attachments
-      },
-      set(value) {
-        this.draftComment.attachments = value
-      }
-    },
-
-    checklist: {
-      get() {
-        return this.draftComment.checklist
-      },
-      set(value) {
-        this.draftComment.checklist = value
-      }
-    },
-
-    link: {
-      get() {
-        return this.draftComment.link
-      },
-      set(value) {
-        this.draftComment.link = value
-      }
-    },
-
-    mode: {
-      get() {
-        return this.draftComment.mode
-      },
-      set(value) {
-        this.draftComment.mode = value
-      }
-    },
-
-    nextRevision: {
-      get() {
-        return this.draftComment.nextRevision
-      },
-      set(value) {
-        this.draftComment.nextRevision = value
-      }
-    },
-
-    showCommentArea: {
-      get() {
-        return this.draftComment.showCommentArea
-      },
-      set(value) {
-        this.draftComment.showCommentArea = value
-      }
-    },
-
-    showLinkField: {
-      get() {
-        return this.draftComment.showLinkField
-      },
-      set(value) {
-        this.draftComment.showLinkField = value
-      }
-    },
-
-    task_status_id: {
-      get() {
-        return this.draftComment.task_status_id
-      },
-      set(value) {
-        this.draftComment.task_status_id = value
-      }
-    },
-
-    text: {
-      get() {
-        return this.draftComment.text
-      },
-      set(value) {
-        this.draftComment.text = value
-        drafts.setTaskDraft(this.task.id, this.text)
-      }
-    },
-
-    attachmentModal() {
-      return this.$refs['add-attachment-modal']
-    },
-
-    isConcept() {
-      return this.$route.path.includes('concept')
-    },
-
-    isValidForm() {
-      return Boolean(
-        this.mode === 'status' ||
-        (this.mode === 'publish' &&
-          this.previewForms.length &&
-          (this.nextRevision === undefined ||
-            this.nextRevision > this.revision) &&
-          (!this.showLinkField ||
-            !this.link ||
-            this.$refs['input-link']?.checkValidity()))
-      )
-    }
-  },
+  if (isFrameAddition.value) {
+    textVal = '@frame \n\n' + textVal
+    textVal = replaceTimeWithTimecode(
+      textVal,
+      props.revision,
+      props.frame + 1,
+      props.fps
+    )
+  }
 
-  methods: {
-    shortenText: strings.shortenText,
+  store.commit('CLEAR_UPLOAD_PROGRESS')
+  if (mode.value === 'publish') {
+    if (!showCommentArea.value) textVal = ''
+    attachmentsVal = []
+    checklistVal = []
+  } else {
+    checklistVal = checklistVal.filter(item => item.text.length)
+  }
 
-    toggleLinkField(reset = false) {
-      this.showLinkField = !this.showLinkField
-      if (this.showLinkField) {
-        this.$nextTick(() => {
-          this.$refs['input-link']?.focus()
-        })
-      }
-      if (reset) {
-        this.link = null
-      }
-    },
-
-    runAddComment(
-      text,
-      attachments,
-      checklist,
-      taskStatusId,
-      revision,
-      link,
-      force = false
-    ) {
-      if (!this.isValidForm) {
-        return
-      }
-      const taskStatus = this.taskStatusMap.get(this.task_status_id)
-      if (
-        taskStatus.is_feedback_request &&
-        this.previewForms.length === 0 &&
-        !force
-      ) {
-        this.modals.confirmFeedbackPublish = true
-        return
-      }
+  revisionVal = Number(revisionVal)
+  if (isNaN(revisionVal) || revisionVal < 1) {
+    revisionVal = undefined
+  }
 
-      if (this.isFrameAddition) {
-        text = '@frame \n\n' + text
-        text = replaceTimeWithTimecode(
-          text,
-          this.revision,
-          this.frame + 1,
-          this.fps
-        )
-      }
+  if (!showLinkField.value) {
+    linkVal = null
+  }
 
-      this.$store.commit('CLEAR_UPLOAD_PROGRESS')
-      if (this.mode === 'publish') {
-        if (!this.showCommentArea) text = ''
-        attachments = []
-        checklist = []
-      } else {
-        checklist = checklist.filter(item => item.text.length)
-      }
+  emit(
+    'add-comment',
+    textVal,
+    attachmentsVal,
+    checklistVal,
+    taskStatusId,
+    revisionVal,
+    linkVal
+  )
+}
 
-      revision = Number(revision)
-      if (isNaN(revision) || revision < 1) {
-        revision = undefined
-      }
+const reset = () => {
+  text.value = ''
+  link.value = null
+  attachments.value = []
+  checklist.value = []
+  nextRevision.value = undefined
+}
 
-      if (!this.showLinkField) {
-        link = null
-      }
+const focus = () => {
+  const textarea = commentTextareaRef.value
+  if (textarea) {
+    textarea.focus()
+    const caretPosition = textarea.value.length
+    textarea.setSelectionRange(caretPosition, caretPosition)
+  }
+}
 
-      this.$emit(
-        'add-comment',
-        text,
-        attachments,
-        checklist,
-        taskStatusId,
-        revision,
-        link
-      )
-    },
-
-    reset() {
-      this.text = ''
-      this.link = null
-      this.attachments = []
-      this.checklist = []
-      this.nextRevision = undefined
-    },
-
-    focus() {
-      const textarea = this.$refs['comment-textarea']
-      if (textarea) {
-        textarea.focus()
-        const caretPosition = textarea.value.length
-        textarea.setSelectionRange(caretPosition, caretPosition)
-      }
-    },
+const getRevision = form => {
+  if (!form) {
+    return undefined
+  }
+  const file = form.get('file')
+  const rgxMatches = file.name.matchAll(REVISION_NUMBER_REGEX)
+  const revision = Array.from(rgxMatches).pop()?.[1]
+  return revision
+}
 
-    getRevision(form) {
-      if (!form) {
-        return undefined
-      }
-      const file = form.get('file')
-      const rgxMatches = file.name.matchAll(REVISION_NUMBER_REGEX)
-      const revision = Array.from(rgxMatches).pop()?.[1]
-      return revision
-    },
-
-    onAddChecklistItem(item) {
-      delete item.index
-      this.checklist.push(item)
-    },
-
-    onInsertChecklistItem(item) {
-      this.checklist.splice(item.index, 0, item)
-      for (let i = 0; i < this.checklist.length; i++) {
-        this.checklist[i].index = i
-      }
-    },
-
-    resetStatus() {
-      const taskStatus = this.taskStatusMap.get(this.task.task_status_id)
-      if (
-        (!this.isCurrentUserArtist || taskStatus.is_artist_allowed) &&
-        (!this.isCurrentUserClient || taskStatus.is_client_allowed)
-      ) {
-        this.task_status_id = this.task.task_status_id
-      } else {
-        this.task_status_id = this.taskStatusForCurrentUser[0]?.id
-      }
-    },
-
-    onDragover() {
-      this.isDragging = true
-    },
-
-    onDragleave() {
-      this.isDragging = false
-    },
-
-    onDrop(event) {
-      if (event.target.id === 'drop-mask') return
-      if (
-        event.target.parentElement?.className?.indexOf('add-attachment-box') >=
-        0
-      )
-        return
-      if (
-        event.target.parentElement?.className?.indexOf(
-          'add-attachment-buttons'
-        ) >= 0
-      )
-        return
-      if (
-        event.target.parentElement?.className?.indexOf(
-          'attachment-modal-box'
-        ) >= 0
-      )
-        return
-
-      const forms = []
-      for (let i = 0; i < event.dataTransfer.files.length; i++) {
-        const form = new FormData()
-        form.append('file', event.dataTransfer.files[i])
-        forms.push(form)
-      }
-      if (this.mode === 'publish') {
-        this.$emit('file-drop', forms)
-      } else {
-        this.addCommentAttachment(forms)
-      }
-      this.isDragging = false
-    },
-
-    /*
-     * When a file is pasted in the comment area, it adds it to the attachments.
-     */
-    onPaste(event) {
-      if (this.modals.addCommentAttachment) return
-      if (this.$refs['comment-textarea'] !== document.activeElement) return
-      const files = event.clipboardData.files
-      if (files.length > 0) {
-        const form = new FormData()
-        form.append('file', files[0])
-        this.addCommentAttachment([form])
-      }
-    },
-
-    onAddCommentAttachmentClicked() {
-      this.modals.addCommentAttachment = true
-    },
-
-    addCommentAttachment(forms) {
-      this.onCloseCommentAttachment()
-      this.attachments = this.attachments.concat(forms)
-    },
-
-    onCloseCommentAttachment() {
-      this.modals.addCommentAttachment = false
-    },
-
-    removeAttachment(attach) {
-      this.attachments = this.attachments.filter(a => a !== attach)
-    },
-
-    addChecklistEntry(index) {
-      if (index === -1 || index === this.checklist.length - 1) {
-        this.checklist.push({
-          text: '',
-          checked: false
-        })
-      }
-    },
-
-    removeTask(entry) {
-      this.checklist = remove(this.checklist, entry)
-    },
-
-    async setValue(comment) {
-      this.checklist = JSON.parse(JSON.stringify(comment.checklist))
-      this.text = comment.text
-
-      // duplicate attachment files
-      this.attachments = (
-        await Promise.all(
-          comment.attachment_files.map(async attachment => {
-            const fileUrl = getDownloadAttachmentPath(attachment)
-            const response = await fetch(fileUrl)
-            if (!response.ok) return
-            const fileBlob = await response.blob()
-            const formData = new FormData()
-            formData.append('file', fileBlob, attachment.name)
-            return formData
-          })
-        )
-      ).filter(Boolean)
-    },
-
-    atOptionsFilter(name, chunk, at, v) {
-      // filter the list by the given at symbol
-      const option_at = v?.isTaskType ? '#' : '@'
-      // @ for team, # for task type
-      if (at !== option_at) return false
-      // match at lower-case
-      return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
-    },
-
-    onAtTextChanged(input) {
-      if (input.includes('@frame')) {
-        this.text = replaceTimeWithTimecode(
-          input,
-          this.revision,
-          this.frame + 1,
-          this.fps
-        )
-      }
-    },
+const onAddChecklistItem = item => {
+  delete item.index
+  checklist.value.push(item)
+}
 
-    setAnnotationSnapshots(files) {
-      this.attachmentModal.addFiles(files)
-    },
+const onInsertChecklistItem = item => {
+  checklist.value.splice(item.index, 0, item)
+  for (let i = 0; i < checklist.value.length; i++) {
+    checklist.value[i].index = i
+  }
+}
 
-    showAnnotationLoading() {
-      this.attachmentModal.showAnnotationLoading()
-    },
+const resetStatus = () => {
+  const taskStatus = taskStatusMap.value.get(props.task.task_status_id)
+  if (
+    (!isCurrentUserArtist.value || taskStatus.is_artist_allowed) &&
+    (!isCurrentUserClient.value || taskStatus.is_client_allowed)
+  ) {
+    task_status_id.value = props.task.task_status_id
+  } else {
+    task_status_id.value = taskStatusForCurrentUser.value[0]?.id
+  }
+}
 
-    hideAnnotationLoading() {
-      this.attachmentModal.hideAnnotationLoading()
-    },
+const onDragover = () => {
+  isDragging.value = true
+}
 
-    onSelectEmoji(emoji) {
-      const textarea = this.$refs['comment-textarea']
-      this.text = strings.insertInTextArea(textarea, emoji.i)
-    }
-  },
+const onDragleave = () => {
+  isDragging.value = false
+}
 
-  watch: {
-    task: {
-      immediate: true,
-      handler() {
-        this.resetStatus()
-        const draft = drafts.getTaskDraft(this.task.id)
-        if (draft) {
-          this.text = draft
-        }
-      }
-    },
-
-    mode() {
-      if (this.mode === 'publish') {
-        this.checklist = []
-        this.attachments = []
-        if (this.text && this.text.length > 0) {
-          this.showCommentArea = true
-        }
-      } else {
-        this.$emit('clear-files')
-      }
-    },
+const onDrop = event => {
+  if (event.target.id === 'drop-mask') return
+  if (event.target.parentElement?.className?.indexOf('add-attachment-box') >= 0)
+    return
+  if (
+    event.target.parentElement?.className?.indexOf('add-attachment-buttons') >=
+    0
+  )
+    return
+  if (
+    event.target.parentElement?.className?.indexOf('attachment-modal-box') >= 0
+  )
+    return
+
+  const forms = []
+  for (let i = 0; i < event.dataTransfer.files.length; i++) {
+    const form = new FormData()
+    form.append('file', event.dataTransfer.files[i])
+    forms.push(form)
+  }
+  if (mode.value === 'publish') {
+    emit('file-drop', forms)
+  } else {
+    addCommentAttachment(forms)
+  }
+  isDragging.value = false
+}
 
-    isFrameAddition(value) {
-      if (this.isCurrentUserClient) {
-        preferences.setPreference('comments:add-frame-when-posting', value)
-      }
-    },
-
-    previewForms: {
-      deep: true,
-      immediate: true,
-      handler() {
-        const form = this.previewForms?.findLast(
-          form => this.getRevision(form) > 0
-        )
-        this.nextRevision = this.getRevision(form)
-      }
-    },
-
-    taskTypes: {
-      deep: true,
-      immediate: true,
-      handler(values) {
-        const taskTypeOptions = values.map(taskType => {
-          return {
-            isTaskType: true,
-            full_name: taskType.name,
-            color: taskType.color,
-            id: taskType.id,
-            url: taskType.url
-          }
-        })
-        taskTypeOptions.push({
-          isTaskType: true,
-          color: '#000',
-          full_name: 'All'
-        })
-        this.membersForAts['#'] = taskTypeOptions
-      }
-    },
-
-    team: {
-      deep: true,
-      immediate: true,
-      handler() {
-        let teamOptions
-        if (this.isCurrentUserClient) {
-          teamOptions = this.team.filter(person =>
-            ['admin', 'manager', 'client'].includes(person.role)
-          )
-        } else {
-          teamOptions = [...this.team]
-        }
-        if (!this.isCurrentUserClient) {
-          teamOptions = teamOptions.concat(
-            this.productionDepartmentIds.map(departmentId => {
-              const department = this.departmentMap.get(departmentId)
-              return {
-                isDepartment: true,
-                full_name: department.name,
-                color: department.color,
-                id: departmentId
-              }
-            })
-          )
-        }
-        teamOptions.push({
-          isTime: true,
-          at: '@',
-          full_name: 'frame'
+/*
+ * When a file is pasted in the comment area, it adds it to the attachments.
+ */
+const onPaste = event => {
+  if (modals.addCommentAttachment) return
+  if (commentTextareaRef.value !== document.activeElement) return
+  const files = event.clipboardData.files
+  if (files.length > 0) {
+    const form = new FormData()
+    form.append('file', files[0])
+    addCommentAttachment([form])
+  }
+}
+
+const onAddCommentAttachmentClicked = () => {
+  modals.addCommentAttachment = true
+}
+
+const addCommentAttachment = forms => {
+  onCloseCommentAttachment()
+  attachments.value = attachments.value.concat(forms)
+}
+
+const onCloseCommentAttachment = () => {
+  modals.addCommentAttachment = false
+}
+
+const removeAttachment = attach => {
+  attachments.value = attachments.value.filter(a => a !== attach)
+}
+
+const addChecklistEntry = index => {
+  if (index === -1 || index === checklist.value.length - 1) {
+    checklist.value.push({
+      text: '',
+      checked: false
+    })
+  }
+}
+
+const removeTask = entry => {
+  checklist.value = remove(checklist.value, entry)
+}
+
+const setValue = async comment => {
+  checklist.value = JSON.parse(JSON.stringify(comment.checklist))
+  text.value = comment.text
+
+  // duplicate attachment files
+  attachments.value = (
+    await Promise.all(
+      comment.attachment_files.map(async attachment => {
+        const fileUrl = getDownloadAttachmentPath(attachment)
+        const response = await fetch(fileUrl)
+        if (!response.ok) return
+        const fileBlob = await response.blob()
+        const formData = new FormData()
+        formData.append('file', fileBlob, attachment.name)
+        return formData
+      })
+    )
+  ).filter(Boolean)
+}
+
+const onAtTextChanged = input => {
+  if (input.includes('@frame')) {
+    text.value = replaceTimeWithTimecode(
+      input,
+      props.revision,
+      props.frame + 1,
+      props.fps
+    )
+  }
+}
+
+const setAnnotationSnapshots = files => {
+  getAttachmentModal().addFiles(files)
+}
+
+const showAnnotationLoading = () => {
+  getAttachmentModal().showAnnotationLoading()
+}
+
+const hideAnnotationLoading = () => {
+  getAttachmentModal().hideAnnotationLoading()
+}
+
+const onSelectEmoji = emoji => {
+  const textarea = commentTextareaRef.value
+  text.value = strings.insertInTextArea(textarea, emoji.i)
+}
+
+onBeforeMount(() => {
+  if (!attachments.value) {
+    attachments.value = []
+  }
+  if (!checklist.value) {
+    checklist.value = []
+  }
+})
+
+onMounted(() => {
+  if (!isCurrentUserClient.value) {
+    isFrameAddition.value = false
+  } else {
+    isFrameAddition.value = preferences.getBoolPreference(
+      'comments:add-frame-when-posting',
+      false
+    )
+  }
+  const production = productionMap.value.get(props.task.project_id)
+  mode.value =
+    production?.is_publish_default_for_artists && isCurrentUserArtist.value
+      ? 'publish'
+      : 'status'
+
+  nextTick(() => {
+    ;[
+      'drag',
+      'dragstart',
+      'dragend',
+      'dragover',
+      'dragenter',
+      'dragleave',
+      'drop'
+    ].forEach(evt => {
+      if (wrapperRef.value) {
+        wrapperRef.value.addEventListener(evt, e => {
+          e.preventDefault()
+          e.stopPropagation()
         })
-        this.membersForAts['@'] = teamOptions
       }
+    })
+  })
+  window.addEventListener('paste', onPaste, false)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('paste', onPaste, false)
+})
+
+watch(
+  () => props.task,
+  () => {
+    resetStatus()
+    const draft = drafts.getTaskDraft(props.task.id)
+    if (draft) {
+      text.value = draft
     }
+  },
+  { immediate: true }
+)
+
+watch(mode, () => {
+  if (mode.value === 'publish') {
+    checklist.value = []
+    attachments.value = []
+    if (text.value && text.value.length > 0) {
+      showCommentArea.value = true
+    }
+  } else {
+    emit('clear-files')
   }
-}
+})
+
+watch(isFrameAddition, value => {
+  if (isCurrentUserClient.value) {
+    preferences.setPreference('comments:add-frame-when-posting', value)
+  }
+})
+
+watch(
+  () => props.previewForms,
+  () => {
+    const form = props.previewForms?.findLast(form => getRevision(form) > 0)
+    nextRevision.value = getRevision(form)
+  },
+  { deep: true, immediate: true }
+)
+
+defineExpose({
+  reset,
+  focus,
+  resetStatus,
+  setValue,
+  setAnnotationSnapshots,
+  showAnnotationLoading,
+  hideAnnotationLoading
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/AssignationItem.vue b/src/components/widgets/AssignationItem.vue
index 44f92292c4..dda3cd32d0 100644
--- a/src/components/widgets/AssignationItem.vue
+++ b/src/components/widgets/AssignationItem.vue
@@ -11,40 +11,30 @@
   </div>
 </template>
 
-<script>
-import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
-
-export default {
-  name: 'assignation-item',
+<script setup>
+import { computed } from 'vue'
 
-  components: {
-    PeopleAvatar
-  },
-
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    search: {
-      type: String
-    }
-  },
+import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
-  computed: {
-    label() {
-      const text = this.item.name.trim()
-      const search = this.search.trim()
-      return !search
-        ? text
-        : text.replace(RegExp(this.regExpEscape(search), 'gi'), '<b>$&</b>')
-    }
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
   },
-
-  methods: {
-    regExpEscape(string) {
-      return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
-    }
+  search: {
+    type: String
   }
+})
+
+const regExpEscape = string => {
+  return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
 }
+
+const label = computed(() => {
+  const text = props.item.name.trim()
+  const search = props.search.trim()
+  return !search
+    ? text
+    : text.replace(RegExp(regExpEscape(search), 'gi'), '<b>$&</b>')
+})
 </script>
diff --git a/src/components/widgets/BooleanField.vue b/src/components/widgets/BooleanField.vue
index 3c5bfaffa9..e1dede18d3 100644
--- a/src/components/widgets/BooleanField.vue
+++ b/src/components/widgets/BooleanField.vue
@@ -31,73 +31,58 @@
   </span>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from 'vue'
 import { CheckIcon, XIcon } from 'lucide-vue-next'
 
-export default {
-  name: 'boolean-field',
-
-  components: {
-    CheckIcon,
-    XIcon
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
-
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    modelValue: {
-      default: 'false',
-      type: String
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    isField: {
-      default: false,
-      type: Boolean
-    },
-    isSmall: {
-      default: false,
-      type: Boolean
-    }
+  modelValue: {
+    default: 'false',
+    type: String
+  },
+  disabled: {
+    default: false,
+    type: Boolean
   },
+  isField: {
+    default: false,
+    type: Boolean
+  },
+  isSmall: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  emits: ['click', 'update:modelValue'],
+const emit = defineEmits(['click', 'update:modelValue'])
 
-  data() {
-    return {
-      localValue: false
-    }
-  },
+const localValue = ref(false)
 
-  methods: {
-    emitValue() {
-      this.$emit('update:modelValue', this.localValue ? 'true' : 'false')
-    },
+const emitValue = () => {
+  emit('update:modelValue', localValue.value ? 'true' : 'false')
+}
+
+const onClick = () => {
+  localValue.value = !localValue.value
+  emit('click', localValue.value ? 'true' : 'false')
+  emitValue()
+}
 
-    onClick() {
-      this.localValue = !this.localValue
-      this.$emit('click', this.localValue ? 'true' : 'false')
-      this.emitValue()
-    }
+watch(
+  () => props.modelValue,
+  () => {
+    localValue.value = props.modelValue === 'true'
   },
+  { immediate: true }
+)
 
-  watch: {
-    modelValue: {
-      immediate: true,
-      handler() {
-        this.localValue = this.modelValue === 'true'
-      }
-    },
-
-    localValue() {
-      // this.emitValue()
-    }
-  }
-}
+watch(localValue, () => {
+  // this.emitValue()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/BooleanRep.vue b/src/components/widgets/BooleanRep.vue
index e984330db1..a1031c90d4 100644
--- a/src/components/widgets/BooleanRep.vue
+++ b/src/components/widgets/BooleanRep.vue
@@ -15,24 +15,15 @@
   />
 </template>
 
-<script>
+<script setup>
 import { CheckIcon, XIcon } from 'lucide-vue-next'
 
-export default {
-  name: 'boolean-rep',
-
-  components: {
-    CheckIcon,
-    XIcon
-  },
-
-  props: {
-    value: {
-      default: false,
-      type: Boolean
-    }
+defineProps({
+  value: {
+    default: false,
+    type: Boolean
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ButtonHrefLink.vue b/src/components/widgets/ButtonHrefLink.vue
index 16aa2079ec..989d4c4ba3 100644
--- a/src/components/widgets/ButtonHrefLink.vue
+++ b/src/components/widgets/ButtonHrefLink.vue
@@ -15,43 +15,31 @@
   </a>
 </template>
 
-<script>
+<script setup>
 import { DownloadIcon, ListIcon, PlusIcon, UploadIcon } from 'lucide-vue-next'
 
 import KitsuIcon from '@/components/widgets/KitsuIcon.vue'
 
-export default {
-  name: 'button-href-link',
-
-  components: {
-    DownloadIcon,
-    KitsuIcon,
-    ListIcon,
-    PlusIcon,
-    UploadIcon
+defineProps({
+  text: {
+    type: String
   },
-
-  props: {
-    text: {
-      type: String
-    },
-    path: {
-      required: true,
-      type: String
-    },
-    icon: {
-      default: '',
-      type: String
-    },
-    title: {
-      type: String
-    },
-    target: {
-      default: '_self',
-      type: String
-    }
+  path: {
+    required: true,
+    type: String
+  },
+  icon: {
+    default: '',
+    type: String
+  },
+  title: {
+    type: String
+  },
+  target: {
+    default: '_self',
+    type: String
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ButtonLink.vue b/src/components/widgets/ButtonLink.vue
index 436cb300e2..c7dce2e2a0 100644
--- a/src/components/widgets/ButtonLink.vue
+++ b/src/components/widgets/ButtonLink.vue
@@ -20,7 +20,7 @@
   </router-link>
 </template>
 
-<script>
+<script setup>
 import {
   DownloadIcon,
   EditIcon,
@@ -30,36 +30,23 @@ import {
   UploadIcon
 } from 'lucide-vue-next'
 
-export default {
-  name: 'button-link',
-
-  components: {
-    DownloadIcon,
-    EditIcon,
-    PlusIcon,
-    RotateCcwIcon,
-    TrashIcon,
-    UploadIcon
+defineProps({
+  text: {
+    type: String
   },
-
-  props: {
-    text: {
-      type: String
-    },
-    title: {
-      type: String
-    },
-    path: {
-      required: true,
-      type: [String, Object]
-    },
-    icon: {
-      type: String
-    },
-    isResponsive: {
-      default: false,
-      type: Boolean
-    }
+  title: {
+    type: String
+  },
+  path: {
+    required: true,
+    type: [String, Object]
+  },
+  icon: {
+    type: String
+  },
+  isResponsive: {
+    default: false,
+    type: Boolean
   }
-}
+})
 </script>
diff --git a/src/components/widgets/ButtonSimple.vue b/src/components/widgets/ButtonSimple.vue
index ec9d671c90..8606f3c721 100644
--- a/src/components/widgets/ButtonSimple.vue
+++ b/src/components/widgets/ButtonSimple.vue
@@ -89,7 +89,7 @@
   </button>
 </template>
 
-<script>
+<script setup>
 import {
   BellIcon,
   CalendarIcon,
@@ -135,108 +135,60 @@ import {
 
 import KitsuIcon from '@/components/widgets/KitsuIcon.vue'
 
-export default {
-  name: 'button-simple',
-
-  components: {
-    BellIcon,
-    CalendarIcon,
-    CalendarPlusIcon,
-    ChevronDownIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    ClockIcon,
-    CodepenIcon,
-    CornerLeftDownIcon,
-    CornerRightDownIcon,
-    DownloadIcon,
-    EditIcon,
-    Edit2Icon,
-    FileDigitIcon,
-    FileDownIcon,
-    FilmIcon,
-    GlobeIcon,
-    GridIcon,
-    ImageIcon,
-    KeyIcon,
-    KitsuIcon,
-    LayersIcon,
-    LinkIcon,
-    ListIcon,
-    MaximizeIcon,
-    MessageSquareIcon,
-    MinusIcon,
-    MusicIcon,
-    PaperclipIcon,
-    PauseIcon,
-    PlusIcon,
-    RotateCcwIcon,
-    SaveIcon,
-    SendIcon,
-    SkipBackIcon,
-    SkipForwardIcon,
-    SmileIcon,
-    SquareIcon,
-    TriangleIcon,
-    XIcon,
-    ZoomInIcon
+defineProps({
+  active: {
+    default: false,
+    type: Boolean
   },
-
-  props: {
-    active: {
-      default: false,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    icon: {
-      default: '',
-      type: String
-    },
-    isBig: {
-      default: false,
-      type: Boolean
-    },
-    isMedium: {
-      default: false,
-      type: Boolean
-    },
-    isOn: {
-      default: false,
-      type: Boolean
-    },
-    isLoading: {
-      default: false,
-      type: Boolean
-    },
-    isPrimary: {
-      default: false,
-      type: Boolean
-    },
-    isResponsive: {
-      default: false,
-      type: Boolean
-    },
-    isThin: {
-      default: false,
-      type: Boolean
-    },
-    text: {
-      type: String
-    },
-    title: {
-      type: String
-    },
-    type: {
-      type: String,
-      validator: value => ['submit', 'button', 'reset'].includes(value)
-    }
+  disabled: {
+    default: false,
+    type: Boolean
+  },
+  icon: {
+    default: '',
+    type: String
+  },
+  isBig: {
+    default: false,
+    type: Boolean
+  },
+  isMedium: {
+    default: false,
+    type: Boolean
+  },
+  isOn: {
+    default: false,
+    type: Boolean
+  },
+  isLoading: {
+    default: false,
+    type: Boolean
   },
+  isPrimary: {
+    default: false,
+    type: Boolean
+  },
+  isResponsive: {
+    default: false,
+    type: Boolean
+  },
+  isThin: {
+    default: false,
+    type: Boolean
+  },
+  text: {
+    type: String
+  },
+  title: {
+    type: String
+  },
+  type: {
+    type: String,
+    validator: value => ['submit', 'button', 'reset'].includes(value)
+  }
+})
 
-  emits: ['click']
-}
+defineEmits(['click'])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/Checkbox.vue b/src/components/widgets/Checkbox.vue
index 001297c57b..beab9fa7b3 100644
--- a/src/components/widgets/Checkbox.vue
+++ b/src/components/widgets/Checkbox.vue
@@ -14,48 +14,40 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'checkbox',
+<script setup>
+import { ref, getCurrentInstance, onMounted } from 'vue'
 
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      default: '',
-      type: String,
-      required: true
-    },
-    modelValue: {
-      default: false,
-      type: Boolean
-    },
-    toggle: {
-      type: Boolean,
-      default: false
-    }
+defineProps({
+  disabled: {
+    default: false,
+    type: Boolean
   },
-
-  data() {
-    return {
-      id: null
-    }
+  label: {
+    default: '',
+    type: String,
+    required: true
   },
-
-  mounted() {
-    this.id = this.$.uid
+  modelValue: {
+    default: false,
+    type: Boolean
   },
+  toggle: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  emits: ['change', 'update:modelValue'],
+const emit = defineEmits(['change', 'update:modelValue'])
 
-  methods: {
-    onChange(event) {
-      this.$emit('update:modelValue', event.target.checked)
-      this.$emit('change', event.target.checked)
-    }
-  }
+const id = ref(null)
+
+onMounted(() => {
+  id.value = getCurrentInstance().uid
+})
+
+const onChange = event => {
+  emit('update:modelValue', event.target.checked)
+  emit('change', event.target.checked)
 }
 </script>
 
diff --git a/src/components/widgets/Checklist.vue b/src/components/widgets/Checklist.vue
index 49e73f20b6..542387cbd7 100644
--- a/src/components/widgets/Checklist.vue
+++ b/src/components/widgets/Checklist.vue
@@ -30,7 +30,7 @@
       </span>
       <textarea
         class="checklist-text"
-        :ref="`checklist-entry-${index}`"
+        :ref="el => setChecklistEntryRef(el, index)"
         rows="1"
         :placeholder="$t('comments.task_placeholder')"
         @keydown.enter.prevent="addChecklistEntry(index)"
@@ -45,128 +45,121 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick } from 'vue'
 import { CheckSquareIcon, ClockIcon, SquareIcon } from 'lucide-vue-next'
 
 import { formatFrame } from '@/lib/video'
 
-export default {
-  name: 'checklist',
-
-  components: {
-    CheckSquareIcon,
-    ClockIcon,
-    SquareIcon
+const props = defineProps({
+  checklist: {
+    default: () => [],
+    type: Array
   },
-
-  props: {
-    checklist: {
-      default: () => [],
-      type: Array
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    frame: {
-      default: -1,
-      type: Number
-    },
-    isEditable: {
-      type: Boolean,
-      default: true
-    },
-    isMoviePreview: {
-      default: false,
-      type: Boolean
-    },
-    revision: {
-      default: -1,
-      type: Number
-    }
+  disabled: {
+    default: false,
+    type: Boolean
   },
-
-  emits: [
-    'add-item',
-    'emit-change',
-    'insert-item',
-    'remove-task',
-    'time-code-clicked'
-  ],
-
-  computed: {
-    filteredChecklist() {
-      return this.checklist.filter(Boolean) // remove empty entries
-    }
+  frame: {
+    default: -1,
+    type: Number
+  },
+  isEditable: {
+    type: Boolean,
+    default: true
   },
+  isMoviePreview: {
+    default: false,
+    type: Boolean
+  },
+  revision: {
+    default: -1,
+    type: Number
+  }
+})
 
-  methods: {
-    addChecklistEntry(index) {
-      if (index === -1 || index === this.checklist.length - 1) {
-        this.$emit('add-item', {
-          index,
-          text: '',
-          frame: -1,
-          revision: -1,
-          checked: false
-        })
-      } else {
-        this.$emit('insert-item', {
-          index: index + 1,
-          text: '',
-          frame: -1,
-          revision: -1,
-          checked: false
-        })
-      }
+const emit = defineEmits([
+  'add-item',
+  'emit-change',
+  'insert-item',
+  'remove-task',
+  'time-code-clicked'
+])
 
-      this.$nextTick(() => {
-        this.focusNext(index)
-      })
-    },
+const checklistEntryRefs = {}
 
-    removeChecklistEntry(index) {
-      const entry = this.checklist[index]
-      if (entry.text.length === 0) {
-        this.$emit('remove-task', entry)
-        this.focusPrevious(index)
-      }
-    },
-
-    focusPrevious(index) {
-      if (this.checklist.length > 0) {
-        if (index === 0) index = this.checklist.length
-        index--
-        const entryRef = `checklist-entry-${index}`
-        this.$refs[entryRef][0].focus()
-      }
-    },
+const setChecklistEntryRef = (el, index) => {
+  if (el) {
+    checklistEntryRefs[`checklist-entry-${index}`] = el
+  }
+}
 
-    formatFrame,
+const filteredChecklist = computed(() => {
+  return props.checklist.filter(Boolean)
+})
+
+const addChecklistEntry = index => {
+  if (index === -1 || index === props.checklist.length - 1) {
+    emit('add-item', {
+      index,
+      text: '',
+      frame: -1,
+      revision: -1,
+      checked: false
+    })
+  } else {
+    emit('insert-item', {
+      index: index + 1,
+      text: '',
+      frame: -1,
+      revision: -1,
+      checked: false
+    })
+  }
 
-    focusNext(index) {
-      if (this.checklist.length > 0) {
-        if (index === this.checklist.length - 1) index = -1
-        index++
-        const entryRef = `checklist-entry-${index}`
-        this.$refs[entryRef][0].focus()
-      }
-    },
-
-    setFrame(item) {
-      item.checked = !item.checked
-      item.revision = this.revision
-      item.frame = this.frame
-      item.checked = !item.checked
-      this.$emit('emit-change')
-    },
-
-    toggleEntryChecked(entry) {
-      if (this.isEditable) {
-        entry.checked = !entry.checked
-        this.$emit('emit-change')
-      }
-    }
+  nextTick(() => {
+    focusNext(index)
+  })
+}
+
+const removeChecklistEntry = index => {
+  const entry = props.checklist[index]
+  if (entry.text.length === 0) {
+    emit('remove-task', entry)
+    focusPrevious(index)
+  }
+}
+
+const focusPrevious = index => {
+  if (props.checklist.length > 0) {
+    if (index === 0) index = props.checklist.length
+    index--
+    const entryRef = `checklist-entry-${index}`
+    checklistEntryRefs[entryRef]?.focus()
+  }
+}
+
+const focusNext = index => {
+  if (props.checklist.length > 0) {
+    if (index === props.checklist.length - 1) index = -1
+    index++
+    const entryRef = `checklist-entry-${index}`
+    checklistEntryRefs[entryRef]?.focus()
+  }
+}
+
+const setFrame = item => {
+  item.checked = !item.checked
+  item.revision = props.revision
+  item.frame = props.frame
+  item.checked = !item.checked
+  emit('emit-change')
+}
+
+const toggleEntryChecked = entry => {
+  if (props.isEditable) {
+    entry.checked = !entry.checked
+    emit('emit-change')
   }
 }
 </script>
diff --git a/src/components/widgets/ColorField.vue b/src/components/widgets/ColorField.vue
index 3e0d3768b2..f3217a29c5 100644
--- a/src/components/widgets/ColorField.vue
+++ b/src/components/widgets/ColorField.vue
@@ -18,64 +18,58 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'color-field',
-
-  props: {
-    colors: {
-      default: () => [
-        '#CCCCCC',
-        '#999999',
-        '#78909C',
-        '#009688',
-        '#33B378',
-        '#7CB342',
-        '#43A047',
-        '#8D6E63',
-        '#AFB42B',
-        '#9CCC65',
-        '#DCE775',
-        '#FFF176',
-        '#FFEB3B',
-        '#F9A825',
-        '#F57C00',
-        '#ff5252',
-        '#F06292',
-        '#AB47BC',
-        '#5C6BC0',
-        '#1976D2',
-        '#039BE5',
-        '#42A5F5',
-        '#64B5F6',
-        '#26C6DA'
-      ]
-    },
-    column: {
-      default: 8,
-      type: Number
-    },
-    hexaOpacity: {
-      default: 'FF',
-      type: String
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    modelValue: {
-      default: '#999999',
-      type: String
-    }
+<script setup>
+const props = defineProps({
+  colors: {
+    default: () => [
+      '#CCCCCC',
+      '#999999',
+      '#78909C',
+      '#009688',
+      '#33B378',
+      '#7CB342',
+      '#43A047',
+      '#8D6E63',
+      '#AFB42B',
+      '#9CCC65',
+      '#DCE775',
+      '#FFF176',
+      '#FFEB3B',
+      '#F9A825',
+      '#F57C00',
+      '#ff5252',
+      '#F06292',
+      '#AB47BC',
+      '#5C6BC0',
+      '#1976D2',
+      '#039BE5',
+      '#42A5F5',
+      '#64B5F6',
+      '#26C6DA'
+    ]
+  },
+  column: {
+    default: 8,
+    type: Number
+  },
+  hexaOpacity: {
+    default: 'FF',
+    type: String
   },
+  label: {
+    default: '',
+    type: String
+  },
+  modelValue: {
+    default: '#999999',
+    type: String
+  }
+})
 
-  emits: ['update:modelValue'],
+const emit = defineEmits(['update:modelValue'])
 
-  methods: {
-    colorChanged(color, index) {
-      this.$emit('update:modelValue', color)
-    }
-  }
+const colorChanged = (color, index) => {
+  emit('update:modelValue', color)
 }
 </script>
 
diff --git a/src/components/widgets/ColorPicker.vue b/src/components/widgets/ColorPicker.vue
index bba81dc71b..e586210048 100644
--- a/src/components/widgets/ColorPicker.vue
+++ b/src/components/widgets/ColorPicker.vue
@@ -27,46 +27,38 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'color-picker',
+<script setup>
+import { ref } from 'vue'
 
-  props: {
-    color: {
-      type: String
-    },
-    palette: {
-      default: () => [
-        '#000000',
-        '#FFFFFF',
-        '#039BE5',
-        '#ff3860',
-        '#008732',
-        '#5E60BA',
-        '#f57f17'
-      ],
-      type: Array
-    }
+const props = defineProps({
+  color: {
+    type: String
   },
+  palette: {
+    default: () => [
+      '#000000',
+      '#FFFFFF',
+      '#039BE5',
+      '#ff3860',
+      '#008732',
+      '#5E60BA',
+      '#f57f17'
+    ],
+    type: Array
+  }
+})
 
-  emits: ['change'],
+const emit = defineEmits(['change'])
 
-  data() {
-    return {
-      isOpen: false
-    }
-  },
+const isOpen = ref(false)
 
-  methods: {
-    togglePalette() {
-      this.isOpen = !this.isOpen
-    },
+const togglePalette = () => {
+  isOpen.value = !isOpen.value
+}
 
-    onColorPicked(shade) {
-      this.$emit('change', shade)
-      this.isOpen = false
-    }
-  }
+const onColorPicked = shade => {
+  emit('change', shade)
+  isOpen.value = false
 }
 </script>
 
diff --git a/src/components/widgets/Combobox.vue b/src/components/widgets/Combobox.vue
index 68966a690e..0312aca519 100644
--- a/src/components/widgets/Combobox.vue
+++ b/src/components/widgets/Combobox.vue
@@ -14,7 +14,7 @@
           :style="{
             width: width ? `${width}px` : undefined
           }"
-          ref="select"
+          ref="selectRef"
           :disabled="disabled"
           @keyup.enter="emitEnter()"
           @change="updateValue"
@@ -38,91 +38,94 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'combobox',
-
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    modelValue: {
-      default: '',
-      type: [Object, String, Boolean, Number]
-    },
-    options: {
-      default: () => [],
-      type: Array
-    },
-    localeKeyPrefix: {
-      default: '',
-      type: String
-    },
-    isTop: {
-      default: false,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    error: {
-      default: false,
-      type: Boolean
-    },
-    thin: {
-      default: false,
-      type: Boolean
-    },
-    width: {
-      type: Number
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    },
-    isInline: {
-      default: false,
-      type: Boolean
-    }
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  },
+  modelValue: {
+    default: '',
+    type: [Object, String, Boolean, Number]
+  },
+  options: {
+    default: () => [],
+    type: Array
+  },
+  localeKeyPrefix: {
+    default: '',
+    type: String
+  },
+  isTop: {
+    default: false,
+    type: Boolean
+  },
+  disabled: {
+    default: false,
+    type: Boolean
+  },
+  error: {
+    default: false,
+    type: Boolean
+  },
+  thin: {
+    default: false,
+    type: Boolean
+  },
+  width: {
+    type: Number
+  },
+  withMargin: {
+    default: true,
+    type: Boolean
   },
+  isInline: {
+    default: false,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['enter', 'update:modelValue'])
+
+const selectRef = ref(null)
+
+const updateValue = () => {
+  let value = selectRef.value.value
+  props.options.forEach(option => {
+    if (option.label === value) {
+      value = option.value
+    }
+  })
+  emit('update:modelValue', value)
+}
 
-  emits: ['enter', 'update:modelValue'],
-
-  methods: {
-    updateValue() {
-      let value = this.$refs.select.value
-      this.options.forEach(option => {
-        if (option.label === value) {
-          value = option.value
-        }
-      })
-      this.$emit('update:modelValue', value)
-    },
-
-    emitEnter() {
-      let value = this.$refs.select.value
-      this.options.forEach(option => {
-        if (option.label === value) {
-          value = option.value
-        }
-      })
-      this.$emit('enter', value)
-    },
-
-    getOptionLabel(option) {
-      if (this.localeKeyPrefix && option.label) {
-        return this.$t(this.localeKeyPrefix + option.label.toLowerCase())
-      }
-      return option.label
-    },
-
-    focus() {
-      this.$refs.select?.focus()
+const emitEnter = () => {
+  let value = selectRef.value.value
+  props.options.forEach(option => {
+    if (option.label === value) {
+      value = option.value
     }
+  })
+  emit('enter', value)
+}
+
+const getOptionLabel = option => {
+  if (props.localeKeyPrefix && option.label) {
+    return t(props.localeKeyPrefix + option.label.toLowerCase())
   }
+  return option.label
 }
+
+const focus = () => {
+  selectRef.value?.focus()
+}
+
+defineExpose({ focus })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxBoolean.vue b/src/components/widgets/ComboboxBoolean.vue
index 777193708c..c97a0a57f7 100644
--- a/src/components/widgets/ComboboxBoolean.vue
+++ b/src/components/widgets/ComboboxBoolean.vue
@@ -9,52 +9,42 @@
   />
 </template>
 
-<script>
+<script setup>
+import { useI18n } from 'vue-i18n'
+
 import Combobox from '@/components/widgets/Combobox.vue'
 
-export default {
-  name: 'combobox-boolean',
+const { t } = useI18n()
 
-  components: {
-    Combobox
+defineProps({
+  label: {
+    default: '',
+    type: String
   },
 
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-
-    modelValue: {
-      default: 'false',
-      type: String
-    },
-
-    disabled: {
-      default: false,
-      type: Boolean
-    }
+  modelValue: {
+    default: 'false',
+    type: String
   },
 
-  emits: ['enter', 'update:modelValue'],
+  disabled: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  data() {
-    return {
-      booleanOptions: [
-        { label: this.$t('main.yes'), value: 'true' },
-        { label: this.$t('main.no'), value: 'false' }
-      ]
-    }
-  },
+const emit = defineEmits(['enter', 'update:modelValue'])
 
-  methods: {
-    emitValue(value) {
-      this.$emit('update:modelValue', value)
-    },
+const booleanOptions = [
+  { label: t('main.yes'), value: 'true' },
+  { label: t('main.no'), value: 'false' }
+]
 
-    emitEnter(value) {
-      this.$emit('enter', value)
-    }
-  }
+const emitValue = value => {
+  emit('update:modelValue', value)
+}
+
+const emitEnter = value => {
+  emit('enter', value)
 }
 </script>
diff --git a/src/components/widgets/ComboboxDepartment.vue b/src/components/widgets/ComboboxDepartment.vue
index 375ea7ac92..18aaa16e1f 100644
--- a/src/components/widgets/ComboboxDepartment.vue
+++ b/src/components/widgets/ComboboxDepartment.vue
@@ -49,181 +49,171 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import { ChevronDownIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
 
 import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
-export default {
-  name: 'combobox-department',
+const { t } = useI18n()
+const store = useStore()
 
-  components: {
-    ChevronDownIcon,
-    ComboboxMask,
-    DepartmentName
+const props = defineProps({
+  displayAllAndMyDepartments: {
+    default: false,
+    type: Boolean
   },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      showDepartmentList: false
-    }
+  label: {
+    default: '',
+    type: String
   },
-
-  props: {
-    displayAllAndMyDepartments: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    maxHeightSelectInput: {
-      default: 200,
-      type: Number
-    },
-    rounded: {
-      default: false,
-      type: Boolean
-    },
-    selectableDepartments: {
-      type: Array,
-      required: false
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    width: {
-      default: 250,
-      type: Number
-    },
-    withEmptyChoice: {
-      default: true,
-      type: Boolean
-    },
-    top: {
-      default: false,
-      type: Boolean
-    },
-    allDepartmentsLabel: {
-      default: false,
-      type: Boolean
-    }
+  maxHeightSelectInput: {
+    default: 200,
+    type: Number
+  },
+  rounded: {
+    default: false,
+    type: Boolean
+  },
+  selectableDepartments: {
+    type: Array,
+    required: false
   },
+  modelValue: {
+    default: '',
+    type: String
+  },
+  width: {
+    default: 250,
+    type: Number
+  },
+  withEmptyChoice: {
+    default: true,
+    type: Boolean
+  },
+  top: {
+    default: false,
+    type: Boolean
+  },
+  allDepartmentsLabel: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  computed: {
-    ...mapGetters([
-      'departmentMap',
-      'departments',
-      'isCurrentUserManager',
-      'isCurrentUserSupervisor',
-      'user'
-    ]),
+const emit = defineEmits(['update:modelValue'])
 
-    departmentsToTakeAccount() {
-      const departments = this.selectableDepartments
-        ? [...this.selectableDepartments]
-        : [...this.departments]
-      return departments.sort((a, b) =>
-        a.name.localeCompare(b.name, undefined, {
-          numeric: true
-        })
-      )
-    },
+const combobox = ref(null)
+const showDepartmentList = ref(false)
 
-    departmentList() {
-      if (this.displayAllAndMyDepartments) {
-        const departmentFilter = [
-          {
-            name: this.$t('tasks.combobox_departments.all_departments'),
-            id: 'ALL',
-            color: '#CCC'
-          }
-        ]
-        if (!this.isCurrentUserManager && this.user.departments.length > 0) {
-          departmentFilter.unshift({
-            name: this.$t('tasks.combobox_departments.my_departments'),
-            id: 'MY_DEPARTMENTS',
-            color: '#000000'
-          })
-        }
-        return [...departmentFilter, ...this.departmentsToTakeAccount]
-      } else if (
-        this.isCurrentUserSupervisor &&
-        this.user.departments.length > 0
-      ) {
-        return [...this.departmentsToTakeAccount]
-      } else if (this.withEmptyChoice) {
-        return [
-          {
-            color: '#AAA',
-            id: null,
-            name: this.allDepartmentsLabel
-              ? this.$t('departments.all_departments')
-              : this.$t('departments.no_department')
-          },
-          ...this.departmentsToTakeAccount
-        ]
-      } else {
-        return [...this.departmentsToTakeAccount]
-      }
-    },
+const departmentMap = computed(() => store.getters.departmentMap)
+const departments = computed(() => store.getters.departments)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const isCurrentUserSupervisor = computed(
+  () => store.getters.isCurrentUserSupervisor
+)
+const user = computed(() => store.getters.user)
 
-    currentDepartment() {
-      if (this.modelValue) {
-        const departmentMapped = this.departmentMap.get(this.modelValue)
-        if (departmentMapped) {
-          return departmentMapped
-        } else {
-          return this.departmentList.find(d => d.id === this.modelValue)
-        }
-      } else {
-        return this.departmentList[0]
-      }
-    },
+const departmentsToTakeAccount = computed(() => {
+  const deps = props.selectableDepartments
+    ? [...props.selectableDepartments]
+    : [...departments.value]
+  return deps.sort((a, b) =>
+    a.name.localeCompare(b.name, undefined, {
+      numeric: true
+    })
+  )
+})
 
-    listStyle() {
-      const data = {
-        'max-height': `${this.maxHeightSelectInput}px`,
-        width: `${this.width}px`,
-        top: this.rounded ? '31px' : '37px',
-        left: '0'
-      }
-      if (this.top) {
-        Object.assign(data, {
-          top: '-200px',
-          bottom: '-90px',
-          'border-top-left-radius': '10px',
-          'border-top-right-radius': '10px',
-          'border-bottom-left-radius': '0',
-          'border-bottom-right-radius': '0'
-        })
+const departmentList = computed(() => {
+  if (props.displayAllAndMyDepartments) {
+    const departmentFilter = [
+      {
+        name: t('tasks.combobox_departments.all_departments'),
+        id: 'ALL',
+        color: '#CCC'
       }
+    ]
+    if (!isCurrentUserManager.value && user.value.departments.length > 0) {
+      departmentFilter.unshift({
+        name: t('tasks.combobox_departments.my_departments'),
+        id: 'MY_DEPARTMENTS',
+        color: '#000000'
+      })
+    }
+    return [...departmentFilter, ...departmentsToTakeAccount.value]
+  } else if (
+    isCurrentUserSupervisor.value &&
+    user.value.departments.length > 0
+  ) {
+    return [...departmentsToTakeAccount.value]
+  } else if (props.withEmptyChoice) {
+    return [
+      {
+        color: '#AAA',
+        id: null,
+        name: props.allDepartmentsLabel
+          ? t('departments.all_departments')
+          : t('departments.no_department')
+      },
+      ...departmentsToTakeAccount.value
+    ]
+  } else {
+    return [...departmentsToTakeAccount.value]
+  }
+})
 
-      return data
+const currentDepartment = computed(() => {
+  if (props.modelValue) {
+    const departmentMapped = departmentMap.value.get(props.modelValue)
+    if (departmentMapped) {
+      return departmentMapped
+    } else {
+      return departmentList.value.find(d => d.id === props.modelValue)
     }
-  },
+  } else {
+    return departmentList.value[0]
+  }
+})
+
+const listStyle = computed(() => {
+  const data = {
+    'max-height': `${props.maxHeightSelectInput}px`,
+    width: `${props.width}px`,
+    top: props.rounded ? '31px' : '37px',
+    left: '0'
+  }
+  if (props.top) {
+    Object.assign(data, {
+      top: '-200px',
+      bottom: '-90px',
+      'border-top-left-radius': '10px',
+      'border-top-right-radius': '10px',
+      'border-bottom-left-radius': '0',
+      'border-bottom-right-radius': '0'
+    })
+  }
 
-  methods: {
-    selectDepartment(department) {
-      this.$emit('update:modelValue', department.id)
-      this.showDepartmentList = false
-    },
+  return data
+})
 
-    toggleDepartmentList() {
-      this.showDepartmentList = !this.showDepartmentList
-    },
+const selectDepartment = department => {
+  emit('update:modelValue', department.id)
+  showDepartmentList.value = false
+}
 
-    focus() {
-      this.$refs.combobox.focus()
-    }
-  }
+const toggleDepartmentList = () => {
+  showDepartmentList.value = !showDepartmentList.value
 }
+
+const focus = () => {
+  combobox.value.focus()
+}
+
+defineExpose({ focus })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxMask.vue b/src/components/widgets/ComboboxMask.vue
index e67744efa7..9e078979f5 100644
--- a/src/components/widgets/ComboboxMask.vue
+++ b/src/components/widgets/ComboboxMask.vue
@@ -6,17 +6,13 @@
   ></div>
 </template>
 
-<script>
-export default {
-  name: 'combobox-mask',
+<script setup>
+defineProps({
+  displayed: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  props: {
-    displayed: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['click']
-}
+defineEmits(['click'])
 </script>
diff --git a/src/components/widgets/ComboboxModel.vue b/src/components/widgets/ComboboxModel.vue
index 327f23fd25..a40ee59754 100644
--- a/src/components/widgets/ComboboxModel.vue
+++ b/src/components/widgets/ComboboxModel.vue
@@ -9,86 +9,75 @@
   />
 </template>
 
-<script>
-import Combobox from '@/components/widgets/Combobox.vue'
+<script setup>
+import { ref, watch, onMounted } from 'vue'
 
-export default {
-  name: 'combobox-model',
+import Combobox from '@/components/widgets/Combobox.vue'
 
-  components: {
-    Combobox
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
 
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-
-    modelValue: {
-      default: () => {},
-      type: Object
-    },
-
-    models: {
-      default: () => [],
-      type: Array
-    },
-
-    disabled: {
-      default: false,
-      type: Boolean
-    }
+  modelValue: {
+    default: () => {},
+    type: Object
   },
 
-  emits: ['enter', 'update:modelValue'],
-
-  data() {
-    return {
-      currentModelId: '',
-      modelMap: {},
-      modelOptions: []
-    }
+  models: {
+    default: () => [],
+    type: Array
   },
 
-  mounted() {
-    this.reset()
-  },
+  disabled: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  methods: {
-    emitValue(value) {
-      this.currentModelId = value
-      const model = this.modelMap[this.currentModelId]
-      this.$emit('update:modelValue', model)
-    },
+const emit = defineEmits(['enter', 'update:modelValue'])
 
-    emitEnter(value) {
-      this.currentModelId = value
-      const model = this.modelMap[this.currentModelId]
-      this.$emit('enter', model)
-    },
+const currentModelId = ref('')
+const modelMap = ref({})
+const modelOptions = ref([])
 
-    reset() {
-      if (this.models.length > 0) {
-        this.currentModelId =
-          this.models.find(model => model.id === this.modelValue.id) ??
-          this.models[0].id
-        this.modelMap = {}
-        this.modelOptions = this.models.map(model => ({
-          label: model.name,
-          value: model.id
-        }))
-        this.models.forEach(model => {
-          this.modelMap[model.id] = model
-        })
-      }
-    }
-  },
+const emitValue = value => {
+  currentModelId.value = value
+  const model = modelMap.value[currentModelId.value]
+  emit('update:modelValue', model)
+}
+
+const emitEnter = value => {
+  currentModelId.value = value
+  const model = modelMap.value[currentModelId.value]
+  emit('enter', model)
+}
 
-  watch: {
-    models() {
-      this.reset()
-    }
+const reset = () => {
+  if (props.models.length > 0) {
+    currentModelId.value =
+      props.models.find(model => model.id === props.modelValue.id) ??
+      props.models[0].id
+    modelMap.value = {}
+    modelOptions.value = props.models.map(model => ({
+      label: model.name,
+      value: model.id
+    }))
+    props.models.forEach(model => {
+      modelMap.value[model.id] = model
+    })
   }
 }
+
+onMounted(() => {
+  reset()
+})
+
+watch(
+  () => props.models,
+  () => {
+    reset()
+  }
+)
 </script>
diff --git a/src/components/widgets/ComboboxNumber.vue b/src/components/widgets/ComboboxNumber.vue
index 13bd4d8b30..2d70ee3bf5 100644
--- a/src/components/widgets/ComboboxNumber.vue
+++ b/src/components/widgets/ComboboxNumber.vue
@@ -11,7 +11,7 @@
       >
         <select
           class="select-input"
-          ref="select"
+          ref="selectRef"
           :disabled="disabled"
           @keyup.enter="emitEnter()"
           @change="updateValue"
@@ -35,7 +35,7 @@
   <span class="select" v-else>
     <select
       class="select-input"
-      ref="select"
+      ref="selectRef"
       @keyup.enter="emitEnter()"
       @change="updateValue"
     >
@@ -51,55 +51,56 @@
   </span>
 </template>
 
-<script>
-export default {
-  name: 'combobox-number',
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    modelValue: {
-      default: 0,
-      type: Number
-    },
-    options: {
-      default: () => [],
-      type: Array
-    },
-    localeKeyPrefix: {
-      default: '',
-      type: String
-    },
-    isSimple: {
-      default: false,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    }
+const { t } = useI18n()
+
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  },
+  modelValue: {
+    default: 0,
+    type: Number
+  },
+  options: {
+    default: () => [],
+    type: Array
+  },
+  localeKeyPrefix: {
+    default: '',
+    type: String
+  },
+  isSimple: {
+    default: false,
+    type: Boolean
   },
+  disabled: {
+    default: false,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['enter', 'update:modelValue'])
 
-  emits: ['enter', 'update:modelValue'],
+const selectRef = ref(null)
 
-  methods: {
-    updateValue() {
-      this.$emit('update:modelValue', parseInt(this.$refs.select.value))
-    },
+const updateValue = () => {
+  emit('update:modelValue', parseInt(selectRef.value.value))
+}
 
-    emitEnter() {
-      this.$emit('enter', parseInt(this.$refs.select.value))
-    },
+const emitEnter = () => {
+  emit('enter', parseInt(selectRef.value.value))
+}
 
-    getOptionLabel(option) {
-      if (this.localeKeyPrefix && option.label) {
-        return this.$t(this.localeKeyPrefix + option.label.toLowerCase())
-      }
-      return option.label
-    }
+const getOptionLabel = option => {
+  if (props.localeKeyPrefix && option.label) {
+    return t(props.localeKeyPrefix + option.label.toLowerCase())
   }
+  return option.label
 }
 </script>
 
diff --git a/src/components/widgets/ComboboxOptions.vue b/src/components/widgets/ComboboxOptions.vue
index 492449a2a1..cb93b07db9 100644
--- a/src/components/widgets/ComboboxOptions.vue
+++ b/src/components/widgets/ComboboxOptions.vue
@@ -79,7 +79,7 @@ const optionList = computed(() => {
   return props.isReversed ? props.options.slice().reverse() : props.options
 })
 
-function toggleList() {
+const toggleList = () => {
   if (showList.value) {
     lastScrollPosition.value = list.value?.scrollTop || 0
   }
@@ -95,7 +95,7 @@ function toggleList() {
   }
 }
 
-function onUpdateValue(key) {
+const onUpdateValue = key => {
   const value = !props.modelValue[key]
   emit('update:modelValue', {
     ...props.modelValue,
diff --git a/src/components/widgets/ComboboxProduction.vue b/src/components/widgets/ComboboxProduction.vue
index 16981bd15a..05d3ddeb17 100644
--- a/src/components/widgets/ComboboxProduction.vue
+++ b/src/components/widgets/ComboboxProduction.vue
@@ -41,68 +41,48 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
 import { ChevronDownIcon } from 'lucide-vue-next'
 
+import { useCombobox } from '@/composables/combobox'
+
 import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
 import ProductionName from '@/components/widgets/ProductionName.vue'
 
-export default {
-  name: 'combobox-production',
-
-  components: {
-    ChevronDownIcon,
-    ComboboxMask,
-    ProductionName
-  },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      showProductionList: false
-    }
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
-
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    },
-    productionList: {
-      required: true,
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: String
-    }
+  withMargin: {
+    default: true,
+    type: Boolean
   },
-
-  computed: {
-    currentProduction() {
-      return (
-        this.productionList.find(({ id }) => id === this.modelValue) ||
-        this.productionList[0]
-      )
-    }
+  productionList: {
+    required: true,
+    type: Array
   },
-
-  methods: {
-    selectProduction(production) {
-      this.$emit('update:modelValue', production.id)
-      this.showProductionList = false
-    },
-
-    toggleProductionList() {
-      this.showProductionList = !this.showProductionList
-    }
+  modelValue: {
+    default: '',
+    type: String
   }
-}
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const {
+  showList: showProductionList,
+  toggle: toggleProductionList,
+  select: selectProduction
+} = useCombobox(emit)
+
+const currentProduction = computed(() => {
+  return (
+    props.productionList.find(({ id }) => id === props.modelValue) ||
+    props.productionList[0]
+  )
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxSimple.vue b/src/components/widgets/ComboboxSimple.vue
index 035b135acd..8043f50771 100644
--- a/src/components/widgets/ComboboxSimple.vue
+++ b/src/components/widgets/ComboboxSimple.vue
@@ -20,79 +20,78 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'combobox-simple',
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-  emits: ['update:modelValue'],
+const { t } = useI18n()
 
-  data() {
-    return {
-      selectedOption: {
-        label: '',
-        value: ''
-      }
-    }
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
-
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    options: {
-      default: () => [],
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    localeKeyPrefix: {
-      default: '',
-      type: String
-    }
+  options: {
+    default: () => [],
+    type: Array
   },
-
-  mounted() {
-    this.resetOptions()
+  modelValue: {
+    default: '',
+    type: String
   },
+  localeKeyPrefix: {
+    default: '',
+    type: String
+  }
+})
 
-  methods: {
-    selectOption(option) {
-      this.$emit('update:modelValue', option.value)
-      this.selectedOption = option
-    },
+const emit = defineEmits(['update:modelValue'])
 
-    getOptionLabel(option) {
-      if (this.localeKeyPrefix && option.label) {
-        return this.$t(this.localeKeyPrefix + option.label.toLowerCase())
-      }
-      return option.label
-    },
+const selectedOption = ref({
+  label: '',
+  value: ''
+})
 
-    resetOptions() {
-      if (this.options.length > 0) {
-        const option = this.options.find(o => o.value === this.modelValue)
-        if (option) {
-          this.selectedOption = option
-        } else {
-          this.selectedOption = this.options[0]
-        }
-      }
-    }
-  },
+const selectOption = option => {
+  emit('update:modelValue', option.value)
+  selectedOption.value = option
+}
 
-  watch: {
-    options() {
-      this.resetOptions()
-    },
+const getOptionLabel = option => {
+  if (props.localeKeyPrefix && option.label) {
+    return t(props.localeKeyPrefix + option.label.toLowerCase())
+  }
+  return option.label
+}
 
-    modelValue() {
-      this.selectedOption = this.options.find(o => o.value === this.modelValue)
+const resetOptions = () => {
+  if (props.options.length > 0) {
+    const option = props.options.find(o => o.value === props.modelValue)
+    if (option) {
+      selectedOption.value = option
+    } else {
+      selectedOption.value = props.options[0]
     }
   }
 }
+
+onMounted(() => {
+  resetOptions()
+})
+
+watch(
+  () => props.options,
+  () => {
+    resetOptions()
+  }
+)
+
+watch(
+  () => props.modelValue,
+  () => {
+    selectedOption.value = props.options.find(o => o.value === props.modelValue)
+  }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxStatus.vue b/src/components/widgets/ComboboxStatus.vue
index be53da8840..c7509af514 100644
--- a/src/components/widgets/ComboboxStatus.vue
+++ b/src/components/widgets/ComboboxStatus.vue
@@ -60,153 +60,116 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import { ChevronDownIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
 
-import colors from '@/lib/colors'
 import { sortTaskStatuses } from '@/lib/sorting'
+import { useCombobox } from '@/composables/combobox'
+import { useTaskStatusStyle } from '@/composables/taskStatus'
 
 import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
 
-export default {
-  name: 'combobox-status',
+const { t } = useI18n()
+const store = useStore()
+const { backgroundColor, color, isDarkTheme } = useTaskStatusStyle()
 
-  components: {
-    ChevronDownIcon,
-    ComboboxMask
+const props = defineProps({
+  colorOnly: {
+    default: false,
+    type: Boolean
   },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      showStatusList: false
-    }
+  label: {
+    default: '',
+    type: String
   },
-
-  props: {
-    colorOnly: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    taskStatusList: {
-      default: () => [],
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    narrow: {
-      default: false,
-      type: Boolean
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    },
-    addPlaceholder: {
-      default: false,
-      type: Boolean
-    },
-    openTop: {
-      default: false,
-      type: Boolean
-    },
-    productionId: {
-      default: '',
-      type: String
-    }
+  taskStatusList: {
+    default: () => [],
+    type: Array
   },
-
-  computed: {
-    ...mapGetters(['isDarkTheme', 'productionMap', 'taskStatusMap']),
-
-    sortedTaskStatusList() {
-      if (this.productionId) {
-        const production = this.productionMap.get(this.productionId)
-        return sortTaskStatuses(this.taskStatusList, production)
-      } else {
-        return this.taskStatusList
-      }
-    },
-
-    currentStatus() {
-      if (this.modelValue) {
-        return this.taskStatusMap.get(this.modelValue)
-      } else if (this.addPlaceholder) {
-        return {
-          short_name: this.$t('task_status.add_task_status_placeholder'),
-          color: '#999'
-        }
-      } else {
-        return this.taskStatusList[0]
-      }
-    },
-
-    comboStyles() {
-      return {
-        background: this.colorOnly
-          ? this.backgroundColor(this.currentStatus)
-          : this.isDarkTheme
-            ? '#36393F'
-            : '#FEFEFE',
-        color: this.colorOnly ? this.color(this.currentStatus) : 'inherit',
-        'border-top-left-radius': this.colorOnly ? '20px' : '10px',
-        'border-top-right-radius': this.colorOnly ? '0px' : '10px',
-        'border-bottom-left-radius': this.showStatusList
-          ? '0'
-          : this.colorOnly
-            ? '20px'
-            : '10px',
-        'border-bottom-right-radius': this.showStatusList
-          ? '0'
-          : this.colorOnly
-            ? '0px'
-            : '10px'
-      }
-    }
+  modelValue: {
+    default: '',
+    type: String
   },
+  narrow: {
+    default: false,
+    type: Boolean
+  },
+  withMargin: {
+    default: true,
+    type: Boolean
+  },
+  addPlaceholder: {
+    default: false,
+    type: Boolean
+  },
+  openTop: {
+    default: false,
+    type: Boolean
+  },
+  productionId: {
+    default: '',
+    type: String
+  }
+})
 
-  methods: {
-    selectStatus(status) {
-      this.$emit('update:modelValue', status.id)
-      this.showStatusList = false
-    },
+const emit = defineEmits(['update:modelValue'])
 
-    backgroundColor(taskStatus) {
-      if ((!taskStatus || taskStatus.name === 'Todo') && !this.isDarkTheme) {
-        return '#ECECEC'
-      } else if (
-        (!taskStatus || taskStatus.name === 'Todo') &&
-        this.isDarkTheme
-      ) {
-        return '#5F626A'
-      } else if (this.isDarkTheme) {
-        return colors.darkenColor(taskStatus.color)
-      } else {
-        return taskStatus.color
-      }
-    },
+const {
+  showList: showStatusList,
+  toggle: toggleStatusList,
+  select: selectStatus
+} = useCombobox(emit)
 
-    color(taskStatus) {
-      if (!taskStatus || taskStatus.name !== 'Todo' || this.isDarkTheme) {
-        return 'white'
-      } else {
-        return '#333'
-      }
-    },
+const productionMap = computed(() => store.getters.productionMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
 
-    toggleStatusList() {
-      this.showStatusList = !this.showStatusList
+const sortedTaskStatusList = computed(() => {
+  if (props.productionId) {
+    const production = productionMap.value.get(props.productionId)
+    return sortTaskStatuses(props.taskStatusList, production)
+  } else {
+    return props.taskStatusList
+  }
+})
+
+const currentStatus = computed(() => {
+  if (props.modelValue) {
+    return taskStatusMap.value.get(props.modelValue)
+  } else if (props.addPlaceholder) {
+    return {
+      short_name: t('task_status.add_task_status_placeholder'),
+      color: '#999'
     }
+  } else {
+    return props.taskStatusList[0]
   }
-}
+})
+
+const comboStyles = computed(() => {
+  return {
+    background: props.colorOnly
+      ? backgroundColor(currentStatus.value)
+      : isDarkTheme.value
+        ? '#36393F'
+        : '#FEFEFE',
+    color: props.colorOnly ? color(currentStatus.value) : 'inherit',
+    'border-top-left-radius': props.colorOnly ? '20px' : '10px',
+    'border-top-right-radius': props.colorOnly ? '0px' : '10px',
+    'border-bottom-left-radius': showStatusList.value
+      ? '0'
+      : props.colorOnly
+        ? '20px'
+        : '10px',
+    'border-bottom-right-radius': showStatusList.value
+      ? '0'
+      : props.colorOnly
+        ? '0px'
+        : '10px'
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxStatusAutomation.vue b/src/components/widgets/ComboboxStatusAutomation.vue
index 8018b817c6..5c7e99bc7a 100644
--- a/src/components/widgets/ComboboxStatusAutomation.vue
+++ b/src/components/widgets/ComboboxStatusAutomation.vue
@@ -42,114 +42,88 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import { ChevronDownIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
 
 import colors from '@/lib/colors'
+import { useCombobox } from '@/composables/combobox'
 
 import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
 import StatusAutomationItem from '@/components/widgets/StatusAutomationItem.vue'
 
-export default {
-  name: 'combobox-status-automation',
+const store = useStore()
 
-  components: {
-    ChevronDownIcon,
-    ComboboxMask,
-    StatusAutomationItem
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      showStatusAutomationsList: false
-    }
+  statusAutomationsList: {
+    default: () => [],
+    type: Array
   },
-
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    statusAutomationsList: {
-      default: () => [],
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    narrow: {
-      default: false,
-      type: Boolean
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    },
-    addPlaceholder: {
-      default: false,
-      type: Boolean
-    }
+  modelValue: {
+    default: '',
+    type: String
   },
-
-  mounted() {
-    this.selectedStatusAutomation = this.statusAutomation
+  narrow: {
+    default: false,
+    type: Boolean
+  },
+  withMargin: {
+    default: true,
+    type: Boolean
   },
+  addPlaceholder: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  computed: {
-    ...mapGetters(['isDarkTheme', 'statusAutomationMap']),
+const emit = defineEmits(['update:modelValue'])
 
-    currentStatusAutomation() {
-      if (this.modelValue) {
-        return this.statusAutomationMap.get(this.modelValue)
-      } else {
-        return this.statusAutomationsList[0]
-      }
-    }
-  },
+const {
+  showList: showStatusAutomationsList,
+  toggle: toggleStatusAutomationsList,
+  select: selectStatusAutomation
+} = useCombobox(emit)
+
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+const statusAutomationMap = computed(() => store.getters.statusAutomationMap)
+
+const currentStatusAutomation = computed(() => {
+  if (props.modelValue) {
+    return statusAutomationMap.value.get(props.modelValue)
+  } else {
+    return props.statusAutomationsList[0]
+  }
+})
+
+const backgroundColor = statusAutomation => {
+  if (
+    (!statusAutomation || statusAutomation.is_default) &&
+    !isDarkTheme.value
+  ) {
+    return '#ECECEC'
+  } else if (
+    (!statusAutomation || statusAutomation.is_default) &&
+    isDarkTheme.value
+  ) {
+    return '#5F626A'
+  } else if (isDarkTheme.value) {
+    return colors.darkenColor(statusAutomation.color)
+  } else {
+    return statusAutomation.color
+  }
+}
 
-  methods: {
-    selectStatusAutomation(status) {
-      this.$emit('update:modelValue', status.id)
-      this.showStatusAutomationsList = false
-    },
-
-    backgroundColor(statusAutomation) {
-      if (
-        (!statusAutomation || statusAutomation.is_default) &&
-        !this.isDarkTheme
-      ) {
-        return '#ECECEC'
-      } else if (
-        (!statusAutomation || statusAutomation.is_default) &&
-        this.isDarkTheme
-      ) {
-        return '#5F626A'
-      } else if (this.isDarkTheme) {
-        return colors.darkenColor(statusAutomation.color)
-      } else {
-        return statusAutomation.color
-      }
-    },
-
-    color(statusAutomation) {
-      if (
-        !statusAutomation ||
-        !statusAutomation.is_default ||
-        this.isDarkTheme
-      ) {
-        return 'white'
-      } else {
-        return '#333'
-      }
-    },
-
-    toggleStatusAutomationsList() {
-      this.showStatusAutomationsList = !this.showStatusAutomationsList
-    }
+const color = statusAutomation => {
+  if (!statusAutomation || !statusAutomation.is_default || isDarkTheme.value) {
+    return 'white'
+  } else {
+    return '#333'
   }
 }
 </script>
diff --git a/src/components/widgets/ComboboxStudio.vue b/src/components/widgets/ComboboxStudio.vue
index d890050fae..5c710f19bc 100644
--- a/src/components/widgets/ComboboxStudio.vue
+++ b/src/components/widgets/ComboboxStudio.vue
@@ -40,104 +40,89 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import { ChevronDownIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
+
+import { useCombobox } from '@/composables/combobox'
 
 import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
 import StudioName from '@/components/widgets/StudioName.vue'
 
-export default {
-  name: 'combobox-studio',
+const { t } = useI18n()
+const store = useStore()
 
-  components: {
-    ChevronDownIcon,
-    ComboboxMask,
-    StudioName
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      showStudioList: false
-    }
+  maxHeightSelectInput: {
+    default: 200,
+    type: Number
   },
-
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    maxHeightSelectInput: {
-      default: 200,
-      type: Number
-    },
-    rounded: {
-      default: false,
-      type: Boolean
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    width: {
-      default: 250,
-      type: Number
-    },
-    withEmptyChoice: {
-      default: true,
-      type: Boolean
-    },
-    allStudiosLabel: {
-      default: false,
-      type: Boolean
-    }
+  rounded: {
+    default: false,
+    type: Boolean
   },
-
-  computed: {
-    ...mapGetters(['studios', 'studioMap']),
-
-    studioList() {
-      const studios = [...this.studios]
-
-      if (this.withEmptyChoice) {
-        return [
-          {
-            color: '#aaa',
-            id: null,
-            name: this.allStudiosLabel
-              ? this.$t('studios.all_studios')
-              : this.$t('studios.no_studio')
-          },
-          ...studios
-        ]
-      }
-      return studios
-    },
-
-    currentStudio() {
-      if (!this.modelValue) {
-        return this.studioList[0]
-      }
-      return (
-        this.studioMap.get(this.modelValue) ??
-        this.studioList.find(({ id }) => id === this.modelValue)
-      )
-    }
+  modelValue: {
+    default: '',
+    type: String
   },
+  width: {
+    default: 250,
+    type: Number
+  },
+  withEmptyChoice: {
+    default: true,
+    type: Boolean
+  },
+  allStudiosLabel: {
+    default: false,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const {
+  showList: showStudioList,
+  toggle: toggleStudioList,
+  select: selectStudio
+} = useCombobox(emit)
+
+const studios = computed(() => store.getters.studios)
+const studioMap = computed(() => store.getters.studioMap)
+
+const studioList = computed(() => {
+  const studiosCopy = [...studios.value]
+
+  if (props.withEmptyChoice) {
+    return [
+      {
+        color: '#aaa',
+        id: null,
+        name: props.allStudiosLabel
+          ? t('studios.all_studios')
+          : t('studios.no_studio')
+      },
+      ...studiosCopy
+    ]
+  }
+  return studiosCopy
+})
 
-  methods: {
-    selectStudio(studio) {
-      this.$emit('update:modelValue', studio.id)
-      this.showStudioList = false
-    },
-
-    toggleStudioList() {
-      this.showStudioList = !this.showStudioList
-    }
+const currentStudio = computed(() => {
+  if (!props.modelValue) {
+    return studioList.value[0]
   }
-}
+  return (
+    studioMap.value.get(props.modelValue) ??
+    studioList.value.find(({ id }) => id === props.modelValue)
+  )
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxStyled.vue b/src/components/widgets/ComboboxStyled.vue
index 2d283ec67d..eb6082d4dc 100644
--- a/src/components/widgets/ComboboxStyled.vue
+++ b/src/components/widgets/ComboboxStyled.vue
@@ -70,158 +70,150 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 import { ChevronDownIcon } from 'lucide-vue-next'
 
 import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 
-export default {
-  name: 'combobox-styled',
+const { t } = useI18n()
+const router = useRouter()
 
-  components: {
-    ChevronDownIcon,
-    EntityThumbnail
+const props = defineProps({
+  active: {
+    default: false,
+    type: Boolean
   },
+  disabled: {
+    default: false,
+    type: Boolean
+  },
+  label: {
+    default: '',
+    type: String
+  },
+  options: {
+    default: () => [],
+    type: Array
+  },
+  modelValue: {
+    default: '',
+    type: [String, Object]
+  },
+  localeKeyPrefix: {
+    default: '',
+    type: String
+  },
+  isCompact: {
+    default: false,
+    type: Boolean
+  },
+  isPreview: {
+    default: false,
+    type: Boolean
+  },
+  isReversed: {
+    default: false,
+    type: Boolean
+  },
+  keepOrder: {
+    default: false,
+    type: Boolean
+  },
+  thin: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  emits: ['change', 'update:modelValue'],
+const emit = defineEmits(['change', 'update:modelValue'])
 
-  data() {
-    return {
-      selectedOption: {
-        label: '',
-        value: ''
-      },
-      showList: false
-    }
-  },
+const select = ref(null)
+const selectedOption = ref({
+  label: '',
+  value: ''
+})
+const showList = ref(false)
+let lastScrollPosition = 0
 
-  props: {
-    active: {
-      default: false,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    options: {
-      default: () => [],
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: [String, Object]
-    },
-    localeKeyPrefix: {
-      default: '',
-      type: String
-    },
-    isCompact: {
-      default: false,
-      type: Boolean
-    },
-    isPreview: {
-      default: false,
-      type: Boolean
-    },
-    isReversed: {
-      default: false,
-      type: Boolean
-    },
-    keepOrder: {
-      default: false,
-      type: Boolean
-    },
-    thin: {
-      default: false,
-      type: Boolean
-    }
-  },
+const optionList = computed(() => {
+  if (props.isReversed && !props.keepOrder) {
+    return [...props.options].reverse()
+  }
+  return props.options
+})
 
-  computed: {
-    optionList() {
-      if (this.isReversed && !this.keepOrder) {
-        return [...this.options].reverse()
-      }
-      return this.options
-    },
+const getOptionLabel = option => {
+  if (props.localeKeyPrefix && option.label) {
+    return t(props.localeKeyPrefix + option.label.toLowerCase())
+  }
+  return option.label
+}
 
-    selectedOptionLabel() {
-      return this.selectedOption ? this.getOptionLabel(this.selectedOption) : ''
-    }
-  },
+const selectedOptionLabel = computed(() => {
+  return selectedOption.value ? getOptionLabel(selectedOption.value) : ''
+})
 
-  methods: {
-    openRoute(option) {
-      const ahref = this.$router.resolve(option.route).href
-      const url = `${window.location.protocol}//${window.location.host}${ahref}`
-      window.open(url, '_blank')
-    },
-
-    selectOption(option) {
-      this.$emit('update:modelValue', option.value)
-      this.$emit('change', option.value)
-      this.selectedOption = option
-    },
-
-    toggleList() {
-      if (this.showList) {
-        this.lastScrollPosition = this.$refs.select.scrollTop
-      }
-      this.showList = !this.showList
-      if (this.showList) {
-        this.$nextTick(() => {
-          this.$refs.select?.scrollTo({ top: this.lastScrollPosition, left: 0 })
-        })
-      }
-    },
+const openRoute = option => {
+  const ahref = router.resolve(option.route).href
+  const url = `${window.location.protocol}//${window.location.host}${ahref}`
+  window.open(url, '_blank')
+}
 
-    getOptionLabel(option) {
-      if (this.localeKeyPrefix && option.label) {
-        return this.$t(this.localeKeyPrefix + option.label.toLowerCase())
-      }
-      return option.label
+const selectOption = option => {
+  emit('update:modelValue', option.value)
+  emit('change', option.value)
+  selectedOption.value = option
+}
+
+const toggleList = () => {
+  if (showList.value) {
+    lastScrollPosition = select.value.scrollTop
+  }
+  showList.value = !showList.value
+  if (showList.value) {
+    nextTick(() => {
+      select.value?.scrollTo({ top: lastScrollPosition, left: 0 })
+    })
+  }
+}
+
+watch(
+  () => props.options,
+  () => {
+    if (props.options.length > 0) {
+      const option = props.options.find(
+        ({ value }) => value === props.modelValue
+      )
+      selectedOption.value = option || props.options[0]
     }
   },
-
-  watch: {
-    options: {
-      deep: true,
-      immediate: true,
-      handler() {
-        if (this.options.length > 0) {
-          const option = this.options.find(
-            ({ value }) => value === this.modelValue
-          )
-          this.selectedOption = option || this.options[0]
+  { deep: true, immediate: true }
+)
+
+watch(showList, () => {
+  if (showList.value && props.isReversed) {
+    nextTick(() => {
+      if (!select.value?.children) return
+      let list = null
+      for (const child of select.value.children) {
+        if (child.className !== 'flexrow') {
+          list = child
         }
       }
-    },
-
-    showList() {
-      if (this.showList && this.isReversed) {
-        this.$nextTick(() => {
-          if (!this.$refs.select?.children) return
-          let list = null
-          for (const child of this.$refs.select.children) {
-            if (child.className !== 'flexrow') {
-              list = child
-            }
-          }
-          list?.scrollTo({ top: this.optionList.length * 60 })
-        })
-      }
-    },
+      list?.scrollTo({ top: optionList.value.length * 60 })
+    })
+  }
+})
 
-    modelValue() {
-      this.selectedOption = this.options.find(o => o.value === this.modelValue)
-    }
+watch(
+  () => props.modelValue,
+  () => {
+    selectedOption.value = props.options.find(o => o.value === props.modelValue)
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxTag.vue b/src/components/widgets/ComboboxTag.vue
index bcd5e74a69..31dc35cf5f 100644
--- a/src/components/widgets/ComboboxTag.vue
+++ b/src/components/widgets/ComboboxTag.vue
@@ -11,7 +11,7 @@
         open: showList,
         shy: shy
       }"
-      ref="select"
+      ref="selectRef"
     >
       <div class="flexrow" @click="toggleList" :title="renderedValue">
         <div class="selected-line flexrow-item ellipsis">
@@ -46,139 +46,126 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { ChevronDownIcon } from 'lucide-vue-next'
 
 import { sortByValue } from '@/lib/sorting'
 
-export default {
-  name: 'combobox-tag',
+const { t } = useI18n()
 
-  components: {
-    ChevronDownIcon
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean
   },
-
-  emits: ['change', 'update:modelValue'],
-
-  data() {
-    return {
-      showList: false
-    }
+  label: {
+    default: '',
+    type: String
   },
-
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    options: {
-      default: () => [],
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    localeKeyPrefix: {
-      default: '',
-      type: String
-    },
-    isReversed: {
-      default: false,
-      type: Boolean
-    },
-    shy: {
-      default: false,
-      type: Boolean
-    },
-    thin: {
-      default: false,
-      type: Boolean
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    }
+  options: {
+    default: () => [],
+    type: Array
+  },
+  modelValue: {
+    default: '',
+    type: String
+  },
+  localeKeyPrefix: {
+    default: '',
+    type: String
+  },
+  isReversed: {
+    default: false,
+    type: Boolean
   },
+  shy: {
+    default: false,
+    type: Boolean
+  },
+  thin: {
+    default: false,
+    type: Boolean
+  },
+  withMargin: {
+    default: true,
+    type: Boolean
+  }
+})
 
-  computed: {
-    optionList() {
-      const sortedOptions = sortByValue([...this.options])
-      if (this.isReversed) {
-        sortedOptions.reverse()
-      }
-      return sortedOptions
-    },
+const emit = defineEmits(['change', 'update:modelValue'])
 
-    renderedValue() {
-      return this.modelValue.split(',').filter(Boolean).sort().join(', ')
-    }
-  },
+const showList = ref(false)
+const selectRef = ref(null)
+let lastScrollPosition = 0
 
-  methods: {
-    selectOption(option) {
-      let values = this.modelValue.split(',').filter(Boolean)
-      if (values.includes(option.value)) {
-        values.splice(values.indexOf(option.value), 1)
-      } else {
-        values = this.optionList
-          .filter(
-            oldOption =>
-              this.isChecked(oldOption) || oldOption.value === option.value
-          )
-          .map(oldOption => oldOption.value)
-      }
-      const value = values.join(',')
-      this.$emit('update:modelValue', value)
-      this.$emit('change', value)
-    },
-
-    toggleList() {
-      if (this.showList) {
-        this.lastScrollPosition = this.$refs.select.scrollTop
-      }
-      this.showList = !this.showList
-      if (this.showList) {
-        this.$nextTick(() => {
-          this.$refs.select?.scrollTo({ top: this.lastScrollPosition, left: 0 })
-        })
-      }
-    },
+const optionList = computed(() => {
+  const sortedOptions = sortByValue([...props.options])
+  if (props.isReversed) {
+    sortedOptions.reverse()
+  }
+  return sortedOptions
+})
+
+const renderedValue = computed(() => {
+  return props.modelValue.split(',').filter(Boolean).sort().join(', ')
+})
+
+const selectOption = option => {
+  let values = props.modelValue.split(',').filter(Boolean)
+  if (values.includes(option.value)) {
+    values.splice(values.indexOf(option.value), 1)
+  } else {
+    values = optionList.value
+      .filter(
+        oldOption => isChecked(oldOption) || oldOption.value === option.value
+      )
+      .map(oldOption => oldOption.value)
+  }
+  const value = values.join(',')
+  emit('update:modelValue', value)
+  emit('change', value)
+}
 
-    getOptionLabel(option) {
-      if (this.localeKeyPrefix && option.label) {
-        return this.$t(this.localeKeyPrefix + option.label.toLowerCase())
-      }
-      return option.label
-    },
+const toggleList = () => {
+  if (showList.value) {
+    lastScrollPosition = selectRef.value.scrollTop
+  }
+  showList.value = !showList.value
+  if (showList.value) {
+    nextTick(() => {
+      selectRef.value?.scrollTo({ top: lastScrollPosition, left: 0 })
+    })
+  }
+}
 
-    isChecked(option) {
-      const values = this.modelValue.split(',')
-      return values.includes(option.value)
-    }
-  },
+const getOptionLabel = option => {
+  if (props.localeKeyPrefix && option.label) {
+    return t(props.localeKeyPrefix + option.label.toLowerCase())
+  }
+  return option.label
+}
 
-  watch: {
-    showList() {
-      if (this.showList) {
-        this.$nextTick(() => {
-          if (!this.$refs.select?.children) return
-          let list = null
-          for (const child of this.$refs.select.children) {
-            if (child.className !== 'flexrow') {
-              list = child
-            }
-          }
-          list?.scrollTo({ top: this.optionList.length * 60 })
-        })
+const isChecked = option => {
+  const values = props.modelValue.split(',')
+  return values.includes(option.value)
+}
+
+watch(showList, () => {
+  if (showList.value) {
+    nextTick(() => {
+      if (!selectRef.value?.children) return
+      let list = null
+      for (const child of selectRef.value.children) {
+        if (child.className !== 'flexrow') {
+          list = child
+        }
       }
-    }
+      list?.scrollTo({ top: optionList.value.length * 60 })
+    })
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ComboboxTaskType.vue b/src/components/widgets/ComboboxTaskType.vue
index 4f938f0b2a..940f6064d5 100644
--- a/src/components/widgets/ComboboxTaskType.vue
+++ b/src/components/widgets/ComboboxTaskType.vue
@@ -32,126 +32,113 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import { ChevronDownIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
 
 import ComboboxMask from '@/components/widgets/ComboboxMask.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 
-export default {
-  name: 'combobox-task-type',
+const { t } = useI18n()
+const store = useStore()
 
-  components: {
-    ChevronDownIcon,
-    ComboboxMask,
-    TaskTypeName
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean
   },
+  label: {
+    default: '',
+    type: String
+  },
+  taskTypeList: {
+    default: () => [],
+    type: Array
+  },
+  modelValue: {
+    default: '',
+    type: String
+  },
+  shy: {
+    default: false,
+    type: Boolean
+  },
+  addPlaceholder: {
+    default: false,
+    type: Boolean
+  },
+  placeholder: {
+    type: String
+  },
+  openTop: {
+    default: false,
+    type: Boolean
+  },
+  withMargin: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const showTaskTypeList = ref(false)
+const tooltipPosition = ref({ top: 0, left: 0 })
 
-  emits: ['change', 'update:modelValue'],
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
 
-  data() {
+const defaultPlaceholder = computed(() => {
+  return t('task_types.add_task_type_placeholder')
+})
+
+const currentTaskType = computed(() => {
+  if (props.modelValue) {
+    return taskTypeMap.value.get(props.modelValue)
+  } else if (props.addPlaceholder) {
     return {
-      showTaskTypeList: false,
-      tooltipPosition: { top: 0, left: 0 }
+      name: props.placeholder ?? defaultPlaceholder.value,
+      color: '#E5E5E5',
+      id: ''
     }
-  },
+  } else {
+    return props.taskTypeList[0]
+  }
+})
 
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    taskTypeList: {
-      default: () => [],
-      type: Array
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    shy: {
-      default: false,
-      type: Boolean
-    },
-    addPlaceholder: {
-      default: false,
-      type: Boolean
-    },
-    placeholder: {
-      type: String
-    },
-    openTop: {
-      default: false,
-      type: Boolean
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    }
-  },
+const tooltipStyle = computed(() => {
+  return {
+    top: tooltipPosition.value.top + 'px',
+    left: tooltipPosition.value.left + 'px'
+  }
+})
 
-  computed: {
-    ...mapGetters(['taskTypeMap', 'isDarkTheme']),
-
-    currentTaskType() {
-      if (this.modelValue) {
-        return this.taskTypeMap.get(this.modelValue)
-      } else if (this.addPlaceholder) {
-        return {
-          name: this.placeholder ?? this.defaultPlaceholder,
-          color: '#E5E5E5',
-          id: ''
-        }
-      } else {
-        return this.taskTypeList[0]
-      }
-    },
-
-    defaultPlaceholder() {
-      return this.$t('task_types.add_task_type_placeholder')
-    },
-
-    tooltipStyle() {
-      return {
-        top: this.tooltipPosition.top + 'px',
-        left: this.tooltipPosition.left + 'px'
-      }
-    }
-  },
+const selectTaskType = taskType => {
+  emit('update:modelValue', taskType.id)
+  emit('change', taskType.id)
+  showTaskTypeList.value = false
+}
 
-  methods: {
-    selectTaskType(taskType) {
-      this.$emit('update:modelValue', taskType.id)
-      this.$emit('change', taskType.id)
-      this.showTaskTypeList = false
-    },
-
-    toggleTaskTypeList(event) {
-      if (this.disabled) {
-        return
-      }
-
-      this.showTaskTypeList = !this.showTaskTypeList
-
-      if (!this.showTaskTypeList) {
-        return
-      }
-
-      const curDiv = event.currentTarget
-      const rect = curDiv.getBoundingClientRect()
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-      const scrollLeft =
-        window.pageXOffset || document.documentElement.scrollLeft
-      this.tooltipPosition = {
-        top: rect.top + scrollTop + 35,
-        left: rect.left + scrollLeft
-      }
-    }
+const toggleTaskTypeList = event => {
+  if (props.disabled) {
+    return
+  }
+
+  showTaskTypeList.value = !showTaskTypeList.value
+
+  if (!showTaskTypeList.value) {
+    return
+  }
+
+  const curDiv = event.currentTarget
+  const rect = curDiv.getBoundingClientRect()
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+  tooltipPosition.value = {
+    top: rect.top + scrollTop + 35,
+    left: rect.left + scrollLeft
   }
 }
 </script>
diff --git a/src/components/widgets/Comment.vue b/src/components/widgets/Comment.vue
index 7af06646cc..51282df5cd 100644
--- a/src/components/widgets/Comment.vue
+++ b/src/components/widgets/Comment.vue
@@ -46,19 +46,19 @@
               :is-editable="isEditable"
               @pin-clicked="
                 () => {
-                  $emit('pin-comment', comment)
+                  emit('pin-comment', comment)
                   toggleCommentMenu()
                 }
               "
               @edit-clicked="
                 () => {
-                  $emit('edit-comment', comment)
+                  emit('edit-comment', comment)
                   toggleCommentMenu()
                 }
               "
               @delete-clicked="
                 () => {
-                  $emit('delete-comment', comment)
+                  emit('delete-comment', comment)
                   toggleCommentMenu()
                 }
               "
@@ -76,7 +76,7 @@
               <copy-icon
                 class="copy-icon"
                 :size="12"
-                @click="$emit('duplicate-comment', comment)"
+                @click="emit('duplicate-comment', comment)"
               />
             </p>
             <p
@@ -271,7 +271,7 @@
                       </template>
                     </template>
                     <textarea
-                      ref="reply"
+                      ref="replyRef"
                       class="reply"
                       @keyup.ctrl.enter="onReplyClicked"
                       @dragover="onDragover"
@@ -416,19 +416,19 @@
             :is-empty="true"
             @pin-clicked="
               () => {
-                $emit('pin-comment', comment)
+                emit('pin-comment', comment)
                 toggleCommentMenu()
               }
             "
             @edit-clicked="
               () => {
-                $emit('edit-comment', comment)
+                emit('edit-comment', comment)
                 toggleCommentMenu()
               }
             "
             @delete-clicked="
               () => {
-                $emit('delete-comment', comment)
+                emit('delete-comment', comment)
                 toggleCommentMenu()
               }
             "
@@ -438,7 +438,7 @@
       </div>
     </div>
     <add-attachment-modal
-      ref="add-attachment-modal"
+      ref="addAttachmentModalRef"
       :active="modals.addAttachment"
       :title="$t('comments.add_attachment_to_reply')"
       @cancel="modals.addAttachment = false"
@@ -448,10 +448,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import AtTa from 'vue-at/dist/vue-at-textarea'
 import moment from 'moment'
-import { mapActions, mapGetters } from 'vuex'
 import {
   ChevronDownIcon,
   CopyIcon,
@@ -468,6 +478,7 @@ import { sortByName } from '@/lib/sorting'
 import { formatDate, parseDate } from '@/lib/time'
 import stringHelpers from '@/lib/string'
 
+import { useAtMentionsMembers } from '@/composables/atMentions'
 import { domMixin } from '@/components/mixins/dom'
 
 import AddAttachmentModal from '@/components/modals/AddAttachmentModal.vue'
@@ -480,557 +491,458 @@ import PeopleName from '@/components/widgets/PeopleName.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 import ValidationTag from '@/components/widgets/ValidationTag.vue'
 
-export default {
-  name: 'comment',
-
-  mixins: [domMixin],
-
-  components: {
-    AtTa,
-    AddAttachmentModal,
-    ButtonSimple,
-    Checklist,
-    ChevronDownIcon,
-    CopyIcon,
-    CommentMenu,
-    EmojiButton,
-    LinkIcon,
-    PaperclipIcon,
-    PeopleAvatar,
-    PeopleName,
-    ThumbsUpIcon,
-    ValidationTag,
-    TaskTypeName
+const { pauseEvent } = domMixin.methods
+
+const store = useStore()
+const route = useRoute()
+
+const emit = defineEmits([
+  'ack-comment',
+  'checklist-updated',
+  'delete-comment',
+  'duplicate-comment',
+  'edit-comment',
+  'pin-comment',
+  'time-code-clicked'
+])
+
+const props = defineProps({
+  comment: {
+    type: Object,
+    default: () => {}
   },
-
-  data() {
-    return {
-      membersForAts: { '@': [], '#': [] },
-      checklist: [],
-      isReplyLoading: false,
-      menuVisible: false,
-      modals: {
-        addAttachment: false
-      },
-      replyAttachments: [],
-      replyText: '',
-      showReply: false,
-      uniqueClassName: (Math.random() + 1).toString(36).substring(2)
-    }
+  frame: {
+    type: Number,
+    default: 0
   },
-
-  emits: [
-    'ack-comment',
-    'checklist-updated',
-    'delete-comment',
-    'duplicate-comment',
-    'edit-comment',
-    'pin-comment',
-    'time-code-clicked'
-  ],
-
-  props: {
-    comment: {
-      type: Object,
-      default: () => {}
-    },
-    frame: {
-      type: Number,
-      default: 0
-    },
-    fps: {
-      type: Number,
-      default: 25
-    },
-    isChange: {
-      type: Boolean,
-      default: false
-    },
-    isCheckable: {
-      type: Boolean,
-      default: false
-    },
-    isEditable: {
-      type: Boolean,
-      default: false
-    },
-    isPinnable: {
-      type: Boolean,
-      default: false
-    },
-    isReplyable: {
-      type: Boolean,
-      default: false
-    },
-    taskTypes: {
-      type: Array,
-      default: () => []
-    },
-    team: {
-      type: Array,
-      default: () => []
-    },
-    task: {
-      type: Object,
-      default: null
-    },
-    revision: {
-      type: Number,
-      default: 1
-    }
+  fps: {
+    type: Number,
+    default: 25
   },
-
-  mounted() {
-    if (this.comment.checklist) {
-      this.$options.silent = true
-      this.checklist = [...this.comment.checklist]
-      this.$nextTick().then(() => {
-        this.$options.silent = false
-      })
-    }
-    Array.from(document.getElementsByClassName(this.uniqueClassName)).forEach(
-      element => {
-        element.addEventListener('click', this.timeCodeClicked)
-      }
-    )
-    window.addEventListener('paste', this.onPaste, false)
+  isChange: {
+    type: Boolean,
+    default: false
   },
-
-  beforeUnmount() {
-    Array.from(document.getElementsByClassName(this.uniqueClassName)).forEach(
-      element => {
-        element.removeEventListener('click', this.timeCodeClicked)
-      }
-    )
-    window.removeEventListener('paste', this.onPaste, false)
+  isCheckable: {
+    type: Boolean,
+    default: false
   },
-
-  computed: {
-    ...mapGetters([
-      'departmentMap',
-      'isCurrentUserAdmin',
-      'isCurrentUserArtist',
-      'isCurrentUserClient',
-      'isCurrentUserManager',
-      'personMap',
-      'productionDepartmentIds',
-      'taskTypeMap',
-      'user'
-    ]),
-
-    isConcept() {
-      return this.$route.path.includes('concept')
-    },
-
-    isEmpty() {
-      return (
-        this.comment.text.length === 0 &&
-        (!this.comment.checklist || this.comment.checklist.length === 0) &&
-        this.comment.attachment_files.length === 0 &&
-        this.comment.previews.length === 0
-      )
-    },
-
-    previewRoute() {
-      let route = {
-        name: 'task',
-        params: {
-          task_id: this.comment.object_id,
-          production_id: this.task.project_id
-        }
+  isEditable: {
+    type: Boolean,
+    default: false
+  },
+  isPinnable: {
+    type: Boolean,
+    default: false
+  },
+  isReplyable: {
+    type: Boolean,
+    default: false
+  },
+  taskTypes: {
+    type: Array,
+    default: () => []
+  },
+  team: {
+    type: Array,
+    default: () => []
+  },
+  task: {
+    type: Object,
+    default: null
+  },
+  revision: {
+    type: Number,
+    default: 1
+  }
+})
+
+const replyRef = ref(null)
+const addAttachmentModalRef = ref(null)
+
+const { membersForAts, atOptionsFilter } = useAtMentionsMembers(
+  () => props.team,
+  () => props.taskTypes
+)
+
+const checklist = ref([])
+const isReplyLoading = ref(false)
+const menuVisible = ref(false)
+const modals = reactive({
+  addAttachment: false
+})
+const replyAttachments = ref([])
+const replyText = ref('')
+const showReply = ref(false)
+const uniqueClassName = (Math.random() + 1).toString(36).substring(2)
+
+let silent = false
+let lastCall = 0
+
+const departmentMap = computed(() => store.getters.departmentMap)
+const isCurrentUserAdmin = computed(() => store.getters.isCurrentUserAdmin)
+const isCurrentUserArtist = computed(() => store.getters.isCurrentUserArtist)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const personMap = computed(() => store.getters.personMap)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const user = computed(() => store.getters.user)
+
+const isConcept = computed(() => {
+  return route.path.includes('concept')
+})
+
+const isEmpty = computed(() => {
+  return (
+    props.comment.text.length === 0 &&
+    (!props.comment.checklist || props.comment.checklist.length === 0) &&
+    props.comment.attachment_files.length === 0 &&
+    props.comment.previews.length === 0
+  )
+})
+
+const previewRoute = computed(() => {
+  let r = {
+    name: 'task',
+    params: {
+      task_id: props.comment.object_id,
+      production_id: props.task.project_id
+    }
+  }
+  if (props.comment.previews.length > 0) {
+    r = {
+      name: 'task-preview',
+      params: {
+        task_id: props.comment.object_id,
+        preview_id: props.comment.previews[0].id,
+        production_id: props.task.project_id
       }
-      if (this.comment.previews.length > 0) {
-        route = {
-          name: 'task-preview',
-          params: {
-            task_id: this.comment.object_id,
-            preview_id: this.comment.previews[0].id,
-            production_id: this.task.project_id
-          }
-        }
+    }
+  }
+  if (props.task.episode_id) {
+    r.name = `episode-${r.name}`
+    r.params.episode_id = props.task.episode_id
+  } else if (props.task.entity && props.task.entity.episode_id) {
+    r.name = `episode-${r.name}`
+    r.params.episode_id = props.task.entity.episode_id
+  }
+  const taskType = taskTypeMap.value.get(props.task.task_type_id)
+  r.params.type = pluralizeEntityType(taskType.for_entity)
+  return r
+})
+
+const isLikedBy = computed(() => {
+  const personList = props.comment.acknowledgements.map(personId =>
+    personMap.value.get(personId)
+  )
+  return sortByName(personList)
+    .map(p => p.name)
+    .join(', ')
+})
+
+const commentAttachments = computed(() => {
+  return props.comment.attachment_files.filter(
+    attachment => !attachment.reply_id
+  )
+})
+
+const pictureAttachments = computed(() => {
+  return commentAttachments.value
+    .filter(attachment => files.IMG_EXTENSIONS.includes(attachment.extension))
+    .sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, {
+        numeric: true
+      })
+    )
+})
+
+const fileAttachments = computed(() => {
+  return commentAttachments.value.filter(
+    attachment => !files.IMG_EXTENSIONS.includes(attachment.extension)
+  )
+})
+
+const replyAttachmentMap = computed(() => {
+  const map = new Map()
+  props.comment.attachment_files.forEach(attachment => {
+    if (attachment.reply_id) {
+      if (!map.has(attachment.reply_id)) {
+        map.set(attachment.reply_id, {
+          pictures: [],
+          files: []
+        })
       }
-      if (this.task.episode_id) {
-        route.name = `episode-${route.name}`
-        route.params.episode_id = this.task.episode_id
-      } else if (this.task.entity && this.task.entity.episode_id) {
-        route.name = `episode-${route.name}`
-        route.params.episode_id = this.task.entity.episode_id
+      if (files.IMG_EXTENSIONS.includes(attachment.extension)) {
+        map.get(attachment.reply_id).pictures.push(attachment)
+      } else {
+        map.get(attachment.reply_id).files.push(attachment)
       }
-      const taskType = this.taskTypeMap.get(this.task.task_type_id)
-      route.params.type = pluralizeEntityType(taskType.for_entity)
-      return route
-    },
-
-    isLikedBy() {
-      const personList = this.comment.acknowledgements.map(personId =>
-        this.personMap.get(personId)
-      )
-      return sortByName(personList)
-        .map(p => p.name)
-        .join(', ')
-    },
-
-    commentAttachments() {
-      return this.comment.attachment_files.filter(
-        attachment => !attachment.reply_id
-      )
-    },
-
-    pictureAttachments() {
-      return this.commentAttachments
-        .filter(attachment =>
-          files.IMG_EXTENSIONS.includes(attachment.extension)
-        )
-        .sort((a, b) =>
-          a.name.localeCompare(b.name, undefined, {
-            numeric: true
-          })
-        )
-    },
-
-    fileAttachments() {
-      return this.commentAttachments.filter(
-        attachment => !files.IMG_EXTENSIONS.includes(attachment.extension)
-      )
-    },
-
-    replyAttachmentMap() {
-      const map = new Map()
-      this.comment.attachment_files.forEach(attachment => {
-        if (attachment.reply_id) {
-          if (!map.has(attachment.reply_id)) {
-            map.set(attachment.reply_id, {
-              pictures: [],
-              files: []
-            })
-          }
-          if (files.IMG_EXTENSIONS.includes(attachment.extension)) {
-            map.get(attachment.reply_id).pictures.push(attachment)
-          } else {
-            map.get(attachment.reply_id).files.push(attachment)
-          }
-        }
-      })
-      return map
-    },
-
-    commentDate() {
-      return parseDate(this.comment.created_at)
-    },
-
-    fullDate() {
-      return this.commentDate
-        .tz(this.user.timezone)
-        .format('YYYY-MM-DD HH:mm:ss')
-    },
-
-    shortDate() {
-      return this.renderDate(this.commentDate)
-    },
-
-    boxShadowStyle() {
-      const status = this.comment.task_status
-      return `0 0 3px 2px ${status.color}1F`
-    },
-
-    isAuthorClient() {
-      return this.personMap.get(this.comment.person_id)?.role === 'client'
     }
-  },
+  })
+  return map
+})
 
-  methods: {
-    ...mapActions([
-      'deleteReply',
-      'replyToComment',
-      'updatePreviewFileValidationStatus'
-    ]),
-
-    shortenText: stringHelpers.shortenText,
-
-    formatDate(date) {
-      return formatDate(date)
-    },
-
-    replyFullDate(date) {
-      return moment(parseDate(date))
-        .tz(this.user.timezone)
-        .format('YYYY-MM-DD HH:mm:ss')
-    },
-
-    replyShortDate(date) {
-      return this.renderDate(parseDate(date))
-    },
-
-    renderDate(date) {
-      date = moment(date)
-      if (moment().isSame(date, 'd')) {
-        return date.tz(this.user.timezone).format('HH:mm')
-      } else {
-        return date.tz(this.user.timezone).format('MM/DD')
-      }
-    },
-
-    getPath(name) {
-      const route = {
-        name,
-        params: {
-          task_id: this.comment.object_id,
-          comment_id: this.comment.id
-        }
-      }
-      if (this.$route.params.episode_id) {
-        route.name = `episode-${route.name}`
-        route.params.episode_id = this.$route.params.episode_id
-      }
-      return route
-    },
+const commentDate = computed(() => {
+  return parseDate(props.comment.created_at)
+})
 
-    getDownloadAttachmentPath,
+const fullDate = computed(() => {
+  return commentDate.value.tz(user.value.timezone).format('YYYY-MM-DD HH:mm:ss')
+})
 
-    toggleCommentMenu() {
-      this.menuVisible = !this.menuVisible
-    },
+const shortDate = computed(() => {
+  return renderDate(commentDate.value)
+})
 
-    addChecklistEntry() {
-      this.$options.silent = true
-      this.checklist.push({
-        text: '',
-        checked: false
-      })
-      this.$nextTick().then(() => {
-        this.$options.silent = false
-      })
-    },
-
-    removeTask(entry) {
-      this.checklist = remove(this.checklist, entry)
-    },
-
-    onChecklistChanged() {
-      const now = new Date().getTime()
-      this.lastCall = this.lastCall || 0
-      if (now - this.lastCall > 1000) {
-        this.lastCall = now
-        const comment = {
-          id: this.comment.id,
-          checklist: this.checklist.filter(item => item.text?.length)
-        }
-        this.$emit('checklist-updated', comment)
-      }
-    },
-
-    acknowledgeComment(comment) {
-      this.$emit('ack-comment', comment)
-    },
-
-    timeCodeClicked(event) {
-      const data = { ...event.target.dataset }
-      data.frame = data.frame - 1
-      this.pauseEvent(event)
-      this.$emit('time-code-clicked', data)
-    },
-
-    onChecklistTimecodeClicked(data) {
-      this.$emit('time-code-clicked', {
-        versionRevision: data.revision,
-        frame: data.frame - 1
-      })
-    },
+const boxShadowStyle = computed(() => {
+  const status = props.comment.task_status
+  return `0 0 3px 2px ${status.color}1F`
+})
 
-    setFrame(data) {
-      this.$emit('time-code-clicked', {
-        versionRevision: data.revision,
-        frame: data.frame - 1
-      })
-    },
+const isAuthorClient = computed(() => {
+  return personMap.value.get(props.comment.person_id)?.role === 'client'
+})
 
-    changePreviewValidationStatus(previewFiles) {
-      if (!this.isCurrentUserManager) {
-        return
-      }
-      const statusMap = {
-        validated: 'rejected',
-        rejected: 'neutral',
-        neutral: 'validated'
-      }
-      const status = statusMap[previewFiles[0].validation_status] || 'validated'
-      previewFiles.forEach(previewFile => {
-        this.updatePreviewFileValidationStatus({ previewFile, status })
-      })
-    },
+const shortenText = (text, length) => {
+  return stringHelpers.shortenText(text, length)
+}
 
-    renderComment,
+const replyFullDate = date => {
+  return moment(parseDate(date))
+    .tz(user.value.timezone)
+    .format('YYYY-MM-DD HH:mm:ss')
+}
 
-    showReplyWidget() {
-      this.showReply = true
-      this.$nextTick(() => {
-        this.$refs.reply?.focus()
-      })
-    },
-
-    onDrop(event) {
-      event.preventDefault()
-      const files = event.dataTransfer.files
-      if (files.length > 0) {
-        const form = new FormData()
-        form.append('file', files[0])
-        this.addAttachmentToReply([form])
-      }
-    },
-
-    onDragover(event) {
-      event.preventDefault()
-    },
-
-    onDragleave(event) {
-      event.preventDefault()
-    },
-
-    onReplyClicked() {
-      this.isReplyLoading = true
-      this.replyToComment({
-        comment: this.comment,
-        text: this.replyText,
-        attachments: this.replyAttachments
-      })
-        .then(() => {
-          this.isReplyLoading = false
-          this.replyText = ''
-          this.showReply = false
-          this.replyAttachments = []
-        })
-        .catch(error => {
-          console.error(error)
-          this.isReplyLoading = false
-        })
-    },
+const replyShortDate = date => {
+  return renderDate(parseDate(date))
+}
 
-    onDeleteReplyClicked(reply) {
-      this.deleteReply({ comment: this.comment, reply })
-        .then(() => {
-          this.isReplyLoading = false
-        })
-        .catch(console.error)
-    },
-
-    atOptionsFilter(name, chunk, at, v) {
-      // filter the list by the given at symbol
-      const option_at = v?.isTaskType ? '#' : '@'
-      // @ for team, # for task type
-      if (at !== option_at) return false
-      // match at lower-case
-      return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
-    },
-
-    onAtTextChanged(input) {
-      if (input.includes('@frame')) {
-        this.replyText = replaceTimeWithTimecode(
-          input,
-          this.revision,
-          this.frame + 1,
-          this.fps
-        )
-      }
-    },
-
-    onSelectEmoji(emoji) {
-      const textarea = this.$refs['reply']
-      this.replyText = stringHelpers.insertInTextArea(textarea, emoji.i)
-    },
-
-    addAttachmentToReply(files) {
-      this.modals.addAttachment = false
-      this.replyAttachments = this.replyAttachments.concat(files)
-    },
-
-    removeReplyAttachment(attachment) {
-      this.replyAttachments = this.replyAttachments.filter(
-        a => a !== attachment
-      )
-    },
-
-    onPaste(event) {
-      if (this.modals.addAttachment || !this.showReply) return
-      if (this.$refs['reply'] !== document.activeElement) return
-      const files = event.clipboardData.files
-      if (files.length > 0) {
-        const form = new FormData()
-        form.append('file', files[0])
-        this.addAttachmentToReply([form])
-      }
+const renderDate = date => {
+  date = moment(date)
+  if (moment().isSame(date, 'd')) {
+    return date.tz(user.value.timezone).format('HH:mm')
+  } else {
+    return date.tz(user.value.timezone).format('MM/DD')
+  }
+}
+
+const getPath = name => {
+  const r = {
+    name,
+    params: {
+      task_id: props.comment.object_id,
+      comment_id: props.comment.id
     }
-  },
+  }
+  if (route.params.episode_id) {
+    r.name = `episode-${r.name}`
+    r.params.episode_id = route.params.episode_id
+  }
+  return r
+}
 
-  watch: {
-    'comment.checklist'() {
-      this.$options.silent = true
-      this.checklist = [...this.comment.checklist]
-      this.$nextTick().then(() => {
-        this.$options.silent = false
-      })
-    },
+const toggleCommentMenu = () => {
+  menuVisible.value = !menuVisible.value
+}
 
-    checklist() {
-      if (!this.$options.silent) {
-        this.onChecklistChanged()
-      }
-    },
-    taskTypes: {
-      deep: true,
-      immediate: true,
-      handler(values) {
-        const taskTypeOptions = values.map(taskType => {
-          return {
-            isTaskType: true,
-            full_name: taskType.name,
-            color: taskType.color,
-            id: taskType.id,
-            url: taskType.url
-          }
-        })
-        taskTypeOptions.push({
-          isTaskType: true,
-          color: '#000',
-          full_name: 'All'
-        })
-        this.membersForAts['#'] = taskTypeOptions
-      }
-    },
-
-    team: {
-      deep: true,
-      immediate: true,
-      handler() {
-        let teamOptions
-        if (this.isCurrentUserClient) {
-          teamOptions = this.team.filter(person =>
-            ['admin', 'manager', 'client'].includes(person.role)
-          )
-        } else {
-          teamOptions = [...this.team]
-        }
-        if (!this.isCurrentUserClient) {
-          teamOptions = teamOptions.concat(
-            this.productionDepartmentIds.map(departmentId => {
-              const department = this.departmentMap.get(departmentId)
-              return {
-                isDepartment: true,
-                full_name: department.name,
-                color: department.color,
-                id: departmentId
-              }
-            })
-          )
-        }
-        teamOptions.push({
-          isTime: true,
-          full_name: 'frame'
-        })
-        this.membersForAts['@'] = teamOptions
-      }
+const addChecklistEntry = () => {
+  silent = true
+  checklist.value.push({
+    text: '',
+    checked: false
+  })
+  nextTick().then(() => {
+    silent = false
+  })
+}
+
+const removeTask = entry => {
+  checklist.value = remove(checklist.value, entry)
+}
+
+const onChecklistChanged = () => {
+  const now = new Date().getTime()
+  if (now - lastCall > 1000) {
+    lastCall = now
+    const comment = {
+      id: props.comment.id,
+      checklist: checklist.value.filter(item => item.text?.length)
     }
+    emit('checklist-updated', comment)
+  }
+}
+
+const acknowledgeComment = comment => {
+  emit('ack-comment', comment)
+}
+
+const timeCodeClicked = event => {
+  const data = { ...event.target.dataset }
+  data.frame = data.frame - 1
+  pauseEvent(event)
+  emit('time-code-clicked', data)
+}
+
+const onChecklistTimecodeClicked = data => {
+  emit('time-code-clicked', {
+    versionRevision: data.revision,
+    frame: data.frame - 1
+  })
+}
+
+const setFrame = data => {
+  emit('time-code-clicked', {
+    versionRevision: data.revision,
+    frame: data.frame - 1
+  })
+}
+
+const changePreviewValidationStatus = previewFiles => {
+  if (!isCurrentUserManager.value) {
+    return
+  }
+  const statusMap = {
+    validated: 'rejected',
+    rejected: 'neutral',
+    neutral: 'validated'
+  }
+  const status = statusMap[previewFiles[0].validation_status] || 'validated'
+  previewFiles.forEach(previewFile => {
+    store.dispatch('updatePreviewFileValidationStatus', { previewFile, status })
+  })
+}
+
+const showReplyWidget = () => {
+  showReply.value = true
+  nextTick(() => {
+    replyRef.value?.focus()
+  })
+}
+
+const onDrop = event => {
+  event.preventDefault()
+  const droppedFiles = event.dataTransfer.files
+  if (droppedFiles.length > 0) {
+    const form = new FormData()
+    form.append('file', droppedFiles[0])
+    addAttachmentToReply([form])
+  }
+}
+
+const onDragover = event => {
+  event.preventDefault()
+}
+
+const onDragleave = event => {
+  event.preventDefault()
+}
+
+const onReplyClicked = () => {
+  isReplyLoading.value = true
+  store
+    .dispatch('replyToComment', {
+      comment: props.comment,
+      text: replyText.value,
+      attachments: replyAttachments.value
+    })
+    .then(() => {
+      isReplyLoading.value = false
+      replyText.value = ''
+      showReply.value = false
+      replyAttachments.value = []
+    })
+    .catch(error => {
+      console.error(error)
+      isReplyLoading.value = false
+    })
+}
+
+const onDeleteReplyClicked = reply => {
+  store
+    .dispatch('deleteReply', { comment: props.comment, reply })
+    .then(() => {
+      isReplyLoading.value = false
+    })
+    .catch(console.error)
+}
+
+const onAtTextChanged = input => {
+  if (input.includes('@frame')) {
+    replyText.value = replaceTimeWithTimecode(
+      input,
+      props.revision,
+      props.frame + 1,
+      props.fps
+    )
+  }
+}
+
+const onSelectEmoji = emoji => {
+  const textarea = replyRef.value
+  replyText.value = stringHelpers.insertInTextArea(textarea, emoji.i)
+}
+
+const addAttachmentToReply = addedFiles => {
+  modals.addAttachment = false
+  replyAttachments.value = replyAttachments.value.concat(addedFiles)
+}
+
+const removeReplyAttachment = attachment => {
+  replyAttachments.value = replyAttachments.value.filter(a => a !== attachment)
+}
+
+const onPaste = event => {
+  if (modals.addAttachment || !showReply.value) return
+  if (replyRef.value !== document.activeElement) return
+  const pastedFiles = event.clipboardData.files
+  if (pastedFiles.length > 0) {
+    const form = new FormData()
+    form.append('file', pastedFiles[0])
+    addAttachmentToReply([form])
   }
 }
+
+onMounted(() => {
+  if (props.comment.checklist) {
+    silent = true
+    checklist.value = [...props.comment.checklist]
+    nextTick().then(() => {
+      silent = false
+    })
+  }
+  Array.from(document.getElementsByClassName(uniqueClassName)).forEach(
+    element => {
+      element.addEventListener('click', timeCodeClicked)
+    }
+  )
+  window.addEventListener('paste', onPaste, false)
+})
+
+onBeforeUnmount(() => {
+  Array.from(document.getElementsByClassName(uniqueClassName)).forEach(
+    element => {
+      element.removeEventListener('click', timeCodeClicked)
+    }
+  )
+  window.removeEventListener('paste', onPaste, false)
+})
+
+watch(
+  () => props.comment.checklist,
+  () => {
+    silent = true
+    checklist.value = [...props.comment.checklist]
+    nextTick().then(() => {
+      silent = false
+    })
+  }
+)
+
+watch(checklist, () => {
+  if (!silent) {
+    onChecklistChanged()
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/CommentMenu.vue b/src/components/widgets/CommentMenu.vue
index 03b6d9be4f..548d8dc732 100644
--- a/src/components/widgets/CommentMenu.vue
+++ b/src/components/widgets/CommentMenu.vue
@@ -12,31 +12,27 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'comment-menu',
-
-  props: {
-    isEditable: {
-      type: Boolean,
-      default: true
-    },
-    isEmpty: {
-      type: Boolean,
-      default: false
-    },
-    isPinnable: {
-      type: Boolean,
-      default: true
-    },
-    isPinned: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+defineProps({
+  isEditable: {
+    type: Boolean,
+    default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   },
+  isPinnable: {
+    type: Boolean,
+    default: true
+  },
+  isPinned: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  emits: ['delete-clicked', 'edit-clicked', 'pin-clicked']
-}
+defineEmits(['delete-clicked', 'edit-clicked', 'pin-clicked'])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ConceptCard.vue b/src/components/widgets/ConceptCard.vue
index 15ea0474e2..e544e3bccb 100644
--- a/src/components/widgets/ConceptCard.vue
+++ b/src/components/widgets/ConceptCard.vue
@@ -42,71 +42,57 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import { getEntityPath } from '@/lib/path'
 
 import assetsStore from '@/store/modules/assets.js'
 import EntityPreview from '@/components/widgets/EntityPreview.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
-export default {
-  name: 'concept-card',
+const store = useStore()
+const currentProduction = computed(() => store.getters.currentProduction)
+const isTVShow = computed(() => store.getters.isTVShow)
+const personMap = computed(() => store.getters.personMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
 
-  components: {
-    EntityPreview,
-    PeopleAvatar
-  },
-
-  props: {
-    concept: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['click'],
-
-  computed: {
-    ...mapGetters([
-      'assetMap',
-      'currentProduction',
-      'isTVShow',
-      'personMap',
-      'taskStatusMap'
-    ]),
-
-    assetMap() {
-      return assetsStore.cache.assetMap
-    },
-
-    linkedEntities() {
-      return this.concept.entity_concept_links
-        .map(id => this.assetMap.get(id))
-        .filter(Boolean)
-    },
-
-    hasTask() {
-      return this.concept.tasks?.length
-    },
-
-    taskStatus() {
-      return this.taskStatusMap.get(this.concept.tasks[0].task_status_id)
-    }
-  },
-
-  methods: {
-    entityPath(entity, section) {
-      const episodeId = this.isTVShow ? entity.episode_id || 'main' : null
-      return getEntityPath(
-        entity.id,
-        this.currentProduction.id,
-        section,
-        episodeId,
-        { section: 'concepts' }
-      )
-    }
+const props = defineProps({
+  concept: {
+    type: Object,
+    required: true
   }
+})
+
+defineEmits(['click'])
+
+const assetMap = computed(() => {
+  return assetsStore.cache.assetMap
+})
+
+const linkedEntities = computed(() => {
+  return props.concept.entity_concept_links
+    .map(id => assetMap.value.get(id))
+    .filter(Boolean)
+})
+
+const hasTask = computed(() => {
+  return props.concept.tasks?.length
+})
+
+const taskStatus = computed(() => {
+  return taskStatusMap.value.get(props.concept.tasks[0].task_status_id)
+})
+
+const entityPath = (entity, section) => {
+  const episodeId = isTVShow.value ? entity.episode_id || 'main' : null
+  return getEntityPath(
+    entity.id,
+    currentProduction.value.id,
+    section,
+    episodeId,
+    { section: 'concepts' }
+  )
 }
 </script>
 
diff --git a/src/components/widgets/DateField.vue b/src/components/widgets/DateField.vue
index e5187815e9..374e174b1a 100644
--- a/src/components/widgets/DateField.vue
+++ b/src/components/widgets/DateField.vue
@@ -23,77 +23,74 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'date-field',
+const store = useStore()
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+const user = computed(() => store.getters.user)
 
-  props: {
-    canDelete: {
-      default: true,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    format: {
-      default: 'yyyy-MM-dd',
-      type: String
-    },
-    label: {
-      default: '',
-      type: String
-    },
-    minDate: {
-      default: null,
-      type: [Date, String]
-    },
-    maxDate: {
-      default: null,
-      type: [Date, String]
-    },
-    modelValue: {
-      default: () => new Date(),
-      type: [Date, String]
-    },
-    placeholder: {
-      default: null,
-      type: String
-    },
-    utc: {
-      default: false,
-      type: Boolean
-    },
-    weekDaysDisabled: {
-      default: false,
-      type: Boolean
-    },
-    withMargin: {
-      default: true,
-      type: Boolean
-    }
+const props = defineProps({
+  canDelete: {
+    default: true,
+    type: Boolean
   },
+  disabled: {
+    default: false,
+    type: Boolean
+  },
+  format: {
+    default: 'yyyy-MM-dd',
+    type: String
+  },
+  label: {
+    default: '',
+    type: String
+  },
+  minDate: {
+    default: null,
+    type: [Date, String]
+  },
+  maxDate: {
+    default: null,
+    type: [Date, String]
+  },
+  modelValue: {
+    default: () => new Date(),
+    type: [Date, String]
+  },
+  placeholder: {
+    default: null,
+    type: String
+  },
+  utc: {
+    default: false,
+    type: Boolean
+  },
+  weekDaysDisabled: {
+    default: false,
+    type: Boolean
+  },
+  withMargin: {
+    default: true,
+    type: Boolean
+  }
+})
 
-  emits: ['update:modelValue'],
-
-  computed: {
-    ...mapGetters(['isDarkTheme', 'user']),
+const emit = defineEmits(['update:modelValue'])
 
-    localValue: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        if (value?.setHours) {
-          value.setHours(0, 0, 0, 0)
-        }
-        this.$emit('update:modelValue', value)
-      }
+const localValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    if (value?.setHours) {
+      value.setHours(0, 0, 0, 0)
     }
+    emit('update:modelValue', value)
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/EntityPreview.vue b/src/components/widgets/EntityPreview.vue
index 7f16b48a93..8d52622bdf 100644
--- a/src/components/widgets/EntityPreview.vue
+++ b/src/components/widgets/EntityPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="preview-wrapper preview-video" v-if="isMovie && showMovie">
     <video-viewer
-      ref="video-viewer"
+      ref="videoViewerRef"
       :is-repeating="true"
       :default-height="height"
       :preview="{
@@ -14,7 +14,7 @@
     <button-simple
       class="button-play"
       icon="play"
-      ref="button-play"
+      ref="buttonPlayRef"
       :title="$t('playlists.actions.play')"
       @click="onVideoClicked()"
     />
@@ -52,101 +52,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+import { useStore } from 'vuex'
 import { EyeIcon } from 'lucide-vue-next'
 
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import VideoViewer from '@/components/previews/VideoViewer.vue'
 
-export default {
-  name: 'entity-preview',
+const store = useStore()
 
-  components: {
-    ButtonSimple,
-    EyeIcon,
-    VideoViewer
+const props = defineProps({
+  entity: {
+    default: () => {},
+    type: Object
   },
-
-  data() {
-    return {
-      isPlaying: false
-    }
+  cover: {
+    default: false,
+    type: Boolean
   },
-
-  props: {
-    entity: {
-      default: () => {},
-      type: Object
-    },
-    cover: {
-      default: false,
-      type: Boolean
-    },
-    width: {
-      default: null,
-      type: Number
-    },
-    height: {
-      default: null,
-      type: Number
-    },
-    emptyHeight: {
-      default: null,
-      type: Number
-    },
-    emptyWidth: {
-      default: null,
-      type: Number
-    },
-    previewFileId: {
-      default: null,
-      type: String
-    },
-    isRoundedTopBorder: {
-      default: false,
-      type: Boolean
-    },
-    showMovie: {
-      default: true,
-      type: Boolean
-    }
+  width: {
+    default: null,
+    type: Number
   },
-
-  computed: {
-    isMovie() {
-      return this.entity.preview_file_extension === 'mp4'
-    },
-
-    thumbnailPath() {
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-      return `/api/pictures/previews/preview-files/${previewFileId}.png`
-    },
-
-    thumbnailKey() {
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-      return `preview-${previewFileId}`
-    }
+  height: {
+    default: null,
+    type: Number
   },
+  emptyHeight: {
+    default: null,
+    type: Number
+  },
+  emptyWidth: {
+    default: null,
+    type: Number
+  },
+  previewFileId: {
+    default: null,
+    type: String
+  },
+  isRoundedTopBorder: {
+    default: false,
+    type: Boolean
+  },
+  showMovie: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const isPlaying = ref(false)
+const videoViewerRef = ref(null)
+const buttonPlayRef = ref(null)
+
+const isMovie = computed(() => {
+  return props.entity.preview_file_extension === 'mp4'
+})
+
+const thumbnailPath = computed(() => {
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+  return `/api/pictures/previews/preview-files/${previewFileId}.png`
+})
+
+const thumbnailKey = computed(() => {
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+  return `preview-${previewFileId}`
+})
+
+const onPictureClicked = () => {
+  if (props.noPreview) return
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+  if (previewFileId) {
+    store.commit('SHOW_PREVIEW_FILE', previewFileId)
+  }
+}
 
-  methods: {
-    onPictureClicked() {
-      if (this.noPreview) return
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-      if (previewFileId) {
-        this.$store.commit('SHOW_PREVIEW_FILE', previewFileId)
-      }
-    },
-    onVideoClicked() {
-      if (this.isPlaying) {
-        this.$refs['video-viewer'].pause()
-        this.$refs['button-play'].$el.style.display = 'initial'
-      } else {
-        this.$refs['video-viewer'].play()
-        this.$refs['button-play'].$el.style.display = 'none'
-      }
-      this.isPlaying = !this.isPlaying
-    }
+const onVideoClicked = () => {
+  if (isPlaying.value) {
+    videoViewerRef.value.pause()
+    buttonPlayRef.value.$el.style.display = 'initial'
+  } else {
+    videoViewerRef.value.play()
+    buttonPlayRef.value.$el.style.display = 'none'
   }
+  isPlaying.value = !isPlaying.value
 }
 </script>
 
diff --git a/src/components/widgets/EntityThumbnail.vue b/src/components/widgets/EntityThumbnail.vue
index a688b43dc2..e8be3bcd95 100644
--- a/src/components/widgets/EntityThumbnail.vue
+++ b/src/components/widgets/EntityThumbnail.vue
@@ -44,148 +44,143 @@
   </span>
 </template>
 
-<script>
-export default {
-  name: 'entity-thumbnail',
-
-  props: {
-    entity: {
-      default: () => {},
-      type: Object
-    },
-    square: {
-      default: false,
-      type: Boolean
-    },
-    width: {
-      default: null,
-      type: Number
-    },
-    height: {
-      default: null,
-      type: Number
-    },
-    maxWidth: {
-      default: null,
-      type: Number
-    },
-    maxHeight: {
-      default: null,
-      type: Number
-    },
-    noPreview: {
-      default: false,
-      type: Boolean
-    },
-    emptyHeight: {
-      default: 30,
-      type: Number
-    },
-    emptyWidth: {
-      default: 50,
-      type: Number
-    },
-    previewFileId: {
-      default: null,
-      type: String
-    },
-    withLink: {
-      default: true,
-      type: Boolean
-    }
-  },
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useStore } from 'vuex'
 
-  data() {
-    return {
-      timer: ''
-    }
-  },
+const store = useStore()
 
-  computed: {
-    originalPath() {
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-      return '/api/pictures/originals/preview-files/' + previewFileId + '.png'
-    },
-
-    isPreview() {
-      const previewFileId = this.previewFileId || this.entity?.preview_file_id
-      return previewFileId?.length > 0
-    },
-
-    imgStyle() {
-      const style = {}
-      if (this.emptyWidth) {
-        style['max-width'] = this.emptyWidth + 'px'
-        style['min-width'] = this.emptyWidth + 'px'
-      } else if (this.maxWidth) {
-        style['max-width'] = this.maxWidth + 'px'
-      } else if (this.width) {
-        style.width = this.width + 'px'
-        style['min-width'] = this.width + 'px'
-      }
-      if (this.emptyHeight) {
-        style['max-height'] = this.emptyHeight + 'px'
-        style['min-height'] = this.emptyHeight + 'px'
-      } else if (this.maxHeight) {
-        style['max-height'] = this.maxHeight + 'px'
-      } else if (this.height) {
-        style.height = this.height + 'px'
-      }
-      return style
-    },
-
-    thumbnailPath() {
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-
-      if (this.square) {
-        return (
-          '/api/pictures/thumbnails-square/preview-files/' +
-          previewFileId +
-          '.png'
-        )
-      } else {
-        if (this.width && this.width > 150) {
-          return (
-            '/api/pictures/previews/preview-files/' +
-            previewFileId +
-            '.png' +
-            this.timer
-          )
-        } else {
-          return (
-            '/api/pictures/thumbnails/preview-files/' +
-            previewFileId +
-            '.png' +
-            this.timer
-          )
-        }
-      }
-    },
-
-    thumbnailKey() {
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-      return `thumbnail-${previewFileId}`
-    }
+const props = defineProps({
+  entity: {
+    default: () => {},
+    type: Object
   },
-
-  methods: {
-    onClicked() {
-      if (this.noPreview) return
-      const previewFileId = this.previewFileId || this.entity.preview_file_id
-      this.$store.commit('SHOW_PREVIEW_FILE', previewFileId)
-    }
+  square: {
+    default: false,
+    type: Boolean
   },
-
-  watch: {
-    previewFileId() {
-      this.timer = '?t=' + new Date().valueOf()
-    },
-
-    'entity.preview_file_id'() {
-      this.timer = '?t=' + new Date().valueOf()
+  width: {
+    default: null,
+    type: Number
+  },
+  height: {
+    default: null,
+    type: Number
+  },
+  maxWidth: {
+    default: null,
+    type: Number
+  },
+  maxHeight: {
+    default: null,
+    type: Number
+  },
+  noPreview: {
+    default: false,
+    type: Boolean
+  },
+  emptyHeight: {
+    default: 30,
+    type: Number
+  },
+  emptyWidth: {
+    default: 50,
+    type: Number
+  },
+  previewFileId: {
+    default: null,
+    type: String
+  },
+  withLink: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const timer = ref('')
+
+const originalPath = computed(() => {
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+  return '/api/pictures/originals/preview-files/' + previewFileId + '.png'
+})
+
+const isPreview = computed(() => {
+  const previewFileId = props.previewFileId || props.entity?.preview_file_id
+  return previewFileId?.length > 0
+})
+
+const imgStyle = computed(() => {
+  const style = {}
+  if (props.emptyWidth) {
+    style['max-width'] = props.emptyWidth + 'px'
+    style['min-width'] = props.emptyWidth + 'px'
+  } else if (props.maxWidth) {
+    style['max-width'] = props.maxWidth + 'px'
+  } else if (props.width) {
+    style.width = props.width + 'px'
+    style['min-width'] = props.width + 'px'
+  }
+  if (props.emptyHeight) {
+    style['max-height'] = props.emptyHeight + 'px'
+    style['min-height'] = props.emptyHeight + 'px'
+  } else if (props.maxHeight) {
+    style['max-height'] = props.maxHeight + 'px'
+  } else if (props.height) {
+    style.height = props.height + 'px'
+  }
+  return style
+})
+
+const thumbnailPath = computed(() => {
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+
+  if (props.square) {
+    return (
+      '/api/pictures/thumbnails-square/preview-files/' + previewFileId + '.png'
+    )
+  } else {
+    if (props.width && props.width > 150) {
+      return (
+        '/api/pictures/previews/preview-files/' +
+        previewFileId +
+        '.png' +
+        timer.value
+      )
+    } else {
+      return (
+        '/api/pictures/thumbnails/preview-files/' +
+        previewFileId +
+        '.png' +
+        timer.value
+      )
     }
   }
+})
+
+const thumbnailKey = computed(() => {
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+  return `thumbnail-${previewFileId}`
+})
+
+const onClicked = () => {
+  if (props.noPreview) return
+  const previewFileId = props.previewFileId || props.entity.preview_file_id
+  store.commit('SHOW_PREVIEW_FILE', previewFileId)
 }
+
+watch(
+  () => props.previewFileId,
+  () => {
+    timer.value = '?t=' + new Date().valueOf()
+  }
+)
+
+watch(
+  () => props.entity?.preview_file_id,
+  () => {
+    timer.value = '?t=' + new Date().valueOf()
+  }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ErrorText.vue b/src/components/widgets/ErrorText.vue
index 19ed1af0d5..340c22a2ff 100644
--- a/src/components/widgets/ErrorText.vue
+++ b/src/components/widgets/ErrorText.vue
@@ -10,22 +10,19 @@
   </p>
 </template>
 
-<script>
-export default {
-  name: 'error-text',
-  props: {
-    text: {
-      default: '',
-      type: String
-    },
-    hidden: {
-      default: false,
-      type: Boolean
-    },
-    alignRight: {
-      default: false,
-      type: Boolean
-    }
+<script setup>
+defineProps({
+  text: {
+    default: '',
+    type: String
+  },
+  hidden: {
+    default: false,
+    type: Boolean
+  },
+  alignRight: {
+    default: false,
+    type: Boolean
   }
-}
+})
 </script>
diff --git a/src/components/widgets/FileUpload.vue b/src/components/widgets/FileUpload.vue
index 67fce8e3e6..6949af8ffa 100644
--- a/src/components/widgets/FileUpload.vue
+++ b/src/components/widgets/FileUpload.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="wrapper"
+    ref="wrapperRef"
     @drop="onDrop"
     @dragover="onDragover"
     @dragleave="onDragleave"
@@ -15,7 +15,7 @@
         >
           {{ label }}
           <input
-            ref="uploadInput"
+            ref="uploadInputRef"
             class="visuallyhidden"
             type="file"
             :accept="accept"
@@ -42,118 +42,115 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'file-upload',
+<script setup>
+import { ref, onMounted } from 'vue'
 
-  props: {
-    accept: {
-      default: '.csv',
-      type: String
-    },
-    isPrimary: {
-      default: true,
-      type: Boolean
-    },
-    label: {
-      type: String,
-      required: true
-    },
-    multiple: {
-      default: false,
-      type: Boolean
-    },
-    uploadFieldName: {
-      default: 'file',
-      type: String
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    hideFileNames: {
-      type: Boolean,
-      default: false
-    }
+const props = defineProps({
+  accept: {
+    default: '.csv',
+    type: String
   },
-
-  emits: ['fileselected'],
-
-  data() {
-    return {
-      isInitial: true,
-      isSaving: false,
-      uploadedFiles: []
-    }
+  isPrimary: {
+    default: true,
+    type: Boolean
   },
-
-  mounted() {
-    this.reset()
-    const events = [
-      'drag',
-      'dragstart',
-      'dragend',
-      'dragover',
-      'dragenter',
-      'dragleave',
-      'drop'
-    ]
-    events.forEach(evt => {
-      this.$refs.wrapper.addEventListener(evt, e => {
-        e.preventDefault()
-        e.stopPropagation()
-      })
-    })
+  label: {
+    type: String,
+    required: true
   },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  uploadFieldName: {
+    default: 'file',
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  hideFileNames: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['fileselected'])
+
+const isInitial = ref(true)
+const isSaving = ref(false)
+const uploadedFiles = ref([])
+const wrapperRef = ref(null)
+const uploadInputRef = ref(null)
+let isDragging = false
 
-  methods: {
-    filesChange(name, files) {
-      this.uploadedFiles = []
-      const forms = []
-      for (let i = 0, numFiles = files.length; i < numFiles; i++) {
-        const file = files[i]
-        const formData = new FormData()
-        formData.append(this.uploadFieldName, file, file.name)
-        forms.push(formData)
-        if (this.multiple) {
-          this.uploadedFiles.push(file.name)
-        } else {
-          this.uploadedFiles = [file.name]
-        }
-      }
-      if (this.multiple) {
-        this.$emit('fileselected', forms)
-      } else {
-        this.$emit('fileselected', forms[0])
-      }
-    },
+const filesChange = (name, files) => {
+  uploadedFiles.value = []
+  const forms = []
+  for (let i = 0, numFiles = files.length; i < numFiles; i++) {
+    const file = files[i]
+    const formData = new FormData()
+    formData.append(props.uploadFieldName, file, file.name)
+    forms.push(formData)
+    if (props.multiple) {
+      uploadedFiles.value.push(file.name)
+    } else {
+      uploadedFiles.value = [file.name]
+    }
+  }
+  if (props.multiple) {
+    emit('fileselected', forms)
+  } else {
+    emit('fileselected', forms[0])
+  }
+}
 
-    reset() {
-      this.isSaving = false
-      this.isInitial = true
-      this.uploadedFiles = []
-      if (this.$refs.uploadInput) {
-        this.$refs.uploadInput.value = ''
-      }
-    },
+const reset = () => {
+  isSaving.value = false
+  isInitial.value = true
+  uploadedFiles.value = []
+  if (uploadInputRef.value) {
+    uploadInputRef.value.value = ''
+  }
+}
 
-    onDragover() {
-      this.isDragging = true
-    },
+const onDragover = () => {
+  isDragging = true
+}
 
-    onDragleave() {
-      this.isDragging = false
-    },
+const onDragleave = () => {
+  isDragging = false
+}
 
-    onDrop(event) {
-      if (event.dataTransfer.files) {
-        this.isDragging = false
-        this.isSaving = false
-        this.filesChange('file', event.dataTransfer.files)
-      }
-    }
+const onDrop = event => {
+  if (event.dataTransfer.files) {
+    isDragging = false
+    isSaving.value = false
+    filesChange('file', event.dataTransfer.files)
   }
 }
+
+onMounted(() => {
+  reset()
+  const events = [
+    'drag',
+    'dragstart',
+    'dragend',
+    'dragover',
+    'dragenter',
+    'dragleave',
+    'drop'
+  ]
+  events.forEach(evt => {
+    wrapperRef.value.addEventListener(evt, e => {
+      e.preventDefault()
+      e.stopPropagation()
+    })
+  })
+})
+
+defineExpose({ reset })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/GroupButton.vue b/src/components/widgets/GroupButton.vue
index bed0f4a0ca..633bc905f7 100644
--- a/src/components/widgets/GroupButton.vue
+++ b/src/components/widgets/GroupButton.vue
@@ -9,18 +9,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'group-button',
-
-  props: {
-    align: {
-      default: 'right',
-      type: String,
-      validator: prop => ['right', 'left', 'center'].includes(prop)
-    }
+<script setup>
+defineProps({
+  align: {
+    default: 'right',
+    type: String,
+    validator: prop => ['right', 'left', 'center'].includes(prop)
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/InfoQuestionMark.vue b/src/components/widgets/InfoQuestionMark.vue
index 72837442af..505beb8235 100644
--- a/src/components/widgets/InfoQuestionMark.vue
+++ b/src/components/widgets/InfoQuestionMark.vue
@@ -9,33 +9,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { HelpCircleIcon } from 'lucide-vue-next'
 
 import { renderMarkdown } from '@/lib/render'
 
-export default {
-  name: 'info-question-mark',
-
-  components: {
-    HelpCircleIcon
-  },
-
-  props: {
-    text: {
-      type: String,
-      required: true
-    },
-    position: {
-      type: String,
-      validator: value => ['left', 'right'].includes(value)
-    }
+defineProps({
+  text: {
+    type: String,
+    required: true
   },
-
-  methods: {
-    renderMarkdown
+  position: {
+    type: String,
+    validator: value => ['left', 'right'].includes(value)
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/KitsuIcon.vue b/src/components/widgets/KitsuIcon.vue
index 59751f8e95..0a0ededeae 100644
--- a/src/components/widgets/KitsuIcon.vue
+++ b/src/components/widgets/KitsuIcon.vue
@@ -2,7 +2,9 @@
   <img :class="{ active }" :src="imgUrl" :title="title" :alt="alt" />
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+
 import assets from '@/assets/icons/fi-assets.svg'
 import assetTypeStats from '@/assets/icons/fi-asset-stats.svg'
 import addThumbnail from '@/assets/icons/fi-add-thumbnail.svg'
@@ -131,32 +133,26 @@ const icons = {
   waveform
 }
 
-export default {
-  name: 'kitsu-icon',
-
-  props: {
-    name: {
-      required: true,
-      type: String
-    },
-    title: {
-      type: String
-    },
-    alt: {
-      type: String
-    },
-    active: {
-      default: false,
-      type: Boolean
-    }
+const props = defineProps({
+  name: {
+    required: true,
+    type: String
   },
-
-  computed: {
-    imgUrl() {
-      return icons[this.name]
-    }
+  title: {
+    type: String
+  },
+  alt: {
+    type: String
+  },
+  active: {
+    default: false,
+    type: Boolean
   }
-}
+})
+
+const imgUrl = computed(() => {
+  return icons[props.name]
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/LightEntityThumbnail.vue b/src/components/widgets/LightEntityThumbnail.vue
index 490c6753cf..21bc9f2c3d 100644
--- a/src/components/widgets/LightEntityThumbnail.vue
+++ b/src/components/widgets/LightEntityThumbnail.vue
@@ -25,54 +25,50 @@
   </span>
 </template>
 
-<script>
-export default {
-  name: 'light-entity-thumbnail',
+<script setup>
+import { computed } from 'vue'
 
-  props: {
-    previewFileId: {
-      type: String
-    },
-    extension: {
-      type: String
-    },
-    width: {
-      default: '150px',
-      type: String
-    },
-    height: {
-      default: '50px',
-      type: String
-    },
-    maxHeight: {
-      default: 'auto',
-      type: String
-    },
-    maxWidth: {
-      default: 'auto',
-      type: String
-    },
-    emptyHeight: {
-      type: String
-    },
-    emptyWidth: {
-      type: String
-    },
-    type: {
-      default: 'thumbnails',
-      type: String
-    }
+const props = defineProps({
+  previewFileId: {
+    type: String
   },
-
-  computed: {
-    isPreviewWithThumbnail() {
-      return (
-        this.previewFileId &&
-        (!this.extension || ['mp4', 'png'].includes(this.extension))
-      )
-    }
+  extension: {
+    type: String
+  },
+  width: {
+    default: '150px',
+    type: String
+  },
+  height: {
+    default: '50px',
+    type: String
+  },
+  maxHeight: {
+    default: 'auto',
+    type: String
+  },
+  maxWidth: {
+    default: 'auto',
+    type: String
+  },
+  emptyHeight: {
+    type: String
+  },
+  emptyWidth: {
+    type: String
+  },
+  type: {
+    default: 'thumbnails',
+    type: String
   }
-}
+})
+
+const isPreviewWithThumbnail = computed(() => {
+  return (
+    props.previewFileId &&
+    (!props.extension || ['mp4', 'png'].includes(props.extension))
+  )
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ListPageHeader.vue b/src/components/widgets/ListPageHeader.vue
index b19aa712f3..50f30f3190 100644
--- a/src/components/widgets/ListPageHeader.vue
+++ b/src/components/widgets/ListPageHeader.vue
@@ -21,33 +21,24 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 
-export default {
-  name: 'list-page-header',
-
-  components: {
-    ButtonSimple,
-    PageTitle
+defineProps({
+  isExportable: {
+    type: Boolean,
+    default: true
   },
-
-  props: {
-    isExportable: {
-      type: Boolean,
-      default: true
-    },
-    newEntryLabel: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
+  newEntryLabel: {
+    type: String,
+    default: ''
   },
+  title: {
+    type: String,
+    default: ''
+  }
+})
 
-  emits: ['export-clicked', 'new-clicked']
-}
+defineEmits(['export-clicked', 'new-clicked'])
 </script>
diff --git a/src/components/widgets/MetadataField.vue b/src/components/widgets/MetadataField.vue
index 3fcefcdee3..b1adc37b72 100644
--- a/src/components/widgets/MetadataField.vue
+++ b/src/components/widgets/MetadataField.vue
@@ -72,8 +72,9 @@
   />
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
 
@@ -82,72 +83,99 @@ import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ComboboxTag from '@/components/widgets/ComboboxTag.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'metadata-field',
-
-  mixins: [descriptorMixin],
-
-  components: {
-    Combobox,
-    ComboboxBoolean,
-    ComboboxTag,
-    TextField
+const store = useStore()
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const isCurrentUserSupervisor = computed(
+  () => store.getters.isCurrentUserSupervisor
+)
+const user = computed(() => store.getters.user)
+
+const props = defineProps({
+  descriptor: {
+    type: Object,
+    required: true
   },
-
-  props: {
-    descriptor: {
-      type: Object,
-      required: true
-    },
-    entity: {
-      type: Object,
-      required: true
-    },
-    label: {
-      type: String
-    },
-    modelValue: {
-      type: [Number, String, Object],
-      default: ''
-    }
+  entity: {
+    type: Object,
+    required: true
   },
-
-  emits: ['enter', 'update:modelValue'],
-
-  computed: {
-    ...mapGetters(['isCurrentUserManager', 'isCurrentUserSupervisor', 'user']),
-
-    descriptorChecklistValues() {
-      return this.getDescriptorChecklistValues(this.descriptor)
-    },
-
-    metadataChecklistValues() {
-      return this.getMetadataChecklistValues(this.descriptor, this.entity)
-    },
-
-    isEditable() {
-      return Boolean(
-        this.isCurrentUserManager ||
-        this.isSupervisorInDepartments(this.descriptor.departments)
-      )
-    }
+  label: {
+    type: String
   },
+  modelValue: {
+    type: [Number, String, Object],
+    default: ''
+  }
+})
+
+const emit = defineEmits(['enter', 'update:modelValue'])
+
+const {
+  getDescriptorChecklistValues,
+  getMetadataChecklistValues,
+  getDescriptorChoicesOptions,
+  isSupervisorInDepartments
+} = descriptorMixin.methods
+
+const descriptorChecklistValues = computed(() => {
+  return getDescriptorChecklistValues(props.descriptor)
+})
+
+const metadataChecklistValues = computed(() => {
+  return getMetadataChecklistValues.call(
+    { getMetadataFieldValue, getDescriptorChecklistValues },
+    props.descriptor,
+    props.entity
+  )
+})
+
+const isEditable = computed(() => {
+  return Boolean(
+    isCurrentUserManager.value ||
+    isSupervisorInDepartments.call(
+      {
+        isCurrentUserSupervisor: isCurrentUserSupervisor.value,
+        user: user.value
+      },
+      props.descriptor.departments
+    )
+  )
+})
+
+const getMetadataFieldValue = (descriptor, entity) => {
+  if (
+    entity.data &&
+    descriptor.field_name in entity.data &&
+    entity.data[descriptor.field_name] != null
+  ) {
+    return entity.data[descriptor.field_name]
+  } else if (
+    entity.entity_data &&
+    descriptor.field_name in entity.entity_data &&
+    entity.entity_data[descriptor.field_name] != null
+  ) {
+    return entity.entity_data[descriptor.field_name]
+  } else {
+    return ''
+  }
+}
 
-  methods: {
-    updateValue(value) {
-      this.$emit('update:modelValue', value)
-    },
+const updateValue = value => {
+  emit('update:modelValue', value)
+}
 
-    onEnter() {
-      this.$emit('enter')
-    },
+const onEnter = () => {
+  emit('enter')
+}
 
-    onMetadataCheckboxChanged(option, value) {
-      const values = this.metadataChecklistValues
-      values[option] = value
-      this.updateValue(JSON.stringify(values))
-    }
-  }
+const onMetadataCheckboxChanged = (option, value) => {
+  const values = getMetadataChecklistValues.call(
+    { getMetadataFieldValue, getDescriptorChecklistValues },
+    props.descriptor,
+    props.entity
+  )
+  values[option] = value
+  updateValue(JSON.stringify(values))
 }
 </script>
 
diff --git a/src/components/widgets/MonthField.vue b/src/components/widgets/MonthField.vue
index e7e4b1b192..cd7ca2d2d2 100644
--- a/src/components/widgets/MonthField.vue
+++ b/src/components/widgets/MonthField.vue
@@ -9,130 +9,118 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import moment from 'moment'
 import { range } from '@/lib/time'
 
 import ComboboxNumber from '@/components/widgets/ComboboxNumber.vue'
 
-export default {
-  name: 'month-field',
-
-  emits: ['update:modelValue'],
-  components: {
-    ComboboxNumber
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
   },
-
-  props: {
-    label: {
-      type: String,
-      default: ''
-    },
-    minDate: {
-      type: Date,
-      required: true
-    },
-    maxDate: {
-      type: Date,
-      required: true
-    },
-    modelValue: {}
+  minDate: {
+    type: Date,
+    required: true
   },
-
-  data() {
-    return {
-      selectedMonth: null,
-      selectedYear: null,
-      months: []
-    }
+  maxDate: {
+    type: Date,
+    required: true
   },
+  modelValue: {}
+})
 
-  mounted() {
-    this.months = range(1, 12).map(month => ({
-      value: month - 1,
-      label: moment()
-        .month(month - 1)
-        .format('MMMM')
-    }))
-    if (this.modelValue && this.modelValue.getMonth) {
-      this.selectedMonth = this.modelValue.getMonth()
-      this.selectedYear = this.modelValue.getFullYear()
-    }
-  },
+const emit = defineEmits(['update:modelValue'])
 
-  computed: {
-    availableYears() {
-      const years = []
-      const startYear = this.minDate.getFullYear()
-      const endYear = this.maxDate.getFullYear()
+const selectedMonth = ref(null)
+const selectedYear = ref(null)
+const months = ref([])
+const silent = ref(false)
 
-      for (let year = startYear; year <= endYear; year++) {
-        years.push(year)
-      }
-      return years.map(year => ({
-        value: year,
-        label: year
-      }))
-    },
+onMounted(() => {
+  months.value = range(1, 12).map(month => ({
+    value: month - 1,
+    label: moment()
+      .month(month - 1)
+      .format('MMMM')
+  }))
+  if (props.modelValue && props.modelValue.getMonth) {
+    selectedMonth.value = props.modelValue.getMonth()
+    selectedYear.value = props.modelValue.getFullYear()
+  }
+})
 
-    availableMonths() {
-      const currentYear = this.selectedYear || this.availableYears[0].value
-      const startYear = this.minDate.getFullYear()
-      const endYear = this.maxDate.getFullYear()
-      const minMonth = this.minDate.getMonth()
-      const maxMonth = this.maxDate.getMonth()
+const availableYears = computed(() => {
+  const years = []
+  const startYear = props.minDate.getFullYear()
+  const endYear = props.maxDate.getFullYear()
 
-      return this.months
-        .filter(month => {
-          if (currentYear === startYear && currentYear === endYear) {
-            // If same year, only show months between start and end
-            return month.value >= minMonth && month.value <= maxMonth
-          } else if (currentYear === startYear) {
-            // If start year, only show months after start date
-            return month.value >= minMonth
-          } else if (currentYear === endYear) {
-            // If end year, only show months before end date
-            return month.value <= maxMonth
-          }
-          return true
-        })
-        .map(month => ({
-          value: month.value,
-          label: month.label
-        }))
-    }
-  },
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(year)
+  }
+  return years.map(year => ({
+    value: year,
+    label: year
+  }))
+})
 
-  watch: {
-    modelValue() {
-      this.$options.silent = true
-      if (this.modelValue && this.modelValue.getMonth) {
-        this.selectedMonth = this.modelValue.getMonth()
-        this.selectedYear = this.modelValue.getFullYear()
-      }
-      this.$nextTick(() => {
-        this.$options.silent = false
-      })
-    },
+const availableMonths = computed(() => {
+  const currentYear = selectedYear.value || availableYears.value[0].value
+  const startYear = props.minDate.getFullYear()
+  const endYear = props.maxDate.getFullYear()
+  const minMonth = props.minDate.getMonth()
+  const maxMonth = props.maxDate.getMonth()
 
-    selectedMonth(newMonth) {
-      if (this.$options.silent) return
-      const date = moment(new Date(this.selectedYear, newMonth, 1, 0, 0, 0, 0))
-      this.$emit('update:modelValue', date.startOf('month').toDate())
-    },
+  return months.value
+    .filter(month => {
+      if (currentYear === startYear && currentYear === endYear) {
+        // If same year, only show months between start and end
+        return month.value >= minMonth && month.value <= maxMonth
+      } else if (currentYear === startYear) {
+        // If start year, only show months after start date
+        return month.value >= minMonth
+      } else if (currentYear === endYear) {
+        // If end year, only show months before end date
+        return month.value <= maxMonth
+      }
+      return true
+    })
+    .map(month => ({
+      value: month.value,
+      label: month.label
+    }))
+})
 
-    selectedYear(newYear) {
-      if (this.$options.silent) return
-      this.$nextTick(() => {
-        this.selectedMonth = this.availableMonths[0].value
-        const date = moment(
-          new Date(newYear, this.selectedMonth, 1, 0, 0, 0, 0)
-        )
-        this.$emit('update:modelValue', date.startOf('month').toDate())
-      })
+watch(
+  () => props.modelValue,
+  () => {
+    silent.value = true
+    if (props.modelValue && props.modelValue.getMonth) {
+      selectedMonth.value = props.modelValue.getMonth()
+      selectedYear.value = props.modelValue.getFullYear()
     }
+    nextTick(() => {
+      silent.value = false
+    })
   }
-}
+)
+
+watch(selectedMonth, newMonth => {
+  if (silent.value) return
+  const date = moment(new Date(selectedYear.value, newMonth, 1, 0, 0, 0, 0))
+  emit('update:modelValue', date.startOf('month').toDate())
+})
+
+watch(selectedYear, newYear => {
+  if (silent.value) return
+  nextTick(() => {
+    selectedMonth.value = availableMonths.value[0].value
+    const date = moment(new Date(newYear, selectedMonth.value, 1, 0, 0, 0, 0))
+    emit('update:modelValue', date.startOf('month').toDate())
+  })
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/NotificationBell.vue b/src/components/widgets/NotificationBell.vue
index 7e156c820a..72f2afca0d 100644
--- a/src/components/widgets/NotificationBell.vue
+++ b/src/components/widgets/NotificationBell.vue
@@ -18,31 +18,21 @@
   </div>
 </template>
 
-<script>
-/*
- * Widget use to show if there is notification. The count is extracted directly
- * from the Vuex store.
- * If there is no value, it doesn't show a counter. If there are some, it adds
- * a badge giving the number of unread notifications.
- */
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import { BellIcon } from 'lucide-vue-next'
 
-export default {
-  name: 'notification-bell',
+const route = useRoute()
+const store = useStore()
 
-  components: {
-    BellIcon
-  },
+const isNewNotification = computed(() => store.getters.isNewNotification)
+const notificationCount = computed(() => store.getters.notificationCount)
 
-  computed: {
-    ...mapGetters(['isNewNotification', 'notificationCount']),
-
-    isNotificationPage() {
-      return this.$route.name === 'notifications'
-    }
-  }
-}
+const isNotificationPage = computed(() => {
+  return route.name === 'notifications'
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/PageSubtitle.vue b/src/components/widgets/PageSubtitle.vue
index 829c07b525..27029624ee 100644
--- a/src/components/widgets/PageSubtitle.vue
+++ b/src/components/widgets/PageSubtitle.vue
@@ -2,16 +2,13 @@
   <h2 class="subtitle">{{ text }}</h2>
 </template>
 
-<script>
-export default {
-  name: 'page-subtitle',
-  props: {
-    text: {
-      default: '',
-      type: String
-    }
+<script setup>
+defineProps({
+  text: {
+    default: '',
+    type: String
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/PageTitle.vue b/src/components/widgets/PageTitle.vue
index b759cbe861..f2fc57d08a 100644
--- a/src/components/widgets/PageTitle.vue
+++ b/src/components/widgets/PageTitle.vue
@@ -10,20 +10,17 @@
   </h1>
 </template>
 
-<script>
-export default {
-  name: 'page-title',
-  props: {
-    text: {
-      default: '',
-      type: String
-    },
-    bold: {
-      default: false,
-      type: Boolean
-    }
+<script setup>
+defineProps({
+  text: {
+    default: '',
+    type: String
+  },
+  bold: {
+    default: false,
+    type: Boolean
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/PencilPicker.vue b/src/components/widgets/PencilPicker.vue
index a09f9d5da6..4c3f603a80 100644
--- a/src/components/widgets/PencilPicker.vue
+++ b/src/components/widgets/PencilPicker.vue
@@ -26,37 +26,29 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'pencil-picker',
+<script setup>
+import { ref } from 'vue'
 
-  props: {
-    pencil: {
-      type: String
-    },
-    sizes: {
-      type: Array
-    }
+const props = defineProps({
+  pencil: {
+    type: String
   },
+  sizes: {
+    type: Array
+  }
+})
 
-  emits: ['change'],
+const emit = defineEmits(['change'])
 
-  data() {
-    return {
-      isOpen: false
-    }
-  },
+const isOpen = ref(false)
 
-  methods: {
-    togglePalette() {
-      this.isOpen = !this.isOpen
-    },
+const togglePalette = () => {
+  isOpen.value = !isOpen.value
+}
 
-    onPencilPicked(width) {
-      this.$emit('change', width)
-      this.isOpen = false
-    }
-  }
+const onPencilPicked = width => {
+  emit('change', width)
+  isOpen.value = false
 }
 </script>
 
diff --git a/src/components/widgets/PeopleAvatar.vue b/src/components/widgets/PeopleAvatar.vue
index 7d5ffb93a8..1f3bfbe56f 100644
--- a/src/components/widgets/PeopleAvatar.vue
+++ b/src/components/widgets/PeopleAvatar.vue
@@ -38,49 +38,46 @@
   </span>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'people-avatar',
+const store = useStore()
 
-  props: {
-    person: {
-      type: Object,
-      required: true
-    },
-    size: {
-      type: Number,
-      default: 40
-    },
-    fontSize: {
-      type: Number,
-      default: 18
-    },
-    isLink: {
-      type: Boolean,
-      default: true
-    },
-    isLazy: {
-      type: Boolean,
-      default: true
-    }
+const props = defineProps({
+  person: {
+    type: Object,
+    required: true
   },
+  size: {
+    type: Number,
+    default: 40
+  },
+  fontSize: {
+    type: Number,
+    default: 18
+  },
+  isLink: {
+    type: Boolean,
+    default: true
+  },
+  isLazy: {
+    type: Boolean,
+    default: true
+  }
+})
 
-  computed: {
-    ...mapGetters(['isDarkTheme']),
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
 
-    style() {
-      return {
-        color: this.isDarkTheme ? '#333' : '#FFF',
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        fontSize: this.person.has_avatar ? 0 : `${this.fontSize}px`,
-        backgroundColor: this.person.color
-      }
-    }
+const style = computed(() => {
+  return {
+    color: isDarkTheme.value ? '#333' : '#FFF',
+    width: `${props.size}px`,
+    height: `${props.size}px`,
+    fontSize: props.person.has_avatar ? 0 : `${props.fontSize}px`,
+    backgroundColor: props.person.color
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/PeopleAvatarWithMenu.vue b/src/components/widgets/PeopleAvatarWithMenu.vue
index 5d8c11c1f3..fb09429c09 100644
--- a/src/components/widgets/PeopleAvatarWithMenu.vue
+++ b/src/components/widgets/PeopleAvatarWithMenu.vue
@@ -35,57 +35,49 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
 import { UserIcon, UserMinusIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'people-avatar-with-menu',
+const store = useStore()
 
-  components: {
-    UserIcon,
-    UserMinusIcon
+const props = defineProps({
+  person: {
+    type: Object,
+    default: () => ({
+      id: 'empty',
+      color: '#FFF'
+    })
   },
-
-  props: {
-    person: {
-      type: Object,
-      default: () => ({
-        id: 'empty',
-        color: '#FFF'
-      })
-    },
-    size: {
-      type: Number,
-      default: 40
-    },
-    fontSize: {
-      type: Number,
-      default: 18
-    },
-    isLazy: {
-      type: Boolean,
-      default: true
-    }
+  size: {
+    type: Number,
+    default: 40
+  },
+  fontSize: {
+    type: Number,
+    default: 18
   },
+  isLazy: {
+    type: Boolean,
+    default: true
+  }
+})
 
-  emits: ['unassign'],
+defineEmits(['unassign'])
 
-  computed: {
-    ...mapGetters(['isDarkTheme']),
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
 
-    style() {
-      return {
-        color: this.isDarkTheme ? '#333' : '#FFF',
-        'font-weight': this.isDarkTheme ? 'bold' : 'normal',
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        fontSize: `${this.fontSize}px`,
-        backgroundColor: this.person.color
-      }
-    }
+const style = computed(() => {
+  return {
+    color: isDarkTheme.value ? '#333' : '#FFF',
+    'font-weight': isDarkTheme.value ? 'bold' : 'normal',
+    width: `${props.size}px`,
+    height: `${props.size}px`,
+    fontSize: `${props.fontSize}px`,
+    backgroundColor: props.person.color
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/PeopleField.vue b/src/components/widgets/PeopleField.vue
index beed147260..079353ae1e 100644
--- a/src/components/widgets/PeopleField.vue
+++ b/src/components/widgets/PeopleField.vue
@@ -38,7 +38,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { XIcon } from 'lucide-vue-next'
 import Multiselect from 'vue-multiselect'
 import 'vue-multiselect/dist/vue-multiselect.min.css'
@@ -47,118 +49,105 @@ import { buildNameIndex, indexSearch } from '@/lib/indexing'
 
 import AssignationItem from '@/components/widgets/AssignationItem.vue'
 
-export default {
-  name: 'people-field',
+const { t } = useI18n()
 
-  components: {
-    AssignationItem,
-    Multiselect,
-    XIcon
+const props = defineProps({
+  clearable: {
+    type: Boolean,
+    default: true
   },
-
-  emits: ['select', 'update:modelValue'],
-
-  data() {
-    return {
-      index: null,
-      item: null,
-      items: [],
-      search: ''
-    }
+  disabled: {
+    type: Boolean,
+    default: false
   },
-
-  created() {
-    this.items = this.people
-    this.index = buildNameIndex(this.people)
+  label: {
+    type: String,
+    default: null
   },
-
-  mounted() {
-    this.items = this.people
-    this.item = this.modelValue
-    setTimeout(() => {
-      this.item = this.modelValue
-    }, 10)
+  modelValue: {
+    type: Object,
+    default: () => {}
   },
-
-  props: {
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    modelValue: {
-      type: Object,
-      default: () => {}
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    people: {
-      type: Array,
-      default: () => []
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    small: {
-      type: Boolean,
-      default: false
-    },
-    wide: {
-      type: Boolean,
-      default: false
-    }
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  people: {
+    type: Array,
+    default: () => []
+  },
+  placeholder: {
+    type: String,
+    default: ''
   },
+  small: {
+    type: Boolean,
+    default: false
+  },
+  wide: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['select', 'update:modelValue'])
+
+const multiselect = ref(null)
+const index = ref(null)
+const item = ref(null)
+const items = ref([])
+const search = ref('')
+
+items.value = props.people
+index.value = buildNameIndex(props.people)
+
+onMounted(() => {
+  items.value = props.people
+  item.value = props.modelValue
+  setTimeout(() => {
+    item.value = props.modelValue
+  }, 10)
+})
+
+const onSearchChange = s => {
+  items.value = s?.length ? indexSearch(index.value, [s]) : props.people
+  search.value = s
+}
 
-  methods: {
-    onSearchChange(search) {
-      this.items = search?.length
-        ? indexSearch(this.index, [search])
-        : this.people
-      this.search = search
-    },
-
-    onSelect() {
-      this.$emit('update:modelValue', this.item)
-      this.$emit('select', this.item)
-    },
-
-    clear() {
-      this.item = null
-      this.onSelect()
-    },
-
-    focus() {
-      this.$refs.multiselect.$el.focus()
-    }
+const onSelect = () => {
+  emit('update:modelValue', item.value)
+  emit('select', item.value)
+}
+
+const clear = () => {
+  item.value = null
+  onSelect()
+}
+
+const focus = () => {
+  multiselect.value.$el.focus()
+}
+
+watch(
+  () => props.people,
+  () => {
+    item.value = item.value
+      ? props.people.find(person => person.id === item.value.id)
+      : null
+    items.value = props.people
+    index.value = buildNameIndex(props.people)
   },
+  { deep: true }
+)
 
-  watch: {
-    people: {
-      deep: true,
-      handler() {
-        this.item = this.item
-          ? this.people.find(person => person.id === this.item.id)
-          : null
-        this.items = this.people
-        this.index = buildNameIndex(this.people)
-      }
-    },
-
-    modelValue() {
-      this.item = this.modelValue
-    }
+watch(
+  () => props.modelValue,
+  () => {
+    item.value = props.modelValue
   }
-}
+)
+
+defineExpose({ focus })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/PreviewRoom.vue b/src/components/widgets/PreviewRoom.vue
index 159d2b6f20..3d11fcb00d 100644
--- a/src/components/widgets/PreviewRoom.vue
+++ b/src/components/widgets/PreviewRoom.vue
@@ -24,60 +24,46 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
-export default {
-  name: 'preview-room',
+const store = useStore()
+const personMap = computed(() => store.getters.personMap)
+const user = computed(() => store.getters.user)
 
-  components: {
-    ButtonSimple,
-    PeopleAvatar
-  },
-
-  props: {
-    room: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['join-room', 'leave-room', 'open-room'],
-
-  data() {
-    return {}
-  },
+const props = defineProps({
+  room: {
+    type: Object,
+    default: () => {}
+  }
+})
 
-  computed: {
-    ...mapGetters(['personMap', 'user']),
+const emit = defineEmits(['join-room', 'leave-room', 'open-room'])
 
-    peopleInRoom() {
-      return this.room.people.map(id => this.personMap.get(id)) // .filter(Boolean)
-    },
+const peopleInRoom = computed(() => {
+  return props.room.people.map(id => personMap.value.get(id))
+})
 
-    joinedRoom() {
-      if (!this.room.id) return
-      return this.room.people.find(id => id === this.user.id)
-    }
-  },
+const joinedRoom = computed(() => {
+  if (!props.room.id) return
+  return props.room.people.find(id => id === user.value.id)
+})
 
-  methods: {
-    openRoom() {
-      if (!this.room.id) return
-      this.$emit('open-room', this.room.id)
-    },
+const openRoom = () => {
+  if (!props.room.id) return
+  emit('open-room', props.room.id)
+}
 
-    onJoinClicked() {
-      this.$emit('join-room', this.room.id)
-    },
+const onJoinClicked = () => {
+  emit('join-room', props.room.id)
+}
 
-    onLeaveClicked() {
-      this.$emit('leave-room', this.room.id)
-    }
-  }
+const onLeaveClicked = () => {
+  emit('leave-room', props.room.id)
 }
 </script>
 
diff --git a/src/components/widgets/PreviewRow.vue b/src/components/widgets/PreviewRow.vue
index 987e1bf62e..3801f63429 100644
--- a/src/components/widgets/PreviewRow.vue
+++ b/src/components/widgets/PreviewRow.vue
@@ -11,36 +11,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+
 import ButtonLink from '@/components/widgets/ButtonLink.vue'
 
-export default {
-  name: 'preview-row',
-  components: {
-    ButtonLink
-  },
-  props: {
-    preview: {
-      type: Object,
-      default: () => {}
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    previewPath: {
-      type: Object,
-      default: () => {}
-    }
+const props = defineProps({
+  preview: {
+    type: Object,
+    default: () => {}
   },
-  computed: {
-    label() {
-      const label = `v${this.preview.revision}`
-      return label
-    }
+  selected: {
+    type: Boolean,
+    default: false
   },
-  methods: {}
-}
+  previewPath: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const label = computed(() => {
+  const label = `v${props.preview.revision}`
+  return label
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ProductionName.vue b/src/components/widgets/ProductionName.vue
index bf7ebb0d16..605dfd8a85 100644
--- a/src/components/widgets/ProductionName.vue
+++ b/src/components/widgets/ProductionName.vue
@@ -34,49 +34,43 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
 import colors from '@/lib/colors.js'
 
-export default {
-  name: 'production-name',
-
-  props: {
-    onlyAvatar: {
-      default: false,
-      type: Boolean
-    },
-    production: {
-      default: () => {},
-      type: Object
-    },
-    size: {
-      default: 40,
-      type: Number
-    },
-    withAvatar: {
-      default: true,
-      type: Boolean
-    }
+const props = defineProps({
+  onlyAvatar: {
+    default: false,
+    type: Boolean
+  },
+  production: {
+    default: () => {},
+    type: Object
+  },
+  size: {
+    default: 40,
+    type: Number
   },
+  withAvatar: {
+    default: true,
+    type: Boolean
+  }
+})
 
-  computed: {
-    avatar() {
-      const firstLetter = this.production.name[0] || 'P'
-      return firstLetter.toUpperCase()
-    },
+const avatar = computed(() => {
+  const firstLetter = props.production.name[0] || 'P'
+  return firstLetter.toUpperCase()
+})
 
-    avatarColor() {
-      return colors.fromString(this.production.name)
-    },
+const avatarColor = computed(() => {
+  return colors.fromString(props.production.name)
+})
 
-    thumbnailPath() {
-      const lastUpdate =
-        this.production.updated_at || this.production.created_at
-      const timestamp = Date.parse(lastUpdate)
-      return `/api/pictures/thumbnails/projects/${this.production.id}.png?t=${timestamp}`
-    }
-  }
-}
+const thumbnailPath = computed(() => {
+  const lastUpdate = props.production.updated_at || props.production.created_at
+  const timestamp = Date.parse(lastUpdate)
+  return `/api/pictures/thumbnails/projects/${props.production.id}.png?t=${timestamp}`
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/RouteSectionTabs.vue b/src/components/widgets/RouteSectionTabs.vue
index e9172b97fd..2563957c06 100644
--- a/src/components/widgets/RouteSectionTabs.vue
+++ b/src/components/widgets/RouteSectionTabs.vue
@@ -16,34 +16,28 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'route-section-tabs',
-
-  props: {
-    activeTab: {
-      type: String,
-      default: ''
-    },
-    route: {
-      type: Object,
-      default: () => {}
-    },
-    tabs: {
-      type: Array,
-      default: () => []
-    }
+<script setup>
+const props = defineProps({
+  activeTab: {
+    type: String,
+    default: ''
   },
+  route: {
+    type: Object,
+    default: () => {}
+  },
+  tabs: {
+    type: Array,
+    default: () => []
+  }
+})
 
-  methods: {
-    getRoute(tab) {
-      return {
-        ...this.route,
-        query: {
-          ...this.route.query,
-          section: tab.name || tab.value
-        }
-      }
+const getRoute = tab => {
+  return {
+    ...props.route,
+    query: {
+      ...props.route.query,
+      section: tab.name || tab.value
     }
   }
 }
diff --git a/src/components/widgets/RouteTabs.vue b/src/components/widgets/RouteTabs.vue
index b8115e2faf..e585e3369a 100644
--- a/src/components/widgets/RouteTabs.vue
+++ b/src/components/widgets/RouteTabs.vue
@@ -18,25 +18,21 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'route-tabs',
-
-  props: {
-    activeTab: {
-      type: String,
-      default: ''
-    },
-    tabs: {
-      type: Array,
-      default: () => []
-    },
-    routeKey: {
-      type: String,
-      default: 'tab'
-    }
+<script setup>
+defineProps({
+  activeTab: {
+    type: String,
+    default: ''
+  },
+  tabs: {
+    type: Array,
+    default: () => []
+  },
+  routeKey: {
+    type: String,
+    default: 'tab'
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/Schedule.vue b/src/components/widgets/Schedule.vue
index 3605359e90..46e58914bd 100644
--- a/src/components/widgets/Schedule.vue
+++ b/src/components/widgets/Schedule.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="schedule-wrapper">
     <div
-      ref="schedule"
+      ref="scheduleRef"
       class="schedule unselectable"
       :class="`zoom-level-${zoomLevel}`"
     >
       <div
-        ref="entity-list"
+        ref="entityListRef"
         class="entities"
         @mousedown="startBrowsingY"
         @touchstart="startBrowsingY"
@@ -243,9 +243,9 @@
         </div>
       </div>
 
-      <div class="timeline" ref="timeline">
+      <div class="timeline" ref="timelineRef">
         <div
-          ref="timeline-header"
+          ref="timelineHeaderRef"
           class="timeline-header"
           :class="{
             'without-milestones': !withMilestones
@@ -320,7 +320,7 @@
         </div>
 
         <div
-          ref="timeline-header"
+          ref="timelineHeaderRef"
           class="timeline-header"
           :class="{
             'without-milestones': !withMilestones
@@ -359,38 +359,38 @@
         </div>
 
         <div
-          ref="timeline-content-wrapper"
+          ref="timelineContentWrapperRef"
           class="timeline-content-wrapper"
           @scroll.passive="onTimelineScroll"
         >
           <div
-            ref="timeline-content"
+            ref="timelineContentRef"
             class="timeline-content"
             :style="timelineStyle"
             @mousedown="startBrowsing"
             @touchstart="startBrowsing"
           >
             <div
-              ref="timeline-sub-start"
+              ref="timelineSubStartRef"
               class="sub-zone"
               :style="timelineSubStartStyle"
               v-if="subStartDate"
             ></div>
 
             <div
-              ref="timeline-sub-end"
+              ref="timelineSubEndRef"
               class="sub-zone"
               :style="timelineSubEndStyle"
               v-if="subEndDate"
             ></div>
 
             <div
-              ref="timeline-today-position"
+              ref="timelineTodayPositionRef"
               class="timeline-position today"
               :style="timelineTodayPositionStyle"
             ></div>
             <div
-              ref="timeline-position"
+              ref="timelinePositionRef"
               class="timeline-position"
               :style="timelinePositionStyle"
               v-show="!isChangeDates"
@@ -760,10 +760,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
 /*
  * Component to facilitate the build of schedule pages.
  */
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import {
   BriefcaseIcon,
   ChevronDownIcon,
@@ -774,10 +785,6 @@ import {
   PlusIcon
 } from 'lucide-vue-next'
 import moment from 'moment-timezone'
-import { mapGetters, mapActions } from 'vuex'
-
-import { domMixin } from '@/components/mixins/dom'
-import { formatListMixin } from '@/components/mixins/format'
 
 import colors from '@/lib/colors'
 import {
@@ -796,1520 +803,1558 @@ import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import ProductionName from '@/components/widgets/ProductionName.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'schedule',
-
-  mixins: [domMixin, formatListMixin],
-
-  components: {
-    BriefcaseIcon,
-    ChevronDownIcon,
-    ChevronRightIcon,
-    DepartmentName,
-    EditIcon,
-    EditMilestoneModal,
-    LinkIcon,
-    ListChevronsUpDownIcon,
-    PeopleAvatar,
-    PlusIcon,
-    ProductionName,
-    Spinner
-  },
+const store = useStore()
+const { t } = useI18n()
 
-  data() {
-    return {
-      currentElement: null,
-      selection: [],
-      isBrowsingX: false,
-      isBrowsingY: false,
-      isChangeDates: false,
-      isChangeStartDate: false,
-      isChangeEndDate: false,
-      milestoneToEdit: {
-        date: moment()
-      },
-      errors: {
-        edit: false
-      },
-      modals: {
-        edit: false
-      },
-      loading: {
-        edit: false
-      },
-      domEvents: [
-        ['mousemove', this.onMouseMove],
-        ['touchmove', this.onMouseMove],
-        ['mouseup', this.stopBrowsing],
-        ['mouseleave', this.stopBrowsing],
-        ['touchend', this.stopBrowsing],
-        ['touchcancel', this.stopBrowsing],
-        ['resize', this.resetScheduleSize]
-      ]
-    }
+const props = defineProps({
+  daysOff: {
+    type: Array,
+    default: () => []
   },
-
-  props: {
-    daysOff: {
-      type: Array,
-      default: () => []
-    },
-    draggedItems: {
-      type: Array,
-      default: () => []
-    },
-    endDate: {
-      type: Object,
-      required: true
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: true
-    },
-    hideEntities: {
-      type: Boolean,
-      default: false
-    },
-    hideManDays: {
-      type: Boolean,
-      default: false
-    },
-    hierarchy: {
-      default: () => [],
-      type: Array
-    },
-    invertLinesColor: {
-      type: Boolean,
-      default: false
-    },
-    showExpandAll: {
-      type: Boolean,
-      default: false
-    },
-    subEndDate: {
-      type: Object,
-      default: null
-    },
-    subStartDate: {
-      type: Object,
-      default: null
-    },
-    startDate: {
-      type: Object,
-      required: true
-    },
-    isEstimationLinked: {
-      type: Boolean,
-      default: false
-    },
-    withMilestones: {
-      type: Boolean,
-      default: true
-    },
-    withEstimations: {
-      type: Boolean,
-      default: true
-    },
-    withGhosts: {
-      type: Boolean,
-      default: false
-    },
-    withStatuses: {
-      type: Boolean,
-      default: false
-    },
-    withTimesheets: {
-      type: Boolean,
-      default: false
-    },
-    hideRoot: {
-      type: Boolean,
-      default: false
-    },
-    zoomLevel: {
-      type: Number,
-      default: 2
-    },
-    multiline: {
-      type: Boolean,
-      default: false
-    },
-    subchildren: {
-      type: Boolean,
-      default: false
-    },
-    reassignable: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      validator: value => ['prev', 'real'].includes(value)
-    }
+  draggedItems: {
+    type: Array,
+    default: () => []
   },
-
-  emits: [
-    'estimation-changed',
-    'expand-all',
-    'item-assign',
-    'item-changed',
-    'item-drop',
-    'item-selected',
-    'item-unassign',
-    'root-element-expanded',
-    'root-element-selected',
-    'scroll',
-    'task-selected',
-    'task-unselected'
-  ],
-
-  mounted() {
-    this.resetScheduleSize()
-    this.addEvents(this.domEvents)
+  endDate: {
+    type: Object,
+    required: true
   },
-
-  beforeUnmount() {
-    this.removeEvents(this.domEvents)
-    document.body.style.cursor = 'default'
+  isError: {
+    type: Boolean,
+    default: false
   },
+  isLoading: {
+    type: Boolean,
+    default: true
+  },
+  hideEntities: {
+    type: Boolean,
+    default: false
+  },
+  hideManDays: {
+    type: Boolean,
+    default: false
+  },
+  hierarchy: {
+    default: () => [],
+    type: Array
+  },
+  invertLinesColor: {
+    type: Boolean,
+    default: false
+  },
+  showExpandAll: {
+    type: Boolean,
+    default: false
+  },
+  subEndDate: {
+    type: Object,
+    default: null
+  },
+  subStartDate: {
+    type: Object,
+    default: null
+  },
+  startDate: {
+    type: Object,
+    required: true
+  },
+  isEstimationLinked: {
+    type: Boolean,
+    default: false
+  },
+  withMilestones: {
+    type: Boolean,
+    default: true
+  },
+  withEstimations: {
+    type: Boolean,
+    default: true
+  },
+  withGhosts: {
+    type: Boolean,
+    default: false
+  },
+  withStatuses: {
+    type: Boolean,
+    default: false
+  },
+  withTimesheets: {
+    type: Boolean,
+    default: false
+  },
+  hideRoot: {
+    type: Boolean,
+    default: false
+  },
+  zoomLevel: {
+    type: Number,
+    default: 2
+  },
+  multiline: {
+    type: Boolean,
+    default: false
+  },
+  subchildren: {
+    type: Boolean,
+    default: false
+  },
+  reassignable: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    validator: value => ['prev', 'real'].includes(value)
+  }
+})
+
+const emit = defineEmits([
+  'estimation-changed',
+  'expand-all',
+  'item-assign',
+  'item-changed',
+  'item-drop',
+  'item-selected',
+  'item-unassign',
+  'root-element-expanded',
+  'root-element-selected',
+  'scroll',
+  'task-selected',
+  'task-unselected'
+])
+
+// Template refs
+const scheduleRef = ref(null)
+const entityListRef = ref(null)
+const timelineRef = ref(null)
+const timelineContentRef = ref(null)
+const timelineContentWrapperRef = ref(null)
+const timelineHeaderRef = ref(null)
+const timelinePositionRef = ref(null)
+
+// Store getters
+const currentProduction = computed(() => store.getters.currentProduction)
+const departmentMap = computed(() => store.getters.departmentMap)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+const milestones = computed(() => store.getters.milestones)
+const openProductions = computed(() => store.getters.openProductions)
+const organisation = computed(() => store.getters.organisation)
+const taskMap = computed(() => store.getters.taskMap)
+const taskStatuses = computed(() => store.getters.taskStatuses)
+
+// Format mixin replacements
+const isDurationInHours = computed(() => {
+  return organisation.value.format_duration_in_hours
+})
+
+const formatDuration = (minutes, toLocale = true) => {
+  if (!minutes) {
+    return 0
+  }
+
+  const duration = organisation.value.format_duration_in_hours
+    ? minutes / 60
+    : minutesToDays(organisation.value, minutes)
+
+  if (toLocale) {
+    return duration.toLocaleString('fullwide', {
+      maximumFractionDigits: 2
+    })
+  }
+  return Math.round(duration * 100) / 100
+}
 
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'departmentMap',
-      'isCurrentUserManager',
-      'isDarkTheme',
-      'milestones',
-      'openProductions',
-      'organisation',
-      'taskMap',
-      'taskStatuses'
-    ]),
-
-    statuses() {
-      return {
-        wip: this.taskStatuses.find(status => status.is_wip) ?? {},
-        wfa: this.taskStatuses.find(status => status.is_feedback_request) ?? {},
-        done: this.taskStatuses.find(status => status.is_done) ?? {}
-      }
-    },
-
-    currentMilestones() {
-      const localMilestones = {}
-      Object.keys(this.milestones).forEach(key => {
-        if (this.displayedDaysIndex[key]) {
-          localMilestones[key] = this.milestones[key]
-        }
-      })
-      return localMilestones
-    },
-
-    cellWidth() {
-      const cellWidthByLevel = [20, 20, 40, 60, 120]
-      return cellWidthByLevel[this.zoomLevel] || 20
-    },
-
-    daysAvailable() {
-      const days = []
-      let day = this.startDate.clone().utc().startOf('day')
-      const endDate = this.endDate.clone().utc().startOf('day')
-      const daysOff = this.getDayOffRange(this.daysOff).map(
-        dayOff => dayOff.date
-      )
+// Dom mixin replacements
+const addEvents = events => {
+  events.forEach(([type, listener]) => {
+    document.addEventListener(type, listener)
+  })
+}
 
-      while (day.isSameOrBefore(endDate)) {
-        day.off = daysOff.includes(day.toISOString().slice(0, 10))
-        day.newWeek = day.isoWeekday() === 1
-        day.newMonth = day.date() === 1
-        day.weekend = [6, 7].includes(day.isoWeekday())
-        day.weekNumber = day.week()
-        day.text = day.format('YYYY-MM-DD')
-        day.monthText = day.format('MMMM YY')
-        day.dayNumber = day.format('DD')
-        day.dayText = day.format('ddd')[0]
-        days.push(day)
-        day = day.clone().add(1, 'days')
-      }
+const removeEvents = events => {
+  events.forEach(([type, listener]) => {
+    document.removeEventListener(type, listener)
+  })
+}
 
-      // always show month and week number at start of schedule
-      if (days.length) {
-        const indexNextMonth = days.findIndex(day => day.newMonth)
-        if (indexNextMonth >= 5 || indexNextMonth === -1) {
-          days[0].newMonth = true
-        }
-        const indexNextWeek = days.findIndex(day => day.newWeek)
-        if (indexNextWeek === -1) {
-          days[0].newWeek = true
-        }
-      }
-      return days
-    },
-
-    weeksAvailable() {
-      const weeks = []
-      if (this.daysAvailable.length < 1) return []
-      const startDate = this.daysAvailable[0]
-      const endDate = this.daysAvailable[this.daysAvailable.length - 1]
-      const day = startDate.clone().add(-1, 'days')
-      let dayDate = day.toDate()
-      const endDayDate = endDate.clone().add(7, 'days').toDate()
-      dayDate.weekday = day.isoWeekday()
-      dayDate.monthday = day.month()
-      dayDate.week = day.week()
-
-      while (dayDate < endDayDate) {
-        const nextDay = new Date(Number(dayDate))
-        nextDay.setDate(dayDate.getDate() + 1) // Add 1 day
-        if (nextDay.isoweekday > 7) {
-          nextDay.isoweekday = 1
-          nextDay.newWeek = true
-        }
-        nextDay.monthday = dayDate.monthday + 1
-        if (nextDay.getMonth() !== dayDate.getMonth()) {
-          nextDay.newMonth = true
-          nextDay.monthday = 1
-        }
-        const momentDay = parseDate(moment(nextDay).format('YYYY-MM-DD'))
-        if (momentDay.isoWeekday() === 1) {
-          momentDay.weekText = momentDay.format('YYYY-MM-DD')
-          momentDay.label = `${momentDay.weekText} to ${momentDay
-            .clone()
-            .add(6, 'days')
-            .format('YYYY-MM-DD')}`
-          momentDay.weekNumber = momentDay.week()
-          momentDay.newMonth =
-            weeks.length === 0 ||
-            momentDay.month() !== weeks[weeks.length - 1].month()
-          momentDay.monthText = momentDay.format('MMMM YY')
-          weeks.push(momentDay)
-        }
-        dayDate = nextDay
-      }
-      return weeks
-    },
-
-    displayedDays() {
-      return this.daysAvailable
-    },
-
-    displayedDaysIndex() {
-      let index = 0
-      const dayIndex = {}
-      this.displayedDays.forEach(d => {
-        dayIndex[d.text] = index
-        index++
-      })
-      return dayIndex
-    },
-
-    displayedWeeksIndex() {
-      let index = 0
-      const weekIndex = {}
-      this.weeksAvailable.forEach(w => {
-        weekIndex[w.weekText] = index
-        index++
-      })
-      return weekIndex
-    },
+const getClientX = event => {
+  return (
+    event.touches?.[0]?.clientX ??
+    event.changedTouches?.[0]?.clientX ??
+    event.clientX
+  )
+}
 
-    isRealSchedule() {
-      return this.type === 'real'
-    },
+const getClientY = event => {
+  return (
+    event.touches?.[0]?.clientY ??
+    event.changedTouches?.[0]?.clientY ??
+    event.clientY
+  )
+}
 
-    totalManDays() {
-      return this.hierarchy.reduce(
-        (acc, timeElement) => acc + (timeElement.man_days || 0),
-        0
-      )
-    },
+// Store actions
+const deleteMilestone = milestone => {
+  return store.dispatch('deleteMilestone', milestone)
+}
 
-    // References
+const loadMilestones = production => {
+  return store.dispatch('loadMilestones', production)
+}
 
-    entityList() {
-      return this.$refs['entity-list']
-    },
+const saveMilestone = milestone => {
+  return store.dispatch('saveMilestone', milestone)
+}
 
-    schedule() {
-      return this.$refs.schedule
-    },
+// Data
+const currentElement = ref(null)
+const selection = ref([])
+const isBrowsingX = ref(false)
+const isBrowsingY = ref(false)
+const isChangeDates = ref(false)
+const isChangeStartDate = ref(false)
+const isChangeEndDate = ref(false)
+const milestoneToEdit = reactive({
+  date: moment()
+})
+const errors = reactive({
+  edit: false
+})
+const modals = reactive({
+  edit: false
+})
+const loading = reactive({
+  edit: false
+})
+
+let initialClientX = null
+let initialClientY = null
+let lastStartDate = null
+let lastEndDate = null
+
+const domEvents = [
+  ['mousemove', onMouseMove],
+  ['touchmove', onMouseMove],
+  ['mouseup', stopBrowsing],
+  ['mouseleave', stopBrowsing],
+  ['touchend', stopBrowsing],
+  ['touchcancel', stopBrowsing],
+  ['resize', resetScheduleSize]
+]
+
+// Computed
+
+const statuses = computed(() => {
+  return {
+    wip: taskStatuses.value.find(status => status.is_wip) ?? {},
+    wfa: taskStatuses.value.find(status => status.is_feedback_request) ?? {},
+    done: taskStatuses.value.find(status => status.is_done) ?? {}
+  }
+})
+
+const currentMilestones = computed(() => {
+  const localMilestones = {}
+  Object.keys(milestones.value).forEach(key => {
+    if (displayedDaysIndex.value[key]) {
+      localMilestones[key] = milestones.value[key]
+    }
+  })
+  return localMilestones
+})
+
+const cellWidth = computed(() => {
+  const cellWidthByLevel = [20, 20, 40, 60, 120]
+  return cellWidthByLevel[props.zoomLevel] || 20
+})
+
+const daysAvailable = computed(() => {
+  const days = []
+  let day = props.startDate.clone().utc().startOf('day')
+  const endDate = props.endDate.clone().utc().startOf('day')
+  const daysOff = getDayOffRange(props.daysOff).map(dayOff => dayOff.date)
+
+  while (day.isSameOrBefore(endDate)) {
+    day.off = daysOff.includes(day.toISOString().slice(0, 10))
+    day.newWeek = day.isoWeekday() === 1
+    day.newMonth = day.date() === 1
+    day.weekend = [6, 7].includes(day.isoWeekday())
+    day.weekNumber = day.week()
+    day.text = day.format('YYYY-MM-DD')
+    day.monthText = day.format('MMMM YY')
+    day.dayNumber = day.format('DD')
+    day.dayText = day.format('ddd')[0]
+    days.push(day)
+    day = day.clone().add(1, 'days')
+  }
+
+  // always show month and week number at start of schedule
+  if (days.length) {
+    const indexNextMonth = days.findIndex(day => day.newMonth)
+    if (indexNextMonth >= 5 || indexNextMonth === -1) {
+      days[0].newMonth = true
+    }
+    const indexNextWeek = days.findIndex(day => day.newWeek)
+    if (indexNextWeek === -1) {
+      days[0].newWeek = true
+    }
+  }
+  return days
+})
+
+const weeksAvailable = computed(() => {
+  const weeks = []
+  if (daysAvailable.value.length < 1) return []
+  const startDate = daysAvailable.value[0]
+  const endDate = daysAvailable.value[daysAvailable.value.length - 1]
+  const day = startDate.clone().add(-1, 'days')
+  let dayDate = day.toDate()
+  const endDayDate = endDate.clone().add(7, 'days').toDate()
+  dayDate.weekday = day.isoWeekday()
+  dayDate.monthday = day.month()
+  dayDate.week = day.week()
+
+  while (dayDate < endDayDate) {
+    const nextDay = new Date(Number(dayDate))
+    nextDay.setDate(dayDate.getDate() + 1) // Add 1 day
+    if (nextDay.isoweekday > 7) {
+      nextDay.isoweekday = 1
+      nextDay.newWeek = true
+    }
+    nextDay.monthday = dayDate.monthday + 1
+    if (nextDay.getMonth() !== dayDate.getMonth()) {
+      nextDay.newMonth = true
+      nextDay.monthday = 1
+    }
+    const momentDay = parseDate(moment(nextDay).format('YYYY-MM-DD'))
+    if (momentDay.isoWeekday() === 1) {
+      momentDay.weekText = momentDay.format('YYYY-MM-DD')
+      momentDay.label = `${momentDay.weekText} to ${momentDay
+        .clone()
+        .add(6, 'days')
+        .format('YYYY-MM-DD')}`
+      momentDay.weekNumber = momentDay.week()
+      momentDay.newMonth =
+        weeks.length === 0 ||
+        momentDay.month() !== weeks[weeks.length - 1].month()
+      momentDay.monthText = momentDay.format('MMMM YY')
+      weeks.push(momentDay)
+    }
+    dayDate = nextDay
+  }
+  return weeks
+})
 
-    timeline() {
-      return this.$refs.timeline
-    },
+const displayedDays = computed(() => {
+  return daysAvailable.value
+})
 
-    timelineContent() {
-      return this.$refs['timeline-content']
-    },
+const displayedDaysIndex = computed(() => {
+  let index = 0
+  const dayIndex = {}
+  displayedDays.value.forEach(d => {
+    dayIndex[d.text] = index
+    index++
+  })
+  return dayIndex
+})
+
+const displayedWeeksIndex = computed(() => {
+  let index = 0
+  const weekIndex = {}
+  weeksAvailable.value.forEach(w => {
+    weekIndex[w.weekText] = index
+    index++
+  })
+  return weekIndex
+})
+
+const isRealSchedule = computed(() => {
+  return props.type === 'real'
+})
+
+const totalManDays = computed(() => {
+  return props.hierarchy.reduce(
+    (acc, timeElement) => acc + (timeElement.man_days || 0),
+    0
+  )
+})
+
+// Styles
+
+const timelineStyle = computed(() => {
+  const firstDay = daysAvailable.value[0]
+  const multiplier = firstDay ? -1 * (firstDay.isoWeekday() - 1) : 0
+  return {
+    'background-position-x': `${multiplier * cellWidth.value}px`
+  }
+})
+
+const timelinePositionStyle = computed(() => {
+  return { width: `${cellWidth.value}px` }
+})
+
+const timelineTodayPositionStyle = computed(() => {
+  const today = moment().utc(true)
+  const isVisible =
+    today.isAfter(props.startDate) && today.isBefore(props.endDate)
+  return {
+    width: `${cellWidth.value}px`,
+    left: `${getTimebarLeft({ startDate: today }) - 3}px`,
+    display: isVisible ? 'block' : 'none'
+  }
+})
+
+const timelineSubStartStyle = computed(() => {
+  const diff = Math.max(dateDiff(props.startDate, props.subStartDate), 0)
+  return {
+    left: 0,
+    width: `${cellWidth.value * diff}px`
+  }
+})
+
+const timelineSubEndStyle = computed(() => {
+  const diff = Math.max(
+    dateDiff(props.subEndDate, props.endDate) - 1, // end date must available
+    0
+  )
+  return {
+    right: 0,
+    width: `${cellWidth.value * diff}px`
+  }
+})
+
+const dayAfterEndDate = computed(() => {
+  return props.endDate.clone().add(1, 'days')
+})
+
+const isWeekMode = computed(() => {
+  return props.zoomLevel === 0
+})
+
+const unitOfTime = computed(() => {
+  return props.zoomLevel > 0 ? 'days' : 'weeks'
+})
+
+// Methods
+
+const getNbSubChildren = children => {
+  if (!children) return 0
+
+  return Object.values(children).reduce((acc, subChildren) => {
+    return acc + subChildren.length
+  }, 0)
+}
 
-    timelineContentWrapper() {
-      return this.$refs['timeline-content-wrapper']
-    },
+const getNbLines = (items = []) => {
+  const values = items.map(item => item.line || 0)
+  return values.length ? Math.max(...values) + 1 : 1
+}
 
-    timelineHeader() {
-      return this.$refs['timeline-header']
-    },
+const refreshAllItemPositions = () => {
+  props.hierarchy.forEach(rootElement => {
+    if (rootElement.expanded) {
+      refreshItemPositions(rootElement)
+    }
+  })
+}
 
-    timelinePosition() {
-      return this.$refs['timeline-position']
-    },
+const refreshItemPositions = rootElement => {
+  if (!rootElement?.children) {
+    return
+  }
 
-    // Styles
+  if (props.multiline) {
+    setItemPositions(rootElement.children, unitOfTime.value)
+  }
 
-    timelineStyle() {
-      const firstDay = this.daysAvailable[0]
-      const multiplier = firstDay ? -1 * (firstDay.isoWeekday() - 1) : 0
-      return {
-        'background-position-x': `${multiplier * this.cellWidth}px`
-      }
-    },
-
-    timelinePositionStyle() {
-      return { width: `${this.cellWidth}px` }
-    },
-
-    timelineTodayPositionStyle() {
-      const today = moment().utc(true)
-      const isVisible =
-        today.isAfter(this.startDate) && today.isBefore(this.endDate)
-      return {
-        width: `${this.cellWidth}px`,
-        left: `${this.getTimebarLeft({ startDate: today }) - 3}px`,
-        display: isVisible ? 'block' : 'none'
+  if (props.subchildren) {
+    rootElement.children.forEach(childElement => {
+      if (childElement.children) {
+        childElement.children.forEach(subchildElement => {
+          setItemPositions(subchildElement, unitOfTime.value)
+        })
+      } else {
+        setItemPositions(childElement, unitOfTime.value)
       }
-    },
+    })
+  }
+}
 
-    timelineSubStartStyle() {
-      const diff = Math.max(this.dateDiff(this.startDate, this.subStartDate), 0)
-      return {
-        left: 0,
-        width: `${this.cellWidth * diff}px`
-      }
-    },
+const refreshManDays = rootElement => {
+  if (props.hideManDays || !rootElement?.children?.length) {
+    return
+  }
 
-    timelineSubEndStyle() {
-      const diff = Math.max(
-        this.dateDiff(this.subEndDate, this.endDate) - 1, // end date must available
-        0
-      )
-      return {
-        right: 0,
-        width: `${this.cellWidth * diff}px`
-      }
-    },
+  rootElement.man_days = rootElement.children.reduce(
+    (acc, child) => acc + (child.man_days || 0),
+    0
+  )
+}
+
+const isVisible = timeElement => {
+  const isStartDateOk = timeElement.startDate.isSameOrAfter(props.startDate)
+  const isEndDateOk = timeElement.endDate.isSameOrBefore(dayAfterEndDate.value)
+  return isStartDateOk && isEndDateOk
+}
 
-    dayAfterEndDate() {
-      return this.endDate.clone().add(1, 'days')
-    },
+const resetScheduleSize = () => {
+  if (timelineContentRef.value) {
+    if (props.zoomLevel > 0) {
+      timelineContentRef.value.style.width = `${displayedDays.value.length * cellWidth.value}px`
+    } else {
+      timelineContentRef.value.style.width = `${weeksAvailable.value.length * cellWidth.value}px`
+    }
+  }
+}
 
-    isWeekMode() {
-      return this.zoomLevel === 0
-    },
+const onMouseMove = event => {
+  if (isChangeStartDate.value) {
+    changeStartDate(event)
+  } else if (isChangeEndDate.value) {
+    changeEndDate(event)
+  } else if (isChangeDates.value) {
+    changeDates(event)
+  } else {
+    if (isBrowsingX.value) scrollScheduleLeft(event)
+    if (isBrowsingY.value) scrollScheduleTop(event)
+  }
+
+  updatePositionBarPosition(event)
+}
 
-    unitOfTime() {
-      return this.zoomLevel > 0 ? 'days' : 'weeks'
+const onChildEstimationChanged = (event, childElement, rootElement) => {
+  const estimation = event.target.valueAsNumber || 0
+  if (props.isEstimationLinked) {
+    childElement.man_days = daysToMinutes(organisation.value, estimation)
+    childElement.estimation = childElement.man_days
+    refreshManDays(rootElement)
+
+    if (estimation > 0) {
+      childElement.endDate = addBusinessDays(
+        childElement.startDate,
+        estimation - 1,
+        rootElement.daysOff
+      )
     }
-  },
+  }
+  emit('estimation-changed', {
+    taskId: childElement.id,
+    days: estimation,
+    item: childElement,
+    daysOff: rootElement.daysOff
+  })
+}
 
-  methods: {
-    ...mapActions(['deleteMilestone', 'loadMilestones', 'saveMilestone']),
+const updatePositionBarPosition = event => {
+  if (!timelineContentWrapperRef.value || !timelinePositionRef.value) return
 
-    getDayOffRange,
+  const cursorX =
+    getClientX(event) -
+    timelineContentWrapperRef.value.getBoundingClientRect().left
 
-    getNbSubChildren(children) {
-      if (!children) return 0
+  if (cursorX <= 0 || cursorX >= timelineContentWrapperRef.value.offsetWidth)
+    return
 
-      return Object.values(children).reduce((acc, subChildren) => {
-        return acc + subChildren.length
-      }, 0)
-    },
+  const left =
+    Math.floor(
+      (timelineContentWrapperRef.value.scrollLeft + cursorX) / cellWidth.value
+    ) * cellWidth.value
+  timelinePositionRef.value.style.left = `${left}px`
+}
 
-    getNbLines(items = []) {
-      const values = items.map(item => item.line || 0)
-      return values.length ? Math.max(...values) + 1 : 1
-    },
+const isValidItemDates = (startDate, endDate) => {
+  return (
+    startDate &&
+    endDate &&
+    startDate.isSameOrAfter(props.startDate.clone().add(-1, 'hour')) &&
+    endDate.isSameOrBefore(props.endDate.clone().add(1, 'day')) &&
+    startDate.isSameOrBefore(endDate) &&
+    endDate.isSameOrAfter(startDate)
+  )
+}
 
-    refreshAllItemPositions() {
-      this.hierarchy.forEach(rootElement => {
-        if (rootElement.expanded) {
-          this.refreshItemPositions(rootElement)
-        }
-      })
-    },
+const getDisplayedDaysIndex = date => {
+  const dateString = date.format('YYYY-MM-DD')
+  return displayedDaysIndex.value[dateString]
+}
 
-    refreshItemPositions(rootElement) {
-      if (!rootElement?.children) {
-        return
-      }
+const getDisplayedWeeksIndex = date => {
+  const dateString = date.startOf('isoweek').format('YYYY-MM-DD')
+  return displayedWeeksIndex.value[dateString]
+}
 
-      if (this.multiline) {
-        setItemPositions(rootElement.children, this.unitOfTime)
-      }
+const resetDroppableTargets = () => {
+  scheduleRef.value?.querySelectorAll('.droppable').forEach(element => {
+    element.classList.remove('droppable')
+  })
+}
 
-      if (this.subchildren) {
-        rootElement.children.forEach(childElement => {
-          if (childElement.children) {
-            childElement.children.forEach(subchildElement => {
-              setItemPositions(subchildElement, this.unitOfTime)
-            })
-          } else {
-            setItemPositions(childElement, this.unitOfTime)
-          }
-        })
-      }
-    },
+const changeDates = event => {
+  if (!isSelected(currentElement.value)) {
+    // avoid side effect if item unselected
+    return
+  }
 
-    refreshManDays(rootElement) {
-      if (this.hideManDays || !rootElement?.children?.length) {
+  const change = getClientX(event) - initialClientX - cellWidth.value / 2
+  const dayChange = Math.ceil(change / cellWidth.value)
+
+  if (props.reassignable) {
+    let target = event.target
+    while (target && !target.classList?.contains('drop-item-target')) {
+      target = target.parentNode
+    }
+    if (!target) {
+      resetDroppableTargets()
+    }
+    const currentRootElement = currentElement.value.parentElement
+    if (
+      props.subchildren &&
+      target &&
+      target.dataset.personId &&
+      target.dataset.entityTypeId &&
+      !currentElement.value.assignees?.includes(target.dataset.personId)
+    ) {
+      // check rights
+      if (
+        target.dataset.personId === 'unassigned' ||
+        target.dataset.entityTypeId !== currentElement.value.entity_type_id
+      ) {
         return
       }
 
-      rootElement.man_days = rootElement.children.reduce(
-        (acc, child) => acc + (child.man_days || 0),
-        0
-      )
-    },
+      target.classList.add('droppable')
+
+      selection.value.forEach(item => {
+        // update item assignation in element hierarchy
+        const previousAssigneeId = item.assignees[0]
+        const newAssigneeId = target.dataset.personId
+        item.assignees = item.assignees.filter(
+          assigneeId => assigneeId !== previousAssigneeId
+        )
+        item.assignees.push(newAssigneeId)
 
-    isVisible(timeElement) {
-      const isStartDateOk = timeElement.startDate.isSameOrAfter(this.startDate)
-      const isEndDateOk = timeElement.endDate.isSameOrBefore(
-        this.dayAfterEndDate
+        emit('item-unassign', item, previousAssigneeId)
+        emit('item-assign', item, newAssigneeId)
+        refreshItemPositions(currentRootElement)
+      })
+    } else if (
+      !props.subchildren &&
+      target &&
+      target.dataset.rootElementId &&
+      currentRootElement.id !== target.dataset.rootElementId
+    ) {
+      const newRootElement = props.hierarchy.find(
+        rootElement => rootElement.id === target.dataset.rootElementId
       )
-      return isStartDateOk && isEndDateOk
-    },
-
-    resetScheduleSize() {
-      if (this.timelineContent) {
-        if (this.zoomLevel > 0) {
-          this.timelineContent.style.width = `${this.displayedDays.length * this.cellWidth}px`
-        } else {
-          this.timelineContent.style.width = `${this.weeksAvailable.length * this.cellWidth}px`
+      selection.value.forEach(item => {
+        if (!checkUserIsAllowed(item, newRootElement)) {
+          return
         }
-      }
-    },
-
-    onMouseMove(event) {
-      if (this.isChangeStartDate) {
-        this.changeStartDate(event)
-      } else if (this.isChangeEndDate) {
-        this.changeEndDate(event)
-      } else if (this.isChangeDates) {
-        this.changeDates(event)
-      } else {
-        if (this.isBrowsingX) this.scrollScheduleLeft(event)
-        if (this.isBrowsingY) this.scrollScheduleTop(event)
-      }
+        target.classList.add('droppable')
+        // update assignation in element hierarchy
+        const previousRootElement = item.parentElement
+        item.parentElement = newRootElement
+        previousRootElement.children = previousRootElement.children.filter(
+          ({ id }) => id !== item.id
+        )
+        newRootElement.children = newRootElement.children.filter(
+          ({ id }) => id !== item.id
+        )
+        newRootElement.children.push(item)
+        emit('item-unassign', item, previousRootElement)
+        emit('item-assign', item, newRootElement)
+        refreshItemPositions(previousRootElement)
+      })
+      refreshItemPositions(newRootElement)
+    }
+  }
+
+  if (lastStartDate.isBefore(props.startDate)) {
+    lastStartDate = props.startDate.clone()
+  }
+
+  if (lastEndDate.isBefore(props.startDate)) {
+    lastEndDate = props.startDate.clone().add(1, 'days')
+  }
+
+  const startDate = lastStartDate
+  const endDate = lastEndDate
+  if (!isWeekMode.value) {
+    const startDateIndex = getDisplayedDaysIndex(startDate)
+    const endDateIndex = getDisplayedDaysIndex(endDate)
+    const length = endDateIndex - startDateIndex
+    let currentIndex = getDisplayedDaysIndex(startDate)
 
-      this.updatePositionBarPosition(event)
-    },
-
-    onChildEstimationChanged(event, childElement, rootElement) {
-      const estimation = event.target.valueAsNumber || 0
-      if (this.isEstimationLinked) {
-        childElement.man_days = daysToMinutes(this.organisation, estimation)
-        childElement.estimation = childElement.man_days
-        this.refreshManDays(rootElement)
-
-        if (estimation > 0) {
-          childElement.endDate = addBusinessDays(
-            childElement.startDate,
-            estimation - 1,
-            rootElement.daysOff
-          )
+    currentIndex += dayChange
+    if (currentIndex < 0) currentIndex = 0
+
+    const newStartDate = displayedDays.value[currentIndex]
+    if (newStartDate) {
+      const newEndDate = displayedDays.value[currentIndex + length]
+      const dateDiffVal = newStartDate.diff(currentElement.value.startDate)
+      if (dateDiffVal && isValidItemDates(newStartDate, newEndDate)) {
+        // update all selected items
+        selection.value.forEach(item => {
+          item.startDate = item.startDate.clone().add(dateDiffVal)
+          item.endDate = item.endDate.clone().add(dateDiffVal)
+        })
+        if (props.multiline || props.subchildren) {
+          const parentElements = [
+            ...new Set(selection.value.map(item => item.parentElement))
+          ]
+          parentElements.forEach(refreshItemPositions)
         }
       }
-      this.$emit('estimation-changed', {
-        taskId: childElement.id,
-        days: estimation,
-        item: childElement,
-        daysOff: rootElement.daysOff
-      })
-    },
+    }
+  } else {
+    const startDateIndex = getDisplayedWeeksIndex(startDate)
+    const endDateIndex = getDisplayedWeeksIndex(endDate)
+    const length = endDateIndex - startDateIndex
+    let currentIndex = getDisplayedWeeksIndex(startDate)
+    currentIndex += dayChange
+    if (currentIndex < 0) currentIndex = 0
+    const newStartDate = weeksAvailable.value[currentIndex]
+    if (newStartDate) {
+      const newEndDate = weeksAvailable.value[currentIndex + length]
+      if (isValidItemDates(newStartDate, newEndDate)) {
+        currentElement.value.startDate = newStartDate
+        currentElement.value.endDate = newEndDate
+      }
+    }
+  }
+}
 
-    updatePositionBarPosition(event) {
-      if (!this.timelineContentWrapper || !this.timelinePosition) return
+const changeStartDate = event => {
+  const change = getClientX(event) - initialClientX + cellWidth.value / 2
+  const dayChange = Math.floor(change / cellWidth.value)
+
+  const startDate = lastStartDate
+  const endDate = currentElement.value.endDate
+  let currentIndex, endDateIndex
+  if (isWeekMode.value) {
+    currentIndex = getDisplayedWeeksIndex(startDate)
+    endDateIndex = getDisplayedWeeksIndex(endDate)
+  } else {
+    currentIndex = getDisplayedDaysIndex(startDate)
+    endDateIndex = getDisplayedDaysIndex(endDate)
+  }
+  currentIndex += dayChange
+  if (currentIndex > endDateIndex) currentIndex = endDateIndex
+  if (currentIndex < 0) currentIndex = 0
+
+  const newStartDate = isWeekMode.value
+    ? weeksAvailable.value[currentIndex]
+    : displayedDays.value[currentIndex]
+
+  if (
+    !newStartDate.isSame(currentElement.value.startDate) &&
+    isValidItemDates(newStartDate, currentElement.value.endDate)
+  ) {
+    currentElement.value.startDate = newStartDate.clone()
+    updateItemEstimation(currentElement.value)
+    refreshItemPositions(currentElement.value.parentElement)
+    resetSelection([currentElement.value])
+  }
+}
 
-      const cursorX =
-        this.getClientX(event) -
-        this.timelineContentWrapper.getBoundingClientRect().left
+const changeEndDate = event => {
+  const change = getClientX(event) - initialClientX + cellWidth.value / 2
+  const dayChange = Math.ceil(change / cellWidth.value)
 
-      if (cursorX <= 0 || cursorX >= this.timelineContentWrapper.offsetWidth)
-        return
+  if (currentElement.value.startDate.isBefore(props.startDate)) {
+    currentElement.value.startDate = props.startDate.clone()
+  }
 
-      const left =
-        Math.floor(
-          (this.timelineContentWrapper.scrollLeft + cursorX) / this.cellWidth
-        ) * this.cellWidth
-      this.timelinePosition.style.left = `${left}px`
-    },
-
-    isValidItemDates(startDate, endDate) {
-      return (
-        startDate &&
-        endDate &&
-        startDate.isSameOrAfter(this.startDate.clone().add(-1, 'hour')) &&
-        endDate.isSameOrBefore(this.endDate.clone().add(1, 'day')) &&
-        startDate.isSameOrBefore(endDate) &&
-        endDate.isSameOrAfter(startDate)
-      )
-    },
+  if (currentElement.value.endDate.isBefore(props.startDate)) {
+    currentElement.value.endDate = props.startDate.clone().add(1, 'days')
+  }
 
-    getDisplayedDaysIndex(date) {
-      const dateString = date.format('YYYY-MM-DD')
-      return this.displayedDaysIndex[dateString]
-    },
+  if (lastEndDate.isBefore(props.startDate)) {
+    lastEndDate = props.startDate.clone().add(1, 'days')
+  }
 
-    getDisplayedWeeksIndex(date) {
-      const dateString = date.startOf('isoweek').format('YYYY-MM-DD')
-      return this.displayedWeeksIndex[dateString]
-    },
+  const startDate = currentElement.value.startDate
+  const endDate = lastEndDate
+  let startDateIndex, currentIndex
+  if (isWeekMode.value) {
+    startDateIndex = getDisplayedWeeksIndex(startDate)
+    currentIndex = getDisplayedWeeksIndex(endDate)
+  } else {
+    startDateIndex = getDisplayedDaysIndex(startDate)
+    currentIndex = getDisplayedDaysIndex(endDate)
+  }
 
-    resetDroppableTargets() {
-      this.schedule?.querySelectorAll('.droppable').forEach(element => {
-        element.classList.remove('droppable')
-      })
-    },
+  currentIndex += dayChange - 1
+  if (currentIndex < startDateIndex) currentIndex = startDateIndex
+  if (isWeekMode.value) {
+    if (currentIndex > displayedWeeksIndex.value.length) {
+      currentIndex = displayedWeeksIndex.value.length - 1
+    }
+  } else {
+    if (currentIndex > displayedDaysIndex.value.length) {
+      currentIndex = displayedDaysIndex.value.length - 1
+    }
+  }
 
-    changeDates(event) {
-      if (!this.isSelected(this.currentElement)) {
-        // avoid side effect if item unselected
-        return
-      }
+  const newEndDate = isWeekMode.value
+    ? weeksAvailable.value[currentIndex]
+    : displayedDays.value[currentIndex]
+  if (
+    newEndDate &&
+    !newEndDate.isSame(currentElement.value.endDate) &&
+    isValidItemDates(currentElement.value.startDate, newEndDate)
+  ) {
+    currentElement.value.endDate = newEndDate.clone()
+    updateItemEstimation(currentElement.value)
+    refreshItemPositions(currentElement.value.parentElement)
+    resetSelection([currentElement.value])
+  }
+}
 
-      const change =
-        this.getClientX(event) - this.initialClientX - this.cellWidth / 2
-      const dayChange = Math.ceil(change / this.cellWidth)
+const updateItemEstimation = item => {
+  if (props.isEstimationLinked) {
+    const estimation = getBusinessDays(
+      item.startDate,
+      item.endDate,
+      item.parentElement?.daysOff
+    )
+    item.estimation = daysToMinutes(organisation.value, estimation)
+  }
+}
 
-      if (this.reassignable) {
-        let target = event.target
-        while (target && !target.classList?.contains('drop-item-target')) {
-          target = target.parentNode
-        }
-        if (!target) {
-          this.resetDroppableTargets()
-        }
-        const currentRootElement = this.currentElement.parentElement
-        if (
-          this.subchildren &&
-          target &&
-          target.dataset.personId &&
-          target.dataset.entityTypeId &&
-          !this.currentElement.assignees?.includes(target.dataset.personId)
-        ) {
-          // check rights
-          if (
-            target.dataset.personId === 'unassigned' ||
-            target.dataset.entityTypeId !== this.currentElement.entity_type_id
-          ) {
-            return
-          }
+const updateSelection = (item, event) => {
+  const isCtrlKey = event.ctrlKey || event.metaKey
 
-          target.classList.add('droppable')
-
-          this.selection.forEach(item => {
-            // update item assignation in element hierarchy
-            const previousAssigneeId = item.assignees[0]
-            const newAssigneeId = target.dataset.personId
-            item.assignees = item.assignees.filter(
-              assigneeId => assigneeId !== previousAssigneeId
-            )
-            item.assignees.push(newAssigneeId)
-
-            this.$emit('item-unassign', item, previousAssigneeId)
-            this.$emit('item-assign', item, newAssigneeId)
-            this.refreshItemPositions(currentRootElement)
-          })
-        } else if (
-          !this.subchildren &&
-          target &&
-          target.dataset.rootElementId &&
-          currentRootElement.id !== target.dataset.rootElementId
-        ) {
-          const newRootElement = this.hierarchy.find(
-            rootElement => rootElement.id === target.dataset.rootElementId
-          )
-          this.selection.forEach(item => {
-            if (!this.checkUserIsAllowed(item, newRootElement)) {
-              return
-            }
-            target.classList.add('droppable')
-            // update assignation in element hierarchy
-            const previousRootElement = item.parentElement
-            item.parentElement = newRootElement
-            previousRootElement.children = previousRootElement.children.filter(
-              ({ id }) => id !== item.id
-            )
-            newRootElement.children = newRootElement.children.filter(
-              ({ id }) => id !== item.id
-            )
-            newRootElement.children.push(item)
-            this.$emit('item-unassign', item, previousRootElement)
-            this.$emit('item-assign', item, newRootElement)
-            this.refreshItemPositions(previousRootElement)
-          })
-          this.refreshItemPositions(newRootElement)
-        }
-      }
+  if (isSelected(item)) {
+    if (isCtrlKey) {
+      removeFromSelection(item)
+    }
+  } else {
+    if (!isCtrlKey) {
+      resetSelection()
+    }
+    addToSelection(item)
+  }
+}
 
-      if (this.lastStartDate.isBefore(this.startDate)) {
-        this.lastStartDate = this.startDate.clone()
-      }
+const isOverlapping = item => {
+  return (
+    props.withGhosts &&
+    ((item.previousElement &&
+      item.startDate.isSameOrBefore(item.previousElement.endDate)) ||
+      (item.nextElement &&
+        item.endDate.isSameOrAfter(item.nextElement.startDate)))
+  )
+}
 
-      if (this.lastEndDate.isBefore(this.startDate)) {
-        this.lastEndDate = this.startDate.clone().add(1, 'days')
-      }
+const isSelected = item => {
+  return selection.value.some(({ id }) => id === item.id)
+}
 
-      const startDate = this.lastStartDate
-      const endDate = this.lastEndDate
-      if (!this.isWeekMode) {
-        const startDateIndex = this.getDisplayedDaysIndex(startDate)
-        const endDateIndex = this.getDisplayedDaysIndex(endDate)
-        const length = endDateIndex - startDateIndex
-        let currentIndex = this.getDisplayedDaysIndex(startDate)
-
-        currentIndex += dayChange
-        if (currentIndex < 0) currentIndex = 0
-
-        const newStartDate = this.displayedDays[currentIndex]
-        if (newStartDate) {
-          const newEndDate = this.displayedDays[currentIndex + length]
-          const dateDiff = newStartDate.diff(this.currentElement.startDate)
-          if (dateDiff && this.isValidItemDates(newStartDate, newEndDate)) {
-            // update all selected items
-            this.selection.forEach(item => {
-              item.startDate = item.startDate.clone().add(dateDiff)
-              item.endDate = item.endDate.clone().add(dateDiff)
-            })
-            if (this.multiline || this.subchildren) {
-              const parentElements = [
-                ...new Set(this.selection.map(item => item.parentElement))
-              ]
-              parentElements.forEach(this.refreshItemPositions)
-            }
-          }
-        }
-      } else {
-        const startDateIndex = this.getDisplayedWeeksIndex(startDate)
-        const endDateIndex = this.getDisplayedWeeksIndex(endDate)
-        const length = endDateIndex - startDateIndex
-        let currentIndex = this.getDisplayedWeeksIndex(startDate)
-        currentIndex += dayChange
-        if (currentIndex < 0) currentIndex = 0
-        const newStartDate = this.weeksAvailable[currentIndex]
-        if (newStartDate) {
-          const newEndDate = this.weeksAvailable[currentIndex + length]
-          if (this.isValidItemDates(newStartDate, newEndDate)) {
-            this.currentElement.startDate = newStartDate
-            this.currentElement.endDate = newEndDate
-          }
-        }
-      }
-    },
-
-    changeStartDate(event) {
-      const change =
-        this.getClientX(event) - this.initialClientX + this.cellWidth / 2
-      const dayChange = Math.floor(change / this.cellWidth)
-
-      const startDate = this.lastStartDate
-      const endDate = this.currentElement.endDate
-      let currentIndex, endDateIndex
-      if (this.isWeekMode) {
-        currentIndex = this.getDisplayedWeeksIndex(startDate)
-        endDateIndex = this.getDisplayedWeeksIndex(endDate)
-      } else {
-        currentIndex = this.getDisplayedDaysIndex(startDate)
-        endDateIndex = this.getDisplayedDaysIndex(endDate)
-      }
-      currentIndex += dayChange
-      if (currentIndex > endDateIndex) currentIndex = endDateIndex
-      if (currentIndex < 0) currentIndex = 0
+const addToSelection = itemToAdd => {
+  selection.value.push(itemToAdd)
+}
 
-      const newStartDate = this.isWeekMode
-        ? this.weeksAvailable[currentIndex]
-        : this.displayedDays[currentIndex]
+const removeFromSelection = itemToRemove => {
+  selection.value = selection.value.filter(item => item !== itemToRemove)
+}
 
-      if (
-        !newStartDate.isSame(this.currentElement.startDate) &&
-        this.isValidItemDates(newStartDate, this.currentElement.endDate)
-      ) {
-        this.currentElement.startDate = newStartDate.clone()
-        this.updateItemEstimation(this.currentElement)
-        this.refreshItemPositions(this.currentElement.parentElement)
-        this.resetSelection([this.currentElement])
-      }
-    },
+const resetSelection = value => {
+  selection.value = value || []
+}
 
-    changeEndDate(event) {
-      const change =
-        this.getClientX(event) - this.initialClientX + this.cellWidth / 2
-      const dayChange = Math.ceil(change / this.cellWidth)
+const moveTimebar = (timeElement, event) => {
+  event.preventDefault() // avoid scroll of schedule on touch
+  if (
+    !isChangeStartDate.value &&
+    !isChangeEndDate.value &&
+    timeElement.editable
+  ) {
+    isChangeDates.value = true
+    isChangeStartDate.value = false
+    isChangeEndDate.value = false
+    currentElement.value = timeElement
+    lastStartDate = timeElement.startDate.clone()
+    lastEndDate = timeElement.endDate.clone()
+    initialClientX = getClientX(event)
+    document.body.style.cursor = props.reassignable ? 'all-scroll' : 'ew-resize'
+
+    updateSelection(timeElement, event)
+  }
+}
 
-      if (this.currentElement.startDate.isBefore(this.startDate)) {
-        this.currentElement.startDate = this.startDate.clone()
-      }
+const moveTimebarLeftSide = (timeElement, event) => {
+  event.preventDefault() // avoid scroll of schedule on touch
+  if (!isChangeDates.value && !isChangeEndDate.value && timeElement.editable) {
+    isChangeDates.value = false
+    isChangeStartDate.value = true
+    isChangeEndDate.value = false
+    currentElement.value = timeElement
+    if (!timeElement.endDate) {
+      timeElement.endDate = timeElement.startDate.clone().add(1, 'days')
+    }
+    lastStartDate = timeElement.startDate.clone()
+    lastEndDate = timeElement.endDate.clone()
+    initialClientX = getClientX(event)
+    document.body.style.cursor = 'w-resize'
 
-      if (this.currentElement.endDate.isBefore(this.startDate)) {
-        this.currentElement.endDate = this.startDate.clone().add(1, 'days')
-      }
+    updateSelection(timeElement, event)
+  }
+}
 
-      if (this.lastEndDate.isBefore(this.startDate)) {
-        this.lastEndDate = this.startDate.clone().add(1, 'days')
-      }
+const moveTimebarRightSide = (timeElement, event) => {
+  event.preventDefault() // avoid scroll of schedule on touch
+  if (
+    !isChangeDates.value &&
+    !isChangeStartDate.value &&
+    timeElement.editable
+  ) {
+    isChangeDates.value = false
+    isChangeStartDate.value = false
+    isChangeEndDate.value = true
+    currentElement.value = timeElement
+    if (!timeElement.endDate) {
+      timeElement.endDate = timeElement.startDate.clone().add(1, 'days')
+    }
+    lastStartDate = timeElement.startDate.clone()
+    lastEndDate = timeElement.endDate.clone()
+    initialClientX = getClientX(event)
+    document.body.style.cursor = 'e-resize'
 
-      const startDate = this.currentElement.startDate
-      const endDate = this.lastEndDate
-      let startDateIndex, currentIndex
-      if (this.isWeekMode) {
-        startDateIndex = this.getDisplayedWeeksIndex(startDate)
-        currentIndex = this.getDisplayedWeeksIndex(endDate)
-      } else {
-        startDateIndex = this.getDisplayedDaysIndex(startDate)
-        currentIndex = this.getDisplayedDaysIndex(endDate)
-      }
+    updateSelection(timeElement, event)
+  }
+}
 
-      currentIndex += dayChange - 1
-      if (currentIndex < startDateIndex) currentIndex = startDateIndex
-      if (this.isWeekMode) {
-        if (currentIndex > this.displayedWeeksIndex.length) {
-          currentIndex = this.displayedWeeksIndex.length - 1
-        }
-      } else {
-        if (currentIndex > this.displayedDaysIndex.length) {
-          currentIndex = this.displayedDaysIndex.length - 1
-        }
+const onTimelineScroll = event => {
+  if (!event?.target) return
+  const position = event.target
+  const newTop = position.scrollTop
+  entityListRef.value.scrollTop = newTop
+  const newLeft = position.scrollLeft
+  timelineHeaderRef.value.scrollLeft = newLeft
+
+  emit('scroll', { top: position.scrollTop })
+}
+
+const setScrollPosition = top => {
+  timelineContentWrapperRef.value.scrollTop = top
+  entityListRef.value.scrollTop = top
+}
+
+const scrollScheduleLeft = event => {
+  if (!timelineContentWrapperRef.value) return
+  const previousLeft = timelineContentWrapperRef.value.scrollLeft
+  const movementX = event.movementX || getClientX(event) - initialClientX
+  const newLeft = previousLeft - movementX
+  initialClientX = getClientX(event)
+  timelineContentWrapperRef.value.scrollLeft = newLeft
+  timelineHeaderRef.value.scrollLeft = newLeft
+}
+
+const scrollScheduleTop = event => {
+  if (!timelineContentWrapperRef.value) return
+  const previousTop = timelineContentWrapperRef.value.scrollTop
+  const movementY = event.movementY || getClientY(event) - initialClientY
+  const newTop = previousTop - movementY
+  initialClientY = getClientY(event)
+  setScrollPosition(newTop)
+}
+
+const scrollToToday = () => {
+  const today = moment()
+  scrollToDate(today)
+}
+
+const scrollToDate = date => {
+  setTimeout(() => {
+    if (
+      scheduleRef.value &&
+      date.isAfter(props.startDate) &&
+      date.isBefore(props.endDate)
+    ) {
+      const datePosition = getTimebarLeft({ startDate: date }) - 5
+      const newLeft = datePosition - (scheduleRef.value.offsetWidth / 2 - 300)
+      timelineContentWrapperRef.value.scrollLeft = newLeft
+      if (timelineHeaderRef.value) {
+        timelineHeaderRef.value.scrollLeft = newLeft
       }
+    }
+  }, 10)
+}
 
-      const newEndDate = this.isWeekMode
-        ? this.weeksAvailable[currentIndex]
-        : this.displayedDays[currentIndex]
-      if (
-        newEndDate &&
-        !newEndDate.isSame(this.currentElement.endDate) &&
-        this.isValidItemDates(this.currentElement.startDate, newEndDate)
-      ) {
-        this.currentElement.endDate = newEndDate.clone()
-        this.updateItemEstimation(this.currentElement)
-        this.refreshItemPositions(this.currentElement.parentElement)
-        this.resetSelection([this.currentElement])
+const startBrowsing = event => {
+  if (
+    !isChangeStartDate.value &&
+    !isChangeEndDate.value &&
+    !isChangeDates.value
+  ) {
+    document.body.style.cursor = 'grabbing'
+    isBrowsingX.value = true
+    isBrowsingY.value = true
+    initialClientX = getClientX(event)
+    initialClientY = getClientY(event)
+  }
+}
+
+const startBrowsingX = event => {
+  document.body.style.cursor = 'grabbing'
+  isBrowsingX.value = true
+  initialClientX = getClientX(event)
+}
+
+const startBrowsingY = event => {
+  document.body.style.cursor = 'grabbing'
+  isBrowsingY.value = true
+  initialClientY = getClientY(event)
+}
+
+const stopBrowsing = event => {
+  document.body.style.cursor = 'default'
+  if (currentElement.value) {
+    if (initialClientX !== getClientX(event)) {
+      // on moving or resizing selected items
+      selection.value.forEach(item => {
+        emit('item-changed', item)
+        refreshItemPositions(item.parentElement)
+        refreshManDays(item.parentElement)
+      })
+      // clear selection after moving a single item
+      if (isChangeDates.value && selection.value.length === 1) {
+        resetSelection()
       }
-    },
-
-    updateItemEstimation(item) {
-      if (this.isEstimationLinked) {
-        const estimation = getBusinessDays(
-          item.startDate,
-          item.endDate,
-          item.parentElement?.daysOff
-        )
-        item.estimation = daysToMinutes(this.organisation, estimation)
+    } else {
+      // reset multi-selection when clicking on a single item
+      const isCtrlKey = event.ctrlKey || event.metaKey
+      if (isChangeDates.value && selection.value.length > 1 && !isCtrlKey) {
+        resetSelection([currentElement.value])
       }
-    },
+    }
+  } else {
+    // clear the selection when clicking outside an item
+    let target = event.target
+    while (target && target !== timelineRef.value) {
+      target = target.parentNode
+    }
+    if (target) {
+      resetSelection()
+      emit('task-unselected')
+    }
+  }
+  resetDroppableTargets()
+  isChangeStartDate.value = false
+  isChangeEndDate.value = false
+  isChangeDates.value = false
+  isBrowsingX.value = false
+  isBrowsingY.value = false
+  initialClientX = null
+  initialClientY = null
+  currentElement.value = null
+}
 
-    updateSelection(item, event) {
-      const isCtrlKey = event.ctrlKey || event.metaKey
+// Helpers
 
-      if (this.isSelected(item)) {
-        if (isCtrlKey) {
-          this.removeFromSelection(item)
-        }
-      } else {
-        if (!isCtrlKey) {
-          this.resetSelection()
-        }
-        this.addToSelection(item)
-      }
-    },
-
-    isOverlapping(item) {
-      return (
-        this.withGhosts &&
-        ((item.previousElement &&
-          item.startDate.isSameOrBefore(item.previousElement.endDate)) ||
-          (item.nextElement &&
-            item.endDate.isSameOrAfter(item.nextElement.startDate)))
-      )
-    },
+const dateDiff = (startDate, endDate, unit = 'days') => {
+  if (startDate.isSame(endDate) || !startDate.isValid() || !endDate.isValid()) {
+    return 0
+  }
+  const first = startDate.clone().utc().startOf('day')
+  const last = endDate.clone().utc().endOf('day')
+  const diff = last.diff(first, unit)
+  return diff
+}
 
-    isSelected(item) {
-      return this.selection.some(({ id }) => id === item.id)
-    },
+// Styles
 
-    addToSelection(itemToAdd) {
-      this.selection.push(itemToAdd)
-    },
+const dayClass = (day, index = 0) => {
+  return {
+    'day-name': true,
+    'new-week': day.newWeek || false,
+    'new-month': day.newMonth || index === 0 || false,
+    weekend: day.weekend || false,
+    'day-name-off': day.off || false
+  }
+}
 
-    removeFromSelection(itemToRemove) {
-      this.selection = this.selection.filter(item => item !== itemToRemove)
-    },
+const dayOffStyle = dayOff => {
+  return {
+    left: `${getLeftPosition(dayOff.date)}px`,
+    width: `${cellWidth.value - 1}px`
+  }
+}
 
-    resetSelection(value) {
-      this.selection = value || []
-    },
+const dateStatusStyle = date => {
+  return {
+    left: `${getLeftPosition(date) + cellWidth.value / 2 - 3}px`
+  }
+}
 
-    moveTimebar(timeElement, event) {
-      event.preventDefault() // avoid scroll of schedule on touch
-      if (
-        !this.isChangeStartDate &&
-        !this.isChangeEndDate &&
-        timeElement.editable
-      ) {
-        this.isChangeDates = true
-        this.isChangeStartDate = false
-        this.isChangeEndDate = false
-        this.currentElement = timeElement
-        this.lastStartDate = timeElement.startDate.clone()
-        this.lastEndDate = timeElement.endDate.clone()
-        this.initialClientX = this.getClientX(event)
-        document.body.style.cursor = this.reassignable
-          ? 'all-scroll'
-          : 'ew-resize'
-
-        this.updateSelection(timeElement, event)
-      }
-    },
+const getLeftPosition = date => {
+  const startDate = moment.utc(date)
+  const startDiff = dateDiff(props.startDate, startDate, unitOfTime.value)
+  return startDiff * cellWidth.value + 1
+}
 
-    moveTimebarLeftSide(timeElement, event) {
-      event.preventDefault() // avoid scroll of schedule on touch
-      if (
-        !this.isChangeDates &&
-        !this.isChangeEndDate &&
-        timeElement.editable
-      ) {
-        this.isChangeDates = false
-        this.isChangeStartDate = true
-        this.isChangeEndDate = false
-        this.currentElement = timeElement
-        if (!timeElement.endDate) {
-          timeElement.endDate = timeElement.startDate.clone().add(1, 'days')
-        }
-        this.lastStartDate = timeElement.startDate.clone()
-        this.lastEndDate = timeElement.endDate.clone()
-        this.initialClientX = this.getClientX(event)
-        document.body.style.cursor = 'w-resize'
+const entityLineStyle = (
+  timeElement,
+  root = false,
+  header = false,
+  expanded = false
+) => {
+  const style = {}
+  let color = timeElement.color
+  if (root) {
+    // is a person
+    color = isDarkTheme.value ? '#222' : '#EEF'
+  }
+  if (root) {
+    style['border-left'] = `1px solid ${color}`
+    style['border-top'] = `1px solid ${color}`
+    if (!expanded) {
+      style['border-bottom'] = `1px solid ${color}`
+    }
+    if (header) {
+      style.background = color
+    }
+  }
+  if (timeElement.expanded) {
+    style['margin-bottom'] = '0'
+  }
+  style['border-left'] = `1px solid ${color}`
+  style.color = isDarkTheme.value ? '#EEE' : '#111'
+  if (!isDarkTheme.value) {
+    style['border-color'] = '#BBE'
+  }
+  return style
+}
 
-        this.updateSelection(timeElement, event)
-      }
-    },
+const timebarStyle = (timeElement, root = false) => {
+  const style = {
+    left: `${getTimebarLeft(timeElement)}px`,
+    width: `${getTimebarWidth(timeElement)}px`,
+    cursor: timeElement.editable
+      ? !root && props.reassignable
+        ? 'all-scroll'
+        : 'ew-resize'
+      : 'default'
+  }
+  if (root) {
+    style['background-color'] = timeElement.color
+  }
+  return style
+}
 
-    moveTimebarRightSide(timeElement, event) {
-      event.preventDefault() // avoid scroll of schedule on touch
-      if (
-        !this.isChangeDates &&
-        !this.isChangeStartDate &&
-        timeElement.editable
-      ) {
-        this.isChangeDates = false
-        this.isChangeStartDate = false
-        this.isChangeEndDate = true
-        this.currentElement = timeElement
-        if (!timeElement.endDate) {
-          timeElement.endDate = timeElement.startDate.clone().add(1, 'days')
-        }
-        this.lastStartDate = timeElement.startDate.clone()
-        this.lastEndDate = timeElement.endDate.clone()
-        this.initialClientX = this.getClientX(event)
-        document.body.style.cursor = 'e-resize'
+const timelineMultilineStyle = timeElement => {
+  return {
+    top: `${timeElement.line * 40 + 5}px`,
+    left: `${getTimebarLeft(timeElement)}px`
+  }
+}
 
-        this.updateSelection(timeElement, event)
-      }
-    },
-
-    onTimelineScroll(event) {
-      if (!event?.target) return
-      const position = event.target
-      const newTop = position.scrollTop
-      this.entityList.scrollTop = newTop
-      const newLeft = position.scrollLeft
-      this.timelineHeader.scrollLeft = newLeft
-
-      this.$emit('scroll', { top: position.scrollTop })
-    },
-
-    setScrollPosition(top) {
-      this.timelineContentWrapper.scrollTop = top
-      this.entityList.scrollTop = top
-    },
-
-    scrollScheduleLeft(event) {
-      if (!this.timelineContentWrapper) return
-      const previousLeft = this.timelineContentWrapper.scrollLeft
-      const movementX =
-        event.movementX || this.getClientX(event) - this.initialClientX
-      const newLeft = previousLeft - movementX
-      this.initialClientX = this.getClientX(event)
-      this.timelineContentWrapper.scrollLeft = newLeft
-      this.timelineHeader.scrollLeft = newLeft
-    },
-
-    scrollScheduleTop(event) {
-      if (!this.timelineContentWrapper) return
-      const previousTop = this.timelineContentWrapper.scrollTop
-      const movementY =
-        event.movementY || this.getClientY(event) - this.initialClientY
-      const newTop = previousTop - movementY
-      this.initialClientY = this.getClientY(event)
-      this.setScrollPosition(newTop)
-    },
-
-    scrollToToday() {
-      const today = moment()
-      this.scrollToDate(today)
-    },
-
-    scrollToDate(date) {
-      setTimeout(() => {
-        if (
-          this.schedule &&
-          date.isAfter(this.startDate) &&
-          date.isBefore(this.endDate)
-        ) {
-          const datePosition = this.getTimebarLeft({ startDate: date }) - 5
-          const newLeft = datePosition - (this.schedule.offsetWidth / 2 - 300)
-          this.timelineContentWrapper.scrollLeft = newLeft
-          if (this.timelineHeader) {
-            this.timelineHeader.scrollLeft = newLeft
-          }
-        }
-      }, 10)
-    },
+const timelineSubchildrenStyle = timeElement => {
+  const children = Array.from(timeElement.children.values())
+  const nbLines = children.reduce(
+    (acc, subChildren) => acc + getNbLines(subChildren),
+    0
+  )
+  const marginBottom = children.length * 10
+  return {
+    height: `${40 + 40 * nbLines + marginBottom + 2}px`,
+    'padding-top': '13px'
+  }
+}
 
-    startBrowsing(event) {
-      if (
-        !this.isChangeStartDate &&
-        !this.isChangeEndDate &&
-        !this.isChangeDates
-      ) {
-        document.body.style.cursor = 'grabbing'
-        this.isBrowsingX = true
-        this.isBrowsingY = true
-        this.initialClientX = this.getClientX(event)
-        this.initialClientY = this.getClientY(event)
-      }
-    },
-
-    startBrowsingX(event) {
-      document.body.style.cursor = 'grabbing'
-      this.isBrowsingX = true
-      this.initialClientX = this.getClientX(event)
-    },
-
-    startBrowsingY(event) {
-      document.body.style.cursor = 'grabbing'
-      this.isBrowsingY = true
-      this.initialClientY = this.getClientY(event)
-    },
-
-    stopBrowsing(event) {
-      document.body.style.cursor = 'default'
-      if (this.currentElement) {
-        if (this.initialClientX !== this.getClientX(event)) {
-          // on moving or resizing selected items
-          this.selection.forEach(item => {
-            this.$emit('item-changed', item)
-            this.refreshItemPositions(item.parentElement)
-            this.refreshManDays(item.parentElement)
-          })
-          // clear selection after moving a single item
-          if (this.isChangeDates && this.selection.length === 1) {
-            this.resetSelection()
-          }
-        } else {
-          // reset multi-selection when clicking on a single item
-          const isCtrlKey = event.ctrlKey || event.metaKey
-          if (this.isChangeDates && this.selection.length > 1 && !isCtrlKey) {
-            this.resetSelection([this.currentElement])
-          }
-        }
-      } else {
-        // clear the selection when clicking outside an item
-        let target = event.target
-        while (target && target !== this.timeline) {
-          target = target.parentNode
-        }
-        if (target) {
-          this.resetSelection()
-          this.$emit('task-unselected')
-        }
-      }
-      this.resetDroppableTargets()
-      this.isChangeStartDate = false
-      this.isChangeEndDate = false
-      this.isChangeDates = false
-      this.isBrowsingX = false
-      this.isBrowsingY = false
-      this.initialClientX = null
-      this.initialClientY = null
-      this.currentElement = null
-    },
-
-    // Helpers
-
-    dateDiff(startDate, endDate, unitOfTime = 'days') {
-      if (
-        startDate.isSame(endDate) ||
-        !startDate.isValid() ||
-        !endDate.isValid()
-      ) {
-        return 0
-      }
-      const first = startDate.clone().utc().startOf('day')
-      const last = endDate.clone().utc().endOf('day')
-      const diff = last.diff(first, unitOfTime)
-      return diff
-    },
-
-    // Styles
-
-    dayClass(day, index = 0) {
-      return {
-        'day-name': true,
-        'new-week': day.newWeek || false,
-        'new-month': day.newMonth || index === 0 || false,
-        weekend: day.weekend || false,
-        'day-name-off': day.off || false
-      }
-    },
+const timebarChildStyle = (
+  timeElement,
+  rootElement,
+  multiline = false,
+  opacityPercentage = 0,
+  opacityColor = 'transparent'
+) => {
+  const elementColor = timeElement.color || rootElement.color
+  return {
+    left: !multiline && `${getTimebarLeft(timeElement)}px`,
+    width: `${getTimebarWidth(timeElement)}px`,
+    cursor: timeElement.editable
+      ? props.reassignable
+        ? 'all-scroll'
+        : 'ew-resize'
+      : 'default',
+    background: opacityPercentage
+      ? `color-mix(in srgb, ${elementColor}, ${opacityColor} ${opacityPercentage}%)` // lighter color
+      : elementColor
+  }
+}
 
-    dayOffStyle(dayOff) {
-      return {
-        left: `${this.getLeftPosition(dayOff.date)}px`,
-        width: `${this.cellWidth - 1}px`
-      }
-    },
+const timesheetStyle = (
+  timesheet,
+  timeElement,
+  rootElement,
+  withEstimations
+) => {
+  return {
+    top: withEstimations ? '7px' : '18px',
+    left: `${getTimebarLeft(timesheet, true)}px`,
+    width: `${getTimebarWidth(timesheet)}px`,
+    background: timesheet.color || timeElement.color || rootElement.color
+  }
+}
 
-    dateStatusStyle(date) {
-      return {
-        left: `${this.getLeftPosition(date) + this.cellWidth / 2 - 3}px`
-      }
-    },
+const timebarSubchildStyle = (timeElement, rootElement) => {
+  const color = timeElement.color || rootElement.color
+  const selected = isSelected(timeElement)
+  return {
+    left: `${getTimebarLeft(timeElement)}px`,
+    width: `${getTimebarWidth(timeElement)}px`,
+    cursor: timeElement.editable
+      ? props.reassignable
+        ? 'all-scroll'
+        : 'ew-resize'
+      : 'default',
+    top: `${5 + 38 * timeElement.line}px`,
+    background: `color-mix(in srgb, ${color} ${selected ? 80 : 40}%, transparent)`,
+    'box-shadow': `inset 0 0 1px 2px ${selected ? 'var(--background-selected)' : color}`
+  }
+}
 
-    getLeftPosition(date) {
-      const startDate = moment.utc(date)
-      const startDiff = this.dateDiff(
-        this.startDate,
-        startDate,
-        this.unitOfTime
-      )
-      return startDiff * this.cellWidth + 1
-    },
-
-    entityLineStyle(
-      timeElement,
-      root = false,
-      header = false,
-      expanded = false
-    ) {
-      const style = {}
-      let color = timeElement.color
-      if (root) {
-        // is a person
-        color = this.isDarkTheme ? '#222' : '#EEF'
-      }
-      if (root) {
-        style['border-left'] = `1px solid ${color}`
-        style['border-top'] = `1px solid ${color}`
-        if (!expanded) {
-          style['border-bottom'] = `1px solid ${color}`
-        }
-        if (header) {
-          style.background = color
-        }
-      }
-      if (timeElement.expanded) {
-        style['margin-bottom'] = '0'
-      }
-      style['border-left'] = `1px solid ${color}`
-      style.color = this.isDarkTheme ? '#EEE' : '#111'
-      if (!this.isDarkTheme) {
-        style['border-color'] = '#BBE'
-      }
-      return style
-    },
-
-    timebarStyle(timeElement, root = false) {
-      const style = {
-        left: `${this.getTimebarLeft(timeElement)}px`,
-        width: `${this.getTimebarWidth(timeElement)}px`,
-        cursor: timeElement.editable
-          ? !root && this.reassignable
-            ? 'all-scroll'
-            : 'ew-resize'
-          : 'default'
-      }
-      if (root) {
-        style['background-color'] = timeElement.color
-      }
-      return style
-    },
+const timebarSubchildTitle = task => {
+  const name = task.entity.name
+  const startDate = task.startDate.format('YYYY-MM-DD')
+  const endDate = task.endDate.format('YYYY-MM-DD')
+  const duration = isRealSchedule.value
+    ? formatDuration(task.duration)
+    : formatDuration(task.estimation)
+  return `${name} (${startDate} - ${endDate}) ${duration} ${t('schedule.md')}`
+}
 
-    timelineMultilineStyle(timeElement) {
-      return {
-        top: `${timeElement.line * 40 + 5}px`,
-        left: `${this.getTimebarLeft(timeElement)}px`
-      }
-    },
+const getTimebarLeft = timeElement => {
+  const startDate = timeElement.startDate || props.startDate
+  const startDiff = dateDiff(props.startDate, startDate, unitOfTime.value)
+  return startDiff * cellWidth.value + 3
+}
 
-    timelineSubchildrenStyle(timeElement) {
-      const children = Array.from(timeElement.children.values())
-      const nbLines = children.reduce(
-        (acc, subChildren) => acc + this.getNbLines(subChildren),
-        0
-      )
-      const marginBottom = children.length * 10
-      return {
-        height: `${40 + 40 * nbLines + marginBottom + 2}px`,
-        'padding-top': '13px'
-      }
-    },
-
-    timebarChildStyle(
-      timeElement,
-      rootElement,
-      multiline = false,
-      opacityPercentage = 0,
-      opacityColor = 'transparent'
-    ) {
-      const elementColor = timeElement.color || rootElement.color
-      return {
-        left: !multiline && `${this.getTimebarLeft(timeElement)}px`,
-        width: `${this.getTimebarWidth(timeElement)}px`,
-        cursor: timeElement.editable
-          ? this.reassignable
-            ? 'all-scroll'
-            : 'ew-resize'
-          : 'default',
-        background: opacityPercentage
-          ? `color-mix(in srgb, ${elementColor}, ${opacityColor} ${opacityPercentage}%)` // lighter color
-          : elementColor
-      }
-    },
-
-    timesheetStyle(timesheet, timeElement, rootElement, withEstimations) {
-      return {
-        top: withEstimations ? '7px' : '18px',
-        left: `${this.getTimebarLeft(timesheet, true)}px`,
-        width: `${this.getTimebarWidth(timesheet)}px`,
-        background: timesheet.color || timeElement.color || rootElement.color
-      }
-    },
-
-    timebarSubchildStyle(timeElement, rootElement) {
-      const color = timeElement.color || rootElement.color
-      const isSelected = this.isSelected(timeElement)
-      return {
-        left: `${this.getTimebarLeft(timeElement)}px`,
-        width: `${this.getTimebarWidth(timeElement)}px`,
-        cursor: timeElement.editable
-          ? this.reassignable
-            ? 'all-scroll'
-            : 'ew-resize'
-          : 'default',
-        top: `${5 + 38 * timeElement.line}px`,
-        background: `color-mix(in srgb, ${color} ${isSelected ? 80 : 40}%, transparent)`,
-        'box-shadow': `inset 0 0 1px 2px ${isSelected ? 'var(--background-selected)' : color}`
-      }
-    },
-
-    timebarSubchildTitle(task) {
-      const name = task.entity.name
-      const startDate = task.startDate.format('YYYY-MM-DD')
-      const endDate = task.endDate.format('YYYY-MM-DD')
-      const duration = this.isRealSchedule
-        ? this.formatDuration(task.duration)
-        : this.formatDuration(task.estimation)
-      return `${name} (${startDate} - ${endDate}) ${duration} ${this.$t('schedule.md')}`
-    },
-
-    getTimebarLeft(timeElement) {
-      const startDate = timeElement.startDate || this.startDate
-      const startDiff = this.dateDiff(
-        this.startDate,
-        startDate,
-        this.unitOfTime
-      )
-      return startDiff * this.cellWidth + 3
-    },
+const getTimebarWidth = timeElement => {
+  const startDate = timeElement.startDate || props.startDate
+  let endDate =
+    timeElement.endDate ||
+    (timeElement.startDate && timeElement.startDate.clone().add(1, 'days')) ||
+    props.startDate.clone().add(1, 'days')
 
-    getTimebarWidth(timeElement) {
-      const startDate = timeElement.startDate || this.startDate
-      let endDate =
-        timeElement.endDate ||
-        (timeElement.startDate &&
-          timeElement.startDate.clone().add(1, 'days')) ||
-        this.startDate.clone().add(1, 'days')
+  if (
+    timeElement.man_days > 0 &&
+    !timeElement.end_date &&
+    !timeElement.endDate
+  ) {
+    const days = Math.ceil(timeElement.man_days)
+    endDate = addBusinessDays(startDate, days - 1)
+  }
 
-      if (
-        timeElement.man_days > 0 &&
-        !timeElement.end_date &&
-        !timeElement.endDate
-      ) {
-        const days = Math.ceil(timeElement.man_days)
-        endDate = addBusinessDays(startDate, days - 1)
-      }
+  const lengthDiff = dateDiff(startDate, endDate, unitOfTime.value)
+  if (lengthDiff > 0) {
+    return (lengthDiff + 1) * cellWidth.value - 6
+  } else {
+    return cellWidth.value - 4
+  }
+}
 
-      const lengthDiff = this.dateDiff(startDate, endDate, this.unitOfTime)
-      if (lengthDiff > 0) {
-        return (lengthDiff + 1) * this.cellWidth - 6
-      } else {
-        return this.cellWidth - 4
-      }
-    },
-
-    // Children
-
-    expandRootElement(rootElement) {
-      if (rootElement.expanded) {
-        // clear selected items when collapsing the root element
-        this.selection.forEach(item => {
-          const taskRootElementId =
-            item.parentElement?.parentElement?.id || item.parentElement?.id
-          if (taskRootElementId === rootElement.id) {
-            this.removeFromSelection(item)
-          }
-        })
+// Children
+
+const expandRootElement = rootElement => {
+  if (rootElement.expanded) {
+    // clear selected items when collapsing the root element
+    selection.value.forEach(item => {
+      const taskRootElementId =
+        item.parentElement?.parentElement?.id || item.parentElement?.id
+      if (taskRootElementId === rootElement.id) {
+        removeFromSelection(item)
       }
+    })
+  }
 
-      this.$emit(
-        'root-element-expanded',
-        rootElement,
-        this.multiline || this.subchildren
-          ? this.refreshItemPositions
-          : undefined
-      )
-    },
+  emit(
+    'root-element-expanded',
+    rootElement,
+    props.multiline || props.subchildren ? refreshItemPositions : undefined
+  )
+}
 
-    childNameStyle(rootElement, index) {
-      const isOdd = index % 2 === 0
-      const level = isOdd ? 0.7 : 0.9
-      return {
-        background: colors.fadeColor(rootElement.color, level)
-      }
-    },
+const childNameStyle = (rootElement, index) => {
+  const isOdd = index % 2 === 0
+  const level = isOdd ? 0.7 : 0.9
+  return {
+    background: colors.fadeColor(rootElement.color, level)
+  }
+}
 
-    childrenStyle(rootElement, isMultiline = false, setBackground = false) {
-      const style = {
-        'border-bottom': `1px solid ${rootElement.color}`,
-        'border-left': `1px solid ${rootElement.color}`
-      }
-      if (isMultiline) {
-        const nbLines = this.getNbLines(rootElement.children)
-        style.height = `${40 * nbLines + 10}px`
+const childrenStyle = (
+  rootElement,
+  isMultiline = false,
+  setBackground = false
+) => {
+  const style = {
+    'border-bottom': `1px solid ${rootElement.color}`,
+    'border-left': `1px solid ${rootElement.color}`
+  }
+  if (isMultiline) {
+    const nbLines = getNbLines(rootElement.children)
+    style.height = `${40 * nbLines + 10}px`
+
+    if (setBackground) {
+      style.background = colors.fadeColor(rootElement.color, 0.7)
+    }
+  }
+  return style
+}
 
-        if (setBackground) {
-          style.background = colors.fadeColor(rootElement.color, 0.7)
-        }
-      }
-      return style
-    },
-
-    // Milestones
-
-    showEditMilestoneModal(day, milestone) {
-      if (this.isCurrentUserManager) {
-        this.modals.edit = true
-        if (milestone) {
-          this.milestoneToEdit = {
-            ...milestone,
-            date: parseDate(milestone.date)
-          }
-        } else {
-          this.milestoneToEdit = { date: day }
-        }
-      }
-    },
+// Milestones
 
-    hideEditMilestoneModal() {
-      this.modals.edit = false
-    },
+const showEditMilestoneModal = (day, milestone) => {
+  if (isCurrentUserManager.value) {
+    modals.edit = true
+    if (milestone) {
+      Object.assign(milestoneToEdit, {
+        ...milestone,
+        date: parseDate(milestone.date)
+      })
+    } else {
+      Object.assign(milestoneToEdit, {
+        date: day,
+        name: undefined,
+        id: undefined
+      })
+    }
+  }
+}
 
-    confirmEditMilestone(milestone) {
-      this.loading.edit = true
-      this.saveMilestone(milestone)
-        .then(() => {
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.errors.edit = true
-        })
-        .finally(() => {
-          this.loading.edit = false
-        })
-    },
+const hideEditMilestoneModal = () => {
+  modals.edit = false
+}
 
-    removeMilestone(milestone) {
-      this.loading.edit = true
-      this.deleteMilestone(milestone)
-        .then(() => {
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.errors.edit = true
-        })
-        .finally(() => {
-          this.loading.edit = false
-        })
-    },
-
-    milestoneLineStyle(milestone) {
-      const startDate = parseDate(this.startDate.format('YYYY-MM-DD'))
-      const milestoneDate = parseDate(milestone.date)
-      if (startDate.isSameOrBefore(milestoneDate)) {
-        const lengthDiff = this.dateDiff(
-          startDate,
-          milestoneDate,
-          this.unitOfTime
-        )
-        return {
-          left: `${(lengthDiff + 0.5) * this.cellWidth}px`
-        }
-      } else {
-        return {
-          display: 'none'
-        }
-      }
-    },
+const confirmEditMilestone = milestone => {
+  loading.edit = true
+  saveMilestone(milestone)
+    .then(() => {
+      modals.edit = false
+    })
+    .catch(err => {
+      console.error(err)
+      errors.edit = true
+    })
+    .finally(() => {
+      loading.edit = false
+    })
+}
 
-    addMilestoneTitle(day) {
-      return `${this.$t('schedule.milestone.add_milestone')} ${day.format('YYYY-MM-DD')}`
-    },
+const removeMilestone = milestone => {
+  loading.edit = true
+  deleteMilestone(milestone)
+    .then(() => {
+      modals.edit = false
+    })
+    .catch(err => {
+      console.error(err)
+      errors.edit = true
+    })
+    .finally(() => {
+      loading.edit = false
+    })
+}
 
-    checkUserIsAllowed(item, person) {
-      if (!item) {
-        return false
-      }
-      const production = this.openProductions.find(
-        ({ id }) => id === item.project_id
-      )
-      const isTeamMember = production.team.includes(person.id)
-      const isDepartmentMember =
-        !person.departments.length ||
-        !item.department ||
-        person.departments.includes(item.department.id)
-      return isTeamMember && isDepartmentMember
-    },
-
-    onTaskDragEnter(event, rootElement) {
-      // HACK: the getData doesn't work on dragEnter, we use a "task-type-*" data key instead (key must be lowercase)
-      const draggedItemTaskType = event.dataTransfer.types.find(
-        dataKey => dataKey === `task-type-${rootElement.task_type_id}`
-      )
-      if (!draggedItemTaskType) {
-        const item = this.draggedItems?.[0]
-        const isAllowed = this.checkUserIsAllowed(item, rootElement)
-        if (!isAllowed) {
-          return
-        }
-      }
-      event.currentTarget.classList.add('droppable')
-    },
-
-    onTaskDragOver(event) {
-      event.preventDefault()
-    },
-
-    onTaskDragLeave(event) {
-      event.target.classList.remove('droppable')
-    },
-
-    onTaskDrop(event, rootElement) {
-      event.target.classList.remove('droppable')
-
-      let item = this.draggedItems?.[0]
-      if (!item) {
-        const entityId = event.dataTransfer.getData('entityId')
-        const taskTypeId = event.dataTransfer.getData('taskTypeId')
-        if (!entityId || taskTypeId !== rootElement.task_type_id) {
-          return // invalid task type
-        }
-        item = { entity_id: entityId }
-      } else if (!this.checkUserIsAllowed(item, rootElement)) {
-        return // invalid user rights
-      }
+const milestoneLineStyle = milestone => {
+  const startDate = parseDate(props.startDate.format('YYYY-MM-DD'))
+  const milestoneDate = parseDate(milestone.date)
+  if (startDate.isSameOrBefore(milestoneDate)) {
+    const lengthDiffVal = dateDiff(startDate, milestoneDate, unitOfTime.value)
+    return {
+      left: `${(lengthDiffVal + 0.5) * cellWidth.value}px`
+    }
+  } else {
+    return {
+      display: 'none'
+    }
+  }
+}
 
-      const position =
-        this.timelineContentWrapper.scrollLeft +
-        this.getClientX(event) -
-        300 -
-        this.cellWidth * 1.5
-      const dayPosition = Math.floor(position / this.cellWidth)
-      const dropDate = this.startDate.clone().add(dayPosition, 'days')
-      const startDate = addBusinessDays(dropDate, 0, rootElement.daysOff)
-      const endDate = item.estimation
-        ? addBusinessDays(
-            startDate,
-            minutesToDays(this.organisation, item.estimation) - 1,
-            rootElement.daysOff
-          )
-        : startDate
-
-      // convert to schedule item
-      item.full_entity_name = `${item.entity_type_name} / ${item.entity_name}`
-      item.start_date = startDate.format('YYYY-MM-DD')
-      item.due_date = endDate.format('YYYY-MM-DD')
-      item.parentElement = rootElement
-
-      this.$emit(
-        'item-drop',
-        item,
-        rootElement,
-        this.multiline ? this.refreshItemPositions : undefined
-      )
-    },
+const addMilestoneTitle = day => {
+  return `${t('schedule.milestone.add_milestone')} ${day.format('YYYY-MM-DD')}`
+}
 
-    exportData() {
-      return {
-        header: this.daysAvailable,
-        hierarchy: this.hierarchy
-      }
+const checkUserIsAllowed = (item, person) => {
+  if (!item) {
+    return false
+  }
+  const production = openProductions.value.find(
+    ({ id }) => id === item.project_id
+  )
+  const isTeamMember = production.team.includes(person.id)
+  const isDepartmentMember =
+    !person.departments.length ||
+    !item.department ||
+    person.departments.includes(item.department.id)
+  return isTeamMember && isDepartmentMember
+}
+
+const onTaskDragEnter = (event, rootElement) => {
+  // HACK: the getData doesn't work on dragEnter, we use a "task-type-*" data key instead (key must be lowercase)
+  const draggedItemTaskType = event.dataTransfer.types.find(
+    dataKey => dataKey === `task-type-${rootElement.task_type_id}`
+  )
+  if (!draggedItemTaskType) {
+    const item = props.draggedItems?.[0]
+    const isAllowed = checkUserIsAllowed(item, rootElement)
+    if (!isAllowed) {
+      return
     }
-  },
+  }
+  event.currentTarget.classList.add('droppable')
+}
 
-  watch: {
-    startDate() {
-      this.resetScheduleSize()
-    },
-    endDate() {
-      this.resetScheduleSize()
-    },
-    zoomLevel() {
-      this.resetScheduleSize()
-      this.refreshAllItemPositions()
-      this.onTimelineScroll(null, { scrollTop: 0, scrollLeft: 0 })
-    },
-    isLoading() {
-      this.$nextTick(this.resetScheduleSize)
-    },
-    height() {
-      this.$nextTick(this.resetScheduleSize)
-    },
-    currentElement() {
-      if (this.currentElement && this.currentElement.task_type_id) {
-        const task = this.taskMap.get(this.currentElement.id)
-        if (task) {
-          this.$store.commit('UPDATE_TASK', {
-            task,
-            updatedAt: formatFullDate(moment())
-          })
-        }
-      }
-    },
-    currentProduction: {
-      immediate: true,
-      handler() {
-        if (this.withMilestones) {
-          this.loadMilestones(this.currentProduction)
-        }
-      }
+const onTaskDragOver = event => {
+  event.preventDefault()
+}
+
+const onTaskDragLeave = event => {
+  event.target.classList.remove('droppable')
+}
+
+const onTaskDrop = (event, rootElement) => {
+  event.target.classList.remove('droppable')
+
+  let item = props.draggedItems?.[0]
+  if (!item) {
+    const entityId = event.dataTransfer.getData('entityId')
+    const taskTypeId = event.dataTransfer.getData('taskTypeId')
+    if (!entityId || taskTypeId !== rootElement.task_type_id) {
+      return // invalid task type
     }
+    item = { entity_id: entityId }
+  } else if (!checkUserIsAllowed(item, rootElement)) {
+    return // invalid user rights
+  }
+
+  const position =
+    timelineContentWrapperRef.value.scrollLeft +
+    getClientX(event) -
+    300 -
+    cellWidth.value * 1.5
+  const dayPosition = Math.floor(position / cellWidth.value)
+  const dropDate = props.startDate.clone().add(dayPosition, 'days')
+  const startDate = addBusinessDays(dropDate, 0, rootElement.daysOff)
+  const endDate = item.estimation
+    ? addBusinessDays(
+        startDate,
+        minutesToDays(organisation.value, item.estimation) - 1,
+        rootElement.daysOff
+      )
+    : startDate
+
+  // convert to schedule item
+  item.full_entity_name = `${item.entity_type_name} / ${item.entity_name}`
+  item.start_date = startDate.format('YYYY-MM-DD')
+  item.due_date = endDate.format('YYYY-MM-DD')
+  item.parentElement = rootElement
+
+  emit(
+    'item-drop',
+    item,
+    rootElement,
+    props.multiline ? refreshItemPositions : undefined
+  )
+}
+
+const exportData = () => {
+  return {
+    header: daysAvailable.value,
+    hierarchy: props.hierarchy
   }
 }
 
+// Watchers
+
+watch(
+  () => props.startDate,
+  () => {
+    resetScheduleSize()
+  }
+)
+
+watch(
+  () => props.endDate,
+  () => {
+    resetScheduleSize()
+  }
+)
+
+watch(
+  () => props.zoomLevel,
+  () => {
+    resetScheduleSize()
+    refreshAllItemPositions()
+    onTimelineScroll(null, { scrollTop: 0, scrollLeft: 0 })
+  }
+)
+
+watch(
+  () => props.isLoading,
+  () => {
+    nextTick(resetScheduleSize)
+  }
+)
+
+watch(
+  () => props.height,
+  () => {
+    nextTick(resetScheduleSize)
+  }
+)
+
+watch(currentElement, () => {
+  if (currentElement.value && currentElement.value.task_type_id) {
+    const task = taskMap.value.get(currentElement.value.id)
+    if (task) {
+      store.commit('UPDATE_TASK', {
+        task,
+        updatedAt: formatFullDate(moment())
+      })
+    }
+  }
+})
+
+watch(
+  currentProduction,
+  () => {
+    if (props.withMilestones) {
+      loadMilestones(currentProduction.value)
+    }
+  },
+  { immediate: true }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  resetScheduleSize()
+  addEvents(domEvents)
+})
+
+onBeforeUnmount(() => {
+  removeEvents(domEvents)
+  document.body.style.cursor = 'default'
+})
+
+defineExpose({
+  exportData,
+  getNbSubChildren,
+  refreshAllItemPositions,
+  refreshItemPositions,
+  refreshManDays,
+  resetScheduleSize,
+  scrollToDate,
+  scrollToToday,
+  setScrollPosition
+})
+
 /**
  * Set the position of items in the schedule, avoiding collisions.
  * Add a `line` attribute to each item.
diff --git a/src/components/widgets/SearchField.vue b/src/components/widgets/SearchField.vue
index 6354aa3adb..d65eb89e72 100644
--- a/src/components/widgets/SearchField.vue
+++ b/src/components/widgets/SearchField.vue
@@ -6,7 +6,7 @@
 
     <div class="flexrow-item search-field">
       <input
-        ref="input"
+        ref="inputRef"
         class="search-input"
         type="text"
         :placeholder="placeholder"
@@ -31,73 +31,62 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { SaveIcon, SearchIcon } from 'lucide-vue-next'
 
-export default {
-  name: 'search-field',
-
-  data() {
-    return {
-      search: '',
-      focused: false
-    }
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
   },
-
-  props: {
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    canSave: {
-      type: Boolean,
-      default: false
-    },
-    focusOptions: {
-      type: Object
-    }
+  canSave: {
+    type: Boolean,
+    default: false
   },
+  focusOptions: {
+    type: Object
+  }
+})
 
-  emits: ['change', 'enter', 'save'],
+const emit = defineEmits(['change', 'enter', 'save'])
 
-  components: {
-    SaveIcon,
-    SearchIcon
-  },
+const search = ref('')
+const focused = ref(false)
+const inputRef = ref(null)
 
-  methods: {
-    onSearchChange() {
-      this.$emit('change', this.search)
-    },
+const onSearchChange = () => {
+  emit('change', search.value)
+}
 
-    onEnterPressed() {
-      this.$emit('enter', this.search)
-    },
+const onEnterPressed = () => {
+  emit('enter', search.value)
+}
 
-    onSaveClicked() {
-      if (this.search && this.canSave) {
-        this.$emit('save', this.search)
-      }
-    },
+const onSaveClicked = () => {
+  if (search.value && props.canSave) {
+    emit('save', search.value)
+  }
+}
 
-    getValue() {
-      return this.search
-    },
+const getValue = () => {
+  return search.value
+}
 
-    setValue(value) {
-      this.search = value
-    },
+const setValue = value => {
+  search.value = value
+}
 
-    focus(options) {
-      this.$refs.input?.focus(options)
-    },
+const focus = options => {
+  inputRef.value?.focus(options)
+}
 
-    clearSearch() {
-      this.search = ''
-      this.onSearchChange()
-    }
-  }
+const clearSearch = () => {
+  search.value = ''
+  onSearchChange()
 }
+
+defineExpose({ getValue, setValue, focus, clearSearch })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/SearchQueryList.vue b/src/components/widgets/SearchQueryList.vue
index bfeb279eae..a50f72ac09 100644
--- a/src/components/widgets/SearchQueryList.vue
+++ b/src/components/widgets/SearchQueryList.vue
@@ -189,11 +189,11 @@
   </div>
 </template>
 
-<script>
-/*
- * This component displays a list of queries available to users to filter list
- * results. It allows to modify each query too.
- */
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -202,7 +202,6 @@ import {
   PencilIcon,
   Trash2Icon
 } from 'lucide-vue-next'
-import { mapActions, mapGetters } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 import stringHelpers from '@/lib/string'
@@ -211,298 +210,267 @@ import ConfirmModal from '@/components/modals/ConfirmModal.vue'
 import EditSearchFilterModal from '@/components/modals/EditSearchFilterModal.vue'
 import EditSearchFilterGroupModal from '@/components/modals/EditSearchFilterGroupModal.vue'
 
-export default {
-  name: 'search-query-list',
-
-  components: {
-    ChevronDownIcon,
-    ChevronUpIcon,
-    ConfirmModal,
-    Edit2Icon,
-    EditSearchFilterModal,
-    EditSearchFilterGroupModal,
-    FolderPlusIcon,
-    PencilIcon,
-    Trash2Icon
-  },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
 
-  props: {
-    queries: {
-      type: Array,
-      default: () => []
-    },
-    groups: {
-      type: Array,
-      default: () => []
-    },
-    isGroupEnabled: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      required: true
-    }
+const props = defineProps({
+  queries: {
+    type: Array,
+    default: () => []
   },
-
-  emits: ['change-search', 'remove-search'],
-
-  data() {
-    return {
-      groupToEdit: {},
-      groupToRemove: {},
-      isEditing: false,
-      queryPaths: {},
-      searchQueryToEdit: {},
-      searchQueryToRemove: {},
-      errors: {
-        edit: false,
-        group: false,
-        remove: false
-      },
-      loading: {
-        edit: false,
-        group: false,
-        remove: false
-      },
-      modals: {
-        edit: false,
-        group: false,
-        remove: false
-      },
-      toggleGroupId: null
-    }
+  groups: {
+    type: Array,
+    default: () => []
   },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.setQueryPaths()
-    })
+  isGroupEnabled: {
+    type: Boolean,
+    default: false
   },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'departmentMap',
-      'isCurrentUserClient',
-      'isCurrentUserManager',
-      'personMap'
-    ]),
-
-    sortedFilters() {
-      const queries = this.queries.filter(
-        query =>
-          !this.isCurrentUserClient ||
-          (this.isCurrentUserClient && !query.is_shared)
-      )
-      return sortByName(queries)
-    },
-
-    userFilters() {
-      return this.sortedFilters
-        .filter(query => !query.search_filter_group_id)
-        .sort((a, b) => {
-          if (a.is_shared && !b.is_shared) {
-            return -1
-          } else if (!a.is_shared && b.is_shared) {
-            return 1
-          } else {
-            return 0
-          }
-        })
-    },
-
-    userFilterGroups() {
-      const groups = this.groups.filter(
-        group =>
-          !this.isCurrentUserClient ||
-          (this.isCurrentUserClient && !group.is_shared)
-      )
-      return sortByName(groups).map(group => ({
-        ...group,
-        queries: this.sortedFilters.filter(
-          query => query.search_filter_group_id === group.id
-        )
-      }))
-    },
-
-    groupOptions() {
-      return [
-        { label: '', value: null },
-        ...this.userFilterGroups.map(group => ({
-          label: group.name,
-          value: group.id,
-          is_shared: group.is_shared
-        }))
-      ]
-    },
-
-    removeText() {
-      if (this.searchQueryToRemove.id) {
-        return this.$t('main.remove_search_query', {
-          name: this.searchQueryToRemove.name
-        })
+  type: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['change-search', 'remove-search'])
+
+const groupToEdit = ref({})
+const groupToRemove = ref({})
+const isEditing = ref(false)
+const queryPaths = ref({})
+const searchQueryToEdit = ref({})
+const searchQueryToRemove = ref({})
+const errors = reactive({
+  edit: false,
+  group: false,
+  remove: false
+})
+const loading = reactive({
+  edit: false,
+  group: false,
+  remove: false
+})
+const modals = reactive({
+  edit: false,
+  group: false,
+  remove: false
+})
+const toggleGroupId = ref(null)
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const departmentMap = computed(() => store.getters.departmentMap)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const personMap = computed(() => store.getters.personMap)
+
+const sortedFilters = computed(() => {
+  const queries = props.queries.filter(
+    query =>
+      !isCurrentUserClient.value ||
+      (isCurrentUserClient.value && !query.is_shared)
+  )
+  return sortByName(queries)
+})
+
+const userFilters = computed(() => {
+  return sortedFilters.value
+    .filter(query => !query.search_filter_group_id)
+    .sort((a, b) => {
+      if (a.is_shared && !b.is_shared) {
+        return -1
+      } else if (!a.is_shared && b.is_shared) {
+        return 1
       } else {
-        return this.$t('main.remove_search_filter_group', {
-          name: this.groupToRemove.name
-        })
+        return 0
       }
+    })
+})
+
+const userFilterGroups = computed(() => {
+  const groups = props.groups.filter(
+    group =>
+      !isCurrentUserClient.value ||
+      (isCurrentUserClient.value && !group.is_shared)
+  )
+  return sortByName(groups).map(group => ({
+    ...group,
+    queries: sortedFilters.value.filter(
+      query => query.search_filter_group_id === group.id
+    )
+  }))
+})
+
+const groupOptions = computed(() => {
+  return [
+    { label: '', value: null },
+    ...userFilterGroups.value.map(group => ({
+      label: group.name,
+      value: group.id,
+      is_shared: group.is_shared
+    }))
+  ]
+})
+
+const removeText = computed(() => {
+  if (searchQueryToRemove.value.id) {
+    return t('main.remove_search_query', {
+      name: searchQueryToRemove.value.name
+    })
+  } else {
+    return t('main.remove_search_filter_group', {
+      name: groupToRemove.value.name
+    })
+  }
+})
+
+const setQueryPaths = () => {
+  props.queries.forEach(query => {
+    queryPaths.value[query.id] = queryRoute(query)
+  })
+}
+
+const queryRoute = searchQuery => {
+  return {
+    ...route,
+    query: {
+      ...route.query,
+      search: searchQuery.search_query
     }
-  },
+  }
+}
 
-  methods: {
-    ...mapActions([
-      'removeAssetSearchFilterGroup',
-      'removeBreakdownSearchFilterGroup',
-      'removeShotSearchFilterGroup',
-      'saveAssetSearchFilterGroup',
-      'saveBreakdownSearchFilterGroup',
-      'saveShotSearchFilterGroup',
-      'updateSearchFilter',
-      'updateSearchFilterGroup'
-    ]),
-
-    setQueryPaths() {
-      this.queries.forEach(query => {
-        this.queryPaths[query.id] = this.queryRoute(query)
-      })
-    },
-
-    queryRoute(searchQuery) {
-      const route = this.$route
-      return {
-        ...route,
-        query: {
-          ...route.query,
-          search: searchQuery.search_query
-        }
-      }
-    },
-
-    changeSearch(searchQuery) {
-      this.$emit('change-search', searchQuery)
-    },
-
-    editGroup(group = {}) {
-      this.groupToEdit = group
-      this.modals.group = true
-    },
-
-    editSearch(searchQuery) {
-      this.searchQueryToEdit = searchQuery
-      this.modals.edit = true
-    },
-
-    async confirmEditFilterGroup(filterGroup) {
-      try {
-        this.loading.group = true
-        this.errors.group = false
-        filterGroup.project_id = this.currentProduction
-          ? this.currentProduction.id
-          : null
-        if (!filterGroup.id) {
-          await this[
-            `save${stringHelpers.capitalize(this.type)}SearchFilterGroup`
-          ](filterGroup)
-        } else {
-          await this.updateSearchFilterGroup(filterGroup)
-        }
-        this.modals.group = false
-      } catch (err) {
-        console.error(err)
-        this.errors.group = true
-      } finally {
-        this.loading.group = false
-      }
-    },
-
-    async confirmEditSearch(searchFilter) {
-      try {
-        this.loading.edit = true
-        this.errors.edit = false
-        searchFilter.project_id = this.currentProduction
-          ? this.currentProduction.id
-          : null
-        await this.updateSearchFilter(searchFilter)
-        this.modals.edit = false
-      } catch (err) {
-        console.error(err)
-        this.errors.edit = true
-      } finally {
-        this.loading.edit = false
-      }
-    },
+const changeSearch = searchQuery => {
+  emit('change-search', searchQuery)
+}
 
-    closeFilterGroupModal() {
-      this.modals.group = false
-    },
+const editGroup = (group = {}) => {
+  groupToEdit.value = group
+  modals.group = true
+}
 
-    confirmRemoveSearch(searchQuery) {
-      this.searchQueryToRemove = searchQuery
-      this.groupToRemove = {}
-      this.modals.remove = true
-    },
+const editSearch = searchQuery => {
+  searchQueryToEdit.value = searchQuery
+  modals.edit = true
+}
 
-    removeSearch() {
-      if (this.searchQueryToRemove.id) {
-        this.$emit('remove-search', this.searchQueryToRemove)
-      } else {
-        this.removeGroup()
-      }
-      this.modals.remove = false
-      this.searchQueryToRemove = {}
-      this.groupToRemove = {}
-    },
-
-    confirmRemoveGroup(filterGroup) {
-      this.groupToRemove = filterGroup
-      this.searchQueryToRemove = {}
-      this.modals.remove = true
-    },
-
-    async removeGroup() {
-      try {
-        await this[
-          `remove${stringHelpers.capitalize(this.type)}SearchFilterGroup`
-        ](this.groupToRemove)
-        this.modals.remove = false
-      } catch (err) {
-        console.error(err)
-        this.errors.remove = true
-      } finally {
-        this.loading.remove = false
-      }
-    },
+const confirmEditFilterGroup = async filterGroup => {
+  try {
+    loading.group = true
+    errors.group = false
+    filterGroup.project_id = currentProduction.value
+      ? currentProduction.value.id
+      : null
+    if (!filterGroup.id) {
+      await store.dispatch(
+        `save${stringHelpers.capitalize(props.type)}SearchFilterGroup`,
+        filterGroup
+      )
+    } else {
+      await store.dispatch('updateSearchFilterGroup', filterGroup)
+    }
+    modals.group = false
+  } catch (err) {
+    console.error(err)
+    errors.group = true
+  } finally {
+    loading.group = false
+  }
+}
+
+const confirmEditSearch = async searchFilter => {
+  try {
+    loading.edit = true
+    errors.edit = false
+    searchFilter.project_id = currentProduction.value
+      ? currentProduction.value.id
+      : null
+    await store.dispatch('updateSearchFilter', searchFilter)
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
+  } finally {
+    loading.edit = false
+  }
+}
 
-    toggleFilterGroup(group) {
-      this.toggleGroupId = this.toggleGroupId !== group.id ? group.id : null
-    },
+const closeFilterGroupModal = () => {
+  modals.group = false
+}
 
-    getSearchQueryTitle(searchQuery) {
-      if (!searchQuery.is_shared) {
-        return
-      }
-      const person = this.personMap.get(searchQuery.person_id)
-      return this.$t('main.shared_by', { name: person?.full_name })
-    },
+const confirmRemoveSearch = searchQuery => {
+  searchQueryToRemove.value = searchQuery
+  groupToRemove.value = {}
+  modals.remove = true
+}
 
-    getDepartment(group) {
-      return this.departmentMap.get(group.department_id)
-    }
-  },
+const removeSearch = () => {
+  if (searchQueryToRemove.value.id) {
+    emit('remove-search', searchQueryToRemove.value)
+  } else {
+    removeGroup()
+  }
+  modals.remove = false
+  searchQueryToRemove.value = {}
+  groupToRemove.value = {}
+}
 
-  watch: {
-    'queries.length'() {
-      this.$nextTick(() => {
-        this.setQueryPaths()
-      })
-    },
+const confirmRemoveGroup = filterGroup => {
+  groupToRemove.value = filterGroup
+  searchQueryToRemove.value = {}
+  modals.remove = true
+}
 
-    $route() {
-      this.setQueryPaths()
-    }
+const removeGroup = async () => {
+  try {
+    await store.dispatch(
+      `remove${stringHelpers.capitalize(props.type)}SearchFilterGroup`,
+      groupToRemove.value
+    )
+    modals.remove = false
+  } catch (err) {
+    console.error(err)
+    errors.remove = true
+  } finally {
+    loading.remove = false
+  }
+}
+
+const toggleFilterGroup = group => {
+  toggleGroupId.value = toggleGroupId.value !== group.id ? group.id : null
+}
+
+const getSearchQueryTitle = searchQuery => {
+  if (!searchQuery.is_shared) {
+    return
   }
+  const person = personMap.value.get(searchQuery.person_id)
+  return t('main.shared_by', { name: person?.full_name })
+}
+
+const getDepartment = group => {
+  return departmentMap.value.get(group.department_id)
 }
+
+onMounted(() => {
+  nextTick(() => {
+    setQueryPaths()
+  })
+})
+
+watch(
+  () => props.queries.length,
+  () => {
+    nextTick(() => {
+      setQueryPaths()
+    })
+  }
+)
+
+watch(route, () => {
+  setQueryPaths()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/SettingImporter.vue b/src/components/widgets/SettingImporter.vue
index 2cdcee34d6..54e20acca0 100644
--- a/src/components/widgets/SettingImporter.vue
+++ b/src/components/widgets/SettingImporter.vue
@@ -45,61 +45,50 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
 
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import ComboboxProduction from '@/components/widgets/ComboboxProduction.vue'
 
-export default {
-  name: 'setting-importer',
+const store = useStore()
 
-  components: {
-    ButtonSimple,
-    ComboboxProduction
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
   },
+  loadingImport: {
+    type: Boolean,
+    default: true
+  }
+})
 
-  emits: ['import-from-production', 'import-item'],
+defineEmits(['import-from-production', 'import-item'])
 
-  data() {
-    return {
-      importProductionId: null
-    }
-  },
+const importProductionId = ref(null)
 
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    loadingImport: {
-      type: Boolean,
-      default: true
-    }
-  },
+const currentProduction = computed(() => store.getters.currentProduction)
+const openProductions = computed(() => store.getters.openProductions)
 
-  mounted() {
-    if (this.availableProductions.length > 0) {
-      this.importProductionId = this.availableProductions[0].id
-    }
-  },
+const availableProductions = computed(() => {
+  return openProductions.value.filter(
+    production => production.id !== currentProduction.value.id
+  )
+})
 
-  computed: {
-    ...mapGetters(['currentProduction', 'openProductions']),
-
-    availableProductions() {
-      return this.openProductions.filter(
-        production => production.id !== this.currentProduction.id
-      )
-    },
+const sizeStyle = computed(() => {
+  return {
+    width: 'auto'
+  }
+})
 
-    sizeStyle() {
-      return {
-        width: this.size ? this.size + 'px' : 'auto'
-      }
-    }
+onMounted(() => {
+  if (availableProductions.value.length > 0) {
+    importProductionId.value = availableProductions.value[0].id
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ShowInfosButton.vue b/src/components/widgets/ShowInfosButton.vue
index 59e1433f3b..c74783e138 100644
--- a/src/components/widgets/ShowInfosButton.vue
+++ b/src/components/widgets/ShowInfosButton.vue
@@ -17,53 +17,46 @@
   </button>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { computed, onMounted, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import KitsuIcon from '@/components/widgets/KitsuIcon.vue'
 
-export default {
-  name: 'show-infos-button',
+const store = useStore()
 
-  components: {
-    KitsuIcon
-  },
+const isShowInfosBreakdown = computed(() => store.getters.isShowInfosBreakdown)
 
-  computed: {
-    ...mapGetters(['isShowInfosBreakdown']),
+const buttonIsOn = computed(() => isShowInfosBreakdown.value)
 
-    buttonIsOn() {
-      return this.isShowInfosBreakdown
-    }
-  },
-
-  methods: {
-    ...mapActions(['hideInfosBreakdown', 'showInfosBreakdown']),
-
-    toggleInfos() {
-      if (this.isShowInfosBreakdown) {
-        this.hideInfosBreakdown()
-      } else {
-        this.showInfosBreakdown()
-      }
-    }
-  },
+const hideInfosBreakdown = () => {
+  return store.dispatch('hideInfosBreakdown')
+}
 
-  mounted() {
-    if (localStorage.getItem('show-infos-breakdown') === 'false') {
-      this.hideInfosBreakdown()
-    } else {
-      this.showInfosBreakdown()
-    }
-  },
+const showInfosBreakdown = () => {
+  return store.dispatch('showInfosBreakdown')
+}
 
-  watch: {
-    isShowInfosBreakdown() {
-      const value = this.isShowInfosBreakdown.toString()
-      localStorage.setItem('show-infos-breakdown', value)
-    }
+const toggleInfos = () => {
+  if (isShowInfosBreakdown.value) {
+    hideInfosBreakdown()
+  } else {
+    showInfosBreakdown()
   }
 }
+
+onMounted(() => {
+  if (localStorage.getItem('show-infos-breakdown') === 'false') {
+    hideInfosBreakdown()
+  } else {
+    showInfosBreakdown()
+  }
+})
+
+watch(isShowInfosBreakdown, () => {
+  const value = isShowInfosBreakdown.value.toString()
+  localStorage.setItem('show-infos-breakdown', value)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/SortingInfo.vue b/src/components/widgets/SortingInfo.vue
index 5140339383..1b83eb868b 100644
--- a/src/components/widgets/SortingInfo.vue
+++ b/src/components/widgets/SortingInfo.vue
@@ -8,31 +8,26 @@
   />
 </template>
 
-<script>
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-export default {
-  name: 'sorting-info',
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 
-  components: {
-    ButtonSimple
-  },
+const { t } = useI18n()
 
-  props: {
-    sorting: {
-      type: Array,
-      required: true
-    }
-  },
+const props = defineProps({
+  sorting: {
+    type: Array,
+    required: true
+  }
+})
 
-  emits: ['clear-sorting'],
+defineEmits(['clear-sorting'])
 
-  computed: {
-    text() {
-      return `${this.$t('main.sorted_by')} ${this.sorting[0]?.name}`
-    }
-  }
-}
+const text = computed(() => {
+  return `${t('main.sorted_by')} ${props.sorting[0]?.name}`
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/Spinner.vue b/src/components/widgets/Spinner.vue
index e8c84a8fa2..d47a53d99d 100644
--- a/src/components/widgets/Spinner.vue
+++ b/src/components/widgets/Spinner.vue
@@ -7,41 +7,33 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+
 import Origami from '@/components/spinners/Origami.vue'
 import SquareGrid from '@/components/spinners/SquareGrid.vue'
 
-export default {
-  name: 'spinner',
-  components: {
-    SquareGrid,
-    Origami
+const props = defineProps({
+  isWhite: {
+    type: Boolean,
+    default: false
   },
-
-  props: {
-    isWhite: {
-      type: Boolean,
-      default: false
-    },
-    isProcessing: {
-      type: Boolean,
-      default: false
-    },
-    isStylish: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: Number
-    }
+  isProcessing: {
+    type: Boolean,
+    default: false
   },
+  isStylish: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: Number
+  }
+})
 
-  computed: {
-    sizeStyle() {
-      return {
-        width: this.size ? `${this.size}px` : null
-      }
-    }
+const sizeStyle = computed(() => {
+  return {
+    width: props.size ? `${props.size}px` : null
   }
-}
+})
 </script>
diff --git a/src/components/widgets/StatusAutomationItem.vue b/src/components/widgets/StatusAutomationItem.vue
index 2c5bead825..3207e0a9a7 100644
--- a/src/components/widgets/StatusAutomationItem.vue
+++ b/src/components/widgets/StatusAutomationItem.vue
@@ -42,66 +42,62 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import { pluralizeEntityType } from '@/lib/path'
 
 import TaskStatusCell from '@/components/cells/TaskStatusCell.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 
-export default {
-  name: 'status-automation-item',
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
 
-  components: {
-    TaskStatusCell,
-    TaskTypeName
+const props = defineProps({
+  statusAutomation: {
+    type: Object,
+    default: null
   },
-
-  props: {
-    statusAutomation: {
-      type: Object,
-      default: null
-    },
-    productionId: {
-      type: String,
-      default: null
-    },
-    deletable: {
-      type: Boolean,
-      default: false
-    }
+  productionId: {
+    type: String,
+    default: null
   },
-
-  computed: {
-    ...mapGetters(['isCurrentUserClient', 'getTaskStatus', 'getTaskType']),
-
-    entityType() {
-      const entityType = this.statusAutomation.entity_type
-      return this.$t(
-        `status_automations.entity_types.${entityType.toLowerCase()}`
-      )
-    },
-
-    statusAutomationPath() {
-      const route = {
-        name: 'status-automation',
-        params: {
-          production_id: this.productionId,
-          status_automation_id: this.statusAutomation.id,
-          type: pluralizeEntityType(this.statusAutomation.for_entity)
-        }
-      }
-
-      if (this.statusAutomation.episode_id || this.$route.params.episode_id) {
-        route.name = 'episode-status-automation'
-        route.params.episode_id =
-          this.statusAutomation.episode_id || this.$route.params.episode_id
-      }
-      return route
+  deletable: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const getTaskStatus = computed(() => store.getters.getTaskStatus)
+const getTaskType = computed(() => store.getters.getTaskType)
+
+const entityType = computed(() => {
+  const et = props.statusAutomation.entity_type
+  return t(`status_automations.entity_types.${et.toLowerCase()}`)
+})
+
+const statusAutomationPath = computed(() => {
+  const r = {
+    name: 'status-automation',
+    params: {
+      production_id: props.productionId,
+      status_automation_id: props.statusAutomation.id,
+      type: pluralizeEntityType(props.statusAutomation.for_entity)
     }
   }
-}
+
+  if (props.statusAutomation.episode_id || route.params.episode_id) {
+    r.name = 'episode-status-automation'
+    r.params.episode_id =
+      props.statusAutomation.episode_id || route.params.episode_id
+  }
+  return r
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/StatusStats.vue b/src/components/widgets/StatusStats.vue
index a9399324a1..5f61d53561 100644
--- a/src/components/widgets/StatusStats.vue
+++ b/src/components/widgets/StatusStats.vue
@@ -16,26 +16,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'status-stats',
+<script setup>
+import { computed } from 'vue'
 
-  props: {
-    stats: Array
-  },
+const props = defineProps({
+  stats: Array
+})
 
-  computed: {
-    statMax() {
-      if (this.stats) {
-        return this.stats.reduce((max, stat) => {
-          return Math.max(stat.value, max)
-        }, 0)
-      } else {
-        return 0
-      }
-    }
+const statMax = computed(() => {
+  if (props.stats) {
+    return props.stats.reduce((max, stat) => {
+      return Math.max(stat.value, max)
+    }, 0)
+  } else {
+    return 0
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/SubscribeButton.vue b/src/components/widgets/SubscribeButton.vue
index 741ab28339..32e4f5bb33 100644
--- a/src/components/widgets/SubscribeButton.vue
+++ b/src/components/widgets/SubscribeButton.vue
@@ -5,34 +5,27 @@
   </button>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
 
-export default {
-  name: 'subscribe-button',
+const { t } = useI18n()
 
-  components: {
-    EyeIcon,
-    EyeOffIcon
-  },
-
-  props: {
-    subscribed: {
-      default: false,
-      type: Boolean
-    }
-  },
+const props = defineProps({
+  subscribed: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  emits: ['click'],
+defineEmits(['click'])
 
-  computed: {
-    buttonTitle() {
-      if (!this.subscribed) {
-        return this.$t('tasks.subscribe_notifications')
-      } else {
-        return this.$t('tasks.unsubscribe_notifications')
-      }
-    }
+const buttonTitle = computed(() => {
+  if (!props.subscribed) {
+    return t('tasks.subscribe_notifications')
+  } else {
+    return t('tasks.unsubscribe_notifications')
   }
-}
+})
 </script>
diff --git a/src/components/widgets/TableHeaderMenu.vue b/src/components/widgets/TableHeaderMenu.vue
index 4987d94bdc..dd21aecf15 100644
--- a/src/components/widgets/TableHeaderMenu.vue
+++ b/src/components/widgets/TableHeaderMenu.vue
@@ -30,33 +30,29 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'table-header-menu',
-
-  props: {
-    isMinimized: {
-      type: Boolean,
-      default: false
-    },
-    isEditAllowed: {
-      type: Boolean,
-      default: false
-    },
-    isSticked: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+defineProps({
+  isMinimized: {
+    type: Boolean,
+    default: false
+  },
+  isEditAllowed: {
+    type: Boolean,
+    default: false
   },
+  isSticked: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  emits: [
-    'delete-all-clicked',
-    'minimize-clicked',
-    'select-column',
-    'sort-by-clicked',
-    'toggle-stick'
-  ]
-}
+defineEmits([
+  'delete-all-clicked',
+  'minimize-clicked',
+  'select-column',
+  'sort-by-clicked',
+  'toggle-stick'
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/TableInfo.vue b/src/components/widgets/TableInfo.vue
index 078d9d311d..d884ab85c8 100644
--- a/src/components/widgets/TableInfo.vue
+++ b/src/components/widgets/TableInfo.vue
@@ -13,25 +13,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'table-info',
-
-  components: {
-    Spinner
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false
   },
-
-  props: {
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    }
+  isError: {
+    type: Boolean,
+    default: false
   }
-}
+})
 </script>
diff --git a/src/components/widgets/TableMetadataHeaderMenu.vue b/src/components/widgets/TableMetadataHeaderMenu.vue
index c33a5df726..2dd74566eb 100644
--- a/src/components/widgets/TableMetadataHeaderMenu.vue
+++ b/src/components/widgets/TableMetadataHeaderMenu.vue
@@ -20,23 +20,24 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'table-metadata-header-menu',
-
-  props: {
-    isEditAllowed: {
-      type: Boolean,
-      default: false
-    },
-    isSticked: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+defineProps({
+  isEditAllowed: {
+    type: Boolean,
+    default: false
   },
+  isSticked: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  emits: ['delete-clicked', 'edit-clicked', 'sort-by-clicked', 'toggle-stick']
-}
+defineEmits([
+  'delete-clicked',
+  'edit-clicked',
+  'sort-by-clicked',
+  'toggle-stick'
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/TableMetadataSelectorMenu.vue b/src/components/widgets/TableMetadataSelectorMenu.vue
index 3d3b034452..0001efbe30 100644
--- a/src/components/widgets/TableMetadataSelectorMenu.vue
+++ b/src/components/widgets/TableMetadataSelectorMenu.vue
@@ -91,171 +91,153 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import draggable from 'vuedraggable'
 import { GripVerticalIcon } from 'lucide-vue-next'
-import { mapGetters, mapActions } from 'vuex'
 
-export default {
-  name: 'table-metadata-selector-menu',
+const { t } = useI18n()
+const store = useStore()
 
-  components: {
-    draggable,
-    GripVerticalIcon
+const props = defineProps({
+  descriptors: {
+    type: Array,
+    required: true
   },
-
-  props: {
-    descriptors: {
-      type: Array,
-      required: true
-    },
-    exclude: {
-      type: Object,
-      default: () => {}
-    },
-    modelValue: {
-      type: Object,
-      required: true
-    },
-    namespace: {
-      type: String,
-      required: true
-    }
+  exclude: {
+    type: Object,
+    default: () => {}
   },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      fieldToName: {
-        estimation: this.$t('main.estimation'),
-        fps: this.$t('main.fps'),
-        frameIn: this.$t('main.frame_in'),
-        frameOut: this.$t('main.frame_out'),
-        frames: this.$t('main.frames'),
-        readyFor: this.$t('assets.fields.ready_for'),
-        timeSpent: this.$t('main.timeSpent'),
-        resolution: this.$t('shots.fields.resolution'),
-        stdby: this.$t('breakdown.fields.standby'),
-        maxRetakes: this.$t('shots.fields.max_retakes')
-      },
-      sortedMetadataDescriptors: []
-    }
+  modelValue: {
+    type: Object,
+    required: true
   },
-
-  created() {
-    const metadataDisplayHeadersString = localStorage.getItem(
-      this.localStorageKey
-    )
-    let localMetadataDisplayHeaders = { ...this.modelValue }
-    if (metadataDisplayHeadersString) {
-      localMetadataDisplayHeaders = {
-        ...localMetadataDisplayHeaders,
-        ...JSON.parse(metadataDisplayHeadersString)
-      }
+  namespace: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const fieldToName = {
+  estimation: t('main.estimation'),
+  fps: t('main.fps'),
+  frameIn: t('main.frame_in'),
+  frameOut: t('main.frame_out'),
+  frames: t('main.frames'),
+  readyFor: t('assets.fields.ready_for'),
+  timeSpent: t('main.timeSpent'),
+  resolution: t('shots.fields.resolution'),
+  stdby: t('breakdown.fields.standby'),
+  maxRetakes: t('shots.fields.max_retakes')
+}
+const sortedMetadataDescriptors = ref([])
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+
+const localStorageKey = computed(() => {
+  return `metadataDisplayHeaders:${props.namespace}`
+})
+
+const fixedColumns = computed(() => {
+  const fixed = []
+  for (const headerName in props.modelValue) {
+    if (fieldToName[headerName]) {
+      fixed.push({
+        field_name: headerName,
+        name: fieldToName[headerName],
+        isFixed: true
+      })
     }
-    for (const descriptor of this.descriptors) {
-      if (localMetadataDisplayHeaders[descriptor.field_name] === undefined) {
-        localMetadataDisplayHeaders[descriptor.field_name] = true
-      }
+  }
+  return fixed
+})
+
+const filteredFixedColumns = computed(() => {
+  return fixedColumns.value.filter(descriptor => {
+    return !props.exclude[descriptor.field_name]
+  })
+})
+
+const filteredMetadataDescriptors = computed(() => {
+  const filtered = props.descriptors.filter(descriptor => {
+    return !props.exclude[descriptor.field_name]
+  })
+  return filtered.sort((a, b) => {
+    const positionA = a.position ?? 1000
+    const positionB = b.position ?? 1000
+    if (positionA !== positionB) {
+      return positionA - positionB
     }
-    this.$emit('update:modelValue', localMetadataDisplayHeaders)
-    this.sortedMetadataDescriptors = [...this.filteredMetadataDescriptors]
-  },
-
-  watch: {
-    filteredMetadataDescriptors: {
-      handler(newValue) {
-        if (
-          this.sortedMetadataDescriptors.length === 0 ||
-          this.sortedMetadataDescriptors.length !== newValue.length
-        ) {
-          this.sortedMetadataDescriptors = [...newValue]
-        }
-      },
-      immediate: true
+    const nameA = a.name || ''
+    const nameB = b.name || ''
+    return nameA.localeCompare(nameB)
+  })
+})
+
+const entityType = computed(() => {
+  const descriptorWithEntityType = props.descriptors.find(d => d.entity_type)
+  return descriptorWithEntityType?.entity_type || null
+})
+
+const metadataDisplayHeadersString = localStorage.getItem(localStorageKey.value)
+let localMetadataDisplayHeaders = { ...props.modelValue }
+if (metadataDisplayHeadersString) {
+  localMetadataDisplayHeaders = {
+    ...localMetadataDisplayHeaders,
+    ...JSON.parse(metadataDisplayHeadersString)
+  }
+}
+for (const descriptor of props.descriptors) {
+  if (localMetadataDisplayHeaders[descriptor.field_name] === undefined) {
+    localMetadataDisplayHeaders[descriptor.field_name] = true
+  }
+}
+emit('update:modelValue', localMetadataDisplayHeaders)
+sortedMetadataDescriptors.value = [...filteredMetadataDescriptors.value]
+
+watch(
+  filteredMetadataDescriptors,
+  newValue => {
+    if (
+      sortedMetadataDescriptors.value.length === 0 ||
+      sortedMetadataDescriptors.value.length !== newValue.length
+    ) {
+      sortedMetadataDescriptors.value = [...newValue]
     }
   },
+  { immediate: true }
+)
+
+const setMetadataDisplayValue = (metadataName, isSelected) => {
+  const headers = { ...props.modelValue }
+  headers[metadataName] = isSelected
+  localStorage.setItem(localStorageKey.value, JSON.stringify(headers))
+  emit('update:modelValue', headers)
+}
 
-  computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager']),
-
-    localStorageKey() {
-      return `metadataDisplayHeaders:${this.namespace}`
-    },
-
-    fixedColumns() {
-      const fixed = []
-      for (const headerName in this.modelValue) {
-        if (this.fieldToName[headerName]) {
-          fixed.push({
-            field_name: headerName,
-            name: this.fieldToName[headerName],
-            isFixed: true
-          })
-        }
-      }
-      return fixed
-    },
-
-    filteredFixedColumns() {
-      return this.fixedColumns.filter(descriptor => {
-        return !this.exclude[descriptor.field_name]
-      })
-    },
-
-    filteredMetadataDescriptors() {
-      const filtered = this.descriptors.filter(descriptor => {
-        return !this.exclude[descriptor.field_name]
+const onDragEnd = () => {
+  const descriptorIds = sortedMetadataDescriptors.value
+    .filter(d => d.id)
+    .map(d => d.id)
+
+  if (
+    currentProduction.value?.id &&
+    entityType.value &&
+    descriptorIds.length > 0
+  ) {
+    store
+      .dispatch('reorderMetadataDescriptors', {
+        entityType: entityType.value,
+        descriptorIds
       })
-      return filtered.sort((a, b) => {
-        const positionA = a.position ?? 1000
-        const positionB = b.position ?? 1000
-        if (positionA !== positionB) {
-          return positionA - positionB
-        }
-        const nameA = a.name || ''
-        const nameB = b.name || ''
-        return nameA.localeCompare(nameB)
+      .catch(err => {
+        console.error('Failed to reorder metadata descriptors:', err)
       })
-    },
-
-    entityType() {
-      const descriptorWithEntityType = this.descriptors.find(d => d.entity_type)
-      return descriptorWithEntityType?.entity_type || null
-    }
-  },
-
-  methods: {
-    ...mapActions(['reorderMetadataDescriptors']),
-    setMetadataDisplayValue(metadataName, isSelected) {
-      const localMetadataDisplayHeaders = { ...this.modelValue }
-      localMetadataDisplayHeaders[metadataName] = isSelected
-      localStorage.setItem(
-        this.localStorageKey,
-        JSON.stringify(localMetadataDisplayHeaders)
-      )
-      this.$emit('update:modelValue', localMetadataDisplayHeaders)
-    },
-
-    onDragEnd() {
-      const descriptorIds = this.sortedMetadataDescriptors
-        .filter(d => d.id)
-        .map(d => d.id)
-
-      if (
-        this.currentProduction?.id &&
-        this.entityType &&
-        descriptorIds.length > 0
-      ) {
-        this.reorderMetadataDescriptors({
-          entityType: this.entityType,
-          descriptorIds
-        }).catch(err => {
-          console.error('Failed to reorder metadata descriptors:', err)
-        })
-      }
-    }
   }
 }
 </script>
diff --git a/src/components/widgets/TaskListNumbers.vue b/src/components/widgets/TaskListNumbers.vue
index fa0f176ddf..c14a72ae8a 100644
--- a/src/components/widgets/TaskListNumbers.vue
+++ b/src/components/widgets/TaskListNumbers.vue
@@ -22,53 +22,70 @@
   </p>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { formatListMixin } from '@/components/mixins/format'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { minutesToDays } from '@/lib/time'
 import shotStore from '@/store/modules/shots'
 
-export default {
-  name: 'task-list-numbers',
+const store = useStore()
 
-  mixins: [formatListMixin],
-
-  props: {
-    isShots: {
-      default: false,
-      type: Boolean
-    },
-    tasks: {
-      default: () => [],
-      type: Array
-    }
+const props = defineProps({
+  isShots: {
+    default: false,
+    type: Boolean
   },
+  tasks: {
+    default: () => [],
+    type: Array
+  }
+})
 
-  computed: {
-    ...mapGetters(['isPaperProduction']),
-
-    shotMap() {
-      return shotStore.cache.shotMap
-    },
+const isPaperProduction = computed(() => store.getters.isPaperProduction)
+const organisation = computed(() => store.getters.organisation)
 
-    timeSpent() {
-      return this.tasks.reduce((acc, task) => acc + task.duration, 0)
-    },
+const isDurationInHours = computed(() => {
+  return organisation.value.format_duration_in_hours
+})
 
-    timeEstimated() {
-      return this.tasks.reduce((acc, task) => acc + task.estimation, 0)
-    },
+const formatDuration = (minutes, toLocale = true) => {
+  if (!minutes) {
+    return 0
+  }
 
-    nbFrames() {
-      return this.tasks.reduce((acc, task) => {
-        const entity = this.shotMap.get(task.entity.id)
-        if (entity && entity.nb_frames) acc += entity.nb_frames
-        return acc
-      }, 0)
-    },
+  const duration = organisation.value.format_duration_in_hours
+    ? minutes / 60
+    : minutesToDays(organisation.value, minutes)
 
-    nbDrawings() {
-      return this.tasks.reduce((acc, task) => acc + task.nb_drawings, 0)
-    }
+  if (toLocale) {
+    return duration.toLocaleString('fullwide', {
+      maximumFractionDigits: 2
+    })
   }
+  return Math.round(duration * 100) / 100
 }
+
+const shotMap = computed(() => {
+  return shotStore.cache.shotMap
+})
+
+const timeSpent = computed(() => {
+  return props.tasks.reduce((acc, task) => acc + task.duration, 0)
+})
+
+const timeEstimated = computed(() => {
+  return props.tasks.reduce((acc, task) => acc + task.estimation, 0)
+})
+
+const nbFrames = computed(() => {
+  return props.tasks.reduce((acc, task) => {
+    const entity = shotMap.value.get(task.entity.id)
+    if (entity && entity.nb_frames) acc += entity.nb_frames
+    return acc
+  }, 0)
+})
+
+const nbDrawings = computed(() => {
+  return props.tasks.reduce((acc, task) => acc + task.nb_drawings, 0)
+})
 </script>
diff --git a/src/components/widgets/TaskTypeName.vue b/src/components/widgets/TaskTypeName.vue
index 0b9e4f8f57..ae19c9cd13 100644
--- a/src/components/widgets/TaskTypeName.vue
+++ b/src/components/widgets/TaskTypeName.vue
@@ -37,114 +37,112 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import { pluralizeEntityType } from '@/lib/path'
 
-export default {
-  name: 'task-type-name',
-
-  props: {
-    isLink: {
-      type: Boolean,
-      default: true
-    },
-    deletable: {
-      type: Boolean,
-      default: false
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    },
-    productionId: {
-      type: String,
-      default: null
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    },
-    taskId: {
-      type: String,
-      default: null
-    },
-    taskType: {
-      type: Object,
-      default: null
-    },
-    thin: {
-      type: Boolean,
-      default: false
-    },
-    transparent: {
-      type: Boolean,
-      default: false
-    }
-  },
+const route = useRoute()
+const store = useStore()
 
-  emits: ['delete'],
-
-  computed: {
-    ...mapGetters(['isCurrentUserClient']),
-
-    color() {
-      return this.taskType.color?.toUpperCase() === '#000000'
-        ? '#666'
-        : this.taskType.color
-    },
-
-    targetRoute() {
-      if (this.taskId) {
-        if (this.$route.params.episode_id) {
-          return {
-            name: 'episode-task',
-            params: {
-              production_id: this.productionId,
-              task_id: this.taskId,
-              episode_id: this.$route.params.episode_id,
-              type: pluralizeEntityType(this.taskType.for_entity)
-            }
-          }
-        } else {
-          return {
-            name: 'task',
-            params: {
-              production_id: this.productionId,
-              task_id: this.taskId,
-              type: pluralizeEntityType(this.taskType.for_entity)
-            }
-          }
-        }
-      } else if (this.taskType.for_entity === 'Episode') {
-        return {
-          name: 'episodes-task-type',
-          params: {
-            production_id: this.productionId,
-            task_type_id: this.taskType.id
-          }
-        }
-      } else {
-        const route = {
-          name: 'task-type',
-          params: {
-            production_id: this.productionId,
-            task_type_id: this.taskType.id,
-            type: pluralizeEntityType(this.taskType.for_entity)
-          }
+const props = defineProps({
+  isLink: {
+    type: Boolean,
+    default: true
+  },
+  deletable: {
+    type: Boolean,
+    default: false
+  },
+  disable: {
+    type: Boolean,
+    default: false
+  },
+  productionId: {
+    type: String,
+    default: null
+  },
+  rounded: {
+    type: Boolean,
+    default: false
+  },
+  taskId: {
+    type: String,
+    default: null
+  },
+  taskType: {
+    type: Object,
+    default: null
+  },
+  thin: {
+    type: Boolean,
+    default: false
+  },
+  transparent: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['delete'])
+
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+
+const color = computed(() => {
+  return props.taskType.color?.toUpperCase() === '#000000'
+    ? '#666'
+    : props.taskType.color
+})
+
+const targetRoute = computed(() => {
+  if (props.taskId) {
+    if (route.params.episode_id) {
+      return {
+        name: 'episode-task',
+        params: {
+          production_id: props.productionId,
+          task_id: props.taskId,
+          episode_id: route.params.episode_id,
+          type: pluralizeEntityType(props.taskType.for_entity)
         }
-
-        if (this.taskType.episode_id || this.$route.params.episode_id) {
-          route.name = 'episode-task-type'
-          route.params.episode_id =
-            this.taskType.episode_id || this.$route.params.episode_id
+      }
+    } else {
+      return {
+        name: 'task',
+        params: {
+          production_id: props.productionId,
+          task_id: props.taskId,
+          type: pluralizeEntityType(props.taskType.for_entity)
         }
-        return route
       }
     }
+  } else if (props.taskType.for_entity === 'Episode') {
+    return {
+      name: 'episodes-task-type',
+      params: {
+        production_id: props.productionId,
+        task_type_id: props.taskType.id
+      }
+    }
+  } else {
+    const r = {
+      name: 'task-type',
+      params: {
+        production_id: props.productionId,
+        task_type_id: props.taskType.id,
+        type: pluralizeEntityType(props.taskType.for_entity)
+      }
+    }
+
+    if (props.taskType.episode_id || route.params.episode_id) {
+      r.name = 'episode-task-type'
+      r.params.episode_id = props.taskType.episode_id || route.params.episode_id
+    }
+    return r
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/TextField.vue b/src/components/widgets/TextField.vue
index 61dc3b7e41..094345a629 100644
--- a/src/components/widgets/TextField.vue
+++ b/src/components/widgets/TextField.vue
@@ -10,7 +10,7 @@
       }"
     >
       <input
-        ref="input"
+        ref="inputRef"
         :class="
           errored
             ? 'input flexrow-item errored' + inputClass
@@ -47,114 +47,114 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'text-field',
-
-  props: {
-    autocomplete: {
-      type: String
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    label: {
-      type: String
-    },
-    modelModifiers: {
-      default: () => ({})
-    },
-    modelValue: {
-      type: [String, Number]
-    },
-    placeholder: {
-      type: [String, Number]
-    },
-    type: {
-      type: String
-    },
-    inputClass: {
-      default: '',
-      type: String
-    },
-    buttonLabel: {
-      type: String
-    },
-    min: {
-      default: 0,
-      type: Number
-    },
-    max: {
-      type: Number
-    },
-    maxlength: {
-      type: Number
-    },
-    step: {
-      type: Number
-    },
-    isInline: {
-      default: false,
-      type: Boolean
-    },
-    errored: {
-      default: false,
-      type: Boolean
-    },
-    errorText: {
-      default: '',
-      type: String
-    },
-    emptyLabel: {
-      default: false,
-      type: Boolean
-    },
-    readonly: {
-      default: false,
-      type: Boolean
-    },
-    required: {
-      default: false,
-      type: Boolean
-    },
-    unitLabel: {
-      type: String
-    }
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  autocomplete: {
+    type: String
+  },
+  disabled: {
+    default: false,
+    type: Boolean
+  },
+  label: {
+    type: String
+  },
+  modelModifiers: {
+    default: () => ({})
+  },
+  modelValue: {
+    type: [String, Number]
+  },
+  placeholder: {
+    type: [String, Number]
+  },
+  type: {
+    type: String
+  },
+  inputClass: {
+    default: '',
+    type: String
+  },
+  buttonLabel: {
+    type: String
+  },
+  min: {
+    default: 0,
+    type: Number
+  },
+  max: {
+    type: Number
+  },
+  maxlength: {
+    type: Number
+  },
+  step: {
+    type: Number
+  },
+  isInline: {
+    default: false,
+    type: Boolean
+  },
+  errored: {
+    default: false,
+    type: Boolean
   },
+  errorText: {
+    default: '',
+    type: String
+  },
+  emptyLabel: {
+    default: false,
+    type: Boolean
+  },
+  readonly: {
+    default: false,
+    type: Boolean
+  },
+  required: {
+    default: false,
+    type: Boolean
+  },
+  unitLabel: {
+    type: String
+  }
+})
 
-  emits: ['enter', 'update:modelValue'],
+const emit = defineEmits(['enter', 'update:modelValue'])
 
-  methods: {
-    getInputValue() {
-      const input = this.$refs.input
-      if (this.type === 'number') {
-        return !isNaN(input.valueAsNumber) ? input.valueAsNumber : null
-      } else {
-        if (this.modelModifiers.trim && typeof input.value === 'string') {
-          return input.value.trim()
-        }
-        return input.value
-      }
-    },
+const inputRef = ref(null)
 
-    emitEnter() {
-      this.$emit('enter', this.getInputValue())
-    },
+const getInputValue = () => {
+  const input = inputRef.value
+  if (props.type === 'number') {
+    return !isNaN(input.valueAsNumber) ? input.valueAsNumber : null
+  } else {
+    if (props.modelModifiers.trim && typeof input.value === 'string') {
+      return input.value.trim()
+    }
+    return input.value
+  }
+}
 
-    updateValue() {
-      this.$emit('update:modelValue', this.getInputValue())
-    },
+const emitEnter = () => {
+  emit('enter', getInputValue())
+}
 
-    focus() {
-      this.$refs.input.focus()
-    },
+const updateValue = () => {
+  emit('update:modelValue', getInputValue())
+}
 
-    checkValidity() {
-      return this.$refs.input.checkValidity()
-    }
-  }
+const focus = () => {
+  inputRef.value.focus()
 }
+
+const checkValidity = () => {
+  return inputRef.value.checkValidity()
+}
+
+defineExpose({ focus, checkValidity })
 </script>
 <style lang="scss" scoped>
 .input.is-size-2 {
diff --git a/src/components/widgets/TextareaField.vue b/src/components/widgets/TextareaField.vue
index 0e8c521b77..635e77a87b 100644
--- a/src/components/widgets/TextareaField.vue
+++ b/src/components/widgets/TextareaField.vue
@@ -3,7 +3,7 @@
     <label class="label" v-if="label">{{ label }}</label>
     <p class="control">
       <textarea
-        ref="input"
+        ref="inputRef"
         class="input"
         :class="`input ${inputClass}`"
         :placeholder="placeholder"
@@ -17,50 +17,53 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'textarea-field',
+<script setup>
+import { ref } from 'vue'
 
-  props: {
-    label: {
-      default: '',
-      type: String
-    },
-    modelValue: {
-      default: '',
-      type: String
-    },
-    placeholder: {
-      default: '',
-      type: String
-    },
-    type: {
-      default: 'text',
-      type: String
-    },
-    inputClass: {
-      default: '',
-      type: String
-    }
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
   },
+  modelValue: {
+    default: '',
+    type: String
+  },
+  placeholder: {
+    default: '',
+    type: String
+  },
+  type: {
+    default: 'text',
+    type: String
+  },
+  inputClass: {
+    default: '',
+    type: String
+  }
+})
 
-  emits: ['enter', 'keyup', 'update:modelValue'],
+const emit = defineEmits(['enter', 'keyup', 'update:modelValue'])
 
-  methods: {
-    emitEnter() {
-      this.$emit('enter', this.$refs.input.value)
-    },
-    updateValue() {
-      this.$emit('update:modelValue', this.$refs.input.value)
-    },
-    emitKeyup(event) {
-      this.$emit('keyup', event)
-    },
-    focus() {
-      this.$refs.input?.focus()
-    }
-  }
+const inputRef = ref(null)
+
+const emitEnter = () => {
+  emit('enter', inputRef.value.value)
 }
+
+const updateValue = () => {
+  emit('update:modelValue', inputRef.value.value)
+}
+
+const emitKeyup = event => {
+  emit('keyup', event)
+}
+
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+defineExpose({ focus })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/TwoFactorAuthentication.vue b/src/components/widgets/TwoFactorAuthentication.vue
index c435484fb9..7d7224aa9e 100644
--- a/src/components/widgets/TwoFactorAuthentication.vue
+++ b/src/components/widgets/TwoFactorAuthentication.vue
@@ -75,208 +75,193 @@
   </div>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import { SmartphoneIcon, KeyIcon, MailIcon } from 'lucide-vue-next'
 
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 
-export default {
-  name: 'two-factor-authentication',
+const { t } = useI18n()
+const store = useStore()
 
-  components: {
-    ButtonSimple,
-    KeyIcon,
-    MailIcon,
-    SmartphoneIcon
+const props = defineProps({
+  preferredTwoFa: {
+    required: true,
+    validator: prop => typeof prop === 'string' || prop === null
   },
-
-  emits: ['changed-two-fa', 'validate'],
-
-  data() {
-    return {
-      chosenTwoFA: '',
-      OTPValue: '',
-      twoFactorPayload: {},
-      errorSendingEmail: false,
-      errorRequestingFIDOChallenge: false,
-      textValidateButtonOrVerify: ''
-    }
+  twoFasEnabled: {
+    required: true,
+    type: Array
   },
-
-  props: {
-    preferredTwoFa: {
-      required: true,
-      validator: prop => typeof prop === 'string' || prop === null
-    },
-    twoFasEnabled: {
-      required: true,
-      type: Array
-    },
-    email: {
-      required: true,
-      type: String
-    },
-    isLoading: {
-      default: false,
-      type: Boolean
-    },
-    isWrongOtp: {
-      default: false,
-      type: Boolean
-    },
-    textValidateButton: {
-      default: '',
-      type: String
-    },
-    isDisableButton: {
-      default: false,
-      type: Boolean
-    },
-    isProfile: {
-      default: false,
-      type: Boolean
-    }
+  email: {
+    required: true,
+    type: String
   },
-
-  mounted() {
-    this.changeTwoFA(this.preferredTwoFa, false)
-    if (this.textValidateButton) {
-      this.textValidateButtonOrVerify = this.textValidateButton
-    } else {
-      this.textValidateButtonOrVerify = this.$t('login.verify')
-    }
+  isLoading: {
+    default: false,
+    type: Boolean
   },
+  isWrongOtp: {
+    default: false,
+    type: Boolean
+  },
+  textValidateButton: {
+    default: '',
+    type: String
+  },
+  isDisableButton: {
+    default: false,
+    type: Boolean
+  },
+  isProfile: {
+    default: false,
+    type: Boolean
+  }
+})
 
-  computed: {
-    placeholderInputText() {
-      switch (this.chosenTwoFA) {
-        case 'totp':
-          return this.$t('login.fields.totp')
-        case 'email_otp':
-          return this.$t('login.fields.email_otp')
-        case 'recovery_code':
-          return this.$t('login.fields.recovery_code')
-      }
-      return ''
-    },
-
-    wrongOTPError() {
-      switch (this.chosenTwoFA) {
-        case 'totp':
-          return this.$t('login.wrong_totp')
-        case 'email_otp':
-          return this.$t('login.wrong_email_otp')
-        case 'recovery_code':
-          return this.$t('login.wrong_recovery_code')
-        case 'fido':
-          return this.$t('login.wrong_fido_challenge')
-      }
-      return ''
-    },
+const emit = defineEmits(['changed-two-fa', 'validate'])
 
-    informationTwoFA() {
-      switch (this.chosenTwoFA) {
-        case 'totp':
-          return this.$t('login.information_totp')
-        case 'email_otp':
-          return this.$t('login.information_email_otp')
-        case 'recovery_code':
-          return this.$t('login.information_recovery_code')
-        case 'fido':
-          return this.$t('login.information_fido')
-      }
-      return ''
-    },
+const chosenTwoFA = ref('')
+const OTPValue = ref('')
+const twoFactorPayload = ref({})
+const errorSendingEmail = ref(false)
+const errorRequestingFIDOChallenge = ref(false)
+const textValidateButtonOrVerify = ref('')
 
-    unableToVerify() {
-      switch (this.chosenTwoFA) {
-        case 'totp':
-          return this.$t('login.unable_to_verify_totp')
-        case 'email_otp':
-          return this.$t('login.unable_to_verify_email_otp')
-        case 'recovery_code':
-          return this.$t('login.unable_to_verify_recovery_code')
-        case 'fido':
-          return this.$t('login.unable_to_verify_fido')
-      }
-      return ''
-    },
+const placeholderInputText = computed(() => {
+  switch (chosenTwoFA.value) {
+    case 'totp':
+      return t('login.fields.totp')
+    case 'email_otp':
+      return t('login.fields.email_otp')
+    case 'recovery_code':
+      return t('login.fields.recovery_code')
+  }
+  return ''
+})
 
-    othersTwoFA() {
-      return this.twoFasEnabled.filter((val, _) => val !== this.chosenTwoFA)
-    }
-  },
+const wrongOTPError = computed(() => {
+  switch (chosenTwoFA.value) {
+    case 'totp':
+      return t('login.wrong_totp')
+    case 'email_otp':
+      return t('login.wrong_email_otp')
+    case 'recovery_code':
+      return t('login.wrong_recovery_code')
+    case 'fido':
+      return t('login.wrong_fido_challenge')
+  }
+  return ''
+})
 
-  methods: {
-    ...mapActions(['getFIDOChallenge', 'sendEmailOTP']),
+const informationTwoFA = computed(() => {
+  switch (chosenTwoFA.value) {
+    case 'totp':
+      return t('login.information_totp')
+    case 'email_otp':
+      return t('login.information_email_otp')
+    case 'recovery_code':
+      return t('login.information_recovery_code')
+    case 'fido':
+      return t('login.information_fido')
+  }
+  return ''
+})
 
-    updatePayload() {
-      this.twoFactorPayload = {}
-      this.twoFactorPayload[this.chosenTwoFA] = this.OTPValue
-    },
+const unableToVerify = computed(() => {
+  switch (chosenTwoFA.value) {
+    case 'totp':
+      return t('login.unable_to_verify_totp')
+    case 'email_otp':
+      return t('login.unable_to_verify_email_otp')
+    case 'recovery_code':
+      return t('login.unable_to_verify_recovery_code')
+    case 'fido':
+      return t('login.unable_to_verify_fido')
+  }
+  return ''
+})
 
-    validate() {
-      this.$emit('validate', this.twoFactorPayload)
-    },
+const othersTwoFA = computed(() => {
+  return props.twoFasEnabled.filter((val, _) => val !== chosenTwoFA.value)
+})
 
-    removeErrors() {
-      this.errorRequestingFIDOChallenge = false
-      this.errorSendingEmail = false
-    },
+const updatePayload = () => {
+  twoFactorPayload.value = {}
+  twoFactorPayload.value[chosenTwoFA.value] = OTPValue.value
+}
 
-    changeTwoFAText(twoFA) {
-      switch (twoFA) {
-        case 'totp':
-          return this.$t('login.choose_totp')
-        case 'email_otp':
-          return this.$t('login.choose_email_otp')
-        case 'recovery_code':
-          return this.$t('login.choose_recovery_code')
-        case 'fido':
-          return this.$t('login.choose_fido')
-      }
-      return ''
-    },
+const validate = () => {
+  emit('validate', twoFactorPayload.value)
+}
 
-    changeTwoFA(twoFA, emitChanged = true) {
-      this.removeErrors()
-      this.chosenTwoFA = twoFA
-      if (this.chosenTwoFA === 'email_otp') {
-        this.requestSendEmailOTP()
-      } else if (this.chosenTwoFA === 'fido') {
-        this.requestGetFIDOChallenge()
-      }
-      if (emitChanged) this.$emit('changed-two-fa', this.chosenTwoFA)
-    },
+const removeErrors = () => {
+  errorRequestingFIDOChallenge.value = false
+  errorSendingEmail.value = false
+}
 
-    requestSendEmailOTP() {
-      this.removeErrors()
-      this.sendEmailOTP(this.email).catch(() => {
-        this.errorSendingEmail = true
-      })
-    },
+const changeTwoFAText = twoFA => {
+  switch (twoFA) {
+    case 'totp':
+      return t('login.choose_totp')
+    case 'email_otp':
+      return t('login.choose_email_otp')
+    case 'recovery_code':
+      return t('login.choose_recovery_code')
+    case 'fido':
+      return t('login.choose_fido')
+  }
+  return ''
+}
 
-    requestGetFIDOChallenge() {
-      this.removeErrors()
-      this.getFIDOChallenge(this.email)
-        .then(FIDOChallenge => {
-          return navigator.credentials.get({ publicKey: FIDOChallenge })
-        })
-        .then(FIDOAuthenticationResponse => {
-          this.twoFactorPayload = {}
-          this.twoFactorPayload.fido_authentication_response =
-            FIDOAuthenticationResponse
-          this.validate()
-        })
-        .catch(err => {
-          if (err instanceof DOMException) console.error(err)
-          this.errorRequestingFIDOChallenge = true
-        })
-    }
+const changeTwoFA = (twoFA, emitChanged = true) => {
+  removeErrors()
+  chosenTwoFA.value = twoFA
+  if (chosenTwoFA.value === 'email_otp') {
+    requestSendEmailOTP()
+  } else if (chosenTwoFA.value === 'fido') {
+    requestGetFIDOChallenge()
   }
+  if (emitChanged) emit('changed-two-fa', chosenTwoFA.value)
 }
+
+const requestSendEmailOTP = () => {
+  removeErrors()
+  store.dispatch('sendEmailOTP', props.email).catch(() => {
+    errorSendingEmail.value = true
+  })
+}
+
+const requestGetFIDOChallenge = () => {
+  removeErrors()
+  store
+    .dispatch('getFIDOChallenge', props.email)
+    .then(FIDOChallenge => {
+      return navigator.credentials.get({ publicKey: FIDOChallenge })
+    })
+    .then(FIDOAuthenticationResponse => {
+      twoFactorPayload.value = {}
+      twoFactorPayload.value.fido_authentication_response =
+        FIDOAuthenticationResponse
+      validate()
+    })
+    .catch(err => {
+      if (err instanceof DOMException) console.error(err)
+      errorRequestingFIDOChallenge.value = true
+    })
+}
+
+onMounted(() => {
+  changeTwoFA(props.preferredTwoFa, false)
+  if (props.textValidateButton) {
+    textValidateButtonOrVerify.value = props.textValidateButton
+  } else {
+    textValidateButtonOrVerify.value = t('login.verify')
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/TwoFactorAuthenticationSetup.vue b/src/components/widgets/TwoFactorAuthenticationSetup.vue
index 504348c2b9..0a1eac0435 100644
--- a/src/components/widgets/TwoFactorAuthenticationSetup.vue
+++ b/src/components/widgets/TwoFactorAuthenticationSetup.vue
@@ -412,7 +412,7 @@ const textWrongOTPError = computed(() => {
 
 // Methods
 
-function removeTwoFactorErrors() {
+const removeTwoFactorErrors = () => {
   twoFA.error.isWrongOTP = false
   twoFA.error.enableTOTP = false
   twoFA.error.disableTOTP = false
@@ -424,7 +424,7 @@ function removeTwoFactorErrors() {
   twoFA.OTPRecoveryCodes = null
 }
 
-function enableTOTPRequested() {
+const enableTOTPRequested = () => {
   removeTwoFactorErrors()
   twoFA.isLoading = true
   store
@@ -445,7 +445,7 @@ function enableTOTPRequested() {
     })
 }
 
-function preEnableTOTPRequested() {
+const preEnableTOTPRequested = () => {
   removeTwoFactorErrors()
   twoFA.isLoading = true
   twoFA.TOTPPreEnabled = false
@@ -464,7 +464,7 @@ function preEnableTOTPRequested() {
     })
 }
 
-function disableTOTPRequested(payload) {
+const disableTOTPRequested = payload => {
   removeTwoFactorErrors()
   if (!twoFA.TOTPNeedTwoFA) {
     twoFA.TOTPNeedTwoFA = true
@@ -487,7 +487,7 @@ function disableTOTPRequested(payload) {
   }
 }
 
-function enableEmailOTPRequested() {
+const enableEmailOTPRequested = () => {
   removeTwoFactorErrors()
   twoFA.isLoading = true
   store
@@ -507,7 +507,7 @@ function enableEmailOTPRequested() {
     })
 }
 
-function preEnableEmailOTPRequested() {
+const preEnableEmailOTPRequested = () => {
   removeTwoFactorErrors()
   twoFA.isLoading = true
   twoFA.emailOTPPreEnabled = false
@@ -525,7 +525,7 @@ function preEnableEmailOTPRequested() {
     })
 }
 
-function disableEmailOTPRequested(payload) {
+const disableEmailOTPRequested = payload => {
   removeTwoFactorErrors()
   twoFA.OTPRecoveryCodes = null
   if (!twoFA.emailOTPNeedTwoFA) {
@@ -549,12 +549,12 @@ function disableEmailOTPRequested(payload) {
   }
 }
 
-function preRegisterFIDORequested() {
+const preRegisterFIDORequested = () => {
   removeTwoFactorErrors()
   twoFA.FIDOPreRegistered = true
 }
 
-function registerFIDORequested() {
+const registerFIDORequested = () => {
   if (!twoFA.FIDONewDeviceName) return
 
   removeTwoFactorErrors()
@@ -582,7 +582,7 @@ function registerFIDORequested() {
     })
 }
 
-function unregisterFIDORequested(deviceName) {
+const unregisterFIDORequested = deviceName => {
   removeTwoFactorErrors()
   twoFA.isLoading = true
   store
@@ -600,7 +600,7 @@ function unregisterFIDORequested(deviceName) {
     })
 }
 
-function newRecoveryCodesRequested(payload) {
+const newRecoveryCodesRequested = payload => {
   removeTwoFactorErrors()
   if (!twoFA.newRecoveryCodesNeedTwoFA) {
     twoFA.newRecoveryCodesNeedTwoFA = true
@@ -624,22 +624,22 @@ function newRecoveryCodesRequested(payload) {
   }
 }
 
-function nextEnable() {
+const nextEnable = () => {
   if (twoFA.TOTPPreEnabled) enableTOTPRequested()
   else if (twoFA.emailOTPPreEnabled) enableEmailOTPRequested()
 }
 
-function nextWithPayload(payload) {
+const nextWithPayload = payload => {
   if (twoFA.TOTPNeedTwoFA) disableTOTPRequested(payload)
   else if (twoFA.emailOTPNeedTwoFA) disableEmailOTPRequested(payload)
   else if (twoFA.newRecoveryCodesNeedTwoFA) newRecoveryCodesRequested(payload)
 }
 
-function copyRecoveryCodesToClipboard() {
+const copyRecoveryCodesToClipboard = () => {
   navigator.clipboard.writeText(twoFA.OTPRecoveryCodes.join('\n'))
 }
 
-function saveRecoveryCodesToFile() {
+const saveRecoveryCodesToFile = () => {
   const blob = new Blob([twoFA.OTPRecoveryCodes.join('\n')], {
     type: 'text/plain;charset=utf-8'
   })
@@ -650,11 +650,11 @@ function saveRecoveryCodesToFile() {
   link.click()
 }
 
-function changedTwoFA() {
+const changedTwoFA = () => {
   twoFA.error.isWrongOTP = false
 }
 
-function cancelCurrentTwoFactorAuthAction() {
+const cancelCurrentTwoFactorAuthAction = () => {
   twoFA.TOTPPreEnabled = false
   twoFA.TOTPNeedTwoFA = false
   twoFA.emailOTPPreEnabled = false
@@ -675,7 +675,7 @@ function cancelCurrentTwoFactorAuthAction() {
   twoFA.OTPRecoveryCodes = null
 }
 
-function onKeyDown(event) {
+const onKeyDown = event => {
   if (event.key === 'Escape') cancelCurrentTwoFactorAuthAction()
 }
 
diff --git a/src/components/widgets/UserCalendar.vue b/src/components/widgets/UserCalendar.vue
index 39651b49b7..e8169ec3e5 100644
--- a/src/components/widgets/UserCalendar.vue
+++ b/src/components/widgets/UserCalendar.vue
@@ -4,7 +4,7 @@
   </div>
   <div class="user-calendar mt1" v-else>
     <full-calendar
-      ref="calendar"
+      ref="calendarRef"
       class="app-calendar"
       :options="calendarOptions"
     >
@@ -61,9 +61,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import { BriefcaseIcon } from 'lucide-vue-next'
-import { mapActions, mapGetters } from 'vuex'
 
 import FullCalendar from '@fullcalendar/vue3'
 import allLocales from '@fullcalendar/core/locales-all'
@@ -74,180 +76,161 @@ import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import ProductionName from '@/components/widgets/ProductionName.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'user-calendar',
+const { t } = useI18n()
+const store = useStore()
 
-  components: {
-    BriefcaseIcon,
-    EntityThumbnail,
-    FullCalendar,
-    ProductionName,
-    Spinner
-  },
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+const productionMap = computed(() => store.getters.productionMap)
+const taskMap = computed(() => store.getters.taskMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
 
-  props: {
-    tasks: {
-      type: Array,
-      default: () => []
-    },
-    daysOff: {
-      type: Array,
-      default: () => []
-    },
-    isLoading: {
-      type: Boolean,
-      default: true
-    }
+const props = defineProps({
+  tasks: {
+    type: Array,
+    default: () => []
   },
-
-  data() {
-    return {
-      currentTask: null,
-      calendarOptions: {
-        plugins: [dayGridPlugin, multiMonthPlugin],
-        headerToolbar: {
-          left: 'prev,next today',
-          center: 'title',
-          right: 'dayGridMonth,dayGridWeek,multiMonthYear'
-        },
-        initialView: 'dayGridMonth',
-        firstDay: 1,
-        locales: allLocales,
-        locale: this.$i18n.locale_code ?? 'en'
-      }
-    }
+  daysOff: {
+    type: Array,
+    default: () => []
   },
+  isLoading: {
+    type: Boolean,
+    default: true
+  }
+})
 
-  mounted() {
-    this.resetEvents()
-  },
+const currentTask = ref(null)
+const calendarRef = ref(null)
 
-  computed: {
-    ...mapGetters([
-      'isDarkTheme',
-      'productionMap',
-      'taskMap',
-      'taskStatusMap',
-      'taskTypeMap'
-    ])
+const calendarOptions = ref({
+  plugins: [dayGridPlugin, multiMonthPlugin],
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,dayGridWeek,multiMonthYear'
   },
-
-  methods: {
-    ...mapActions(['addSelectedTasks', 'clearSelectedTasks']),
-
-    resetEvents() {
-      if (!this.$refs.calendar) {
-        return
+  initialView: 'dayGridMonth',
+  firstDay: 1,
+  locales: allLocales,
+  locale: 'en'
+})
+
+const resetEvents = () => {
+  if (!calendarRef.value) {
+    return
+  }
+  const calendarApi = calendarRef.value.getApi()
+  calendarApi.removeAllEvents()
+
+  calendarApi.addEvent({
+    display: 'background',
+    daysOfWeek: [0, 6],
+    backgroundColor: '#ddd',
+    extendedProps: {
+      isOff: true
+    }
+  })
+
+  props.tasks
+    .filter(task => task.start_date && task.due_date)
+    .forEach(task => {
+      const production = productionMap.value.get(task.project_id)
+      const taskType = taskTypeMap.value.get(task.task_type_id)
+      const taskStatus = taskStatusMap.value.get(task.task_status_id)
+      const start = task.start_date
+      const end = new Date(task.due_date)
+      end.setDate(end.getDate() + 1)
+      const event = {
+        title: task.full_entity_name,
+        allDay: true,
+        start,
+        end,
+        borderColor: '#666',
+        backgroundColor: taskType.color,
+        extendedProps: {
+          previewFileId: task.entity_preview_file_id,
+          taskStatus,
+          taskId: task.id,
+          title: task.full_entity_name.split(' / '),
+          production
+        }
       }
-      const calendarApi = this.$refs.calendar.getApi()
-      calendarApi.removeAllEvents()
-
+      calendarApi.addEvent(event)
+    })
+
+  props.daysOff.forEach(dayOff => {
+    const description = getDayOffInfo(dayOff)
+    const startDate = new Date(dayOff.date)
+    const endDate = new Date(dayOff.end_date)
+    while (startDate <= endDate) {
       calendarApi.addEvent({
+        title: t('timesheets.day_off'),
         display: 'background',
-        daysOfWeek: [0, 6], // Sunday + Saturday
-        backgroundColor: '#ddd',
+        start: startDate.toISOString().slice(0, 10),
+        backgroundColor: '#ffffe0',
         extendedProps: {
-          isOff: true
+          isOff: true,
+          description
         }
       })
+      startDate.setDate(startDate.getDate() + 1)
+    }
+  })
+}
 
-      this.tasks
-        .filter(task => task.start_date && task.due_date)
-        .forEach(task => {
-          const production = this.productionMap.get(task.project_id)
-          const taskType = this.taskTypeMap.get(task.task_type_id)
-          const taskStatus = this.taskStatusMap.get(task.task_status_id)
-          const start = task.start_date
-          const end = new Date(task.due_date)
-          end.setDate(end.getDate() + 1) // end date is exclusive
-          const event = {
-            title: task.full_entity_name,
-            allDay: true,
-            start,
-            end,
-            borderColor: '#666',
-            backgroundColor: taskType.color,
-            extendedProps: {
-              previewFileId: task.entity_preview_file_id,
-              taskStatus,
-              taskId: task.id,
-              title: task.full_entity_name.split(' / '),
-              production
-            }
-          }
-          calendarApi.addEvent(event)
-        })
-
-      this.daysOff.forEach(dayOff => {
-        const description = this.getDayOffInfo(dayOff)
-        const startDate = new Date(dayOff.date)
-        const endDate = new Date(dayOff.end_date)
-        while (startDate <= endDate) {
-          calendarApi.addEvent({
-            title: this.$t('timesheets.day_off'),
-            display: 'background',
-            start: startDate.toISOString().slice(0, 10),
-            backgroundColor: '#ffffe0',
-            extendedProps: {
-              isOff: true,
-              description
-            }
-          })
-          startDate.setDate(startDate.getDate() + 1)
-        }
-      })
-    },
-
-    onEventClicked(event) {
-      const task = this.taskMap.get(event.extendedProps.taskId)
-      if (!task || task === this.currentTask) {
-        this.currentTask = null
-        this.clearSelectedTasks()
-      } else {
-        this.currentTask = task
-        this.clearSelectedTasks()
-        this.addSelectedTasks([{ task }])
-      }
-    },
+const onEventClicked = event => {
+  const task = taskMap.value.get(event.extendedProps.taskId)
+  if (!task || task === currentTask.value) {
+    currentTask.value = null
+    store.dispatch('clearSelectedTasks')
+  } else {
+    currentTask.value = task
+    store.dispatch('clearSelectedTasks')
+    store.dispatch('addSelectedTasks', [{ task }])
+  }
+}
 
-    getStatusColor(status) {
-      if (status.name === 'Todo' && this.isDarkTheme) {
-        return '#5F626A'
-      } else {
-        return status.color
-      }
-    },
+const getStatusColor = status => {
+  if (status.name === 'Todo' && isDarkTheme.value) {
+    return '#5F626A'
+  } else {
+    return status.color
+  }
+}
 
-    getStatusTextColor(status) {
-      if (status.name === 'Todo' && !this.isDarkTheme) {
-        return '#333'
-      } else {
-        return 'white'
-      }
-    },
+const getStatusTextColor = status => {
+  if (status.name === 'Todo' && !isDarkTheme.value) {
+    return '#333'
+  } else {
+    return 'white'
+  }
+}
 
-    getDayOffInfo(dayOff) {
-      const { description, date, end_date } = dayOff
-      const period =
-        end_date && date !== end_date ? `${date} - ${end_date}` : date
-      return `${description || this.$t('timesheets.day_off')} (${period})`
-    }
+const getDayOffInfo = dayOff => {
+  const { description, date, end_date } = dayOff
+  const period = end_date && date !== end_date ? `${date} - ${end_date}` : date
+  return `${description || t('timesheets.day_off')} (${period})`
+}
+
+onMounted(() => {
+  resetEvents()
+})
+
+watch(
+  () => props.tasks,
+  () => {
+    resetEvents()
   },
+  { deep: true }
+)
 
-  watch: {
-    tasks: {
-      deep: true,
-      handler() {
-        this.resetEvents()
-      }
-    },
-    daysOff: {
-      handler() {
-        this.resetEvents()
-      }
-    }
+watch(
+  () => props.daysOff,
+  () => {
+    resetEvents()
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/widgets/ValidationTag.vue b/src/components/widgets/ValidationTag.vue
index b452aa2ae2..8a530bbb8b 100644
--- a/src/components/widgets/ValidationTag.vue
+++ b/src/components/widgets/ValidationTag.vue
@@ -48,173 +48,156 @@
   </span>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 import colors from '@/lib/colors'
 import { pluralizeEntityType } from '@/lib/path'
-
-export default {
-  name: 'validation-tag',
-
-  props: {
-    task: {
-      default: () => {},
-      type: Object
-    },
-    isStatic: {
-      default: false,
-      type: Boolean
-    },
-    isPriority: {
-      default: true,
-      type: Boolean
-    },
-    minimized: {
-      default: false,
-      type: Boolean
-    },
-    pointer: {
-      default: false,
-      type: Boolean
-    },
-    thin: {
-      default: false,
-      type: Boolean
-    }
+import { useTaskStatusStyle } from '@/composables/taskStatus'
+
+const { t } = useI18n()
+const store = useStore()
+const {
+  backgroundColor: statusBgColor,
+  color: statusColor,
+  isDarkTheme
+} = useTaskStatusStyle()
+
+const props = defineProps({
+  task: {
+    default: () => {},
+    type: Object
   },
-
-  emits: ['click'],
-
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'isCurrentUserClient',
-      'isDarkTheme',
-      'isTVShow',
-      'taskStatusMap',
-      'taskTypeMap'
-    ]),
-
-    cursor() {
-      return this.pointer ? 'pointer' : 'default'
-    },
-
-    taskStatus() {
-      const taskStatusId = this.task?.task_status_id
-      return this.taskStatusMap?.get(taskStatusId) || {}
-    },
-
-    backgroundColor() {
-      if (this.taskStatus.short_name === 'todo' && !this.isDarkTheme) {
-        return '#ECECEC'
-      } else if (this.taskStatus.short_name === 'todo' && this.isDarkTheme) {
-        return '#5F626A'
-      } else if (this.isDarkTheme) {
-        return colors.darkenColor(this.taskStatus.color)
-      } else {
-        return this.taskStatus.color
-      }
-    },
-
-    color() {
-      const isTodo = this.taskStatus.name === 'Todo'
-      if (!isTodo || this.isDarkTheme) {
-        return 'white'
-      } else {
-        return '#333'
-      }
-    },
-
-    priority() {
-      if (this.task.priority && !this.taskStatus.is_done) {
-        if (this.task.priority === 3) {
-          return '!!!'
-        } else if (this.task.priority === 2) {
-          return '!!'
-        } else if (this.task.priority === 1) {
-          return '!'
-        } else {
-          return ''
-        }
-      } else {
-        return ''
-      }
-    },
-
-    tagStyle() {
-      const isStatic = !this.isStatic && !this.isCurrentUserClient
-      const isTodo = this.taskStatus.name === 'Todo'
-      if (this.thin && !isTodo) {
-        if (this.isDarkTheme) {
-          return {
-            background: 'transparent',
-            border:
-              '1px solid ' +
-              (isTodo
-                ? 'grey'
-                : colors.lightenColor(this.backgroundColor, 0.5)),
-            color: colors.lightenColor(this.backgroundColor, 0.5),
-            cursor: isStatic ? 'pointer' : this.cursor
-          }
-        } else {
-          return {
-            background: 'transparent',
-            border: '1px solid ' + (isTodo ? 'grey' : this.backgroundColor),
-            color: this.backgroundColor,
-            cursor: isStatic ? 'pointer' : this.cursor
-          }
-        }
-      } else {
-        return {
-          background: this.backgroundColor,
-          color: this.color,
-          cursor: isStatic ? 'pointer' : this.cursor
-        }
+  isStatic: {
+    default: false,
+    type: Boolean
+  },
+  isPriority: {
+    default: true,
+    type: Boolean
+  },
+  minimized: {
+    default: false,
+    type: Boolean
+  },
+  pointer: {
+    default: false,
+    type: Boolean
+  },
+  thin: {
+    default: false,
+    type: Boolean
+  }
+})
+
+defineEmits(['click'])
+
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isTVShow = computed(() => store.getters.isTVShow)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+const cursor = computed(() => {
+  return props.pointer ? 'pointer' : 'default'
+})
+
+const taskStatus = computed(() => {
+  const taskStatusId = props.task?.task_status_id
+  return taskStatusMap.value?.get(taskStatusId) || {}
+})
+
+const backgroundColor = computed(() => statusBgColor(taskStatus.value))
+
+const color = computed(() => statusColor(taskStatus.value))
+
+const priority = computed(() => {
+  if (props.task.priority && !taskStatus.value.is_done) {
+    if (props.task.priority === 3) {
+      return '!!!'
+    } else if (props.task.priority === 2) {
+      return '!!'
+    } else if (props.task.priority === 1) {
+      return '!'
+    } else {
+      return ''
+    }
+  } else {
+    return ''
+  }
+})
+
+const tagStyle = computed(() => {
+  const isStaticVal = !props.isStatic && !isCurrentUserClient.value
+  const isTodo = taskStatus.value.name === 'Todo'
+  if (props.thin && !isTodo) {
+    if (isDarkTheme.value) {
+      return {
+        background: 'transparent',
+        border:
+          '1px solid ' +
+          (isTodo ? 'grey' : colors.lightenColor(backgroundColor.value, 0.5)),
+        color: colors.lightenColor(backgroundColor.value, 0.5),
+        cursor: isStaticVal ? 'pointer' : cursor.value
       }
-    },
-
-    taskPath() {
-      if (!this.currentProduction?.id) return
-      const task = this.task
-      const productionId = this.task.project_id
-        ? this.task.project_id
-        : this.currentProduction.id
-      const route = {
-        name: 'task',
-        params: {
-          production_id: productionId,
-          task_id: task.id
-        }
+    } else {
+      return {
+        background: 'transparent',
+        border: '1px solid ' + (isTodo ? 'grey' : backgroundColor.value),
+        color: backgroundColor.value,
+        cursor: isStaticVal ? 'pointer' : cursor.value
       }
+    }
+  } else {
+    return {
+      background: backgroundColor.value,
+      color: color.value,
+      cursor: isStaticVal ? 'pointer' : cursor.value
+    }
+  }
+})
+
+const taskPath = computed(() => {
+  if (!currentProduction.value?.id) return
+  const task = props.task
+  const productionId = props.task.project_id
+    ? props.task.project_id
+    : currentProduction.value.id
+  const route = {
+    name: 'task',
+    params: {
+      production_id: productionId,
+      task_id: task.id
+    }
+  }
 
-      if (this.isTVShow && this.currentEpisode) {
-        route.name = 'episode-task'
-        route.params.episode_id = task.episode_id || this.currentEpisode.id
-      }
+  if (isTVShow.value && currentEpisode.value) {
+    route.name = 'episode-task'
+    route.params.episode_id = task.episode_id || currentEpisode.value.id
+  }
 
-      const taskType = this.taskTypeMap.get(task.task_type_id)
-      route.params.type = pluralizeEntityType(taskType.for_entity)
-
-      return route
-    },
-
-    formatPriority() {
-      const priority = this.task.priority
-      let label = priority + ''
-      if (priority === 0) {
-        label = 'normal'
-      } else if (priority === 1) {
-        label = this.$t('tasks.priority.high')
-      } else if (priority === 2) {
-        label = this.$t('tasks.priority.very_high')
-      } else if (priority === 3) {
-        label = this.$t('tasks.priority.emergency')
-      }
-      return label
-    }
+  const taskType = taskTypeMap.value.get(task.task_type_id)
+  route.params.type = pluralizeEntityType(taskType.for_entity)
+
+  return route
+})
+
+const formatPriority = computed(() => {
+  const p = props.task.priority
+  let label = p + ''
+  if (p === 0) {
+    label = 'normal'
+  } else if (p === 1) {
+    label = t('tasks.priority.high')
+  } else if (p === 2) {
+    label = t('tasks.priority.very_high')
+  } else if (p === 3) {
+    label = t('tasks.priority.emergency')
   }
-}
+  return label
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/atMentions.js b/src/composables/atMentions.js
new file mode 100644
index 0000000000..057d5694f5
--- /dev/null
+++ b/src/composables/atMentions.js
@@ -0,0 +1,75 @@
+import { computed, reactive, watch } from 'vue'
+import { useStore } from 'vuex'
+
+export const useAtMentionsMembers = (teamGetter, taskTypesGetter) => {
+  const store = useStore()
+  const departmentMap = computed(() => store.getters.departmentMap)
+  const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+  const productionDepartmentIds = computed(
+    () => store.getters.productionDepartmentIds
+  )
+
+  const membersForAts = reactive({ '@': [], '#': [] })
+
+  const atOptionsFilter = (name, chunk, at, v) => {
+    const option_at = v?.isTaskType ? '#' : '@'
+    if (at !== option_at) return false
+    return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
+  }
+
+  watch(
+    taskTypesGetter,
+    values => {
+      const taskTypeOptions = values.map(taskType => ({
+        isTaskType: true,
+        full_name: taskType.name,
+        color: taskType.color,
+        id: taskType.id,
+        url: taskType.url
+      }))
+      taskTypeOptions.push({
+        isTaskType: true,
+        color: '#000',
+        full_name: 'All'
+      })
+      membersForAts['#'] = taskTypeOptions
+    },
+    { deep: true, immediate: true }
+  )
+
+  watch(
+    teamGetter,
+    teamValues => {
+      let teamOptions
+      if (isCurrentUserClient.value) {
+        teamOptions = teamValues.filter(person =>
+          ['admin', 'manager', 'client'].includes(person.role)
+        )
+      } else {
+        teamOptions = [...teamValues]
+      }
+      if (!isCurrentUserClient.value) {
+        teamOptions = teamOptions.concat(
+          productionDepartmentIds.value.map(departmentId => {
+            const department = departmentMap.value.get(departmentId)
+            return {
+              isDepartment: true,
+              full_name: department.name,
+              color: department.color,
+              id: departmentId
+            }
+          })
+        )
+      }
+      teamOptions.push({
+        isTime: true,
+        at: '@',
+        full_name: 'frame'
+      })
+      membersForAts['@'] = teamOptions
+    },
+    { deep: true, immediate: true }
+  )
+
+  return { membersForAts, atOptionsFilter }
+}
diff --git a/src/composables/combobox.js b/src/composables/combobox.js
new file mode 100644
index 0000000000..f6f53f5f47
--- /dev/null
+++ b/src/composables/combobox.js
@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+
+export const useCombobox = emit => {
+  const showList = ref(false)
+
+  const toggle = () => {
+    showList.value = !showList.value
+  }
+
+  const select = item => {
+    emit('update:modelValue', item.id)
+    showList.value = false
+  }
+
+  return { showList, toggle, select }
+}
diff --git a/src/composables/taskStatus.js b/src/composables/taskStatus.js
new file mode 100644
index 0000000000..11cf27f498
--- /dev/null
+++ b/src/composables/taskStatus.js
@@ -0,0 +1,33 @@
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import colors from '@/lib/colors'
+
+export const useTaskStatusStyle = () => {
+  const store = useStore()
+  const isDarkTheme = computed(() => store.getters.isDarkTheme)
+
+  const backgroundColor = taskStatus => {
+    if ((!taskStatus || taskStatus.name === 'Todo') && !isDarkTheme.value) {
+      return '#ECECEC'
+    } else if (
+      (!taskStatus || taskStatus.name === 'Todo') &&
+      isDarkTheme.value
+    ) {
+      return '#5F626A'
+    } else if (isDarkTheme.value) {
+      return colors.darkenColor(taskStatus.color)
+    } else {
+      return taskStatus.color
+    }
+  }
+
+  const color = taskStatus => {
+    if (!taskStatus || taskStatus.name !== 'Todo' || isDarkTheme.value) {
+      return 'white'
+    } else {
+      return '#333'
+    }
+  }
+
+  return { backgroundColor, color, isDarkTheme }
+}
diff --git a/src/lib/colors.js b/src/lib/colors.js
index c09f249564..187c2c496a 100644
--- a/src/lib/colors.js
+++ b/src/lib/colors.js
@@ -9,6 +9,8 @@ const fadeColorIndex = {}
 let colorHashConstructor = ColorHash
 if (ColorHash.default) colorHashConstructor = ColorHash.default
 
+const DARK_STATUS_NAMES = ['todo', 'wtg']
+
 export default {
   /*
    * Turn hexadecimal color (#FFFFFF) to a darker and more saturated version.
@@ -26,19 +28,12 @@ export default {
    * Convert a string (it can be anything) into a HTML color hash.
    */
   fromString(str, darken = false) {
-    let colorHash = new colorHashConstructor({
-      lightness: 0.7,
+    const isDark =
+      darken || (localStorage && localStorage.getItem('dark-theme') === 'true')
+    const colorHash = new colorHashConstructor({
+      lightness: isDark ? 0.6 : 0.7,
       saturation: 0.8
     })
-    if (
-      darken ||
-      (localStorage && localStorage.getItem('dark-theme') === 'true')
-    ) {
-      colorHash = new colorHashConstructor({
-        lightness: 0.6,
-        saturation: 0.8
-      })
-    }
     return colorHash.hex(str)
   },
 
@@ -86,14 +81,9 @@ export default {
    * is too dark.
    */
   validationTextColor(task) {
-    if (
-      task &&
-      task.task_status_short_name !== 'todo' &&
-      task.task_status_short_name !== 'wtg'
-    ) {
+    if (task && !DARK_STATUS_NAMES.includes(task.task_status_short_name)) {
       return 'white'
-    } else {
-      return '#333'
     }
+    return '#333'
   }
 }
diff --git a/src/lib/crisp.js b/src/lib/crisp.js
index 4d9be1a9bc..301ccb6743 100644
--- a/src/lib/crisp.js
+++ b/src/lib/crisp.js
@@ -2,13 +2,11 @@ export default {
   init(token) {
     window.$crisp = []
     window.CRISP_WEBSITE_ID = token
-    ;(function () {
-      const d = document
-      const s = d.createElement('script')
-      s.src = 'https://client.crisp.chat/l.js'
-      s.async = true
-      d.getElementsByTagName('head')[0].appendChild(s)
-    })()
+    const s = document.createElement('script')
+    s.src = 'https://client.crisp.chat/l.js'
+    s.async = true
+    s.onerror = () => console.warn('Failed to load Crisp chat widget')
+    document.getElementsByTagName('head')[0].appendChild(s)
   },
 
   setChatVisibility(isVisible) {
diff --git a/src/lib/csv.js b/src/lib/csv.js
index a04b17ff91..3ea6903181 100644
--- a/src/lib/csv.js
+++ b/src/lib/csv.js
@@ -258,14 +258,18 @@ const csv = {
     taskStatusMap,
     entryMap,
     countMode = 'count',
-    production
+    production,
+    { excludeStatuses = [], sortEntries = true } = {}
   ) {
     let entries = []
     const taskTypeIds = getStatsTaskTypeIds(mainStats, taskTypeMap, production)
     const entryIds = getStatsEntryIds(mainStats, entryMap)
 
     entryIds.forEach(entryId => {
-      const taskStatusIds = getStatsTaskStatusIdsForEntry(mainStats, entryId)
+      const taskStatusIds = getStatsTaskStatusIdsForEntry(
+        mainStats,
+        entryId
+      ).filter(s => !excludeStatuses.includes(s))
       const total = getStatsTotalCount(
         mainStats,
         taskStatusIds,
@@ -304,19 +308,21 @@ const csv = {
             )
           } else {
             Object.keys(mainStats[entryId].all).forEach(taskStatusId => {
-              lineMap[taskStatusId] = lineMap[taskStatusId].concat(['', ''])
+              if (!excludeStatuses.includes(taskStatusId)) {
+                lineMap[taskStatusId] = lineMap[taskStatusId].concat(['', ''])
+              }
             })
           }
         }
       })
 
-      entries = entries.concat(
-        Object.values(lineMap).sort((a, b) => {
-          return a[1].localeCompare(b[1], undefined, {
-            numeric: true
-          })
-        })
-      )
+      const values = Object.values(lineMap)
+      if (sortEntries) {
+        values.sort((a, b) =>
+          a[1].localeCompare(b[1], undefined, { numeric: true })
+        )
+      }
+      entries = entries.concat(values)
       entries.push([''])
     })
     return entries
@@ -336,13 +342,18 @@ const csv = {
       taskTypeMap,
       production
     )
-    const entries = csv.getRetakeStatReportsEntries(
+    const retakeOptions = {
+      excludeStatuses: ['max_retake_count', 'evolution'],
+      sortEntries: false
+    }
+    const entries = csv.getStatReportsEntries(
       mainStats,
       taskTypeMap,
       taskStatusMap,
       entryMap,
       countMode,
-      production
+      production,
+      retakeOptions
     )
     const lines = [headers, ...entries]
     return csv.buildCsvFile(name, lines)
@@ -356,65 +367,18 @@ const csv = {
     countMode = 'count',
     production
   ) {
-    let entries = []
-    const taskTypeIds = getStatsTaskTypeIds(mainStats, taskTypeMap, production)
-    const entryIds = getStatsEntryIds(mainStats, entryMap)
-
-    entryIds.forEach(entryId => {
-      const taskStatusIds = getStatsTaskStatusIdsForEntry(
-        mainStats,
-        entryId
-      ).filter(s => !['max_retake_count', 'evolution'].includes(s))
-      const total = getStatsTotalCount(
-        mainStats,
-        taskStatusIds,
-        countMode,
-        entryId
-      )
-      const lineMap = buildTotalLines(
-        entryMap,
-        taskStatusMap,
-        countMode,
-        mainStats,
-        taskStatusIds,
-        entryId,
-        total
-      )
-
-      taskTypeIds.forEach(taskTypeId => {
-        if (taskTypeId !== 'all') {
-          const taskTypeStats = mainStats[entryId][taskTypeId]
-          if (taskTypeStats) {
-            const total = getStatsTotalEntryCount(
-              mainStats,
-              taskTypeStats,
-              countMode,
-              entryId,
-              taskTypeId
-            )
-            addEntryStatusStats(
-              mainStats,
-              countMode,
-              entryId,
-              taskTypeId,
-              taskStatusIds,
-              total,
-              lineMap
-            )
-          } else {
-            Object.keys(mainStats[entryId].all).forEach(taskStatusId => {
-              if (!['max_retake_count', 'evolution'].includes(taskStatusId)) {
-                lineMap[taskStatusId] = lineMap[taskStatusId].concat(['', ''])
-              }
-            })
-          }
-        }
-      })
-
-      entries = entries.concat(Object.values(lineMap))
-      entries.push([''])
-    })
-    return entries
+    return csv.getStatReportsEntries(
+      mainStats,
+      taskTypeMap,
+      taskStatusMap,
+      entryMap,
+      countMode,
+      production,
+      {
+        excludeStatuses: ['max_retake_count', 'evolution'],
+        sortEntries: false
+      }
+    )
   },
 
   generateQuotas(
diff --git a/src/lib/descriptors.js b/src/lib/descriptors.js
index 08f3dbe223..281b3a4256 100644
--- a/src/lib/descriptors.js
+++ b/src/lib/descriptors.js
@@ -1,5 +1,6 @@
 export default {
   getChoicesOptions(descriptor) {
+    if (!descriptor?.choices) return [{ label: '', value: '' }]
     const values = descriptor.choices.map(c => ({ label: c, value: c }))
     return [{ label: '', value: '' }, ...values]
   }
diff --git a/src/lib/drafts.js b/src/lib/drafts.js
index 81655a9c37..3d5e5d2f46 100644
--- a/src/lib/drafts.js
+++ b/src/lib/drafts.js
@@ -1,14 +1,29 @@
+const DRAFT_PREFIX = 'draft-'
+
 const drafts = {
   setTaskDraft(taskId, text) {
-    return localStorage.setItem('draft-' + taskId, text)
+    try {
+      return localStorage.setItem(DRAFT_PREFIX + taskId, text)
+    } catch (e) {
+      console.warn('Failed to save draft:', e)
+    }
   },
 
   getTaskDraft(taskId) {
-    return localStorage.getItem('draft-' + taskId)
+    try {
+      return localStorage.getItem(DRAFT_PREFIX + taskId)
+    } catch (e) {
+      console.warn('Failed to read draft:', e)
+      return null
+    }
   },
 
   clearTaskDraft(taskId) {
-    return localStorage.removeItem('draft-' + taskId)
+    try {
+      return localStorage.removeItem(DRAFT_PREFIX + taskId)
+    } catch (e) {
+      console.warn('Failed to clear draft:', e)
+    }
   }
 }
 
diff --git a/src/lib/errors.js b/src/lib/errors.js
index 81f65c6e9b..1a777f8328 100644
--- a/src/lib/errors.js
+++ b/src/lib/errors.js
@@ -1,6 +1,6 @@
 const errors = {
   backToLogin() {
-    if (window.location !== '/login') {
+    if (window.location.pathname !== '/login') {
       window.location.replace('/login')
     }
   }
diff --git a/src/lib/func.js b/src/lib/func.js
index ecaf24d577..2afca68fb4 100644
--- a/src/lib/func.js
+++ b/src/lib/func.js
@@ -14,7 +14,7 @@ export default {
   throttle(fn, delay) {
     let lastCall = 0
     return function (...args) {
-      const now = new Date().getTime()
+      const now = Date.now()
       if (now - lastCall < delay) return
       lastCall = now
       return fn(...args)
diff --git a/src/lib/indexing.js b/src/lib/indexing.js
index 5088770642..705b1b9d4b 100644
--- a/src/lib/indexing.js
+++ b/src/lib/indexing.js
@@ -1,9 +1,13 @@
+const createIndexPair = () => ({
+  index: Object.create(null),
+  entryIndex: Object.create(null)
+})
+
 /*
  * Build a simple index based on entry names.
  */
 export const buildNameIndex = (entries, split = true, withEmail = false) => {
-  const index = Object.create(null)
-  const entryIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   entries.forEach(entry => {
     if (entry) {
       let words
@@ -64,8 +68,7 @@ export const buildTaskStatusIndex = taskStatuses => {
  * The result is an array of tasks.
  */
 export const buildTaskIndex = tasks => {
-  const index = Object.create(null)
-  const taskIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   tasks.forEach(task => {
     const stringToIndex = task.full_entity_name
       .replace(/_/g, ' ')
@@ -78,7 +81,7 @@ export const buildTaskIndex = tasks => {
         task.task_status_short_name,
         task.project_name
       ])
-    indexWords(index, taskIndex, task, words)
+    indexWords(index, entryIndex, task, words)
   })
   return index
 }
@@ -89,8 +92,7 @@ export const buildTaskIndex = tasks => {
  * The result is an array of tasks.
  */
 export const buildSupervisorTaskIndex = (tasks, personMap, taskStatusMap) => {
-  const index = Object.create(null)
-  const taskIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   tasks.forEach(task => {
     const stringToIndex = task.entity_name.replace(/_/g, ' ').replace(/-/g, ' ')
     const taskStatus = taskStatusMap.get(task.task_status_id)
@@ -102,7 +104,7 @@ export const buildSupervisorTaskIndex = (tasks, personMap, taskStatusMap) => {
       const person = personMap.get(personId)
       if (person) words.push(person.first_name, person.last_name)
     })
-    indexWords(index, taskIndex, task, words)
+    indexWords(index, entryIndex, task, words)
   })
   return index
 }
@@ -113,8 +115,7 @@ export const buildSupervisorTaskIndex = (tasks, personMap, taskStatusMap) => {
  * Results are arrays of assets.
  */
 export const buildAssetIndex = entries => {
-  const index = Object.create(null)
-  const assetIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   entries.forEach(asset => {
     const stringToIndex = asset.name.replace(/_/g, ' ').replace(/-/g, ' ')
     let words = []
@@ -124,7 +125,7 @@ export const buildAssetIndex = entries => {
     const camelWords = stringToIndex.match(/[A-Z]+[a-z0-9]*/g)
     if (camelWords) words = words.concat(camelWords)
     words = [...new Set(words.map(word => word.toLowerCase()))]
-    indexWords(index, assetIndex, asset, words)
+    indexWords(index, entryIndex, asset, words)
   })
   return index
 }
@@ -135,11 +136,10 @@ export const buildAssetIndex = entries => {
  * Results are arrays of shots.
  */
 export const buildShotIndex = shots => {
-  const index = Object.create(null)
-  const shotIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   shots.forEach(shot => {
     const words = [shot.name, shot.sequence_name, shot.episode_name]
-    indexWords(index, shotIndex, shot, words)
+    indexWords(index, entryIndex, shot, words)
   })
   return index
 }
@@ -150,11 +150,10 @@ export const buildShotIndex = shots => {
  * Results are arrays of edits.
  */
 export const buildEditIndex = edits => {
-  const index = Object.create(null)
-  const editIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   edits.forEach(edit => {
     const words = [edit.name, edit.episode_name]
-    indexWords(index, editIndex, edit, words)
+    indexWords(index, entryIndex, edit, words)
   })
   return index
 }
@@ -165,11 +164,10 @@ export const buildEditIndex = edits => {
  * Results are arrays of sequences.
  */
 export const buildSequenceIndex = sequences => {
-  const index = Object.create(null)
-  const sequenceIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   sequences.forEach(sequence => {
     const words = [sequence.name, sequence.episode_name]
-    indexWords(index, sequenceIndex, sequence, words)
+    indexWords(index, entryIndex, sequence, words)
   })
   return index
 }
@@ -180,11 +178,10 @@ export const buildSequenceIndex = sequences => {
  * Results are arrays of episodes.
  */
 export const buildEpisodeIndex = episodes => {
-  const index = Object.create(null)
-  const episodeIndex = Object.create(null)
+  const { index, entryIndex } = createIndexPair()
   episodes.forEach(episode => {
     const words = [episode.name]
-    indexWords(index, episodeIndex, episode, words)
+    indexWords(index, entryIndex, episode, words)
   })
   return index
 }
@@ -238,18 +235,18 @@ const indexSearchWord = (index, word) => {
  */
 const indexWords = (index, entryIndex, entry, words) => {
   for (const word of words) {
-    let currentString = ''
     if (word) {
-      for (const character of word) {
-        currentString += character.toLowerCase()
-        if (index[currentString] === undefined) {
-          index[currentString] = []
-          entryIndex[currentString] = Object.create(null)
+      const lowerWord = word.toLowerCase()
+      for (let i = 1; i <= lowerWord.length; i++) {
+        const prefix = lowerWord.substring(0, i)
+        if (index[prefix] === undefined) {
+          index[prefix] = []
+          entryIndex[prefix] = Object.create(null)
         }
 
-        if (!entryIndex[currentString][entry.id]) {
-          index[currentString].push(entry)
-          entryIndex[currentString][entry.id] = true
+        if (!entryIndex[prefix][entry.id]) {
+          index[prefix].push(entry)
+          entryIndex[prefix][entry.id] = true
         }
       }
     }
diff --git a/src/lib/lang.js b/src/lib/lang.js
index 075037523e..872ebca7df 100644
--- a/src/lib/lang.js
+++ b/src/lib/lang.js
@@ -3,7 +3,7 @@ import i18n from '@/lib/i18n'
 
 const LOCALE_MAP = {
   zh_Hans_CN: { language: 'zh', localeCode: 'zh-cn' },
-  zh_Hant_TW: { language: 'zw', localeCode: 'zh-tw' }
+  zh_Hant_TW: { language: 'zh', localeCode: 'zh-tw' }
 }
 
 export default {
diff --git a/src/lib/models.js b/src/lib/models.js
index 2254b93bb7..3c095ab371 100644
--- a/src/lib/models.js
+++ b/src/lib/models.js
@@ -1,29 +1,27 @@
 export const populateTask = task => {
-  if (task.entity_type_name === 'Shot') {
-    if (task.episode_name) {
-      task.full_entity_name = `${task.episode_name} / ${task.sequence_name} / ${task.entity_name}`
-    } else {
-      task.full_entity_name = `${task.sequence_name} / ${task.entity_name}`
-    }
-  } else if (task.entity_type_name === 'Episode') {
-    task.full_entity_name = `${task.entity_name}`
-  } else if (['Sequence', 'Edit'].includes(task.entity_type_name)) {
-    if (task.episode_name) {
-      task.full_entity_name = `${task.episode_name} / ${task.entity_name}`
-    } else {
-      task.full_entity_name = `${task.entity_name}`
-    }
+  const type = task.entity_type_name
+  const parts = []
+
+  if (type === 'Shot') {
+    if (task.episode_name) parts.push(task.episode_name)
+    parts.push(task.sequence_name, task.entity_name)
+  } else if (['Sequence', 'Edit'].includes(type)) {
+    if (task.episode_name) parts.push(task.episode_name)
+    parts.push(task.entity_name)
+  } else if (type === 'Episode') {
+    parts.push(task.entity_name)
   } else {
-    task.full_entity_name = `${task.entity_type_name} / ${task.entity_name}`
+    parts.push(task.entity_type_name, task.entity_name)
   }
-  const type = task.entity_type_name.toLowerCase()
+
+  task.full_entity_name = parts.join(' / ')
   task.entity_path = {
-    name: type,
+    name: type.toLowerCase(),
     params: {
       production_id: task.project_id
     }
   }
-  task.entity_path.params[`${type}_id`] = task.entity_id
+  task.entity_path.params[`${type.toLowerCase()}_id`] = task.entity_id
   return task
 }
 
@@ -95,7 +93,7 @@ export const addToIdList = (production, field, id) => {
 
 export const removeFromIdList = (production, field, id) => {
   const index = production[field].findIndex(mid => mid === id)
-  if (index !== null) production[field].splice(index, 1)
+  if (index !== -1) production[field].splice(index, 1)
 }
 
 export const arrayMove = (array, fromIndex, toIndex) => {
diff --git a/src/lib/preferences.js b/src/lib/preferences.js
index 48ef4bb321..1fb32a62d4 100644
--- a/src/lib/preferences.js
+++ b/src/lib/preferences.js
@@ -14,7 +14,7 @@ export default {
 
   getIntPreference(key, defaultValue = 0) {
     const item = this.getPreference(key)
-    const value = parseInt(item)
+    const value = parseInt(item, 10)
     return isNaN(value) ? defaultValue : value
   },
 
diff --git a/src/lib/query.js b/src/lib/query.js
index c9a5764e55..cad7e00be8 100644
--- a/src/lib/query.js
+++ b/src/lib/query.js
@@ -9,13 +9,15 @@
  */
 export const buildQueryString = (path, params) => {
   const result = `${path}?`
-  const couples = []
+  const pairs = []
   Object.keys(params).forEach(key => {
     if (
       params[key] ||
       (typeof params[key] === 'boolean' && params[key] === false)
     )
-      couples.push(`${key}=${params[key]}`)
+      pairs.push(
+        `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
+      )
   })
-  return result + couples.join('&')
+  return result + pairs.join('&')
 }
diff --git a/src/lib/render.js b/src/lib/render.js
index bb2ed054ad..18f56d248f 100644
--- a/src/lib/render.js
+++ b/src/lib/render.js
@@ -54,11 +54,13 @@ export const renderComment = (
 ) => {
   let html = renderMarkdown(input)
 
+  const replacements = new Map()
+
   if (mentions) {
     for (const personId of mentions) {
       const person = personMap.get(personId)
       if (!person) continue
-      html = html.replaceAll(
+      replacements.set(
         `@${person.full_name}`,
         `<a class="mention" href="/people/${person.id}">@${person.full_name}</a>`
       )
@@ -66,7 +68,7 @@ export const renderComment = (
     for (const departmentId of departmentMentions) {
       const department = departmentMap.get(departmentId)
       if (!department) continue
-      html = html.replaceAll(
+      replacements.set(
         `@${department.name}`,
         `<span style="color: ${department.color}">@${department.name}</span>`
       )
@@ -74,22 +76,32 @@ export const renderComment = (
   }
 
   if (taskTypes) {
-    // replace #TaskType with a link to the task within the same entity
     taskTypes.forEach(taskType => {
       const task_name = encodeHtmlEntities(taskType.name)
-      if (taskType.url)
-        html = html.replaceAll(
+      if (taskType.url) {
+        replacements.set(
           `#${task_name}`,
           `<a class="mention mention-task" href="${taskType.url}">#${task_name}</a>`
         )
+      }
     })
-    // replace #All with a link to the shot
-    html = html.replaceAll(
+    replacements.set(
       '#All',
       `<a class="mention mention-task" href="#">#All</a>`
     )
   }
 
+  if (replacements.size > 0) {
+    const escapeRegex = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const pattern = [...replacements.keys()]
+      .sort((a, b) => b.length - a.length)
+      .map(escapeRegex)
+      .join('|')
+    html = html.replace(new RegExp(pattern, 'g'), match =>
+      replacements.get(match)
+    )
+  }
+
   return html.replaceAll(
     TIME_CODE_REGEX,
     (match, version, hours, minutes, seconds, sep, subframes, frame) => {
diff --git a/src/lib/sorting.js b/src/lib/sorting.js
index cd5f11794c..749d250a7d 100644
--- a/src/lib/sorting.js
+++ b/src/lib/sorting.js
@@ -174,19 +174,22 @@ export const sortTaskTypeScheduleItems = (
   currentProduction,
   taskTypeMap
 ) => {
+  const priorityCache = new Map()
+  for (const item of items) {
+    if (!priorityCache.has(item.task_type_id)) {
+      const taskType = taskTypeMap.get(item.task_type_id)
+      priorityCache.set(
+        item.task_type_id,
+        getTaskTypePriorityOfProd(taskType, currentProduction)
+      )
+    }
+  }
   const sortFunc = firstBy('for_entity')
     .thenBy((itemA, itemB) => {
-      const taskTypeA = taskTypeMap.get(itemA.task_type_id)
-      const taskTypeB = taskTypeMap.get(itemB.task_type_id)
-      const taskTypeAPriority = getTaskTypePriorityOfProd(
-        taskTypeA,
-        currentProduction
+      return (
+        priorityCache.get(itemA.task_type_id) -
+        priorityCache.get(itemB.task_type_id)
       )
-      const taskTypeBPriority = getTaskTypePriorityOfProd(
-        taskTypeB,
-        currentProduction
-      )
-      return taskTypeAPriority - taskTypeBPriority
     })
     .thenBy('name')
   return items.sort(sortFunc)
@@ -233,18 +236,21 @@ export const sortValidationColumns = (
   taskTypeMap,
   currentProduction
 ) => {
+  const priorityCache = new Map()
+  for (const id of columns) {
+    if (!priorityCache.has(id)) {
+      priorityCache.set(
+        id,
+        getTaskTypePriorityOfProd(taskTypeMap.get(id), currentProduction)
+      )
+    }
+  }
   return columns.sort((a, b) => {
-    const taskTypeA = taskTypeMap.get(a)
-    const taskTypeB = taskTypeMap.get(b)
-    const taskTypeAPriority = getTaskTypePriorityOfProd(
-      taskTypeA,
-      currentProduction
-    )
-    const taskTypeBPriority = getTaskTypePriorityOfProd(
-      taskTypeB,
-      currentProduction
-    )
+    const taskTypeAPriority = priorityCache.get(a)
+    const taskTypeBPriority = priorityCache.get(b)
     if (taskTypeAPriority === taskTypeBPriority) {
+      const taskTypeA = taskTypeMap.get(a)
+      const taskTypeB = taskTypeMap.get(b)
       return taskTypeA.name.localeCompare(taskTypeB.name, undefined, {
         numeric: true
       })
@@ -255,109 +261,88 @@ export const sortValidationColumns = (
   })
 }
 
-export const sortAssetResult = (result, sorting, taskTypeMap, taskMap) => {
+const compareByName = (a, b) =>
+  a.name.localeCompare(b.name, undefined, { numeric: true })
+
+const sortEntityResult = (
+  result,
+  sorting,
+  taskMap,
+  thenBySteps,
+  defaultSort
+) => {
   if (sorting && sorting.length > 0) {
     const sortInfo = sorting[0]
     const sortEntities =
       sortInfo.type === 'metadata'
         ? sortByMetadata(sortInfo)
         : sortByTaskType(taskMap, sortInfo)
-    result = result.sort(
-      firstBy('canceled')
-        .thenBy(sortEntities)
-        .thenBy((a, b) =>
-          a.asset_type_name.localeCompare(b.asset_type_name, undefined, {
-            numeric: true
-          })
-        )
-        .thenBy((a, b) =>
-          a.name.localeCompare(b.name, undefined, { numeric: true })
-        )
-    )
+    let sorter = firstBy('canceled').thenBy(sortEntities)
+    for (const step of thenBySteps) {
+      sorter = sorter.thenBy(step)
+    }
+    result = result.sort(sorter)
   } else {
-    result = sortAssets(result)
+    result = defaultSort(result)
   }
   return result
 }
 
+export const sortAssetResult = (result, sorting, taskTypeMap, taskMap) => {
+  return sortEntityResult(
+    result,
+    sorting,
+    taskMap,
+    [
+      (a, b) =>
+        a.asset_type_name.localeCompare(b.asset_type_name, undefined, {
+          numeric: true
+        }),
+      compareByName
+    ],
+    sortAssets
+  )
+}
+
 export const sortShotResult = (result, sorting, taskTypeMap, taskMap) => {
-  if (sorting && sorting.length > 0) {
-    const sortInfo = sorting[0]
-    let sortEntities = sortByTaskType(taskMap, sortInfo)
-    if (sortInfo.type === 'metadata') sortEntities = sortByMetadata(sortInfo)
-    result = result.sort(
-      firstBy('canceled')
-        .thenBy(sortEntities)
-        .thenBy(sortByEpisode)
-        .thenBy((a, b) =>
-          a.sequence_name.localeCompare(b.sequence_name, undefined, {
-            numeric: true
-          })
-        )
-        .thenBy((a, b) =>
-          a.name.localeCompare(b.name, undefined, { numeric: true })
-        )
-    )
-  } else {
-    result = sortShots(result)
-  }
-  return result
+  return sortEntityResult(
+    result,
+    sorting,
+    taskMap,
+    [
+      sortByEpisode,
+      (a, b) =>
+        a.sequence_name.localeCompare(b.sequence_name, undefined, {
+          numeric: true
+        }),
+      compareByName
+    ],
+    sortShots
+  )
 }
 
 export const sortSequenceResult = (result, sorting, taskTypeMap, taskMap) => {
-  if (sorting && sorting.length > 0) {
-    const sortInfo = sorting[0]
-    let sortEntities = sortByTaskType(taskMap, sortInfo)
-    if (sortInfo.type === 'metadata') sortEntities = sortByMetadata(sortInfo)
-    result = result.sort(
-      firstBy('canceled')
-        .thenBy(sortEntities)
-        .thenBy(sortByEpisode)
-        .thenBy((a, b) =>
-          a.name.localeCompare(b.name, undefined, { numeric: true })
-        )
-    )
-  } else {
-    result = sortByName(result)
-  }
-  return result
+  return sortEntityResult(
+    result,
+    sorting,
+    taskMap,
+    [sortByEpisode, compareByName],
+    sortByName
+  )
 }
 
 export const sortEpisodeResult = (result, sorting, taskTypeMap, taskMap) => {
-  if (sorting && sorting.length > 0) {
-    const sortInfo = sorting[0]
-    let sortEntities = sortByTaskType(taskMap, sortInfo)
-    if (sortInfo.type === 'metadata') sortEntities = sortByMetadata(sortInfo)
-    result = result.sort(
-      firstBy('canceled')
-        .thenBy(sortEntities)
-        .thenBy((a, b) =>
-          a.name.localeCompare(b.name, undefined, { numeric: true })
-        )
-    )
-  } else {
-    result = sortByName(result)
-  }
-  return result
+  return sortEntityResult(result, sorting, taskMap, [compareByName], sortByName)
 }
 
 export const sortEditResult = (result, sorting, taskTypeMap, taskMap) => {
-  if (sorting && sorting.length > 0) {
-    const sortInfo = sorting[0]
-    let sortEntities = sortByTaskType(taskMap, sortInfo)
-    if (sortInfo.type === 'metadata') sortEntities = sortByMetadata(sortInfo)
-    result = result.sort(
-      firstBy('canceled')
-        .thenBy(sortEntities)
-        .thenBy(sortByEpisode)
-        .thenBy((a, b) =>
-          a.name.localeCompare(b.name, undefined, { numeric: true })
-        )
-    )
-  } else {
-    result = sortEdits(result)
-  }
-  return result
+  return sortEntityResult(
+    result,
+    sorting,
+    taskMap,
+    [sortByEpisode, compareByName],
+    sortEdits
+  )
 }
 
 const getMetadataValues = (sortInfo, a, b, defaultValue = '') => {
diff --git a/src/lib/stats.js b/src/lib/stats.js
index b356db35ae..0f71cd2da4 100644
--- a/src/lib/stats.js
+++ b/src/lib/stats.js
@@ -1,3 +1,19 @@
+const RETAKE_CHART_COLORS = {
+  done: '#22d160',
+  retake: '#ff3860',
+  other: '#6f727a'
+}
+
+const DEFAULT_STATUS_COLOR = '#6F727A'
+
+const createStatusEntry = taskStatus => ({
+  name: taskStatus.short_name,
+  color: taskStatus.color,
+  count: 0,
+  frames: 0,
+  drawings: 0
+})
+
 // Get all data displayed in statistics (needed by the stat cell widget).
 // Data follow this format: [[task-status-1-name, value], ...]
 // Set count data or frames data depending on data type.
@@ -13,7 +29,7 @@ export const getChartData = (
   return Object.keys(statusData)
     .map(taskStatusId => {
       const data = statusData[taskStatusId]
-      const color = data.is_default ? '#6F727A' : data.color
+      const color = data.is_default ? DEFAULT_STATUS_COLOR : data.color
       return [data.name, data[valueField], color]
     })
     .sort(_sortData)
@@ -37,20 +53,15 @@ export const getRetakeChartData = (
   columnId,
   dataType = 'count'
 ) => {
-  const colorMap = {
-    done: '#22d160',
-    retake: '#ff3860',
-    other: '#6f727a'
-  }
   if (!mainStats[entryId] || !mainStats[entryId][columnId]) return []
   const statusData = { ...mainStats[entryId][columnId] }
   delete statusData.evolution
   delete statusData.max_retake_count
   const valueField = dataType
   return [
-    ['retake', statusData.retake[valueField] || 0, colorMap.retake],
-    ['other', statusData.other[valueField] || 0, colorMap.other],
-    ['done', statusData.done[valueField] || 0, colorMap.done]
+    ['retake', statusData.retake[valueField] || 0, RETAKE_CHART_COLORS.retake],
+    ['other', statusData.other[valueField] || 0, RETAKE_CHART_COLORS.other],
+    ['done', statusData.done[valueField] || 0, RETAKE_CHART_COLORS.done]
   ]
 }
 
@@ -133,51 +144,21 @@ const computeTaskResult = (
         results[sequenceId][taskTypeId] = {}
       }
 
-      // All / all intersections
       if (!results.all.all[taskStatusId]) {
-        results.all.all[taskStatusId] = {
-          name: taskStatus.short_name,
-          color: taskStatus.color,
-          count: 0,
-          frames: 0,
-          drawings: 0
-        }
+        results.all.all[taskStatusId] = createStatusEntry(taskStatus)
       }
-
-      // All line
       if (!results.all[taskTypeId]) {
         results.all[taskTypeId] = {}
       }
       if (!results.all[taskTypeId][taskStatusId]) {
-        results.all[taskTypeId][taskStatusId] = {
-          name: taskStatus.short_name,
-          color: taskStatus.color,
-          count: 0,
-          frames: 0,
-          drawings: 0
-        }
+        results.all[taskTypeId][taskStatusId] = createStatusEntry(taskStatus)
       }
-
-      // All column
       if (!results[sequenceId].all[taskStatusId]) {
-        results[sequenceId].all[taskStatusId] = {
-          name: taskStatus.short_name,
-          color: taskStatus.color,
-          count: 0,
-          frames: 0,
-          drawings: 0
-        }
+        results[sequenceId].all[taskStatusId] = createStatusEntry(taskStatus)
       }
-
-      // Columns
       if (!results[sequenceId][taskTypeId][taskStatusId]) {
-        results[sequenceId][taskTypeId][taskStatusId] = {
-          name: taskStatus.short_name,
-          color: taskStatus.color,
-          count: 0,
-          frames: 0,
-          drawings: 0
-        }
+        results[sequenceId][taskTypeId][taskStatusId] =
+          createStatusEntry(taskStatus)
       }
 
       // Slice count
diff --git a/src/lib/time.js b/src/lib/time.js
index 1eac4d9998..f9a37066fd 100644
--- a/src/lib/time.js
+++ b/src/lib/time.js
@@ -1,5 +1,8 @@
 import moment from 'moment-timezone'
 
+const SUNDAY = 0
+const SATURDAY = 6
+
 export const range = (start, end) => {
   let length = end - start + 1
   if (length < 0) length = 0
@@ -82,7 +85,7 @@ export const getWeekRange = (year, currentYear) => {
   if (currentYear === year) {
     return range(1, moment().week())
   } else {
-    return range(1, 52)
+    return range(1, moment(String(year), 'YYYY').isoWeeksInYear())
   }
 }
 
@@ -203,8 +206,6 @@ export const getDatesFromEndDate = (
 }
 
 export const getBusinessDays = (startDate, endDate, daysOff = []) => {
-  const Sunday = 0
-  const Saturday = 6
   const datesOff = daysOff
     ? getDayOffRange(daysOff).map(dayOff => dayOff.date)
     : []
@@ -212,8 +213,8 @@ export const getBusinessDays = (startDate, endDate, daysOff = []) => {
   let nbDays = 0
   while (newDate.isSameOrBefore(endDate)) {
     if (
-      newDate.day() !== Sunday &&
-      newDate.day() !== Saturday &&
+      newDate.day() !== SUNDAY &&
+      newDate.day() !== SATURDAY &&
       !datesOff.includes(newDate.format('YYYY-MM-DD'))
     ) {
       nbDays++
@@ -223,57 +224,38 @@ export const getBusinessDays = (startDate, endDate, daysOff = []) => {
   return nbDays
 }
 
-export const addBusinessDays = (originalDate, numDaysToAdd, daysOff = []) => {
-  if (!originalDate) {
-    return
-  }
-  const Sunday = 0
-  const Saturday = 6
+const adjustBusinessDays = (originalDate, numDays, daysOff, method) => {
+  if (!originalDate) return
   const datesOff = daysOff
     ? getDayOffRange(daysOff).map(dayOff => dayOff.date)
     : []
   const newDate = originalDate.clone()
-  let daysRemaining = numDaysToAdd
+  let daysRemaining = numDays
   while (daysRemaining >= 0) {
     if (
-      newDate.day() !== Sunday &&
-      newDate.day() !== Saturday &&
+      newDate.day() !== SUNDAY &&
+      newDate.day() !== SATURDAY &&
       !datesOff.includes(newDate.format('YYYY-MM-DD'))
     ) {
       daysRemaining--
     }
     if (daysRemaining >= 0) {
-      newDate.add(1, 'days')
+      newDate[method](1, 'days')
     }
   }
   return newDate
 }
 
+export const addBusinessDays = (originalDate, numDaysToAdd, daysOff = []) => {
+  return adjustBusinessDays(originalDate, numDaysToAdd, daysOff, 'add')
+}
+
 export const removeBusinessDays = (
   originalDate,
   numDaysToRemove,
   daysOff = []
 ) => {
-  const Sunday = 0
-  const Saturday = 6
-  const datesOff = daysOff
-    ? getDayOffRange(daysOff).map(dayOff => dayOff.date)
-    : []
-  const newDate = originalDate.clone()
-  let daysRemaining = numDaysToRemove
-  while (daysRemaining >= 0) {
-    if (
-      newDate.day() !== Sunday &&
-      newDate.day() !== Saturday &&
-      !datesOff.includes(newDate.format('YYYY-MM-DD'))
-    ) {
-      daysRemaining--
-    }
-    if (daysRemaining >= 0) {
-      newDate.subtract(1, 'days')
-    }
-  }
-  return newDate
+  return adjustBusinessDays(originalDate, numDaysToRemove, daysOff, 'subtract')
 }
 
 export const getDayOffRange = (daysOff = []) => {
diff --git a/src/lib/video.js b/src/lib/video.js
index c855b3b8c8..236e09ff8c 100644
--- a/src/lib/video.js
+++ b/src/lib/video.js
@@ -1,35 +1,39 @@
+const PRECISION_FACTOR = 10000
+const DEFAULT_FPS = 25
+
+const roundPrecision = value =>
+  Math.round(value * PRECISION_FACTOR) / PRECISION_FACTOR
+
 /*
  * Make sure that given time matches a frame in the video
  */
 export const roundToFrame = (time, fps) => {
-  const frameFactor = Math.round((1 / fps) * 10000) / 10000
+  const frameFactor = roundPrecision(1 / fps)
   const frameNumber = Math.round(time / frameFactor)
-  let roundedTime = frameNumber * frameFactor
-  roundedTime = Math.round(roundedTime * 10000) / 10000
-  return roundedTime
+  return roundPrecision(frameNumber * frameFactor)
 }
 
 export const ceilToFrame = (time, fps) => {
-  const frameFactor = Math.round((1 / fps) * 10000) / 10000
+  const frameFactor = roundPrecision(1 / fps)
   const frameNumber = Math.ceil(time / frameFactor)
-  let roundedTime = frameNumber * frameFactor
-  roundedTime = Math.ceil(roundedTime * 10000) / 10000
-  return roundedTime
+  return (
+    Math.ceil(frameNumber * frameFactor * PRECISION_FACTOR) / PRECISION_FACTOR
+  )
 }
 
 export const floorToFrame = (time, fps) => {
-  const frameFactor = Math.round((1 / fps) * 10000) / 10000
+  const frameFactor = roundPrecision(1 / fps)
   const frameNumber = Math.floor(time / frameFactor)
-  let roundedTime = frameNumber * frameFactor
-  roundedTime = Math.floor(roundedTime * 10000) / 10000
-  return roundedTime
+  return (
+    Math.floor(frameNumber * frameFactor * PRECISION_FACTOR) / PRECISION_FACTOR
+  )
 }
 
 /*
  * Turn a frame number into seconds depending on context.
  */
 export const frameToSeconds = (nbFrames, production, shot) => {
-  let fps = 25
+  let fps = DEFAULT_FPS
   if (shot && shot.fps) fps = shot.fps
   if (production && production.fps) fps = production.fps
   return Math.round((nbFrames / fps) * 1000) / 1000
@@ -43,13 +47,13 @@ export const formatTime = (rawTime, fps) => {
 
   const time = new Date(1000 * rawTime).toISOString()
   const milliseconds = parseInt(time.substring(20, 23))
-  const frameDuration = Math.round((1 / fps) * 10000) / 10000
+  const frameDuration = roundPrecision(1 / fps)
   const frame = `${Math.round(milliseconds / (1000 * frameDuration))}`.padStart(
     2,
     '0'
   )
   try {
-    return `${time.substr(11, 8)}:${frame}`
+    return `${time.substring(11, 19)}:${frame}`
   } catch (err) {
     console.error(err)
     return '00:00:00:00'
@@ -59,7 +63,7 @@ export const formatTime = (rawTime, fps) => {
 /**
  * Get timecode from frame number.
  */
-export const formatToTimecode = (frame, fps = 25) => {
+export const formatToTimecode = (frame, fps = DEFAULT_FPS) => {
   if (!frame || frame < 0) frame = 0
   const hours = Math.floor(frame / fps / 3600)
     .toString()
diff --git a/tests/archive/assets.spec.js b/tests/archive/assets.spec.js
index 205b676448..4e8b8ba81d 100644
--- a/tests/archive/assets.spec.js
+++ b/tests/archive/assets.spec.js
@@ -450,7 +450,7 @@ describe('Actions', () => {
 
       let mockCommit = vi.fn()
       peopleApi.createFilter = vi.fn(
-        (listType, name, query, productionId, entityType) => {
+        (listType, name, query) => {
           return Promise.resolve(query)
         }
       )
@@ -479,7 +479,7 @@ describe('Actions', () => {
 
       const mockCommit = vi.fn()
       peopleApi.removeFilter = vi.fn(
-        (searchQuery) => {
+        () => {
           return Promise.resolve()
         }
       )
diff --git a/tests/e2e/integration/production.js b/tests/e2e/integration/production.js
deleted file mode 100644
index 8c86e846d2..0000000000
--- a/tests/e2e/integration/production.js
+++ /dev/null
@@ -1,16 +0,0 @@
-describe('Production creation', () => {
-  beforeEach(() => {
-    cy.request('POST', '/api/auth/login', {
-      email: 'admin@example.com',
-      password: 'mysecretpassword'
-    })
-      .its('body')
-      .as('currentUser')
-  })
-
-  it('sets auth cookie when logging in via form submission', function () {
-    cy.visit('/open-productions')
-    cy.get('#create-production-button').click()
-    cy.get('.modal.is-active').should('contain', 'Add')
-  })
-})
diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js
deleted file mode 100644
index 894e0c87cd..0000000000
--- a/tests/e2e/plugins/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = function (on, config) {
-  // configure plugins here
-}
diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js
deleted file mode 100644
index 894e0c87cd..0000000000
--- a/tests/e2e/support/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = function (on, config) {
-  // configure plugins here
-}
diff --git a/tests/setup.js b/tests/setup.js
index e5ad9b1890..a8cb3617e4 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -1,2 +1,3 @@
+/* eslint-disable no-undef */
 const noop = () => {}
 Object.defineProperty(window, 'scrollTo', { value: noop, writable: true })
diff --git a/tests/unit/lib/clipboard.spec.js b/tests/unit/lib/clipboard.spec.js
new file mode 100644
index 0000000000..0c2024812b
--- /dev/null
+++ b/tests/unit/lib/clipboard.spec.js
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+
+import clipboard from '@/lib/clipboard'
+
+describe('clipboard', () => {
+  describe('annotations', () => {
+    it('returns an empty array initially', () => {
+      expect(clipboard.pasteAnnotations()).toEqual([])
+    })
+
+    it('returns the same reference after copy', () => {
+      const annotations = [{ id: 1, text: 'note' }]
+      clipboard.copyAnnotations(annotations)
+      expect(clipboard.pasteAnnotations()).toBe(annotations)
+    })
+  })
+
+  describe('casting', () => {
+    it('returns an empty array initially', () => {
+      expect(clipboard.pasteCasting()).toEqual([])
+    })
+
+    it('returns the same reference after copy', () => {
+      const casting = [{ asset_id: 'a1', nb_occurences: 2 }]
+      clipboard.copyCasting(casting)
+      expect(clipboard.pasteCasting()).toBe(casting)
+    })
+  })
+})
diff --git a/tests/unit/lib/colors.spec.js b/tests/unit/lib/colors.spec.js
index fd95c993e5..a2f0c8d36e 100644
--- a/tests/unit/lib/colors.spec.js
+++ b/tests/unit/lib/colors.spec.js
@@ -47,4 +47,13 @@ describe('colors', () => {
     expect(colors.fromString('123456')).toEqual('#f0ee75')
     expect(colors.fromString('Jhon Doe')).toEqual('#9e75f0')
   })
+
+  test('validationTextColor with wtg status', () => {
+    const task = { task_status_short_name: 'wtg' }
+    expect(colors.validationTextColor(task)).toEqual('#333')
+  })
+
+  test('validationTextColor with null task', () => {
+    expect(colors.validationTextColor(null)).toEqual('#333')
+  })
 })
diff --git a/tests/unit/lib/descriptor.spec.js b/tests/unit/lib/descriptor.spec.js
index bed6f9dfd3..7bd4f17b57 100644
--- a/tests/unit/lib/descriptor.spec.js
+++ b/tests/unit/lib/descriptor.spec.js
@@ -13,4 +13,13 @@ describe('descriptors', () => {
       { label: 'difficult', value: 'difficult' }
     ])
   })
+
+  test('getChoiceOptions with missing choices', () => {
+    expect(descriptors.getChoicesOptions({})).toEqual([
+      { label: '', value: '' }
+    ])
+    expect(descriptors.getChoicesOptions(null)).toEqual([
+      { label: '', value: '' }
+    ])
+  })
 })
diff --git a/tests/unit/lib/drafts.spec.js b/tests/unit/lib/drafts.spec.js
new file mode 100644
index 0000000000..219bca7730
--- /dev/null
+++ b/tests/unit/lib/drafts.spec.js
@@ -0,0 +1,51 @@
+/* eslint-disable no-undef */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import drafts from '@/lib/drafts'
+
+describe('drafts', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('sets and gets a task draft', () => {
+    drafts.setTaskDraft('task-1', 'my draft text')
+    expect(drafts.getTaskDraft('task-1')).toBe('my draft text')
+  })
+
+  it('returns null for a non-existent draft', () => {
+    expect(drafts.getTaskDraft('unknown-id')).toBeNull()
+  })
+
+  it('clears a task draft', () => {
+    drafts.setTaskDraft('task-2', 'some text')
+    drafts.clearTaskDraft('task-2')
+    expect(drafts.getTaskDraft('task-2')).toBeNull()
+  })
+
+  it('uses the draft- prefix in localStorage', () => {
+    drafts.setTaskDraft('task-3', 'hello')
+    expect(localStorage.getItem('draft-task-3')).toBe('hello')
+  })
+
+  it('handles localStorage errors gracefully on set', () => {
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('QuotaExceeded')
+    })
+    expect(() => drafts.setTaskDraft('task-4', 'text')).not.toThrow()
+  })
+
+  it('handles localStorage errors gracefully on get', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('SecurityError')
+    })
+    expect(drafts.getTaskDraft('task-5')).toBeNull()
+  })
+
+  it('handles localStorage errors gracefully on clear', () => {
+    vi.spyOn(Storage.prototype, 'removeItem').mockImplementation(() => {
+      throw new Error('SecurityError')
+    })
+    expect(() => drafts.clearTaskDraft('task-6')).not.toThrow()
+  })
+})
diff --git a/tests/unit/lib/errors.spec.js b/tests/unit/lib/errors.spec.js
new file mode 100644
index 0000000000..30901aeeb2
--- /dev/null
+++ b/tests/unit/lib/errors.spec.js
@@ -0,0 +1,26 @@
+/* eslint-disable no-undef */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import errors from '@/lib/errors'
+
+describe('errors', () => {
+  beforeEach(() => {
+    delete window.location
+    window.location = {
+      pathname: '/',
+      replace: vi.fn()
+    }
+  })
+
+  it('calls replace with /login when not on the login page', () => {
+    window.location.pathname = '/productions'
+    errors.backToLogin()
+    expect(window.location.replace).toHaveBeenCalledWith('/login')
+  })
+
+  it('does not call replace when already on /login', () => {
+    window.location.pathname = '/login'
+    errors.backToLogin()
+    expect(window.location.replace).not.toHaveBeenCalled()
+  })
+})
diff --git a/tests/unit/lib/func.spec.js b/tests/unit/lib/func.spec.js
index 2743c29a09..5578149dd2 100644
--- a/tests/unit/lib/func.spec.js
+++ b/tests/unit/lib/func.spec.js
@@ -1,16 +1,32 @@
 import func from '@/lib/func'
 
 describe('func', () => {
-  test('runPromiseMapAsSeries', () => new Promise((done) => {
+  test('runPromiseMapAsSeries', async () => {
     let counter = 0
     const mapFunc = (item) => {
       counter += item
       return Promise.resolve(item)
     }
-    func.runPromiseMapAsSeries([1, 5], mapFunc)
-      .then(() => {
-        expect(counter).toEqual(6)
-        done()
-      })
-  }))
+    await func.runPromiseMapAsSeries([1, 5], mapFunc)
+    expect(counter).toEqual(6)
+  })
+
+  test('throttle', () => {
+    let count = 0
+    const fn = func.throttle(() => { count++ }, 100)
+    fn()
+    expect(count).toBe(1)
+    fn()
+    expect(count).toBe(1) // throttled
+  })
+
+  test('runPromiseAsSeries', async () => {
+    let counter = 0
+    const promises = [
+      Promise.resolve().then(() => { counter += 1; return undefined }),
+      Promise.resolve().then(() => { counter += 5; return undefined })
+    ]
+    await func.runPromiseAsSeries(promises)
+    expect(counter).toEqual(6)
+  })
 })
diff --git a/tests/unit/lib/lang.spec.js b/tests/unit/lib/lang.spec.js
index 0704fb1f78..728f15a9a4 100644
--- a/tests/unit/lib/lang.spec.js
+++ b/tests/unit/lib/lang.spec.js
@@ -6,7 +6,7 @@ import i18n from '@/lib/i18n'
 import store from '@/store'
 
 class ColorHash {
-  constructor (colorData) {
+  constructor () {
   }
 
   hex (str) {
@@ -14,7 +14,7 @@ class ColorHash {
   }
 }
 
-global.ColorHash = ColorHash
+globalThis.ColorHash = ColorHash
 
 describe('lang', () => {
   store.commit('USER_LOGIN', {
diff --git a/tests/unit/lib/models.spec.js b/tests/unit/lib/models.spec.js
index ca2080572e..de5a3a3afa 100644
--- a/tests/unit/lib/models.spec.js
+++ b/tests/unit/lib/models.spec.js
@@ -1,5 +1,6 @@
 import {
   addToIdList,
+  arrayMove,
   removeFromIdList,
   getFilledColumns,
   groupEntitiesByParents,
@@ -153,4 +154,53 @@ describe('lib/helpers', () => {
     removeFromIdList(production, 'asset_types', 'type-2')
     expect(production.asset_types).toEqual(['type-1', 'type-3'])
   })
+
+  it('populateTask - Episode', () => {
+    const task = {
+      entity_name: 'E01',
+      entity_type_name: 'Episode',
+      project_id: 'prod-1',
+      entity_id: 'ep-1'
+    }
+    populateTask(task)
+    expect(task.full_entity_name).toEqual('E01')
+  })
+
+  it('populateTask - Sequence with episode', () => {
+    const task = {
+      entity_name: 'SQ01',
+      entity_type_name: 'Sequence',
+      episode_name: 'E01',
+      project_id: 'prod-1',
+      entity_id: 'seq-1'
+    }
+    populateTask(task)
+    expect(task.full_entity_name).toEqual('E01 / SQ01')
+  })
+
+  it('populateTask - Edit without episode', () => {
+    const task = {
+      entity_name: 'ED01',
+      entity_type_name: 'Edit',
+      project_id: 'prod-1',
+      entity_id: 'edit-1'
+    }
+    populateTask(task)
+    expect(task.full_entity_name).toEqual('ED01')
+  })
+
+  it('removeFromIdList - id not found', () => {
+    const production = {
+      id: '1',
+      asset_types: ['type-1', 'type-2']
+    }
+    removeFromIdList(production, 'asset_types', 'type-999')
+    expect(production.asset_types).toEqual(['type-1', 'type-2'])
+  })
+
+  it('arrayMove', () => {
+    const arr = ['a', 'b', 'c', 'd']
+    expect(arrayMove(arr, 0, 2)).toEqual(['b', 'c', 'a', 'd'])
+    expect(arr).toEqual(['a', 'b', 'c', 'd']) // original unchanged
+  })
 })
diff --git a/tests/unit/lib/productions.spec.js b/tests/unit/lib/productions.spec.js
new file mode 100644
index 0000000000..0816fadb8c
--- /dev/null
+++ b/tests/unit/lib/productions.spec.js
@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  getTaskTypePriorityOfProd,
+  getTaskStatusPriorityOfProd
+} from '@/lib/productions'
+
+describe('productions', () => {
+  describe('getTaskTypePriorityOfProd', () => {
+    it('returns 1 when taskType is null', () => {
+      expect(getTaskTypePriorityOfProd(null, {})).toBe(1)
+    })
+
+    it('returns production-level priority when set', () => {
+      const taskType = { id: 'tt-1', priority: 5 }
+      const production = { task_types_priority: { 'tt-1': 3 } }
+      expect(getTaskTypePriorityOfProd(taskType, production)).toBe(3)
+    })
+
+    it('falls back to taskType priority when production has no override', () => {
+      const taskType = { id: 'tt-2', priority: 7 }
+      const production = { task_types_priority: {} }
+      expect(getTaskTypePriorityOfProd(taskType, production)).toBe(7)
+    })
+
+    it('falls back to taskType priority when production is null', () => {
+      const taskType = { id: 'tt-3', priority: 4 }
+      expect(getTaskTypePriorityOfProd(taskType, null)).toBe(4)
+    })
+  })
+
+  describe('getTaskStatusPriorityOfProd', () => {
+    it('returns 1 when taskStatus is null', () => {
+      expect(getTaskStatusPriorityOfProd(null, {})).toBe(1)
+    })
+
+    it('returns production-level priority when set', () => {
+      const taskStatus = { id: 'ts-1', priority: 5 }
+      const production = {
+        task_statuses_link: { 'ts-1': { priority: 2 } }
+      }
+      expect(getTaskStatusPriorityOfProd(taskStatus, production)).toBe(2)
+    })
+
+    it('falls back to taskStatus priority when production has no override', () => {
+      const taskStatus = { id: 'ts-2', priority: 8 }
+      const production = { task_statuses_link: {} }
+      expect(getTaskStatusPriorityOfProd(taskStatus, production)).toBe(8)
+    })
+
+    it('falls back to taskStatus priority when production is null', () => {
+      const taskStatus = { id: 'ts-3', priority: 6 }
+      expect(getTaskStatusPriorityOfProd(taskStatus, null)).toBe(6)
+    })
+  })
+})
diff --git a/tests/unit/lib/query.spec.js b/tests/unit/lib/query.spec.js
index 7a2568e2c7..3298666884 100644
--- a/tests/unit/lib/query.spec.js
+++ b/tests/unit/lib/query.spec.js
@@ -9,5 +9,20 @@ describe('query', () => {
       })
       expect(path).toEqual('/data?page=2&id=entity-id')
     })
+
+    test('buildQueryString with special characters', () => {
+      const path = buildQueryString('/data', { name: 'hello world', tag: 'a&b' })
+      expect(path).toEqual('/data?name=hello%20world&tag=a%26b')
+    })
+
+    test('buildQueryString with boolean false', () => {
+      const path = buildQueryString('/data', { active: false })
+      expect(path).toEqual('/data?active=false')
+    })
+
+    test('buildQueryString with empty params', () => {
+      const path = buildQueryString('/data', {})
+      expect(path).toEqual('/data?')
+    })
   })
 })
diff --git a/tests/unit/lib/render.spec.js b/tests/unit/lib/render.spec.js
index 3a004f79b5..c3a7bfe0cc 100644
--- a/tests/unit/lib/render.spec.js
+++ b/tests/unit/lib/render.spec.js
@@ -61,11 +61,11 @@ describe('render', () => {
       'Text **bold** <img onerror="console.log(\'test\')" src="picture.png" />'
     let result = renderMarkdown(input)
     expect(result.trim()).toEqual(
-      '<p>Text <strong>bold</strong> <img src=\"picture.png\" /></p>')
+      '<p>Text <strong>bold</strong> <img src="picture.png" /></p>')
     input = 'Text **bold** <img src="picture.png" />'
     result = renderMarkdown(input)
     expect(result.trim()).toEqual(
-      '<p>Text <strong>bold</strong> <img src=\"picture.png\" /></p>')
+      '<p>Text <strong>bold</strong> <img src="picture.png" /></p>')
   })
 
   test('renderFileSize', () => {
diff --git a/tests/unit/lib/sorting.spec.js b/tests/unit/lib/sorting.spec.js
index 4155121964..afe96281e8 100644
--- a/tests/unit/lib/sorting.spec.js
+++ b/tests/unit/lib/sorting.spec.js
@@ -549,10 +549,8 @@ describe('lib/sorting', () => {
     const taskMap = new Map()
     taskMap.set('task1', { task_status_short_name: 'status A' })
     taskMap.set('task2', { task_status_short_name: 'status B' })
-    const resultsMetadata =
-      sortAssetResult(entries, sortingMetadata, taskTypeMap, taskMap)
-    const resultsTaskTypes =
-      sortAssetResult(entries, sortingTaskType, taskTypeMap, taskMap)
+    sortAssetResult(entries, sortingMetadata, taskTypeMap, taskMap)
+    sortAssetResult(entries, sortingTaskType, taskTypeMap, taskMap)
     /*
     expect(resultsMetadata).toHaveLength(5)
     expect(resultsMetadata[0].id).toEqual(5)
@@ -637,8 +635,7 @@ describe('lib/sorting', () => {
       ['task1', { task_status_short_name: 'status A' }],
       ['task2', { task_status_short_name: 'status B' }]
     ])
-    const resultsMetadata =
-      sortShotResult(entries, sortingMetadata, taskTypeMap, taskMap)
+    sortShotResult(entries, sortingMetadata, taskTypeMap, taskMap)
     const resultsTaskTypes =
       sortShotResult(entries, sortingTaskType, taskTypeMap, taskMap)
     /*
diff --git a/tests/unit/lib/stats.spec.js b/tests/unit/lib/stats.spec.js
index 2e1bbdce00..9c3eb18dc4 100644
--- a/tests/unit/lib/stats.spec.js
+++ b/tests/unit/lib/stats.spec.js
@@ -1,7 +1,8 @@
 import {
   computeStats,
   getChartData,
-  getChartColors
+  getChartColors,
+  getPercentage
 } from '@/lib/stats'
 
 const taskMap = new Map(Object.entries({
@@ -175,4 +176,11 @@ describe('lib/stats', () => {
     data = getChartColors(expectedStatResult, 'all', 'all')
     expect(data).toEqual(['red', 'blue'])
   })
+
+  it('getPercentage', () => {
+    expect(getPercentage(50, 100)).toEqual('50.00')
+    expect(getPercentage(1, 3)).toEqual('33.33')
+    expect(getPercentage(0, 0)).toEqual('0.00')
+    expect(getPercentage(0, 100)).toEqual('0.00')
+  })
 })
diff --git a/tests/unit/lib/video.spec.js b/tests/unit/lib/video.spec.js
index c468a4419d..07a0399f60 100644
--- a/tests/unit/lib/video.spec.js
+++ b/tests/unit/lib/video.spec.js
@@ -1,6 +1,9 @@
 import {
+  ceilToFrame,
+  floorToFrame,
   formatFrame,
   formatTime,
+  formatToTimecode,
   frameToSeconds,
   roundToFrame
 } from '@/lib/video'
@@ -53,4 +56,28 @@ describe('video', () => {
     expect(formatTime(60.018, 25)).toBe('00:01:00:00')
     expect(formatTime(362.018, 25)).toBe('00:06:02:00')
   })
+
+  it('ceilToFrame', () => {
+    expect(ceilToFrame(1, 24)).toBeCloseTo(1.0008, 4)
+    expect(ceilToFrame(0.95, 24)).toBeCloseTo(0.9591, 4)
+    expect(ceilToFrame(49.12, 25)).toBeCloseTo(49.1201, 4)
+  })
+
+  it('floorToFrame', () => {
+    expect(floorToFrame(1, 24)).toBeCloseTo(0.9591, 4)
+    expect(floorToFrame(49.16, 25)).toBeCloseTo(49.16, 4)
+  })
+
+  it('formatToTimecode', () => {
+    expect(formatToTimecode(0, 25)).toBe('00:00:00:00')
+    expect(formatToTimecode(25, 25)).toBe('00:00:01:00')
+    expect(formatToTimecode(50, 25)).toBe('00:00:02:00')
+    expect(formatToTimecode(1525, 25)).toBe('00:01:01:00')
+    expect(formatToTimecode(null, 25)).toBe('00:00:00:00')
+    expect(formatToTimecode(-5, 25)).toBe('00:00:00:00')
+  })
+
+  it('formatTime with negative time', () => {
+    expect(formatTime(-1, 25)).toBe('00:00:00:00')
+  })
 })
diff --git a/tests/unit/modals/buildfiltermodal.spec.js b/tests/unit/modals/buildfiltermodal.spec.js
index 00d09cdd6a..51d5256d34 100644
--- a/tests/unit/modals/buildfiltermodal.spec.js
+++ b/tests/unit/modals/buildfiltermodal.spec.js
@@ -16,7 +16,6 @@ const router = createRouter({
 describe('BuildFilterModal', () => {
   let store, assetStore, peopleStore, shotStore, taskStore
   let wrapper
-  let getters
 
   beforeEach(() => {
     assetStore = {
@@ -54,7 +53,7 @@ describe('BuildFilterModal', () => {
         }
       },
       actions: {
-        changeSearch({ commit, state }, query) {
+        changeSearch({ commit }, query) {
           commit('CHANGE_SEARCH', query)
         }
       }
@@ -135,7 +134,6 @@ describe('BuildFilterModal', () => {
 
     wrapper = shallowMount(BuildFilterModal, {
       store,
-      getters,
       i18n,
       router,
       global: {
@@ -154,8 +152,7 @@ describe('BuildFilterModal', () => {
       wrapper.findComponent(BuildFilterModal)
     })
     describe('mount with query', () => {
-      it('task types', () =>
-        new Promise(done => {
+      it('task types', async () => {
           expect(wrapper.find('.task-type-filter').exists()).toBeFalsy()
           wrapper.setData({
             taskTypeFilters: {
@@ -168,13 +165,10 @@ describe('BuildFilterModal', () => {
               ]
             }
           })
-          wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find('.task-type-filter').exists()).toBeTruthy()
-            done()
-          })
-        }))
-      it('descriptors', () =>
-        new Promise(done => {
+          await wrapper.vm.$nextTick()
+          expect(wrapper.find('.task-type-filter').exists()).toBeTruthy()
+        })
+      it('descriptors', async () => {
           expect(wrapper.find('.descriptor-filter').exists()).toBeFalsy()
           wrapper.setData({
             metadataDescriptorFilters: {
@@ -188,11 +182,9 @@ describe('BuildFilterModal', () => {
               ]
             }
           })
-          wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find('.descriptor-filter').exists()).toBeTruthy()
-            done()
-          })
-        }))
+          await wrapper.vm.$nextTick()
+          expect(wrapper.find('.descriptor-filter').exists()).toBeTruthy()
+        })
     })
   })
 
diff --git a/tests/unit/modals/shothistorymodal.spec.js b/tests/unit/modals/shothistorymodal.spec.js
index 5fd0c7b2c4..bdd66a5744 100644
--- a/tests/unit/modals/shothistorymodal.spec.js
+++ b/tests/unit/modals/shothistorymodal.spec.js
@@ -12,7 +12,6 @@ import peopleStoreFixture from '../fixtures/person-store'
 describe('ShotHistoryModal', () => {
   let store, shotStore
   let wrapper
-  let getters
 
   beforeEach(() => {
     shotStore = {
@@ -51,7 +50,6 @@ describe('ShotHistoryModal', () => {
 
     wrapper = shallowMount(ShotHistoryModal, {
       store,
-      getters,
       i18n,
       global: {
         mocks: {
@@ -72,16 +70,14 @@ describe('ShotHistoryModal', () => {
       expect(tableInfo.props().isLoading).toBe(false)
       expect(modal.findAll('.shot-version')).toHaveLength(0)
     })
-    it('spinner on loading', () => new Promise(done => {
+    it('spinner on loading', async () => {
       wrapper.setData({ isLoading: true })
-      nextTick(() => {
-        const modal = wrapper.findComponent(ShotHistoryModal)
-        const tableInfo = wrapper.findComponent(TableInfo)
-        expect(tableInfo.props().isLoading).toBe(true)
-        expect(modal.findAll('.shot-version')).toHaveLength(0)
-        done()
-      })
-    }))
+      await nextTick()
+      const modal = wrapper.findComponent(ShotHistoryModal)
+      const tableInfo = wrapper.findComponent(TableInfo)
+      expect(tableInfo.props().isLoading).toBe(true)
+      expect(modal.findAll('.shot-version')).toHaveLength(0)
+    })
     it('data loaded', async () => {
       await wrapper.vm.loadData()
       const modal = wrapper.findComponent(ShotHistoryModal)
diff --git a/tests/unit/store/productions.spec.js b/tests/unit/store/productions.spec.js
index a4b84cdddd..04cdae764e 100644
--- a/tests/unit/store/productions.spec.js
+++ b/tests/unit/store/productions.spec.js
@@ -310,14 +310,14 @@ describe('Productions store', () => {
         }))
       }
       let mockCommit = vi.fn()
-      productionApi.getProduction = vi.fn(productionId => Promise.resolve({ id: '1' }))
+      productionApi.getProduction = vi.fn(() => Promise.resolve({ id: '1' }))
       await store.actions.loadProduction({ commit: mockCommit, state }, 'production-id')
       expect(productionApi.getProduction).toBeCalledTimes(1)
       expect(mockCommit).toBeCalledTimes(1)
       expect(mockCommit).toHaveBeenNthCalledWith(1, UPDATE_PRODUCTION, { id: '1' })
 
       mockCommit = vi.fn()
-      productionApi.getProduction = vi.fn(productionId => Promise.resolve({ id: '5' }))
+      productionApi.getProduction = vi.fn(() => Promise.resolve({ id: '5' }))
       await store.actions.loadProduction({ commit: mockCommit, state }, 'production-id')
       expect(productionApi.getProduction).toBeCalledTimes(1)
       expect(mockCommit).toBeCalledTimes(1)
@@ -325,7 +325,7 @@ describe('Productions store', () => {
 
       /*
       mockCommit = vi.fn()
-      productionApi.getProduction = vi.fn(productionId => Promise.reject(new Error('error')))
+      productionApi.getProduction = vi.fn(() => Promise.reject(new Error('error')))
       await store.actions.loadProduction({ commit: mockCommit, state }, 'production-id')
       expect(productionApi.getProduction).toBeCalledTimes(1)
       expect(mockCommit).toBeCalledTimes(0)
@@ -334,17 +334,17 @@ describe('Productions store', () => {
 
     test('newProduction', async () => {
       let mockCommit = vi.fn()
-      productionApi.newProduction = vi.fn(productionId => Promise.resolve({ id: '1' }))
+      productionApi.newProduction = vi.fn(() => Promise.resolve({ id: '1' }))
       await store.actions.newProduction({ commit: mockCommit, state: null }, 'production-id')
       expect(productionApi.newProduction).toBeCalledTimes(1)
       expect(mockCommit).toBeCalledTimes(1)
       expect(mockCommit).toHaveBeenNthCalledWith(1, ADD_PRODUCTION, { id: '1' })
 
       mockCommit = vi.fn()
-      productionApi.newProduction = vi.fn(productionId => Promise.reject(new Error('error')))
+      productionApi.newProduction = vi.fn(() => Promise.reject(new Error('error')))
       try {
         await store.actions.newProduction({ commit: mockCommit, state: null }, 'production-id')
-      } catch (e) {
+      } catch {
         expect(productionApi.newProduction).toBeCalledTimes(1)
         expect(mockCommit).toBeCalledTimes(0)
       }
@@ -352,17 +352,17 @@ describe('Productions store', () => {
 
     test('editProduction', async () => {
       let mockCommit = vi.fn()
-      productionApi.updateProduction = vi.fn(productionId => Promise.resolve({ id: '1' }))
+      productionApi.updateProduction = vi.fn(() => Promise.resolve({ id: '1' }))
       await store.actions.editProduction({ commit: mockCommit, state: null }, 'production-id')
       expect(productionApi.updateProduction).toBeCalledTimes(1)
       expect(mockCommit).toBeCalledTimes(1)
       expect(mockCommit).toHaveBeenNthCalledWith(1, UPDATE_PRODUCTION, { id: '1' })
 
       mockCommit = vi.fn()
-      productionApi.updateProduction = vi.fn(productionId => Promise.reject(new Error('error')))
+      productionApi.updateProduction = vi.fn(() => Promise.reject(new Error('error')))
       try {
         await store.actions.editProduction({ commit: mockCommit, state: null }, 'production-id')
-      } catch (e) {
+      } catch {
         expect(productionApi.updateProduction).toBeCalledTimes(1)
         expect(mockCommit).toBeCalledTimes(0)
       }
@@ -370,17 +370,17 @@ describe('Productions store', () => {
 
     test('deleteProduction', async () => {
       let mockCommit = vi.fn()
-      productionApi.deleteProduction = vi.fn(productionId => Promise.resolve({ id: '1' }))
+      productionApi.deleteProduction = vi.fn(() => Promise.resolve({ id: '1' }))
       await store.actions.deleteProduction({ commit: mockCommit, state: null }, 'production-id')
       expect(productionApi.deleteProduction).toBeCalledTimes(1)
       expect(mockCommit).toBeCalledTimes(1)
       expect(mockCommit).toHaveBeenNthCalledWith(1, REMOVE_PRODUCTION, 'production-id')
 
       mockCommit = vi.fn()
-      productionApi.deleteProduction = vi.fn(productionId => Promise.reject(new Error('error')))
+      productionApi.deleteProduction = vi.fn(() => Promise.reject(new Error('error')))
       try {
         await store.actions.deleteProduction({ commit: mockCommit, state: null }, 'production-id')
-      } catch (e) {
+      } catch {
         expect(productionApi.deleteProduction).toBeCalledTimes(1)
         expect(mockCommit).toBeCalledTimes(0)
       }
@@ -437,7 +437,7 @@ describe('Productions store', () => {
       productionApi.postAvatar = vi.fn(() => Promise.reject())
       try {
         await store.actions.uploadProductionAvatar({ commit: mockCommit, state }, 'production-id')
-      } catch (e) {
+      } catch {
         expect(productionApi.postAvatar).toBeCalledTimes(1)
         expect(mockCommit).toBeCalledTimes(0)
       }
@@ -578,7 +578,7 @@ describe('Productions store', () => {
       }
 
       const descriptor = { id: '456', field_name: 'descriptor name', project_id: '1' }
-      productionApi.getMetadataDescriptor = vi.fn((_, __) => Promise.resolve(descriptor))
+      productionApi.getMetadataDescriptor = vi.fn(() => Promise.resolve(descriptor))
       await store.actions.refreshMetadataDescriptor({ commit: mockCommit, state }, descriptor.id)
       expect(productionApi.getMetadataDescriptor).toBeCalledTimes(1)
       expect(productionApi.getMetadataDescriptor).toHaveBeenNthCalledWith(1, '123', descriptor.id)
@@ -587,7 +587,7 @@ describe('Productions store', () => {
 
       descriptor.id = '789'
       mockCommit = vi.fn()
-      productionApi.getMetadataDescriptor = vi.fn((_, __) => Promise.resolve(descriptor))
+      productionApi.getMetadataDescriptor = vi.fn(() => Promise.resolve(descriptor))
       await store.actions.refreshMetadataDescriptor({ commit: mockCommit, state }, descriptor.id)
       expect(productionApi.getMetadataDescriptor).toBeCalledTimes(1)
       expect(productionApi.getMetadataDescriptor).toHaveBeenNthCalledWith(1, '123', descriptor.id)
diff --git a/tests/unit/widgets/addcomment.spec.js b/tests/unit/widgets/addcomment.spec.js
new file mode 100644
index 0000000000..43f2d5a9c4
--- /dev/null
+++ b/tests/unit/widgets/addcomment.spec.js
@@ -0,0 +1,241 @@
+/* global FormData, Blob */
+import { reactive } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import i18n from '@/lib/i18n'
+import AddComment from '@/components/widgets/AddComment.vue'
+
+import './setup'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/tasks/:id', name: 'task', component: { template: '' } }]
+})
+
+const makeDraftComment = () =>
+  reactive({
+    attachments: [],
+    checklist: [],
+    link: null,
+    mode: 'status',
+    nextRevision: undefined,
+    showCommentArea: false,
+    showLinkField: false,
+    task_status_id: 'task-status-1',
+    text: ''
+  })
+
+const makeFormWithFile = name => {
+  const form = new FormData()
+  form.append('file', new Blob(), name || 'test.png')
+  return form
+}
+
+describe('AddComment', () => {
+  let store, wrapper, draftComment
+
+  const taskStatusList = [
+    {
+      id: 'task-status-1',
+      name: 'Todo',
+      short_name: 'TODO',
+      color: '#ECECEC',
+      is_artist_allowed: true,
+      is_client_allowed: true,
+      is_feedback_request: false
+    },
+    {
+      id: 'task-status-2',
+      name: 'WIP',
+      short_name: 'WIP',
+      color: '#22D160',
+      is_artist_allowed: true,
+      is_client_allowed: true,
+      is_feedback_request: false
+    }
+  ]
+
+  const task = {
+    id: 'task-1',
+    entity_name: 'Shot 01',
+    task_type_id: 'task-type-1',
+    task_status_id: 'task-status-1',
+    project_id: 'production-1'
+  }
+
+  beforeEach(async () => {
+    draftComment = makeDraftComment()
+
+    store = createStore({
+      strict: true,
+      getters: {
+        isDarkTheme: () => false,
+        isCurrentUserArtist: () => false,
+        isCurrentUserClient: () => false,
+        departmentMap: () => new Map(),
+        productionDepartmentIds: () => [],
+        productionMap: () =>
+          new Map([
+            [
+              'production-1',
+              {
+                id: 'production-1',
+                name: 'Test',
+                is_publish_default_for_artists: false
+              }
+            ]
+          ]),
+        taskStatusForCurrentUser: () => taskStatusList,
+        taskStatusMap: () =>
+          new Map(taskStatusList.map(s => [s.id, s])),
+        taskTypeMap: () =>
+          new Map([
+            ['task-type-1', { id: 'task-type-1', name: 'Animation' }]
+          ]),
+        uploadProgress: () => ({})
+      },
+      mutations: {
+        CLEAR_UPLOAD_PROGRESS: () => {}
+      }
+    })
+
+    await router.push('/tasks/task-1')
+    await router.isReady()
+
+    wrapper = shallowMount(AddComment, {
+      props: {
+        task,
+        taskStatus: taskStatusList,
+        team: [],
+        taskTypes: []
+      },
+      global: {
+        plugins: [i18n, store, router],
+        provide: {
+          draftComment
+        },
+        directives: {
+          focus: () => {},
+          autosize: () => {}
+        },
+        stubs: {
+          'at-ta': false,
+          EmojiButton: true,
+          AddAttachmentModal: true,
+          ConfirmModal: true
+        }
+      }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders the status tab as active by default', () => {
+    const tabs = wrapper.findAll('.tab-row span')
+    const statusTab = tabs[0]
+    expect(statusTab.classes()).toContain('active')
+  })
+
+  it('switches to publish mode on tab click', async () => {
+    const tabs = wrapper.findAll('.tab-row span')
+    await tabs[1].trigger('click')
+    expect(draftComment.mode).toBe('publish')
+  })
+
+  it('has the comment input area in status mode', () => {
+    // at-ta wraps the comment textarea. Verify the comment area exists.
+    const html = wrapper.html()
+    expect(
+      html.includes('at-ta') || html.includes('textarea')
+    ).toBe(true)
+  })
+
+  it('updates draft text via exposed API', () => {
+    draftComment.text = 'Great work!'
+    expect(draftComment.text).toBe('Great work!')
+  })
+
+  it('shows post button', () => {
+    const postButton = wrapper.find('.post-button')
+    expect(postButton.exists()).toBe(true)
+  })
+
+  it('emits add-comment when post button is clicked in status mode', async () => {
+    const postButton = wrapper.find('.post-button')
+    await postButton.trigger('click')
+    expect(wrapper.emitted('add-comment')).toBeTruthy()
+  })
+
+  describe('exposed methods', () => {
+    it('reset clears text, attachments, checklist and link', () => {
+      draftComment.text = 'some text'
+      draftComment.attachments = [new FormData()]
+      draftComment.checklist = [{ text: 'task', checked: false }]
+      draftComment.link = 'https://example.com'
+      wrapper.vm.reset()
+      expect(draftComment.text).toBe('')
+      expect(draftComment.attachments).toEqual([])
+      expect(draftComment.checklist).toEqual([])
+      expect(draftComment.link).toBeNull()
+      expect(draftComment.nextRevision).toBeUndefined()
+    })
+  })
+
+  describe('form validation', () => {
+    it('is always valid in status mode', () => {
+      expect(wrapper.vm.isValidForm).toBe(true)
+    })
+
+    it('is invalid in publish mode without preview forms', async () => {
+      draftComment.mode = 'publish'
+      await wrapper.setProps({ previewForms: [] })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.isValidForm).toBe(false)
+    })
+
+    it('is valid in publish mode with preview forms', async () => {
+      draftComment.mode = 'publish'
+      await wrapper.setProps({
+        previewForms: [makeFormWithFile('test.png')]
+      })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.isValidForm).toBe(true)
+    })
+  })
+
+  describe('mode switching', () => {
+    it('clears checklist and attachments when switching to publish', async () => {
+      draftComment.checklist = [{ text: 'task', checked: false }]
+      draftComment.attachments = [new FormData()]
+      draftComment.mode = 'publish'
+      await wrapper.vm.$nextTick()
+      expect(draftComment.checklist).toEqual([])
+      expect(draftComment.attachments).toEqual([])
+    })
+
+    it('emits clear-files when switching back to status mode', async () => {
+      draftComment.mode = 'publish'
+      await wrapper.vm.$nextTick()
+      draftComment.mode = 'status'
+      await wrapper.vm.$nextTick()
+      expect(wrapper.emitted('clear-files')).toBeTruthy()
+    })
+  })
+
+  describe('drag and drop', () => {
+    it('sets isDragging on dragover', async () => {
+      await wrapper.trigger('dragover')
+      expect(wrapper.classes()).toContain('is-dragging')
+    })
+
+    it('removes isDragging on dragleave', async () => {
+      await wrapper.trigger('dragover')
+      await wrapper.trigger('dragleave')
+      expect(wrapper.classes()).not.toContain('is-dragging')
+    })
+  })
+})
diff --git a/tests/unit/widgets/checklist.spec.js b/tests/unit/widgets/checklist.spec.js
new file mode 100644
index 0000000000..e6a57d056f
--- /dev/null
+++ b/tests/unit/widgets/checklist.spec.js
@@ -0,0 +1,167 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Checklist from '@/components/widgets/Checklist.vue'
+
+const makeChecklist = () => [
+  { text: 'Fix eyes', checked: false, frame: -1, revision: -1 },
+  { text: 'Adjust timing', checked: true, frame: 10, revision: 2 },
+  { text: 'Add blur', checked: false, frame: -1, revision: -1 }
+]
+
+const mountChecklist = (props = {}) => {
+  return shallowMount(Checklist, {
+    props: { checklist: makeChecklist(), ...props },
+    global: {
+      directives: { autosize: () => {} },
+      mocks: { $t: key => key }
+    }
+  })
+}
+
+describe('Checklist', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mountChecklist()
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders all checklist entries', () => {
+    const entries = wrapper.findAll('.checklist-entry')
+    expect(entries).toHaveLength(3)
+  })
+
+  it('filters out falsy entries', () => {
+    const w = shallowMount(Checklist, {
+      props: {
+        checklist: [
+          { text: 'Task 1', checked: false, frame: -1, revision: -1 },
+          null,
+          { text: 'Task 2', checked: false, frame: -1, revision: -1 }
+        ]
+      },
+      global: {
+        directives: { autosize: () => {} },
+        mocks: { $t: key => key }
+      }
+    })
+    expect(w.findAll('.checklist-entry')).toHaveLength(2)
+  })
+
+  it('renders checked icon for checked entries', () => {
+    const entries = wrapper.findAll('.checklist-entry')
+    expect(entries[1].classes()).toContain('checked')
+  })
+
+  it('renders unchecked icon for unchecked entries', () => {
+    const entries = wrapper.findAll('.checklist-entry')
+    expect(entries[0].classes()).not.toContain('checked')
+  })
+
+  it('toggles entry checked state on checkbox click when editable', async () => {
+    const checkboxes = wrapper.findAll('.checklist-checkbox')
+    await checkboxes[0].trigger('click')
+    expect(wrapper.emitted('emit-change')).toBeTruthy()
+  })
+
+  it('does not toggle checked when not editable', async () => {
+    const checklist = makeChecklist()
+    const w = shallowMount(Checklist, {
+      props: { checklist, isEditable: false },
+      global: {
+        directives: { autosize: () => {} },
+        mocks: { $t: key => key }
+      }
+    })
+    const originalChecked = checklist[0].checked
+    const checkboxes = w.findAll('.checklist-checkbox')
+    await checkboxes[0].trigger('click')
+    expect(checklist[0].checked).toBe(originalChecked)
+    expect(w.emitted('emit-change')).toBeFalsy()
+  })
+
+  it('applies disabled class when not editable', () => {
+    const w = mountChecklist({ isEditable: false })
+    const entries = w.findAll('.checklist-entry')
+    expect(entries[0].classes()).toContain('disabled')
+  })
+
+  it('renders textareas for each entry', () => {
+    const textareas = wrapper.findAll('.checklist-text')
+    expect(textareas).toHaveLength(3)
+    expect(textareas[0].element.value).toBe('Fix eyes')
+  })
+
+  it('emits add-item on Enter at last entry', async () => {
+    const textareas = wrapper.findAll('.checklist-text')
+    await textareas[2].trigger('keydown.enter')
+    expect(wrapper.emitted('add-item')).toBeTruthy()
+    expect(wrapper.emitted('add-item')[0][0]).toMatchObject({
+      text: '',
+      checked: false,
+      frame: -1,
+      revision: -1
+    })
+  })
+
+  it('emits insert-item on Enter at middle entry', async () => {
+    const textareas = wrapper.findAll('.checklist-text')
+    await textareas[0].trigger('keydown.enter')
+    expect(wrapper.emitted('insert-item')).toBeTruthy()
+    expect(wrapper.emitted('insert-item')[0][0].index).toBe(1)
+  })
+
+  it('emits remove-task on Backspace when entry text is empty', async () => {
+    const checklist = [
+      { text: '', checked: false, frame: -1, revision: -1 },
+      { text: 'Adjust timing', checked: true, frame: 10, revision: 2 }
+    ]
+    const w = shallowMount(Checklist, {
+      props: { checklist },
+      global: {
+        directives: { autosize: () => {} },
+        mocks: { $t: key => key }
+      }
+    })
+    const textareas = w.findAll('.checklist-text')
+    await textareas[0].trigger('keyup.backspace')
+    expect(w.emitted('remove-task')).toBeTruthy()
+    expect(w.emitted('remove-task')[0][0]).toStrictEqual(checklist[0])
+  })
+
+  it('does not emit remove-task on Backspace when entry has text', async () => {
+    const textareas = wrapper.findAll('.checklist-text')
+    await textareas[0].trigger('keyup.backspace')
+    expect(wrapper.emitted('remove-task')).toBeFalsy()
+  })
+
+  it('shows frame info when entry has a frame', () => {
+    const frames = wrapper.findAll('.frame')
+    expect(frames).toHaveLength(1)
+    expect(frames[0].text()).toContain('v2')
+  })
+
+  it('emits time-code-clicked when frame span is clicked', async () => {
+    const frame = wrapper.find('.frame')
+    await frame.trigger('click')
+    expect(wrapper.emitted('time-code-clicked')).toBeTruthy()
+    expect(wrapper.emitted('time-code-clicked')[0][0]).toMatchObject({
+      frame: 10,
+      revision: 2
+    })
+  })
+
+  it('does not show clock icon when isMoviePreview is false', () => {
+    const clocks = wrapper.findAll('.clock')
+    expect(clocks).toHaveLength(0)
+  })
+
+  it('shows clock icons when isMoviePreview is true', () => {
+    const w = mountChecklist({ isMoviePreview: true })
+    const clocks = w.findAll('.clock')
+    expect(clocks).toHaveLength(3)
+  })
+})
diff --git a/tests/unit/widgets/combobox.spec.js b/tests/unit/widgets/combobox.spec.js
new file mode 100644
index 0000000000..e4e9d5a3db
--- /dev/null
+++ b/tests/unit/widgets/combobox.spec.js
@@ -0,0 +1,108 @@
+import { shallowMount } from '@vue/test-utils'
+
+import i18n from '@/lib/i18n'
+import Combobox from '@/components/widgets/Combobox.vue'
+
+import './setup'
+
+describe('Combobox', () => {
+  const options = [
+    { label: 'Option A', value: 'a' },
+    { label: 'Option B', value: 'b' },
+    { label: 'Option C', value: 'c' }
+  ]
+
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(Combobox, {
+      props: { options, modelValue: 'a' },
+      global: { plugins: [i18n] }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders all options', () => {
+    const optionEls = wrapper.findAll('option')
+    expect(optionEls).toHaveLength(3)
+    expect(optionEls[0].text()).toBe('Option A')
+    expect(optionEls[1].text()).toBe('Option B')
+  })
+
+  it('marks the selected option', () => {
+    const optionEls = wrapper.findAll('option')
+    expect(optionEls[0].element.selected).toBe(true)
+    expect(optionEls[1].element.selected).toBe(false)
+  })
+
+  it('emits update:modelValue on change', async () => {
+    const select = wrapper.find('select')
+    select.element.value = 'Option B'
+    await select.trigger('change')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['b'])
+  })
+
+  it('emits enter event on keyup.enter', async () => {
+    const select = wrapper.find('select')
+    select.element.value = 'Option A'
+    await select.trigger('keyup.enter')
+    expect(wrapper.emitted('enter')).toBeTruthy()
+    expect(wrapper.emitted('enter')[0]).toEqual(['a'])
+  })
+
+  it('renders label when provided', async () => {
+    await wrapper.setProps({ label: 'My Label' })
+    expect(wrapper.find('label').text()).toBe('My Label')
+  })
+
+  it('hides label when empty', () => {
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  it('disables select when disabled prop is true', async () => {
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.find('select').element.disabled).toBe(true)
+  })
+
+  it('applies error class when error prop is true', async () => {
+    await wrapper.setProps({ error: true })
+    expect(wrapper.find('select').classes()).toContain('error')
+  })
+
+  it('applies thin class when thin prop is true', async () => {
+    await wrapper.setProps({ thin: true })
+    expect(wrapper.find('select').classes()).toContain('thin')
+  })
+
+  it('applies width style when width prop is set', async () => {
+    await wrapper.setProps({ width: 200 })
+    expect(wrapper.find('select').element.style.width).toBe('200px')
+  })
+
+  it('renders separator hr when option has separator flag', () => {
+    const wrapper2 = shallowMount(Combobox, {
+      props: {
+        options: [
+          { label: 'A', value: 'a', separator: true },
+          { label: 'B', value: 'b' }
+        ],
+        modelValue: 'a'
+      },
+      global: { plugins: [i18n] }
+    })
+    expect(wrapper2.findAll('hr')).toHaveLength(1)
+  })
+
+  it('adds field class with margin by default', () => {
+    expect(wrapper.element.classList.contains('field')).toBe(true)
+  })
+
+  it('removes field class when withMargin is false', async () => {
+    await wrapper.setProps({ withMargin: false })
+    expect(wrapper.element.classList.contains('field')).toBe(false)
+  })
+})
diff --git a/tests/unit/widgets/comboboxboolean.spec.js b/tests/unit/widgets/comboboxboolean.spec.js
new file mode 100644
index 0000000000..15ab26fb60
--- /dev/null
+++ b/tests/unit/widgets/comboboxboolean.spec.js
@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils'
+
+import i18n from '@/lib/i18n'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
+
+import './setup'
+
+describe('ComboboxBoolean', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(ComboboxBoolean, {
+      props: { modelValue: 'true' },
+      global: { plugins: [i18n] }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders a Combobox child component', () => {
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    expect(combobox.exists()).toBe(true)
+  })
+
+  it('passes boolean options (yes/no) to the inner combobox', () => {
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    const options = combobox.props('options')
+    expect(options).toHaveLength(2)
+    expect(options[0].value).toBe('true')
+    expect(options[1].value).toBe('false')
+  })
+
+  it('forwards modelValue to inner combobox', () => {
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    expect(combobox.props('modelValue')).toBe('true')
+  })
+
+  it('emits update:modelValue when inner combobox changes', async () => {
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    await combobox.vm.$emit('update:modelValue', 'false')
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['false'])
+  })
+
+  it('emits enter event when inner combobox emits enter', async () => {
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    await combobox.vm.$emit('enter', 'true')
+    expect(wrapper.emitted('enter')[0]).toEqual(['true'])
+  })
+
+  it('passes disabled prop to inner combobox', async () => {
+    await wrapper.setProps({ disabled: true })
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    expect(combobox.props('disabled')).toBe(true)
+  })
+
+  it('passes label prop to inner combobox', async () => {
+    await wrapper.setProps({ label: 'Active' })
+    const combobox = wrapper.findComponent({ name: 'Combobox' })
+    expect(combobox.props('label')).toBe('Active')
+  })
+})
diff --git a/tests/unit/widgets/comboboxnumber.spec.js b/tests/unit/widgets/comboboxnumber.spec.js
new file mode 100644
index 0000000000..9aad4812f5
--- /dev/null
+++ b/tests/unit/widgets/comboboxnumber.spec.js
@@ -0,0 +1,73 @@
+import { shallowMount } from '@vue/test-utils'
+
+import i18n from '@/lib/i18n'
+import ComboboxNumber from '@/components/widgets/ComboboxNumber.vue'
+
+import './setup'
+
+describe('ComboboxNumber', () => {
+  const options = [
+    { label: '1', value: 1 },
+    { label: '2', value: 2 },
+    { label: '5', value: 5 }
+  ]
+
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(ComboboxNumber, {
+      props: { options, modelValue: 1 },
+      global: { plugins: [i18n] }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders all options', () => {
+    const optionEls = wrapper.findAll('option')
+    expect(optionEls).toHaveLength(3)
+  })
+
+  it('emits update:modelValue as integer on change', async () => {
+    const select = wrapper.find('select')
+    select.element.value = '5'
+    await select.trigger('change')
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([5])
+  })
+
+  it('emits enter event as integer on keyup.enter', async () => {
+    const select = wrapper.find('select')
+    select.element.value = '2'
+    await select.trigger('keyup.enter')
+    expect(wrapper.emitted('enter')[0]).toEqual([2])
+  })
+
+  it('renders in field mode by default', () => {
+    expect(wrapper.find('.field').exists()).toBe(true)
+  })
+
+  it('renders in simple mode when isSimple is true', () => {
+    const w = shallowMount(ComboboxNumber, {
+      props: { options, modelValue: 1, isSimple: true },
+      global: { plugins: [i18n] }
+    })
+    expect(w.find('.field').exists()).toBe(false)
+    expect(w.find('.select').exists()).toBe(true)
+  })
+
+  it('renders label when provided', async () => {
+    await wrapper.setProps({ label: 'FPS' })
+    expect(wrapper.find('label').text()).toBe('FPS')
+  })
+
+  it('hides label when empty', () => {
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  it('disables select when disabled prop is true', async () => {
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.find('select').element.disabled).toBe(true)
+  })
+})
diff --git a/tests/unit/widgets/comboboxsimple.spec.js b/tests/unit/widgets/comboboxsimple.spec.js
new file mode 100644
index 0000000000..ab35ab0d42
--- /dev/null
+++ b/tests/unit/widgets/comboboxsimple.spec.js
@@ -0,0 +1,89 @@
+import { shallowMount } from '@vue/test-utils'
+
+import i18n from '@/lib/i18n'
+import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
+
+import './setup'
+
+describe('ComboboxSimple', () => {
+  const options = [
+    { label: 'Week', value: 'week' },
+    { label: 'Month', value: 'month' },
+    { label: 'Day', value: 'day' }
+  ]
+
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(ComboboxSimple, {
+      props: { options, modelValue: 'week' },
+      global: { plugins: [i18n] }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders all options as clickable spans', () => {
+    const choices = wrapper.findAll('.choice')
+    expect(choices).toHaveLength(3)
+    expect(choices[0].text()).toBe('Week')
+    expect(choices[1].text()).toBe('Month')
+  })
+
+  it('marks the matching option as selected on mount', () => {
+    const choices = wrapper.findAll('.choice')
+    expect(choices[0].classes()).toContain('selected')
+    expect(choices[1].classes()).not.toContain('selected')
+  })
+
+  it('emits update:modelValue when an option is clicked', async () => {
+    const choices = wrapper.findAll('.choice')
+    await choices[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['month'])
+  })
+
+  it('updates selected state after clicking an option', async () => {
+    const choices = wrapper.findAll('.choice')
+    await choices[2].trigger('click')
+    expect(choices[2].classes()).toContain('selected')
+  })
+
+  it('selects first option when modelValue does not match', async () => {
+    const w = shallowMount(ComboboxSimple, {
+      props: { options, modelValue: 'nonexistent' },
+      global: { plugins: [i18n] }
+    })
+    await w.vm.$nextTick()
+    const choices = w.findAll('.choice')
+    expect(choices[0].classes()).toContain('selected')
+  })
+
+  it('resets selection when options change', async () => {
+    const newOptions = [
+      { label: 'Year', value: 'year' },
+      { label: 'Quarter', value: 'quarter' }
+    ]
+    await wrapper.setProps({ options: newOptions })
+    const choices = wrapper.findAll('.choice')
+    expect(choices).toHaveLength(2)
+    expect(choices[0].classes()).toContain('selected')
+  })
+
+  it('updates selection when modelValue changes', async () => {
+    await wrapper.setProps({ modelValue: 'day' })
+    const choices = wrapper.findAll('.choice')
+    expect(choices[2].classes()).toContain('selected')
+  })
+
+  it('renders label when provided', async () => {
+    await wrapper.setProps({ label: 'Period' })
+    expect(wrapper.find('label').text()).toBe('Period')
+  })
+
+  it('hides label when empty', () => {
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+})
diff --git a/tests/unit/widgets/comboboxstatus.spec.js b/tests/unit/widgets/comboboxstatus.spec.js
new file mode 100644
index 0000000000..0e4a6e4366
--- /dev/null
+++ b/tests/unit/widgets/comboboxstatus.spec.js
@@ -0,0 +1,125 @@
+import { shallowMount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+
+import i18n from '@/lib/i18n'
+import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
+
+import './setup'
+
+describe('ComboboxStatus', () => {
+  let store, wrapper
+
+  const taskStatusList = [
+    {
+      id: 'status-1',
+      name: 'Todo',
+      short_name: 'TODO',
+      color: '#ECECEC'
+    },
+    {
+      id: 'status-2',
+      name: 'Work In Progress',
+      short_name: 'WIP',
+      color: '#22D160'
+    },
+    {
+      id: 'status-3',
+      name: 'Done',
+      short_name: 'DONE',
+      color: '#4ABB56'
+    }
+  ]
+
+  beforeEach(() => {
+    store = createStore({
+      strict: true,
+      getters: {
+        isDarkTheme: () => false,
+        productionMap: () => new Map(),
+        taskStatusMap: () =>
+          new Map(taskStatusList.map(s => [s.id, s]))
+      }
+    })
+
+    wrapper = shallowMount(ComboboxStatus, {
+      props: {
+        taskStatusList,
+        modelValue: 'status-2'
+      },
+      global: {
+        plugins: [i18n, store]
+      }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('displays current status short name', () => {
+    expect(wrapper.find('.tag').text()).toBe('WIP')
+  })
+
+  it('does not show the dropdown list initially', () => {
+    expect(wrapper.find('.select-input').exists()).toBe(false)
+  })
+
+  it('shows the dropdown list on click', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    expect(wrapper.find('.select-input').exists()).toBe(true)
+  })
+
+  it('renders all statuses in the dropdown', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const statusLines = wrapper.findAll('.status-line')
+    expect(statusLines).toHaveLength(3)
+  })
+
+  it('closes dropdown after selecting a status', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const statusLines = wrapper.findAll('.status-line')
+    await statusLines[2].trigger('click')
+    expect(wrapper.find('.select-input').exists()).toBe(false)
+  })
+
+  it('emits update:modelValue when a status is selected', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const statusLines = wrapper.findAll('.status-line')
+    await statusLines[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['status-3'])
+  })
+
+  it('shows placeholder when no modelValue and addPlaceholder is true', () => {
+    const w = shallowMount(ComboboxStatus, {
+      props: {
+        taskStatusList,
+        modelValue: '',
+        addPlaceholder: true
+      },
+      global: { plugins: [i18n, store] }
+    })
+    expect(w.find('.tag').exists()).toBe(true)
+  })
+
+  it('falls back to first status when modelValue is empty and no placeholder', () => {
+    const w = shallowMount(ComboboxStatus, {
+      props: {
+        taskStatusList,
+        modelValue: ''
+      },
+      global: { plugins: [i18n, store] }
+    })
+    expect(w.find('.tag').text()).toBe('TODO')
+  })
+
+  it('applies background color from status', () => {
+    const tag = wrapper.find('.tag')
+    expect(tag.element.style.background).toBeTruthy()
+  })
+
+  it('renders label when provided', async () => {
+    await wrapper.setProps({ label: 'Status' })
+    expect(wrapper.find('label').text()).toBe('Status')
+  })
+})
diff --git a/tests/unit/widgets/comboboxstyled.spec.js b/tests/unit/widgets/comboboxstyled.spec.js
new file mode 100644
index 0000000000..a6cbc60dd5
--- /dev/null
+++ b/tests/unit/widgets/comboboxstyled.spec.js
@@ -0,0 +1,123 @@
+import { shallowMount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import i18n from '@/lib/i18n'
+import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
+
+import './setup'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: []
+})
+
+describe('ComboboxStyled', () => {
+  const options = [
+    { label: 'Version 1', value: 'v1' },
+    { label: 'Version 2', value: 'v2' },
+    { label: 'Version 3', value: 'v3' }
+  ]
+
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(ComboboxStyled, {
+      props: { options, modelValue: 'v1' },
+      global: { plugins: [i18n, router] }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('displays the selected option label', () => {
+    expect(wrapper.find('.selected-line').text()).toBe('Version 1')
+  })
+
+  it('does not show the dropdown list initially', () => {
+    expect(wrapper.find('.select-input').exists()).toBe(false)
+  })
+
+  it('shows the dropdown list on click', async () => {
+    await wrapper.find('.combo').trigger('click')
+    expect(wrapper.find('.select-input').exists()).toBe(true)
+  })
+
+  it('renders all options in the dropdown', async () => {
+    await wrapper.find('.combo').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    expect(optionLines).toHaveLength(3)
+  })
+
+  it('hides dropdown after clicking the combo again', async () => {
+    await wrapper.find('.combo').trigger('click')
+    expect(wrapper.find('.select-input').exists()).toBe(true)
+    await wrapper.find('.combo').trigger('click')
+    expect(wrapper.find('.select-input').exists()).toBe(false)
+  })
+
+  it('emits update:modelValue and change when an option is selected', async () => {
+    await wrapper.find('.combo').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    await optionLines[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['v2'])
+    expect(wrapper.emitted('change')[0]).toEqual(['v2'])
+  })
+
+  it('updates selected option when modelValue changes', async () => {
+    await wrapper.setProps({ modelValue: 'v3' })
+    expect(wrapper.find('.selected-line').text()).toBe('Version 3')
+  })
+
+  it('selects first option when modelValue does not match', () => {
+    const w = shallowMount(ComboboxStyled, {
+      props: { options, modelValue: 'nonexistent' },
+      global: { plugins: [i18n, router] }
+    })
+    expect(w.find('.selected-line').text()).toBe('Version 1')
+  })
+
+  it('reverses options when isReversed is true', async () => {
+    await wrapper.setProps({ isReversed: true })
+    await wrapper.find('.combo').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    expect(optionLines[0].text().trim()).toBe('Version 3')
+    expect(optionLines[2].text().trim()).toBe('Version 1')
+  })
+
+  it('keeps order when isReversed and keepOrder are both true', async () => {
+    await wrapper.setProps({ isReversed: true, keepOrder: true })
+    await wrapper.find('.combo').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    expect(optionLines[0].text().trim()).toBe('Version 1')
+  })
+
+  it('hides selected-line in compact mode', async () => {
+    await wrapper.setProps({ isCompact: true })
+    expect(wrapper.find('.selected-line').exists()).toBe(false)
+  })
+
+  it('renders label when provided', async () => {
+    await wrapper.setProps({ label: 'Revision' })
+    expect(wrapper.find('label').text()).toBe('Revision')
+  })
+
+  it('applies disabled attribute', async () => {
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.element.getAttribute('disabled')).not.toBeNull()
+  })
+
+  it('shows validation status indicator for validated options', async () => {
+    const validatedOptions = [
+      { label: 'V1', value: 'v1', validation_status: 'validated' }
+    ]
+    await wrapper.setProps({ options: validatedOptions, modelValue: 'v1' })
+    expect(wrapper.find('.preview-status').exists()).toBe(true)
+  })
+
+  it('shows c-mask when dropdown is open', async () => {
+    await wrapper.find('.combo').trigger('click')
+    expect(wrapper.find('.c-mask.is-active').exists()).toBe(true)
+  })
+})
diff --git a/tests/unit/widgets/comboboxtag.spec.js b/tests/unit/widgets/comboboxtag.spec.js
new file mode 100644
index 0000000000..5110068d14
--- /dev/null
+++ b/tests/unit/widgets/comboboxtag.spec.js
@@ -0,0 +1,114 @@
+import { shallowMount } from '@vue/test-utils'
+
+import i18n from '@/lib/i18n'
+import ComboboxTag from '@/components/widgets/ComboboxTag.vue'
+
+import './setup'
+
+describe('ComboboxTag', () => {
+  const options = [
+    { id: '1', label: 'Banana', value: 'banana' },
+    { id: '2', label: 'Apple', value: 'apple' },
+    { id: '3', label: 'Cherry', value: 'cherry' }
+  ]
+
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(ComboboxTag, {
+      props: { options, modelValue: 'apple,cherry' },
+      global: { plugins: [i18n] }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('displays selected values as comma-separated sorted text', () => {
+    const selectedLine = wrapper.find('.selected-line')
+    expect(selectedLine.text()).toBe('apple, cherry')
+  })
+
+  it('does not show the dropdown initially', () => {
+    expect(wrapper.find('.select-input').exists()).toBe(false)
+  })
+
+  it('shows the dropdown on click', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    expect(wrapper.find('.select-input').exists()).toBe(true)
+  })
+
+  it('renders checkboxes for all options', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(3)
+  })
+
+  it('checks boxes matching selected values', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    const checked = checkboxes.filter(cb => cb.element.checked)
+    expect(checked).toHaveLength(2)
+  })
+
+  it('emits update:modelValue when an unchecked option is clicked', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    // options are sorted by value: apple, banana, cherry
+    const bananaOption = optionLines.find(
+      o => o.text().trim().includes('Banana')
+    )
+    await bananaOption.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    const emittedValue = wrapper.emitted('update:modelValue')[0][0]
+    expect(emittedValue).toContain('banana')
+    expect(emittedValue).toContain('apple')
+    expect(emittedValue).toContain('cherry')
+  })
+
+  it('emits update:modelValue removing a checked option on click', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    const appleOption = optionLines.find(
+      o => o.text().trim().includes('Apple')
+    )
+    await appleOption.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    const emittedValue = wrapper.emitted('update:modelValue')[0][0]
+    expect(emittedValue).not.toContain('apple')
+    expect(emittedValue).toContain('cherry')
+  })
+
+  it('also emits change event on selection', async () => {
+    await wrapper.find('.flexrow').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    await optionLines[0].trigger('click')
+    expect(wrapper.emitted('change')).toBeTruthy()
+  })
+
+  it('does not select when disabled', async () => {
+    await wrapper.setProps({ disabled: true })
+    await wrapper.find('.flexrow').trigger('click')
+    const optionLines = wrapper.findAll('.option-line')
+    await optionLines[0].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('renders label when provided', async () => {
+    await wrapper.setProps({ label: 'Tags' })
+    expect(wrapper.find('label').text()).toBe('Tags')
+  })
+
+  it('hides label when empty', () => {
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  it('shows empty text when no values selected', () => {
+    const w = shallowMount(ComboboxTag, {
+      props: { options, modelValue: '' },
+      global: { plugins: [i18n] }
+    })
+    expect(w.find('.selected-line').text()).toBe('')
+  })
+})
diff --git a/tests/unit/widgets/searchfield.spec.js b/tests/unit/widgets/searchfield.spec.js
new file mode 100644
index 0000000000..1ca5d1712d
--- /dev/null
+++ b/tests/unit/widgets/searchfield.spec.js
@@ -0,0 +1,120 @@
+import { shallowMount } from '@vue/test-utils'
+
+import SearchField from '@/components/widgets/SearchField.vue'
+
+describe('SearchField', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(SearchField, {
+      props: {},
+      global: {
+        directives: {
+          focus: () => {}
+        }
+      }
+    })
+  })
+
+  it('mounts successfully', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders a search input', () => {
+    expect(wrapper.find('.search-input').exists()).toBe(true)
+  })
+
+  it('emits change event on input', async () => {
+    const input = wrapper.find('.search-input')
+    await input.setValue('hello')
+    await input.trigger('input')
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')[0]).toEqual(['hello'])
+  })
+
+  it('emits enter event on keyup.enter', async () => {
+    const input = wrapper.find('.search-input')
+    await input.setValue('search term')
+    await input.trigger('keyup.enter')
+    expect(wrapper.emitted('enter')).toBeTruthy()
+    expect(wrapper.emitted('enter')[0]).toEqual(['search term'])
+  })
+
+  it('clears search and emits change on clear click', async () => {
+    const input = wrapper.find('.search-input')
+    await input.setValue('some text')
+    const clearButton = wrapper.find('.erase-search .tag')
+    await clearButton.trigger('click')
+    expect(wrapper.vm.getValue()).toBe('')
+    expect(wrapper.emitted('change').pop()).toEqual([''])
+  })
+
+  it('does not show save button by default', () => {
+    expect(wrapper.find('.save-search').exists()).toBe(false)
+  })
+
+  it('shows save button when canSave is true', async () => {
+    await wrapper.setProps({ canSave: true })
+    expect(wrapper.find('.save-search').exists()).toBe(true)
+  })
+
+  it('emits save event when save button is clicked with text', async () => {
+    await wrapper.setProps({ canSave: true })
+    const input = wrapper.find('.search-input')
+    await input.setValue('my query')
+    const saveBtn = wrapper.find('.save-button')
+    await saveBtn.trigger('click')
+    expect(wrapper.emitted('save')).toBeTruthy()
+    expect(wrapper.emitted('save')[0]).toEqual(['my query'])
+  })
+
+  it('does not emit save when search is empty', async () => {
+    await wrapper.setProps({ canSave: true })
+    const saveBtn = wrapper.find('.save-button')
+    await saveBtn.trigger('click')
+    expect(wrapper.emitted('save')).toBeFalsy()
+  })
+
+  it('renders placeholder', async () => {
+    await wrapper.setProps({ placeholder: 'Search...' })
+    expect(wrapper.find('.search-input').attributes('placeholder')).toBe(
+      'Search...'
+    )
+  })
+
+  describe('exposed methods', () => {
+    it('getValue returns current search text', async () => {
+      const input = wrapper.find('.search-input')
+      await input.setValue('test')
+      expect(wrapper.vm.getValue()).toBe('test')
+    })
+
+    it('setValue updates the search text', () => {
+      wrapper.vm.setValue('new value')
+      expect(wrapper.vm.getValue()).toBe('new value')
+    })
+
+    it('clearSearch resets search and emits change', async () => {
+      const input = wrapper.find('.search-input')
+      await input.setValue('something')
+      wrapper.vm.clearSearch()
+      expect(wrapper.vm.getValue()).toBe('')
+      expect(wrapper.emitted('change').pop()).toEqual([''])
+    })
+  })
+
+  it('adds focused class on focus', async () => {
+    const input = wrapper.find('.search-input')
+    await input.trigger('focus')
+    expect(wrapper.find('.search-field-wrapper').classes()).toContain('focused')
+  })
+
+  it('removes focused class on blur', async () => {
+    const input = wrapper.find('.search-input')
+    await input.trigger('focus')
+    await input.trigger('blur')
+    expect(wrapper.find('.search-field-wrapper').classes()).not.toContain(
+      'focused'
+    )
+  })
+})
diff --git a/tests/unit/widgets/setup.js b/tests/unit/widgets/setup.js
new file mode 100644
index 0000000000..f3b19b3312
--- /dev/null
+++ b/tests/unit/widgets/setup.js
@@ -0,0 +1,14 @@
+import { config } from '@vue/test-utils'
+
+// Components using useI18n() from the Composition API need the real vue-i18n
+// plugin. The global $t mock from unit.setup.js conflicts with it, so we
+// remove it for these tests and restore it afterwards.
+const savedMocks = { ...config.global.mocks }
+
+beforeAll(() => {
+  delete config.global.mocks.$t
+})
+
+afterAll(() => {
+  config.global.mocks = savedMocks
+})