improve idle indicator colors, fix typescript issues

Author: Onatcer

resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue

@@ -676,11 +676,11 @@ onActivated(() => {
 }
 
 .fullcalendar :deep(.activity-status-box.idle) {
-    background-color: rgba(239, 68, 68, 0.3) !important;
+    background-color: rgba(156, 163, 175, 0.1) !important;
 }
 
 .fullcalendar :deep(.activity-status-box.idle):hover {
-    background-color: rgba(239, 68, 68, 1) !important;
+    background-color: rgba(156, 163, 175, 0.5) !important;
 }
 
 .fullcalendar :deep(.activity-status-box.active) {

resources/js/packages/ui/src/FullCalendar/idleStatusPlugin.ts

@@ -1,4 +1,4 @@
-import { createPlugin, PluginDef } from '@fullcalendar/core';
+import { createPlugin, type PluginDef } from '@fullcalendar/core';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';
 
 export interface ActivityPeriod {
@@ -11,13 +11,6 @@ export interface ActivityStatusPluginOptions {
     activityPeriods?: ActivityPeriod[];
 }
 
-// Extend FullCalendar's options interface
-declare module '@fullcalendar/core' {
-    interface CalendarOptions {
-        activityPeriods?: ActivityPeriod[];
-    }
-}
-
 /**
  * Creates and manages a tooltip element for activity status boxes
  */
@@ -107,9 +100,6 @@ export function renderActivityStatusBoxes(
     // Create a single tooltip instance to be reused
     const tooltip = createTooltip();
 
-    // Get the calendar's current view to determine dates
-    const dateHeaders = calendarEl.querySelectorAll('.fc-col-header-cell');
-
     lanes.forEach((lane: Element, dayIndex: number) => {
         // Get the date for this lane from the data attribute
         const laneEl = lane as HTMLElement;
@@ -126,8 +116,6 @@ export function renderActivityStatusBoxes(
         const laneDateEnd = new Date(laneDate);
         laneDateEnd.setHours(23, 59, 59, 999);
 
-        console.log('Processing lane', dayIndex, 'date:', dateStr);
-
         let hasActivityStatusForThisDay = false;
 
         activityPeriods.forEach((period) => {
@@ -139,15 +127,6 @@ export function renderActivityStatusBoxes(
                 return;
             }
 
-            console.log(
-                'Rendering period',
-                period.isIdle ? 'idle' : 'active',
-                'from',
-                periodStart,
-                'to',
-                periodEnd
-            );
-
             // Calculate the position and height of the idle box
             const { top, height } = calculateBoxPosition(
                 calendarEl,
@@ -252,9 +231,9 @@ const activityStatusPlugin: PluginDef = createPlugin({
     name: '@solidtime/activity-status',
 
     optionRefiners: {
-        activityPeriods: (rawVal: any) => {
+        activityPeriods: (rawVal: unknown): ActivityPeriod[] => {
             if (!Array.isArray(rawVal)) return [];
-            return rawVal;
+            return rawVal as ActivityPeriod[];
         },
     },
 });

resources/js/packages/ui/src/TimeEntry/TimeEntryGroupedTable.vue

@@ -175,7 +175,7 @@ onMounted(() => {
     <div class="@container">
         <div v-for="(value, key) in visibleGroupedEntries" :key="key">
             <TimeEntryRowHeading
-                :date="key"
+                :date="String(key)"
                 :duration="sumDuration(value)"
                 :checked="
                     value.every((timeEntry: TimeEntry) => selectedTimeEntries.includes(timeEntry))