support last reconciled time for account

src/components/desktop/DateTimeSelect.vue

@@ -3,6 +3,7 @@
         persistent-placeholder
         :readonly="readonly"
         :disabled="disabled"
+        :clearable="!emptyValue ? clearable : false"
         :label="label"
         :menu-props="{ contentClass: 'date-time-select-menu' }"
         v-model="dateTime"
@@ -107,13 +108,16 @@ import { setChildInputFocus } from '@/lib/ui/desktop.ts';
 const props = defineProps<{
     modelValue: number;
     timezoneUtcOffset: number;
+    emptyValue?: boolean;
     disabled?: boolean;
     readonly?: boolean;
+    clearable?: boolean;
     label?: string;
 }>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: number): void;
+    (e: 'clear:modelValue'): void;
     (e: 'error', message: string): void;
 }>();
 
@@ -154,7 +158,12 @@ const dateTime = computed<Date>({
     get: () => {
         return getLocalDatetimeFromSameDateTimeOfUnixTime(props.modelValue, props.timezoneUtcOffset);
     },
-    set: (value: Date) => {
+    set: (value: Date | null) => {
+        if (!value) {
+            emit('clear:modelValue');
+            return;
+        }
+
         const unixTime = getUnixTimeFromSameDateTimeOfLocalDatetime(value, props.timezoneUtcOffset);
 
         if (unixTime < 0) {
@@ -166,7 +175,7 @@ const dateTime = computed<Date>({
     }
 });
 
-const displayTime = computed<string>(() => formatDateTimeToLongDateTime(parseDateTimeFromUnixTimeWithTimezoneOffset(props.modelValue, props.timezoneUtcOffset)));
+const displayTime = computed<string>(() => props.emptyValue ? tt('None') : formatDateTimeToLongDateTime(parseDateTimeFromUnixTimeWithTimezoneOffset(props.modelValue, props.timezoneUtcOffset)));
 
 const hourItems = computed<TimePickerValue[]>(() => generateAllHours(1, isHourTwoDigits.value));
 const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(1, isMinuteTwoDigits.value));

src/components/mobile/DateTimeSelectionSheet.vue

@@ -4,7 +4,8 @@
         <f7-toolbar class="toolbar-with-swipe-handler">
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
+                <f7-link :text="tt('Clear')" @click="clear" v-if="clearable"></f7-link>
+                <f7-link :text="tt('Now')" @click="setCurrentTime" v-if="!clearable"></f7-link>
             </div>
             <div class="right">
                 <f7-link :icon-f7="mode === 'time' ? 'calendar' : 'clock'" @click="switchMode"></f7-link>
@@ -122,11 +123,13 @@ const props = defineProps<{
     modelValue: number;
     timezoneUtcOffset: number;
     initMode?: string;
+    clearable?: boolean;
     show: boolean;
 }>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: number): void;
+    (e: 'clear:modelValue'): void;
     (e: 'update:show', value: boolean): void;
 }>();
 
@@ -221,6 +224,11 @@ function setCurrentTime(): void {
     }
 }
 
+function clear(): void {
+    emit('clear:modelValue');
+    emit('update:show', false);
+}
+
 function confirm(): void {
     if (!dateTime.value) {
         return;