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:
2026-05-11 17:59:34 +02:00
parent 979eadae48
commit 1bdc856589
7 changed files with 761 additions and 48 deletions

View 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>
</>
);
}