feat(ui): polish pass — theme-aware charts, brand nav, search & date formatting

- Dashboard foreign-flow chart line now uses the CSS --primary token (hsl) so it matches light/dark instead of a hardcoded blue; Portfolio bar chart gets themed bars with rounded corners + alpha steps
- Nav: logo mark (📈 in primary tile), active item left accent bar, active-state matching for sub-routes (/report/:ticker now highlights Report... actually Dashboard/Screener etc)
- TickerSearch: cleaner searchbox with magnifier icon + 'Buka' button, aria-label
- Login page: centered branded header (logo + FlowSight), vertically centered card
- Sorotan cards + Screener show company name under ticker when available
- Routines run history + Alerts event/alert lists: formatted dates (16 Sep 07:30), status badges (ok/error), credits-used display
- Dashboard hero/misc spacing polish

web/src/index.tsx

@@ -27,17 +27,24 @@ function Nav(props: { loggedIn: boolean }) {
   const loc = useLocation();
   // Belum login: hanya Dashboard yg terlihat (fitur lain di-hide).
   const items = () => props.loggedIn ? NAV_ALL : NAV_ALL.slice(0, 1);
+  const isActive = (href: string) => loc.pathname === href || (href !== "/" && loc.pathname.startsWith(href));
   return (
     <nav class="flex w-56 shrink-0 flex-col gap-1 border-r bg-card p-4 max-lg:hidden">
-      <div class="mb-4 px-2 text-xl font-bold tracking-tight">
+      <div class="mb-5 px-2">
-        Flow<span class="text-primary">Sight</span>
+        <a href="/" class="flex items-center gap-2 text-xl font-bold tracking-tight">
+          <span class="grid size-7 place-items-center rounded-lg bg-primary text-sm text-primary-foreground">📈</span>
+          Flow<span class="text-primary">Sight</span>
+        </a>
       </div>
       {items().map((n) => (
         <a
           href={n.href}
-          class={`flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ${loc.pathname === n.href ? "bg-accent text-accent-foreground" : "text-muted-foreground"}`}
+          class={`relative flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ${isActive(n.href) ? "bg-accent text-accent-foreground" : "text-muted-foreground"}`}
         >
-          <span>{n.icon}</span> {n.label}
+          <span class="text-base leading-none">{n.icon}</span> {n.label}
+          <Show when={isActive(n.href)}>
+            <span class="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-primary" />
+          </Show>
         </a>
       ))}
     </nav>
@@ -64,18 +71,25 @@ function MobileNav(props: { loggedIn: boolean }) {
 function TickerSearch(props: { loggedIn: boolean }) {
   const nav = useNavigate();
   const [q, setQ] = createSignal("");
-  const go = () => {
+  const go = (t: string) => {
-    const t = q().toUpperCase().trim();
+    const v = t.toUpperCase().trim();
     // Report butuh login: arahkan yg belum login ke /login.
-    if (t) nav(props.loggedIn ? `/report/${t}` : "/login");
+    if (v) nav(props.loggedIn ? `/report/${v}` : "/login");
   };
   return (
-    <form class="flex max-w-sm flex-1 items-center gap-2" onSubmit={(e) => { e.preventDefault(); go(); }}>
+    <form class="flex max-w-sm flex-1 items-center gap-2" onSubmit={(e) => { e.preventDefault(); go(q()); }}>
-      <TextField class="flex-1">
+      <div class="relative flex-1">
-        <TextFieldInput placeholder="Ticker → report (e.g. BBCA)" value={q()}
+        <TextFieldInput
-          onInput={(e) => setQ(e.currentTarget.value)} />
+          placeholder="Cari kode saham…"
-      </TextField>
+          value={q()}
-      <Button type="submit" variant="secondary">Open</Button>
+          aria-label="Cari kode saham"
+          onInput={(e) => setQ(e.currentTarget.value)}
+          onKeyDown={(e: KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); go(q()); } }}
+          class="h-9 pr-8"
+        />
+        <span class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">🔍</span>
+      </div>
+      <Button type="submit" variant="secondary" class="h-9 px-3">Buka</Button>
     </form>
   );
 }
@@ -99,7 +113,11 @@ function LoginPage() {
     finally { setBusy(false); }
   }
   return (
-    <div class="mx-auto max-w-md py-[8vh]">
+    <div class="mx-auto flex min-h-[70vh] w-full max-w-md flex-col justify-center py-[6vh]">
+      <div class="mb-6 flex items-center justify-center gap-2 text-2xl font-bold tracking-tight">
+        <span class="grid size-9 place-items-center rounded-xl bg-primary text-lg text-primary-foreground">📈</span>
+        Flow<span class="text-primary">Sight</span>
+      </div>
       <Card>
         <CardHeader class="text-center">
           <CardTitle class="text-2xl">Masuk ke FlowSight 👋</CardTitle>

web/src/pages/Alerts.tsx

@@ -50,6 +50,11 @@ function AlertsInner() {
       refetchDests();
     } catch (e) { setDerr(String(e)); }
   }
+  const fmtDate = (s: unknown) => {
+    const t = String(s || "");
+    const d = new Date(t);
+    return Number.isNaN(d.getTime()) ? t : d.toLocaleString("id-ID", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+  };
   async function toggleDest(id: number, enabled: boolean) { try { await api.updateDestination(id, { enabled: !enabled }); refetchDests(); } catch (e) { setDerr(String(e)); } }
   async function delDest(id: number) { try { await api.deleteDestination(id); refetchDests(); } catch (e) { setDerr(String(e)); } }
   return (
@@ -111,7 +116,11 @@ function AlertsInner() {
           <CardHeader><CardTitle>Notifikasi terpasang</CardTitle></CardHeader>
           <CardContent>
             <Show when={(alerts()?.alerts || []).length} fallback={<EmptyState icon="🔔" title="Belum ada" hint="Pilih template di atas, sekali klik." />}>
-              <ul class="space-y-1.5 text-sm"><For each={alerts()?.alerts || []}>{(a) => <li class="flex items-center gap-2">{a.name} <span class="text-muted-foreground">terakhir: {a.last_fired || "belum pernah"}</span><span class="flex-1" /><Button variant="destructive" size="sm" onClick={() => del(a.id)}>Hapus</Button></li>}</For></ul>
+              <ul class="space-y-1.5 text-sm"><For each={alerts()?.alerts || []}>{(a) => <li class="flex flex-wrap items-center gap-2">
+                {a.name}
+                <span class="text-muted-foreground">terakhir: {a.last_fired ? fmtDate(a.last_fired) : "belum pernah"}</span>
+                <span class="flex-1" /><Button variant="destructive" size="sm" onClick={() => del(a.id)}>Hapus</Button>
+              </li>}</For></ul>
             </Show>
           </CardContent>
         </Card>
@@ -122,7 +131,7 @@ function AlertsInner() {
           </CardHeader>
           <CardContent>
             <Show when={(events() || []).length} fallback={<p class="text-sm text-muted-foreground">Belum ada kejadian.</p>}>
-              <ul class="space-y-1.5 text-sm"><For each={events() || []}>{(e) => <li><Badge variant="secondary">{String(e.ticker)}</Badge> {String(e.message)}</li>}</For></ul>
+              <ul class="space-y-1.5 text-sm"><For each={events() || []}>{(e) => <li class="flex items-start gap-2"><Badge variant="secondary">{String(e.ticker)}</Badge><span class="min-w-0 flex-1">{String(e.message)}</span><span class="shrink-0 text-xs text-muted-foreground">{fmtDate(e.date)}</span></li>}</For></ul>
             </Show>
           </CardContent>
         </Card>

web/src/pages/Dashboard.tsx

@@ -38,13 +38,20 @@ export default function Dashboard() {
   };
   const sorotan = () => (screen()?.rows || []).map((r) => ({ row: r, ...verdictFor(r) }));
   const closeMap = () => Object.fromEntries((flow()?.closes || []).map((c) => [c.ticker, c]));
+  // Resolve theme-aware primary color (falls back to blue) so the chart
+  // matches light/dark instead of a hardcoded hex.
+  const primaryColor = () => {
+    const c = getComputedStyle(document.documentElement).getPropertyValue("--primary");
+    const [h, s, l] = c.trim().split(/[\s,]+/).map(Number);
+    return Number.isFinite(h) && Number.isFinite(s) && Number.isFinite(l) ? `hsl(${h} ${s}% ${l}%)` : "#3b82f6";
+  };
   const chartData = () => ({
     labels: (foreign()?.dates || []) as string[],
     datasets: [{
       label: `${chartTiker()} — uang asing harian (Rp juta)`,
       data: (foreign()?.nets || []) as number[],
-      borderColor: "#3b82f6",
+      borderColor: primaryColor(),
-      backgroundColor: "rgba(59,130,246,.15)",
+      backgroundColor: "transparent",
       fill: true,
       tension: 0.25,
     }],
@@ -99,10 +106,15 @@ export default function Dashboard() {
                 return (
                   <Card class={s.verdict === "Dilirik" ? "border-emerald-500/50" : s.verdict === "Dilepas" ? "border-red-500/50" : ""}>
                     <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-                      <CardTitle class="text-xl font-bold">
+                      <div>
-                        {s.row.symbol}
+                        <CardTitle class="text-xl font-bold">
-                        <Show when={cx?.close}><span class="ml-2 font-mono text-sm font-normal text-muted-foreground">{fmtHarga(cx.close)}</span></Show>
+                          {s.row.symbol}
-                      </CardTitle>
+                          <Show when={cx?.close}><span class="ml-2 font-mono text-sm font-normal text-muted-foreground">{fmtHarga(cx.close)}</span></Show>
+                        </CardTitle>
+                        <Show when={s.row.name && s.row.name !== s.row.symbol}>
+                          <p class="text-xs text-muted-foreground">{s.row.name}</p>
+                        </Show>
+                      </div>
                       <VerdictBadge verdict={s.verdict} />
                     </CardHeader>
                     <CardContent class="space-y-3">

web/src/pages/Portfolio.tsx

@@ -31,9 +31,22 @@ function PortfolioInner() {
     if (top.weight > 0.4) return `${top.ticker} porsinya ${(top.weight * 100).toFixed(0)}% — kebanyakan telur di satu keranjang. Pertimbangkan tambah saham beda sektor.`;
     return "Sebarannya sudah lumayan — tidak numpuk di satu tempat. Pertahankan. 👍";
   };
+  const primaryColor = () => {
+    const c = getComputedStyle(document.documentElement).getPropertyValue("--primary");
+    const [h, s, l] = c.trim().split(/[\s,]+/).map(Number);
+    return Number.isFinite(h) && Number.isFinite(s) && Number.isFinite(l) ? `hsl(${h} ${s}% ${l}%)` : "#3b82f6";
+  };
   const chartData = () => ({
     labels: conc().map((c) => c.ticker),
-    datasets: [{ label: "Porsi %", data: conc().map((c) => +(c.weight * 100).toFixed(1)) }],
+    datasets: [{
+      label: "Porsi %",
+      data: conc().map((c) => +(c.weight * 100).toFixed(1)),
+      backgroundColor: conc().map((_, i) => {
+        const alphas = ["88", "66", "44", "33", "22"];
+        return `${primaryColor()}${alphas[i % alphas.length]}`;
+      }),
+      borderRadius: 4,
+    }],
   });
   return (
     <div class="space-y-4">

web/src/pages/Routines.tsx

@@ -30,6 +30,13 @@ function RoutinesInner() {
     catch (e) { setErr(String(e)); }
     finally { setBusy(false); }
   }
+  const fmtTime = (s: unknown) => {
+    const t = String(s || "");
+    if (!t) return "—";
+    // ISO timestamp → "16 Sep 07:30" (local time).
+    const d = new Date(t);
+    return Number.isNaN(d.getTime()) ? t : d.toLocaleString("id-ID", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+  };
   async function toggle(id: number, enabled: boolean) {
     try { await api.updateRoutine(id, { enabled: !enabled }); refetch(); } catch (e) { setErr(String(e)); }
   }
@@ -93,7 +100,17 @@ function RoutinesInner() {
             <Button variant="ghost" size="sm" onClick={() => refetchRuns()}>Refresh</Button>
           </CardHeader>
           <CardContent>
-            <ul class="space-y-1 text-sm text-muted-foreground"><For each={runs() || []}>{(r) => <li>{String(r.started_at)} — {String(r.status)}</li>}</For></ul>
+            <ul class="space-y-1 text-sm text-muted-foreground">
+              <For each={runs() || []}>{(r) => (
+                <li class="flex items-center justify-between gap-2">
+                  <span class="flex items-center gap-2">
+                    <Badge variant={r.status === "ok" ? "success" : r.status === "error" ? "error" : "secondary"} class="capitalize">{String(r.status)}</Badge>
+                    <span>{fmtTime(r.started_at)}</span>
+                  </span>
+                  <span class="font-mono text-xs">{r.credits_used ? `${String(r.credits_used)} kredit` : `#${String(r.routine_id)}`}</span>
+                </li>
+              )}</For>
+            </ul>
           </CardContent>
         </Card>
       </div>