feat(documents-wizard): replace UUID-paste fields with searchable pickers + inline upload
Reps no longer have to copy/paste UUIDs into the New-document wizard.
Three UUID inputs replaced:
- Template id Input → DocumentTemplatePicker (queries /api/v1/document-templates
with name search; filters to isActive=true)
- Uploaded file id Input → inline FileUploadZone (drop or browse PDF; surfaces
the uploaded file id directly to the wizard via the new onUploadComplete
signature)
- Subject id Input → conditional picker: ClientPicker / CompanyPicker /
YachtPicker / InterestPicker depending on the subject-type dropdown.
Reservation falls back to Input for now (no ReservationPicker yet).
Other polish in the wizard:
- SIGNER_ROLES labels capitalized in the role select (client → Client, etc.)
via a formatSignerRole() helper. Internal values stay lowercase.
- Pinned h-9 on Select triggers so the type/subject row + signer-role select
vertically align with their adjacent inputs.
- Subject-type change now resets subjectId — picker options are type-specific
and a stale id from a different entity table would be invalid.
Infrastructure for hub uploads (will be consumed in a follow-up dropdown +
drag-drop pass):
- /api/v1/files/upload route now parses folderId from FormData (schema
already supported it).
- FileUploadZone accepts a folderId prop and forwards it, plus a new
onUploadComplete(file) callback shape that surfaces { id, filename } on
each successful upload. Existing per-entity callers (Files tab on clients,
companies, yachts, interests) ignore the arg, no behaviour change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -17,10 +17,30 @@ import {
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { PageHeader } from '@/components/shared/page-header';
|
||||
import { ClientPicker } from '@/components/shared/client-picker';
|
||||
import { CompanyPicker } from '@/components/companies/company-picker';
|
||||
import { YachtPicker } from '@/components/yachts/yacht-picker';
|
||||
import { InterestPicker } from '@/components/interests/interest-picker';
|
||||
import { DocumentTemplatePicker } from '@/components/documents/document-template-picker';
|
||||
import { FileUploadZone } from '@/components/files/file-upload-zone';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { toastError } from '@/lib/api/toast-error';
|
||||
import { DOCUMENT_TYPES } from '@/lib/constants';
|
||||
|
||||
// Display labels for SIGNER_ROLES — internal values stay lowercase, UI shows
|
||||
// capitalized. Falls back to capitalize-first-letter for any value not in the
|
||||
// explicit map.
|
||||
const SIGNER_ROLE_LABELS: Record<string, string> = {
|
||||
client: 'Client',
|
||||
sales: 'Sales',
|
||||
approver: 'Approver',
|
||||
developer: 'Developer',
|
||||
other: 'Other',
|
||||
};
|
||||
function formatSignerRole(r: string): string {
|
||||
return SIGNER_ROLE_LABELS[r] ?? r.charAt(0).toUpperCase() + r.slice(1);
|
||||
}
|
||||
|
||||
const SIGNER_ROLES = ['client', 'sales', 'approver', 'developer', 'other'] as const;
|
||||
|
||||
const SUBJECT_TYPES = [
|
||||
@@ -216,24 +236,37 @@ export function CreateDocumentWizard({ portSlug }: CreateDocumentWizardProps) {
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-xs">Template id</Label>
|
||||
<Input
|
||||
value={templateId}
|
||||
onChange={(e) => setTemplateId(e.target.value)}
|
||||
placeholder="Template UUID"
|
||||
<Label className="text-xs">Template</Label>
|
||||
<DocumentTemplatePicker
|
||||
value={templateId || null}
|
||||
onChange={(id) => setTemplateId(id ?? '')}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-xs">Uploaded file id</Label>
|
||||
<Input
|
||||
value={uploadedFileId}
|
||||
onChange={(e) => setUploadedFileId(e.target.value)}
|
||||
placeholder="File UUID from /api/v1/files upload"
|
||||
/>
|
||||
<Label className="text-xs">Upload PDF</Label>
|
||||
{uploadedFileId ? (
|
||||
<div className="flex items-center justify-between rounded-md border bg-muted/30 px-3 py-2 text-xs">
|
||||
<span className="truncate">File ready (id: {uploadedFileId.slice(0, 8)}…)</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUploadedFileId('')}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<FileUploadZone
|
||||
onUploadComplete={(file) => {
|
||||
if (file?.id) setUploadedFileId(file.id);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Upload via the existing file uploader, then paste the returned id here.
|
||||
Drop a PDF or click to browse. The file is stored, then the wizard wires it as
|
||||
the source for signing.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -274,9 +307,14 @@ export function CreateDocumentWizard({ portSlug }: CreateDocumentWizardProps) {
|
||||
<div className="grid grid-cols-[max-content_1fr] gap-2">
|
||||
<Select
|
||||
value={subjectType}
|
||||
onValueChange={(v) => setSubjectType(v as typeof subjectType)}
|
||||
onValueChange={(v) => {
|
||||
setSubjectType(v as typeof subjectType);
|
||||
// Reset subject id when the type changes — pickers are
|
||||
// type-specific and old ids belong to the wrong table.
|
||||
setSubjectId('');
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectTrigger className="h-9 w-32">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -287,11 +325,27 @@ export function CreateDocumentWizard({ portSlug }: CreateDocumentWizardProps) {
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
value={subjectId}
|
||||
onChange={(e) => setSubjectId(e.target.value)}
|
||||
placeholder={`${subjectType} id`}
|
||||
/>
|
||||
{subjectType === 'client' ? (
|
||||
<ClientPicker value={subjectId || null} onChange={(id) => setSubjectId(id ?? '')} />
|
||||
) : subjectType === 'company' ? (
|
||||
<CompanyPicker
|
||||
value={subjectId || null}
|
||||
onChange={(id) => setSubjectId(id ?? '')}
|
||||
/>
|
||||
) : subjectType === 'yacht' ? (
|
||||
<YachtPicker value={subjectId || null} onChange={(id) => setSubjectId(id ?? '')} />
|
||||
) : subjectType === 'interest' ? (
|
||||
<InterestPicker
|
||||
value={subjectId || null}
|
||||
onChange={(id) => setSubjectId(id ?? '')}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
value={subjectId}
|
||||
onChange={(e) => setSubjectId(e.target.value)}
|
||||
placeholder="Reservation id"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -330,13 +384,13 @@ export function CreateDocumentWizard({ portSlug }: CreateDocumentWizardProps) {
|
||||
updateSigner(idx, { signerRole: v as SignerRow['signerRole'] })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SIGNER_ROLES.map((r) => (
|
||||
<SelectItem key={r} value={r}>
|
||||
{r}
|
||||
{formatSignerRole(r)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
|
||||
119
src/components/documents/document-template-picker.tsx
Normal file
119
src/components/documents/document-template-picker.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { useDebounce } from '@/hooks/use-debounce';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface TemplateOption {
|
||||
id: string;
|
||||
name: string;
|
||||
templateType?: string;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
interface DocumentTemplatePickerProps {
|
||||
value: string | null;
|
||||
onChange: (templateId: string | null) => void;
|
||||
/** Optional filter by templateType (e.g. 'eoi', 'contract'). */
|
||||
templateType?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function DocumentTemplatePicker({
|
||||
value,
|
||||
onChange,
|
||||
templateType,
|
||||
placeholder = 'Select template...',
|
||||
disabled,
|
||||
}: DocumentTemplatePickerProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const debounced = useDebounce(search, 300);
|
||||
|
||||
const { data } = useQuery<{ data: TemplateOption[] }>({
|
||||
queryKey: ['document-template-picker', debounced, templateType ?? ''],
|
||||
queryFn: () => {
|
||||
const params = new URLSearchParams({
|
||||
search: debounced,
|
||||
page: '1',
|
||||
limit: '10',
|
||||
order: 'desc',
|
||||
isActive: 'true',
|
||||
});
|
||||
if (templateType) params.set('templateType', templateType);
|
||||
return apiFetch(`/api/v1/document-templates?${params.toString()}`);
|
||||
},
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const options = data?.data ?? [];
|
||||
|
||||
const selectedLabel = (() => {
|
||||
if (!value) return placeholder;
|
||||
const match = options.find((o) => o.id === value);
|
||||
return match?.name ?? `Template ${value.slice(0, 8)}`;
|
||||
})();
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
disabled={disabled}
|
||||
className={cn('w-full justify-between', !value && 'text-muted-foreground')}
|
||||
>
|
||||
<span className="truncate">{selectedLabel}</span>
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[320px] p-0" align="start">
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput placeholder="Search templates…" value={search} onValueChange={setSearch} />
|
||||
<CommandList>
|
||||
<CommandEmpty>No templates found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{options.map((t) => (
|
||||
<CommandItem
|
||||
key={t.id}
|
||||
value={t.id}
|
||||
onSelect={() => {
|
||||
onChange(t.id);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn('mr-2 h-4 w-4', value === t.id ? 'opacity-100' : 'opacity-0')}
|
||||
/>
|
||||
<span className="truncate">
|
||||
{t.name}
|
||||
{t.templateType ? (
|
||||
<span className="ml-2 text-xs text-muted-foreground">
|
||||
{t.templateType.replace(/_/g, ' ')}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user