feat: Custom date picker (#9247)

* feat: Custom date picker

* chore: Calender footer

* chore: Minor fix

* chore: Reset date picker

* chore: Minor fix

* feat: Toggle button

* chore: Clean up

* chore: Use font inter

* chore: Cleanup and fix bugs

* fix: custom date range reset the calendar

* chore: fix logic bug

* feat: Add manual date range

* fix: styles in rtl

* chore: Helper specs

* chore: Clean up

* chore: Review fixes

* chore: remove magic strings

* chore: Add comments

* chore: Review fixes

* chore: Clean up

* chore: remove magic strings

* fix: Use outline instead of border

* chore: Minor style fix

* chore: disable pointer events for the disabled dates

* chore: Fix code climate

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { calendarWeeks } from '../helpers/DatePickerHelper';
+</script>
+
+<template>
+  <div class="max-w-md mx-auto grid grid-cols-7 gap-2">
+    <div
+      v-for="day in calendarWeeks"
+      :key="day.id"
+      class="flex items-center justify-center font-medium text-sm w-9 h-7 py-1.5 px-2"
+    >
+      {{ day.label }}
+    </div>
+  </div>
+</template>