feat(frontend): schedule history dialog with rollback, wire ConfigHistorySheet

k-tv-frontend/app/(main)/dashboard/components/schedule-history-dialog.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { useScheduleHistory, useRollbackSchedule } from '@/hooks/use-channels'
+
+interface Props {
+  channelId: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const fmtDateRange = (from: string, until: string) =>
+  `${new Date(from).toLocaleDateString()} – ${new Date(until).toLocaleDateString()}`
+
+export function ScheduleHistoryDialog({ channelId, open, onOpenChange }: Props) {
+  const { data: entries } = useScheduleHistory(channelId)
+  const rollback = useRollbackSchedule()
+  const [confirmId, setConfirmId] = useState<string | null>(null)
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Schedule history</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 mt-2 max-h-[60vh] overflow-y-auto">
+          {(entries ?? []).map((entry, i) => (
+            <div
+              key={entry.id}
+              className="flex items-center gap-3 p-3 rounded border border-border"
+            >
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium">
+                  Gen #{entry.generation}
+                  {i === 0 && (
+                    <span className="ml-2 text-xs text-green-400 bg-green-950 px-1.5 py-0.5 rounded">
+                      active
+                    </span>
+                  )}
+                </div>
+                <div className="text-xs text-muted-foreground mt-0.5">
+                  {fmtDateRange(entry.valid_from, entry.valid_until)}
+                </div>
+              </div>
+
+              {i > 0 && (
+                confirmId === entry.id ? (
+                  <div className="flex items-center gap-1 text-xs">
+                    <span className="text-amber-400 whitespace-nowrap">Roll back to gen #{entry.generation}?</span>
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      disabled={rollback.isPending}
+                      onClick={() => {
+                        rollback.mutate({ channelId, genId: entry.id })
+                        setConfirmId(null)
+                        onOpenChange(false)
+                      }}
+                    >
+                      Confirm
+                    </Button>
+                    <Button size="sm" variant="ghost" onClick={() => setConfirmId(null)}>
+                      Cancel
+                    </Button>
+                  </div>
+                ) : (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setConfirmId(entry.id)}
+                  >
+                    Rollback to here
+                  </Button>
+                )
+              )}
+            </div>
+          ))}
+          {(entries ?? []).length === 0 && (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No schedule history yet. Generate a schedule to get started.
+            </p>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}