feat: use module store

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/DaysView.vue

@@ -9,13 +9,16 @@
       </div>
       <v-spacer />
       <div class="view-selector">
-        <v-btn size="x-small" variant="text" @click="setDays(1)" :color="daysCount === 1 ? 'primary' : undefined">1D</v-btn>
-        <v-btn size="x-small" variant="text" @click="setDays(3)" :color="daysCount === 3 ? 'primary' : undefined">3D</v-btn>
-        <v-btn size="x-small" variant="text" @click="setDays(5)" :color="daysCount === 5 ? 'primary' : undefined">5D</v-btn>
-        <v-btn size="x-small" variant="text" @click="setDays(7)" :color="daysCount === 7 ? 'primary' : undefined">7D</v-btn>
-        <v-btn size="x-small" variant="text" @click="setDays(9)" :color="daysCount === 9 ? 'primary' : undefined">9D</v-btn>
-        <v-btn size="x-small" variant="text" @click="setDays(11)" :color="daysCount === 11 ? 'primary' : undefined">11D</v-btn>
-        <v-btn size="x-small" variant="text" @click="setDays(14)" :color="daysCount === 14 ? 'primary' : undefined">14D</v-btn>
+        <v-btn
+          v-for="span in DAYS_VIEW_SPANS"
+          :key="span"
+          size="x-small"
+          variant="text"
+          @click="setSpan(span)"
+          :color="selectedSpan === span ? 'primary' : undefined"
+        >
+          {{ span.toUpperCase() }}
+        </v-btn>
       </div>
     </div>
     <div class="days-grid">
@@ -80,12 +83,12 @@
               >
                 <template v-if="daysCount <= 3">
                   <div class="event-time">
-                    {{ entity.properties?.startsOn ? formatTime(new Date(entity.properties.startsOn)) : '' }} - {{ entity.properties?.endsOn ? formatTime(new Date(entity.properties.endsOn)) : '' }}
+                    {{ formatEventDateTime(getEventProperties(entity).startsOn) }} - {{ formatEventDateTime(getEventProperties(entity).endsOn) }}
                   </div>
-                  <div class="event-title">{{ entity.properties?.label || 'Untitled' }}</div>
+                  <div class="event-title">{{ getEventProperties(entity).label || 'Untitled' }}</div>
                 </template>
                 <template v-else>
-                  <div class="event-title-compact">{{ entity.properties?.label || 'Untitled' }}</div>
+                  <div class="event-title-compact">{{ getEventProperties(entity).label || 'Untitled' }}</div>
                 </template>
               </div>
             </div>
@@ -104,26 +107,49 @@ import {
   getTimedEventsForDate,
   type MultiDaySegment,
 } from '@/utils/calendarHelpers';
+import { DAYS_VIEW_SPANS, spanToDays, type DaysViewSpan } from '@/types/spans';
+import type { EntityObject } from '@ChronoManager/models/entity';
+import type { CollectionObject } from '@ChronoManager/models/collection';
+import { EventObject } from '@ChronoManager/models/event';
 
 const ALL_DAY_EVENT_HEIGHT = 24;
 
+type CalendarEntity = EntityObject;
+type CalendarCollection = CollectionObject;
+
 const props = defineProps<{
   currentDate: Date;
-  events: any[];
-  calendars: any[];
-  initialDays?: number;
+  events: CalendarEntity[];
+  calendars: CalendarCollection[];
+  initialSpan?: DaysViewSpan;
 }>();
 
-const daysCount = ref(props.initialDays ?? 7);
+const selectedSpan = ref<DaysViewSpan>(props.initialSpan ?? '7d');
+const daysCount = computed(() => spanToDays(selectedSpan.value));
 const localDate = ref(new Date(props.currentDate));
 
+const emit = defineEmits<{
+  'event-click': [event: CalendarEntity];
+  'event-hover': [data: { event: MouseEvent; entity: CalendarEntity }];
+  'event-hover-end': [];
+  'date-click': [date: Date];
+  'update:span': [span: DaysViewSpan];
+}>();
+
 // Watch for external date changes (e.g., from mini calendar)
 watch(() => props.currentDate, (newDate) => {
   localDate.value = new Date(newDate);
 });
 
-function setDays(count: number) {
-  daysCount.value = count;
+watch(() => props.initialSpan, (newSpan) => {
+  if (newSpan && newSpan !== selectedSpan.value) {
+    selectedSpan.value = newSpan;
+  }
+});
+
+function setSpan(span: DaysViewSpan) {
+  selectedSpan.value = span;
+  emit('update:span', span);
 }
 
 function previousPeriod() {
@@ -195,12 +221,17 @@ function isToday(date: Date): boolean {
   return date.toDateString() === today.toDateString();
 }
 
-function getTimedEvents(date: Date): any[] {
-  return getTimedEventsForDate(props.events, date);
+function getTimedEvents(date: Date): CalendarEntity[] {
+  return getTimedEventsForDate(props.events, date) as CalendarEntity[];
 }
 
-function getEventColor(entity: any): string {
-  if (entity.properties?.color) return entity.properties.color;
+function getEventProperties(entity: CalendarEntity): EventObject {
+  return entity.properties as EventObject;
+}
+
+function getEventColor(entity: CalendarEntity): string {
+  const event = getEventProperties(entity);
+  if (event.color) return event.color;
   const calendar = props.calendars.find(cal => cal.identifier === entity.collection);
   return calendar?.properties?.color || '#1976D2';
 }
@@ -214,12 +245,14 @@ function getAllDayEventStyle(segment: MultiDaySegment) {
   };
 }
 
-function getEventStyle(entity: any) {
-  if (!entity.properties?.startsOn || !entity.properties?.endsOn) {
+function getEventStyle(entity: CalendarEntity) {
+  const event = getEventProperties(entity);
+
+  if (!event.startsOn || !event.endsOn) {
     return { display: 'none' };
   }
-  const startTime = new Date(entity.properties.startsOn);
-  const endTime = new Date(entity.properties.endsOn);
+  const startTime = new Date(event.startsOn);
+  const endTime = new Date(event.endsOn);
   const start = startTime.getHours() * 60 + startTime.getMinutes();
   const duration = (endTime.getTime() - startTime.getTime()) / (1000 * 60);
   
@@ -240,17 +273,14 @@ function formatTime(date: Date): string {
   return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
 }
 
+function formatEventDateTime(value: string | null): string {
+  return value ? formatTime(new Date(value)) : '';
+}
+
 function formatWeekDay(date: Date): string {
   return date.toLocaleDateString('en-US', { weekday: 'short' });
 }
 
-const emit = defineEmits<{
-  'event-click': [event: any];
-  'event-hover': [data: { event: MouseEvent; entity: any }];
-  'event-hover-end': [];
-  'date-click': [date: Date];
-}>();
-
 function handleDayClick(event: MouseEvent, day: Date) {
   const target = event.currentTarget as HTMLElement;
   const rect = target.getBoundingClientRect();