Availability

1"use client"
2 
3import * as React from "react"
4import { Clock, Settings, X } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7import {
8  DndContext,
9  DragOverlay,
10  useSensor,
11  useSensors,
12  PointerSensor,
13  useDraggable,
14  useDroppable,
15  DragStartEvent,
16  DragEndEvent,
17  DragMoveEvent,
18  DragOverEvent,
19} from "@dnd-kit/core"
20import tunnel from "tunnel-rat"
21import { nanoid } from "nanoid"
22 
23// --- Types ---
24 
25export interface TimeSpan {
26  active?: boolean
27  id: string
28  week_day: number // 0-6 - Sunday-Saturday
29  start_time: string // "HH:mm"
30  end_time: string // "HH:mm"
31}
32 
33interface AvailabilityProps {
34  value?: TimeSpan[]
35  onValueChange?: (value: TimeSpan[]) => void
36  disabled?: TimeSpan[] // Disabled regions where no events can exist
37  days?: number[] // 0-6
38  showAllDays?: boolean // If true, renders all 7 days, but disables interactions on days not in 'days' array
39  timeIncrements?: number // minutes, default 30
40  startTime?: number // hour 0-23, default 7
41  endTime?: number // hour 0-23, default 23
42  useAmPm?: boolean
43  mergeAdjacent?: boolean // default true - merge spans that touch end-to-end
44  slotClassName?: string // className for time slot items (default: "bg-muted")
45  className?: string
46}
47 
48// --- Utils ---
49 
50const timeToMinutes = (time: string) => {
51  const [h, m] = time.split(":").map(Number)
52  return h * 60 + m
53}
54 
55const minutesToTime = (minutes: number) => {
56  const h = Math.floor(minutes / 60)
57  const m = minutes % 60
58  return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`
59}
60 
61const formatDisplayTime = (time: string, useAmPm: boolean) => {
62  if (!useAmPm) return time
63  const [h, m] = time.split(":").map(Number)
64  const ampm = h >= 12 ? "PM" : "AM"
65  const h12 = h % 12 || 12
66  return `${h12}:${m.toString().padStart(2, "0")} ${ampm}`
67}
68 
69// Helper to generate a simple unique ID (not crypto secure but sufficient for UI)
70const generateId = () => nanoid()
71 
72const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
73 
74/**
75 * Merges adjacent (contiguous) time spans on the same day.
76 * Adjacent means one span's end_time equals another's start_time.
77 * The merged span keeps the id of the earliest span.
78 */
79const mergeAdjacentSpans = (spans: TimeSpan[]): TimeSpan[] => {
80  if (spans.length === 0) return spans
81 
82  // Group by day
83  const byDay = new Map<number, TimeSpan[]>()
84  spans.forEach(span => {
85    const daySpans = byDay.get(span.week_day) || []
86// … truncated