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,
} from "@/components/ui/breadcrumb";
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 { ProjectForm } from "@/components/projects/project-form";
import { GroupManagement } from "@/components/projects/group-management";
@@ -502,25 +503,43 @@ export default function ProjectDetailPage() {
)}
</div>
{canEdit && (
<Button
size="sm"
className="mt-3 w-full"
variant={isOverdue ? "destructive" : isExpiringSoon ? "outline" : "outline"}
onClick={() => {
verifyProject.mutate(undefined, {
onSuccess: () => toast.success("User list verified"),
onError: () => toast.error("Failed to verify"),
});
}}
disabled={verifyProject.isPending}
>
{verifyProject.isPending ? (
<Loader2 className="size-4 animate-spin mr-2" />
) : (
<ShieldCheck className="size-4 mr-2" />
)}
Verify Details
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger
render={
<Button
size="sm"
className="mt-3 w-full"
variant={isOverdue ? "destructive" : isExpiringSoon ? "outline" : "outline"}
onClick={() => {
verifyProject.mutate(undefined, {
onSuccess: () => toast.success("User list verified"),
onError: () => toast.error("Failed to verify"),
});
}}
disabled={verifyProject.isPending}
>
{verifyProject.isPending ? (
<Loader2 className="size-4 animate-spin mr-2" />
) : (
<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>
</Card>