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

30
src/components/admin/custom-fields/custom-field-form.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { formatErrorBanner } from '@/lib/api/toast-error';
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { Plus, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
@@ -60,7 +60,18 @@ const FIELD_TYPE_LABELS: Record<string, string> = {
// ─── Component ────────────────────────────────────────────────────────────────
export function CustomFieldForm({ open, onOpenChange, field, onSuccess }: CustomFieldFormProps) {
export function CustomFieldForm(props: CustomFieldFormProps) {
// Key-based remount: the body is keyed on open + field.id so its
// useState initializers re-seed each time the dialog opens.
return (
<CustomFieldFormBody
key={props.open ? `open:${props.field?.id ?? 'new'}` : 'closed'}
{...props}
/>
);
}
function CustomFieldFormBody({ open, onOpenChange, field, onSuccess }: CustomFieldFormProps) {
const isEdit = !!field;
// Form state
@@ -75,20 +86,7 @@ export function CustomFieldForm({ open, onOpenChange, field, onSuccess }: Custom
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Reset state when dialog opens
useEffect(() => {
if (open) {
setEntityType(field?.entityType ?? 'client');
setFieldName(field?.fieldName ?? '');
setFieldLabel(field?.fieldLabel ?? '');
setFieldType(field?.fieldType ?? 'text');
setSelectOptions(field?.selectOptions ?? []);
setNewOption('');
setIsRequired(field?.isRequired ?? false);
setSortOrder(field?.sortOrder ?? 0);
setError(null);
}
}, [open, field]);
// Reset is handled by the parent key-based remount above.
// ── Select options management ──────────────────────────────────────────────

20
src/components/admin/custom-fields/custom-fields-manager.tsx
View File

@@ -11,6 +11,7 @@ import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { WarningCallout } from '@/components/ui/warning-callout';
import { apiFetch } from '@/lib/api/client';
import { CustomFieldForm, type CustomFieldDefinition } from './custom-field-form';
@@ -164,15 +165,16 @@ export function CustomFieldsManager() {
}
/>
<div className="rounded-md border border-amber-300 bg-amber-50 px-3 py-2.5 text-xs text-amber-900">
<strong>Heads up:</strong> custom fields render in detail-page sidebars and the entity
export, and merge-tokens of the form{' '}
<code className="rounded bg-amber-100 px-1">{`{{custom.fieldName}}`}</code> now expand in
EOI/contract/email templates for client/interest/berth contexts. They still don&rsquo;t plug
into the global search index, the berth recommender, or the entity-diff audit log — use them
for rep-only annotations and template-merge values, but anything load-bearing for the deal
flow still needs a first-class column.
</div>
<WarningCallout title="Heads up">
<span className="text-xs">
Custom fields render in detail-page sidebars and the entity export, and merge-tokens of
the form <code className="rounded bg-amber-100 px-1">{`{{custom.fieldName}}`}</code> now
expand in EOI/contract/email templates for client/interest/berth contexts. They still
don&rsquo;t plug into the global search index, the berth recommender, or the entity-diff
audit log — use them for rep-only annotations and template-merge values, but anything
load-bearing for the deal flow still needs a first-class column.
</span>
</WarningCallout>
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as EntityTab)}>
<TabsList>