diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3348807..b0963c1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -33,7 +33,7 @@ const logout = async () => {
 // Check for click events on the navbar burger icon
 const toggleBurger = () => {
   // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-  isBurgerActive.value = !isBurgerActive
+  isBurgerActive.value = !isBurgerActive.value
 }
 
 </script>
diff --git a/frontend/src/components/DateTimePicker.vue b/frontend/src/components/DateTimePicker.vue
new file mode 100644
index 0000000..be4df76
--- /dev/null
+++ b/frontend/src/components/DateTimePicker.vue
@@ -0,0 +1,678 @@
+<script lang="ts">
+export enum TabType {
+  Year,
+  Month,
+  Day,
+  Hour,
+  Minute
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {
+  MAX_DATETIME,
+  MIN_DATETIME,
+  MIN_YEAR,
+  MAX_YEAR,
+  MONTH_DAY_COUNT,
+  dayOfWeek,
+  isLeapYear
+} from '@/utils/datetime';
+
+const DIAL_PLATE_WIDTH: number = 200;
+const DIAL_PLATE_RADIUS: number = DIAL_PLATE_WIDTH / 2;
+const DIAL_PLATE_HOUR_INNER_PERCENT: number = 0.6;
+const DIAL_PLATE_HOUR_OUTTER_PERCENT: number = 0.8;
+const DIAL_PLATE_HOUR_DISTINGUISH_PERCENT: number = 0.7;
+const DIAL_PLATE_MINUTE_PERCENT: number = 0.8;
+const DIAL_PLATE_HOUR_RESOLUTION: number = Math.PI * 2 / 12;
+const DIAL_PLATE_MINUTE_RESOLUTION: number = Math.PI * 2 / 60;
+
+const MONTH_NAMES: string[] = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+const WEEK_NAMES: string[] = [
+  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
+];
+const NBSP: string = '\u00A0';
+
+const isVisible = ref(false);
+const currentTab = ref<TabType>(TabType.Year);
+const mode = ref<TabType>(TabType.Day);
+const svgFontScale = ref<number>(1);
+
+let enableHourDrag = false;
+let enableMinuteDrag = false;
+
+const internalDateTime = ref<Date>(new Date());
+const displayCacheDateTime = ref<Date>(new Date());
+
+const pickerContainerRef = ref<HTMLElement>();
+const hourSvgRef = ref<SVGSVGElement>();
+const minuteSvgRef = ref<SVGSVGElement>();
+
+// region: Exported API and Signals
+
+const emit = defineEmits<{
+  (e: 'confirm', date: Date): void
+  (e: 'cancel'): void
+}>();
+
+const clampDateTime = (d: Date): void => {
+  if (d < MIN_DATETIME) d.setTime(MIN_DATETIME.getTime());
+  if (d >= MAX_DATETIME) d.setTime(MAX_DATETIME.getTime());
+};
+
+const switchTab = (newTab: TabType): void => {
+  displayCacheDateTime.value = new Date(internalDateTime.value);
+  currentTab.value = newTab;
+};
+
+const modal = (initialDate: Date, _mode: TabType): void => {
+  mode.value = _mode;
+  const d = new Date(initialDate);
+  clampDateTime(d);
+  internalDateTime.value = new Date(d);
+  displayCacheDateTime.value = new Date(d);
+  isVisible.value = true;
+  switchTab(_mode);
+};
+
+const confirm = (): void => {
+  isVisible.value = false;
+  emit('confirm', new Date(internalDateTime.value));
+};
+
+const cancel = (): void => {
+  isVisible.value = false;
+  emit('cancel');
+};
+
+defineExpose({ modal });
+
+// endregion
+
+// region: Mutator helpers
+// Vue does not track in-place Date mutation, so every change clones, mutates,
+// clamps, and reassigns the ref to trigger reactivity.
+
+const updateDisplay = (mutator: (d: Date) => void): void => {
+  const d = new Date(displayCacheDateTime.value);
+  mutator(d);
+  clampDateTime(d);
+  displayCacheDateTime.value = d;
+};
+
+const updateInternal = (mutator: (d: Date) => void): void => {
+  const d = new Date(internalDateTime.value);
+  mutator(d);
+  clampDateTime(d);
+  internalDateTime.value = d;
+};
+
+// endregion
+
+// region: Computed views (replaces legacy imperative RefreshDisplay)
+
+const visibleTabs = computed<Set<TabType>>(() => {
+  const s = new Set<TabType>();
+  if (mode.value >= TabType.Year) s.add(TabType.Year);
+  if (mode.value >= TabType.Month) s.add(TabType.Month);
+  if (mode.value >= TabType.Day) s.add(TabType.Day);
+  if (mode.value >= TabType.Hour) s.add(TabType.Hour);
+  if (mode.value >= TabType.Minute) s.add(TabType.Minute);
+  return s;
+});
+
+const headerParts = computed(() => ({
+  year: internalDateTime.value.getFullYear(),
+  month: internalDateTime.value.getMonth() + 1,
+  day: internalDateTime.value.getDate(),
+  hour: internalDateTime.value.getHours(),
+  minute: internalDateTime.value.getMinutes(),
+}));
+
+const yearPageStart = computed<number>(() => {
+  const y = displayCacheDateTime.value.getFullYear();
+  return Math.floor((y - MIN_YEAR) / 12) * 12 + MIN_YEAR;
+});
+
+const yearCells = computed<{ value: number | undefined; picked: boolean }[]>(() => {
+  const start = yearPageStart.value;
+  const internalYear = internalDateTime.value.getFullYear();
+  const cells: { value: number | undefined; picked: boolean }[] = [];
+  for (let i = 0; i < 12; i++) {
+    const counter = start + i;
+    if (counter < MAX_YEAR) {
+      cells.push({ value: counter, picked: counter === internalYear });
+    } else {
+      cells.push({ value: undefined, picked: false });
+    }
+  }
+  return cells;
+});
+
+const yearRows = computed<{ value: number | undefined; picked: boolean }[][]>(() => {
+  const cells = yearCells.value;
+  const rows: { value: number | undefined; picked: boolean }[][] = [];
+  for (let i = 0; i < 3; i++) rows.push(cells.slice(i * 4, i * 4 + 4));
+  return rows;
+});
+
+const yearTitle = computed<string>(() => {
+  const start = yearPageStart.value;
+  return `${start} - ${Math.min(start + 12, MAX_YEAR)}`;
+});
+
+const pickedMonthIndex = computed<number>(() => {
+  if (internalDateTime.value.getFullYear() === displayCacheDateTime.value.getFullYear()) {
+    return internalDateTime.value.getMonth();
+  }
+  return -1;
+});
+
+const monthCells = computed<{ index: number; name: string; picked: boolean }[]>(() => {
+  const picked = pickedMonthIndex.value;
+  const cells: { index: number; name: string; picked: boolean }[] = [];
+  for (let i = 0; i < 12; i++) {
+    cells.push({ index: i, name: MONTH_NAMES[i]!, picked: i === picked });
+  }
+  return cells;
+});
+
+const monthRows = computed<{ index: number; name: string; picked: boolean }[][]>(() => {
+  const cells = monthCells.value;
+  const rows: { index: number; name: string; picked: boolean }[][] = [];
+  for (let i = 0; i < 3; i++) rows.push(cells.slice(i * 4, i * 4 + 4));
+  return rows;
+});
+
+const monthTitle = computed<number>(() => displayCacheDateTime.value.getFullYear());
+
+const dayGrid = computed<{ value: number | undefined; picked: boolean }[][]>(() => {
+  const y = displayCacheDateTime.value.getFullYear();
+  const m = displayCacheDateTime.value.getMonth() + 1;
+  const firstDow = dayOfWeek(y, m, 1);
+  const daysInMonth = MONTH_DAY_COUNT[m - 1]! + (m === 2 && isLeapYear(y) ? 1 : 0);
+  const internalDay = internalDateTime.value.getDate();
+  const rows: { value: number | undefined; picked: boolean }[][] = [];
+  let counter = -firstDow;
+  for (let i = 0; i < 6; i++) {
+    const row: { value: number | undefined; picked: boolean }[] = [];
+    for (let j = 0; j < 7; j++, counter++) {
+      if (counter < 0 || counter >= daysInMonth) {
+        row.push({ value: undefined, picked: false });
+      } else {
+        const dayNum = counter + 1;
+        row.push({ value: dayNum, picked: dayNum === internalDay });
+      }
+    }
+    rows.push(row);
+  }
+  return rows;
+});
+
+const dayTitle = computed<string>(() => {
+  const y = displayCacheDateTime.value.getFullYear();
+  const m = displayCacheDateTime.value.getMonth();
+  return `${y} - ${MONTH_NAMES[m]!}`;
+});
+
+const hourHand = computed(() => {
+  const h = displayCacheDateTime.value.getHours();
+  const angle = (3 - h) * DIAL_PLATE_HOUR_RESOLUTION;
+  const radius = DIAL_PLATE_RADIUS * (h < 12 ? DIAL_PLATE_HOUR_OUTTER_PERCENT : DIAL_PLATE_HOUR_INNER_PERCENT);
+  const x = Math.cos(angle) * radius + DIAL_PLATE_RADIUS;
+  const y = (-Math.sin(angle) * radius) + DIAL_PLATE_RADIUS;
+  return { x2: x, y2: y, cx: x, cy: y };
+});
+
+const minuteHand = computed(() => {
+  const mi = displayCacheDateTime.value.getMinutes();
+  const angle = (15 - mi) * DIAL_PLATE_MINUTE_RESOLUTION;
+  const radius = DIAL_PLATE_RADIUS * DIAL_PLATE_MINUTE_PERCENT;
+  const x = Math.cos(angle) * radius + DIAL_PLATE_RADIUS;
+  const y = (-Math.sin(angle) * radius) + DIAL_PLATE_RADIUS;
+  return { x2: x, y2: y, cx: x, cy: y };
+});
+
+// endregion
+
+// region: Navigation and click handlers
+
+const prevNextYear = (isPrev: boolean): void => {
+  updateDisplay((d) => d.setFullYear(d.getFullYear() + (isPrev ? -12 : 12)));
+};
+
+// NOTE: legacy PrevNextMonth actually shifts the YEAR (the month panel browses years).
+const prevNextMonth = (isPrev: boolean): void => {
+  updateDisplay((d) => d.setFullYear(d.getFullYear() + (isPrev ? -1 : 1)));
+};
+
+// NOTE: legacy PrevNextDay actually shifts the MONTH (the day panel browses months).
+const prevNextDay = (isPrev: boolean): void => {
+  updateDisplay((d) => d.setMonth(d.getMonth() + (isPrev ? -1 : 1)));
+};
+
+const clickYear = (value: number | undefined): void => {
+  if (value === undefined) return;
+  updateInternal((d) => d.setFullYear(value));
+  if (mode.value !== TabType.Year) switchTab(TabType.Month);
+};
+
+const clickMonth = (monthIndex: number): void => {
+  updateInternal((d) => {
+    d.setFullYear(displayCacheDateTime.value.getFullYear());
+    d.setMonth(monthIndex);
+  });
+  if (mode.value !== TabType.Month) switchTab(TabType.Day);
+};
+
+const clickDay = (day: number | undefined): void => {
+  if (day === undefined) return;
+  updateInternal((d) => {
+    d.setFullYear(displayCacheDateTime.value.getFullYear());
+    d.setMonth(displayCacheDateTime.value.getMonth());
+    d.setDate(day);
+  });
+  if (mode.value !== TabType.Day) switchTab(TabType.Hour);
+};
+
+// endregion
+
+// region: Dial drag interaction
+
+const getUniformedXY = (e: MouseEvent | TouchEvent, el: Element): { x: number; y: number } => {
+  const rect = el.getBoundingClientRect();
+  const halfWidth = rect.width / 2;
+  const halfHeight = rect.height / 2;
+  const halfSquare = Math.min(rect.width, rect.height) / 2;
+  let clientX = 0;
+  let clientY = 0;
+  const te = e as TouchEvent;
+  const me = e as MouseEvent;
+  if (te.targetTouches && te.targetTouches.length >= 1) {
+    clientX = te.targetTouches[0]!.clientX;
+    clientY = te.targetTouches[0]!.clientY;
+  } else {
+    clientX = me.clientX;
+    clientY = me.clientY;
+  }
+  const x = ((clientX - rect.left - halfWidth) / halfSquare) * DIAL_PLATE_RADIUS;
+  const y = -(((clientY - rect.top - halfHeight) / halfSquare) * DIAL_PLATE_RADIUS);
+  return { x, y };
+};
+
+const startDragHour = (): void => { enableHourDrag = true; };
+const draggingHour = (e: MouseEvent | TouchEvent): void => {
+  if (!enableHourDrag || !hourSvgRef.value) return;
+  const { x, y } = getUniformedXY(e, hourSvgRef.value);
+  const distance = Math.sqrt(x * x + y * y);
+  let angle = Math.acos(x / distance);
+  if (y < 0) angle = Math.PI * 2 - angle;
+  angle += DIAL_PLATE_HOUR_RESOLUTION / 2;
+  if (angle > Math.PI * 2) angle -= Math.PI * 2;
+  let number = Math.floor(angle / DIAL_PLATE_HOUR_RESOLUTION);
+  if (number >= 12) number = 11;
+  number = (15 - number) % 12;
+  if (distance < DIAL_PLATE_RADIUS * DIAL_PLATE_HOUR_DISTINGUISH_PERCENT) number += 12;
+  if (displayCacheDateTime.value.getHours() !== number) {
+    updateDisplay((d) => d.setHours(number));
+  }
+  e.preventDefault();
+};
+const stopDragHour = (): void => {
+  enableHourDrag = false;
+  updateInternal((d) => d.setHours(displayCacheDateTime.value.getHours()));
+  if (mode.value !== TabType.Hour) switchTab(TabType.Minute);
+};
+
+const startDragMinute = (): void => { enableMinuteDrag = true; };
+const draggingMinute = (e: MouseEvent | TouchEvent): void => {
+  if (!enableMinuteDrag || !minuteSvgRef.value) return;
+  const { x, y } = getUniformedXY(e, minuteSvgRef.value);
+  const distance = Math.sqrt(x * x + y * y);
+  let angle = Math.acos(x / distance);
+  if (y < 0) angle = Math.PI * 2 - angle;
+  angle += DIAL_PLATE_MINUTE_RESOLUTION / 2;
+  if (angle > Math.PI * 2) angle -= Math.PI * 2;
+  let number = Math.floor(angle / DIAL_PLATE_MINUTE_RESOLUTION);
+  if (number >= 60) number = 59;
+  number = (75 - number) % 60;
+  if (displayCacheDateTime.value.getMinutes() !== number) {
+    updateDisplay((d) => d.setMinutes(number));
+  }
+  e.preventDefault();
+};
+const stopDragMinute = (): void => {
+  enableMinuteDrag = false;
+  updateInternal((d) => d.setMinutes(displayCacheDateTime.value.getMinutes()));
+};
+
+// endregion
+
+// region: Lifecycle - SVG font-size scaling
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const w = entry.contentRect.width;
+      const h = entry.contentRect.height;
+      if (w > 0 && h > 0) svgFontScale.value = 200 / Math.min(w, h);
+    }
+  });
+  if (pickerContainerRef.value) resizeObserver.observe(pickerContainerRef.value);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+
+// endregion
+</script>
+
+<template>
+  <div class="modal" :class="{ 'is-active': isVisible }"
+       style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
+    <div class="modal-background"></div>
+    <div class="modal-card" style="height: 70%;">
+      <header class="modal-card-head pickerHeader">
+        <div v-show="visibleTabs.has(TabType.Year)" @click="switchTab(TabType.Year)">
+          <small>Year</small><span>{{ headerParts.year }}</span>
+        </div>
+        <div v-show="visibleTabs.has(TabType.Month)" @click="switchTab(TabType.Month)">
+          <small>Month</small><span>{{ headerParts.month }}</span>
+        </div>
+        <div v-show="visibleTabs.has(TabType.Day)" @click="switchTab(TabType.Day)">
+          <small>Day</small><span>{{ headerParts.day }}</span>
+        </div>
+        <div v-show="visibleTabs.has(TabType.Hour)" @click="switchTab(TabType.Hour)">
+          <small>Hour</small><span>{{ headerParts.hour }}</span>
+        </div>
+        <div v-show="visibleTabs.has(TabType.Minute)" @click="switchTab(TabType.Minute)">
+          <small>Minute</small><span>{{ headerParts.minute }}</span>
+        </div>
+      </header>
+      <div class="modal-card-body pickerContainer" ref="pickerContainerRef">
+        <div v-show="currentTab === TabType.Year">
+          <nav class="level is-mobile">
+            <div class="level-left">
+              <div class="level-item control">
+                <a class="button" @click="prevNextYear(true)">
+                  <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
+                </a>
+              </div>
+            </div>
+            <div class="level-item">{{ yearTitle }}</div>
+            <div class="level-right">
+              <div class="level-item control">
+                <a class="button" @click="prevNextYear(false)">
+                  <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
+                </a>
+              </div>
+            </div>
+          </nav>
+
+          <div class="perfectTable">
+            <div v-for="(row, ri) in yearRows" :key="ri">
+              <div v-for="(cell, ci) in row" :key="ci"
+                   :class="{ picked: cell.picked }"
+                   @click="clickYear(cell.value)">{{ cell.value ?? NBSP }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="currentTab === TabType.Month">
+          <nav class="level is-mobile">
+            <div class="level-left">
+              <div class="level-item control">
+                <a class="button" @click="prevNextMonth(true)">
+                  <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
+                </a>
+              </div>
+            </div>
+            <div class="level-item">{{ monthTitle }}</div>
+            <div class="level-right">
+              <div class="level-item control">
+                <a class="button" @click="prevNextMonth(false)">
+                  <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
+                </a>
+              </div>
+            </div>
+          </nav>
+
+          <div class="perfectTable">
+            <div v-for="(row, ri) in monthRows" :key="ri">
+              <div v-for="(cell, ci) in row" :key="ci"
+                   :class="{ picked: cell.picked }"
+                   @click="clickMonth(cell.index)">{{ cell.name }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="currentTab === TabType.Day">
+          <nav class="level is-mobile">
+            <div class="level-left">
+              <div class="level-item control">
+                <a class="button" @click="prevNextDay(true)">
+                  <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
+                </a>
+              </div>
+            </div>
+            <div class="level-item">{{ dayTitle }}</div>
+            <div class="level-right">
+              <div class="level-item control">
+                <a class="button" @click="prevNextDay(false)">
+                  <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
+                </a>
+              </div>
+            </div>
+          </nav>
+
+          <div class="perfectTable">
+            <div>
+              <div v-for="(name, wi) in WEEK_NAMES" :key="wi">{{ name }}</div>
+            </div>
+            <div v-for="(row, ri) in dayGrid" :key="ri">
+              <div v-for="(cell, ci) in row" :key="ci"
+                   :class="{ picked: cell.picked }"
+                   @click="clickDay(cell.value)">{{ cell.value ?? NBSP }}</div>
+            </div>
+          </div>
+        </div>
+
+        <svg v-show="currentTab === TabType.Hour" ref="hourSvgRef"
+             xmlns="http://www.w3.org/2000/svg" version="1.1"
+             preserveAspectRatio="xMidYMid" viewBox="0 0 200 200"
+             :style="{ fontSize: svgFontScale + 'em' }"
+             @mousedown="startDragHour" @mousemove="draggingHour" @mouseup="stopDragHour"
+             @touchstart="startDragHour" @touchmove="draggingHour" @touchend="stopDragHour">
+          <circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
+          <line x1="100" y1="100" :x2="hourHand.x2" :y2="hourHand.y2"></line>
+          <circle :cx="hourHand.cx" :cy="hourHand.cy" r="1em" type="symbol"></circle>
+
+          <text x="100.000000" y="20.000000">0</text>
+          <text x="140.000000" y="30.717968">1</text>
+          <text x="169.282032" y="60.000000">2</text>
+          <text x="180.000000" y="100.000000">3</text>
+          <text x="169.282032" y="140.000000">4</text>
+          <text x="140.000000" y="169.282032">5</text>
+          <text x="100.000000" y="180.000000">6</text>
+          <text x="60.000000" y="169.282032">7</text>
+          <text x="30.717968" y="140.000000">8</text>
+          <text x="20.000000" y="100.000000">9</text>
+          <text x="30.717968" y="60.000000">10</text>
+          <text x="60.000000" y="30.717968">11</text>
+          <text x="100.000000" y="40.000000">12</text>
+          <text x="130.000000" y="48.038476">13</text>
+          <text x="151.961524" y="70.000000">14</text>
+          <text x="160.000000" y="100.000000">15</text>
+          <text x="151.961524" y="130.000000">16</text>
+          <text x="130.000000" y="151.961524">17</text>
+          <text x="100.000000" y="160.000000">18</text>
+          <text x="70.000000" y="151.961524">19</text>
+          <text x="48.038476" y="130.000000">20</text>
+          <text x="40.000000" y="100.000000">21</text>
+          <text x="48.038476" y="70.000000">22</text>
+          <text x="70.000000" y="48.038476">23</text>
+        </svg>
+
+        <svg v-show="currentTab === TabType.Minute" ref="minuteSvgRef"
+             xmlns="http://www.w3.org/2000/svg" version="1.1"
+             preserveAspectRatio="xMidYMid" viewBox="0 0 200 200"
+             :style="{ fontSize: svgFontScale + 'em' }"
+             @mousedown="startDragMinute" @mousemove="draggingMinute" @mouseup="stopDragMinute"
+             @touchstart="startDragMinute" @touchmove="draggingMinute" @touchend="stopDragMinute">
+          <circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
+          <line x1="100" y1="100" :x2="minuteHand.x2" :y2="minuteHand.y2"></line>
+          <circle :cx="minuteHand.cx" :cy="minuteHand.cy" r="1em" type="symbol"></circle>
+
+          <text x="100.000000" y="20.000000">0</text>
+          <text x="140.000000" y="30.717968">5</text>
+          <text x="169.282032" y="60.000000">10</text>
+          <text x="180.000000" y="100.000000">15</text>
+          <text x="169.282032" y="140.000000">20</text>
+          <text x="140.000000" y="169.282032">25</text>
+          <text x="100.000000" y="180.000000">30</text>
+          <text x="60.000000" y="169.282032">35</text>
+          <text x="30.717968" y="140.000000">40</text>
+          <text x="20.000000" y="100.000000">45</text>
+          <text x="30.717968" y="60.000000">50</text>
+          <text x="60.000000" y="30.717968">55</text>
+        </svg>
+
+      </div>
+      <footer class="modal-card-foot">
+        <a class="button is-success" @click="confirm">
+          <span>OK</span>
+        </a>
+        <a class="button" @click="cancel">
+          <span>Cancel</span>
+        </a>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+div.perfectTable {
+  display: flex;
+  flex-flow: column;
+}
+
+/*
+div.perfectTable > div > div:nth-child(1) {
+    border-left: 1px solid black;
+}
+
+div.perfectTable > div:nth-child(1) > div {
+    border-top: 1px solid black;
+}
+*/
+
+div.perfectTable>div>div {
+  /*border-top: 0 solid black;
+    border-left: 0 solid black;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
+
+    padding: 0.75em;*/
+
+  flex-grow: 1;
+  flex-basis: 0;
+  flex-shrink: 0;
+
+  overflow: hidden;
+
+  display: flex;
+  justify-content: center;
+
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+div.perfectTable>div {
+  display: flex;
+  flex-flow: row;
+}
+
+div.perfectTable>div>div.picked {
+  background: hsl(171, 100%, 41%);
+  color: #fff;
+}
+
+
+
+
+
+
+div.pickerContainer {
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  justify-content: center;
+}
+
+div.pickerContainer>div {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+}
+
+div.pickerContainer>svg {
+  width: 100%;
+  height: 100%;
+}
+
+div.pickerContainer>svg>text {
+  dominant-baseline: middle;
+  text-anchor: middle;
+  user-select: none;
+  cursor: default;
+}
+
+div.pickerContainer>svg>circle[type=background] {
+  stroke-width: 0;
+  fill: #d0d0d0;
+}
+
+div.pickerContainer>svg>circle[type=symbol] {
+  stroke-width: 0;
+  fill: hsl(171, 100%, 41%);
+  /* $primary */
+}
+
+div.pickerContainer>svg>line {
+  stroke-width: 0.125em;
+  stroke: hsl(171, 100%, 41%);
+  /* $primary */
+}
+
+
+
+
+header.pickerHeader {
+  display: flex;
+  flex-flow: row;
+
+  flex-grow: 0;
+  flex-basis: 0;
+  flex-shrink: 0;
+
+  justify-content: space-between;
+}
+
+header.pickerHeader>div {
+  display: flex;
+  flex-flow: column;
+
+  flex-grow: 1;
+  flex-basis: 0;
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/components/MessageBox.vue b/frontend/src/components/MessageBox.vue
index 1a2d0dd..2a1e3fa 100644
--- a/frontend/src/components/MessageBox.vue
+++ b/frontend/src/components/MessageBox.vue
@@ -5,14 +5,24 @@ const isVisible = ref(false);
 const title = ref<string>("");
 const content = ref<string>("");
 
+const emit = defineEmits<{
+  (e: 'closed', isOk: boolean): void
+}>()
+
 const show = (_content: string, _title?: string) => {
   title.value = _title ?? "Notification";
   content.value = _content;
   isVisible.value = true;
 }
 
-const hide = () => {
+const close = () => {
   isVisible.value = false;
+  emit('closed', false);
+}
+
+const ok = () => {
+  isVisible.value = false;
+  emit('closed', true);
 }
 
 defineExpose({
@@ -26,13 +36,13 @@ defineExpose({
     <div class="modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title">{{ title }}</p>
-        <button class="delete" aria-label="close" @click="hide"></button>
+        <button class="delete" aria-label="close" @click="close"></button>
       </header>
       <div class="modal-card-body">
         <p>{{ content }}</p>
       </div>
       <footer class="modal-card-foot">
-        <button class="button is-success" @click="hide">OK</button>
+        <button class="button is-success" @click="ok">OK</button>
       </footer>
     </div>
   </div>
diff --git a/frontend/src/components/collection/OwnedItem.vue b/frontend/src/components/collection/OwnedItem.vue
index 364572e..bdff1a6 100644
--- a/frontend/src/components/collection/OwnedItem.vue
+++ b/frontend/src/components/collection/OwnedItem.vue
@@ -35,7 +35,7 @@ const deleteItem = () => {
 }
 
 const updateItem = () => {
-  let new_name = editingName.value;
+  const new_name = editingName.value;
   editingName.value = "";
   isEditing.value = false;
   emit('update', props.uuid, new_name);
diff --git a/frontend/src/utils/datetime.ts b/frontend/src/utils/datetime.ts
index a01aae1..2fee3c3 100644
--- a/frontend/src/utils/datetime.ts
+++ b/frontend/src/utils/datetime.ts
@@ -62,7 +62,7 @@ type LoopStopRule = InfinityStopRule | DatetimeStopRule | TimesStopRule;
 export function resolveLoopRules4UI(strl: string): [LoopRule, LoopStopRule] | undefined {
   if (strl == '') return undefined;
 
-  let sp = strl.split('-');
+  const sp = strl.split('-');
   if (sp.length != 2) return undefined;
   let loopRules: LoopRule | undefined = undefined;
   let loopStopRules: LoopStopRule | undefined = undefined;
@@ -130,35 +130,35 @@ export function resolveLoopRules2Event(
     Math.max(loopDateTimeEnd, eventDateTimeEnd)]
   ];
 
-  let sp = fullLoopRules.split('-');
+  const sp = fullLoopRules.split('-');
   if (sp.length != 2) return undefined;
-  let loopRules = sp[0]!;  // we don't need consider stop flag
-  let result: TimeRange[] = new Array();
+  const loopRules = sp[0]!;  // we don't need consider stop flag
+  const result: TimeRange[] = [];
 
   // compute offset and duration
-  let eventDateTime = new Date((eventDateTimeStart + timezoneOffset) * 60000);
+  const eventDateTime = new Date((eventDateTimeStart + timezoneOffset) * 60000);
   eventDateTime.setUTCHours(0, 0, 0, 0);
-  let eventOffset = eventDateTimeStart - (Math.floor(eventDateTime.getTime() / 60000) - timezoneOffset);
-  let eventDuration = eventDateTimeEnd - eventDateTimeStart;
+  const eventOffset = eventDateTimeStart - (Math.floor(eventDateTime.getTime() / 60000) - timezoneOffset);
+  const eventDuration = eventDateTimeEnd - eventDateTimeStart;
 
-  let detectDateTime = new Date(loopDateTimeStart * 60000);
+  const detectDateTime = new Date(loopDateTimeStart * 60000);
   detectDateTime.setUTCHours(0, 0, 0, 0);
-  let originalYear = eventDateTime.getUTCFullYear();
-  let originalMonth = eventDateTime.getUTCMonth() + 1;
-  let originalDay = eventDateTime.getUTCDate();
+  const originalYear = eventDateTime.getUTCFullYear();
+  const originalMonth = eventDateTime.getUTCMonth() + 1;
+  const originalDay = eventDateTime.getUTCDate();
 
   // compute event
   let match: RegExpExecArray | null;
   if ((match = PRECOMPILED_LOOP_RULES.year.exec(loopRules)) !== null) {
-    let isStrict = match[1]! == 'S';
-    let loopSpan = parseInt(match[2]!);
+    const isStrict = match[1]! == 'S';
+    const loopSpan = parseInt(match[2]!);
 
-    let yearCount = detectDateTime.getFullYear() - originalYear;
-    let isSpecial = (originalMonth == 2 && originalDay == 29);
-    let realLoopSpan = (isSpecial && isStrict) ? lcm(4, loopSpan) : loopSpan;
+    const yearCount = detectDateTime.getFullYear() - originalYear;
+    const isSpecial = (originalMonth == 2 && originalDay == 29);
+    const realLoopSpan = (isSpecial && isStrict) ? lcm(4, loopSpan) : loopSpan;
 
     //let fullSpanCount = Math.floor(yearCount / realLoopSpan);
-    let remainYear = yearCount % realLoopSpan;
+    const remainYear = yearCount % realLoopSpan;
     //detectDateTime.setUTCFullYear(fullSpanCount + detectDateTime.getUTCFullYear(), 1, 1);
     if (remainYear != 0)
       detectDateTime.setUTCFullYear(realLoopSpan - remainYear + detectDateTime.getUTCFullYear(), 1 - 1, 1);
@@ -189,22 +189,22 @@ export function resolveLoopRules2Event(
     }
 
   } else if ((match = PRECOMPILED_LOOP_RULES.month.exec(loopRules)) !== null) {
-    let isStrict = match[1]! == 'S';
-    let loopMethod = match[2]!;
-    let loopSpan = parseInt(match[3]!);
+    const isStrict = match[1]! == 'S';
+    const loopMethod = match[2]!;
+    const loopSpan = parseInt(match[3]!);
 
-    let monthsCountValue = monthsCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1) -
+    const monthsCountValue = monthsCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1) -
       monthsCount(originalYear, originalMonth);
 
     //let fullSpanCount = Math.floor(monthsCountValue / loopSpan);
-    let remainMonth = monthsCountValue % loopSpan;
+    const remainMonth = monthsCountValue % loopSpan;
     //detectDateTime.setUTCMonth(fullSpanCount * loopSpan + detectDateTime.getUTCMonth(), 1);
     detectDateTime.setUTCDate(1);
     if (remainMonth != 0)
       detectDateTime.setUTCMonth(loopSpan - remainMonth + detectDateTime.getUTCMonth(), 1);
 
     while (Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset <= loopDateTimeEnd) {
-      let data = getRemanagedDayInMonth(originalYear, originalMonth, originalDay, detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, isStrict);
+      const data = getRemanagedDayInMonth(originalYear, originalMonth, originalDay, detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, isStrict);
       let predictedDay: number | undefined = undefined;
       switch (loopMethod) {
         case 'A':
@@ -233,15 +233,15 @@ export function resolveLoopRules2Event(
 
 
   } else if ((match = PRECOMPILED_LOOP_RULES.week.exec(loopRules)) !== null) {
-    let loopSpan = parseInt(match[2]!);
-    let weekOption: boolean[] = [];
+    const loopSpan = parseInt(match[2]!);
+    const weekOption: boolean[] = [];
     let weekEventCount = 0
     for (let i = 0; i < 7; i++) {
       weekOption.push(match[1]![i] == 'T');
       if (match[1]![i] == 'T') weekEventCount++;
     }
 
-    let originalWeek = dayOfWeek(originalYear, originalMonth, originalDay);
+    const originalWeek = dayOfWeek(originalYear, originalMonth, originalDay);
 
     // try insert original event
     if (!weekOption[originalWeek]) {
@@ -250,11 +250,11 @@ export function resolveLoopRules2Event(
       );
     }
 
-    let daysCountValue = daysCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, detectDateTime.getDate()) -
+    const daysCountValue = daysCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, detectDateTime.getDate()) -
       daysCount(originalYear, originalMonth, originalDay);
     //let fullSpanCount = Math.floor(daysCountValue / (7 * loopSpan));
-    let remainFullSpanCount = Math.floor((daysCountValue % (7 * loopSpan)) / 7);
-    let remainDays = (daysCountValue % (7 * loopSpan)) % 7;
+    const remainFullSpanCount = Math.floor((daysCountValue % (7 * loopSpan)) / 7);
+    const remainDays = (daysCountValue % (7 * loopSpan)) % 7;
 
     //detectDateTime.setUTCDate((7 * loopSpan * fullSpanCount) + detectDateTime.getUTCDate());
     if (remainFullSpanCount != 0) {
@@ -276,12 +276,12 @@ export function resolveLoopRules2Event(
     }
 
   } else if ((match = PRECOMPILED_LOOP_RULES.day.exec(loopRules)) !== null) {
-    let loopSpan = parseInt(match[1]!);
+    const loopSpan = parseInt(match[1]!);
 
-    let daysCountValue = daysCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, detectDateTime.getUTCDate()) -
+    const daysCountValue = daysCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, detectDateTime.getUTCDate()) -
       daysCount(originalYear, originalMonth, originalDay);
     //let fullSpanCount = Math.floor(daysCountValue / loopSpan);
-    let remainDays = daysCountValue % loopSpan;
+    const remainDays = daysCountValue % loopSpan;
     //detectDateTime.setUTCDate(fullSpanCount * loopSpan + detectDateTime.getUTCDate());
     if (remainDays != 0)
       detectDateTime.setUTCDate(loopSpan - remainDays + detectDateTime.getUTCDate());
@@ -296,10 +296,10 @@ export function resolveLoopRules2Event(
   } else return undefined;
 
   // clamp item
-  let realResult: TimeRange[] = new Array();
-  for (let i of result) {
-    let start = i[0];
-    let end = i[1];
+  const realResult: TimeRange[] = [];
+  for (const i of result) {
+    const start = i[0];
+    const end = i[1];
     if (end > clampStartDateTime && start <= loopDateTimeEnd)
       realResult.push([Math.max(start, clampStartDateTime), Math.min(end, loopDateTimeEnd)]);
   }
@@ -319,11 +319,11 @@ export function resolveLoopRules2Event(
 export function resolveLoopRules4Text(strl: string, startDateTime: number, timezoneOffset: number): string {
   if (strl == '') return "";
 
-  let sp = strl.split('-');
+  const sp = strl.split('-');
   if (sp.length != 2) return "";
   let loopRules: string;
   let loopStopRules: string;
-  let datetimeInstance = new Date((startDateTime + timezoneOffset) * 60000)
+  const datetimeInstance = new Date((startDateTime + timezoneOffset) * 60000)
 
   let match: RegExpExecArray | null;
   if ((match = PRECOMPILED_LOOP_RULES.year.exec(sp[0]!)) !== null) {
@@ -340,7 +340,7 @@ export function resolveLoopRules4Text(strl: string, startDateTime: number, timez
     else
       loopRules = "宽松模式。";
 
-    let dayInMonth = getDayInMonth(
+    const dayInMonth = getDayInMonth(
       datetimeInstance.getUTCFullYear(),
       datetimeInstance.getUTCMonth() + 1,
       datetimeInstance.getUTCDate());
@@ -367,7 +367,7 @@ export function resolveLoopRules4Text(strl: string, startDateTime: number, timez
         break;
     }
   } else if ((match = PRECOMPILED_LOOP_RULES.week.exec(sp[0]!)) !== null) {
-    let weekOfDayCache = [];
+    const weekOfDayCache = [];
     for (let i = 0; i < 7; i++) {
       if (match[1]![i] == 'T')
         weekOfDayCache.push(universalGetDayOfWeek(i));
@@ -414,7 +414,7 @@ function leapYearCountEx(endYear: number, includeThis: boolean, baseYear: number
 }
 
 function daysCount(year: number, month: number, day: number): number {
-  let ly = leapYearCountEx(year, false, 1, true);
+  const ly = leapYearCountEx(year, false, 1, true);
   let days = 365 * (year - 1);
   days += ly;
 
@@ -432,7 +432,7 @@ function monthsCount(year: number, month: number): number {
   return (year - 1) * 12 + (month - 1);
 }
 
-function dayOfWeek(year: number, month: number, day: number): number {
+export function dayOfWeek(year: number, month: number, day: number): number {
   return daysCount(year, month, day) % 7;
 }
 
@@ -452,15 +452,15 @@ type DayInMonthInfo = [
 ];
 
 function getDayInMonth(year: number, month: number, day: number): DayInMonthInfo {
-  let days = MONTH_DAY_COUNT[month - 1]! + ((month == 2 && isLeapYear(year)) ? 1 : 0);
-  let firstDayOfWeek = dayOfWeek(year, month, 1);
-  let bilateralDayOfWeek = (firstDayOfWeek + day - 1) % 7;
+  const days = MONTH_DAY_COUNT[month - 1]! + ((month == 2 && isLeapYear(year)) ? 1 : 0);
+  const firstDayOfWeek = dayOfWeek(year, month, 1);
+  const bilateralDayOfWeek = (firstDayOfWeek + day - 1) % 7;
 
-  let dayForwards = day;
-  let dayBackwards = days - day + 1;
+  const dayForwards = day;
+  const dayBackwards = days - day + 1;
 
-  let weeksForward = Math.floor((dayForwards - 1) / 7) + 1;
-  let weeksBackwards = Math.floor((dayBackwards - 1) / 7) + 1;
+  const weeksForward = Math.floor((dayForwards - 1) / 7) + 1;
+  const weeksBackwards = Math.floor((dayBackwards - 1) / 7) + 1;
 
   return [dayForwards, dayBackwards, weeksForward, bilateralDayOfWeek, weeksBackwards, bilateralDayOfWeek];
 }
@@ -493,10 +493,10 @@ type RemanagedDayInMonth = [
  * @returns 
  */
 function getRemanagedDayInMonth(oldYear: number, oldMonth: number, oldDay: number, newYear: number, newMonth: number, isStrict: boolean): RemanagedDayInMonth {
-  let ddata = getDayInMonth(oldYear, oldMonth, oldDay);
-  let mdata = getMonthWeekStatistics(newYear, newMonth);
-  let days = MONTH_DAY_COUNT[newMonth - 1]! + ((newMonth == 2 && isLeapYear(newYear)) ? 1 : 0);
-  let firstDayOfWeek = dayOfWeek(newYear, newMonth, 1);
+  const ddata = getDayInMonth(oldYear, oldMonth, oldDay);
+  const mdata = getMonthWeekStatistics(newYear, newMonth);
+  const days = MONTH_DAY_COUNT[newMonth - 1]! + ((newMonth == 2 && isLeapYear(newYear)) ? 1 : 0);
+  const firstDayOfWeek = dayOfWeek(newYear, newMonth, 1);
   //let lastDayOfWeek = (firstDayOfWeek + days - 1) % 7;
 
   let methodA = undefined;
@@ -511,14 +511,14 @@ function getRemanagedDayInMonth(oldYear: number, oldMonth: number, oldDay: numbe
 
   let methodC = undefined;
   if (ddata[2] <= mdata[ddata[3]]! || !isStrict) {
-    let targetWeek = Math.min(ddata[2], mdata[ddata[3]]!);
+    const targetWeek = Math.min(ddata[2], mdata[ddata[3]]!);
     methodC = 1 + (targetWeek - 1) * 7 + ((ddata[3] + 7 - firstDayOfWeek) % 7);
   }
 
   let methodD = undefined;
   if (ddata[4] <= mdata[ddata[5]]! || !isStrict) {
     // convert to type c and calc
-    let targetWeek = mdata[ddata[5]]! - Math.min(ddata[4], mdata[ddata[5]]!) + 1;
+    const targetWeek = mdata[ddata[5]]! - Math.min(ddata[4], mdata[ddata[5]]!) + 1;
     methodD = 1 + (targetWeek - 1) * 7 + ((ddata[5] + 7 - firstDayOfWeek) % 7);
   }
 
@@ -543,10 +543,10 @@ type MonthWeekStatistics = [
 ];
 
 function getMonthWeekStatistics(year: number, month: number): MonthWeekStatistics {
-  let days = MONTH_DAY_COUNT[month - 1]! + ((month == 2 && isLeapYear(year)) ? 1 : 0);
-  let firstDayOfWeek = dayOfWeek(year, month, 1);
+  const days = MONTH_DAY_COUNT[month - 1]! + ((month == 2 && isLeapYear(year)) ? 1 : 0);
+  const firstDayOfWeek = dayOfWeek(year, month, 1);
 
-  let result: MonthWeekStatistics = [4, 4, 4, 4, 4, 4, 4];
+  const result: MonthWeekStatistics = [4, 4, 4, 4, 4, 4, 4];
   let remain = days % 7;
   let week = firstDayOfWeek;
   while (remain > 0) {
@@ -558,7 +558,7 @@ function getMonthWeekStatistics(year: number, month: number): MonthWeekStatistic
   return result;
 }
 
-function isLeapYear(year: number): boolean {
+export function isLeapYear(year: number): boolean {
   let isLeap = false;
   if (year % 4 == 0) isLeap = true;
   if (year % 100 == 0) isLeap = false;
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 7fcb5a9..a323c25 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -34,7 +34,7 @@ export function format(str: string, ...args: any[]): string {
  * @returns The zero-based weekday. 0 stands for Monday.
  */
 export function getWeekday(date: Date): number {
-  let day = date.getDay();
+  const day = date.getDay();
   if (day == 0) return 6;
   else return day - 1;
 }
diff --git a/frontend/src/views/Collection.vue b/frontend/src/views/Collection.vue
index 38f2dd9..6848f08 100644
--- a/frontend/src/views/Collection.vue
+++ b/frontend/src/views/Collection.vue
@@ -37,13 +37,13 @@ const refreshOwnedItem = async () => {
   ownedItems.value.clear();
 
   // Fetch data
-  let rv = await apiCollectionGetFullOwn(token.currentToken);
+  const rv = await apiCollectionGetFullOwn(token.currentToken);
   if (typeof rv === 'undefined') {
     console.error("fail to fetch owned collection");
     return;
   }
   // Add into dict for rendering
-  for (let item of rv) {
+  for (const item of rv) {
     ownedItems.value.set(item[0], item);
   }
 
@@ -53,20 +53,20 @@ const refreshOwnedItem = async () => {
 }
 
 const addOwnedItem = async () => {
-  let new_name = pendingOwnedItemName.value;
+  const new_name = pendingOwnedItemName.value;
   if (new_name === '') {
     return
   }
 
   // first add it
-  let rv = await apiCollectionAddOwn(token.currentToken, new_name);
+  const rv = await apiCollectionAddOwn(token.currentToken, new_name);
   if (typeof rv === 'undefined') {
     messagebox.value?.show("An add operation failed. It may caused by wrong arguments. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
     return;
   }
 
   // second get its detail
-  let rv2 = await apiCollectionGetDetailOwn(token.currentToken, rv);
+  const rv2 = await apiCollectionGetDetailOwn(token.currentToken, rv);
   if (typeof rv2 === 'undefined') {
     messagebox.value?.show("A get operation failed. It may caused by server internal error or your limited permission. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
     return;
@@ -77,7 +77,7 @@ const addOwnedItem = async () => {
 }
 
 const deleteOwnedItem = async (uuid: string) => {
-  let rv = await apiCollectionDeleteOwn(token.currentToken, uuid, ownedItems.value.get(uuid)![2]);
+  const rv = await apiCollectionDeleteOwn(token.currentToken, uuid, ownedItems.value.get(uuid)![2]);
   if (rv) {
     messagebox.value?.show("A delete operation failed. It may caused by no matched item. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
     return;
@@ -97,7 +97,7 @@ const deleteOwnedItem = async (uuid: string) => {
 const shareOwnedItem = async (uuid: string) => {
   // if there is no editing sharing target, set it.
   // otherwise override it or toggle it according to its old value.
-  let old_value = sharingItemUuid.value;
+  const old_value = sharingItemUuid.value;
   if (typeof old_value === 'string') {
     if (old_value === uuid) {
       sharingItemUuid.value = null;
@@ -112,15 +112,15 @@ const shareOwnedItem = async (uuid: string) => {
 }
 
 const updateOwnedItem = async (uuid: string, name: string) => {
-  let lastChange = ownedItems.value.get(uuid)![2];
-  let rv = await apiCollectionUpdateOwn(token.currentToken, uuid, name, lastChange);
+  const lastChange = ownedItems.value.get(uuid)![2];
+  const rv = await apiCollectionUpdateOwn(token.currentToken, uuid, name, lastChange);
   if (typeof rv === 'undefined') {
     messagebox.value?.show("An update operation failed. It may caused by wrong arguments or lost target. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
     return;
   }
 
   // return value is new lastChange, so we update it.
-  let row = ownedItems.value.get(uuid)!;
+  const row = ownedItems.value.get(uuid)!;
   row[1] = name;
   row[2] = rv;
 
@@ -140,8 +140,8 @@ const refreshSharingItem = async () => {
   }
 
   // fetch data
-  let uuid = sharingItemUuid.value!;
-  let rv = await apiCollectionGetSharing(token.currentToken, uuid);
+  const uuid = sharingItemUuid.value!;
+  const rv = await apiCollectionGetSharing(token.currentToken, uuid);
   if (typeof rv === 'undefined') {
     console.error(`fail to fetch sharing target for collection ${uuid}`);
     return;
@@ -152,15 +152,15 @@ const refreshSharingItem = async () => {
 }
 
 const addSharingItem = async () => {
-  let uuid = sharingItemUuid.value!;
-  let lastChange = ownedItems.value.get(uuid)![2];
-  let new_username = pendingSharingItemUsername.value;
+  const uuid = sharingItemUuid.value!;
+  const lastChange = ownedItems.value.get(uuid)![2];
+  const new_username = pendingSharingItemUsername.value;
   if (new_username === '') {
     return;
   }
 
   // order adding
-  let rv = await apiCollectionAddSharing(token.currentToken, uuid, new_username, lastChange);
+  const rv = await apiCollectionAddSharing(token.currentToken, uuid, new_username, lastChange);
   if (typeof rv === 'undefined') {
     messagebox.value?.show("An add operation failed. It may caused by wrong arguments. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
     return;
@@ -173,11 +173,11 @@ const addSharingItem = async () => {
 }
 
 const deleteSharingItem = async (username: string) => {
-  let uuid = sharingItemUuid.value!;
-  let lastChange = ownedItems.value.get(uuid)![2];
+  const uuid = sharingItemUuid.value!;
+  const lastChange = ownedItems.value.get(uuid)![2];
 
   // order deleting
-  let rv = await apiCollectionDeleteSharing(token.currentToken, uuid, username, lastChange);
+  const rv = await apiCollectionDeleteSharing(token.currentToken, uuid, username, lastChange);
   if (typeof rv === 'undefined') {
     messagebox.value?.show("A delete operation failed. It may caused by no matched item. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
     return;