Live Dashboard

1"use client"
2 
3import { Activity, Circle } from "lucide-react"
4import { useEffect, useState } from "react"
5 
6import { FadeIn } from "@/components/ui/fade-in"
7import { cn } from "@/lib/utils"
8 
9type Status = "active" | "shipping" | "paused"
10 
11/** Edit CONTENT.projects for your studio board. */
12const CONTENT = {
13  footerNote:
14    "Anonymized snapshots shared with client permission. Slots: 2 of 3 filled.",
15  projects: [
16    {
17      id: "p1",
18      name: "Billing dashboard",
19      client: "Acme",
20      status: "active" as Status,
21      milestone: "Checkout polish",
22      progress: 72,
23      lastUpdate: "Shipped invoice PDF export",
24      service: "MVP sprint",
25      public: true,
26    },
27    {
28      id: "p2",
29      name: "Ops AI inbox",
30      client: "Northwind",
31      status: "shipping" as Status,
32      milestone: "Prompt evals",
33      progress: 88,
34      lastUpdate: "Cut false positives 30%",
35      service: "AI feature",
36      public: true,
37    },
38  ],
39}
40 
41const STATUS_COLORS: Record<Status, string> = {
42  active: "border-emerald-500/40 text-emerald-400",
43  shipping: "border-sky-500/40 text-sky-400",
44  paused: "border-amber-500/40 text-amber-400",
45}
46 
47const STATUS_LABELS: Record<Status, string> = {
48  active: "Active",
49  shipping: "Shipping",
50  paused: "Paused",
51}
52 
53export function LiveDashboard() {
54  const [now, setNow] = useState<Date | null>(null)
55 
56  useEffect(() => {
57    setNow(new Date())
58    const id = setInterval(() => setNow(new Date()), 60_000)
59    return () => clearInterval(id)
60  }, [])
61 
62  const publicProjects = CONTENT.projects.filter((p) => p.public)
63 
64  return (
65    <div>
66      <div className="ms-shell-pad flex items-center justify-between border-b border-border-subtle py-4">
67        <div className="flex items-center gap-2">
68          <span className="relative flex h-2 w-2">
69            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
70            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
71          </span>
72          <span className="text-xs font-medium text-muted-foreground">
73            Studio live · {publicProjects.length} active project
74            {publicProjects.length === 1 ? "" : "s"}
75          </span>
76        </div>
77        {now ? (
78          <span className="ds-mono-label flex items-center gap-1.5">
79            <Activity className="size-3" />
80            Updated{" "}
81            {now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
82// … truncated