m.stubhan/alpenwerk-hr
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 5: Positions und Bereiche page with create/staff position modals

Browse Source
This commit is contained in:
Maximilian Stubhan
2026-07-13 22:43:09 +02:00
parent f91a69147e
commit 80cfaa1e04
9 changed files with 527 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
components/positions/PositionsPageClient.tsx Normal file
View File

@@ -0,0 +1,162 @@
"use client";
import { Plus } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { useHireWizard } from "@/components/hire/HireWizardContext";
import type { OpenPositionResolved } from "@/lib/positions";
import { CreatePositionModal } from "./CreatePositionModal";
import { StaffInternallyModal } from "./StaffInternallyModal";
type Team = {
id: string;
org_number: string;
name: string;
lead: { id: string; name: string } | null;
headcount: number;
fte: number;
openCount: number;
};
type Department = { id: string; org_number: string; name: string; teams: Team[] };
type DivisionCard = {
id: string;
org_number: string;
name: string;
head: { id: string; name: string } | null;
headcount: number;
departments: Department[];
};
type OpenPositionWithDays = OpenPositionResolved & { daysOpen: number };
type PositionsPageClientProps = {
openPositions: OpenPositionWithDays[];
divisionCards: DivisionCard[];
teams: { id: string; org_number: string; name: string; department_id: string }[];
};
export function PositionsPageClient({ openPositions, divisionCards, teams }: PositionsPageClientProps) {
const { openWizard } = useHireWizard();
const [createOpen, setCreateOpen] = useState(false);
const [staffTarget, setStaffTarget] = useState<{ id: string; title: string; is_lead: boolean } | null>(null);
return (
<div className="flex flex-col gap-6">
<div className="rounded border border-border bg-white p-4">
<div className="mb-3 flex items-center justify-between">
<h2 className="text-sm font-bold text-ink">Offene Positionen ({openPositions.length})</h2>
<button
type="button"
onClick={() => setCreateOpen(true)}
className="flex items-center gap-1.5 rounded bg-brand-500 px-3 py-1.5 text-sm font-semibold text-white hover:bg-brand-600"
>
<Plus className="h-4 w-4" />
Position ausschreiben
</button>
</div>
{openPositions.length === 0 ? (
<p className="text-sm text-ink-muted">Derzeit keine offenen Positionen.</p>
) : (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{openPositions.map((p) => (
<div key={p.id} className="rounded border border-border p-3">
<div className="text-sm font-semibold text-ink">{p.title}</div>
<div className="text-xs text-ink-muted">
{p.position_number} · {p.orgLabel}
</div>
<div className="mt-1 text-xs text-ink-muted">seit {p.daysOpen} Tagen offen</div>
<div className="mt-3 flex gap-2">
<button
type="button"
onClick={() => setStaffTarget({ id: p.id, title: p.title, is_lead: p.is_lead })}
className="flex-1 rounded bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-brand-600"
>
Intern
</button>
<button
type="button"
onClick={() => openWizard({ positionId: p.id })}
className="flex-1 rounded border border-border px-3 py-1.5 text-xs font-semibold text-ink-body hover:bg-surface"
>
Extern
</button>
</div>
</div>
))}
</div>
)}
</div>
{divisionCards.map((div) => (
<div key={div.id} className="rounded border border-border bg-white p-4">
<div className="mb-3 flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
<div>
<div className="text-xs text-ink-muted">{div.org_number}</div>
<div className="text-sm font-bold text-ink">{div.name}</div>
{div.head && (
<Link href={`/employees/${div.head.id}`} className="text-xs text-brand-700 hover:underline">
{div.head.name}
</Link>
)}
</div>
<div className="text-sm font-semibold text-ink">{div.headcount} Mitarbeiter:innen</div>
</div>
<div className="flex flex-col gap-4">
{div.departments.map((dept) => (
<div key={dept.id}>
<div className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">
{dept.org_number} · {dept.name}
</div>
<div className="overflow-x-auto">
<table className="w-full min-w-[600px] text-sm">
<thead>
<tr className="text-left text-xs text-ink-muted">
<th className="py-1 pr-3">Team</th>
<th className="py-1 pr-3">Teamleitung</th>
<th className="py-1 pr-3">Headcount</th>
<th className="py-1 pr-3">FTE</th>
<th className="py-1 pr-3">Offen</th>
</tr>
</thead>
<tbody>
{dept.teams.map((team) => (
<tr key={team.id} className="border-t border-border">
<td className="py-1.5 pr-3">
<div className="text-ink">{team.name}</div>
<div className="text-xs text-ink-muted">{team.org_number}</div>
</td>
<td className="py-1.5 pr-3 text-ink-body">
{team.lead ? (
<Link href={`/employees/${team.lead.id}`} className="hover:text-brand-700 hover:underline">
{team.lead.name}
</Link>
) : (
"–"
)}
</td>
<td className="py-1.5 pr-3 text-ink-body">{team.headcount}</td>
<td className="py-1.5 pr-3 text-ink-body">{team.fte.toFixed(1)}</td>
<td className="py-1.5 pr-3 font-semibold text-brand-700">{team.openCount || "–"}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
))}
</div>
</div>
))}
<CreatePositionModal open={createOpen} onClose={() => setCreateOpen(false)} teams={teams} />
{staffTarget && (
<StaffInternallyModal
open={Boolean(staffTarget)}
onClose={() => setStaffTarget(null)}
positionId={staffTarget.id}
positionTitle={staffTarget.title}
isLead={staffTarget.is_lead}
/>
)}
</div>
);
}