Visual pass, clickable KPI tiles, and one consistent definition of status
Visual - `--radius: 8px` in @theme collapsed Tailwind v4's whole radius scale onto a single value: `rounded` and `rounded-lg` both measured 8px, so a chip, an input and a card could not be told apart. Named steps restore the gradation (6 / 8 / 12px, measured in the browser). - Cards were a 1px border and nothing else. Added warm, brand-tinted elevation tokens — a neutral black shadow over the pink surface reads as dirt — in three steps for cards, dropdowns and overlays, collected behind components/ui/Card.tsx so the 26 hand-copied card class chains have one definition. - KPI tiles lead with the number and carry a tone accent; tables got denser rows, subtle row rules (the full border strength made 800 rows read as a grid), tabular figures in numeric columns and a brand-tinted hover. KPI tiles now link to the view that shows what they count. Making those links honest surfaced two reasons the numbers did not agree with their destinations: - The dashboard read `employees.status`, while every report derives status from entry/exit/karenz dates. A hire whose start date had passed before the cron ran was counted differently on the two pages. The dashboard now uses the same derivation — and one query instead of five. - Eintritte/Austritte counted `entry_date`/`exit_date` while the linked report counts `employee_history`; rehire_employee sets entry_date but logs the event as 'Wiedereintritt', so rehires were missing from the target. Both now count history events. - The employee list filtered on the status column, so it disagreed too. It now filters on derived status in SQL (lib/employee-status-filter.ts). That restates deriveStatusAsOf a second time, in a second language, so an integration test runs both over the full roster and requires identical id sets — drift here is otherwise invisible. Status semantics, per the domain correction: "aktiv" means status Aktiv alone. Karenz is employed but not active, and has its own tile. The active headcount, FTE (Karenz contributes no capacity) and the division bars all follow that; the bars are labelled "Aktive nach Bereich" rather than "Headcount" to say so. The employee filter still offers the combination, named after the two statuses it selects instead of calling the pair active. DEFAULT_STATUSES in lib/reports.ts is deliberately left at Aktiv + Karenz: it governs what the Berichte page shows without an explicit status filter, and therefore what already-saved reports and exports mean.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import Link from "next/link";
|
||||
import { Suspense } from "react";
|
||||
import { AuditFilters } from "@/components/audit/AuditFilters";
|
||||
import { CARD_CLASS } from "@/components/ui/Card";
|
||||
import { Pagination } from "@/components/ui/Pagination";
|
||||
import { actionBadgeStyle } from "@/lib/colors";
|
||||
import { sanitizeIlikeTerm } from "@/lib/supabase/query";
|
||||
@@ -61,36 +62,43 @@ export default async function AuditPage({ searchParams }: { searchParams: Promis
|
||||
</Suspense>
|
||||
<p className="text-sm text-ink-muted">{count ?? 0} Einträge</p>
|
||||
|
||||
<div className="overflow-x-auto rounded border border-border bg-white">
|
||||
<div className={`overflow-x-auto ${CARD_CLASS}`}>
|
||||
<table className="w-full min-w-[800px] text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-surface text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
|
||||
<th className="px-4 py-3">Zeitpunkt</th>
|
||||
<th className="px-4 py-3">Benutzer:in</th>
|
||||
<th className="px-4 py-3">Aktion</th>
|
||||
<th className="px-4 py-3">Objekt</th>
|
||||
<th className="px-4 py-3">Details</th>
|
||||
<tr className="border-b border-border bg-surface text-left text-[11px] font-bold uppercase tracking-wider text-ink-muted">
|
||||
<th className="px-4 py-2.5">Zeitpunkt</th>
|
||||
<th className="px-4 py-2.5">Benutzer:in</th>
|
||||
<th className="px-4 py-2.5">Aktion</th>
|
||||
<th className="px-4 py-2.5">Objekt</th>
|
||||
<th className="px-4 py-2.5">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(entries ?? []).map((entry) => {
|
||||
return (
|
||||
<tr key={entry.id} className="border-b border-border last:border-0 hover:bg-surface">
|
||||
<td className="px-4 py-3 text-ink-body">{dateTimeFormatter.format(new Date(entry.occurred_at))}</td>
|
||||
<td className="px-4 py-3 text-ink-body">{entry.actor_name}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(entry.action)}`}>{entry.action}</span>
|
||||
<tr key={entry.id} className="border-b border-border-subtle transition-colors last:border-0 hover:bg-brand-50">
|
||||
<td className="whitespace-nowrap px-4 py-2.5 tabular-nums text-ink-body">
|
||||
{dateTimeFormatter.format(new Date(entry.occurred_at))}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-ink">
|
||||
<td className="px-4 py-2.5 text-ink-body">{entry.actor_name}</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<span className={`whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-semibold ${actionBadgeStyle(entry.action)}`}>
|
||||
{entry.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-ink">
|
||||
{entry.target_employee_id ? (
|
||||
<Link href={`/employees/${entry.target_employee_id}`} className="hover:text-brand-700 hover:underline">
|
||||
<Link
|
||||
href={`/employees/${entry.target_employee_id}`}
|
||||
className="rounded font-semibold hover:text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
||||
>
|
||||
{entry.target_label}
|
||||
</Link>
|
||||
) : (
|
||||
entry.target_label
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-ink-muted">{entry.details ?? "–"}</td>
|
||||
<td className="px-4 py-2.5 text-ink-muted">{entry.details ?? "–"}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -2,9 +2,11 @@ import Link from "next/link";
|
||||
import { Suspense } from "react";
|
||||
import { EmployeeFilters } from "@/components/employees/EmployeeFilters";
|
||||
import { Avatar } from "@/components/ui/Avatar";
|
||||
import { CARD_CLASS } from "@/components/ui/Card";
|
||||
import { Pagination } from "@/components/ui/Pagination";
|
||||
import { StatusChip } from "@/components/ui/StatusChip";
|
||||
import { fmtDate } from "@/lib/format";
|
||||
import { applyDerivedStatusFilter } from "@/lib/employee-status-filter";
|
||||
import { fmtDate, todayIso } from "@/lib/format";
|
||||
import { breadcrumbFor, loadOrgMaps } from "@/lib/org";
|
||||
import { sanitizeIlikeTerm } from "@/lib/supabase/query";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
@@ -56,7 +58,17 @@ export default async function EmployeesPage({ searchParams }: EmployeesPageProps
|
||||
}
|
||||
}
|
||||
if (params.division) query = query.eq("division_id", params.division);
|
||||
if (params.status) query = query.eq("status", params.status as EmploymentStatus);
|
||||
// Comma-separated, so a dashboard tile can link here with the same
|
||||
// definition it counted — "aktiv" across this app means Aktiv *and*
|
||||
// Karenz, and a single-value filter would land the user on a smaller
|
||||
// number than the tile they clicked.
|
||||
const statuses = (params.status ?? "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter((s): s is EmploymentStatus => (["Aktiv", "Karenz", "Geplant", "Ausgetreten"] as const).includes(s as EmploymentStatus));
|
||||
// Derived from the dates, not read off employees.status — see
|
||||
// lib/employee-status-filter.ts for why the two can disagree.
|
||||
query = applyDerivedStatusFilter(query, statuses, todayIso());
|
||||
if (params.location) query = query.eq("location_id", params.location);
|
||||
|
||||
const { data: employeesData, count } = await query;
|
||||
@@ -70,17 +82,17 @@ export default async function EmployeesPage({ searchParams }: EmployeesPageProps
|
||||
</Suspense>
|
||||
<p className="text-sm text-ink-muted">{count ?? 0} Mitarbeiter:innen gefunden</p>
|
||||
|
||||
<div className="overflow-x-auto rounded border border-border bg-white">
|
||||
<div className={`overflow-x-auto ${CARD_CLASS}`}>
|
||||
<table className="w-full min-w-[800px] text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-surface text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
|
||||
<th className="px-4 py-3">Mitarbeiter:in</th>
|
||||
<th className="px-4 py-3">Pers.-Nr.</th>
|
||||
<th className="px-4 py-3">Bereich/Team</th>
|
||||
<th className="px-4 py-3">Standort</th>
|
||||
<th className="px-4 py-3">Eintritt</th>
|
||||
<th className="px-4 py-3">Beschäftigung</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<tr className="border-b border-border bg-surface text-left text-[11px] font-bold uppercase tracking-wider text-ink-muted">
|
||||
<th className="px-4 py-2.5">Mitarbeiter:in</th>
|
||||
<th className="px-4 py-2.5">Pers.-Nr.</th>
|
||||
<th className="px-4 py-2.5">Bereich/Team</th>
|
||||
<th className="px-4 py-2.5">Standort</th>
|
||||
<th className="px-4 py-2.5">Eintritt</th>
|
||||
<th className="px-4 py-2.5">Beschäftigung</th>
|
||||
<th className="px-4 py-2.5">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -88,29 +100,36 @@ export default async function EmployeesPage({ searchParams }: EmployeesPageProps
|
||||
const { division, team } = breadcrumbFor(orgMaps, e.division_id, e.team_id);
|
||||
const location = e.location_id ? orgMaps.locations.get(e.location_id) : undefined;
|
||||
return (
|
||||
<tr key={e.id} className="border-b border-border last:border-0 hover:bg-surface">
|
||||
<td className="px-4 py-3">
|
||||
<Link href={`/employees/${e.id}`} className="flex items-center gap-3">
|
||||
// border-subtle between rows: the full-strength border made
|
||||
// an 800-row table read as a grid rather than a list.
|
||||
<tr key={e.id} className="border-b border-border-subtle transition-colors last:border-0 hover:bg-brand-50">
|
||||
<td className="px-4 py-2.5">
|
||||
<Link
|
||||
href={`/employees/${e.id}`}
|
||||
className="flex items-center gap-3 rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
||||
>
|
||||
<Avatar firstName={e.first_name} lastName={e.last_name} />
|
||||
<div>
|
||||
<div className="font-semibold text-ink">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-semibold text-ink">
|
||||
{e.first_name} {e.last_name}
|
||||
</div>
|
||||
<div className="text-xs text-ink-muted">{e.job_title}</div>
|
||||
<div className="truncate text-xs text-ink-muted">{e.job_title}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-ink-body">{e.personnel_number}</td>
|
||||
<td className="px-4 py-3 text-ink-body">
|
||||
{/* tabular-nums keeps the numeric columns aligned down the
|
||||
page instead of jittering per row. */}
|
||||
<td className="px-4 py-2.5 tabular-nums text-ink-body">{e.personnel_number}</td>
|
||||
<td className="px-4 py-2.5 text-ink-body">
|
||||
<div>{division?.name ?? "–"}</div>
|
||||
<div className="text-xs text-ink-muted">{team?.name ?? "–"}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-ink-body">{location?.name ?? "–"}</td>
|
||||
<td className="px-4 py-3 text-ink-body">{fmtDate(e.entry_date)}</td>
|
||||
<td className="px-4 py-3 text-ink-body">
|
||||
{e.employment_type} · {e.weekly_hours}h
|
||||
<td className="px-4 py-2.5 text-ink-body">{location?.name ?? "–"}</td>
|
||||
<td className="px-4 py-2.5 tabular-nums text-ink-body">{fmtDate(e.entry_date)}</td>
|
||||
<td className="px-4 py-2.5 text-ink-body">
|
||||
{e.employment_type} · <span className="tabular-nums">{e.weekly_hours}h</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<td className="px-4 py-2.5">
|
||||
<StatusChip status={e.status} entryDate={e.entry_date} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { DraftsCard } from "@/components/dashboard/DraftsCard";
|
||||
import { Card, CARD_CLASS, CardTitle } from "@/components/ui/Card";
|
||||
import { actionBadgeStyle } from "@/lib/colors";
|
||||
import { addDaysIso, fmtDate, todayIso } from "@/lib/format";
|
||||
import { deriveStatusAsOf } from "@/lib/reports";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { fetchAllRows } from "@/lib/supabase/query";
|
||||
|
||||
const TONE_TEXT: Record<string, string> = {
|
||||
default: "text-ink",
|
||||
success: "text-success-text",
|
||||
danger: "text-danger-text",
|
||||
warning: "text-warning-text",
|
||||
brand: "text-brand-700",
|
||||
// Each KPI carries a colour already; the accent bar repeats it in a second
|
||||
// channel so the tiles are scannable as a row rather than six identical
|
||||
// boxes, and so the meaning does not rest on hue alone.
|
||||
const TONE: Record<string, { text: string; bar: string }> = {
|
||||
default: { text: "text-ink", bar: "bg-ink-muted" },
|
||||
success: { text: "text-success-text", bar: "bg-success-text" },
|
||||
danger: { text: "text-danger-text", bar: "bg-danger-text" },
|
||||
warning: { text: "text-warning-text", bar: "bg-warning-text" },
|
||||
brand: { text: "text-brand-700", bar: "bg-brand-500" },
|
||||
};
|
||||
|
||||
const DOT_STYLES: Record<string, string> = {
|
||||
@@ -52,36 +58,50 @@ export default async function DashboardPage() {
|
||||
const yearEnd = `${year}-12-31`;
|
||||
const in60Iso = addDaysIso(today, 60);
|
||||
|
||||
// Headcount, FTE, Karenz and the division bars all come from one full read
|
||||
// and the *derived* status, not from the `employees.status` column.
|
||||
//
|
||||
// That column only ever reflects what the last mutation or cron run wrote,
|
||||
// while every report derives status from entry/exit/karenz dates — so a
|
||||
// planned hire whose start date has passed, or a Karenz that ended without
|
||||
// anyone recording the return, made the dashboard and the Berichte page
|
||||
// disagree about the same headcount. Same derivation, same numbers.
|
||||
// It also replaces four separate count queries with one.
|
||||
const [
|
||||
activeCountRes,
|
||||
karenzCountRes,
|
||||
staffRows,
|
||||
hiresYtdRes,
|
||||
exitsYtdRes,
|
||||
openPositionsRes,
|
||||
fteRows,
|
||||
divisionsRes,
|
||||
headcountRows,
|
||||
upcomingHiresRes,
|
||||
upcomingExitsRes,
|
||||
upcomingReturnsRes,
|
||||
historyRes,
|
||||
] = await Promise.all([
|
||||
supabase.from("employees").select("id", { count: "exact", head: true }).in("status", ["Aktiv", "Karenz"]),
|
||||
supabase.from("employees").select("id", { count: "exact", head: true }).eq("status", "Karenz"),
|
||||
fetchAllRows(() =>
|
||||
supabase
|
||||
.from("employees")
|
||||
.select("weekly_hours, division_id, entry_date, exit_date, karenz_start_date, karenz_return_date")
|
||||
.order("id")
|
||||
),
|
||||
// Entries/exits count history events, which is what the linked report
|
||||
// counts too. `entry_date` would also sweep up rehires, whose event is
|
||||
// logged as 'Wiedereintritt' — the tile and its destination then showed
|
||||
// different numbers for the same year.
|
||||
supabase
|
||||
.from("employees")
|
||||
.from("employee_history")
|
||||
.select("id", { count: "exact", head: true })
|
||||
.gte("entry_date", yearStart)
|
||||
.lte("entry_date", yearEnd),
|
||||
.in("event_type", ["Eintritt", "Wiedereintritt"])
|
||||
.gte("event_date", yearStart)
|
||||
.lte("event_date", yearEnd),
|
||||
supabase
|
||||
.from("employees")
|
||||
.from("employee_history")
|
||||
.select("id", { count: "exact", head: true })
|
||||
.gte("exit_date", yearStart)
|
||||
.lte("exit_date", yearEnd),
|
||||
.eq("event_type", "Austritt")
|
||||
.gte("event_date", yearStart)
|
||||
.lte("event_date", yearEnd),
|
||||
supabase.from("positions").select("id", { count: "exact", head: true }).eq("status", "open"),
|
||||
fetchAllRows(() => supabase.from("employees").select("weekly_hours").in("status", ["Aktiv", "Karenz"]).order("id")),
|
||||
supabase.from("divisions").select("id, name"),
|
||||
fetchAllRows(() => supabase.from("employees").select("division_id").in("status", ["Aktiv", "Karenz"]).order("id")),
|
||||
supabase
|
||||
.from("employees")
|
||||
.select("id, first_name, last_name, entry_date")
|
||||
@@ -109,10 +129,22 @@ export default async function DashboardPage() {
|
||||
.limit(10),
|
||||
]);
|
||||
|
||||
const fte = fteRows.reduce((sum, row) => sum + Number(row.weekly_hours), 0) / 38.5;
|
||||
// "Aktiv" means status Aktiv — somebody on Karenz is employed but not
|
||||
// active, and is counted by its own tile instead. FTE follows the same
|
||||
// set: Karenz contributes no capacity, so including it would overstate
|
||||
// what the company can actually staff.
|
||||
//
|
||||
// Note this is narrower than DEFAULT_STATUSES in lib/reports (Aktiv +
|
||||
// Karenz), which still governs what the Berichte page shows when no
|
||||
// status filter is chosen.
|
||||
const statusOf = (row: (typeof staffRows)[number]) => deriveStatusAsOf(row, today);
|
||||
const activeStaff = staffRows.filter((row) => statusOf(row) === "Aktiv");
|
||||
const activeCount = activeStaff.length;
|
||||
const karenzCount = staffRows.filter((row) => statusOf(row) === "Karenz").length;
|
||||
const fte = activeStaff.reduce((sum, row) => sum + Number(row.weekly_hours), 0) / 38.5;
|
||||
|
||||
const headcountByDivision = new Map<string, number>();
|
||||
for (const row of headcountRows) {
|
||||
for (const row of activeStaff) {
|
||||
if (!row.division_id) continue;
|
||||
headcountByDivision.set(row.division_id, (headcountByDivision.get(row.division_id) ?? 0) + 1);
|
||||
}
|
||||
@@ -151,85 +183,131 @@ export default async function DashboardPage() {
|
||||
: { data: [] as { id: string; first_name: string; last_name: string }[] };
|
||||
const employeeNameById = new Map((historyEmployeesRes.data ?? []).map((e) => [e.id, `${e.first_name} ${e.last_name}`]));
|
||||
|
||||
// Each tile links to the view that shows what it counts, with the filters
|
||||
// pre-applied.
|
||||
//
|
||||
// Two of them cannot match exactly, and it is worth knowing which: the
|
||||
// headcount tiles filter `employees` and their targets filter the same
|
||||
// table, so those agree. Eintritte/Austritte count `employees.entry_date`
|
||||
// / `exit_date`, while the events report counts `employee_history` rows —
|
||||
// and rehire_employee sets entry_date but logs the event as
|
||||
// 'Wiedereintritt'. A year with rehires therefore shows a slightly higher
|
||||
// number on the tile than in the linked report.
|
||||
const kpis = [
|
||||
{ label: "Aktive Mitarbeiter:innen", value: activeCountRes.count ?? 0, tone: "default" },
|
||||
{ label: "FTE", value: fte.toFixed(1), tone: "default" },
|
||||
{ label: "Eintritte (Jahr)", value: hiresYtdRes.count ?? 0, tone: "success" },
|
||||
{ label: "Austritte (Jahr)", value: exitsYtdRes.count ?? 0, tone: "danger" },
|
||||
{ label: "In Karenz", value: karenzCountRes.count ?? 0, tone: "warning" },
|
||||
{ label: "Offene Positionen", value: openPositionsRes.count ?? 0, tone: "brand" },
|
||||
{
|
||||
label: "Aktive Mitarbeiter:innen",
|
||||
value: activeCount,
|
||||
tone: "default",
|
||||
href: "/employees?status=Aktiv",
|
||||
},
|
||||
{ label: "FTE", value: fte.toFixed(1), tone: "default", href: "/reports?mode=snapshot&measure=fte&status=Aktiv" },
|
||||
{
|
||||
label: "Eintritte (Jahr)",
|
||||
value: hiresYtdRes.count ?? 0,
|
||||
tone: "success",
|
||||
href: `/reports?mode=events&eventType=Eintritt&from=${yearStart}&to=${yearEnd}`,
|
||||
},
|
||||
{
|
||||
label: "Austritte (Jahr)",
|
||||
value: exitsYtdRes.count ?? 0,
|
||||
tone: "danger",
|
||||
href: `/reports?mode=events&eventType=Austritt&from=${yearStart}&to=${yearEnd}`,
|
||||
},
|
||||
{ label: "In Karenz", value: karenzCount, tone: "warning", href: "/employees?status=Karenz" },
|
||||
{ label: "Offene Positionen", value: openPositionsRes.count ?? 0, tone: "brand", href: "/positions" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{drafts && drafts.length > 0 && <DraftsCard drafts={drafts} />}
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{kpis.map((kpi) => (
|
||||
<div key={kpi.label} className="rounded border border-border bg-white p-4">
|
||||
<div className="text-xs font-semibold uppercase tracking-wide text-ink-muted">{kpi.label}</div>
|
||||
<div className={`mt-2 text-2xl font-extrabold ${TONE_TEXT[kpi.tone]}`}>{kpi.value}</div>
|
||||
</div>
|
||||
<Link
|
||||
key={kpi.label}
|
||||
href={kpi.href}
|
||||
className={`${CARD_CLASS} group relative overflow-hidden p-4 pl-5 transition-shadow hover:shadow-[var(--shadow-card-hover)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500`}
|
||||
>
|
||||
<span className={`absolute inset-y-0 left-0 w-1 ${TONE[kpi.tone].bar}`} aria-hidden />
|
||||
{/* Number first in the visual order: it is what the eye is
|
||||
looking for, and the label only qualifies it. */}
|
||||
<div className={`text-3xl font-extrabold leading-none tabular-nums ${TONE[kpi.tone].text}`}>{kpi.value}</div>
|
||||
<div className="mt-1.5 flex items-center gap-1 text-xs font-semibold leading-tight text-ink-muted">
|
||||
{kpi.label}
|
||||
<ChevronRight className="h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h2 className="mb-3 text-sm font-bold text-ink">Headcount nach Bereich</h2>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Card>
|
||||
{/* Aktive, not headcount: the bars count the same set as the tile
|
||||
above them, which excludes Karenz. */}
|
||||
<CardTitle className="mb-3">Aktive nach Bereich</CardTitle>
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{divisionBars.map((d) => (
|
||||
<div key={d.name}>
|
||||
<div className="mb-0.5 flex justify-between text-xs text-ink-body">
|
||||
<span>{d.name}</span>
|
||||
<span className="font-semibold">{d.count}</span>
|
||||
<div className="mb-1 flex justify-between text-xs">
|
||||
<span className="text-ink-body">{d.name}</span>
|
||||
<span className="font-semibold tabular-nums text-ink">{d.count}</span>
|
||||
</div>
|
||||
<div className="h-2 rounded bg-surface">
|
||||
<div className="h-2 rounded bg-brand-500" style={{ width: `${(d.count / maxDivisionCount) * 100}%` }} />
|
||||
{/* Rounded ends and a minimum width so the smallest division
|
||||
still reads as a bar rather than a stray pixel. */}
|
||||
<div className="h-1.5 overflow-hidden rounded-full bg-surface">
|
||||
<div
|
||||
className="h-full rounded-full bg-brand-500"
|
||||
style={{ width: `${Math.max(2, (d.count / maxDivisionCount) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{divisionBars.length === 0 && <p className="text-sm text-ink-muted">Keine Daten vorhanden.</p>}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h2 className="mb-3 text-sm font-bold text-ink">Anstehend (60 Tage)</h2>
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
<Card>
|
||||
<CardTitle className="mb-1">Anstehend (60 Tage)</CardTitle>
|
||||
<ul className="flex flex-col divide-y divide-border-subtle">
|
||||
{upcoming.map((item) => (
|
||||
<li key={`${item.kind}-${item.id}`}>
|
||||
<Link
|
||||
href={`/employees/${item.id}`}
|
||||
className="flex items-center justify-between py-2 text-sm hover:text-brand-700"
|
||||
className="-mx-2 flex items-center justify-between gap-2 rounded px-2 py-2.5 text-sm hover:bg-surface"
|
||||
>
|
||||
<span>
|
||||
<span className="font-semibold text-ink">{item.label}</span>
|
||||
<span className="ml-2 text-xs text-ink-muted">{KIND_LABEL[item.kind]}</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate font-semibold text-ink">{item.label}</span>
|
||||
<span className="text-xs text-ink-muted">{KIND_LABEL[item.kind]}</span>
|
||||
</span>
|
||||
<span className="text-ink-muted">{fmtDate(item.date)}</span>
|
||||
<span className="shrink-0 text-xs font-semibold tabular-nums text-ink-muted">{fmtDate(item.date)}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
{upcoming.length === 0 && <p className="py-2 text-sm text-ink-muted">Keine anstehenden Ereignisse.</p>}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h2 className="mb-3 text-sm font-bold text-ink">Letzte Aktivitäten</h2>
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
<Card>
|
||||
<CardTitle className="mb-1">Letzte Aktivitäten</CardTitle>
|
||||
<ul className="flex flex-col divide-y divide-border-subtle">
|
||||
{(historyRes.data ?? []).map((h) => (
|
||||
<li key={h.id} className="py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-block h-2 w-2 shrink-0 rounded-full ${DOT_STYLES[h.event_type] ?? "bg-ink-muted"}`} />
|
||||
<span className="text-sm font-semibold text-ink">{employeeNameById.get(h.employee_id) ?? "Unbekannt"}</span>
|
||||
<span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(h.event_type)}`}>
|
||||
{h.event_type}
|
||||
</span>
|
||||
<li key={h.id} className="flex gap-2.5 py-2.5">
|
||||
{/* Dot aligned to the first line of text, not centred on the
|
||||
whole row, so it stays put as descriptions wrap. */}
|
||||
<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${DOT_STYLES[h.event_type] ?? "bg-ink-muted"}`} aria-hidden />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span className="text-sm font-semibold text-ink">{employeeNameById.get(h.employee_id) ?? "Unbekannt"}</span>
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${actionBadgeStyle(h.event_type)}`}>
|
||||
{h.event_type}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs leading-relaxed text-ink-muted">{h.description}</p>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-ink-muted">{h.description}</p>
|
||||
</li>
|
||||
))}
|
||||
{(historyRes.data ?? []).length === 0 && <p className="py-2 text-sm text-ink-muted">Keine Aktivitäten vorhanden.</p>}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user