fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-13 11:50:07 +02:00
parent b2588ecdd8
commit 4233aa3ac3
94 changed files with 1674 additions and 895 deletions

View File

@@ -30,6 +30,7 @@ import { InterestEoiTab } from '@/components/interests/interest-eoi-tab';
import { InterestContactLogTab } from '@/components/interests/interest-contact-log-tab';
import { InterestContractTab } from '@/components/interests/interest-contract-tab';
import { InterestReservationTab } from '@/components/interests/interest-reservation-tab';
import { useConfirmation } from '@/hooks/use-confirmation';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';
@@ -179,7 +180,7 @@ interface MilestoneSectionProps {
hideAutoButton?: boolean;
}>;
status: string | null;
onAdvance: (stage: string, milestoneDate?: string) => void;
onAdvance: (stage: string, milestoneDate?: string) => void | Promise<void>;
isPending: boolean;
/** Current pipelineStage. Used to mark steps as done when the pipeline has
* moved past their advanceStage even if the date stamp is missing - e.g.
@@ -408,7 +409,7 @@ function FutureMilestones({
footer?: React.ReactNode;
}>;
stageMutation: ReturnType<typeof useStageMutation>;
advance: (stage: string) => void;
advance: (stage: string) => void | Promise<void>;
activeMilestone: 'berth_interest' | 'eoi' | 'deposit' | 'contract' | null;
currentStage: string;
}) {
@@ -464,6 +465,7 @@ function OverviewTab({
const portSlug = params?.portSlug ?? '';
const mutation = useInterestPatch(interestId);
const stageMutation = useStageMutation(interestId);
const { confirm, dialog: confirmDialog } = useConfirmation();
const save = (field: InterestPatchField) => async (next: string | null) => {
await mutation.mutateAsync({ [field]: next });
};
@@ -475,17 +477,19 @@ function OverviewTab({
* skip-ahead pattern from the inline stage picker so audit trails
* stay consistent regardless of which surface the rep used.
*/
const advance = (stage: string, milestoneDate?: string) => {
const advance = async (stage: string, milestoneDate?: string) => {
const fromStage = interest.pipelineStage as PipelineStage;
const toStage = stage as PipelineStage;
const isOverride = fromStage !== toStage && !canTransitionStage(fromStage, toStage);
if (isOverride) {
const ok = window.confirm(
`This advances the stage from "${fromStage.replace(/_/g, ' ')}" to "${toStage.replace(
const ok = await confirm({
title: 'Skip-ahead stage change',
description: `This advances the stage from "${fromStage.replace(/_/g, ' ')}" to "${toStage.replace(
/_/g,
' ',
)}", which isn't a standard next step. Continue?\n\nThe change will be flagged in the audit log.`,
);
)}", which isn't a standard next step. The change will be flagged in the audit log.`,
confirmLabel: 'Continue',
});
if (!ok) return;
}
stageMutation.mutate({
@@ -864,6 +868,7 @@ function OverviewTab({
desiredWidthFt={toNum(interest.desiredWidthFt)}
desiredDraftFt={toNum(interest.desiredDraftFt)}
/>
{confirmDialog}
</div>
);
}