ari_assistant/frontend/components/automation/RulesView.tsx

// frontend/components/automation/RulesView.tsx — auto.jsx RulesView 이식
"use client";
import { Icon } from "@/components/Icon";
import type { RuleOut } from "@/lib/types";
import { AU_CAT, AU_TONE, Flow } from "./Flow";

export function RulesView({ rules, toggle }: { rules: RuleOut[]; toggle: (id: string) => void }) {
  const activeN = rules.filter((r) => r.on).length;
  return (
    <div className="board">
      <section className="card sp2 r2">
        <div className="ch">
          <div className="ico">
            <Icon name="zap" />
          </div>
          <div className="htext">
            <h3>내 규칙</h3>
            <div className="sub">켜고 끄는 건 언제든지</div>
          </div>
          <span className="count">
            {activeN}/{rules.length} 켜짐
          </span>
        </div>
        <div className="rl-list">
          {rules.map((r) => (
            <div
              key={r.id}
              className={"rl-row" + (r.on ? "" : " off") + (r.fresh ? " rl-new" : "")}
            >
              <button
                className={"sw" + (r.on ? " on" : "")}
                onClick={() => toggle(r.id)}
                aria-label={r.name + (r.on ? " 끄기" : " 켜기")}
              />
              <div className="rl-body">
                <div className="rl-top">
                  <span className="rl-name">{r.name}</span>
                  <span className="rl-cat" style={{ background: AU_TONE[r.cat] }}>
                    {AU_CAT[r.cat]}
                  </span>
                </div>
                <Flow small p={{ trigger: r.trigger, cond: r.cond, action: r.action }} />
                <div className="rl-meta">
                  <span>마지막 실행 {r.last}</span>
                  <span>·</span>
                  <span>이번 주 {r.runs}회</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="card sp2">
        <div className="ch">
          <div className="ico">
            <Icon name="shield" />
          </div>
          <div className="htext">
            <h3>자동화 작동 방식</h3>
            <div className="sub">안심하고 맡기세요</div>
          </div>
        </div>
        <div className="how-list">
          <div className="how">
            <span className="how-ic">
              <Icon name="tick" />
            </span>
            <div>
              <b>되돌릴 수 있어요</b>
              <span>모든 자동 실행은 결재함에 기록되고 한 번에 되돌릴 수 있어요.</span>
            </div>
          </div>
          <div className="how">
            <span className="how-ic">
              <Icon name="shield" />
            </span>
            <div>
              <b>위험한 건 물어봐요</b>
              <span>보내기·결제·삭제는 규칙이 있어도 실행 전에 확인받아요.</span>
            </div>
          </div>
          <div className="how">
            <span className="how-ic">
              <Icon name="brain" />
            </span>
            <div>
              <b>스스로 배워요</b>
              <span>반복되는 손길을 발견하면 새 규칙을 먼저 제안해요.</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}