You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
// frontend/components/dashboard/ApprovalSummaryCard.tsx
|
|
"use client";
|
|
import Link from "next/link";
|
|
import { Icon } from "@/components/Icon";
|
|
import type { ApprovalSummary } from "@/lib/types";
|
|
import { MiniRow } from "./MiniRow";
|
|
|
|
export function ApprovalSummaryCard({
|
|
items,
|
|
savedToday,
|
|
pending,
|
|
}: {
|
|
items: ApprovalSummary[];
|
|
savedToday: string;
|
|
pending: number;
|
|
}) {
|
|
return (
|
|
<section className="card appr">
|
|
<div className="ch">
|
|
<div className="ico lime">
|
|
<Icon name="spark" />
|
|
</div>
|
|
<div className="htext">
|
|
<h3>아리 결재함</h3>
|
|
<div className="sub">오늘 {savedToday} 아껴드렸어요</div>
|
|
</div>
|
|
<span className="count warm">대기 {pending}건</span>
|
|
</div>
|
|
|
|
{items.length === 0 ? (
|
|
<div className="appr-empty">
|
|
<span className="ae-tick">
|
|
<Icon name="tick" w={3} />
|
|
</span>
|
|
지금은 확인할 게 없어요 — 다 처리해뒀어요.
|
|
</div>
|
|
) : (
|
|
<div className="mini-list">
|
|
{items.map((it) => (
|
|
<MiniRow key={it.id} tone={it.tone} icon={it.icon} text={it.title} sub={it.time} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* MVP: 결재함 전용 페이지는 placeholder("준비 중") */}
|
|
<Link className="mini-cta" href="/approvals" aria-label="결재함에서 승인하기 (준비 중)">
|
|
<Icon name="tick" w={3} />
|
|
결재함에서 승인하기
|
|
</Link>
|
|
</section>
|
|
);
|
|
}
|