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

fix(ux): resolve tickets #51 #53 #54 from gitlooper sweep

Browse Source 
- #51: Add permanent redirect /login → /auth/signin in next.config.ts
  so users/testers who type the common alias land on the correct auth page
- #53: Add "Allocations → New Planning Entry" link to empty states of
  ProjectDemandsTable and ProjectAssignmentsTable; add shortcut link in
  demands table header for canEdit users
- #54: Track confirmed dropdown selection in ResourcePersonPicker —
  green ring + checkmark icon shown when user picks from suggestions;
  cleared on any manual keypress so free-text is clearly unconfirmed

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Hartmut Nörenberg
2026-04-03 12:27:43 +02:00
parent aef4c61dcc
commit 3979d342c8
4 changed files with 62 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/projects/ProjectAssignmentsTable.tsx
+13 -1
View File
@@ -2,6 +2,7 @@
import { useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { formatCents, formatDate, formatMoney } from "~/lib/format.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { ALLOCATION_STATUS_BADGE } from "~/lib/status-styles.js";
@@ -199,7 +200,18 @@ export function ProjectAssignmentsTable({ assignments }: ProjectAssignmentsTable
})()}
</table>
{assignments.length === 0 && (
<div className="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No assignments for this project.</div>
<div className="text-center py-12 text-sm text-gray-500 dark:text-gray-400 space-y-2">
<p>No assignments for this project.</p>
{canEdit && (
<p>
Create staffing entries via{" "}
<Link href="/allocations" className="text-brand-600 hover:underline dark:text-brand-400">
Allocations → New Planning Entry
</Link>
.
</p>
)}
</div>
)}
</div>
);
apps/web/src/components/projects/ProjectDemandsTable.tsx
+28 -6
View File
@@ -2,6 +2,7 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { formatCents, formatDate } from "~/lib/format.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
@@ -59,11 +60,21 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
<h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
Open Demands ({allDemands.length})
</h2>
{activeDemands.length > 0 && (
<span className="text-xs text-amber-600 dark:text-amber-400">
{activeDemands.reduce((sum, d) => sum + d.unfilledHeadcount, 0)} seats unfilled
</span>
)}
<div className="flex items-center gap-3">
{activeDemands.length > 0 && (
<span className="text-xs text-amber-600 dark:text-amber-400">
{activeDemands.reduce((sum, d) => sum + d.unfilledHeadcount, 0)} seats unfilled
</span>
)}
{canEdit && (
<Link
href="/allocations"
className="text-xs font-medium text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-200"
>
+ New in Allocations
</Link>
)}
</div>
</div>
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
@@ -192,7 +203,18 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
</tbody>
</table>
{allDemands.length === 0 && (
<div className="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No open demands for this project.</div>
<div className="text-center py-12 text-sm text-gray-500 dark:text-gray-400 space-y-2">
<p>No open demands for this project.</p>
{canEdit && (
<p>
Create staffing entries via{" "}
<Link href="/allocations" className="text-brand-600 hover:underline dark:text-brand-400">
Allocations → New Planning Entry
</Link>
.
</p>
)}
</div>
)}
</div>
apps/web/src/components/projects/ProjectWizard.tsx
+15 -1
View File
@@ -309,6 +309,9 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
const [query, setQuery] = useState(value);
const [open, setOpen] = useState(false);
const [debouncedSearch, setDebouncedSearch] = useState("");
// Tracks whether the current value was explicitly chosen from the dropdown
// vs typed as free text. Cleared on any manual keypress.
const [isConfirmed, setIsConfirmed] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
// Debounce search query to avoid excessive API calls
@@ -331,6 +334,8 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
// Sync local query when external value changes (e.g. wizard reset)
useEffect(() => {
setQuery(value);
// If the external value is cleared (reset), also clear the confirmed state
if (!value) setIsConfirmed(false);
}, [value]);
const { panelRef, position } = useAnchoredOverlay<HTMLInputElement>({
@@ -350,12 +355,20 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
onChange={(e) => {
setQuery(e.target.value);
onChange(e.target.value);
setIsConfirmed(false); // User is typing — selection no longer confirmed
setOpen(true);
}}
onFocus={() => setOpen(true)}
placeholder="Search by name or EID…"
className={INPUT_CLS}
className={`${INPUT_CLS} ${isConfirmed ? "ring-2 ring-green-400 ring-offset-0" : ""}`}
/>
{isConfirmed && (
<span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-green-500">
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
</svg>
</span>
)}
{open && filtered.length > 0 && typeof document !== "undefined"
? createPortal(
<div
@@ -376,6 +389,7 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
onMouseDown={() => {
onChange(r.displayName);
setQuery(r.displayName);
setIsConfirmed(true);
setOpen(false);
}}
className="flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50"