ari_assistant/frontend/components/inbox/TodayRouted.tsx

// frontend/components/inbox/TodayRouted.tsx
"use client";
import Link from "next/link";
import { Icon } from "@/components/Icon";
import { TYPE_LABEL } from "@/lib/inbox/presentation";
import type { RouteType, UiInboxItem } from "@/lib/types";

const DEST_META: Record<RouteType, { tone: string; href: string | null }> = {
  task: { tone: "green", href: "/tasks" },
  event: { tone: "blue", href: "/dashboard" },
  idea: { tone: "violet", href: null },
};
const ORDER: RouteType[] = ["task", "event", "idea"];

export default function TodayRouted({
  items,
  todayRouted,
}: {
  items: UiInboxItem[];
  todayRouted: number;
}) {
  const routed = items.filter(
    (x) => x.classification && (x.status === "confirmed" || x.status === "classified"),
  );
  const byType = (t: RouteType) => routed.filter((x) => x.classification!.type === t);

  const subFor = (t: RouteType) => {
    const g = byType(t);
    const life = g.filter((x) => x.classification!.sphere === "life").length;
    const work = g.filter((x) => x.classification!.sphere === "work").length;
    if (t === "event") return "캘린더 등록";
    if (t === "idea") return "보드 보관";
    return `개인 ${life} · 업무 ${work}`;
  };

  return (
    <section className="card">
      <div className="ch">
        <div className="ico">
          <Icon name="arrow" />
        </div>
        <div className="htext">
          <h3>오늘 어디로 갔나</h3>
          <div className="sub">{todayRouted}건의 행선지</div>
        </div>
      </div>

      <div className="dest-list">
        {ORDER.map((t) => {
          const meta = DEST_META[t];
          const n = byType(t).length;
          const inner = (
            <>
              <span className="dest-dot" style={{ background: `var(--${meta.tone})` }} />
              <span className="dest-label">{TYPE_LABEL[t]}</span>
              <span className="dest-sub">{subFor(t)}</span>
              <span className="dest-n">{n}</span>
              {meta.href && (
                <span className="dest-go">
                  <Icon name="arrow" />
                </span>
              )}
            </>
          );
          return meta.href ? (
            <Link className="dest go" key={t} href={meta.href}>
              {inner}
            </Link>
          ) : (
            <div className="dest" key={t}>
              {inner}
            </div>
          );
        })}
      </div>

      <div className="auton-note dim">
        <Icon name="swap" />
        분류가 마음에 안 들면 칩을 눌러 바꾸세요 — 아리가 다음부터 기억해요.
      </div>
    </section>
  );
}