feat: implement configuration management and enhance user registration flow

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>