feat(nc-gui): show invalid date if endDate > startDate

packages/nc-gui/components/smartsheet/calendar/DayView.vue

@@ -228,7 +228,10 @@ const dropEvent = (event: DragEvent) => {
       </div>
     </div>
   </template>
-  <div v-else-if="!recordsAcrossAllRange" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">
+  <div
+    v-else-if="!recordsAcrossAllRange.length"
+    class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center"
+  >
     No Records in this day
   </div>
 </template>

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -168,6 +168,11 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
                   ? dayjs(record.row[calendarRange[0] ? calendarRange[0].fk_from_col.title : '']).format('DD-MM-YYYY HH:mm')
                   : dayjs(record.row[calendarRange[0] ? calendarRange[0].fk_from_col.title : '']).format('DD-MM-YYYY')
               "
+              :invalid="
+                dayjs(record.row[calendarRange[0] ? calendarRange[0].fk_from_col.title : '']).isAfter(
+                  dayjs(record.row[calendarRange[0] ? calendarRange[0].fk_to_col.title : '']),
+                )
+              "
               :name="record.row[displayField.title]"
               color="blue"
               @click="emit('expand-record', record)"

packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue

@@ -1,9 +1,10 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 interface Props {
   name: string
   date?: string
   color?: string
   showDate?: boolean
+  invalid?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -11,27 +12,38 @@ const props = withDefaults(defineProps<Props>(), {
   date: '',
   color: 'blue',
   showDate: true,
+  invalid: false,
 })
 </script>
 
 <template>
-  <div class="flex border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
-    <span
-      :class="{
-        'bg-maroon-500': props.color === 'maroon',
-        'bg-blue-500': props.color === 'blue',
-        'bg-green-500': props.color === 'green',
-        'bg-yellow-500': props.color === 'yellow',
-        'bg-pink-500': props.color === 'pink',
-        'bg-purple-500': props.color === 'purple',
-      }"
-      class="block h-10 w-1 rounded"
-    ></span>
-    <div class="flex flex-col gap-1 ml-3">
-      <span class="text-sm font-bold text-gray-700">{{ name }}</span>
-      <span v-if="showDate" class="text-xs text-gray-500">{{ date }}</span>
+  <div class="border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
+    <div class="flex items-center">
+      <span
+        :class="{
+          'bg-maroon-500': props.color === 'maroon',
+          'bg-blue-500': props.color === 'blue',
+          'bg-green-500': props.color === 'green',
+          'bg-yellow-500': props.color === 'yellow',
+          'bg-pink-500': props.color === 'pink',
+          'bg-purple-500': props.color === 'purple',
+        }"
+        class="block h-10 w-1 rounded"
+      ></span>
+      <div class="flex flex-col gap-1 ml-3">
+        <span class="text-sm font-bold text-gray-700">{{ name }}</span>
+        <span v-if="showDate" class="text-xs text-gray-500">{{ date }}</span>
+      </div>
+    </div>
+
+    <div v-if="invalid" class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
+      <component :is="iconMap.warning" class="text-yellow-500 h-4 w-4" />
+      <div class="flex flex-col gap-1">
+        <h1 class="text-gray-800 text-bold">Date mismatch</h1>
+        <p class="text-gray-500">Selected End date is before Start date.</p>
+      </div>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>