mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-06-10 07:16:01 +00:00
feat(lancamentos): adicionar suporte a anexos com upload para storage S3
Permite vincular arquivos (PDF, imagens) a lançamentos via upload direto para storage compatível com S3, usando token assinado por arquivo e validação de propriedade na leitura e remoção. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { RiAttachment2, RiCloseLine } from "@remixicon/react";
|
||||
import { useRef } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
ALLOWED_MIME_TYPES,
|
||||
MAX_FILE_SIZE,
|
||||
} from "@/features/transactions/attachments-config";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
|
||||
interface AttachmentFilePickerProps {
|
||||
file: File | null;
|
||||
onChange: (file: File | null) => void;
|
||||
}
|
||||
|
||||
export function AttachmentFilePicker({
|
||||
file,
|
||||
onChange,
|
||||
}: AttachmentFilePickerProps) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const selected = e.target.files?.[0];
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
|
||||
if (!selected) return;
|
||||
|
||||
if (
|
||||
!ALLOWED_MIME_TYPES.includes(
|
||||
selected.type as (typeof ALLOWED_MIME_TYPES)[number],
|
||||
)
|
||||
) {
|
||||
toast.error(
|
||||
"Tipo de arquivo não suportado. Use PDF ou imagem (JPEG, PNG, WebP).",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selected.size > MAX_FILE_SIZE) {
|
||||
toast.error("O arquivo deve ter no máximo 50MB.");
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(selected);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs">Anexo</p>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept={ALLOWED_MIME_TYPES.join(",")}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
|
||||
{file ? (
|
||||
<div className="flex min-w-0 items-center gap-2 overflow-hidden rounded-md border px-3 py-2 text-sm">
|
||||
<RiAttachment2 className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="min-w-0 flex-1 truncate" title={file.name}>
|
||||
{file.name}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-6 shrink-0"
|
||||
onClick={() => onChange(null)}
|
||||
>
|
||||
<RiCloseLine className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed py-4 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<RiAttachment2 className="size-4" />
|
||||
Adicionar anexo
|
||||
</span>
|
||||
<span className="text-[11px]">
|
||||
PDF, JPEG, PNG ou WebP · máx. 50 MB
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiDeleteBinLine,
|
||||
RiDownloadLine,
|
||||
RiExternalLinkLine,
|
||||
RiFileImageLine,
|
||||
RiFileLine,
|
||||
RiFilePdfLine,
|
||||
} from "@remixicon/react";
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { detachTransactionAttachmentAction } from "@/features/transactions/actions/attachments";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog";
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function AttachmentIcon({ mimeType }: { mimeType: string }) {
|
||||
if (mimeType === "application/pdf")
|
||||
return <RiFilePdfLine className="size-4 text-red-500 shrink-0" />;
|
||||
if (mimeType.startsWith("image/"))
|
||||
return <RiFileImageLine className="size-4 text-blue-500 shrink-0" />;
|
||||
return <RiFileLine className="size-4 text-muted-foreground shrink-0" />;
|
||||
}
|
||||
|
||||
function AttachmentPreview({
|
||||
open,
|
||||
onOpenChange,
|
||||
fileName,
|
||||
mimeType,
|
||||
url,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
fileName: string;
|
||||
mimeType: string;
|
||||
url: string;
|
||||
}) {
|
||||
const isPdf = mimeType === "application/pdf";
|
||||
const isImage = mimeType.startsWith("image/");
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="flex h-[92vh] w-[min(96vw,1400px)] max-w-none flex-col gap-0 overflow-hidden p-0 sm:p-0"
|
||||
>
|
||||
<DialogHeader className="flex-row items-center justify-between gap-3 border-b px-4 py-3 sm:px-5">
|
||||
<div className="min-w-0">
|
||||
<DialogTitle
|
||||
className="truncate text-sm font-medium"
|
||||
title={fileName}
|
||||
>
|
||||
{fileName}
|
||||
</DialogTitle>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button type="button" variant="ghost" size="icon" asChild>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
download={fileName}
|
||||
>
|
||||
<RiDownloadLine className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" asChild>
|
||||
<a href={url} target="_blank" rel="noreferrer">
|
||||
<RiExternalLinkLine className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="ghost" size="sm">
|
||||
Fechar
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="min-h-0 min-w-0 flex-1">
|
||||
{isPdf && (
|
||||
<iframe
|
||||
src={url}
|
||||
className="h-full w-full border-0 bg-background"
|
||||
title={fileName}
|
||||
/>
|
||||
)}
|
||||
{isImage && (
|
||||
<div className="flex h-full w-full items-center justify-center bg-black/85 p-4 sm:p-6">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={url}
|
||||
alt={fileName}
|
||||
className="max-h-full max-w-full rounded-md object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
interface AttachmentItemProps {
|
||||
attachmentId: string;
|
||||
transactionId: string;
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
mimeType: string;
|
||||
url: string;
|
||||
onDeleted: () => void;
|
||||
readonly?: boolean;
|
||||
}
|
||||
|
||||
export function AttachmentItem({
|
||||
attachmentId,
|
||||
transactionId,
|
||||
fileName,
|
||||
fileSize,
|
||||
mimeType,
|
||||
url,
|
||||
onDeleted,
|
||||
readonly = false,
|
||||
}: AttachmentItemProps) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
|
||||
const canPreview =
|
||||
mimeType === "application/pdf" || mimeType.startsWith("image/");
|
||||
|
||||
function handleDelete() {
|
||||
startTransition(async () => {
|
||||
const result = await detachTransactionAttachmentAction({
|
||||
attachmentId,
|
||||
transactionId,
|
||||
});
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
onDeleted();
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
setConfirmOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex min-w-0 items-center gap-2 overflow-hidden rounded-md border px-3 py-2 text-sm">
|
||||
<AttachmentIcon mimeType={mimeType} />
|
||||
{canPreview ? (
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-0 flex-1 text-left"
|
||||
onClick={() => setPreviewOpen(true)}
|
||||
title={fileName}
|
||||
>
|
||||
<p className="truncate font-medium hover:underline">{fileName}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatBytes(fileSize)}
|
||||
</p>
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate font-medium">{fileName}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatBytes(fileSize)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 shrink-0"
|
||||
asChild
|
||||
>
|
||||
<a href={url} target="_blank" rel="noreferrer" download={fileName}>
|
||||
<RiDownloadLine className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
{!readonly && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 shrink-0 text-destructive hover:text-destructive"
|
||||
onClick={() => setConfirmOpen(true)}
|
||||
disabled={isPending}
|
||||
>
|
||||
<RiDeleteBinLine className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canPreview && (
|
||||
<AttachmentPreview
|
||||
open={previewOpen}
|
||||
onOpenChange={setPreviewOpen}
|
||||
fileName={fileName}
|
||||
mimeType={mimeType}
|
||||
url={url}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Remover anexo</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tem certeza que deseja remover{" "}
|
||||
<span className="break-all font-medium text-foreground">
|
||||
{fileName}
|
||||
</span>
|
||||
?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline" disabled={isPending}>
|
||||
Cancelar
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Removendo..." : "Remover"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { fetchTransactionAttachmentsAction } from "@/features/transactions/actions/attachments";
|
||||
import { AttachmentItem } from "./attachment-item";
|
||||
import { AttachmentUpload } from "./attachment-upload";
|
||||
|
||||
type AttachmentRow = {
|
||||
attachmentId: string;
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
mimeType: string;
|
||||
createdAt: Date;
|
||||
url: string;
|
||||
};
|
||||
|
||||
interface AttachmentSectionProps {
|
||||
transactionId: string;
|
||||
seriesId: string | null;
|
||||
readonly?: boolean;
|
||||
onLoaded?: (count: number) => void;
|
||||
}
|
||||
|
||||
export function AttachmentSection({
|
||||
transactionId,
|
||||
seriesId,
|
||||
readonly = false,
|
||||
onLoaded,
|
||||
}: AttachmentSectionProps) {
|
||||
const [items, setItems] = useState<AttachmentRow[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await fetchTransactionAttachmentsAction(transactionId);
|
||||
setItems(data);
|
||||
onLoaded?.(data.length);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [transactionId, onLoaded]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
return (
|
||||
<div className="min-w-0 space-y-2 overflow-hidden">
|
||||
{isLoading ? (
|
||||
<p className="text-xs text-muted-foreground">Carregando...</p>
|
||||
) : (
|
||||
<>
|
||||
{items.length > 0 ? (
|
||||
<div className="min-w-0 space-y-1.5">
|
||||
{items.map((item) => (
|
||||
<AttachmentItem
|
||||
key={item.attachmentId}
|
||||
attachmentId={item.attachmentId}
|
||||
transactionId={transactionId}
|
||||
fileName={item.fileName}
|
||||
fileSize={item.fileSize}
|
||||
mimeType={item.mimeType}
|
||||
url={item.url}
|
||||
onDeleted={load}
|
||||
readonly={readonly}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
readonly && (
|
||||
<p className="text-xs text-muted-foreground">Nenhum anexo.</p>
|
||||
)
|
||||
)}
|
||||
|
||||
{!readonly && (
|
||||
<AttachmentUpload
|
||||
transactionId={transactionId}
|
||||
seriesId={seriesId}
|
||||
onUploaded={load}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
"use client";
|
||||
|
||||
import { RiAttachment2 } from "@remixicon/react";
|
||||
import { useRef, useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
confirmAttachmentUploadAction,
|
||||
getPresignedUploadUrlAction,
|
||||
} from "@/features/transactions/actions/attachments";
|
||||
import {
|
||||
ALLOWED_MIME_TYPES,
|
||||
MAX_FILE_SIZE,
|
||||
} from "@/features/transactions/attachments-config";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Checkbox } from "@/shared/components/ui/checkbox";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
|
||||
interface AttachmentUploadProps {
|
||||
transactionId: string;
|
||||
seriesId: string | null;
|
||||
onUploaded: () => void;
|
||||
}
|
||||
|
||||
export function AttachmentUpload({
|
||||
transactionId,
|
||||
seriesId,
|
||||
onUploaded,
|
||||
}: AttachmentUploadProps) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [applyToSeries, setApplyToSeries] = useState(false);
|
||||
const [pendingFile, setPendingFile] = useState<File | null>(null);
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!inputRef.current) return;
|
||||
inputRef.current.value = "";
|
||||
|
||||
if (!file) return;
|
||||
|
||||
if (
|
||||
!ALLOWED_MIME_TYPES.includes(
|
||||
file.type as (typeof ALLOWED_MIME_TYPES)[number],
|
||||
)
|
||||
) {
|
||||
toast.error(
|
||||
"Tipo de arquivo não suportado. Use PDF ou imagem (JPEG, PNG, WebP).",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
toast.error("O arquivo deve ter no máximo 50MB.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (seriesId) {
|
||||
setPendingFile(file);
|
||||
} else {
|
||||
uploadFile(file, false);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadFile(file: File, toSeries: boolean) {
|
||||
startTransition(async () => {
|
||||
const presignResult = await getPresignedUploadUrlAction({
|
||||
fileName: file.name,
|
||||
mimeType: file.type,
|
||||
fileSize: file.size,
|
||||
transactionId,
|
||||
});
|
||||
|
||||
if (!presignResult.success) {
|
||||
toast.error(presignResult.error ?? "Erro ao iniciar upload.");
|
||||
return;
|
||||
}
|
||||
|
||||
const uploadResponse = await fetch(presignResult.presignedUrl, {
|
||||
method: "PUT",
|
||||
body: file,
|
||||
headers: { "Content-Type": file.type },
|
||||
});
|
||||
|
||||
if (!uploadResponse.ok) {
|
||||
toast.error("Erro ao enviar o arquivo. Tente novamente.");
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmResult = await confirmAttachmentUploadAction({
|
||||
uploadToken: presignResult.uploadToken,
|
||||
applyToSeries: toSeries,
|
||||
});
|
||||
|
||||
if (confirmResult.success) {
|
||||
toast.success(confirmResult.message);
|
||||
setPendingFile(null);
|
||||
setApplyToSeries(false);
|
||||
onUploaded();
|
||||
} else {
|
||||
toast.error(confirmResult.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleConfirmPending() {
|
||||
if (pendingFile) uploadFile(pendingFile, applyToSeries);
|
||||
}
|
||||
|
||||
function handleCancelPending() {
|
||||
setPendingFile(null);
|
||||
setApplyToSeries(false);
|
||||
}
|
||||
|
||||
if (pendingFile) {
|
||||
return (
|
||||
<div className="min-w-0 space-y-2 rounded-md border border-dashed p-3 text-sm">
|
||||
<div className="min-w-0 overflow-hidden">
|
||||
<p className="truncate font-medium" title={pendingFile.name}>
|
||||
{pendingFile.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="apply-series"
|
||||
checked={applyToSeries}
|
||||
onCheckedChange={(v) => setApplyToSeries(Boolean(v))}
|
||||
/>
|
||||
<Label htmlFor="apply-series" className="cursor-pointer text-xs">
|
||||
Aplicar a todas as parcelas da série
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleConfirmPending}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Enviando..." : "Confirmar"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleCancelPending}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept={ALLOWED_MIME_TYPES.join(",")}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed py-4 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
disabled={isPending}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<RiAttachment2 className="size-4" />
|
||||
{isPending ? "Enviando..." : "Adicionar anexo"}
|
||||
</span>
|
||||
{!isPending && (
|
||||
<span className="text-xs">PDF, JPEG, PNG ou WebP · máx. 50 MB</span>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user