feat(timeline): add visual indication for timeblocks outside working hours

app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-timeline.vue

@@ -117,6 +117,7 @@
             class="current-timeblock"
             :class="{
               'has-collision': collision.hasCollision,
+              'outside-working-hours': isOutsideWorkingHours,
             }"
             :style="{
               left: `${getTimePosition(currentTimeblockRange.start)}px`,
@@ -146,7 +147,10 @@
           <div
             v-if="dragState.isResizingCurrent && resizedCurrentBlock"
             class="current-timeblock is-resizing"
-            :class="{ 'has-collision': collision.hasCollision }"
+            :class="{
+              'has-collision': collision.hasCollision,
+              'outside-working-hours': isOutsideWorkingHours,
+            }"
             :style="{
               left: `${getTimePosition(resizedCurrentBlock.start)}px`,
               width: `${getTimeWidth(
@@ -283,6 +287,29 @@ const isWeekend = computed(() => {
   return dayOfWeek === 0 || dayOfWeek === 6;
 });
 
+// Check if the current timeblock is outside working hours
+const isOutsideWorkingHours = computed(() => {
+  if (!props.currentTimeblockRange.start || !props.currentTimeblockRange.end) {
+    return false;
+  }
+
+  const startHour =
+    props.currentTimeblockRange.start.getHours() +
+    props.currentTimeblockRange.start.getMinutes() / 60;
+  const endHour =
+    props.currentTimeblockRange.end.getHours() +
+    props.currentTimeblockRange.end.getMinutes() / 60;
+
+  // Check if any part of the timeblock is outside working hours
+  const isStartOutside =
+    startHour < props.employee.work_start ||
+    startHour >= props.employee.work_end;
+  const isEndOutside =
+    endHour <= props.employee.work_start || endHour > props.employee.work_end;
+
+  return isStartOutside || isEndOutside;
+});
+
 // Convert other timeblocks to renderable format
 const otherTimeblocksRendered = computed(() => {
   return props.otherTimeblocks
@@ -915,6 +942,9 @@ defineExpose({
   &.has-collision
     border-color: #ff5252
 
+  &.outside-working-hours
+    border-color: #ff0000
+
   &.is-resizing
     opacity: 0.8
     box-shadow: 0 4px 12px rgba(33, 150, 243, 0.6)