letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Matt
2026-05-13 11:50:07 +02:00
parent b2588ecdd8
commit 4233aa3ac3
94 changed files with 1674 additions and 895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/interests/interest-contact-log-tab.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
Bell,
@@ -48,6 +48,7 @@ import { Skeleton } from '@/components/ui/skeleton';
import { Textarea } from '@/components/ui/textarea';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { useConfirmation } from '@/hooks/use-confirmation';
import { cn } from '@/lib/utils';
interface InterestContactLogTabProps {
@@ -158,6 +159,7 @@ function ContactLogRow({
onEdit: (e: ContactLogEntry) => void;
}) {
const queryClient = useQueryClient();
const { confirm, dialog: confirmDialog } = useConfirmation();
const channelMeta = CHANNEL_META[entry.channel];
const Icon = channelMeta.icon;
@@ -218,10 +220,13 @@ function ContactLogRow({
<DropdownMenuItem
className="text-destructive"
disabled={deleteMutation.isPending}
onClick={() => {
if (window.confirm('Delete this contact log entry?')) {
deleteMutation.mutate();
}
onClick={async () => {
const ok = await confirm({
title: 'Delete contact log entry',
description: 'This cannot be undone.',
confirmLabel: 'Delete',
});
if (ok) deleteMutation.mutate();
}}
>
<Trash2 className="mr-2 size-3.5" />
@@ -230,6 +235,7 @@ function ContactLogRow({
</DropdownMenuContent>
</DropdownMenu>
</div>
{confirmDialog}
</li>
);
}
@@ -257,7 +263,24 @@ function EmptyState({ onAdd }: { onAdd: () => void }) {
// ─── Compose / edit dialog ───────────────────────────────────────────────────
function ComposeDialog({
function ComposeDialog(props: {
interestId: string;
existing?: ContactLogEntry;
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
// Key-based remount: body keyed on open + existing.id so useState
// initializers re-run each time the dialog opens with a new row.
// Replaces the prior useEffect(setState, [open, existing]) sync.
return (
<ComposeDialogBody
key={props.open ? `open:${props.existing?.id ?? 'new'}` : 'closed'}
{...props}
/>
);
}
function ComposeDialogBody({
interestId,
existing,
open,
@@ -284,21 +307,6 @@ function ComposeDialog({
existing?.followUpAt ? localIsoString(existing.followUpAt) : '',
);
// Re-sync local state when the existing entry changes (e.g. opening
// the edit dialog for a different row). useEffect, not useMemo —
// setState in render is a Compiler red flag.
useEffect(() => {
if (open) {
setOccurredAt(
existing ? localIsoString(existing.occurredAt) : localIsoString(new Date().toISOString()),
);
setChannel(existing?.channel ?? 'phone');
setDirection(existing?.direction ?? 'outbound');
setSummary(existing?.summary ?? '');
setFollowUpAt(existing?.followUpAt ? localIsoString(existing.followUpAt) : '');
}
}, [open, existing]);
const mutation = useMutation({
mutationFn: async () => {
const body = {

14
src/components/interests/interest-contract-tab.tsx
View File

@@ -22,6 +22,7 @@ import { ExternalEoiUploadDialog } from '@/components/interests/external-eoi-upl
import { SigningProgress } from '@/components/documents/signing-progress';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { useConfirmation } from '@/hooks/use-confirmation';
import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/ui-store';
@@ -197,6 +198,7 @@ function ActiveContractCard({
onUploadSigned: () => void;
}) {
const queryClient = useQueryClient();
const { confirm, dialog: confirmDialog } = useConfirmation();
const { data: signersRes, isLoading: signersLoading } = useQuery<{ data: DocumentSigner[] }>({
queryKey: ['documents', doc.id, 'signers'],
@@ -306,10 +308,13 @@ function ActiveContractCard({
variant="ghost"
size="sm"
disabled={cancelMutation.isPending}
onClick={() => {
if (window.confirm('Cancel this contract? Signers will no longer be able to sign.')) {
cancelMutation.mutate();
}
onClick={async () => {
const ok = await confirm({
title: 'Cancel contract',
description: 'Signers will no longer be able to sign.',
confirmLabel: 'Cancel contract',
});
if (ok) cancelMutation.mutate();
}}
className="h-7 gap-1.5 text-xs text-destructive hover:text-destructive [&_svg]:size-3"
>
@@ -318,6 +323,7 @@ function ActiveContractCard({
</Button>
</div>
</footer>
{confirmDialog}
</section>
);
}

10
src/components/interests/interest-documents-tab.tsx
View File

@@ -13,6 +13,7 @@ import { FilePreviewDialog } from '@/components/files/file-preview-dialog';
import { PermissionGate } from '@/components/shared/permission-gate';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useConfirmation } from '@/hooks/use-confirmation';
import { apiFetch } from '@/lib/api/client';
interface InterestDocumentsTabProps {
@@ -35,6 +36,7 @@ export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps)
const queryClient = useQueryClient();
const [eoiDialogOpen, setEoiDialogOpen] = useState(false);
const [previewFile, setPreviewFile] = useState<FileRow | null>(null);
const { confirm, dialog: confirmDialog } = useConfirmation();
const { data: interest } = useQuery<InterestData>({
queryKey: ['interests', interestId],
@@ -77,7 +79,12 @@ export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps)
};
const handleDelete = async (file: FileRow) => {
if (!confirm(`Delete "${file.filename}"? This cannot be undone.`)) return;
const ok = await confirm({
title: 'Delete file',
description: `Delete "${file.filename}"? This cannot be undone.`,
confirmLabel: 'Delete',
});
if (!ok) return;
try {
await apiFetch(`/api/v1/files/${file.id}`, { method: 'DELETE' });
queryClient.invalidateQueries({ queryKey: filesQueryKey });
@@ -167,6 +174,7 @@ export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps)
fileName={previewFile?.filename}
mimeType={previewFile?.mimeType ?? undefined}
/>
{confirmDialog}
</div>
);
}

14
src/components/interests/interest-eoi-tab.tsx
View File

@@ -23,6 +23,7 @@ import { ExternalEoiUploadDialog } from '@/components/interests/external-eoi-upl
import { SigningProgress } from '@/components/documents/signing-progress';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { useConfirmation } from '@/hooks/use-confirmation';
import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/ui-store';
@@ -186,6 +187,7 @@ function ActiveEoiCard({
onUploadSigned: () => void;
}) {
const queryClient = useQueryClient();
const { confirm, dialog: confirmDialog } = useConfirmation();
const { data: signersRes, isLoading: signersLoading } = useQuery<{ data: DocumentSigner[] }>({
queryKey: ['documents', doc.id, 'signers'],
@@ -295,10 +297,13 @@ function ActiveEoiCard({
variant="ghost"
size="sm"
disabled={cancelMutation.isPending}
onClick={() => {
if (window.confirm('Cancel this EOI? Signers will no longer be able to sign.')) {
cancelMutation.mutate();
}
onClick={async () => {
const ok = await confirm({
title: 'Cancel EOI',
description: 'Signers will no longer be able to sign.',
confirmLabel: 'Cancel EOI',
});
if (ok) cancelMutation.mutate();
}}
className="h-7 gap-1.5 text-xs text-destructive hover:text-destructive [&_svg]:size-3"
>
@@ -307,6 +312,7 @@ function ActiveEoiCard({
</Button>
</div>
</footer>
{confirmDialog}
</section>
);
}

18
src/components/interests/interest-list.tsx
View File

@@ -55,6 +55,7 @@ import {
} from '@/components/ui/select';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useConfirmation } from '@/hooks/use-confirmation';
import { apiFetch } from '@/lib/api/client';
import { usePipelineStore } from '@/stores/pipeline-store';
import { PIPELINE_STAGES, STAGE_LABELS, type PipelineStage } from '@/lib/constants';
@@ -63,6 +64,7 @@ export function InterestList() {
const params = useParams<{ portSlug: string }>();
const portSlug = params?.portSlug ?? '';
const queryClient = useQueryClient();
const { confirm, dialog: confirmDialog } = useConfirmation();
const { viewMode, setViewMode } = usePipelineStore();
// Force the list view at mobile widths even when the user previously
@@ -308,15 +310,14 @@ export function InterestList() {
label: 'Archive',
icon: Archive,
variant: 'destructive',
onClick: (ids) => {
onClick: async (ids) => {
if (ids.length === 0) return;
if (
!window.confirm(
`Archive ${ids.length} interest${ids.length === 1 ? '' : 's'}? This can be undone from the archived list.`,
)
) {
return;
}
const ok = await confirm({
title: `Archive ${ids.length} interest${ids.length === 1 ? '' : 's'}`,
description: 'This can be undone from the archived list.',
confirmLabel: 'Archive',
});
if (!ok) return;
bulkMutation.mutate({ action: 'archive', ids });
},
},
@@ -464,6 +465,7 @@ export function InterestList() {
</DialogFooter>
</DialogContent>
</Dialog>
{confirmDialog}
</div>
);
}

14
src/components/interests/interest-reservation-tab.tsx
View File

@@ -22,6 +22,7 @@ import { ExternalEoiUploadDialog } from '@/components/interests/external-eoi-upl
import { SigningProgress } from '@/components/documents/signing-progress';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { useConfirmation } from '@/hooks/use-confirmation';
import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/ui-store';
@@ -200,6 +201,7 @@ function ActiveReservationCard({
onUploadSigned: () => void;
}) {
const queryClient = useQueryClient();
const { confirm, dialog: confirmDialog } = useConfirmation();
const { data: signersRes, isLoading: signersLoading } = useQuery<{ data: DocumentSigner[] }>({
queryKey: ['documents', doc.id, 'signers'],
@@ -309,10 +311,13 @@ function ActiveReservationCard({
variant="ghost"
size="sm"
disabled={cancelMutation.isPending}
onClick={() => {
if (window.confirm('Cancel this contract? Signers will no longer be able to sign.')) {
cancelMutation.mutate();
}
onClick={async () => {
const ok = await confirm({
title: 'Cancel contract',
description: 'Signers will no longer be able to sign.',
confirmLabel: 'Cancel contract',
});
if (ok) cancelMutation.mutate();
}}
className="h-7 gap-1.5 text-xs text-destructive hover:text-destructive [&_svg]:size-3"
>
@@ -321,6 +326,7 @@ function ActiveReservationCard({
</Button>
</div>
</footer>
{confirmDialog}
</section>
);
}

19
src/components/interests/interest-tabs.tsx
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>
);
}