Processing Register Art. 30 GDPR

#	Processing activity	Purpose	Lawful basis (Art. 6)	Categories of personal data	Data subjects	Retention period	Sub-processors	Transfer outside EEA
No activities recorded

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

{activity?.id ? 'Edit processing activity' : 'Add processing activity'}

Activity name *

Purpose

</div>
            <div className="field">
              <label className="field-label">Lawful basis</label>
              <select className="field-select" value={form.lawful_basis} onChange={f('lawful_basis')}>
                {Object.entries(BASIS_LABELS).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">Data subjects</label>
              <input className="field-input" value={form.data_subjects} onChange={f('data_subjects')} placeholder="e.g. Client contacts, prospective clients" />
            </div>
            <div className="field" style={{ gridColumn: '1/-1' }}>
              <label className="field-label">Categories of personal data</label>
              <textarea className="field-input" rows={2} value={form.data_categories} onChange={f('data_categories')} placeholder="e.g. Name, email, company name, phone number" style={{ resize: 'vertical' }} />
            </div>
            <div className="field">
              <label className="field-label">Retention period</label>
              <input className="field-input" value={form.retention} onChange={f('retention')} placeholder="e.g. 7 years (AWR art. 52)" />
            </div>
            <div className="field">
              <label className="field-label">Sub-processors</label>
              <input className="field-input" value={form.processors} onChange={f('processors')} placeholder="e.g. Cloudflare, Resend" />
            </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.transfers_outside_eea} onChange={fBool('transfers_outside_eea')} />
                Personal data transferred outside the EEA
              </label>
            </div>
            {form.transfers_outside_eea && (
              <div className="field" style={{ gridColumn: '1/-1' }}>
                <label className="field-label">Transfer safeguard</label>
                <input className="field-input" value={form.transfer_safeguard} onChange={f('transfer_safeguard')} placeholder="e.g. EU SCCs + Cloudflare DPA" />
              </div>
            )}
            <div className="field" style={{ gridColumn: '1/-1' }}>
              <label className="field-label">Notes</label>
              <textarea className="field-input" rows={2} value={form.notes} onChange={f('notes')} placeholder="Any additional context or caveats" 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 Register() {
  const [activities, setActivities] = useState([]);
  const [modal, setModal]           = useState(null);
  const [loading, setLoading]       = useState(true);
  const { toast } = useApp();

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

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

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

async function handleDelete(a) {
    if (!confirm(`Delete "${a.name}"?`)) return;
    try {
      await API.del(`/art30/${a.id}`);
      setActivities(prev => prev.filter(x => x.id !== a.id));
      toast('Deleted');
    } catch (ex) { toast(ex?.error || 'Error', 'error'); }
  }

async function seedDefaults() {
    if (!confirm(`Add ${DEFAULTS.length} default Lake-Project activities to the register?`)) return;
    try {
      for (const d of DEFAULTS) await API.post('/art30', d);
      load();
      toast(`${DEFAULTS.length} activities added`);
    } catch (ex) { toast(ex?.error || 'Error', 'error'); }
  }

return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Processing register</h1>
          <div className="page-subtitle">Art. 30 GDPR/AVG — internal document</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {activities.length === 0 && !loading && (
            <button className="btn btn--ghost" onClick={seedDefaults}>Load defaults</button>
          )}
          <button className="btn btn--ghost" onClick={() => printRegister(activities)}>
            <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')}>+ Add activity</button>
        </div>
      </div>

{loading ? (
        <div style={{ color: 'var(--fg-subtle)', padding: 24, fontSize: 13 }}>Loading…</div>
      ) : activities.length === 0 ? (
        <div className="card">
          <div style={{ padding: 32, textAlign: 'center' }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg)', marginBottom: 8 }}>No processing activities yet</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 20, maxWidth: 460, margin: '0 auto 20px', lineHeight: 1.6 }}>
              GDPR Art. 30 requires maintaining a record of all processing activities. Load Lake-Project's default activities or add your own.
            </div>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
              <button className="btn btn--ghost" onClick={seedDefaults}>Load Lake-Project defaults</button>
              <button className="btn btn--primary" onClick={() => setModal('add')}>Add manually</button>
            </div>
          </div>
        </div>
      ) : (
        <div className="card" style={{ margin: 0 }}>
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th style={{ width: 32 }}>#</th>
                  <th>Activity</th>
                  <th>Purpose</th>
                  <th>Lawful basis</th>
                  <th>Retention</th>
                  <th style={{ width: 80 }}>EEA transfer</th>
                  <th style={{ width: 64 }}></th>
                </tr>
              </thead>
              <tbody>
                {activities.map((a, i) => (
                  <tr key={a.id} onClick={() => setModal(a)} style={{ cursor: 'pointer' }}>
                    <td className="mono" style={{ color: 'var(--fg-subtle)', fontSize: 11, textAlign: 'center' }}>{i + 1}</td>
                    <td style={{ fontWeight: 500 }}>{a.name}</td>
                    <td style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{a.purpose || '—'}</td>
                    <td style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-muted)' }}>
                      {BASIS_LABELS[a.lawful_basis] || a.lawful_basis || '—'}
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{a.retention || '—'}</td>
                    <td>
                      {a.transfers_outside_eea
                        ? <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--warn)', background: 'rgba(245,158,11,0.1)', padding: '2px 6px', borderRadius: 2 }}>EEA</span>
                        : <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--fg-faint)' }}>—</span>
                      }
                    </td>
                    <td onClick={e => e.stopPropagation()}>
                      <button className="btn btn--danger btn--sm" onClick={() => handleDelete(a)}>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)', display: 'flex', justifyContent: 'space-between' }}>
            <span>{activities.length} activit{activities.length === 1 ? 'y' : 'ies'} · Art. 30 GDPR · Internal document</span>
            <a href="/trust/vok" target="_blank" style={{ color: 'var(--signal)', fontSize: 11, fontFamily: 'var(--font-mono)' }}>VOK template ↗</a>
          </div>
        </div>
      )}

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

Processing Register — Art. 30 GDPR / AVG