Audit detail
canonExpanded content of an Item list row that records what changed: field grid before → after, batch items, sent e-mail, note. Fills the row block slot; actions come from the caller.
Owner decision 19 Oct 2026: sub-component of the Item list family (candidate README had asked detail-block vs own family). Source acrm !5275 (K3-2, merged), approved prototype proto/asistent-audit@60ff4f48f (18 Oct 2026). The arrow is not drawn for e-mail recipient and subject (the prototype drew a stray "— →"); the narrow-row title wrapping rule lives in the audit page stylesheet, not here. Not yet AD-approved: no approvedAt, shown as beta/candidate until stamped. AD review 21 Oct 2026: returned for 3 fixes before canon. (1) ds/audit-detail.css still carries page-only rules (.acrm-audit-page .il-row .il-t, .il-col .acrm-audit-actor); move them to the audit page stylesheet. (2) .acrm-audit-empty duplicates the DS EmptyState (RULES §27) and is reused as the load-more wrapper; use EmptyState and drop the class. (3) AuditItems draws before→after as a text glyph while AuditChanges uses Icon arrow-right; unify on the Icon. Minor: the 2px mail rule should use a line token. All four fixed in acrm !5378 (merged 21 Oct 2026; page rules in pages/asistent-audit.css, DS EmptyState, load-more in .tlx-more, batch arrow = Icon arrow-right, var(--line-thick)); checked on dev 21 Oct at 1440/390 (rows expand, actor column, 0 JS errors; no batch row or empty filter in dev data, so those two were checked by tests only). AD-approved as canon 21 Oct 2026.
Used in 1 file · 1 area · 1× — pages/AsistentAuditPage
apps/web <AuditDetail> <AuditChanges> <AuditItems> <AuditMail>.acrm-audit .acrm-audit-note .acrm-audit-ch .acrm-audit-items +3SourceStoryDefault
- Fáze
- NabídkaVyjednávání
- Hodnota
- 480 000 Kč520 000 Kč
- Uzavření
- —30. 11. 2026
export const Default = () => (
<Host>
<Detail>
<Changes list={CHANGES} />
</Detail>
</Host>
);Variants
- Fáze
- NabídkaVyjednávání
- Hodnota
- 480 000 Kč520 000 Kč
- Uzavření
- —30. 11. 2026
- Brno Tech s.r.o.Vlastník: Petr Smutný → Štěpán Svoboda
- Josef NovákVlastník: Petr Smutný → Štěpán Svoboda
- Atol Capital a.s.Vlastník: Petr Smutný → Štěpán Svoboda
- a dalších 9
- Předmět
- Nabídka pro Brno Tech
Dobrý den, v příloze posílám upravenou nabídku. Platnost do konce měsíce.
export const Variants = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="field changes — before → after">
<Host>
<Detail>
<Changes list={CHANGES} />
</Detail>
</Host>
</Labeled>
<Labeled text="batch — name · field: before → after, and N more">
<Host>
<Detail>
<Items total={12} />
</Detail>
</Host>
</Labeled>
<Labeled text="sent e-mail — To / Subject / Body, no arrow">
<Host>
<Detail>
<Mail />
</Detail>
</Host>
</Labeled>
</div>
);States
Načítám…
Čeká na tvé potvrzení — zápis se provede až po schválení.
- Fáze
- NabídkaVyjednávání
- Hodnota
- 480 000 Kč520 000 Kč
export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="loading — batch items are fetched on expand">
<Host>
<Detail loading />
</Host>
</Labeled>
<Labeled text="note — pending confirmation / reverted">
<Host>
<Detail note="Čeká na tvé potvrzení — zápis se provede až po schválení.">
<Changes list={CHANGES.slice(0, 2)} />
</Detail>
</Host>
</Labeled>
<Labeled text="e-mail body hidden — only the mailbox owner sees it">
<Host>
<Detail>
<Mail hidden />
</Detail>
</Host>
</Labeled>
</div>
);Composition
export const Composition = () => {
const [open, setOpen] = useState(true);
const toggle = open ? 'Skrýt podklady' : 'Zobrazit podklady';
return (
<div style={{ width: 620 }}>
<ul className="il il-md il-embedded" role="list" aria-label="Dnes">
<li className="il-li" role="listitem">
<div className="il-row il-split" onClick={() => setOpen(!open)}>
<span className="il-lead">
<Icon name="sparkles-2" />
</span>
<span className="il-body">
<span className="il-hd">
<span className="il-t">Změnil fázi obchodu Brno Tech</span>
<span className="il-c" />
<span className="il-by">14:20</span>
</span>
{open ? (
<Detail
actions={
<>
<Button variant="ghost" compact>
<Icon name="arrow-back-up" />
Vrátit
</Button>
<Button variant="ghost" compact>
<Icon name="external-link" />
Otevřít záznam
</Button>
</>
}
>
<Changes list={CHANGES} />
</Detail>
) : null}
</span>
<span className="il-meta">
<IconButton
icon={open ? 'chevron-up' : 'chevron-down'}
size="sm"
aria-label={toggle}
aria-expanded={open}
title={toggle}
onClick={(e) => {
e.stopPropagation();
setOpen(!open);
}}
/>
</span>
</div>
</li>
<li className="il-li" role="listitem">
<div className="il-row">
<span className="il-lead">
<Icon name="plug" />
</span>
<span className="il-main">
<span className="il-l1">
<span className="il-t">
Přeřadil vlastníka <span className="acrm-count">12</span>
</span>
</span>
</span>
<span className="il-meta">13:05</span>
</div>
</li>
</ul>
</div>
);
};