elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/users/doctor-profile.tsx

@@ -0,0 +1,672 @@
+import { useState, useEffect } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  ArrowLeft,
+  Loader2,
+  Stethoscope,
+  Trash2,
+  Plus,
+  Clock,
+  CalendarOff,
+  Check,
+  X,
+  Coffee,
+  Building2,
+  Repeat,
+} from "lucide-react"
+
+import {
+  useDoctorProfiles,
+  useUpdateDoctorProfile,
+} from "@/lib/hooks/use-users"
+import type { WorkingHourEntry } from "@/lib/hooks/use-users"
+import {
+  useAvailabilityBlocks,
+  useCreateAvailabilityBlock,
+  useDeleteAvailabilityBlock,
+} from "@/lib/hooks/use-availability-blocks"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { cn } from "@/lib/utils"
+
+// ─── Constants ───────────────────────────────────────────────
+
+const DAYS = [
+  { day: 1, key: "monday" },
+  { day: 2, key: "tuesday" },
+  { day: 3, key: "wednesday" },
+  { day: 4, key: "thursday" },
+  { day: 5, key: "friday" },
+  { day: 6, key: "saturday" },
+  { day: 0, key: "sunday" },
+] as const
+
+const COLORS = [
+  { hex: "#e77d22", label: "Orange" },
+  { hex: "#3b82f6", label: "Blue" },
+  { hex: "#10b981", label: "Emerald" },
+  { hex: "#8b5cf6", label: "Violet" },
+  { hex: "#f43f5e", label: "Rose" },
+  { hex: "#06b6d4", label: "Cyan" },
+  { hex: "#f59e0b", label: "Amber" },
+  { hex: "#ec4899", label: "Pink" },
+]
+
+const BLOCK_TYPES = ["holiday", "leave", "break_time", "other"] as const
+
+const BLOCK_BORDER_COLORS: Record<string, string> = {
+  holiday: "border-l-green-500",
+  leave: "border-l-blue-500",
+  break_time: "border-l-orange-500",
+  other: "border-l-gray-400",
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function DoctorProfilePage() {
+  const { id } = useParams<{ id: string }>()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { data: doctorProfiles, isLoading } = useDoctorProfiles()
+  const updateProfile = useUpdateDoctorProfile()
+
+  const doctor = doctorProfiles?.find((d) => d.id === id)
+  const profile = doctor?.profile
+
+  const [specialty, setSpecialty] = useState("")
+  const [title, setTitle] = useState("")
+  const [bio, setBio] = useState("")
+  const [duration, setDuration] = useState(30)
+  const [color, setColor] = useState("#e77d22")
+  const [isAccepting, setIsAccepting] = useState(true)
+  const [hours, setHours] = useState<WorkingHourEntry[]>([])
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [initialized, setInitialized] = useState(false)
+
+  useEffect(() => {
+    if (profile && !initialized) {
+      setSpecialty(profile.specialty ?? "")
+      setTitle(profile.title ?? "")
+      setBio(profile.bio ?? "")
+      setDuration(profile.appointmentDuration ?? 30)
+      setColor(profile.color ?? "#e77d22")
+      setIsAccepting(profile.isAccepting ?? true)
+      const wh = Array.isArray(profile.workingHours) ? profile.workingHours : []
+      setHours(DAYS.map(({ day }) => {
+        const existing = wh.find((h: any) => h.day === day)
+        return existing ?? { day, enabled: day >= 1 && day <= 5, start: "09:00", end: "17:00" }
+      }))
+      setInitialized(true)
+    } else if (!profile && doctor && !initialized) {
+      setHours(DAYS.map(({ day }) => ({ day, enabled: day >= 1 && day <= 5, start: "09:00", end: "17:00" })))
+      setInitialized(true)
+    }
+  }, [profile, doctor, initialized])
+
+  const updateHour = (day: number, field: keyof WorkingHourEntry, value: any) => {
+    setHours((prev) => prev.map((h) => h.day === day ? { ...h, [field]: value } : h))
+  }
+
+  const handleSave = async () => {
+    if (!id) return
+    setErrorMessage(null)
+    try {
+      await updateProfile.mutateAsync({
+        userId: id,
+        specialty: specialty || undefined,
+        title: title || undefined,
+        bio: bio || undefined,
+        appointmentDuration: duration,
+        color,
+        isAccepting,
+        workingHours: hours,
+      })
+      toast.success(t("users.profileUpdated"))
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("users.profileError"))
+      } else {
+        setErrorMessage(t("users.profileError"))
+      }
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="max-w-[900px] mx-auto space-y-6 py-2">
+        <Skeleton className="h-28 w-full rounded-2xl" />
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Skeleton className="h-72 rounded-2xl" />
+          <Skeleton className="h-72 rounded-2xl" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!doctor) {
+    return (
+      <div className="max-w-[900px] mx-auto space-y-4 py-2">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/users")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />{t("common.back")}
+        </Button>
+        <p className="text-sm text-muted-foreground">{t("users.noUsers")}</p>
+      </div>
+    )
+  }
+
+  const enabledDays = hours.filter((h) => h.enabled).length
+
+  return (
+    <div className="max-w-[900px] mx-auto space-y-6 py-2">
+      {/* ── Hero Header ───────────────────────────────── */}
+      <div className="relative rounded-2xl border bg-card overflow-hidden">
+        {/* Accent bar */}
+        <div className="h-1.5" style={{ backgroundColor: color }} />
+
+        <div className="px-6 py-5 flex items-center justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <button onClick={() => navigate("/users")} className="text-muted-foreground hover:text-foreground transition-colors -ml-1">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <Avatar className="w-14 h-14 text-lg" style={{ backgroundColor: color + "20", color }}>
+              <AvatarFallback className="text-lg font-semibold" style={{ backgroundColor: color + "20", color }}>
+                {doctor.firstName.charAt(0)}{doctor.lastName.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <h1 className="text-xl font-bold tracking-tight">
+                {title && <span className="text-muted-foreground font-medium mr-1">{title}</span>}
+                {doctor.firstName} {doctor.lastName}
+              </h1>
+              <div className="flex items-center gap-2 mt-0.5">
+                {specialty && (
+                  <Badge variant="outline" className="text-xs gap-1">
+                    <Stethoscope className="w-3 h-3" />
+                    {specialty}
+                  </Badge>
+                )}
+                <span
+                  className={cn(
+                    "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full",
+                    isAccepting
+                      ? "bg-green-500/10 text-green-600 dark:text-green-400"
+                      : "bg-red-500/10 text-red-600 dark:text-red-400",
+                  )}
+                >
+                  {isAccepting ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
+                  {isAccepting ? t("users.acceptingPatients") : t("users.notAccepting")}
+                </span>
+              </div>
+            </div>
+          </div>
+          <Button onClick={handleSave} disabled={updateProfile.isPending} size="lg">
+            {updateProfile.isPending
+              ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+              : t("common.save")}
+          </Button>
+        </div>
+      </div>
+
+      {errorMessage && (
+        <Alert variant="destructive">
+          <AlertDescription>{errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* ── Two-column layout ─────────────────────────── */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+
+        {/* Left — Profile Details (3 cols) */}
+        <div className="lg:col-span-2 space-y-5">
+          <section className="rounded-2xl border bg-card p-5 space-y-4">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+              {t("users.profileInfo")}
+            </h2>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("users.title")}</Label>
+                <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Dt., Dr., Prof." className="h-9" />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("users.specialty")}</Label>
+                <Input value={specialty} onChange={(e) => setSpecialty(e.target.value)} placeholder={t("users.specialtyPlaceholder")} className="h-9" />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">{t("users.bio")}</Label>
+              <Textarea value={bio} onChange={(e) => setBio(e.target.value)} rows={3} className="resize-none" />
+            </div>
+          </section>
+
+          <section className="rounded-2xl border bg-card p-5 space-y-4">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+              {t("users.preferences")}
+            </h2>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">{t("users.apptDuration")}</p>
+                  <p className="text-xs text-muted-foreground">{t("users.apptDurationHint")}</p>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Input
+                    type="number"
+                    min={5}
+                    step={5}
+                    value={duration}
+                    onChange={(e) => setDuration(Number(e.target.value))}
+                    className="h-8 w-16 text-center text-sm"
+                  />
+                  <span className="text-xs text-muted-foreground">{t("appointments.minutes")}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">{t("users.accepting")}</p>
+                  <p className="text-xs text-muted-foreground">{t("users.acceptingHint")}</p>
+                </div>
+                <button
+                  onClick={() => setIsAccepting(!isAccepting)}
+                  className={cn(
+                    "relative w-11 h-6 rounded-full transition-colors",
+                    isAccepting ? "bg-green-500" : "bg-muted-foreground/30",
+                  )}
+                >
+                  <span className={cn(
+                    "absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform",
+                    isAccepting && "translate-x-5",
+                  )} />
+                </button>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium">{t("users.calendarColor")}</p>
+                <div className="flex items-center gap-2">
+                  {COLORS.map((c) => (
+                    <button
+                      key={c.hex}
+                      onClick={() => setColor(c.hex)}
+                      className={cn(
+                        "w-8 h-8 rounded-full transition-all ring-offset-background",
+                        color === c.hex ? "ring-2 ring-foreground ring-offset-2 scale-110" : "hover:scale-105",
+                      )}
+                      style={{ backgroundColor: c.hex }}
+                      title={c.label}
+                      type="button"
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        {/* Right — Working Hours (3 cols) */}
+        <section className="lg:col-span-3 rounded-2xl border bg-card p-5 space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+              {t("users.workingHours")}
+            </h2>
+            <span className="text-xs text-muted-foreground">
+              {enabledDays} {t("users.daysActive")}
+            </span>
+          </div>
+
+          <div className="space-y-1">
+            {hours.map((h) => {
+              const dayLabel = DAYS.find((d) => d.day === h.day)
+              return (
+                <div
+                  key={h.day}
+                  className={cn(
+                    "rounded-lg border transition-colors",
+                    h.enabled ? "border-border" : "border-transparent bg-muted/30",
+                  )}
+                >
+                  {/* Day header — always visible, clickable toggle */}
+                  <button
+                    onClick={() => updateHour(h.day, "enabled", !h.enabled)}
+                    className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer"
+                  >
+                    <div className="flex items-center gap-2.5">
+                      <div className={cn(
+                        "w-9 h-5 rounded-full relative transition-colors",
+                        h.enabled ? "bg-green-500" : "bg-muted-foreground/20",
+                      )}>
+                        <span className={cn(
+                          "absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform",
+                          h.enabled && "translate-x-4",
+                        )} />
+                      </div>
+                      <span className={cn(
+                        "text-sm font-medium transition-colors",
+                        !h.enabled && "text-muted-foreground",
+                      )}>
+                        {t(`days.${dayLabel?.key}`)}
+                      </span>
+                    </div>
+                    {h.enabled ? (
+                      <span className="text-xs text-muted-foreground">
+                        {h.start} — {h.end}
+                        <span className="mx-1.5">·</span>
+                        {h.duration ?? duration} {t("appointments.minutes")}
+                        {h.breakStart && h.breakEnd && (
+                          <span className="ml-1.5 text-muted-foreground/60">({t("users.break")}: {h.breakStart}–{h.breakEnd})</span>
+                        )}
+                      </span>
+                    ) : (
+                      <span className="text-xs text-muted-foreground italic">{t("users.dayOff")}</span>
+                    )}
+                  </button>
+
+                  {/* Expanded inputs — only when enabled */}
+                  {h.enabled && (
+                    <div className="px-3 pb-3 pt-0 space-y-2">
+                      <div className="flex items-center gap-4 flex-wrap">
+                        <div className="flex items-center gap-1.5">
+                          <Clock className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                          <span className="text-xs text-muted-foreground w-14">{t("users.workHours")}:</span>
+                          <Input
+                            type="time"
+                            className="h-8 w-[100px] text-sm"
+                            value={h.start}
+                            onChange={(e) => updateHour(h.day, "start", e.target.value)}
+                          />
+                          <span className="text-muted-foreground text-sm">—</span>
+                          <Input
+                            type="time"
+                            className="h-8 w-[100px] text-sm"
+                            value={h.end}
+                            onChange={(e) => updateHour(h.day, "end", e.target.value)}
+                          />
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <Coffee className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                          <span className="text-xs text-muted-foreground w-14">{t("users.break")}:</span>
+                          <Input
+                            type="time"
+                            className="h-8 w-[100px] text-sm"
+                            value={h.breakStart ?? ""}
+                            onChange={(e) => updateHour(h.day, "breakStart", e.target.value || undefined)}
+                            placeholder="12:00"
+                          />
+                          <span className="text-muted-foreground text-sm">—</span>
+                          <Input
+                            type="time"
+                            className="h-8 w-[100px] text-sm"
+                            value={h.breakEnd ?? ""}
+                            onChange={(e) => updateHour(h.day, "breakEnd", e.target.value || undefined)}
+                            placeholder="13:00"
+                          />
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <Clock className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                        <span className="text-xs text-muted-foreground w-14">{t("users.slotDur")}:</span>
+                        <Input
+                          type="number"
+                          min={5}
+                          step={5}
+                          className="h-8 w-16 text-sm text-center"
+                          value={h.duration ?? duration}
+                          onChange={(e) => updateHour(h.day, "duration", e.target.value ? Number(e.target.value) : undefined)}
+                        />
+                        <span className="text-xs text-muted-foreground">{t("appointments.minutes")}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </section>
+      </div>
+
+      {/* ── Availability Blocks ────────────────────────── */}
+      <AvailabilityBlocksSection clinicId={doctor.clinics[0]?.id} doctorId={id!} />
+    </div>
+  )
+}
+
+// ─── Availability Blocks Section ─────────────────────────────
+
+function AvailabilityBlocksSection({ clinicId, doctorId }: { clinicId?: string; doctorId: string }) {
+  const { t } = useTranslation()
+  const { data: blocks } = useAvailabilityBlocks({ clinicId, doctorId })
+  const createBlock = useCreateAvailabilityBlock()
+  const deleteBlock = useDeleteAvailabilityBlock()
+
+  const [showForm, setShowForm] = useState(false)
+  const [title, setTitle] = useState("")
+  const [type, setType] = useState<string>("leave")
+  const [startDate, setStartDate] = useState("")
+  const [endDate, setEndDate] = useState("")
+  const [allDay, setAllDay] = useState(true)
+  const [startTime, setStartTime] = useState("09:00")
+  const [endTime, setEndTime] = useState("17:00")
+  const [recurring, setRecurring] = useState(false)
+
+  const handleAdd = async () => {
+    if (!clinicId || !title || !startDate) return
+    try {
+      await createBlock.mutateAsync({
+        clinicId,
+        doctorId,
+        title,
+        type,
+        startDate,
+        endDate: endDate || startDate,
+        allDay,
+        startTime: allDay ? undefined : startTime,
+        endTime: allDay ? undefined : endTime,
+        recurring,
+      })
+      setTitle("")
+      setStartDate("")
+      setEndDate("")
+      setShowForm(false)
+      toast.success(t("blocks.created"))
+    } catch {
+      toast.error(t("blocks.createError"))
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteBlock.mutateAsync(id)
+      toast.success(t("blocks.deleted"))
+    } catch {
+      toast.error(t("blocks.deleteError"))
+    }
+  }
+
+  const doctorBlocks = (blocks ?? []).filter((b) => b.doctorId === doctorId)
+  const clinicBlocks = (blocks ?? []).filter((b) => !b.doctorId)
+
+  return (
+    <section className="rounded-2xl border bg-card p-5 space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <CalendarOff className="w-4 h-4 text-muted-foreground" />
+          <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+            {t("blocks.title")}
+          </h2>
+        </div>
+        {!showForm && (
+          <Button size="sm" variant="outline" onClick={() => setShowForm(true)}>
+            <Plus className="w-3.5 h-3.5 mr-1" />
+            {t("common.add")}
+          </Button>
+        )}
+      </div>
+
+      {/* Add form — expandable */}
+      {showForm && (
+        <div className="rounded-xl border bg-muted/30 p-4 space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">{t("common.name")}</Label>
+              <Input className="h-9" placeholder={t("blocks.titlePlaceholder")} value={title} onChange={(e) => setTitle(e.target.value)} />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">{t("common.type")}</Label>
+              <Select value={type} onValueChange={setType}>
+                <SelectTrigger className="h-9">
+                  <SelectValue>{t(`blocks.type_${type}`)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {BLOCK_TYPES.map((bt) => (
+                    <SelectItem key={bt} value={bt}>{t(`blocks.type_${bt}`)}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">{t("appointments.from")}</Label>
+              <Input type="date" className="h-9" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">{t("appointments.to")}</Label>
+              <Input type="date" className="h-9" value={endDate} onChange={(e) => setEndDate(e.target.value)} placeholder={startDate} />
+            </div>
+          </div>
+
+          {!allDay && (
+            <div className="grid grid-cols-2 gap-3">
+              <Input type="time" className="h-9" value={startTime} onChange={(e) => setStartTime(e.target.value)} />
+              <Input type="time" className="h-9" value={endTime} onChange={(e) => setEndTime(e.target.value)} />
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <label className="flex items-center gap-1.5 text-sm cursor-pointer">
+                <Checkbox checked={allDay} onCheckedChange={(v) => setAllDay(!!v)} />
+                {t("blocks.allDay")}
+              </label>
+              <label className="flex items-center gap-1.5 text-sm cursor-pointer">
+                <Checkbox checked={recurring} onCheckedChange={(v) => setRecurring(!!v)} />
+                {t("blocks.yearly")}
+              </label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="ghost" onClick={() => setShowForm(false)}>{t("common.cancel")}</Button>
+              <Button size="sm" onClick={handleAdd} disabled={!title || !startDate || createBlock.isPending}>
+                {createBlock.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <><Plus className="w-3.5 h-3.5 mr-1" />{t("common.add")}</>}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Doctor's blocks */}
+      {doctorBlocks.length > 0 && (
+        <div className="space-y-1.5">
+          <p className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Stethoscope className="w-3 h-3" />
+            {t("users.doctorProfile")}
+          </p>
+          {doctorBlocks.map((block) => (
+            <BlockRow key={block.id} block={block} onDelete={() => handleDelete(block.id)} t={t} />
+          ))}
+        </div>
+      )}
+
+      {/* Clinic holidays (read-only) */}
+      {clinicBlocks.length > 0 && (
+        <div className="space-y-1.5">
+          <p className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Building2 className="w-3 h-3" />
+            {t("blocks.clinicHolidays")}
+          </p>
+          {clinicBlocks.map((block) => (
+            <BlockRow key={block.id} block={block} t={t} />
+          ))}
+        </div>
+      )}
+
+      {doctorBlocks.length === 0 && clinicBlocks.length === 0 && !showForm && (
+        <div className="text-center py-8">
+          <CalendarOff className="w-8 h-8 text-muted-foreground/30 mx-auto mb-2" />
+          <p className="text-sm text-muted-foreground">{t("blocks.noBlocks")}</p>
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ─── Block Row ───────────────────────────────────────────────
+
+function BlockRow({
+  block,
+  onDelete,
+  t,
+}: {
+  block: any
+  onDelete?: () => void
+  t: (key: string) => string
+}) {
+  const borderColor = BLOCK_BORDER_COLORS[block.type] ?? "border-l-gray-400"
+
+  return (
+    <div className={cn(
+      "flex items-center justify-between px-3 py-2.5 rounded-lg border-l-[3px] bg-muted/20 hover:bg-muted/40 transition-colors group",
+      borderColor,
+    )}>
+      <div className="flex items-center gap-2.5 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">{block.title}</span>
+            <Badge variant="outline" className="text-[10px] px-1.5 py-0 shrink-0">
+              {t(`blocks.type_${block.type}`)}
+            </Badge>
+            {block.recurring && (
+              <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+                <Repeat className="w-3 h-3" />
+                {t("blocks.yearly")}
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {new Date(block.startDate).toLocaleDateString()}
+            {block.startDate !== block.endDate && ` — ${new Date(block.endDate).toLocaleDateString()}`}
+            {!block.allDay && block.startTime && ` / ${block.startTime}–${block.endTime}`}
+          </p>
+        </div>
+      </div>
+      {onDelete && (
+        <button
+          className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-all p-1 rounded"
+          onClick={onDelete}
+        >
+          <Trash2 className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  )
+}