refactor(web): decompose AllocationsClient and UsersClient into focused subcomponents
AllocationsClient (1364→962 lines): extracted AllocationRow, AllocationGroupedBody, OpenDemandsPanel, and AllocationBatchDialogs. UsersClient (1338→895 lines): extracted UserEditModal and UserCreateModal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import type { PermissionKey } from "@capakraken/shared";
|
||||
import {
|
||||
SystemRole,
|
||||
PermissionKey,
|
||||
ROLE_DEFAULT_PERMISSIONS,
|
||||
MILLISECONDS_PER_DAY,
|
||||
type PermissionOverrides,
|
||||
@@ -13,29 +13,11 @@ import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
|
||||
import { InviteUserModal } from "./InviteUserModal.js";
|
||||
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
||||
import { FilterChips } from "~/components/ui/FilterChips.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
|
||||
import { useTableSort } from "~/hooks/useTableSort.js";
|
||||
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
||||
|
||||
const ALL_PERMISSION_KEYS = Object.values(PermissionKey);
|
||||
|
||||
const PERMISSION_LABELS: Record<string, string> = {
|
||||
viewPlanning: "View Planning",
|
||||
viewCosts: "View Costs",
|
||||
useAssistantAdvancedTools: "Assistant Advanced Tools",
|
||||
exportData: "Export Data",
|
||||
importData: "Import Data",
|
||||
approveVacations: "Approve Vacations",
|
||||
manageBlueprints: "Manage Blueprints",
|
||||
viewAllResources: "View All Resources",
|
||||
manageResources: "Manage Resources",
|
||||
manageProjects: "Manage Projects",
|
||||
manageAllocations: "Manage Allocations",
|
||||
manageRoles: "Manage Roles",
|
||||
manageUsers: "Manage Users",
|
||||
viewScores: "View Scores",
|
||||
};
|
||||
import { UserEditModal, type EditState } from "./UserEditModal.js";
|
||||
import { UserCreateModal, type CreateState } from "./UserCreateModal.js";
|
||||
|
||||
const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
|
||||
[SystemRole.ADMIN]: "Admin",
|
||||
@@ -75,21 +57,6 @@ type UserRow = {
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
type EditState = {
|
||||
userId: string;
|
||||
systemRole: SystemRole;
|
||||
granted: Set<string>;
|
||||
denied: Set<string>;
|
||||
chapterIds: string;
|
||||
};
|
||||
|
||||
type CreateState = {
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
systemRole: SystemRole;
|
||||
};
|
||||
|
||||
const EMPTY_CREATE: CreateState = {
|
||||
name: "",
|
||||
email: "",
|
||||
@@ -127,7 +94,6 @@ export function UsersClient() {
|
||||
staleTime: 60_000,
|
||||
});
|
||||
|
||||
// Build dynamic role defaults map from DB config (fallback to hardcoded)
|
||||
const roleDefaultsMap = useMemo(() => {
|
||||
if (!roleConfigs) return ROLE_DEFAULT_PERMISSIONS;
|
||||
const map: Record<string, string[]> = {};
|
||||
@@ -301,32 +267,6 @@ export function UsersClient() {
|
||||
setActionError(null);
|
||||
}
|
||||
|
||||
function toggleGranted(key: string) {
|
||||
if (!editState) return;
|
||||
const next = new Set(editState.granted);
|
||||
const nextDenied = new Set(editState.denied);
|
||||
if (next.has(key)) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
nextDenied.delete(key);
|
||||
}
|
||||
setEditState({ ...editState, granted: next, denied: nextDenied });
|
||||
}
|
||||
|
||||
function toggleDenied(key: string) {
|
||||
if (!editState) return;
|
||||
const next = new Set(editState.denied);
|
||||
const nextGranted = new Set(editState.granted);
|
||||
if (next.has(key)) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
nextGranted.delete(key);
|
||||
}
|
||||
setEditState({ ...editState, denied: next, granted: nextGranted });
|
||||
}
|
||||
|
||||
async function handleSaveRole() {
|
||||
if (!editState) return;
|
||||
setActionError(null);
|
||||
@@ -365,7 +305,6 @@ export function UsersClient() {
|
||||
|
||||
const allUsers = (users ?? []) as unknown as UserRow[];
|
||||
|
||||
// Client-side filtering
|
||||
const filteredUsers = allUsers.filter((u) => {
|
||||
if (search) {
|
||||
const q = search.toLowerCase();
|
||||
@@ -913,425 +852,41 @@ export function UsersClient() {
|
||||
|
||||
{/* Create User Modal */}
|
||||
{createState && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Create User
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCreateState(null);
|
||||
setActionError(null);
|
||||
}}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-5 space-y-4">
|
||||
{actionError && (
|
||||
<div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-3 py-2 text-sm text-red-700 dark:text-red-400">
|
||||
{actionError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Name <InfoTooltip content="The display name for this user account." />
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={createState.name}
|
||||
onChange={(e) => setCreateState({ ...createState, name: e.target.value })}
|
||||
placeholder="Max Mustermann"
|
||||
className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Email{" "}
|
||||
<InfoTooltip content="Login email address. Also used to auto-link the user to a resource record." />
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={createState.email}
|
||||
onChange={(e) => setCreateState({ ...createState, email: e.target.value })}
|
||||
placeholder="user@example.com"
|
||||
className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password{" "}
|
||||
<InfoTooltip content="Minimum 8 characters. Stored securely using Argon2 hashing." />
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={createState.password}
|
||||
onChange={(e) => setCreateState({ ...createState, password: e.target.value })}
|
||||
placeholder="Min. 8 characters"
|
||||
className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Role{" "}
|
||||
<InfoTooltip content="ADMIN: full system access. MANAGER: manage resources, projects, allocations. CONTROLLER: read + export financial data. USER: standard access. VIEWER: read-only." />
|
||||
</label>
|
||||
<select
|
||||
value={createState.systemRole}
|
||||
onChange={(e) =>
|
||||
setCreateState({ ...createState, systemRole: e.target.value as SystemRole })
|
||||
}
|
||||
className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
>
|
||||
{Object.values(SystemRole).map((role) => (
|
||||
<option key={role} value={role}>
|
||||
{SYSTEM_ROLE_LABELS[role]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCreateState(null);
|
||||
setActionError(null);
|
||||
}}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleCreateUser()}
|
||||
disabled={
|
||||
isPending ||
|
||||
!createState.name.trim() ||
|
||||
!createState.email.trim() ||
|
||||
createState.password.length < 8
|
||||
}
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{createUserMutation.isPending ? "Creating..." : "Create User"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UserCreateModal
|
||||
state={createState}
|
||||
actionError={actionError}
|
||||
isPending={isPending}
|
||||
createPending={createUserMutation.isPending}
|
||||
onChange={setCreateState}
|
||||
onSubmit={() => void handleCreateUser()}
|
||||
onClose={() => {
|
||||
setCreateState(null);
|
||||
setActionError(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{editState && selectedUser && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-2xl mx-4 flex flex-col max-h-[90vh]">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Edit User
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{selectedUser.name ?? selectedUser.email}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeEdit}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="overflow-y-auto flex-1 px-6 py-5 space-y-6">
|
||||
{/* User Name */}
|
||||
<section>
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
Display Name
|
||||
</h3>
|
||||
{editingName?.userId === editState.userId ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={editingName.name}
|
||||
onChange={(e) => setEditingName({ ...editingName, name: e.target.value })}
|
||||
className="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && editingName.name.trim()) {
|
||||
updateNameMutation.mutate({
|
||||
id: editingName.userId,
|
||||
name: editingName.name.trim(),
|
||||
});
|
||||
}
|
||||
if (e.key === "Escape") setEditingName(null);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
updateNameMutation.mutate({
|
||||
id: editingName.userId,
|
||||
name: editingName.name.trim(),
|
||||
})
|
||||
}
|
||||
disabled={!editingName.name.trim() || updateNameMutation.isPending}
|
||||
className="px-3 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
|
||||
>
|
||||
{updateNameMutation.isPending ? "..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingName(null)}
|
||||
className="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-900 dark:text-gray-100">
|
||||
{(users as any)?.find((u: any) => u.id === editState.userId)?.name ?? "—"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const user = (users as any)?.find((u: any) => u.id === editState.userId);
|
||||
setEditingName({ userId: editState.userId, name: user?.name ?? "" });
|
||||
}}
|
||||
className="text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* System Role */}
|
||||
<section>
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
|
||||
System Role{" "}
|
||||
<InfoTooltip content="The base role determines default permissions. Change the role and click 'Save Role' to apply. Permission overrides below can further customize access." />
|
||||
</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
value={editState.systemRole}
|
||||
onChange={(e) =>
|
||||
setEditState({ ...editState, systemRole: e.target.value as SystemRole })
|
||||
}
|
||||
className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
>
|
||||
{Object.values(SystemRole).map((role) => (
|
||||
<option key={role} value={role}>
|
||||
{SYSTEM_ROLE_LABELS[role]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveRole}
|
||||
disabled={isPending}
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{updateRoleMutation.isPending ? "Saving…" : "Save Role"}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Permissions */}
|
||||
<section>
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center">
|
||||
Permissions{" "}
|
||||
<InfoTooltip content="Permissions inherited from the role are shown with a filled checkbox. Click to override: grant additional permissions or deny role defaults." />
|
||||
</h3>
|
||||
<div className="flex gap-1.5 mb-3 text-[11px]">
|
||||
<span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<span className="inline-block w-3 h-3 rounded border border-green-400 bg-green-100 dark:bg-green-900/40" />{" "}
|
||||
Role default
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<span className="inline-block w-3 h-3 rounded border border-blue-400 bg-blue-100 dark:bg-blue-900/40" />{" "}
|
||||
Extra grant
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<span className="inline-block w-3 h-3 rounded border border-red-400 bg-red-100 dark:bg-red-900/40 relative">
|
||||
<span className="absolute inset-0 flex items-center justify-center text-red-500 text-[9px] leading-none">
|
||||
×
|
||||
</span>
|
||||
</span>{" "}
|
||||
Denied
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{ALL_PERMISSION_KEYS.map((key) => {
|
||||
const roleDefaults = new Set(roleDefaultsMap[editState.systemRole] ?? []);
|
||||
const isRoleDefault = roleDefaults.has(key as PermissionKey);
|
||||
const isGranted = editState.granted.has(key);
|
||||
const isDenied = editState.denied.has(key);
|
||||
|
||||
// Determine display state
|
||||
let state: "default" | "granted" | "denied" | "off";
|
||||
if (isDenied) state = "denied";
|
||||
else if (isGranted) state = "granted";
|
||||
else if (isRoleDefault) state = "default";
|
||||
else state = "off";
|
||||
|
||||
function cycleState() {
|
||||
if (!editState) return;
|
||||
const nextGranted = new Set(editState.granted);
|
||||
const nextDenied = new Set(editState.denied);
|
||||
|
||||
if (isRoleDefault) {
|
||||
// Role default: off → denied → off
|
||||
if (isDenied) {
|
||||
nextDenied.delete(key);
|
||||
} else {
|
||||
nextDenied.add(key);
|
||||
nextGranted.delete(key);
|
||||
}
|
||||
} else {
|
||||
// Non-default: off → granted → off
|
||||
if (isGranted) {
|
||||
nextGranted.delete(key);
|
||||
} else {
|
||||
nextGranted.add(key);
|
||||
nextDenied.delete(key);
|
||||
}
|
||||
}
|
||||
setEditState({ ...editState, granted: nextGranted, denied: nextDenied });
|
||||
}
|
||||
|
||||
const stateStyles = {
|
||||
default:
|
||||
"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800",
|
||||
granted:
|
||||
"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800",
|
||||
denied: "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800",
|
||||
off: "bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700",
|
||||
};
|
||||
|
||||
const checkStyles = {
|
||||
default: "text-green-600 border-green-300 bg-green-100 dark:bg-green-900/40",
|
||||
granted: "text-blue-600 border-blue-300 bg-blue-100 dark:bg-blue-900/40",
|
||||
denied: "text-red-600 border-red-300 bg-red-100 dark:bg-red-900/40",
|
||||
off: "text-gray-400 border-gray-300 dark:border-gray-600",
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={cycleState}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-1.5 rounded-lg border text-sm text-left transition-colors ${stateStyles[state]} hover:opacity-80`}
|
||||
>
|
||||
<span
|
||||
className={`flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center ${checkStyles[state]}`}
|
||||
>
|
||||
{state === "default" && (
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{state === "granted" && (
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{state === "denied" && (
|
||||
<span className="text-xs font-bold leading-none">×</span>
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={`flex-1 ${state === "denied" ? "line-through text-red-500 dark:text-red-400" : state === "off" ? "text-gray-500 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"}`}
|
||||
>
|
||||
{PERMISSION_LABELS[key] ?? key}
|
||||
</span>
|
||||
{state === "default" && (
|
||||
<span className="text-[10px] text-green-600 dark:text-green-400 font-medium uppercase tracking-wide">
|
||||
Role
|
||||
</span>
|
||||
)}
|
||||
{state === "granted" && (
|
||||
<span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium uppercase tracking-wide">
|
||||
Extra
|
||||
</span>
|
||||
)}
|
||||
{state === "denied" && (
|
||||
<span className="text-[10px] text-red-600 dark:text-red-400 font-medium uppercase tracking-wide">
|
||||
Denied
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Chapter Scope */}
|
||||
<div className="mt-4">
|
||||
<label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
|
||||
Chapter Scope (comma-separated IDs, leave blank for all){" "}
|
||||
<InfoTooltip content="Restrict this user's access to specific chapters/disciplines only. Leave blank to allow access to all chapters." />
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editState.chapterIds}
|
||||
onChange={(e) => setEditState({ ...editState, chapterIds: e.target.value })}
|
||||
placeholder="e.g. chapter-1, chapter-2"
|
||||
className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReset}
|
||||
disabled={isPending}
|
||||
className="px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-200 dark:border-red-700 hover:border-red-300 dark:hover:border-red-600 rounded-lg disabled:opacity-50"
|
||||
>
|
||||
{resetPermissionsMutation.isPending ? "Resetting…" : "Reset to Defaults"}
|
||||
</button>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeEdit}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSavePermissions}
|
||||
disabled={isPending}
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{setPermissionsMutation.isPending ? "Saving…" : "Save Permissions"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UserEditModal
|
||||
editState={editState}
|
||||
selectedUserName={selectedUser.name ?? selectedUser.email}
|
||||
editingName={editingName}
|
||||
roleDefaultsMap={roleDefaultsMap}
|
||||
isPending={isPending}
|
||||
updateRolePending={updateRoleMutation.isPending}
|
||||
setPermissionsPending={setPermissionsMutation.isPending}
|
||||
resetPermissionsPending={resetPermissionsMutation.isPending}
|
||||
updateNamePending={updateNameMutation.isPending}
|
||||
onEditStateChange={setEditState}
|
||||
onSaveRole={() => void handleSaveRole()}
|
||||
onSavePermissions={() => void handleSavePermissions()}
|
||||
onReset={() => void handleReset()}
|
||||
onClose={closeEdit}
|
||||
onEditingNameChange={setEditingName}
|
||||
onSaveName={(userId, name) => updateNameMutation.mutate({ id: userId, name })}
|
||||
currentName={(allUsers.find((u) => u.id === editState.userId)?.name ?? "") as string}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user