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:
@@ -0,0 +1,142 @@
|
|||||||
|
import { SystemRole } from "@capakraken/shared";
|
||||||
|
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||||
|
|
||||||
|
const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
|
||||||
|
[SystemRole.ADMIN]: "Admin",
|
||||||
|
[SystemRole.MANAGER]: "Manager",
|
||||||
|
[SystemRole.CONTROLLER]: "Controller",
|
||||||
|
[SystemRole.USER]: "User",
|
||||||
|
[SystemRole.VIEWER]: "Viewer",
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CreateState = {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
systemRole: SystemRole;
|
||||||
|
};
|
||||||
|
|
||||||
|
type UserCreateModalProps = {
|
||||||
|
state: CreateState;
|
||||||
|
actionError: string | null;
|
||||||
|
isPending: boolean;
|
||||||
|
createPending: boolean;
|
||||||
|
onChange: (state: CreateState) => void;
|
||||||
|
onSubmit: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function UserCreateModal({
|
||||||
|
state,
|
||||||
|
actionError,
|
||||||
|
isPending,
|
||||||
|
createPending,
|
||||||
|
onChange,
|
||||||
|
onSubmit,
|
||||||
|
onClose,
|
||||||
|
}: UserCreateModalProps) {
|
||||||
|
return (
|
||||||
|
<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={onClose}
|
||||||
|
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={state.name}
|
||||||
|
onChange={(e) => onChange({ ...state, 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={state.email}
|
||||||
|
onChange={(e) => onChange({ ...state, 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={state.password}
|
||||||
|
onChange={(e) => onChange({ ...state, 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={state.systemRole}
|
||||||
|
onChange={(e) => onChange({ ...state, 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={onClose}
|
||||||
|
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={onSubmit}
|
||||||
|
disabled={
|
||||||
|
isPending || !state.name.trim() || !state.email.trim() || state.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"
|
||||||
|
>
|
||||||
|
{createPending ? "Creating..." : "Create User"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,367 @@
|
|||||||
|
import { SystemRole, PermissionKey, type PermissionOverrides } from "@capakraken/shared";
|
||||||
|
import { InfoTooltip } from "~/components/ui/InfoTooltip.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",
|
||||||
|
};
|
||||||
|
|
||||||
|
const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
|
||||||
|
[SystemRole.ADMIN]: "Admin",
|
||||||
|
[SystemRole.MANAGER]: "Manager",
|
||||||
|
[SystemRole.CONTROLLER]: "Controller",
|
||||||
|
[SystemRole.USER]: "User",
|
||||||
|
[SystemRole.VIEWER]: "Viewer",
|
||||||
|
};
|
||||||
|
|
||||||
|
export type EditState = {
|
||||||
|
userId: string;
|
||||||
|
systemRole: SystemRole;
|
||||||
|
granted: Set<string>;
|
||||||
|
denied: Set<string>;
|
||||||
|
chapterIds: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type UserEditModalProps = {
|
||||||
|
editState: EditState;
|
||||||
|
selectedUserName: string;
|
||||||
|
editingName: { userId: string; name: string } | null;
|
||||||
|
roleDefaultsMap: Record<SystemRole, string[]>;
|
||||||
|
isPending: boolean;
|
||||||
|
updateRolePending: boolean;
|
||||||
|
setPermissionsPending: boolean;
|
||||||
|
resetPermissionsPending: boolean;
|
||||||
|
updateNamePending: boolean;
|
||||||
|
onEditStateChange: (state: EditState) => void;
|
||||||
|
onSaveRole: () => void;
|
||||||
|
onSavePermissions: () => void;
|
||||||
|
onReset: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
onEditingNameChange: (state: { userId: string; name: string } | null) => void;
|
||||||
|
onSaveName: (userId: string, name: string) => void;
|
||||||
|
currentName: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function UserEditModal({
|
||||||
|
editState,
|
||||||
|
selectedUserName,
|
||||||
|
editingName,
|
||||||
|
roleDefaultsMap,
|
||||||
|
isPending,
|
||||||
|
updateRolePending,
|
||||||
|
setPermissionsPending,
|
||||||
|
resetPermissionsPending,
|
||||||
|
updateNamePending,
|
||||||
|
onEditStateChange,
|
||||||
|
onSaveRole,
|
||||||
|
onSavePermissions,
|
||||||
|
onReset,
|
||||||
|
onClose,
|
||||||
|
onEditingNameChange,
|
||||||
|
onSaveName,
|
||||||
|
currentName,
|
||||||
|
}: UserEditModalProps) {
|
||||||
|
function cyclePermission(key: string) {
|
||||||
|
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);
|
||||||
|
|
||||||
|
const nextGranted = new Set(editState.granted);
|
||||||
|
const nextDenied = new Set(editState.denied);
|
||||||
|
|
||||||
|
if (isRoleDefault) {
|
||||||
|
if (isDenied) {
|
||||||
|
nextDenied.delete(key);
|
||||||
|
} else {
|
||||||
|
nextDenied.add(key);
|
||||||
|
nextGranted.delete(key);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isGranted) {
|
||||||
|
nextGranted.delete(key);
|
||||||
|
} else {
|
||||||
|
nextGranted.add(key);
|
||||||
|
nextDenied.delete(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onEditStateChange({ ...editState, granted: nextGranted, denied: nextDenied });
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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">{selectedUserName}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
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) => onEditingNameChange({ ...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()) {
|
||||||
|
onSaveName(editingName.userId, editingName.name.trim());
|
||||||
|
}
|
||||||
|
if (e.key === "Escape") onEditingNameChange(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onSaveName(editingName.userId, editingName.name.trim())}
|
||||||
|
disabled={!editingName.name.trim() || updateNamePending}
|
||||||
|
className="px-3 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{updateNamePending ? "..." : "Save"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onEditingNameChange(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">
|
||||||
|
{currentName || "—"}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
onEditingNameChange({ userId: editState.userId, name: currentName })
|
||||||
|
}
|
||||||
|
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) =>
|
||||||
|
onEditStateChange({ ...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={onSaveRole}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{updateRolePending ? "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);
|
||||||
|
|
||||||
|
let state: "default" | "granted" | "denied" | "off";
|
||||||
|
if (isDenied) state = "denied";
|
||||||
|
else if (isGranted) state = "granted";
|
||||||
|
else if (isRoleDefault) state = "default";
|
||||||
|
else state = "off";
|
||||||
|
|
||||||
|
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={() => cyclePermission(key)}
|
||||||
|
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) => onEditStateChange({ ...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={onReset}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{resetPermissionsPending ? "Resetting…" : "Reset to Defaults"}
|
||||||
|
</button>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
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={onSavePermissions}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
{setPermissionsPending ? "Saving…" : "Save Permissions"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useMemo } from "react";
|
import { useState, useMemo } from "react";
|
||||||
|
import type { PermissionKey } from "@capakraken/shared";
|
||||||
import {
|
import {
|
||||||
SystemRole,
|
SystemRole,
|
||||||
PermissionKey,
|
|
||||||
ROLE_DEFAULT_PERMISSIONS,
|
ROLE_DEFAULT_PERMISSIONS,
|
||||||
MILLISECONDS_PER_DAY,
|
MILLISECONDS_PER_DAY,
|
||||||
type PermissionOverrides,
|
type PermissionOverrides,
|
||||||
@@ -13,29 +13,11 @@ import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
|
|||||||
import { InviteUserModal } from "./InviteUserModal.js";
|
import { InviteUserModal } from "./InviteUserModal.js";
|
||||||
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
||||||
import { FilterChips } from "~/components/ui/FilterChips.js";
|
import { FilterChips } from "~/components/ui/FilterChips.js";
|
||||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
|
||||||
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
|
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
|
||||||
import { useTableSort } from "~/hooks/useTableSort.js";
|
import { useTableSort } from "~/hooks/useTableSort.js";
|
||||||
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
||||||
|
import { UserEditModal, type EditState } from "./UserEditModal.js";
|
||||||
const ALL_PERMISSION_KEYS = Object.values(PermissionKey);
|
import { UserCreateModal, type CreateState } from "./UserCreateModal.js";
|
||||||
|
|
||||||
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",
|
|
||||||
};
|
|
||||||
|
|
||||||
const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
|
const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
|
||||||
[SystemRole.ADMIN]: "Admin",
|
[SystemRole.ADMIN]: "Admin",
|
||||||
@@ -75,21 +57,6 @@ type UserRow = {
|
|||||||
isActive: boolean;
|
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 = {
|
const EMPTY_CREATE: CreateState = {
|
||||||
name: "",
|
name: "",
|
||||||
email: "",
|
email: "",
|
||||||
@@ -127,7 +94,6 @@ export function UsersClient() {
|
|||||||
staleTime: 60_000,
|
staleTime: 60_000,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Build dynamic role defaults map from DB config (fallback to hardcoded)
|
|
||||||
const roleDefaultsMap = useMemo(() => {
|
const roleDefaultsMap = useMemo(() => {
|
||||||
if (!roleConfigs) return ROLE_DEFAULT_PERMISSIONS;
|
if (!roleConfigs) return ROLE_DEFAULT_PERMISSIONS;
|
||||||
const map: Record<string, string[]> = {};
|
const map: Record<string, string[]> = {};
|
||||||
@@ -301,32 +267,6 @@ export function UsersClient() {
|
|||||||
setActionError(null);
|
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() {
|
async function handleSaveRole() {
|
||||||
if (!editState) return;
|
if (!editState) return;
|
||||||
setActionError(null);
|
setActionError(null);
|
||||||
@@ -365,7 +305,6 @@ export function UsersClient() {
|
|||||||
|
|
||||||
const allUsers = (users ?? []) as unknown as UserRow[];
|
const allUsers = (users ?? []) as unknown as UserRow[];
|
||||||
|
|
||||||
// Client-side filtering
|
|
||||||
const filteredUsers = allUsers.filter((u) => {
|
const filteredUsers = allUsers.filter((u) => {
|
||||||
if (search) {
|
if (search) {
|
||||||
const q = search.toLowerCase();
|
const q = search.toLowerCase();
|
||||||
@@ -913,425 +852,41 @@ export function UsersClient() {
|
|||||||
|
|
||||||
{/* Create User Modal */}
|
{/* Create User Modal */}
|
||||||
{createState && (
|
{createState && (
|
||||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
<UserCreateModal
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col">
|
state={createState}
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
actionError={actionError}
|
||||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
isPending={isPending}
|
||||||
Create User
|
createPending={createUserMutation.isPending}
|
||||||
</h2>
|
onChange={setCreateState}
|
||||||
<button
|
onSubmit={() => void handleCreateUser()}
|
||||||
type="button"
|
onClose={() => {
|
||||||
onClick={() => {
|
|
||||||
setCreateState(null);
|
setCreateState(null);
|
||||||
setActionError(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>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Edit Modal */}
|
{/* Edit Modal */}
|
||||||
{editState && selectedUser && (
|
{editState && selectedUser && (
|
||||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
<UserEditModal
|
||||||
<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]">
|
editState={editState}
|
||||||
{/* Modal Header */}
|
selectedUserName={selectedUser.name ?? selectedUser.email}
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
editingName={editingName}
|
||||||
<div>
|
roleDefaultsMap={roleDefaultsMap}
|
||||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
isPending={isPending}
|
||||||
Edit User
|
updateRolePending={updateRoleMutation.isPending}
|
||||||
</h2>
|
setPermissionsPending={setPermissionsMutation.isPending}
|
||||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
resetPermissionsPending={resetPermissionsMutation.isPending}
|
||||||
{selectedUser.name ?? selectedUser.email}
|
updateNamePending={updateNameMutation.isPending}
|
||||||
</p>
|
onEditStateChange={setEditState}
|
||||||
</div>
|
onSaveRole={() => void handleSaveRole()}
|
||||||
<button
|
onSavePermissions={() => void handleSavePermissions()}
|
||||||
type="button"
|
onReset={() => void handleReset()}
|
||||||
onClick={closeEdit}
|
onClose={closeEdit}
|
||||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
|
onEditingNameChange={setEditingName}
|
||||||
>
|
onSaveName={(userId, name) => updateNameMutation.mutate({ id: userId, name })}
|
||||||
×
|
currentName={(allUsers.find((u) => u.id === editState.userId)?.name ?? "") as string}
|
||||||
</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>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,175 @@
|
|||||||
|
import type { AllocationWithDetails, AllocationStatus } from "@capakraken/shared";
|
||||||
|
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
|
||||||
|
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
||||||
|
import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
|
||||||
|
import { BatchDateShiftModal } from "./BatchDateShiftModal.js";
|
||||||
|
|
||||||
|
const ALL_ALLOC_STATUSES = [
|
||||||
|
{ value: "PROPOSED", label: "Proposed" },
|
||||||
|
{ value: "CONFIRMED", label: "Confirmed" },
|
||||||
|
{ value: "ACTIVE", label: "Active" },
|
||||||
|
{ value: "COMPLETED", label: "Completed" },
|
||||||
|
{ value: "CANCELLED", label: "Cancelled" },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
type ConfirmDeleteState = {
|
||||||
|
single?: AllocationWithDetails;
|
||||||
|
ids?: string[];
|
||||||
|
} | null;
|
||||||
|
|
||||||
|
type ConfirmBatchStatusState = {
|
||||||
|
ids: string[];
|
||||||
|
status: string;
|
||||||
|
} | null;
|
||||||
|
|
||||||
|
type AllocationBatchDialogsProps = {
|
||||||
|
selectionCount: number;
|
||||||
|
selectedMutationIds: string[];
|
||||||
|
onClearSelection: () => void;
|
||||||
|
|
||||||
|
// Batch status picker
|
||||||
|
batchStatusPickerOpen: boolean;
|
||||||
|
onOpenBatchStatusPicker: () => void;
|
||||||
|
onCloseBatchStatusPicker: () => void;
|
||||||
|
batchStatusPending: boolean;
|
||||||
|
onBatchStatusConfirm: (ids: string[], status: AllocationStatus) => void;
|
||||||
|
|
||||||
|
// Delete
|
||||||
|
confirmDelete: ConfirmDeleteState;
|
||||||
|
onSetConfirmDelete: (state: ConfirmDeleteState) => void;
|
||||||
|
onSingleDelete: (alloc: AllocationWithDetails) => void;
|
||||||
|
onBatchDelete: (ids: string[]) => void;
|
||||||
|
batchDeletePending: boolean;
|
||||||
|
|
||||||
|
// Date shift
|
||||||
|
showDateShiftModal: boolean;
|
||||||
|
onOpenDateShiftModal: () => void;
|
||||||
|
onCloseDateShiftModal: () => void;
|
||||||
|
onDateShiftConfirm: (daysDelta: number) => void;
|
||||||
|
dateShiftPending: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AllocationBatchDialogs({
|
||||||
|
selectionCount,
|
||||||
|
selectedMutationIds,
|
||||||
|
onClearSelection,
|
||||||
|
batchStatusPickerOpen,
|
||||||
|
onOpenBatchStatusPicker,
|
||||||
|
onCloseBatchStatusPicker,
|
||||||
|
batchStatusPending,
|
||||||
|
onBatchStatusConfirm,
|
||||||
|
confirmDelete,
|
||||||
|
onSetConfirmDelete,
|
||||||
|
onSingleDelete,
|
||||||
|
onBatchDelete,
|
||||||
|
batchDeletePending,
|
||||||
|
showDateShiftModal,
|
||||||
|
onOpenDateShiftModal,
|
||||||
|
onCloseDateShiftModal,
|
||||||
|
onDateShiftConfirm,
|
||||||
|
dateShiftPending,
|
||||||
|
}: AllocationBatchDialogsProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Batch Status Picker */}
|
||||||
|
{batchStatusPickerOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center p-4"
|
||||||
|
onClick={onCloseBatchStatusPicker}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="min-w-[220px] rounded-2xl bg-white p-5 shadow-2xl dark:bg-gray-900"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
Set status for {selectionCount} allocations
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
{ALL_ALLOC_STATUSES.map((s) => (
|
||||||
|
<button
|
||||||
|
key={s.value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
onBatchStatusConfirm(selectedMutationIds, s.value as AllocationStatus);
|
||||||
|
onCloseBatchStatusPicker();
|
||||||
|
}}
|
||||||
|
className="w-full rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[s.value]}`}
|
||||||
|
>
|
||||||
|
{s.label}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Confirm single delete */}
|
||||||
|
{confirmDelete?.single && (
|
||||||
|
<ConfirmDialog
|
||||||
|
title="Delete Allocation"
|
||||||
|
message={`Delete allocation for ${confirmDelete.single.resource?.displayName ?? "resource"} on ${confirmDelete.single.project?.name ?? "project"}?`}
|
||||||
|
confirmLabel="Delete"
|
||||||
|
variant="danger"
|
||||||
|
onConfirm={() => {
|
||||||
|
onSingleDelete(confirmDelete.single!);
|
||||||
|
onSetConfirmDelete(null);
|
||||||
|
}}
|
||||||
|
onCancel={() => onSetConfirmDelete(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Confirm batch delete */}
|
||||||
|
{confirmDelete?.ids && (
|
||||||
|
<ConfirmDialog
|
||||||
|
title="Delete Allocations"
|
||||||
|
message={`Delete ${confirmDelete.ids.length} selected allocation${confirmDelete.ids.length !== 1 ? "s" : ""}? This cannot be undone.`}
|
||||||
|
confirmLabel="Delete All"
|
||||||
|
variant="danger"
|
||||||
|
onConfirm={() => {
|
||||||
|
onBatchDelete(confirmDelete.ids!);
|
||||||
|
onSetConfirmDelete(null);
|
||||||
|
}}
|
||||||
|
onCancel={() => onSetConfirmDelete(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Batch Action Bar */}
|
||||||
|
<BatchActionBar
|
||||||
|
count={selectionCount}
|
||||||
|
onClear={onClearSelection}
|
||||||
|
actions={[
|
||||||
|
{
|
||||||
|
label: "Set Status…",
|
||||||
|
onClick: onOpenBatchStatusPicker,
|
||||||
|
disabled: batchStatusPending,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Shift Dates…",
|
||||||
|
onClick: onOpenDateShiftModal,
|
||||||
|
disabled: dateShiftPending,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: `Delete (${selectionCount})`,
|
||||||
|
variant: "danger",
|
||||||
|
onClick: () => onSetConfirmDelete({ ids: selectedMutationIds }),
|
||||||
|
disabled: batchDeletePending,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Batch date shift modal */}
|
||||||
|
{showDateShiftModal && (
|
||||||
|
<BatchDateShiftModal
|
||||||
|
count={selectionCount}
|
||||||
|
isPending={dateShiftPending}
|
||||||
|
onConfirm={onDateShiftConfirm}
|
||||||
|
onClose={onCloseDateShiftModal}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
|
||||||
|
import type { CollapsedAllocationGroups } from "./allocationGroupState.js";
|
||||||
|
import { formatDate } from "~/lib/format.js";
|
||||||
|
import { AllocationRow } from "./AllocationRow.js";
|
||||||
|
|
||||||
|
type ProjectSubGroup = {
|
||||||
|
projectId: string;
|
||||||
|
projectName: string;
|
||||||
|
projectCode: string;
|
||||||
|
allocations: AllocationWithDetails[];
|
||||||
|
typicalHoursPerDay: number;
|
||||||
|
earliestStart: Date;
|
||||||
|
latestEnd: Date;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AllocGroup = {
|
||||||
|
resourceId: string;
|
||||||
|
resourceName: string;
|
||||||
|
eid: string;
|
||||||
|
chapter: string | null;
|
||||||
|
allocations: AllocationWithDetails[];
|
||||||
|
projectSubGroups: ProjectSubGroup[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Fragment wrapper for grouped rows — avoids unnecessary DOM nodes */
|
||||||
|
function GroupRows({ children }: { children: React.ReactNode }) {
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
type AllocationGroupedBodyProps = {
|
||||||
|
groups: AllocGroup[];
|
||||||
|
collapsedGroups: CollapsedAllocationGroups;
|
||||||
|
expandedSubGroups: Set<string>;
|
||||||
|
visibleColumns: ColumnDef[];
|
||||||
|
selectedIds: Set<string>;
|
||||||
|
isAllSelected: (ids: string[]) => boolean;
|
||||||
|
isIndeterminate?: (ids: string[]) => boolean;
|
||||||
|
onToggleSelection: (id: string) => void;
|
||||||
|
onToggleAllSelection: (ids: string[]) => void;
|
||||||
|
onToggleGroup: (resourceId: string) => void;
|
||||||
|
onToggleSubGroup: (resourceId: string, projectId: string) => void;
|
||||||
|
onEdit: (alloc: AllocationWithDetails) => void;
|
||||||
|
onRequestDelete: (alloc: AllocationWithDetails) => void;
|
||||||
|
deleteDisabled: boolean;
|
||||||
|
formatPeriod: (alloc: AllocationWithDetails) => string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AllocationGroupedBody({
|
||||||
|
groups,
|
||||||
|
collapsedGroups,
|
||||||
|
expandedSubGroups,
|
||||||
|
visibleColumns,
|
||||||
|
selectedIds,
|
||||||
|
isAllSelected,
|
||||||
|
onToggleSelection,
|
||||||
|
onToggleAllSelection,
|
||||||
|
onToggleGroup,
|
||||||
|
onToggleSubGroup,
|
||||||
|
onEdit,
|
||||||
|
onRequestDelete,
|
||||||
|
deleteDisabled,
|
||||||
|
formatPeriod,
|
||||||
|
}: AllocationGroupedBodyProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{groups.map((group) => {
|
||||||
|
const isCollapsed = collapsedGroups === "all" || collapsedGroups.has(group.resourceId);
|
||||||
|
const groupAllocIds = group.allocations.map((a) => a.id);
|
||||||
|
const allGroupSelected = isAllSelected(groupAllocIds);
|
||||||
|
const groupIndeterminate =
|
||||||
|
!allGroupSelected && groupAllocIds.some((id) => selectedIds.has(id));
|
||||||
|
return (
|
||||||
|
<GroupRows key={group.resourceId}>
|
||||||
|
{/* Group header */}
|
||||||
|
<tr
|
||||||
|
data-testid="allocation-group-header"
|
||||||
|
className="bg-gray-50 dark:bg-gray-800/50 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-800/80 transition-colors"
|
||||||
|
onClick={() => onToggleGroup(group.resourceId)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
onToggleGroup(group.resourceId);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
aria-expanded={!isCollapsed}
|
||||||
|
>
|
||||||
|
<td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={allGroupSelected}
|
||||||
|
ref={(el) => {
|
||||||
|
if (el) el.indeterminate = groupIndeterminate;
|
||||||
|
}}
|
||||||
|
onChange={() => onToggleAllSelection(groupAllocIds)}
|
||||||
|
className="rounded border-gray-300 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td colSpan={visibleColumns.length + 1} className="px-4 py-2.5">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-gray-400 dark:text-gray-500 text-xs">
|
||||||
|
{isCollapsed ? "▸" : "▾"}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{group.resourceName}
|
||||||
|
</span>
|
||||||
|
{group.eid && (
|
||||||
|
<span className="text-xs font-mono text-gray-400 dark:text-gray-500">
|
||||||
|
{group.eid}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{group.chapter && (
|
||||||
|
<span className="text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
· {group.chapter}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
||||||
|
{group.allocations.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Project sub-groups within person */}
|
||||||
|
{!isCollapsed &&
|
||||||
|
group.projectSubGroups.map((subGroup) => {
|
||||||
|
const subKey = `${group.resourceId}::${subGroup.projectId}`;
|
||||||
|
const isSubExpanded = expandedSubGroups.has(subKey);
|
||||||
|
|
||||||
|
// Single allocation for this project — render directly, no sub-group header
|
||||||
|
if (subGroup.allocations.length === 1) {
|
||||||
|
const alloc = subGroup.allocations[0]!;
|
||||||
|
return (
|
||||||
|
<GroupRows key={subKey}>
|
||||||
|
<AllocationRow
|
||||||
|
alloc={alloc}
|
||||||
|
visibleColumns={visibleColumns}
|
||||||
|
isGrouped
|
||||||
|
rowIndex={0}
|
||||||
|
isSelected={selectedIds.has(alloc.id)}
|
||||||
|
onToggleSelection={() => onToggleSelection(alloc.id)}
|
||||||
|
onEdit={() => onEdit(alloc)}
|
||||||
|
onRequestDelete={() => onRequestDelete(alloc)}
|
||||||
|
deleteDisabled={deleteDisabled}
|
||||||
|
formatPeriod={formatPeriod}
|
||||||
|
/>
|
||||||
|
</GroupRows>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Multiple allocations — show collapsible project sub-group
|
||||||
|
const subAllocIds = subGroup.allocations.map((a) => a.id);
|
||||||
|
const allSubSelected = isAllSelected(subAllocIds);
|
||||||
|
const subIndeterminate =
|
||||||
|
!allSubSelected && subAllocIds.some((id) => selectedIds.has(id));
|
||||||
|
return (
|
||||||
|
<GroupRows key={subKey}>
|
||||||
|
<tr
|
||||||
|
data-testid="allocation-subgroup-header"
|
||||||
|
className="bg-gray-25 dark:bg-gray-850/30 cursor-pointer select-none hover:bg-gray-100/60 dark:hover:bg-gray-800/40 transition-colors"
|
||||||
|
onClick={() => onToggleSubGroup(group.resourceId, subGroup.projectId)}
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
aria-expanded={isSubExpanded}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
onToggleSubGroup(group.resourceId, subGroup.projectId);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<td className="px-4 py-2" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={allSubSelected}
|
||||||
|
ref={(el) => {
|
||||||
|
if (el) el.indeterminate = subIndeterminate;
|
||||||
|
}}
|
||||||
|
onChange={() => onToggleAllSelection(subAllocIds)}
|
||||||
|
className="rounded border-gray-300 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td colSpan={visibleColumns.length + 1} className="px-4 py-2">
|
||||||
|
<div className="flex items-center gap-2 pl-4">
|
||||||
|
<span className="text-gray-400 dark:text-gray-500 text-xs">
|
||||||
|
{isSubExpanded ? "▾" : "▸"}
|
||||||
|
</span>
|
||||||
|
<span className="font-mono text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
{subGroup.projectCode}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
{subGroup.projectName}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
{formatDate(subGroup.earliestStart)} → {formatDate(subGroup.latestEnd)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{subGroup.typicalHoursPerDay}h/day
|
||||||
|
</span>
|
||||||
|
<span className="inline-flex items-center rounded-full bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-400">
|
||||||
|
{subGroup.allocations.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{isSubExpanded &&
|
||||||
|
subGroup.allocations.map((alloc, idx) => (
|
||||||
|
<AllocationRow
|
||||||
|
key={alloc.id}
|
||||||
|
alloc={alloc}
|
||||||
|
visibleColumns={visibleColumns}
|
||||||
|
isGrouped
|
||||||
|
rowIndex={idx}
|
||||||
|
isSelected={selectedIds.has(alloc.id)}
|
||||||
|
onToggleSelection={() => onToggleSelection(alloc.id)}
|
||||||
|
onEdit={() => onEdit(alloc)}
|
||||||
|
onRequestDelete={() => onRequestDelete(alloc)}
|
||||||
|
deleteDisabled={deleteDisabled}
|
||||||
|
formatPeriod={formatPeriod}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</GroupRows>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</GroupRows>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
|
||||||
|
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
|
||||||
|
|
||||||
|
const STATUS_LEFT_BORDER: Record<string, string> = {
|
||||||
|
ACTIVE: "border-l-green-500",
|
||||||
|
PROPOSED: "border-l-amber-500",
|
||||||
|
CONFIRMED: "border-l-blue-500",
|
||||||
|
COMPLETED: "border-l-gray-400",
|
||||||
|
CANCELLED: "border-l-red-500",
|
||||||
|
};
|
||||||
|
|
||||||
|
type AllocationRowProps = {
|
||||||
|
alloc: AllocationWithDetails;
|
||||||
|
visibleColumns: ColumnDef[];
|
||||||
|
isGrouped?: boolean;
|
||||||
|
rowIndex?: number;
|
||||||
|
isSelected: boolean;
|
||||||
|
onToggleSelection: () => void;
|
||||||
|
onEdit: () => void;
|
||||||
|
onRequestDelete: () => void;
|
||||||
|
deleteDisabled: boolean;
|
||||||
|
formatPeriod: (alloc: AllocationWithDetails) => string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AllocationRow({
|
||||||
|
alloc,
|
||||||
|
visibleColumns,
|
||||||
|
isGrouped = false,
|
||||||
|
rowIndex = 0,
|
||||||
|
isSelected,
|
||||||
|
onToggleSelection,
|
||||||
|
onEdit,
|
||||||
|
onRequestDelete,
|
||||||
|
deleteDisabled,
|
||||||
|
formatPeriod,
|
||||||
|
}: AllocationRowProps) {
|
||||||
|
const leftBorder = STATUS_LEFT_BORDER[alloc.status] ?? "border-l-gray-300";
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={alloc.id}
|
||||||
|
data-testid="allocation-row"
|
||||||
|
className={`border-l-[3px] transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${leftBorder} ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
||||||
|
style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}
|
||||||
|
>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={isSelected}
|
||||||
|
onChange={onToggleSelection}
|
||||||
|
className="rounded border-gray-300 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{visibleColumns.map((col) => {
|
||||||
|
switch (col.key) {
|
||||||
|
case "resource":
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
key={col.key}
|
||||||
|
className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100"
|
||||||
|
>
|
||||||
|
{isGrouped ? (
|
||||||
|
<span className="text-gray-400 dark:text-gray-500">↳</span>
|
||||||
|
) : (
|
||||||
|
(alloc.resource?.displayName ?? "—")
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
case "project":
|
||||||
|
return (
|
||||||
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
|
||||||
|
{alloc.project ? (
|
||||||
|
<>
|
||||||
|
<span className="font-mono text-xs">{alloc.project.shortCode}</span>{" "}
|
||||||
|
{alloc.project.name}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"—"
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
case "role":
|
||||||
|
return (
|
||||||
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
|
||||||
|
{alloc.role}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
case "dates":
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
key={col.key}
|
||||||
|
className="whitespace-nowrap px-4 py-3 text-xs text-gray-500 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
{formatPeriod(alloc)}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
case "hoursPerDay":
|
||||||
|
return (
|
||||||
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
||||||
|
{alloc.hoursPerDay}h
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
case "cost":
|
||||||
|
return (
|
||||||
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
||||||
|
{(alloc.dailyCostCents / 100).toFixed(0)} €
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
case "status":
|
||||||
|
return (
|
||||||
|
<td key={col.key} className="px-4 py-3">
|
||||||
|
<span
|
||||||
|
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[alloc.status] ?? "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"}`}
|
||||||
|
>
|
||||||
|
{alloc.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return (
|
||||||
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
—
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<button type="button" onClick={onEdit} className="app-action-edit">
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onRequestDelete}
|
||||||
|
disabled={deleteDisabled}
|
||||||
|
className="app-action-delete disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -16,8 +16,6 @@ import type {
|
|||||||
} from "@capakraken/shared";
|
} from "@capakraken/shared";
|
||||||
import { ALLOCATION_COLUMNS } from "@capakraken/shared";
|
import { ALLOCATION_COLUMNS } from "@capakraken/shared";
|
||||||
import { useSelection } from "~/hooks/useSelection.js";
|
import { useSelection } from "~/hooks/useSelection.js";
|
||||||
import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
|
|
||||||
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
|
||||||
import { FilterBar } from "~/components/ui/FilterBar.js";
|
import { FilterBar } from "~/components/ui/FilterBar.js";
|
||||||
import { FilterChips } from "~/components/ui/FilterChips.js";
|
import { FilterChips } from "~/components/ui/FilterChips.js";
|
||||||
import { ResourceCombobox } from "~/components/ui/ResourceCombobox.js";
|
import { ResourceCombobox } from "~/components/ui/ResourceCombobox.js";
|
||||||
@@ -29,10 +27,8 @@ import { usePermissions } from "~/hooks/usePermissions.js";
|
|||||||
import { useColumnConfig } from "~/hooks/useColumnConfig.js";
|
import { useColumnConfig } from "~/hooks/useColumnConfig.js";
|
||||||
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
||||||
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
||||||
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
|
|
||||||
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
||||||
import { EmptyState } from "~/components/ui/EmptyState.js";
|
import { EmptyState } from "~/components/ui/EmptyState.js";
|
||||||
import { BatchDateShiftModal } from "./BatchDateShiftModal.js";
|
|
||||||
import { downloadWorkbookSheets } from "~/lib/workbook-export.js";
|
import { downloadWorkbookSheets } from "~/lib/workbook-export.js";
|
||||||
import {
|
import {
|
||||||
collapseAllAllocationGroups,
|
collapseAllAllocationGroups,
|
||||||
@@ -45,20 +41,11 @@ import {
|
|||||||
getAllocationEmptyState,
|
getAllocationEmptyState,
|
||||||
shouldAutoRelaxAllocationFilters,
|
shouldAutoRelaxAllocationFilters,
|
||||||
} from "./allocationVisibilityState.js";
|
} from "./allocationVisibilityState.js";
|
||||||
|
import { AllocationRow } from "./AllocationRow.js";
|
||||||
/** Left-border color by allocation status for instant visual scanning */
|
import { AllocationGroupedBody, type AllocGroup } from "./AllocationGroupedBody.js";
|
||||||
const STATUS_LEFT_BORDER: Record<string, string> = {
|
import { OpenDemandsPanel } from "./OpenDemandsPanel.js";
|
||||||
ACTIVE: "border-l-green-500",
|
import { AllocationBatchDialogs } from "./AllocationBatchDialogs.js";
|
||||||
PROPOSED: "border-l-amber-500",
|
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
||||||
CONFIRMED: "border-l-blue-500",
|
|
||||||
COMPLETED: "border-l-gray-400",
|
|
||||||
CANCELLED: "border-l-red-500",
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Fragment wrapper for grouped rows — avoids unnecessary DOM nodes */
|
|
||||||
function GroupRows({ children }: { children: React.ReactNode }) {
|
|
||||||
return <>{children}</>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ALL_ALLOC_STATUSES = [
|
const ALL_ALLOC_STATUSES = [
|
||||||
{ value: "PROPOSED", label: "Proposed" },
|
{ value: "PROPOSED", label: "Proposed" },
|
||||||
@@ -171,7 +158,6 @@ export function AllocationsClient() {
|
|||||||
const [showDateShiftModal, setShowDateShiftModal] = useState(false);
|
const [showDateShiftModal, setShowDateShiftModal] = useState(false);
|
||||||
|
|
||||||
const selection = useSelection();
|
const selection = useSelection();
|
||||||
const utils = trpc.useUtils();
|
|
||||||
const invalidatePlanningViews = useInvalidatePlanningViews();
|
const invalidatePlanningViews = useInvalidatePlanningViews();
|
||||||
const { canViewCosts } = usePermissions();
|
const { canViewCosts } = usePermissions();
|
||||||
|
|
||||||
@@ -348,7 +334,6 @@ export function AllocationsClient() {
|
|||||||
const [collapsedGroups, setCollapsedGroups] = useState<CollapsedAllocationGroups>(() =>
|
const [collapsedGroups, setCollapsedGroups] = useState<CollapsedAllocationGroups>(() =>
|
||||||
createInitialCollapsedAllocationGroups(),
|
createInitialCollapsedAllocationGroups(),
|
||||||
);
|
);
|
||||||
// Track expanded project sub-groups: key = "resourceId::projectId"
|
|
||||||
const [expandedSubGroups, setExpandedSubGroups] = useState<Set<string>>(new Set());
|
const [expandedSubGroups, setExpandedSubGroups] = useState<Set<string>>(new Set());
|
||||||
const hasEvaluatedInitialVisibility = useRef(false);
|
const hasEvaluatedInitialVisibility = useRef(false);
|
||||||
|
|
||||||
@@ -356,25 +341,6 @@ export function AllocationsClient() {
|
|||||||
setViewMode((prev) => (prev === "grouped" ? "flat" : "grouped"));
|
setViewMode((prev) => (prev === "grouped" ? "flat" : "grouped"));
|
||||||
}, [setViewMode]);
|
}, [setViewMode]);
|
||||||
|
|
||||||
type ProjectSubGroup = {
|
|
||||||
projectId: string;
|
|
||||||
projectName: string;
|
|
||||||
projectCode: string;
|
|
||||||
allocations: AllocationWithDetails[];
|
|
||||||
typicalHoursPerDay: number;
|
|
||||||
earliestStart: Date;
|
|
||||||
latestEnd: Date;
|
|
||||||
};
|
|
||||||
|
|
||||||
type AllocGroup = {
|
|
||||||
resourceId: string;
|
|
||||||
resourceName: string;
|
|
||||||
eid: string;
|
|
||||||
chapter: string | null;
|
|
||||||
allocations: AllocationWithDetails[];
|
|
||||||
projectSubGroups: ProjectSubGroup[];
|
|
||||||
};
|
|
||||||
|
|
||||||
const groups = useMemo<AllocGroup[]>(() => {
|
const groups = useMemo<AllocGroup[]>(() => {
|
||||||
const map = new Map<string, AllocGroup>();
|
const map = new Map<string, AllocGroup>();
|
||||||
for (const alloc of sorted) {
|
for (const alloc of sorted) {
|
||||||
@@ -394,7 +360,6 @@ export function AllocationsClient() {
|
|||||||
group.allocations.push(alloc);
|
group.allocations.push(alloc);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Build project sub-groups within each person group
|
|
||||||
for (const group of map.values()) {
|
for (const group of map.values()) {
|
||||||
const projMap = new Map<string, AllocationWithDetails[]>();
|
const projMap = new Map<string, AllocationWithDetails[]>();
|
||||||
for (const alloc of group.allocations) {
|
for (const alloc of group.allocations) {
|
||||||
@@ -410,7 +375,6 @@ export function AllocationsClient() {
|
|||||||
const first = allocs[0]!;
|
const first = allocs[0]!;
|
||||||
let earliest = new Date(first.startDate);
|
let earliest = new Date(first.startDate);
|
||||||
let latest = new Date(first.endDate);
|
let latest = new Date(first.endDate);
|
||||||
// Find the most common hoursPerDay value across allocations
|
|
||||||
const hpdCounts = new Map<number, number>();
|
const hpdCounts = new Map<number, number>();
|
||||||
for (const a of allocs) {
|
for (const a of allocs) {
|
||||||
const s = new Date(a.startDate);
|
const s = new Date(a.startDate);
|
||||||
@@ -419,7 +383,6 @@ export function AllocationsClient() {
|
|||||||
if (e > latest) latest = e;
|
if (e > latest) latest = e;
|
||||||
hpdCounts.set(a.hoursPerDay, (hpdCounts.get(a.hoursPerDay) ?? 0) + 1);
|
hpdCounts.set(a.hoursPerDay, (hpdCounts.get(a.hoursPerDay) ?? 0) + 1);
|
||||||
}
|
}
|
||||||
// Pick the most frequent hoursPerDay; fall back to first
|
|
||||||
let typicalH = first.hoursPerDay;
|
let typicalH = first.hoursPerDay;
|
||||||
let maxCount = 0;
|
let maxCount = 0;
|
||||||
for (const [h, count] of hpdCounts) {
|
for (const [h, count] of hpdCounts) {
|
||||||
@@ -580,116 +543,6 @@ export function AllocationsClient() {
|
|||||||
// colSpan for empty/loading states: checkbox + visible columns + actions
|
// colSpan for empty/loading states: checkbox + visible columns + actions
|
||||||
const totalColSpan = 1 + visibleColumns.length + 1;
|
const totalColSpan = 1 + visibleColumns.length + 1;
|
||||||
|
|
||||||
function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false, rowIndex = 0) {
|
|
||||||
const isSelected = selection.selectedIds.has(alloc.id);
|
|
||||||
const leftBorder = STATUS_LEFT_BORDER[alloc.status] ?? "border-l-gray-300";
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={alloc.id}
|
|
||||||
data-testid="allocation-row"
|
|
||||||
className={`border-l-[3px] transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${leftBorder} ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
|
||||||
style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}
|
|
||||||
>
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={isSelected}
|
|
||||||
onChange={() => selection.toggle(alloc.id)}
|
|
||||||
className="rounded border-gray-300 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
{visibleColumns.map((col) => {
|
|
||||||
switch (col.key) {
|
|
||||||
case "resource":
|
|
||||||
return (
|
|
||||||
<td
|
|
||||||
key={col.key}
|
|
||||||
className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100"
|
|
||||||
>
|
|
||||||
{isGrouped ? (
|
|
||||||
<span className="text-gray-400 dark:text-gray-500">↳</span>
|
|
||||||
) : (
|
|
||||||
(alloc.resource?.displayName ?? "—")
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
case "project":
|
|
||||||
return (
|
|
||||||
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
|
|
||||||
{alloc.project ? (
|
|
||||||
<>
|
|
||||||
<span className="font-mono text-xs">{alloc.project.shortCode}</span>{" "}
|
|
||||||
{alloc.project.name}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
"—"
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
case "role":
|
|
||||||
return (
|
|
||||||
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
|
|
||||||
{alloc.role}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
case "dates":
|
|
||||||
return (
|
|
||||||
<td
|
|
||||||
key={col.key}
|
|
||||||
className="whitespace-nowrap px-4 py-3 text-xs text-gray-500 dark:text-gray-400"
|
|
||||||
>
|
|
||||||
{formatPeriod(alloc)}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
case "hoursPerDay":
|
|
||||||
return (
|
|
||||||
<td key={col.key} className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
||||||
{alloc.hoursPerDay}h
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
case "cost":
|
|
||||||
return (
|
|
||||||
<td key={col.key} className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
||||||
{(alloc.dailyCostCents / 100).toFixed(0)} €
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
case "status":
|
|
||||||
return (
|
|
||||||
<td key={col.key} className="px-4 py-3">
|
|
||||||
<span
|
|
||||||
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[alloc.status] ?? "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"}`}
|
|
||||||
>
|
|
||||||
{alloc.status}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return (
|
|
||||||
<td key={col.key} className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
—
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<div className="flex items-center justify-end gap-2">
|
|
||||||
<button type="button" onClick={() => openEdit(alloc)} className="app-action-edit">
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setConfirmDelete({ single: alloc })}
|
|
||||||
disabled={singleDeletePending}
|
|
||||||
className="app-action-delete disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app-page space-y-5 pb-24">
|
<div className="app-page space-y-5 pb-24">
|
||||||
<SuccessToast
|
<SuccessToast
|
||||||
@@ -1003,296 +856,81 @@ export function AllocationsClient() {
|
|||||||
{!isLoading &&
|
{!isLoading &&
|
||||||
!allocationQueryFailure &&
|
!allocationQueryFailure &&
|
||||||
viewMode === "flat" &&
|
viewMode === "flat" &&
|
||||||
sorted.map((alloc, index) => renderAllocRow(alloc, false, index))}
|
sorted.map((alloc, index) => (
|
||||||
|
<AllocationRow
|
||||||
{!isLoading &&
|
key={alloc.id}
|
||||||
!allocationQueryFailure &&
|
alloc={alloc}
|
||||||
viewMode === "grouped" &&
|
visibleColumns={visibleColumns}
|
||||||
groups.map((group) => {
|
rowIndex={index}
|
||||||
const isCollapsed =
|
isSelected={selection.selectedIds.has(alloc.id)}
|
||||||
collapsedGroups === "all" || collapsedGroups.has(group.resourceId);
|
onToggleSelection={() => selection.toggle(alloc.id)}
|
||||||
const groupAllocIds = group.allocations.map((a) => a.id);
|
onEdit={() => openEdit(alloc)}
|
||||||
const allGroupSelected = selection.isAllSelected(groupAllocIds);
|
onRequestDelete={() => setConfirmDelete({ single: alloc })}
|
||||||
const groupIndeterminate =
|
deleteDisabled={singleDeletePending}
|
||||||
!allGroupSelected && groupAllocIds.some((id) => selection.selectedIds.has(id));
|
formatPeriod={formatPeriod}
|
||||||
return (
|
|
||||||
<GroupRows key={group.resourceId}>
|
|
||||||
{/* Group header */}
|
|
||||||
<tr
|
|
||||||
data-testid="allocation-group-header"
|
|
||||||
className="bg-gray-50 dark:bg-gray-800/50 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-800/80 transition-colors"
|
|
||||||
onClick={() => toggleGroup(group.resourceId)}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
|
||||||
e.preventDefault();
|
|
||||||
toggleGroup(group.resourceId);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
tabIndex={0}
|
|
||||||
role="button"
|
|
||||||
aria-expanded={!isCollapsed}
|
|
||||||
>
|
|
||||||
<td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={allGroupSelected}
|
|
||||||
ref={(el) => {
|
|
||||||
if (el) el.indeterminate = groupIndeterminate;
|
|
||||||
}}
|
|
||||||
onChange={() => selection.toggleAll(groupAllocIds)}
|
|
||||||
className="rounded border-gray-300 dark:border-gray-600"
|
|
||||||
/>
|
/>
|
||||||
</td>
|
))}
|
||||||
<td colSpan={visibleColumns.length + 1} className="px-4 py-2.5">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-gray-400 dark:text-gray-500 text-xs">
|
|
||||||
{isCollapsed ? "▸" : "▾"}
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{group.resourceName}
|
|
||||||
</span>
|
|
||||||
{group.eid && (
|
|
||||||
<span className="text-xs font-mono text-gray-400 dark:text-gray-500">
|
|
||||||
{group.eid}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{group.chapter && (
|
|
||||||
<span className="text-xs text-gray-400 dark:text-gray-500">
|
|
||||||
· {group.chapter}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
|
||||||
{group.allocations.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/* Project sub-groups within person */}
|
|
||||||
{!isCollapsed &&
|
|
||||||
group.projectSubGroups.map((subGroup) => {
|
|
||||||
const subKey = `${group.resourceId}::${subGroup.projectId}`;
|
|
||||||
const isSubExpanded = expandedSubGroups.has(subKey);
|
|
||||||
|
|
||||||
// Single allocation for this project — render directly, no sub-group header
|
{!isLoading && !allocationQueryFailure && viewMode === "grouped" && (
|
||||||
if (subGroup.allocations.length === 1) {
|
<AllocationGroupedBody
|
||||||
return (
|
groups={groups}
|
||||||
<GroupRows key={subKey}>
|
collapsedGroups={collapsedGroups}
|
||||||
{renderAllocRow(subGroup.allocations[0]!, true, 0)}
|
expandedSubGroups={expandedSubGroups}
|
||||||
</GroupRows>
|
visibleColumns={visibleColumns}
|
||||||
);
|
selectedIds={selection.selectedIds}
|
||||||
}
|
isAllSelected={selection.isAllSelected}
|
||||||
|
onToggleSelection={selection.toggle}
|
||||||
// Multiple allocations — show collapsible project sub-group
|
onToggleAllSelection={selection.toggleAll}
|
||||||
return (
|
onToggleGroup={toggleGroup}
|
||||||
<GroupRows key={subKey}>
|
onToggleSubGroup={toggleSubGroup}
|
||||||
<tr
|
onEdit={openEdit}
|
||||||
data-testid="allocation-subgroup-header"
|
onRequestDelete={(alloc) => setConfirmDelete({ single: alloc })}
|
||||||
className="bg-gray-25 dark:bg-gray-850/30 cursor-pointer select-none hover:bg-gray-100/60 dark:hover:bg-gray-800/40 transition-colors"
|
deleteDisabled={singleDeletePending}
|
||||||
onClick={() => toggleSubGroup(group.resourceId, subGroup.projectId)}
|
formatPeriod={formatPeriod}
|
||||||
tabIndex={0}
|
|
||||||
role="button"
|
|
||||||
aria-expanded={isSubExpanded}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
|
||||||
e.preventDefault();
|
|
||||||
toggleSubGroup(group.resourceId, subGroup.projectId);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<td className="px-4 py-2" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selection.isAllSelected(
|
|
||||||
subGroup.allocations.map((a) => a.id),
|
|
||||||
)}
|
|
||||||
ref={(el) => {
|
|
||||||
if (el) {
|
|
||||||
const ids = subGroup.allocations.map((a) => a.id);
|
|
||||||
el.indeterminate =
|
|
||||||
!selection.isAllSelected(ids) &&
|
|
||||||
ids.some((id) => selection.selectedIds.has(id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onChange={() =>
|
|
||||||
selection.toggleAll(subGroup.allocations.map((a) => a.id))
|
|
||||||
}
|
|
||||||
className="rounded border-gray-300 dark:border-gray-600"
|
|
||||||
/>
|
/>
|
||||||
</td>
|
|
||||||
<td colSpan={visibleColumns.length + 1} className="px-4 py-2">
|
|
||||||
<div className="flex items-center gap-2 pl-4">
|
|
||||||
<span className="text-gray-400 dark:text-gray-500 text-xs">
|
|
||||||
{isSubExpanded ? "▾" : "▸"}
|
|
||||||
</span>
|
|
||||||
<span className="font-mono text-xs text-gray-400 dark:text-gray-500">
|
|
||||||
{subGroup.projectCode}
|
|
||||||
</span>
|
|
||||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
|
||||||
{subGroup.projectName}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-400 dark:text-gray-500">
|
|
||||||
{formatDate(subGroup.earliestStart)} →{" "}
|
|
||||||
{formatDate(subGroup.latestEnd)}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
{subGroup.typicalHoursPerDay}h/day
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex items-center rounded-full bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-400">
|
|
||||||
{subGroup.allocations.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{isSubExpanded &&
|
|
||||||
subGroup.allocations.map((alloc, idx) =>
|
|
||||||
renderAllocRow(alloc, true, idx),
|
|
||||||
)}
|
)}
|
||||||
</GroupRows>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</GroupRows>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!isLoading && filteredDemands.length > 0 && (
|
{!isLoading && (
|
||||||
<div className="app-surface mt-6 overflow-hidden border-amber-200 dark:border-amber-900/70">
|
<OpenDemandsPanel
|
||||||
<div className="flex items-center justify-between border-b border-amber-200 bg-amber-50/70 px-4 py-3 dark:border-amber-900/70 dark:bg-amber-950/20">
|
demands={filteredDemands}
|
||||||
<div>
|
onEdit={openEdit}
|
||||||
<h2 className="text-sm font-semibold text-amber-900 dark:text-amber-200">
|
onRequestDelete={(alloc) => setConfirmDelete({ single: alloc })}
|
||||||
Open Demands
|
deleteDisabled={singleDeletePending}
|
||||||
</h2>
|
formatPeriod={formatPeriod}
|
||||||
<p className="text-xs text-amber-700 dark:text-amber-300/80">
|
|
||||||
Placeholder demand rows not yet assigned to a resource.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-medium text-amber-700 dark:text-amber-300">
|
|
||||||
{filteredDemands.length} item{filteredDemands.length !== 1 ? "s" : ""}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="divide-y divide-amber-100 dark:divide-amber-900/40">
|
|
||||||
{filteredDemands.map((demand) => (
|
|
||||||
<div
|
|
||||||
key={demand.id}
|
|
||||||
className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-amber-50/40 dark:hover:bg-amber-950/10"
|
|
||||||
>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
|
||||||
{demand.project ? (
|
|
||||||
<>
|
|
||||||
<span className="font-mono text-xs">{demand.project.shortCode}</span>{" "}
|
|
||||||
{demand.project.name}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
"Unknown project"
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
{demand.role ?? "Placeholder role"} · {formatPeriod(demand)} ·{" "}
|
|
||||||
{demand.hoursPerDay}h/day
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-shrink-0 items-center gap-4">
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300">
|
|
||||||
Unfilled
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-semibold text-amber-900 dark:text-amber-200">
|
|
||||||
{demand.unfilledHeadcount ?? demand.headcount} /{" "}
|
|
||||||
{demand.requestedHeadcount ?? demand.headcount}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => openEdit(demand as AllocationWithDetails)}
|
|
||||||
className="app-action-edit"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setConfirmDelete({ single: demand as AllocationWithDetails })}
|
|
||||||
disabled={singleDeletePending}
|
|
||||||
className="app-action-delete disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Batch Status Picker */}
|
|
||||||
{batchStatusPicker && (
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center p-4"
|
|
||||||
onClick={() => setBatchStatusPicker(false)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="min-w-[220px] rounded-2xl bg-white p-5 shadow-2xl dark:bg-gray-900"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
Set status for {selection.count} allocations
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
{ALL_ALLOC_STATUSES.map((s) => (
|
|
||||||
<button
|
|
||||||
key={s.value}
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setConfirmBatchStatus({ ids: selectedMutationIds, status: s.value });
|
|
||||||
setBatchStatusPicker(false);
|
|
||||||
}}
|
|
||||||
className="w-full rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[s.value]}`}
|
|
||||||
>
|
|
||||||
{s.label}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Confirm single delete */}
|
|
||||||
{confirmDelete?.single && (
|
|
||||||
<ConfirmDialog
|
|
||||||
title="Delete Allocation"
|
|
||||||
message={`Delete allocation for ${confirmDelete.single.resource?.displayName ?? "resource"} on ${confirmDelete.single.project?.name ?? "project"}?`}
|
|
||||||
confirmLabel="Delete"
|
|
||||||
variant="danger"
|
|
||||||
onConfirm={() => {
|
|
||||||
handleSingleDelete(confirmDelete.single!);
|
|
||||||
setConfirmDelete(null);
|
|
||||||
}}
|
|
||||||
onCancel={() => setConfirmDelete(null)}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Confirm batch delete */}
|
<AllocationBatchDialogs
|
||||||
{confirmDelete?.ids && (
|
selectionCount={selection.count}
|
||||||
<ConfirmDialog
|
selectedMutationIds={selectedMutationIds}
|
||||||
title="Delete Allocations"
|
onClearSelection={selection.clear}
|
||||||
message={`Delete ${confirmDelete.ids.length} selected allocation${confirmDelete.ids.length !== 1 ? "s" : ""}? This cannot be undone.`}
|
batchStatusPickerOpen={batchStatusPicker}
|
||||||
confirmLabel="Delete All"
|
onOpenBatchStatusPicker={() => setBatchStatusPicker(true)}
|
||||||
variant="danger"
|
onCloseBatchStatusPicker={() => setBatchStatusPicker(false)}
|
||||||
onConfirm={() => {
|
batchStatusPending={batchStatusMutation.isPending}
|
||||||
batchDeleteMutation.mutate({ ids: confirmDelete.ids! });
|
onBatchStatusConfirm={(ids, status) => {
|
||||||
setConfirmDelete(null);
|
setConfirmBatchStatus({ ids, status });
|
||||||
}}
|
}}
|
||||||
onCancel={() => setConfirmDelete(null)}
|
confirmDelete={confirmDelete}
|
||||||
|
onSetConfirmDelete={setConfirmDelete}
|
||||||
|
onSingleDelete={handleSingleDelete}
|
||||||
|
onBatchDelete={(ids) => batchDeleteMutation.mutate({ ids })}
|
||||||
|
batchDeletePending={batchDeleteMutation.isPending}
|
||||||
|
showDateShiftModal={showDateShiftModal}
|
||||||
|
onOpenDateShiftModal={() => setShowDateShiftModal(true)}
|
||||||
|
onCloseDateShiftModal={() => setShowDateShiftModal(false)}
|
||||||
|
onDateShiftConfirm={(daysDelta) =>
|
||||||
|
batchDateShiftMutation.mutate({
|
||||||
|
allocationIds: selectedMutationIds,
|
||||||
|
daysDelta,
|
||||||
|
mode: "move",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
dateShiftPending={batchDateShiftMutation.isPending}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Confirm batch status */}
|
{/* Confirm batch status */}
|
||||||
{confirmBatchStatus && (
|
{confirmBatchStatus && (
|
||||||
@@ -1311,46 +949,6 @@ export function AllocationsClient() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Batch Action Bar */}
|
|
||||||
<BatchActionBar
|
|
||||||
count={selection.count}
|
|
||||||
onClear={selection.clear}
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
label: "Set Status…",
|
|
||||||
onClick: () => setBatchStatusPicker(true),
|
|
||||||
disabled: batchStatusMutation.isPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Shift Dates…",
|
|
||||||
onClick: () => setShowDateShiftModal(true),
|
|
||||||
disabled: batchDateShiftMutation.isPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `Delete (${selection.count})`,
|
|
||||||
variant: "danger",
|
|
||||||
onClick: () => setConfirmDelete({ ids: selectedMutationIds }),
|
|
||||||
disabled: batchDeleteMutation.isPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Batch date shift modal */}
|
|
||||||
{showDateShiftModal && (
|
|
||||||
<BatchDateShiftModal
|
|
||||||
count={selection.count}
|
|
||||||
isPending={batchDateShiftMutation.isPending}
|
|
||||||
onConfirm={(daysDelta) =>
|
|
||||||
batchDateShiftMutation.mutate({
|
|
||||||
allocationIds: selectedMutationIds,
|
|
||||||
daysDelta,
|
|
||||||
mode: "move",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onClose={() => setShowDateShiftModal(false)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modal */}
|
{/* Modal */}
|
||||||
{modalOpen && (
|
{modalOpen && (
|
||||||
<AllocationModal
|
<AllocationModal
|
||||||
|
|||||||
@@ -0,0 +1,94 @@
|
|||||||
|
import type { AllocationWithDetails } from "@capakraken/shared";
|
||||||
|
|
||||||
|
type DemandRow = AllocationWithDetails & {
|
||||||
|
sourceAllocationId?: string;
|
||||||
|
requestedHeadcount?: number;
|
||||||
|
unfilledHeadcount?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type OpenDemandsPanelProps = {
|
||||||
|
demands: DemandRow[];
|
||||||
|
onEdit: (demand: AllocationWithDetails) => void;
|
||||||
|
onRequestDelete: (demand: AllocationWithDetails) => void;
|
||||||
|
deleteDisabled: boolean;
|
||||||
|
formatPeriod: (alloc: AllocationWithDetails) => string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function OpenDemandsPanel({
|
||||||
|
demands,
|
||||||
|
onEdit,
|
||||||
|
onRequestDelete,
|
||||||
|
deleteDisabled,
|
||||||
|
formatPeriod,
|
||||||
|
}: OpenDemandsPanelProps) {
|
||||||
|
if (demands.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app-surface mt-6 overflow-hidden border-amber-200 dark:border-amber-900/70">
|
||||||
|
<div className="flex items-center justify-between border-b border-amber-200 bg-amber-50/70 px-4 py-3 dark:border-amber-900/70 dark:bg-amber-950/20">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-sm font-semibold text-amber-900 dark:text-amber-200">Open Demands</h2>
|
||||||
|
<p className="text-xs text-amber-700 dark:text-amber-300/80">
|
||||||
|
Placeholder demand rows not yet assigned to a resource.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium text-amber-700 dark:text-amber-300">
|
||||||
|
{demands.length} item{demands.length !== 1 ? "s" : ""}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-amber-100 dark:divide-amber-900/40">
|
||||||
|
{demands.map((demand) => (
|
||||||
|
<div
|
||||||
|
key={demand.id}
|
||||||
|
className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-amber-50/40 dark:hover:bg-amber-950/10"
|
||||||
|
>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||||
|
{demand.project ? (
|
||||||
|
<>
|
||||||
|
<span className="font-mono text-xs">{demand.project.shortCode}</span>{" "}
|
||||||
|
{demand.project.name}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"Unknown project"
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{demand.role ?? "Placeholder role"} · {formatPeriod(demand)} · {demand.hoursPerDay}
|
||||||
|
h/day
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-shrink-0 items-center gap-4">
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300">
|
||||||
|
Unfilled
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-semibold text-amber-900 dark:text-amber-200">
|
||||||
|
{demand.unfilledHeadcount ?? demand.headcount} /{" "}
|
||||||
|
{demand.requestedHeadcount ?? demand.headcount}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onEdit(demand as AllocationWithDetails)}
|
||||||
|
className="app-action-edit"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onRequestDelete(demand as AllocationWithDetails)}
|
||||||
|
disabled={deleteDisabled}
|
||||||
|
className="app-action-delete disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user