Data Breach Log — Lake-Project

Discovered at	Description	Severity	Data affected	# Individuals	AP notified	Individuals notified	Status
No incidents recorded

e.target === e.currentTarget && onClose()}>

{incident?.id ? 'Edit incident' : 'Log data breach incident'}

Discovered at *

Severity

Description *

</div>
            <div className="field" style={{ gridColumn: '1/-1' }}>
              <label className="field-label">Personal data affected</label>
              <textarea className="field-input" rows={2} value={form.data_affected} onChange={f('data_affected')} placeholder="Which categories of personal data were involved?" style={{ resize: 'vertical' }} />
            </div>
            <div className="field">
              <label className="field-label">Individuals affected (approx.)</label>
              <input className="field-input" type="number" min="0" value={form.individuals_affected} onChange={f('individuals_affected')} placeholder="0" />
            </div>
            <div className="field">
              <label className="field-label">Status</label>
              <select className="field-select" value={form.status} onChange={f('status')}>
                {Object.entries(STATUS_LABEL).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
              </select>
            </div>
            <div className="field" style={{ gridColumn: '1/-1' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: 'var(--fg-muted)' }}>
                <input type="checkbox" checked={form.reported_to_ap} onChange={fBool('reported_to_ap')} />
                Reported to Autoriteit Persoonsgegevens (AP)
              </label>
            </div>
            {form.reported_to_ap && (
              <div className="field" style={{ gridColumn: '1/-1' }}>
                <label className="field-label">AP notification date/time</label>
                <input className="field-input" type="datetime-local" value={form.ap_reported_at || ''} onChange={f('ap_reported_at')} />
              </div>
            )}
            <div className="field" style={{ gridColumn: '1/-1' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: 'var(--fg-muted)' }}>
                <input type="checkbox" checked={form.individuals_notified} onChange={fBool('individuals_notified')} />
                Affected individuals notified directly
              </label>
            </div>
            <div className="field" style={{ gridColumn: '1/-1' }}>
              <label className="field-label">Resolution & follow-up</label>
              <textarea className="field-input" rows={3} value={form.resolution} onChange={f('resolution')} placeholder="What was done to contain the breach, remediate, and prevent recurrence?" style={{ resize: 'vertical' }} />
            </div>
          </div>
          <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
            <button type="button" className="btn btn--ghost" onClick={onClose}>Cancel</button>
            <button type="submit" className="btn btn--primary" disabled={busy}>{busy ? 'Saving…' : 'Save'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Breaches() {
  const [incidents, setIncidents] = useState([]);
  const [modal, setModal]         = useState(null);
  const [loading, setLoading]     = useState(true);
  const { toast } = useApp();

const load = useCallback(() => {
    setLoading(true);
    API.get('/breaches')
      .then(r => { setIncidents(r || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

useEffect(() => { load(); }, [load]);

function handleSave() { setModal(null); load(); toast('Incident saved'); }

async function handleDelete(i) {
    if (!confirm(`Delete this incident? This cannot be undone.`)) return;
    try {
      await API.del(`/breaches/${i.id}`);
      setIncidents(prev => prev.filter(x => x.id !== i.id));
      toast('Deleted');
    } catch (ex) { toast(ex?.error || 'Error', 'error'); }
  }

const fmtDt = d => d ? d.slice(0, 16).replace('T', ' ') : '—';

const open        = incidents.filter(i => i.status === 'open').length;
  const investigating = incidents.filter(i => i.status === 'investigating').length;

return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Breach log</h1>
          <div className="page-subtitle">GDPR Art. 33/34 — data breach incident register</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn--ghost" onClick={() => printBreachLog(incidents)}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}>
              <polyline points="6 9 6 2 18 2 18 9" /><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2" /><rect x="6" y="14" width="12" height="8" />
            </svg>
            Print A4
          </button>
          <button className="btn btn--primary" onClick={() => setModal('add')}>+ Log incident</button>
        </div>
      </div>

{(open > 0 || investigating > 0) && (
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          {open > 0 && <div style={{ padding: '8px 14px', background: 'rgba(220,38,38,0.08)', border: '1px solid rgba(220,38,38,0.3)', borderRadius: 4, fontSize: 12, color: '#dc2626' }}>{open} open incident{open > 1 ? 's' : ''}</div>}
          {investigating > 0 && <div style={{ padding: '8px 14px', background: 'rgba(217,119,6,0.08)', border: '1px solid rgba(217,119,6,0.3)', borderRadius: 4, fontSize: 12, color: '#d97706' }}>{investigating} under investigation</div>}
        </div>
      )}

{loading ? (
        <div style={{ color: 'var(--fg-subtle)', padding: 24, fontSize: 13 }}>Loading…</div>
      ) : incidents.length === 0 ? (
        <div className="card">
          <div style={{ padding: 32, textAlign: 'center' }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg)', marginBottom: 8 }}>No incidents logged</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 20, maxWidth: 440, margin: '0 auto 20px', lineHeight: 1.6 }}>
              GDPR Art. 33(5) requires maintaining a log of all data breach incidents — including those not reported to the AP.
            </div>
            <button className="btn btn--primary" onClick={() => setModal('add')}>Log first incident</button>
          </div>
        </div>
      ) : (
        <div className="card" style={{ margin: 0 }}>
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Discovered</th>
                  <th>Description</th>
                  <th>Severity</th>
                  <th>AP notified</th>
                  <th>Individuals</th>
                  <th>Status</th>
                  <th style={{ width: 64 }}></th>
                </tr>
              </thead>
              <tbody>
                {incidents.map(i => (
                  <tr key={i.id} onClick={() => setModal(i)} style={{ cursor: 'pointer' }}>
                    <td className="mono" style={{ fontSize: 11, whiteSpace: 'nowrap' }}>{fmtDt(i.discovered_at)}</td>
                    <td style={{ fontSize: 12 }}>{i.description}</td>
                    <td>
                      <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 600, color: SEVERITY_COLOR[i.severity], background: `${SEVERITY_COLOR[i.severity]}18`, padding: '2px 6px', borderRadius: 2 }}>
                        {SEVERITY[i.severity] || i.severity}
                      </span>
                    </td>
                    <td>
                      {i.reported_to_ap
                        ? <span style={{ fontSize: 11, color: 'var(--ok)', fontFamily: 'var(--font-mono)' }}>✓ {i.ap_reported_at?.slice(0, 10) || ''}</span>
                        : <span style={{ fontSize: 11, color: 'var(--fg-faint)' }}>—</span>
                      }
                    </td>
                    <td className="mono" style={{ fontSize: 11 }}>{i.individuals_affected ?? '—'}</td>
                    <td>
                      <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 600, color: STATUS_COLOR[i.status], background: `${STATUS_COLOR[i.status]}18`, padding: '2px 6px', borderRadius: 2 }}>
                        {STATUS_LABEL[i.status] || i.status}
                      </span>
                    </td>
                    <td onClick={e => e.stopPropagation()}>
                      <button className="btn btn--danger btn--sm" onClick={() => handleDelete(i)}>Del</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ padding: '10px 20px', borderTop: '1px solid var(--border)', fontSize: 11, color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)' }}>
            {incidents.length} incident{incidents.length === 1 ? '' : 's'} · GDPR Art. 33/34 · Internal register
          </div>
        </div>
      )}

{(modal === 'add' || (modal && typeof modal === 'object')) && (
        <IncidentModal
          incident={modal === 'add' ? null : modal}
          onSave={handleSave}
          onClose={() => setModal(null)}
        />
      )}
    </div>
  );
}
window.Breaches = Breaches;

Data Breach Log — GDPR Art. 33/34 / AVG Meldplicht Datalekken