ari_assistant/design-reference/assets/approve-page.jsx

/* 아리 — 결재함 전용 페이지
   대시보드는 요약만, 실행(승인·되돌리기)은 여기서. */
const { useState } = React;
const I = window.AriShell.Icon;
const Topbar = window.AriShell.Topbar;
const A = window.AriApprovals;

const MODES = [
  {
    id: "approve", title: "승인 우선",
    desc: "모든 실행 전에 내 확인을 받아요. 아리를 알아가는 단계에 좋아요.",
  },
  {
    id: "mixed", title: "혼합", rec: true,
    desc: "되돌릴 수 있는 일(일정 이동·메일 정리)은 자동, 보내기·결제·위임은 승인 대기.",
  },
  {
    id: "auto", title: "완전 자율",
    desc: "다 해두고 보고만 해요. 모든 실행은 탭 한 번으로 되돌릴 수 있어요.",
  },
];

function App() {
  const [autonomy, setAutonomy] = useState("mixed");

  return (
    <div className="dash">
      <Topbar current="appr" />

      <div className="pagehead">
        <div>
          <div className="ph-eyebrow">
            <span>오늘 {A.savedToday} 아껴드렸어요</span>
            <span className="sep" />
            <span>밤사이 자동 처리 {A.autoCountNight}건</span>
          </div>
          <h1 className="ph-title">아리 결재함 <em>확인만 하면 끝</em></h1>
        </div>
      </div>

      <div className="work">
        <div className="board">
          {/* 결재함 본체 (approve.jsx) */}
          <ApprovalCard I={I} autonomy={autonomy} showLog={false} />

          {/* 자율성 설정 — 이 페이지의 핵심 컨트롤 */}
          <section className="card auton">
            <div className="ch">
              <div className="ico"><I d="shield" /></div>
              <div className="htext"><h3>아리 자율성</h3><div className="sub">어디까지 맡길지 정해요</div></div>
            </div>
            <div className="auton-list">
              {MODES.map((m) => (
                <button
                  key={m.id}
                  className={"au-opt" + (autonomy === m.id ? " on" : "")}
                  onClick={() => setAutonomy(m.id)}
                >
                  <span className="au-radio" />
                  <span className="au-body">
                    <span className="au-title">{m.title}{m.rec && <em className="au-rec">추천</em>}</span>
                    <span className="au-desc">{m.desc}</span>
                  </span>
                </button>
              ))}
            </div>
            <div className="auton-note">
              <I d="swap" />어떤 모드든, 아리가 한 일은 전부 기록되고 되돌릴 수 있어요.
            </div>
          </section>

          {/* 활동 로그 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="clock" /></div>
              <div className="htext"><h3>활동 로그</h3><div className="sub">아리가 조용히 한 일</div></div>
              <span className="count">{A.autoCountNight}건</span>
            </div>
            <div className="appr-log pg">
              {A.log.map((l, i) => (
                <div className="al-row" key={i}>
                  <span className="al-time">{l.time}</span>
                  <span className="al-text">{l.text}</span>
                </div>
              ))}
            </div>
            <div className="auton-note dim">
              <I d="shield" />보내기·결제·삭제는 자율 모드에서도 항상 로그에 강조 표시돼요.
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);