fix(ux): improve empty-state messaging for tickets #49 and #57

#49 — upgrade MyVacationsClient account-not-linked inline text to a
prominent centred amber card with icon, heading, and admin-action guidance.

#57 — replace vague AI suggestions hint with actionable copy explaining
the Step 3 dependency before the user wonders why the list is empty.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-04-03 17:51:14 +02:00
parent bc0bb5bdb8
commit f5e41f7efe
2 changed files with 12 additions and 3 deletions
@@ -730,7 +730,7 @@ function ReqSuggestions({
if (!req.requiredSkills.length) { if (!req.requiredSkills.length) {
return ( return (
<p className="text-xs text-amber-600">Add required skills in Step 3 to see suggestions.</p> <p className="text-xs text-amber-600">No skills defined for this demand yet. Go back to Step 3 and add required skills the AI will then suggest matching resources here.</p>
); );
} }
@@ -74,8 +74,17 @@ export function MyVacationsClient() {
</div> </div>
{!resourceId && ( {!resourceId && (
<div className="rounded-xl bg-amber-50 border border-amber-200 p-4 text-sm text-amber-700"> <div className="rounded-xl border border-amber-200 bg-amber-50 dark:bg-amber-950/20 dark:border-amber-800 p-8 flex flex-col items-center text-center gap-3">
Your account is not linked to a resource. Please contact an administrator. <svg className="h-10 w-10 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
</svg>
<div>
<p className="text-sm font-semibold text-amber-800 dark:text-amber-300">Account not linked to a resource</p>
<p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
Your user account has not been connected to a resource record yet. Vacation tracking requires this link.<br />
Please ask an administrator to open your resource profile and link it to your account.
</p>
</div>
</div> </div>
)} )}