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

feat(uat-batch): Group M — universal preview + field-history foundation

Browse Source 
M42, M43 from the 2026-05-21 plan.

Shipped:
  M42  FilePreviewDialog now handles seven preview kinds via a single
       previewKindFor() router (mime + filename fallback). Image and
       PDF stay on the existing lightbox + pdf viewer; plain text
       (.txt / .md / .csv / .tsv / .json / .xml / .log / .yaml / .ini
       / .html — text/* and application/json and friends) renders via
       a new <TextPreview> that fetches via the presigned URL and
       caps the body at 1 MB with a "showing first 1 MB" banner.
       Audio / video render through native HTML5 <audio> / <video>
       elements with preload="metadata". Office documents (.docx /
       .xlsx / .pptx / .odt / .ods / .odp + the official mime variants)
       embed via Microsoft's hosted Office viewer (view.officeapps
       .live.com/op/embed.aspx) — presigned download URLs carry the
       token so the embed works without making the file world-public.
       Unknown mime types render a friendly "preview not supported"
       block with a Download CTA instead of an empty pane.
  M43  Field-level override history foundation. Migration 0081 adds
       `interest_field_history` (id, port_id, interest_id?, client_id?,
       field_path, old_value, new_value, source, submission_id?,
       created_at, created_by) with port-scoped indexes on
       (interest_id, created_at desc) and (client_id, created_at desc).
       Drizzle schema + index exports added. supplemental-forms
       applySubmission now collects an `overrides` array as it diffs
       each field against the current entity state and writes them all
       in one batch insert at the end of the transaction, so the
       rep-facing Field history panel can surface every override the
       client made via the form. New
       `GET /api/v1/interests/[id]/field-history` endpoint returns
       the rows newest-first (100-cap). Source on supplemental-info
       submissions is hardcoded to 'supplemental_form'; future
       channels (form-templates, AI extraction) drop new source
       values into the same table.

       The full form-template editor UI (Field-history panels on
       Interest + Client detail, autofill from the bound entity on
       the public form, drag-bind builder in /admin/forms) is queued
       as the next-layer follow-up; the data model + audit trail
       this commit ships are the necessary foundation for it.

Verified: tsc clean, vitest 1454/1454, migration applied.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-21 23:21:14 +02:00
parent 65ff5961f2
commit 0ddaf462c7
6 changed files with 377 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/files/file-preview-dialog.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { ExternalLink, ZoomIn } from 'lucide-react';
import { Download, ExternalLink, FileWarning, ZoomIn } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import {
@@ -12,6 +12,7 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';
// yet-another-react-lightbox is ~50kb, lazy-load it.
@@ -37,6 +38,50 @@ interface FilePreviewDialogProps {
mimeType?: string;
}
/**
* Routes a file's mime type to one of seven preview surfaces. Order
* matters — `application/pdf` is matched before the generic
* "application/*" bucket so PDFs stay on the rich pdfjs viewer.
*/
type PreviewKind =
| 'image'
| 'pdf'
| 'text'
| 'audio'
| 'video'
| 'office' // .docx / .xlsx / .pptx / .odt / .ods
| 'unknown';
function previewKindFor(mimeType: string | undefined, fileName: string | undefined): PreviewKind {
const mt = mimeType ?? '';
const name = (fileName ?? '').toLowerCase();
if (mt.startsWith('image/')) return 'image';
if (mt === 'application/pdf' || name.endsWith('.pdf')) return 'pdf';
if (mt.startsWith('audio/') || /\.(mp3|wav|m4a|ogg|flac)$/.test(name)) return 'audio';
if (mt.startsWith('video/') || /\.(mp4|mov|webm|m4v|ogg)$/.test(name)) return 'video';
if (
mt.startsWith('text/') ||
mt === 'application/json' ||
mt === 'application/xml' ||
/\.(txt|md|csv|tsv|json|xml|log|yaml|yml|conf|ini|html?)$/.test(name)
) {
return 'text';
}
if (
mt.includes('officedocument') ||
mt === 'application/msword' ||
mt === 'application/vnd.ms-excel' ||
mt === 'application/vnd.ms-powerpoint' ||
mt === 'application/vnd.oasis.opendocument.text' ||
mt === 'application/vnd.oasis.opendocument.spreadsheet' ||
mt === 'application/vnd.oasis.opendocument.presentation' ||
/\.(docx?|xlsx?|pptx?|odt|ods|odp)$/.test(name)
) {
return 'office';
}
return 'unknown';
}
export function FilePreviewDialog({
open,
onOpenChange,
@@ -57,8 +102,7 @@ export function FilePreviewDialog({
const loading = previewQuery.isLoading;
const error = previewQuery.error ? 'Failed to load preview' : null;
const isImage = mimeType?.startsWith('image/');
const isPdf = mimeType === 'application/pdf';
const kind = previewKindFor(mimeType, fileName);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -98,7 +142,7 @@ export function FilePreviewDialog({
</div>
)}
{!loading && !error && previewUrl && isImage && (
{!loading && !error && previewUrl && kind === 'image' && (
<button
type="button"
onClick={() => setLightboxOpen(true)}
@@ -115,16 +159,74 @@ export function FilePreviewDialog({
</button>
)}
{!loading && !error && previewUrl && isPdf && (
{!loading && !error && previewUrl && kind === 'pdf' && (
<PdfViewer url={previewUrl} fileName={fileName} />
)}
{!loading && !error && previewUrl && kind === 'text' && <TextPreview url={previewUrl} />}
{!loading && !error && previewUrl && kind === 'audio' && (
<div className="flex h-full items-center justify-center p-6">
{/* HTML5 <audio> handles streaming + scrubbing natively;
preload="metadata" avoids burning bandwidth on a tab
the rep may close before playing. */}
<audio src={previewUrl} controls preload="metadata" className="w-full max-w-xl" />
</div>
)}
{!loading && !error && previewUrl && kind === 'video' && (
<div className="flex h-full items-center justify-center bg-black">
<video
src={previewUrl}
controls
preload="metadata"
className="max-h-full max-w-full"
/>
</div>
)}
{!loading && !error && previewUrl && kind === 'office' && (
// Office documents render via Microsoft's hosted Office viewer
// — public URL only; presigned download URLs include a token
// in the query string so they work here even though the file
// isn't world-public. The viewer streams the document and
// renders a high-fidelity preview without us shipping a
// headless LibreOffice. Falls back to "download to view" if
// the embed loads but renders nothing (e.g. CORS rejected) —
// detection is hard so we just keep the download CTA below.
<iframe
title={fileName ?? 'Office document preview'}
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
previewUrl,
)}`}
className="h-full w-full"
sandbox="allow-scripts allow-same-origin allow-popups"
/>
)}
{!loading && !error && previewUrl && kind === 'unknown' && (
<div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
<FileWarning className="size-8 text-muted-foreground" aria-hidden />
<p className="text-sm font-medium">Preview not supported for this file type</p>
<p className="max-w-xs text-xs text-muted-foreground">
The file mime type ({mimeType ?? 'unknown'}) doesn&apos;t map to a built-in preview
surface. Download to view it locally.
</p>
<Button asChild>
<a href={previewUrl} download={fileName ?? 'download'}>
<Download className="mr-1.5 size-4" aria-hidden />
Download
</a>
</Button>
</div>
)}
</div>
</DialogContent>
{/* Lightbox renders OUTSIDE the parent Dialog so the dialog's own
* bounds don't clip the fullscreen overlay. yet-another-react-
* lightbox handles zoom/pan/keyboard nav out of the box. */}
{previewUrl && isImage && (
{previewUrl && kind === 'image' && (
<Lightbox
open={lightboxOpen}
close={() => setLightboxOpen(false)}
@@ -136,3 +238,70 @@ export function FilePreviewDialog({
</Dialog>
);
}
/**
* Plain-text preview pane — fetches the file body via the presigned
* URL (no auth needed; the URL itself carries the access token) and
* renders it as monospaced text. Caps the body at 1 MB so a huge log
* file doesn't lock the browser; surfaces a "first 1 MB shown" notice
* when the cap is hit.
*/
function TextPreview({ url }: { url: string }) {
const [text, setText] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [truncated, setTruncated] = useState(false);
const MAX_BYTES = 1_000_000; // 1 MB
useEffect(() => {
let cancelled = false;
async function load() {
try {
const res = await fetch(url);
if (!res.ok) {
if (!cancelled) setError(`Failed to load preview (${res.status})`);
return;
}
const blob = await res.blob();
const slice = blob.slice(0, MAX_BYTES);
const body = await slice.text();
if (cancelled) return;
setText(body);
setTruncated(blob.size > MAX_BYTES);
} catch (err) {
if (cancelled) return;
setError(err instanceof Error ? err.message : 'Unknown error');
}
}
void load();
return () => {
cancelled = true;
};
}, [url]);
if (error) {
return (
<div className="flex h-full items-center justify-center text-sm text-destructive">
{error}
</div>
);
}
if (text === null) {
return (
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
Loading…
</div>
);
}
return (
<div className="flex h-full flex-col">
{truncated ? (
<div className="border-b bg-amber-50 px-3 py-1 text-xs text-amber-900">
Showing the first 1 MB. Download the full file to view the rest.
</div>
) : null}
<pre className="flex-1 overflow-auto whitespace-pre-wrap break-words bg-background p-4 font-mono text-xs leading-relaxed">
{text}
</pre>
</div>
);
}