feat: implement configuration management and enhance user registration flow

k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx

@@ -1,28 +1,64 @@
+"use client";
+
 import Link from "next/link";
-import { Pencil, Trash2, RefreshCw, Tv2, CalendarDays, Download } from "lucide-react";
+import { Pencil, Trash2, RefreshCw, Tv2, CalendarDays, Download, ChevronUp, ChevronDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useActiveSchedule } from "@/hooks/use-channels";
 import type { ChannelResponse } from "@/lib/types";
 
 interface ChannelCardProps {
   channel: ChannelResponse;
   isGenerating: boolean;
+  isFirst: boolean;
+  isLast: boolean;
   onEdit: () => void;
   onDelete: () => void;
   onGenerateSchedule: () => void;
   onViewSchedule: () => void;
   onExport: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+}
+
+function useScheduleStatus(channelId: string) {
+  const { data: schedule } = useActiveSchedule(channelId);
+  if (!schedule) return { status: "none" as const, label: null };
+
+  const expiresAt = new Date(schedule.valid_until);
+  const hoursLeft = (expiresAt.getTime() - Date.now()) / (1000 * 60 * 60);
+
+  if (hoursLeft < 0) {
+    return { status: "expired" as const, label: "Schedule expired" };
+  }
+  if (hoursLeft < 6) {
+    const h = Math.ceil(hoursLeft);
+    return { status: "expiring" as const, label: `Expires in ${h}h` };
+  }
+  const fmt = expiresAt.toLocaleDateString(undefined, { weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false });
+  return { status: "ok" as const, label: `Until ${fmt}` };
 }
 
 export function ChannelCard({
   channel,
   isGenerating,
+  isFirst,
+  isLast,
   onEdit,
   onDelete,
   onGenerateSchedule,
   onViewSchedule,
   onExport,
+  onMoveUp,
+  onMoveDown,
 }: ChannelCardProps) {
   const blockCount = channel.schedule_config.blocks.length;
+  const { status, label } = useScheduleStatus(channel.id);
+
+  const scheduleColor =
+    status === "expired" ? "text-red-400" :
+    status === "expiring" ? "text-amber-400" :
+    status === "ok" ? "text-zinc-500" :
+    "text-zinc-600";
 
   return (
     <div className="flex flex-col gap-4 rounded-xl border border-zinc-800 bg-zinc-900 p-5 transition-colors hover:border-zinc-700">
@@ -40,6 +76,26 @@ export function ChannelCard({
         </div>
 
         <div className="flex shrink-0 items-center gap-1">
+          {/* Order controls */}
+          <div className="flex flex-col">
+            <button
+              onClick={onMoveUp}
+              disabled={isFirst}
+              title="Move up"
+              className="rounded p-0.5 text-zinc-600 transition-colors hover:text-zinc-300 disabled:opacity-20 disabled:cursor-not-allowed"
+            >
+              <ChevronUp className="size-3.5" />
+            </button>
+            <button
+              onClick={onMoveDown}
+              disabled={isLast}
+              title="Move down"
+              className="rounded p-0.5 text-zinc-600 transition-colors hover:text-zinc-300 disabled:opacity-20 disabled:cursor-not-allowed"
+            >
+              <ChevronDown className="size-3.5" />
+            </button>
+          </div>
+
           <Button
             variant="ghost"
             size="icon-sm"
@@ -71,12 +127,13 @@ export function ChannelCard({
 
       {/* Meta */}
       <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-zinc-500">
-        <span>
-          <span className="text-zinc-400">{channel.timezone}</span>
-        </span>
+        <span className="text-zinc-400">{channel.timezone}</span>
         <span>
           {blockCount} {blockCount === 1 ? "block" : "blocks"}
         </span>
+        {label && (
+          <span className={scheduleColor}>{label}</span>
+        )}
       </div>
 
       {/* Actions */}
@@ -85,7 +142,7 @@ export function ChannelCard({
           size="sm"
           onClick={onGenerateSchedule}
           disabled={isGenerating}
-          className="flex-1"
+          className={`flex-1 ${status === "expired" ? "border border-red-800/50 bg-red-950/30 text-red-300 hover:bg-red-900/40" : ""}`}
         >
           <RefreshCw className={`size-3.5 ${isGenerating ? "animate-spin" : ""}`} />
           {isGenerating ? "Generating…" : "Generate schedule"}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { useActiveSchedule } from "@/hooks/use-channels";
 import type { ChannelResponse, ScheduledSlotResponse } from "@/lib/types";
@@ -21,11 +22,13 @@ interface DayRowProps {
   dayStart: Date;
   slots: ScheduledSlotResponse[];
   colorMap: Map<string, string>;
+  now: Date;
 }
 
-function DayRow({ label, dayStart, slots, colorMap }: DayRowProps) {
+function DayRow({ label, dayStart, slots, colorMap, now }: DayRowProps) {
   const DAY_MS = 24 * 60 * 60 * 1000;
   const dayEnd = new Date(dayStart.getTime() + DAY_MS);
+  const nowPct = ((now.getTime() - dayStart.getTime()) / DAY_MS) * 100;
 
   // Only include slots that overlap this day
   const daySlots = slots.filter((s) => {
@@ -46,6 +49,15 @@ function DayRow({ label, dayStart, slots, colorMap }: DayRowProps) {
             style={{ left: `${(i / 24) * 100}%` }}
           />
         ))}
+        {/* Current time marker */}
+        {nowPct >= 0 && nowPct <= 100 && (
+          <div
+            className="absolute inset-y-0 z-10 w-0.5 bg-red-500"
+            style={{ left: `${nowPct}%` }}
+          >
+            <div className="absolute -top-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-red-500" />
+          </div>
+        )}
         {daySlots.map((slot) => {
           const slotStart = new Date(slot.start_at);
           const slotEnd = new Date(slot.end_at);
@@ -102,6 +114,13 @@ interface ScheduleSheetProps {
 export function ScheduleSheet({ channel, open, onOpenChange }: ScheduleSheetProps) {
   const { data: schedule, isLoading, error } = useActiveSchedule(channel?.id ?? "");
 
+  // Live clock for the current-time marker — updates every minute
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 60_000);
+    return () => clearInterval(id);
+  }, []);
+
   const colorMap = schedule ? makeColorMap(schedule.slots) : new Map();
 
   // Build day rows from valid_from to valid_until
@@ -172,6 +191,7 @@ export function ScheduleSheet({ channel, open, onOpenChange }: ScheduleSheetProp
                     dayStart={dayStart}
                     slots={schedule.slots}
                     colorMap={colorMap}
+                    now={now}
                   />
                 ))}
               </div>