Abteilungen als Ebene über der Personalakte
Punkt 3 der Wünsche. Die Abteilung stand als Freitext in der Personalakte. Damit liess sich nichts fragen: „SHD", „Shd" und „Sicherheitsdienst" waren drei Abteilungen. Sie ist jetzt ein eigenes Modell, im Adminbereich verwaltbar, und die drei vorhandenen Freitexte sind in der Migration zu Abteilungen geworden. **Eine Fallakte trägt keine Abteilung.** Sie gehört zu einer, wenn eine beteiligte Person ihr angehört — abgeleitet über CaseParticipant und die Personalakte. Eine eingetragene Zuordnung wäre nach zwei Wochen falsch: Leute wechseln, Beteiligte kommen dazu, und niemand pflegt das nach. Dasselbe gilt für die Dokumente: ein Dokument unmittelbar an der Abteilung wäre halb verdrahtet, weil die Vorlagen über TemplateUse nur Fall- und Personalakte kennen. Die Abteilungsseite zeigt Mitglieder, abgeleitete Fälle und Dokumente, Vermerke, Chat und ein Kreisdiagramm der Fallarten; die Übersicht eines über alle Abteilungen. Das Diagramm ist serverseitig gerendertes SVG — eine Bibliothek wäre das Teuerste auf der Seite gewesen. Die Segmente sind Abstufungen von --steel und nicht die Stufenfarben: ein Tortenstück in Oxidrot würde als „streng geheim" gelesen. Die Zusammenfassung ist die gefährliche Stelle. Eine Abteilungsseite fasst zusammen, was einzeln längst geschützt ist, und eine Zusammenfassung, die nicht filtert, verrät mehr als jede Einzelansicht. Deshalb läuft hier jede Liste und jede Zahl durch dieselben Fragmente wie überall; ein Test prüft, dass die Summe der Diagrammanteile mit der Länge der Liste übereinstimmt. Wo jemand Personalakten gar nicht sehen darf, steht null und keine Null. Vermerke erben Regel 2 unverändert: kein DELETE, Version bei jeder Änderung, Grabstein bei jeder Zurücknahme, als Regel und Trigger in der Datenbank. Ohne Korrekturkette, Anhänge und Karenzzeit — was Beweiswert hat, gehört in eine Fallakte. Nebenbei: das Zugriffsprotokoll hängt jetzt am dafür vorgesehenen Recht audit.read statt an admin. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harlekin
co-authored by
Claude Opus 5
Claude Opus 5
parent
970be0e320
commit
1d637bc85e
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Ein Kreisdiagramm.
|
||||
*
|
||||
* **Serverseitig gerendertes SVG, kein Skript.** Eine Diagrammbibliothek wäre
|
||||
* hier das Teuerste auf der Seite; die Rechnung ist ein Dutzend Zeilen
|
||||
* Trigonometrie, und das Ergebnis lädt ohne ein Byte JavaScript.
|
||||
*
|
||||
* Die Farben kommen **nicht** aus dem Stufensystem. Die sechs
|
||||
* Klassifizierungsfarben sind das einzige Buntsystem der Anwendung und
|
||||
* bedeuten dort etwas Bestimmtes; ein Tortenstück in Oxidrot würde als
|
||||
* „streng geheim" gelesen. Die Segmente sind deshalb Abstufungen von
|
||||
* `--steel`, von kräftig nach blass.
|
||||
*
|
||||
* Die Beschriftung steht daneben als Liste mit Zahlen, nicht nur als Farbe im
|
||||
* Kreis: Farbe allein darf keine Angabe tragen, siehe docs/10-design-system.md.
|
||||
* Damit ist das Diagramm der Schmuck und die Liste die Auskunft.
|
||||
*/
|
||||
export type Slice = { label: string; value: number }
|
||||
|
||||
const GROESSE = 160
|
||||
const RADIUS = 70
|
||||
|
||||
export function PieChart({
|
||||
slices,
|
||||
emptyLabel,
|
||||
totalLabel,
|
||||
}: {
|
||||
slices: Slice[]
|
||||
emptyLabel: string
|
||||
/** „12 Fälle" — steht in der Mitte und sagt, worauf sich die Anteile beziehen. */
|
||||
totalLabel: (total: number) => string
|
||||
}) {
|
||||
const gesamt = slices.reduce((summe, stueck) => summe + stueck.value, 0)
|
||||
if (gesamt === 0) return <p className="text-text-dim">{emptyLabel}</p>
|
||||
|
||||
let begonnen = 0
|
||||
const segmente = slices.map((stueck, index) => {
|
||||
const anteil = stueck.value / gesamt
|
||||
const start = begonnen
|
||||
begonnen += anteil
|
||||
return {
|
||||
...stueck,
|
||||
anteil,
|
||||
farbe: farbeFuer(index, slices.length),
|
||||
pfad: kreisAusschnitt(start, begonnen),
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-8">
|
||||
<svg
|
||||
width={GROESSE}
|
||||
height={GROESSE}
|
||||
viewBox={`0 0 ${GROESSE} ${GROESSE}`}
|
||||
role="img"
|
||||
aria-hidden
|
||||
className="flex-none"
|
||||
>
|
||||
{segmente.length === 1 ? (
|
||||
// Ein einziger Anteil ist ein voller Kreis. Als Pfad gezeichnet
|
||||
// würde er zu einer Linie zusammenfallen.
|
||||
<circle
|
||||
cx={GROESSE / 2}
|
||||
cy={GROESSE / 2}
|
||||
r={RADIUS}
|
||||
fill={segmente[0]!.farbe}
|
||||
stroke="var(--color-surface)"
|
||||
/>
|
||||
) : (
|
||||
segmente.map((segment) => (
|
||||
<path
|
||||
key={segment.label}
|
||||
d={segment.pfad}
|
||||
fill={segment.farbe}
|
||||
stroke="var(--color-surface)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</svg>
|
||||
|
||||
<dl className="min-w-0 grow space-y-1">
|
||||
<div className="mb-2 font-condensed text-2xs text-text-dim">{totalLabel(gesamt)}</div>
|
||||
{segmente.map((segment) => (
|
||||
<div key={segment.label} className="flex items-baseline gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className="inline-block h-2.5 w-2.5 flex-none rounded-full"
|
||||
style={{ backgroundColor: segment.farbe }}
|
||||
/>
|
||||
<dt className="min-w-0 grow truncate text-sm">{segment.label}</dt>
|
||||
<dd className="font-mono text-2xs text-text-dim">
|
||||
{segment.value} · {Math.round(segment.anteil * 100)}%
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Abstufungen von `--steel`, gleichmässig verteilt. Bei einem einzigen
|
||||
* Segment die volle Farbe, sonst von kräftig nach blass — so bleibt die
|
||||
* Reihenfolge der Liste auch im Kreis ablesbar.
|
||||
*/
|
||||
function farbeFuer(index: number, anzahl: number): string {
|
||||
if (anzahl === 1) return 'var(--color-accent)'
|
||||
const anteil = 100 - Math.round((index / (anzahl - 1)) * 65)
|
||||
return `color-mix(in srgb, var(--color-accent) ${anteil}%, var(--color-panel))`
|
||||
}
|
||||
|
||||
/** Ein Kreisausschnitt von `start` bis `ende`, beide als Anteil von 0 bis 1. */
|
||||
function kreisAusschnitt(start: number, ende: number): string {
|
||||
const mitte = GROESSE / 2
|
||||
const [x1, y1] = punkt(start)
|
||||
const [x2, y2] = punkt(ende)
|
||||
const grosserBogen = ende - start > 0.5 ? 1 : 0
|
||||
return `M ${mitte} ${mitte} L ${x1} ${y1} A ${RADIUS} ${RADIUS} 0 ${grosserBogen} 1 ${x2} ${y2} Z`
|
||||
}
|
||||
|
||||
function punkt(anteil: number): [number, number] {
|
||||
// Bei zwölf Uhr anfangen, im Uhrzeigersinn.
|
||||
const winkel = anteil * 2 * Math.PI - Math.PI / 2
|
||||
const mitte = GROESSE / 2
|
||||
return [mitte + RADIUS * Math.cos(winkel), mitte + RADIUS * Math.sin(winkel)]
|
||||
}
|
||||
Reference in New Issue
Block a user