feat(uat-b1): ship Wave A-E of Bucket 1 audit findings
Wave A (Interest+EOI form quick wins): - Auto-select yacht after inline-create from interest form - EOI generate dialog: "View EOI" action toast - Interest form berth picker: formatBerthRange compact label - Remove "Generate EOI" button from Documents tab (clean removal) - Interest auto-assign: only sales_agent/sales_manager auto-claim ownership on create (explicit role check via user_port_roles join) - LinkedBerthRowItem dims: drop "D" suffix + "L × W" format - ExternalEoiUploadDialog: prefillSignatories prop threaded from active EOI signers - EOI signature progress on Overview milestone card footer Wave B (a11y + i18n sweeps): - aria-live on supplemental-info error state - text-[10px] -> text-xs in client-pipeline-summary - Currency formatter: locale default removed (Intl uses runtime) - en-US/en-GB hardcoded toLocaleString swept across 13 components Wave C (Primary berth always in EOI bundle): - Service guard strengthened on update path - Migration 0083 backfills historical primary rows Wave D (Onboarding super_admin discoverability): - /api/v1/admin/onboarding/status endpoint + shared service - Topbar OnboardingBanner (super_admin, session-dismissible) - OnboardingTile dashboard widget (rail group, self-hides at 100%) - Celebration toast + invalidate of shared status on last tick Wave E (Branded post-completion email idempotency): - Verified handleDocumentCompleted already owns the email fan-out - Added regression test for the polling path + idempotency Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -129,7 +129,7 @@ export function TemplateList() {
|
||||
accessorKey: 'updatedAt',
|
||||
header: 'Last Updated',
|
||||
cell: ({ row }) =>
|
||||
new Date(row.original.updatedAt).toLocaleDateString('en-GB', {
|
||||
new Date(row.original.updatedAt).toLocaleDateString(undefined, {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
@@ -221,7 +221,7 @@ export function TemplateList() {
|
||||
<span aria-hidden>·</span>
|
||||
<span>
|
||||
Updated{' '}
|
||||
{new Date(original.updatedAt).toLocaleDateString('en-GB', {
|
||||
{new Date(original.updatedAt).toLocaleDateString(undefined, {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
|
||||
95
src/components/admin/onboarding-banner.tsx
Normal file
95
src/components/admin/onboarding-banner.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { X, Sparkles, ChevronRight } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { usePermissions } from '@/hooks/use-permissions';
|
||||
import { useOnboardingStatus } from '@/hooks/use-onboarding-status';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const DISMISS_STORAGE_KEY = 'pn-crm.onboarding-banner-dismissed';
|
||||
|
||||
function getInitialDismissed(): boolean {
|
||||
if (typeof window === 'undefined') return false;
|
||||
return sessionStorage.getItem(DISMISS_STORAGE_KEY) === '1';
|
||||
}
|
||||
|
||||
/**
|
||||
* Topbar banner nudging super_admins to finish onboarding while the
|
||||
* checklist is incomplete. Renders nothing for non-super-admin roles and
|
||||
* disappears for everyone once the checklist hits 100%.
|
||||
*
|
||||
* Dismissible per browser session — flag stored in sessionStorage so it
|
||||
* comes back on next sign-in (we want it visible until they actually
|
||||
* finish, not just clicked-away forever).
|
||||
*/
|
||||
export function OnboardingBanner() {
|
||||
const params = useParams<{ portSlug: string }>();
|
||||
const portSlug = params?.portSlug ?? '';
|
||||
const { isSuperAdmin } = usePermissions();
|
||||
const { data, isLoading } = useOnboardingStatus({ enabled: isSuperAdmin });
|
||||
const [dismissed, setDismissed] = useState(getInitialDismissed);
|
||||
|
||||
if (!isSuperAdmin || isLoading || !data) return null;
|
||||
if (data.isComplete) return null;
|
||||
if (dismissed) return null;
|
||||
if (!portSlug) return null;
|
||||
|
||||
const next = data.nextStep;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-between gap-3 border-b border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-900',
|
||||
'dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-100',
|
||||
)}
|
||||
role="status"
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Sparkles className="size-4 shrink-0" aria-hidden />
|
||||
<span className="truncate">
|
||||
<strong>Setup is {data.percent}% complete</strong>. {data.completed} of {data.total} steps
|
||||
done.{' '}
|
||||
{next ? (
|
||||
<>
|
||||
Next:{' '}
|
||||
<Link
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
href={`/${portSlug}/admin/${next.href}` as any}
|
||||
className="font-medium underline-offset-2 hover:underline"
|
||||
>
|
||||
{next.label}
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button asChild size="sm" variant="ghost" className="h-7 px-2 text-xs">
|
||||
<Link
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
href={`/${portSlug}/admin/onboarding` as any}
|
||||
>
|
||||
View checklist
|
||||
<ChevronRight className="ml-0.5 size-3" aria-hidden />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7"
|
||||
aria-label="Dismiss onboarding banner"
|
||||
onClick={() => {
|
||||
sessionStorage.setItem(DISMISS_STORAGE_KEY, '1');
|
||||
setDismissed(true);
|
||||
}}
|
||||
>
|
||||
<X className="size-3.5" aria-hidden />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Check, Circle, Loader2, ExternalLink } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
@@ -251,6 +253,25 @@ export function OnboardingChecklist() {
|
||||
const completed = STEPS.filter((s) => stepDone(s.id)).length;
|
||||
const percent = Math.round((completed / STEPS.length) * 100);
|
||||
|
||||
// Fire a celebration toast exactly once when the last item ticks. Both
|
||||
// auto- and manual-driven completions trigger it. Guarded against
|
||||
// refetch noise so reloading the page when already 100% doesn't re-fire.
|
||||
const queryClient = useQueryClient();
|
||||
const prevCompletedRef = useRef<number | null>(null);
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
const prev = prevCompletedRef.current;
|
||||
if (prev !== null && prev < STEPS.length && completed === STEPS.length) {
|
||||
toast.success('🎉 Setup complete — every onboarding step is checked off.', {
|
||||
duration: 6000,
|
||||
});
|
||||
// Invalidate the shared status query so the banner + tile collapse
|
||||
// immediately instead of waiting for the 60s cache to expire.
|
||||
queryClient.invalidateQueries({ queryKey: ['admin', 'onboarding-status'] });
|
||||
}
|
||||
prevCompletedRef.current = completed;
|
||||
}, [completed, loading, queryClient]);
|
||||
|
||||
return (
|
||||
<div className="mt-6 space-y-6">
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user