@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/on-call-schedule/index.tsx

@@ -0,0 +1,615 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Phone,
+  Calendar,
+  Clock,
+  Users,
+  ChevronLeft,
+  ChevronRight,
+  AlertCircle,
+  Bell,
+  User,
+  Shield,
+  Repeat,
+  Plus,
+  Settings,
+  Mail,
+  MessageSquare,
+  ArrowRight,
+  CheckCircle2,
+  XCircle,
+} from "lucide-react"
+
+export type RotationType = "daily" | "weekly" | "biweekly" | "monthly" | "custom"
+export type EscalationLevel = 1 | 2 | 3
+
+export interface OnCallUser {
+  id: string
+  name: string
+  email: string
+  phone?: string
+  avatar?: string
+  timezone?: string
+  status?: "available" | "busy" | "dnd" | "offline"
+}
+
+export interface OnCallShift {
+  id: string
+  user: OnCallUser
+  startTime: Date
+  endTime: Date
+  level: EscalationLevel
+  overrideReason?: string
+}
+
+export interface OnCallSchedule {
+  id: string
+  name: string
+  description?: string
+  team: string
+  rotation: RotationType
+  escalationPolicy: {
+    level1Timeout: number // minutes
+    level2Timeout: number // minutes
+    level3Timeout: number // minutes
+  }
+  shifts: OnCallShift[]
+  users: OnCallUser[]
+}
+
+export interface OnCallScheduleBlockProps {
+  schedule: OnCallSchedule
+  onEditSchedule?: () => void
+  onAddOverride?: (date: Date) => void
+  onSwapShift?: (shift: OnCallShift) => void
+  onContactOnCall?: (user: OnCallUser) => void
+  className?: string
+}
+
+const levelConfig: Record<EscalationLevel, { label: string; color: string; bgColor: string }> = {
+  1: { label: "Primary", color: "text-green-500", bgColor: "bg-green-500" },
+  2: { label: "Secondary", color: "text-yellow-500", bgColor: "bg-yellow-500" },
+  3: { label: "Tertiary", color: "text-red-500", bgColor: "bg-red-500" },
+}
+
+const statusConfig = {
+  available: { color: "bg-green-500", label: "Available" },
+  busy: { color: "bg-yellow-500", label: "Busy" },
+  dnd: { color: "bg-red-500", label: "Do Not Disturb" },
+  offline: { color: "bg-gray-500", label: "Offline" },
+}
+
+function formatTimeRange(start: Date, end: Date): string {
+  const formatTime = (d: Date) => d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })
+  const formatDate = (d: Date) => d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })
+
+  const sameDay = start.toDateString() === end.toDateString()
+  if (sameDay) {
+    return `${formatDate(start)} ${formatTime(start)} - ${formatTime(end)}`
+  }
+  return `${formatDate(start)} ${formatTime(start)} - ${formatDate(end)} ${formatTime(end)}`
+}
+
+function isCurrentShift(shift: OnCallShift): boolean {
+  const now = new Date()
+  return shift.startTime <= now && shift.endTime > now
+}
+
+function CurrentOnCallCard({
+  shift,
+  nextShift,
+  onContact,
+}: {
+  shift?: OnCallShift
+  nextShift?: OnCallShift
+  onContact?: (user: OnCallUser) => void
+}) {
+  if (!shift) {
+    return (
+      <Card className="border-dashed">
+        <CardContent className="p-6 text-center text-muted-foreground">
+          <AlertCircle className="h-8 w-8 mx-auto mb-2" />
+          <p>No one is currently on call</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const levelConf = levelConfig[shift.level]
+  const statusConf = shift.user.status ? statusConfig[shift.user.status] : null
+  const timeRemaining = shift.endTime.getTime() - Date.now()
+  const hoursRemaining = Math.floor(timeRemaining / 3600000)
+  const minutesRemaining = Math.floor((timeRemaining % 3600000) / 60000)
+
+  return (
+    <Card className="border-green-500/30 bg-green-500/5">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <Badge className={cn("text-white", levelConf.bgColor)}>
+            {levelConf.label} On-Call
+          </Badge>
+          <span className="text-sm text-muted-foreground flex items-center gap-1">
+            <Clock className="h-4 w-4" />
+            {hoursRemaining}h {minutesRemaining}m remaining
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-4">
+          <div className="relative">
+            <Avatar className="h-16 w-16">
+              <AvatarImage src={shift.user.avatar} />
+              <AvatarFallback className="text-xl">
+                {shift.user.name.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            {statusConf && (
+              <div className={cn(
+                "absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-background",
+                statusConf.color
+              )} />
+            )}
+          </div>
+
+          <div className="flex-1">
+            <div className="text-xl font-semibold">{shift.user.name}</div>
+            <div className="text-sm text-muted-foreground">{shift.user.email}</div>
+            {shift.user.timezone && (
+              <div className="text-xs text-muted-foreground mt-1">
+                Timezone: {shift.user.timezone}
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-2">
+            {shift.user.phone && (
+              <Button size="sm" variant="outline" onClick={() => onContact?.(shift.user)}>
+                <Phone className="h-4 w-4 mr-1" />
+                Call
+              </Button>
+            )}
+            <Button size="sm" variant="outline" onClick={() => onContact?.(shift.user)}>
+              <MessageSquare className="h-4 w-4 mr-1" />
+              Message
+            </Button>
+          </div>
+        </div>
+
+        {shift.overrideReason && (
+          <div className="text-sm text-muted-foreground bg-muted/50 p-2 rounded">
+            <span className="font-medium">Override:</span> {shift.overrideReason}
+          </div>
+        )}
+
+        {nextShift && (
+          <div className="flex items-center gap-2 pt-2 border-t text-sm">
+            <ArrowRight className="h-4 w-4 text-muted-foreground" />
+            <span className="text-muted-foreground">Next:</span>
+            <Avatar className="h-5 w-5">
+              <AvatarImage src={nextShift.user.avatar} />
+              <AvatarFallback className="text-xs">
+                {nextShift.user.name.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span>{nextShift.user.name}</span>
+            <span className="text-muted-foreground">
+              at {nextShift.startTime.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}
+            </span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function EscalationPolicyCard({
+  policy,
+  currentLevel,
+}: {
+  policy: OnCallSchedule["escalationPolicy"]
+  currentLevel?: EscalationLevel
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <Shield className="h-4 w-4" />
+          Escalation Policy
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {([1, 2, 3] as EscalationLevel[]).map((level) => {
+            const conf = levelConfig[level]
+            const timeout = level === 1 ? policy.level1Timeout : level === 2 ? policy.level2Timeout : policy.level3Timeout
+            const isActive = currentLevel === level
+
+            return (
+              <div
+                key={level}
+                className={cn(
+                  "flex items-center gap-3 p-2 rounded",
+                  isActive && `${conf.bgColor}/10 border ${conf.bgColor}/30`
+                )}
+              >
+                <div className={cn("w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold", conf.bgColor)}>
+                  {level}
+                </div>
+                <div className="flex-1">
+                  <div className="font-medium">{conf.label}</div>
+                  <div className="text-xs text-muted-foreground">
+                    Escalates after {timeout} minutes
+                  </div>
+                </div>
+                {isActive && (
+                  <Badge variant="outline" className={conf.color}>
+                    Active
+                  </Badge>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function WeekView({
+  shifts,
+  weekStart,
+  onShiftClick,
+}: {
+  shifts: OnCallShift[]
+  weekStart: Date
+  onShiftClick?: (shift: OnCallShift) => void
+}) {
+  const days = React.useMemo(() => {
+    const result = []
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(weekStart)
+      date.setDate(date.getDate() + i)
+      result.push(date)
+    }
+    return result
+  }, [weekStart])
+
+  const getShiftsForDay = (date: Date) => {
+    return shifts.filter((shift) => {
+      const shiftDate = new Date(shift.startTime)
+      return shiftDate.toDateString() === date.toDateString()
+    })
+  }
+
+  const isToday = (date: Date) => date.toDateString() === new Date().toDateString()
+
+  return (
+    <div className="grid grid-cols-7 gap-2">
+      {days.map((day) => {
+        const dayShifts = getShiftsForDay(day)
+        const today = isToday(day)
+
+        return (
+          <div
+            key={day.toISOString()}
+            className={cn(
+              "border rounded-lg p-2 min-h-[120px]",
+              today && "border-primary bg-primary/5"
+            )}
+          >
+            <div className={cn(
+              "text-center mb-2",
+              today && "font-bold text-primary"
+            )}>
+              <div className="text-xs text-muted-foreground">
+                {day.toLocaleDateString("en-US", { weekday: "short" })}
+              </div>
+              <div className={cn("text-lg", today && "text-primary")}>
+                {day.getDate()}
+              </div>
+            </div>
+
+            <div className="space-y-1">
+              {dayShifts.map((shift) => {
+                const conf = levelConfig[shift.level]
+                const isCurrent = isCurrentShift(shift)
+
+                return (
+                  <button
+                    key={shift.id}
+                    className={cn(
+                      "w-full text-left p-1.5 rounded text-xs transition-colors",
+                      `${conf.bgColor}/10 hover:${conf.bgColor}/20`,
+                      isCurrent && `ring-2 ring-${conf.bgColor}`
+                    )}
+                    onClick={() => onShiftClick?.(shift)}
+                  >
+                    <div className="flex items-center gap-1">
+                      <Avatar className="h-4 w-4">
+                        <AvatarImage src={shift.user.avatar} />
+                        <AvatarFallback className="text-[8px]">
+                          {shift.user.name.slice(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">{shift.user.name.split(" ")[0]}</span>
+                    </div>
+                    <div className="text-muted-foreground mt-0.5">
+                      {shift.startTime.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function TeamMembers({
+  users,
+  shifts,
+}: {
+  users: OnCallUser[]
+  shifts: OnCallShift[]
+}) {
+  // Calculate on-call hours for each user
+  const userStats = React.useMemo(() => {
+    return users.map((user) => {
+      const userShifts = shifts.filter((s) => s.user.id === user.id)
+      const totalHours = userShifts.reduce((acc, s) => {
+        return acc + (s.endTime.getTime() - s.startTime.getTime()) / 3600000
+      }, 0)
+      const isOnCall = userShifts.some(isCurrentShift)
+      return { user, totalHours, shiftCount: userShifts.length, isOnCall }
+    })
+  }, [users, shifts])
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <Users className="h-4 w-4" />
+          Team Members
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          {userStats.map(({ user, totalHours, shiftCount, isOnCall }) => {
+            const statusConf = user.status ? statusConfig[user.status] : null
+
+            return (
+              <div
+                key={user.id}
+                className={cn(
+                  "flex items-center gap-3 p-2 rounded",
+                  isOnCall && "bg-green-500/10 border border-green-500/30"
+                )}
+              >
+                <div className="relative">
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback className="text-xs">
+                      {user.name.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  {statusConf && (
+                    <div className={cn(
+                      "absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-background",
+                      statusConf.color
+                    )} />
+                  )}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium truncate flex items-center gap-2">
+                    {user.name}
+                    {isOnCall && (
+                      <Badge className="bg-green-500 text-xs">On-Call</Badge>
+                    )}
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {shiftCount} shifts • {Math.round(totalHours)}h total
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function OnCallScheduleBlock({
+  schedule,
+  onEditSchedule,
+  onAddOverride,
+  onSwapShift,
+  onContactOnCall,
+  className,
+}: OnCallScheduleBlockProps) {
+  const [weekOffset, setWeekOffset] = React.useState(0)
+
+  const weekStart = React.useMemo(() => {
+    const now = new Date()
+    const dayOfWeek = now.getDay()
+    const start = new Date(now)
+    start.setDate(now.getDate() - dayOfWeek + (weekOffset * 7))
+    start.setHours(0, 0, 0, 0)
+    return start
+  }, [weekOffset])
+
+  // Find current on-call
+  const currentShift = schedule.shifts.find(isCurrentShift)
+  const upcomingShifts = schedule.shifts
+    .filter((s) => s.startTime > new Date())
+    .sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
+  const nextShift = upcomingShifts[0]
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Phone className="h-6 w-6" />
+              <div>
+                <CardTitle>{schedule.name}</CardTitle>
+                <div className="flex items-center gap-2 mt-1">
+                  <Badge variant="outline">{schedule.team}</Badge>
+                  <Badge variant="secondary">
+                    <Repeat className="h-3 w-3 mr-1" />
+                    {schedule.rotation}
+                  </Badge>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {onAddOverride && (
+                <Button variant="outline" onClick={() => onAddOverride(new Date())}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  Add Override
+                </Button>
+              )}
+              {onEditSchedule && (
+                <Button variant="outline" onClick={onEditSchedule}>
+                  <Settings className="h-4 w-4 mr-1" />
+                  Settings
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      <div className="grid grid-cols-3 gap-6">
+        {/* Current on-call */}
+        <div className="col-span-2 space-y-4">
+          <CurrentOnCallCard
+            shift={currentShift}
+            nextShift={nextShift}
+            onContact={onContactOnCall}
+          />
+
+          {/* Week view */}
+          <Card>
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Calendar className="h-4 w-4" />
+                  Schedule
+                </CardTitle>
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="sm" onClick={() => setWeekOffset((o) => o - 1)}>
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                  <span className="text-sm min-w-[120px] text-center">
+                    {weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" })} -
+                    {new Date(weekStart.getTime() + 6 * 24 * 3600000).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+                  </span>
+                  <Button variant="ghost" size="sm" onClick={() => setWeekOffset((o) => o + 1)}>
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                  {weekOffset !== 0 && (
+                    <Button variant="ghost" size="sm" onClick={() => setWeekOffset(0)}>
+                      Today
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <WeekView
+                shifts={schedule.shifts}
+                weekStart={weekStart}
+                onShiftClick={onSwapShift}
+              />
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-4">
+          <EscalationPolicyCard
+            policy={schedule.escalationPolicy}
+            currentLevel={currentShift?.level}
+          />
+          <TeamMembers users={schedule.users} shifts={schedule.shifts} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Default sample data
+const sampleUsers: OnCallUser[] = [
+  { id: "1", name: "John Doe", email: "john@example.com", phone: "+1 555-0101", status: "available", timezone: "America/New_York" },
+  { id: "2", name: "Jane Smith", email: "jane@example.com", phone: "+1 555-0102", status: "available", timezone: "America/Los_Angeles" },
+  { id: "3", name: "Bob Wilson", email: "bob@example.com", phone: "+1 555-0103", status: "busy", timezone: "Europe/London" },
+  { id: "4", name: "Alice Brown", email: "alice@example.com", phone: "+1 555-0104", status: "available", timezone: "Europe/Paris" },
+]
+
+function generateShifts(): OnCallShift[] {
+  const shifts: OnCallShift[] = []
+  const now = new Date()
+  const startOfWeek = new Date(now)
+  startOfWeek.setDate(now.getDate() - now.getDay())
+  startOfWeek.setHours(0, 0, 0, 0)
+
+  for (let week = -1; week < 3; week++) {
+    for (let day = 0; day < 7; day++) {
+      const shiftStart = new Date(startOfWeek)
+      shiftStart.setDate(startOfWeek.getDate() + (week * 7) + day)
+      shiftStart.setHours(9, 0, 0, 0)
+
+      const shiftEnd = new Date(shiftStart)
+      shiftEnd.setDate(shiftEnd.getDate() + 1)
+
+      const userIndex = (week + 1 + day) % sampleUsers.length
+
+      shifts.push({
+        id: `shift-${week}-${day}`,
+        user: sampleUsers[userIndex],
+        startTime: shiftStart,
+        endTime: shiftEnd,
+        level: 1,
+      })
+    }
+  }
+
+  return shifts
+}
+
+export const defaultOnCallSchedule: OnCallSchedule = {
+  id: "1",
+  name: "Platform Team On-Call",
+  description: "Primary on-call rotation for the platform engineering team",
+  team: "Platform Engineering",
+  rotation: "weekly",
+  escalationPolicy: {
+    level1Timeout: 15,
+    level2Timeout: 30,
+    level3Timeout: 60,
+  },
+  shifts: generateShifts(),
+  users: sampleUsers,
+}