Add tooltip to Verify Details button listing what is being verified

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-19 14:29:03 -07:00
parent 0a0de234a4
commit 966ea05128

View File

@@ -39,6 +39,7 @@ import {
BreadcrumbSeparator, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"; } from "@/components/ui/breadcrumb";
import { StatusBadge } from "@/components/shared/status-badge"; import { StatusBadge } from "@/components/shared/status-badge";
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
import { ActivityFeed, StatusChange } from "@/components/shared/activity-feed"; import { ActivityFeed, StatusChange } from "@/components/shared/activity-feed";
import { ProjectForm } from "@/components/projects/project-form"; import { ProjectForm } from "@/components/projects/project-form";
import { GroupManagement } from "@/components/projects/group-management"; import { GroupManagement } from "@/components/projects/group-management";
@@ -502,25 +503,43 @@ export default function ProjectDetailPage() {
)} )}
</div> </div>
{canEdit && ( {canEdit && (
<Button <TooltipProvider>
size="sm" <Tooltip>
className="mt-3 w-full" <TooltipTrigger
variant={isOverdue ? "destructive" : isExpiringSoon ? "outline" : "outline"} render={
onClick={() => { <Button
verifyProject.mutate(undefined, { size="sm"
onSuccess: () => toast.success("User list verified"), className="mt-3 w-full"
onError: () => toast.error("Failed to verify"), variant={isOverdue ? "destructive" : isExpiringSoon ? "outline" : "outline"}
}); onClick={() => {
}} verifyProject.mutate(undefined, {
disabled={verifyProject.isPending} onSuccess: () => toast.success("User list verified"),
> onError: () => toast.error("Failed to verify"),
{verifyProject.isPending ? ( });
<Loader2 className="size-4 animate-spin mr-2" /> }}
) : ( disabled={verifyProject.isPending}
<ShieldCheck className="size-4 mr-2" /> >
)} {verifyProject.isPending ? (
Verify Details <Loader2 className="size-4 animate-spin mr-2" />
</Button> ) : (
<ShieldCheck className="size-4 mr-2" />
)}
Verify Details
</Button>
}
/>
<TooltipContent side="bottom">
<div className="text-left">
<p className="font-medium mb-1">You are verifying:</p>
<ul className="list-disc pl-3.5 space-y-0.5">
<li>Cost Center</li>
<li>Points of Contact</li>
<li>Sponsored Users</li>
</ul>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)} )}
</CardContent> </CardContent>
</Card> </Card>