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.
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
// frontend/components/approvals/ApprovalsClient.tsx — 결재함 페이지 (approve-page.jsx 이식)
|
|
"use client";
|
|
import { Icon } from "@/components/Icon";
|
|
import { useApprovals } from "@/lib/hooks/useApprovals";
|
|
import { ApprovalCard } from "./ApprovalCard";
|
|
import { AutonomyCard } from "./AutonomyCard";
|
|
|
|
export function ApprovalsClient() {
|
|
const { data, error, setAutonomy, approve, undo, approveAll, reload } = useApprovals();
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="dash-error" role="alert">
|
|
<p>결재함을 불러오지 못했어요.</p>
|
|
<button className="mini-cta" onClick={() => reload()}>
|
|
<Icon name="swap" /> 다시 시도
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
if (!data) {
|
|
return (
|
|
<div className="dash-page">
|
|
<div className="pagehead">
|
|
<div>
|
|
<h1 className="ph-title">아리 결재함</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="dash-page">
|
|
<div className="pagehead">
|
|
<div>
|
|
<div className="ph-eyebrow">
|
|
<span>오늘 {data.saved_today} 아껴드렸어요</span>
|
|
<span className="sep" />
|
|
<span>밤사이 자동 처리 {data.auto_count_night}건</span>
|
|
</div>
|
|
<h1 className="ph-title">
|
|
아리 결재함 <em>확인만 하면 끝</em>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="work">
|
|
<div className="board">
|
|
<ApprovalCard
|
|
saved={data.saved_today}
|
|
pending={data.pending}
|
|
done={data.done}
|
|
onApprove={approve}
|
|
onUndo={undo}
|
|
onApproveAll={approveAll}
|
|
/>
|
|
<AutonomyCard autonomy={data.autonomy} onPick={setAutonomy} />
|
|
{/* 활동 로그 카드 — approve-page.jsx 와 동일 */}
|
|
<section className="card">
|
|
<div className="ch">
|
|
<div className="ico">
|
|
<Icon name="clock" />
|
|
</div>
|
|
<div className="htext">
|
|
<h3>활동 로그</h3>
|
|
<div className="sub">아리가 조용히 한 일</div>
|
|
</div>
|
|
<span className="count">{data.auto_count_night}건</span>
|
|
</div>
|
|
<div className="appr-log pg">
|
|
{data.log.map((l) => (
|
|
<div className="al-row" key={l.id}>
|
|
<span className="al-time">{l.time}</span>
|
|
<span className="al-text">{l.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="auton-note dim">
|
|
<Icon name="shield" />
|
|
보내기·결제·삭제는 자율 모드에서도 항상 로그에 강조 표시돼요.
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|