feat: role-based permissions (owner/partner/associate/paralegal/secretary)

Backend:
- auth/permissions.go: full permission matrix with RequirePermission/RequireRole
  middleware, CanEditCase, CanDeleteDocument helpers
- auth/context.go: add user role to request context
- auth/middleware.go: resolve role alongside tenant in auth flow
- auth/tenant_resolver.go: verify membership + resolve role for X-Tenant-ID
- handlers/case_assignments.go: CRUD for case-level user assignments
- handlers/tenant_handler.go: UpdateMemberRole, GetMe (/api/me) endpoints
- handlers/documents.go: permission-based delete (own vs all)
- router/router.go: permission-wrapped routes for all endpoints
- services/case_assignment_service.go: assign/unassign with tenant validation
- services/tenant_service.go: UpdateMemberRole with owner protection
- models/case_assignment.go: CaseAssignment model

Database:
- user_tenants.role: CHECK constraint (owner/partner/associate/paralegal/secretary)
- case_assignments table: case_id, user_id, role (lead/team/viewer)
- Migrated existing admin->partner, member->associate

Frontend:
- usePermissions hook: fetches /api/me, provides can() helper
- TeamSettings: 5-role dropdown, role change, permission-gated invite
- CaseAssignments: new component for case-level team management
- Sidebar: conditionally hides AI/Settings based on permissions
- Cases page: hides "Neue Akte" button for non-authorized roles
- Case detail: new "Mitarbeiter" tab for assignment management
This commit is contained in:
m
2026-03-30 11:04:57 +02:00
parent 82878dffd5
commit 0a0ec016d8
20 changed files with 1068 additions and 104 deletions

View File

@@ -13,6 +13,7 @@ import {
Clock,
FileText,
Users,
UserCheck,
StickyNote,
AlertTriangle,
} from "lucide-react";
@@ -43,6 +44,7 @@ const TABS = [
{ segment: "fristen", label: "Fristen", icon: Clock },
{ segment: "dokumente", label: "Dokumente", icon: FileText },
{ segment: "parteien", label: "Parteien", icon: Users },
{ segment: "mitarbeiter", label: "Mitarbeiter", icon: UserCheck },
{ segment: "notizen", label: "Notizen", icon: StickyNote },
] as const;
@@ -51,6 +53,7 @@ const TAB_LABELS: Record<string, string> = {
fristen: "Fristen",
dokumente: "Dokumente",
parteien: "Parteien",
mitarbeiter: "Mitarbeiter",
notizen: "Notizen",
};

View File

@@ -0,0 +1,9 @@
"use client";
import { useParams } from "next/navigation";
import { CaseAssignments } from "@/components/cases/CaseAssignments";
export default function CaseMitarbeiterPage() {
const { id } = useParams<{ id: string }>();
return <CaseAssignments caseId={id} />;
}

View File

@@ -10,6 +10,7 @@ import { Plus, Search, FolderOpen } from "lucide-react";
import { useState } from "react";
import { SkeletonTable } from "@/components/ui/Skeleton";
import { EmptyState } from "@/components/ui/EmptyState";
import { usePermissions } from "@/lib/hooks/usePermissions";
const STATUS_OPTIONS = [
{ value: "", label: "Alle Status" },
@@ -49,6 +50,8 @@ const inputClass =
export default function CasesPage() {
const router = useRouter();
const searchParams = useSearchParams();
const { can } = usePermissions();
const canCreateCase = can("create_case");
const [search, setSearch] = useState(searchParams.get("search") ?? "");
const [status, setStatus] = useState(searchParams.get("status") ?? "");
@@ -86,13 +89,15 @@ export default function CasesPage() {
{data ? `${data.total} Akten` : "\u00A0"}
</p>
</div>
<Link
href="/cases/new"
className="inline-flex w-fit items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
>
<Plus className="h-4 w-4" />
Neue Akte
</Link>
{canCreateCase && (
<Link
href="/cases/new"
className="inline-flex w-fit items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
>
<Plus className="h-4 w-4" />
Neue Akte
</Link>
)}
</div>
<div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center">
@@ -145,7 +150,7 @@ export default function CasesPage() {
: "Erstellen Sie Ihre erste Akte, um loszulegen."
}
action={
!search && !status && !type ? (
!search && !status && !type && canCreateCase ? (
<Link
href="/cases/new"
className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"

View File

@@ -0,0 +1,180 @@
"use client";
import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { UserPlus, Trash2, Users } from "lucide-react";
import { api } from "@/lib/api";
import type { CaseAssignment, UserTenant } from "@/lib/types";
import { CASE_ASSIGNMENT_ROLE_LABELS } from "@/lib/types";
import type { CaseAssignmentRole } from "@/lib/types";
import { Skeleton } from "@/components/ui/Skeleton";
import { EmptyState } from "@/components/ui/EmptyState";
import { usePermissions } from "@/lib/hooks/usePermissions";
export function CaseAssignments({ caseId }: { caseId: string }) {
const queryClient = useQueryClient();
const { can } = usePermissions();
const canManage = can("manage_team");
const tenantId =
typeof window !== "undefined"
? localStorage.getItem("kanzlai_tenant_id")
: null;
const [selectedUser, setSelectedUser] = useState("");
const [assignRole, setAssignRole] = useState<CaseAssignmentRole>("team");
const { data, isLoading } = useQuery({
queryKey: ["case-assignments", caseId],
queryFn: () =>
api.get<{ assignments: CaseAssignment[]; total: number }>(
`/cases/${caseId}/assignments`,
),
});
const { data: members } = useQuery({
queryKey: ["tenant-members", tenantId],
queryFn: () =>
api.get<UserTenant[]>(`/tenants/${tenantId}/members`),
enabled: !!tenantId && canManage,
});
const assignMutation = useMutation({
mutationFn: (input: { user_id: string; role: string }) =>
api.post(`/cases/${caseId}/assignments`, input),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["case-assignments", caseId] });
setSelectedUser("");
toast.success("Mitarbeiter zugewiesen");
},
onError: (err: { error?: string }) => {
toast.error(err.error || "Fehler beim Zuweisen");
},
});
const unassignMutation = useMutation({
mutationFn: (userId: string) =>
api.delete(`/cases/${caseId}/assignments/${userId}`),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["case-assignments", caseId] });
toast.success("Zuweisung entfernt");
},
onError: (err: { error?: string }) => {
toast.error(err.error || "Fehler beim Entfernen");
},
});
const assignments = data?.assignments ?? [];
const assignedUserIds = new Set(assignments.map((a) => a.user_id));
const availableMembers = (members ?? []).filter(
(m) => !assignedUserIds.has(m.user_id),
);
const handleAssign = (e: React.FormEvent) => {
e.preventDefault();
if (!selectedUser) return;
assignMutation.mutate({ user_id: selectedUser, role: assignRole });
};
if (isLoading) {
return (
<div className="space-y-3">
<Skeleton className="h-10 w-full" />
<Skeleton className="h-10 w-full" />
</div>
);
}
return (
<div className="space-y-4">
<h3 className="text-sm font-semibold text-neutral-900">
Zugewiesene Mitarbeiter
</h3>
{/* Assign form — only for owners/partners */}
{canManage && availableMembers.length > 0 && (
<form onSubmit={handleAssign} className="flex flex-col gap-2 sm:flex-row">
<select
value={selectedUser}
onChange={(e) => setSelectedUser(e.target.value)}
className="flex-1 rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
>
<option value="">Mitarbeiter auswählen...</option>
{availableMembers.map((m) => (
<option key={m.user_id} value={m.user_id}>
{m.user_id.slice(0, 8)}... ({m.role})
</option>
))}
</select>
<select
value={assignRole}
onChange={(e) => setAssignRole(e.target.value as CaseAssignmentRole)}
className="rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
>
{(Object.keys(CASE_ASSIGNMENT_ROLE_LABELS) as CaseAssignmentRole[]).map(
(r) => (
<option key={r} value={r}>
{CASE_ASSIGNMENT_ROLE_LABELS[r]}
</option>
),
)}
</select>
<button
type="submit"
disabled={assignMutation.isPending || !selectedUser}
className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
>
<UserPlus className="h-3.5 w-3.5" />
Zuweisen
</button>
</form>
)}
{/* Assignments list */}
{assignments.length > 0 ? (
<div className="overflow-hidden rounded-md border border-neutral-200">
{assignments.map((a, i) => (
<div
key={a.id}
className={`flex items-center justify-between px-4 py-2.5 ${
i < assignments.length - 1 ? "border-b border-neutral-100" : ""
}`}
>
<div className="flex items-center gap-3">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-100">
<Users className="h-3.5 w-3.5 text-neutral-500" />
</div>
<div>
<p className="text-sm text-neutral-900">
{a.user_id.slice(0, 8)}...
</p>
<p className="text-xs text-neutral-500">
{CASE_ASSIGNMENT_ROLE_LABELS[a.role as CaseAssignmentRole] ??
a.role}
</p>
</div>
</div>
{canManage && (
<button
onClick={() => unassignMutation.mutate(a.user_id)}
disabled={unassignMutation.isPending}
className="rounded-md p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
title="Zuweisung entfernen"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
)}
</div>
))}
</div>
) : (
<EmptyState
icon={Users}
title="Keine Zuweisungen"
description="Noch keine Mitarbeiter zugewiesen."
/>
)}
</div>
);
}

View File

@@ -13,19 +13,32 @@ import {
X,
} from "lucide-react";
import { useState, useEffect } from "react";
import { usePermissions } from "@/lib/hooks/usePermissions";
const navigation = [
interface NavItem {
name: string;
href: string;
icon: typeof LayoutDashboard;
permission?: string;
}
const allNavigation: NavItem[] = [
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
{ name: "Akten", href: "/cases", icon: FolderOpen },
{ name: "Fristen", href: "/fristen", icon: Clock },
{ name: "Termine", href: "/termine", icon: Calendar },
{ name: "AI Analyse", href: "/ai/extract", icon: Brain },
{ name: "Einstellungen", href: "/einstellungen", icon: Settings },
{ name: "AI Analyse", href: "/ai/extract", icon: Brain, permission: "ai_extraction" },
{ name: "Einstellungen", href: "/einstellungen", icon: Settings, permission: "manage_settings" },
];
export function Sidebar() {
const pathname = usePathname();
const [mobileOpen, setMobileOpen] = useState(false);
const { can, isLoading: permLoading } = usePermissions();
const navigation = allNavigation.filter(
(item) => !item.permission || permLoading || can(item.permission),
);
// Close on route change
useEffect(() => {

View File

@@ -3,27 +3,36 @@
import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { UserPlus, Trash2, Shield, Crown, User } from "lucide-react";
import { UserPlus, Trash2, Crown, Scale, Briefcase, FileText, Phone } from "lucide-react";
import { api } from "@/lib/api";
import type { UserTenant } from "@/lib/types";
import type { UserTenant, UserRole } from "@/lib/types";
import { ROLE_LABELS } from "@/lib/types";
import { Skeleton } from "@/components/ui/Skeleton";
import { EmptyState } from "@/components/ui/EmptyState";
import { usePermissions } from "@/lib/hooks/usePermissions";
const ROLE_LABELS: Record<string, { label: string; icon: typeof Crown }> = {
owner: { label: "Eigentümer", icon: Crown },
admin: { label: "Administrator", icon: Shield },
member: { label: "Mitglied", icon: User },
const ROLE_CONFIG: Record<UserRole, { label: string; icon: typeof Crown }> = {
owner: { label: ROLE_LABELS.owner, icon: Crown },
partner: { label: ROLE_LABELS.partner, icon: Scale },
associate: { label: ROLE_LABELS.associate, icon: Briefcase },
paralegal: { label: ROLE_LABELS.paralegal, icon: FileText },
secretary: { label: ROLE_LABELS.secretary, icon: Phone },
};
const INVITE_ROLES: UserRole[] = ["partner", "associate", "paralegal", "secretary"];
export function TeamSettings() {
const queryClient = useQueryClient();
const { can, role: myRole } = usePermissions();
const tenantId =
typeof window !== "undefined"
? localStorage.getItem("kanzlai_tenant_id")
: null;
const [email, setEmail] = useState("");
const [role, setRole] = useState("member");
const [role, setRole] = useState<string>("associate");
const canManageTeam = can("manage_team");
const {
data: members,
@@ -42,7 +51,7 @@ export function TeamSettings() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenant-members"] });
setEmail("");
setRole("member");
setRole("associate");
toast.success("Benutzer eingeladen");
},
onError: (err: { error?: string }) => {
@@ -62,6 +71,19 @@ export function TeamSettings() {
},
});
const updateRoleMutation = useMutation({
mutationFn: ({ userId, newRole }: { userId: string; newRole: string }) =>
api.put(`/tenants/${tenantId}/members/${userId}/role`, { role: newRole }),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["tenant-members"] });
queryClient.invalidateQueries({ queryKey: ["me"] });
toast.success("Rolle aktualisiert");
},
onError: (err: { error?: string }) => {
toast.error(err.error || "Fehler beim Aktualisieren der Rolle");
},
});
const handleInvite = (e: React.FormEvent) => {
e.preventDefault();
if (!email.trim()) return;
@@ -81,7 +103,7 @@ export function TeamSettings() {
if (error) {
return (
<EmptyState
icon={User}
icon={Briefcase}
title="Fehler beim Laden"
description="Team-Mitglieder konnten nicht geladen werden."
/>
@@ -90,38 +112,44 @@ export function TeamSettings() {
return (
<div className="space-y-6">
{/* Invite Form */}
<form onSubmit={handleInvite} className="flex flex-col gap-3 sm:flex-row">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="name@example.com"
className="flex-1 rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
/>
<select
value={role}
onChange={(e) => setRole(e.target.value)}
className="rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
>
<option value="member">Mitglied</option>
<option value="admin">Administrator</option>
</select>
<button
type="submit"
disabled={inviteMutation.isPending || !email.trim()}
className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
>
<UserPlus className="h-3.5 w-3.5" />
{inviteMutation.isPending ? "Einladen..." : "Einladen"}
</button>
</form>
{/* Invite Form — only for owners/partners */}
{canManageTeam && (
<form onSubmit={handleInvite} className="flex flex-col gap-3 sm:flex-row">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="name@example.com"
className="flex-1 rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
/>
<select
value={role}
onChange={(e) => setRole(e.target.value)}
className="rounded-md border border-neutral-200 px-2 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
>
{INVITE_ROLES.map((r) => (
<option key={r} value={r}>
{ROLE_LABELS[r]}
</option>
))}
</select>
<button
type="submit"
disabled={inviteMutation.isPending || !email.trim()}
className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
>
<UserPlus className="h-3.5 w-3.5" />
{inviteMutation.isPending ? "Einladen..." : "Einladen"}
</button>
</form>
)}
{/* Members List */}
{Array.isArray(members) && members.length > 0 ? (
<div className="overflow-hidden rounded-md border border-neutral-200">
{members.map((member, i) => {
const roleInfo = ROLE_LABELS[member.role] || ROLE_LABELS.member;
const roleKey = (member.role as UserRole) || "associate";
const roleInfo = ROLE_CONFIG[roleKey] || ROLE_CONFIG.associate;
const RoleIcon = roleInfo.icon;
return (
<div
@@ -141,23 +169,48 @@ export function TeamSettings() {
<p className="text-xs text-neutral-500">{roleInfo.label}</p>
</div>
</div>
{member.role !== "owner" && (
<button
onClick={() => removeMutation.mutate(member.user_id)}
disabled={removeMutation.isPending}
className="rounded-md p-1.5 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
title="Mitglied entfernen"
>
<Trash2 className="h-4 w-4" />
</button>
)}
<div className="flex items-center gap-2">
{/* Role dropdown — only for owners/partners, not for the member's own row if they are owner */}
{canManageTeam && member.role !== "owner" && (
<select
value={member.role}
onChange={(e) =>
updateRoleMutation.mutate({
userId: member.user_id,
newRole: e.target.value,
})
}
disabled={updateRoleMutation.isPending}
className="rounded-md border border-neutral-200 px-2 py-1 text-xs outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
>
{myRole === "owner" && (
<option value="owner">{ROLE_LABELS.owner}</option>
)}
{INVITE_ROLES.map((r) => (
<option key={r} value={r}>
{ROLE_LABELS[r]}
</option>
))}
</select>
)}
{canManageTeam && member.role !== "owner" && (
<button
onClick={() => removeMutation.mutate(member.user_id)}
disabled={removeMutation.isPending}
className="rounded-md p-1.5 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
title="Mitglied entfernen"
>
<Trash2 className="h-4 w-4" />
</button>
)}
</div>
</div>
);
})}
</div>
) : (
<EmptyState
icon={User}
icon={Briefcase}
title="Noch keine Mitglieder"
description="Laden Sie Teammitglieder per E-Mail ein."
/>

View File

@@ -0,0 +1,29 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { UserInfo } from "@/lib/types";
export function usePermissions() {
const { data, isLoading } = useQuery({
queryKey: ["me"],
queryFn: () => api.get<UserInfo>("/me"),
staleTime: 60 * 1000,
});
const role = data?.role ?? null;
const permissions = data?.permissions ?? [];
function can(permission: string): boolean {
return permissions.includes(permission);
}
return {
role,
permissions,
can,
isLoading,
userId: data?.user_id ?? null,
tenantId: data?.tenant_id ?? null,
};
}

View File

@@ -189,6 +189,40 @@ export interface Note {
updated_at: string;
}
export interface CaseAssignment {
id: string;
case_id: string;
user_id: string;
role: string;
assigned_at: string;
}
export interface UserInfo {
user_id: string;
tenant_id: string;
role: UserRole;
permissions: string[];
}
export type UserRole = "owner" | "partner" | "associate" | "paralegal" | "secretary";
export const ROLE_LABELS: Record<UserRole, string> = {
owner: "Inhaber",
partner: "Partner",
associate: "Anwalt",
paralegal: "Paralegal",
secretary: "Sekretariat",
};
export const CASE_ASSIGNMENT_ROLES = ["lead", "team", "viewer"] as const;
export type CaseAssignmentRole = (typeof CASE_ASSIGNMENT_ROLES)[number];
export const CASE_ASSIGNMENT_ROLE_LABELS: Record<CaseAssignmentRole, string> = {
lead: "Federführend",
team: "Team",
viewer: "Einsicht",
};
export interface ApiError {
error: string;
status: number;