Timeline

1"use client"
2 
3import * as React from "react"
4import { useState, useRef, useEffect, createContext, useContext, useMemo } from "react"
5import { Slot } from "@radix-ui/react-slot"
6import {
7  DndContext,
8  DragOverlay,
9  useSensor,
10  useSensors,
11  PointerSensor,
12  closestCenter,
13  useDraggable,
14  useDroppable,
15} from "@dnd-kit/core"
16import tunnel from "tunnel-rat"
17import { cn } from "@/lib/utils"
18 
19/* ============================================================================
20 * TYPES & INTERFACES
21 * ========================================================================== */
22 
23export interface TimelineSlotData {
24  id: string
25  rowId: string
26  startTime: string // "14:30"
27  duration: number // minutes
28  [key: string]: any // Additional custom data
29}
30 
31export interface TimelineRowData {
32  id: string
33  label: string
34  [key: string]: any // Additional custom data
35}
36 
37export interface TimelineConfig {
38  startHour: number
39  endHour: number
40  snapIntervalMinutes?: number
41  columnWidth?: number
42}
43 
44/* ============================================================================
45 * CONTEXT
46 * ========================================================================== */
47 
48type TimelineContextValue = {
49  // Configuration
50  config: TimelineConfig
51  pixelsPerMinute: number
52  timelineWidth: number
53 
54  // Refs
55  timelineRef: React.RefObject<HTMLDivElement | null>
56  columnRef: React.RefObject<HTMLDivElement | null>
57 
58  // Tunnel for drag preview
59  dragPreviewTunnel: ReturnType<typeof tunnel>
60 
61  // Callbacks
62  onSlotPositionChange?: (slotId: string, newTime: string, newRowId: string) => Promise<boolean>
63  onValidateDrop?: (slotId: string, newTime: string, newRowId: string) => boolean
64  onSlotClick?: (slotId: string) => void
65}
66 
67const TimelineContext = createContext<TimelineContextValue | null>(null)
68 
69function useTimeline() {
70  const context = useContext(TimelineContext)
71  if (!context) {
72    throw new Error("Timeline components must be used within TimelineProvider")
73  }
74  return context
75}
76 
77/* ============================================================================
78 * UTILITIES
79 * ========================================================================== */
80 
81export const timeToMinutes = (time: string): number => {
82  const [hours, minutes] = time.split(":").map(Number)
83  return hours * 60 + minutes
84}
85 
86export const minutesToTime = (minutes: number): string => {
87  const hours = Math.floor(minutes / 60)
88  const mins = minutes % 60
89// … truncated