Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(web): accessibility pass — add aria-labels, dialog roles, and pressed states

Browse Source 
- KeyboardShortcutOverlay: add role="dialog", aria-modal, aria-labelledby, close button aria-label
- Timeline popovers (5 files): add aria-label="Close" to symbol-only close buttons
- TimelineToolbar: add aria-label to navigation and undo/redo icon buttons
- ComputationGraphClient: add aria-pressed to 2D/3D and view mode toggle buttons
- BulkEditModal: fix type mismatch from jsonb field hardening

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-11 23:27:56 +02:00
parent 85c064ba32
commit e08ee94546
9 changed files with 235 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/analytics/ComputationGraphClient.tsx
+79 -46
View File
@@ -60,39 +60,46 @@ export default function ComputationGraphClient() {
const [dimension, setDimension] = useState<Dimension>("2d"); const [dimension, setDimension] = useState<Dimension>("2d");
const { const {
viewMode, setViewMode, viewMode,
resourceId, setResourceId, setViewMode,
month, setMonth, resourceId,
projectId, setProjectId, setResourceId,
resources, projects, month,
setMonth,
projectId,
setProjectId,
resources,
projects,
isLoading, isLoading,
activeDomains, activeDomains,
graphData, graphData,
rawData, rawData,
highlightedNodes, setHighlightedNodes, highlightedNodes,
domainFilter, toggleDomain, setHighlightedNodes,
domainFilter,
toggleDomain,
} = state; } = state;
const resourceMeta = viewMode === "resource" const resourceMeta =
? (rawData?.meta as ResourceGraphMeta | undefined) viewMode === "resource" ? (rawData?.meta as ResourceGraphMeta | undefined) : undefined;
: undefined;
const resourceFactors = resourceMeta?.factors; const resourceFactors = resourceMeta?.factors;
const weeklyAvailabilityEntries: Array<[string, number | undefined]> = resourceFactors?.weeklyAvailability const weeklyAvailabilityEntries: Array<[string, number | undefined]> =
? [ resourceFactors?.weeklyAvailability
["Mo", resourceFactors.weeklyAvailability.monday], ? [
["Di", resourceFactors.weeklyAvailability.tuesday], ["Mo", resourceFactors.weeklyAvailability.monday],
["Mi", resourceFactors.weeklyAvailability.wednesday], ["Di", resourceFactors.weeklyAvailability.tuesday],
["Do", resourceFactors.weeklyAvailability.thursday], ["Mi", resourceFactors.weeklyAvailability.wednesday],
["Fr", resourceFactors.weeklyAvailability.friday], ["Do", resourceFactors.weeklyAvailability.thursday],
["Sa", resourceFactors.weeklyAvailability.saturday], ["Fr", resourceFactors.weeklyAvailability.friday],
["So", resourceFactors.weeklyAvailability.sunday], ["Sa", resourceFactors.weeklyAvailability.saturday],
] ["So", resourceFactors.weeklyAvailability.sunday],
: []; ]
: [];
const weeklyAvailability = resourceFactors?.weeklyAvailability const weeklyAvailability = resourceFactors?.weeklyAvailability
? weeklyAvailabilityEntries ? weeklyAvailabilityEntries
.filter((entry): entry is [string, number] => typeof entry[1] === "number" && entry[1] > 0) .filter((entry): entry is [string, number] => typeof entry[1] === "number" && entry[1] > 0)
.map(([label, hours]) => `${label} ${formatNumber(hours, 1)}h`) .map(([label, hours]) => `${label} ${formatNumber(hours, 1)}h`)
.join(" · ") .join(" · ")
: "—"; : "—";
const topHolidays = resourceMeta?.resolvedHolidays?.slice(0, 6) ?? []; const topHolidays = resourceMeta?.resolvedHolidays?.slice(0, 6) ?? [];
@@ -104,6 +111,7 @@ export default function ComputationGraphClient() {
<div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600"> <div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600">
<button <button
onClick={() => setDimension("2d")} onClick={() => setDimension("2d")}
aria-pressed={dimension === "2d"}
className={`px-3 py-1.5 text-sm font-medium transition-colors ${ className={`px-3 py-1.5 text-sm font-medium transition-colors ${
dimension === "2d" dimension === "2d"
? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900" ? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
@@ -114,6 +122,7 @@ export default function ComputationGraphClient() {
</button> </button>
<button <button
onClick={() => setDimension("3d")} onClick={() => setDimension("3d")}
aria-pressed={dimension === "3d"}
className={`px-3 py-1.5 text-sm font-medium transition-colors ${ className={`px-3 py-1.5 text-sm font-medium transition-colors ${
dimension === "3d" dimension === "3d"
? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900" ? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
@@ -128,6 +137,7 @@ export default function ComputationGraphClient() {
<div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600"> <div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600">
<button <button
onClick={() => setViewMode("resource")} onClick={() => setViewMode("resource")}
aria-pressed={viewMode === "resource"}
className={`px-3 py-1.5 text-sm font-medium transition-colors ${ className={`px-3 py-1.5 text-sm font-medium transition-colors ${
viewMode === "resource" viewMode === "resource"
? "bg-blue-600 text-white" ? "bg-blue-600 text-white"
@@ -138,6 +148,7 @@ export default function ComputationGraphClient() {
</button> </button>
<button <button
onClick={() => setViewMode("project")} onClick={() => setViewMode("project")}
aria-pressed={viewMode === "project"}
className={`px-3 py-1.5 text-sm font-medium transition-colors ${ className={`px-3 py-1.5 text-sm font-medium transition-colors ${
viewMode === "project" viewMode === "project"
? "bg-blue-600 text-white" ? "bg-blue-600 text-white"
@@ -177,11 +188,14 @@ export default function ComputationGraphClient() {
className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200" className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200"
> >
<option value="">Select Project...</option> <option value="">Select Project...</option>
{(Array.isArray(projects) ? projects : []).map((p: { id: string; name: string; shortCode?: string | null }) => ( {(Array.isArray(projects) ? projects : []).map(
<option key={p.id} value={p.id}> (p: { id: string; name: string; shortCode?: string | null }) => (
{p.shortCode ? `${p.shortCode} — ` : ""}{p.name} <option key={p.id} value={p.id}>
</option> {p.shortCode ? `${p.shortCode} — ` : ""}
))} {p.name}
</option>
),
)}
</select> </select>
)} )}
@@ -246,15 +260,22 @@ export default function ComputationGraphClient() {
<aside className="w-[24rem] overflow-y-auto border-l border-zinc-200 bg-white/90 p-4 dark:border-zinc-700 dark:bg-zinc-950/90"> <aside className="w-[24rem] overflow-y-auto border-l border-zinc-200 bg-white/90 p-4 dark:border-zinc-700 dark:bg-zinc-950/90">
<div className="space-y-4"> <div className="space-y-4">
<section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"> <section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
<div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">Bezugsgroessen</div> <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
Bezugsgroessen
</div>
<div className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100"> <div className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
{resourceMeta.resourceName ?? "Resource"} {resourceMeta.resourceName ?? "Resource"}
</div> </div>
<div className="text-sm text-zinc-500">{resourceMeta.resourceEid ?? "—"} · {resourceMeta.month ?? month}</div> <div className="text-sm text-zinc-500">
{resourceMeta.resourceEid ?? "—"} · {resourceMeta.month ?? month}
</div>
<div className="mt-3 grid grid-cols-1 gap-2 text-sm text-zinc-700 dark:text-zinc-300"> <div className="mt-3 grid grid-cols-1 gap-2 text-sm text-zinc-700 dark:text-zinc-300">
<div className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950"> <div className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950">
<div className="text-xs uppercase text-zinc-500">Land</div> <div className="text-xs uppercase text-zinc-500">Land</div>
<div>{resourceMeta.countryName ?? resourceMeta.countryCode ?? "—"}{resourceMeta.countryCode ? ` (${resourceMeta.countryCode})` : ""}</div> <div>
{resourceMeta.countryName ?? resourceMeta.countryCode ?? "—"}
{resourceMeta.countryCode ? ` (${resourceMeta.countryCode})` : ""}
</div>
</div> </div>
<div className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950"> <div className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950">
<div className="text-xs uppercase text-zinc-500">Bundesland / Region</div> <div className="text-xs uppercase text-zinc-500">Bundesland / Region</div>
@@ -273,23 +294,30 @@ export default function ComputationGraphClient() {
<section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"> <section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">Feiertagsbasis</div> <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
Feiertagsbasis
</div>
<div className="text-xs text-zinc-500"> <div className="text-xs text-zinc-500">
{resourceFactors?.publicHolidayCount ?? 0} Feiertage, {resourceFactors?.publicHolidayWorkdayCount ?? 0} wirksam {resourceFactors?.publicHolidayCount ?? 0} Feiertage,{" "}
{resourceFactors?.publicHolidayWorkdayCount ?? 0} wirksam
</div> </div>
</div> </div>
<div className="mt-3 space-y-2"> <div className="mt-3 space-y-2">
{topHolidays.length > 0 ? topHolidays.map((holiday) => ( {topHolidays.length > 0 ? (
<div topHolidays.map((holiday) => (
key={`${holiday.date}-${holiday.name}`} <div
className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950" key={`${holiday.date}-${holiday.name}`}
> className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950"
<div className="font-medium text-zinc-900 dark:text-zinc-100">{holiday.name}</div> >
<div className="text-xs text-zinc-500"> <div className="font-medium text-zinc-900 dark:text-zinc-100">
{holiday.date} · {holiday.scope} · {holiday.calendarName ?? "Kalender"} {holiday.name}
</div>
<div className="text-xs text-zinc-500">
{holiday.date} · {holiday.scope} · {holiday.calendarName ?? "Kalender"}
</div>
</div> </div>
</div> ))
)) : ( ) : (
<div className="rounded-lg border border-dashed border-zinc-200 px-3 py-2 text-sm text-zinc-500 dark:border-zinc-800"> <div className="rounded-lg border border-dashed border-zinc-200 px-3 py-2 text-sm text-zinc-500 dark:border-zinc-800">
Keine aufgeloesten Feiertage im gewaehlten Monat. Keine aufgeloesten Feiertage im gewaehlten Monat.
</div> </div>
@@ -298,12 +326,17 @@ export default function ComputationGraphClient() {
</section> </section>
<section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"> <section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
<div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">Herleitung</div> <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
Herleitung
</div>
<div className="mt-3 space-y-2"> <div className="mt-3 space-y-2">
<div className="rounded-lg bg-white px-3 py-2 text-sm dark:bg-zinc-950"> <div className="rounded-lg bg-white px-3 py-2 text-sm dark:bg-zinc-950">
<div className="text-xs uppercase text-zinc-500">SAH Formel</div> <div className="text-xs uppercase text-zinc-500">SAH Formel</div>
<div className="font-medium text-zinc-900 dark:text-zinc-100"> <div className="font-medium text-zinc-900 dark:text-zinc-100">
{formatNumber(resourceFactors?.baseAvailableHours)}h - {formatNumber(resourceFactors?.publicHolidayHoursDeduction)}h - {formatNumber(resourceFactors?.absenceHoursDeduction)}h = {formatNumber(resourceFactors?.effectiveAvailableHours)}h {formatNumber(resourceFactors?.baseAvailableHours)}h -{" "}
{formatNumber(resourceFactors?.publicHolidayHoursDeduction)}h -{" "}
{formatNumber(resourceFactors?.absenceHoursDeduction)}h ={" "}
{formatNumber(resourceFactors?.effectiveAvailableHours)}h
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-2 text-sm"> <div className="grid grid-cols-2 gap-2 text-sm">
apps/web/src/components/resources/BulkEditModal.tsx
+70 -15
View File
@@ -32,7 +32,11 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
function toggleInclude(key: string) { function toggleInclude(key: string) {
setIncluded((prev) => { setIncluded((prev) => {
const next = new Set(prev); const next = new Set(prev);
if (next.has(key)) { next.delete(key); } else { next.add(key); } if (next.has(key)) {
next.delete(key);
} else {
next.add(key);
}
return next; return next;
}); });
} }
@@ -43,9 +47,13 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
function handleSave() { function handleSave() {
setError(null); setError(null);
const fields: Record<string, unknown> = {}; const fields: Record<string, string | number | boolean | null> = {};
for (const key of included) { for (const key of included) {
fields[key] = values[key] ?? ""; const val = values[key] ?? "";
fields[key] =
typeof val === "string" || typeof val === "number" || typeof val === "boolean"
? val
: String(val);
} }
if (Object.keys(fields).length === 0) { if (Object.keys(fields).length === 0) {
setError("Select at least one field to update."); setError("Select at least one field to update.");
@@ -73,15 +81,27 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
Updating {selectedIds.length} resource{selectedIds.length !== 1 ? "s" : ""} Updating {selectedIds.length} resource{selectedIds.length !== 1 ? "s" : ""}
</p> </p>
</div> </div>
<button type="button" onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none" aria-label="Close">×</button> <button
type="button"
onClick={onClose}
className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
aria-label="Close"
>
×
</button>
</div> </div>
<div className="px-6 py-4 space-y-3 max-h-[60vh] overflow-y-auto"> <div className="px-6 py-4 space-y-3 max-h-[60vh] overflow-y-auto">
{fieldDefs.length === 0 && ( {fieldDefs.length === 0 && (
<p className="text-sm text-gray-400 text-center py-6">No custom fields defined. Configure them in Admin → Blueprints.</p> <p className="text-sm text-gray-400 text-center py-6">
No custom fields defined. Configure them in Admin → Blueprints.
</p>
)} )}
{fieldDefs.map((field) => ( {fieldDefs.map((field) => (
<div key={field.key} className={`border rounded-lg p-3 transition-colors ${included.has(field.key) ? "border-brand-300 bg-brand-50" : "border-gray-200"}`}> <div
key={field.key}
className={`border rounded-lg p-3 transition-colors ${included.has(field.key) ? "border-brand-300 bg-brand-50" : "border-gray-200"}`}
>
<label className="flex items-center gap-2 mb-2 cursor-pointer"> <label className="flex items-center gap-2 mb-2 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
@@ -105,13 +125,21 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
</div> </div>
{error && ( {error && (
<div className="mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div> <div className="mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
{error}
</div>
)} )}
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-200"> <div className="flex items-center justify-between px-6 py-4 border-t border-gray-200">
<p className="text-xs text-gray-400">{included.size} field{included.size !== 1 ? "s" : ""} selected</p> <p className="text-xs text-gray-400">
{included.size} field{included.size !== 1 ? "s" : ""} selected
</p>
<div className="flex gap-3"> <div className="flex gap-3">
<button type="button" onClick={onClose} className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium"> <button
type="button"
onClick={onClose}
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium"
>
Cancel Cancel
</button> </button>
<button <button
@@ -120,7 +148,9 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
disabled={mutation.isPending || included.size === 0} disabled={mutation.isPending || included.size === 0}
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50" className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
> >
{mutation.isPending ? "Saving…" : `Apply to ${selectedIds.length} resource${selectedIds.length !== 1 ? "s" : ""}`} {mutation.isPending
? "Saving…"
: `Apply to ${selectedIds.length} resource${selectedIds.length !== 1 ? "s" : ""}`}
</button> </button>
</div> </div>
</div> </div>
@@ -129,12 +159,24 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
); );
} }
function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinition; value: unknown; onChange: (v: unknown) => void }) { function FieldInput({
field,
value,
onChange,
}: {
field: BlueprintFieldDefinition;
value: unknown;
onChange: (v: unknown) => void;
}) {
const str = value !== undefined && value !== null ? String(value) : ""; const str = value !== undefined && value !== null ? String(value) : "";
if (field.type === FieldType.BOOLEAN) { if (field.type === FieldType.BOOLEAN) {
return ( return (
<select value={str} onChange={(e) => onChange(e.target.value === "true")} className="app-input"> <select
value={str}
onChange={(e) => onChange(e.target.value === "true")}
className="app-input"
>
<option value="">— select —</option> <option value="">— select —</option>
<option value="true">Yes</option> <option value="true">Yes</option>
<option value="false">No</option> <option value="false">No</option>
@@ -146,7 +188,11 @@ function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinitio
return ( return (
<select value={str} onChange={(e) => onChange(e.target.value)} className="app-input"> <select value={str} onChange={(e) => onChange(e.target.value)} className="app-input">
<option value="">— select —</option> <option value="">— select —</option>
{field.options.map((o) => <option key={o.value} value={o.value}>{o.label || o.value}</option>)} {field.options.map((o) => (
<option key={o.value} value={o.value}>
{o.label || o.value}
</option>
))}
</select> </select>
); );
} }
@@ -164,7 +210,14 @@ function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinitio
} }
if (field.type === FieldType.DATE) { if (field.type === FieldType.DATE) {
return <input type="date" value={str} onChange={(e) => onChange(e.target.value)} className="app-input" />; return (
<input
type="date"
value={str}
onChange={(e) => onChange(e.target.value)}
className="app-input"
/>
);
} }
if (field.type === FieldType.TEXTAREA) { if (field.type === FieldType.TEXTAREA) {
@@ -181,7 +234,9 @@ function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinitio
return ( return (
<input <input
type={field.type === FieldType.EMAIL ? "email" : field.type === FieldType.URL ? "url" : "text"} type={
field.type === FieldType.EMAIL ? "email" : field.type === FieldType.URL ? "url" : "text"
}
value={str} value={str}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
placeholder={field.placeholder} placeholder={field.placeholder}
apps/web/src/components/timeline/AllocationPopover.tsx
+1
View File
@@ -221,6 +221,7 @@ export function AllocationPopover({
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
aria-label="Close"
className="text-gray-400 hover:text-gray-600 text-lg leading-none" className="text-gray-400 hover:text-gray-600 text-lg leading-none"
> >
&times; &times;
apps/web/src/components/timeline/BatchAssignPopover.tsx
+1
View File
@@ -105,6 +105,7 @@ export function BatchAssignPopover({
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
aria-label="Close"
className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none" className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
> >
&times; &times;
apps/web/src/components/timeline/DemandPopover.tsx
+62 -18
View File
@@ -39,12 +39,17 @@ export function DemandPopover({
const roleColor = demand.roleEntity?.color ?? "#f59e0b"; const roleColor = demand.roleEntity?.color ?? "#f59e0b";
const startDate = new Date(demand.startDate); const startDate = new Date(demand.startDate);
const endDate = new Date(demand.endDate); const endDate = new Date(demand.endDate);
const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY) + 1); const days = Math.max(
1,
Math.round((endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY) + 1,
);
const totalHours = demand.hoursPerDay * days; const totalHours = demand.hoursPerDay * days;
const budgetCents = demand.dailyCostCents * days; const budgetCents = demand.dailyCostCents * days;
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const { data: suggestionData, isLoading: loadingSuggestions } = (trpc.staffing.getProjectStaffingSuggestions.useQuery as any)( const { data: suggestionData, isLoading: loadingSuggestions } = (
trpc.staffing.getProjectStaffingSuggestions.useQuery as any
)(
{ {
projectId: demand.projectId, projectId: demand.projectId,
roleName: demand.role ?? undefined, roleName: demand.role ?? undefined,
@@ -53,7 +58,20 @@ export function DemandPopover({
limit: 3, limit: 3,
}, },
{ staleTime: 60_000, retry: false }, { staleTime: 60_000, retry: false },
) as { data: { suggestions: Array<{ id: string; name: string; eid: string; availableHoursPerDay: number; utilization: number }> } | undefined; isLoading: boolean }; ) as {
data:
| {
suggestions: Array<{
id: string;
name: string;
eid: string;
availableHoursPerDay: number;
utilization: number;
}>;
}
| undefined;
isLoading: boolean;
};
const suggestions = suggestionData?.suggestions ?? []; const suggestions = suggestionData?.suggestions ?? [];
const popover = ( const popover = (
@@ -78,6 +96,7 @@ export function DemandPopover({
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
aria-label="Close"
className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none ml-2" className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none ml-2"
> >
&times; &times;
@@ -90,8 +109,7 @@ export function DemandPopover({
Project:{" "} Project:{" "}
<span className="font-medium text-gray-700 dark:text-gray-200"> <span className="font-medium text-gray-700 dark:text-gray-200">
{demand.project.name} {demand.project.name}
</span> </span>{" "}
{" "}
<span className="text-gray-400 dark:text-gray-500">({demand.project.shortCode})</span> <span className="text-gray-400 dark:text-gray-500">({demand.project.shortCode})</span>
</div> </div>
@@ -100,9 +118,7 @@ export function DemandPopover({
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 border border-dashed border-amber-300 dark:border-amber-700"> <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 border border-dashed border-amber-300 dark:border-amber-700">
Open Demand Open Demand
</span> </span>
<span className="text-[11px] text-gray-400 dark:text-gray-500"> <span className="text-[11px] text-gray-400 dark:text-gray-500">{demand.status}</span>
{demand.status}
</span>
</div> </div>
{/* Headcount */} {/* Headcount */}
@@ -137,11 +153,15 @@ export function DemandPopover({
{/* Hours */} {/* Hours */}
<div> <div>
<div className="text-gray-400 dark:text-gray-500 mb-0.5">Hours / day</div> <div className="text-gray-400 dark:text-gray-500 mb-0.5">Hours / day</div>
<div className="font-medium text-gray-800 dark:text-gray-200">{demand.hoursPerDay}h</div> <div className="font-medium text-gray-800 dark:text-gray-200">
{demand.hoursPerDay}h
</div>
</div> </div>
<div> <div>
<div className="text-gray-400 dark:text-gray-500 mb-0.5">Total hours</div> <div className="text-gray-400 dark:text-gray-500 mb-0.5">Total hours</div>
<div className="font-medium text-gray-800 dark:text-gray-200">{totalHours}h ({days}d)</div> <div className="font-medium text-gray-800 dark:text-gray-200">
{totalHours}h ({days}d)
</div>
</div> </div>
{/* Budget */} {/* Budget */}
@@ -166,7 +186,9 @@ export function DemandPopover({
{demand.percentage > 0 && ( {demand.percentage > 0 && (
<div> <div>
<div className="text-gray-400 dark:text-gray-500 mb-0.5">Percentage</div> <div className="text-gray-400 dark:text-gray-500 mb-0.5">Percentage</div>
<div className="font-medium text-gray-800 dark:text-gray-200">{demand.percentage}%</div> <div className="font-medium text-gray-800 dark:text-gray-200">
{demand.percentage}%
</div>
</div> </div>
)} )}
</div> </div>
@@ -175,8 +197,18 @@ export function DemandPopover({
{(loadingSuggestions || suggestions.length > 0) && ( {(loadingSuggestions || suggestions.length > 0) && (
<div className="pt-2 border-t border-gray-100 dark:border-gray-700"> <div className="pt-2 border-t border-gray-100 dark:border-gray-700">
<div className="flex items-center gap-1 mb-2"> <div className="flex items-center gap-1 mb-2">
<svg className="h-3.5 w-3.5 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> className="h-3.5 w-3.5 text-brand-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg> </svg>
<span className="text-[11px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"> <span className="text-[11px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
Suggested Resources Suggested Resources
@@ -205,13 +237,19 @@ export function DemandPopover({
</span> </span>
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs font-medium text-gray-800 dark:text-gray-200 truncate">{s.name}</div> <div className="text-xs font-medium text-gray-800 dark:text-gray-200 truncate">
{s.name}
</div>
<div className="text-[11px] text-gray-400 dark:text-gray-500"> <div className="text-[11px] text-gray-400 dark:text-gray-500">
{Math.round(s.utilization)}% utilized · {s.availableHoursPerDay.toFixed(1)}h/d free {Math.round(s.utilization)}% utilized · {s.availableHoursPerDay.toFixed(1)}
h/d free
</div> </div>
</div> </div>
<button <button
onClick={() => { onClose(); onFillDemand(demand); }} onClick={() => {
onClose();
onFillDemand(demand);
}}
className="shrink-0 rounded px-2 py-1 text-[11px] font-medium bg-brand-50 text-brand-700 hover:bg-brand-100 dark:bg-brand-900/30 dark:text-brand-300 dark:hover:bg-brand-900/50 transition-colors" className="shrink-0 rounded px-2 py-1 text-[11px] font-medium bg-brand-50 text-brand-700 hover:bg-brand-100 dark:bg-brand-900/30 dark:text-brand-300 dark:hover:bg-brand-900/50 transition-colors"
title={`Assign ${s.name}`} title={`Assign ${s.name}`}
> >
@@ -228,14 +266,20 @@ export function DemandPopover({
<div className="flex items-center gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"> <div className="flex items-center gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
{demand.unfilledHeadcount > 0 && ( {demand.unfilledHeadcount > 0 && (
<button <button
onClick={() => { onClose(); onFillDemand(demand); }} onClick={() => {
onClose();
onFillDemand(demand);
}}
className="flex-1 py-1.5 rounded-lg text-sm font-medium bg-amber-500 text-white hover:bg-amber-600 transition-colors" className="flex-1 py-1.5 rounded-lg text-sm font-medium bg-amber-500 text-white hover:bg-amber-600 transition-colors"
> >
Fill Demand Fill Demand
</button> </button>
)} )}
<button <button
onClick={() => { onClose(); onOpenPanel(demand.projectId); }} onClick={() => {
onClose();
onOpenPanel(demand.projectId);
}}
className="flex-1 py-1.5 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" className="flex-1 py-1.5 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
> >
Open Project Open Project
apps/web/src/components/timeline/KeyboardShortcutOverlay.tsx
+16 -4
View File
@@ -1,8 +1,8 @@
"use client"; "use client";
const SHORTCUTS: { keys: string; description: string }[] = [ const SHORTCUTS: { keys: string; description: string }[] = [
{ keys: "← / →", description: "Scroll timeline 1 day" }, { keys: "\u2190 / \u2192", description: "Scroll timeline 1 day" },
{ keys: "Shift + ← / →", description: "Scroll timeline 1 week" }, { keys: "Shift + \u2190 / \u2192", description: "Scroll timeline 1 week" },
{ keys: "Delete / Backspace", description: "Delete selected allocations" }, { keys: "Delete / Backspace", description: "Delete selected allocations" },
{ keys: "Ctrl / Cmd + Z", description: "Undo last action" }, { keys: "Ctrl / Cmd + Z", description: "Undo last action" },
{ keys: "Ctrl / Cmd + Shift + Z", description: "Redo" }, { keys: "Ctrl / Cmd + Shift + Z", description: "Redo" },
@@ -17,15 +17,27 @@ interface KeyboardShortcutOverlayProps {
export function KeyboardShortcutOverlay({ onClose }: KeyboardShortcutOverlayProps) { export function KeyboardShortcutOverlay({ onClose }: KeyboardShortcutOverlayProps) {
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}> <div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="keyboard-shortcuts-title"
>
<div <div
className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-sm mx-4 overflow-hidden" className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-sm mx-4 overflow-hidden"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-700"> <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-700">
<h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h2> <h2
id="keyboard-shortcuts-title"
className="text-sm font-semibold text-gray-900 dark:text-gray-100"
>
Keyboard Shortcuts
</h2>
<button <button
onClick={onClose} onClick={onClose}
aria-label="Close keyboard shortcuts"
className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none" className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
> >
&times; &times;
apps/web/src/components/timeline/NewAllocationPopover.tsx
+1
View File
@@ -96,6 +96,7 @@ export function NewAllocationPopover({
</span> </span>
<button <button
onClick={onClose} onClick={onClose}
aria-label="Close"
className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none" className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
> >
&times; &times;
apps/web/src/components/timeline/ProjectPanel.tsx
+1
View File
@@ -584,6 +584,7 @@ function PanelShell({ children, onClose }: { children: React.ReactNode; onClose:
<span className="text-sm font-semibold text-gray-700">Project Details</span> <span className="text-sm font-semibold text-gray-700">Project Details</span>
<button <button
onClick={onClose} onClick={onClose}
aria-label="Close panel"
className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none" className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
> >
&times; &times;
apps/web/src/components/timeline/TimelineToolbar.tsx
+4
View File
@@ -132,6 +132,7 @@ export function TimelineToolbar({
onClick={onNavigateBack} onClick={onNavigateBack}
className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800" className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
title="Previous 4 weeks" title="Previous 4 weeks"
aria-label="Previous 4 weeks"
> >
‹ ‹
</button> </button>
@@ -147,6 +148,7 @@ export function TimelineToolbar({
onClick={onNavigateForward} onClick={onNavigateForward}
className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800" className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
title="Next 4 weeks" title="Next 4 weeks"
aria-label="Next 4 weeks"
> >
› ›
</button> </button>
@@ -160,6 +162,7 @@ export function TimelineToolbar({
onClick={onUndo} onClick={onUndo}
disabled={!canUndo} disabled={!canUndo}
title="Undo (Ctrl+Z)" title="Undo (Ctrl+Z)"
aria-label="Undo"
className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800" className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
> >
↩ ↩
@@ -169,6 +172,7 @@ export function TimelineToolbar({
onClick={onRedo} onClick={onRedo}
disabled={!canRedo} disabled={!canRedo}
title="Redo (Ctrl+Shift+Z / Ctrl+Y)" title="Redo (Ctrl+Shift+Z / Ctrl+Y)"
aria-label="Redo"
className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800" className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
> >
↪ ↪