feat(documents-hub): NewDocumentMenu dropdown + FolderDropZone drag-drop
Replaces the bare "+ New document" Button on the documents hub with a NewDocumentMenu dropdown so reps explicitly pick between: - "Upload file" → opens a Dialog with FileUploadZone scoped to the current folder + entity context. No signing flow attached. - "Generate document for signing" → navigates to /documents/new wizard. Avoids the prior ambiguity where reps clicked "+ New document" intending to attach a file and were dropped into the Documenso signer wizard. Also adds FolderDropZone wrapping FlatFolderListing and EntityFolderView. Dragging files from the OS over the current folder shows a drop overlay; drop fires N parallel uploads carrying the folder + entity context. Mirrors the per-entity Files tab UX but works in-place on the hub. Both surfaces hit /api/v1/files/upload with folderId + entityType/Id + the legacy clientId/companyId/yachtId FKs so files land on the right entity AND inside the correct folder. Also includes the in-flight prettier reformat from lint-staged on a few previously-touched files (create-document-wizard, file-upload-zone, admin/documenso/page) and adds the standalone prod-readiness audit report to docs/superpowers/audits/ for permanent reference. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
128
src/components/documents/new-document-menu.tsx
Normal file
128
src/components/documents/new-document-menu.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { ChevronDown, FileSignature, Plus, Upload } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { FileUploadZone } from '@/components/files/file-upload-zone';
|
||||
|
||||
/**
|
||||
* Dropdown that replaces the bare "+ New document" button on the documents
|
||||
* hub. Splits the action into the two real flows so reps know which one
|
||||
* they want before they click:
|
||||
* - "Upload file" → opens a dialog with FileUploadZone scoped to the
|
||||
* current folder + entity context. No signing flow attached.
|
||||
* - "Generate document for signing" → links to /documents/new wizard.
|
||||
*
|
||||
* Folder/entity context is passed through so uploaded files land in the
|
||||
* right place (entity FK + folder_id). Drops do the same via FileUploadZone's
|
||||
* existing folderId / entity props.
|
||||
*/
|
||||
interface NewDocumentMenuProps {
|
||||
portSlug: string;
|
||||
/** Selected folderId, or null for the root folder, or undefined when the
|
||||
* user is on the hub landing page (no folder selected). */
|
||||
folderId?: string | null;
|
||||
/** Entity context for system-managed entity folders. When set, uploaded
|
||||
* files are wired to the right FK column on the files table. */
|
||||
entityType?: 'client' | 'company' | 'yacht';
|
||||
entityId?: string;
|
||||
/** Visual variant: "default" for big banner placement, "sm" for the
|
||||
* inline-with-breadcrumb placement on folder views. */
|
||||
size?: 'default' | 'sm';
|
||||
}
|
||||
|
||||
export function NewDocumentMenu({
|
||||
portSlug,
|
||||
folderId,
|
||||
entityType,
|
||||
entityId,
|
||||
size = 'default',
|
||||
}: NewDocumentMenuProps) {
|
||||
const [uploadOpen, setUploadOpen] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size={size}>
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
New document
|
||||
<ChevronDown className="ml-1.5 h-4 w-4 opacity-80" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-64">
|
||||
<DropdownMenuItem onSelect={() => setUploadOpen(true)} className="gap-2 py-2.5">
|
||||
<Upload className="h-4 w-4" />
|
||||
<div className="flex flex-col">
|
||||
<span>Upload file</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Drop or browse — stored in the current folder
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild className="gap-2 py-2.5">
|
||||
<Link href={`/${portSlug}/documents/new`}>
|
||||
<FileSignature className="h-4 w-4" />
|
||||
<div className="flex flex-col">
|
||||
<span>Generate document for signing</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
EOI, contract, or custom — sent via Documenso
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Dialog open={uploadOpen} onOpenChange={setUploadOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload file</DialogTitle>
|
||||
<DialogDescription>
|
||||
{folderId === undefined
|
||||
? 'File will be added to the root.'
|
||||
: entityType && entityId
|
||||
? `File will be filed under this ${entityType}.`
|
||||
: 'File will be added to the current folder.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FileUploadZone
|
||||
folderId={folderId ?? null}
|
||||
entityType={entityType}
|
||||
entityId={entityId}
|
||||
clientId={entityType === 'client' ? entityId : undefined}
|
||||
companyId={entityType === 'company' ? entityId : undefined}
|
||||
yachtId={entityType === 'yacht' ? entityId : undefined}
|
||||
onUploadComplete={(file) => {
|
||||
if (!file) {
|
||||
// Trailing "batch done" call — invalidate hub caches so the
|
||||
// newly-uploaded file appears in the Recent files / folder
|
||||
// listings without a manual reload.
|
||||
queryClient.invalidateQueries({ queryKey: ['files'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['documents'] });
|
||||
setUploadOpen(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user