Archived
Improve expenses receipts UX and Coolify MinIO deployment.
Extract receipt UI components, add view/edit/create dialog modes with list receipt previews, add docker-compose.coolify.yml and clearer COOLIFY/S3 path-style guidance for Application + MinIO setups. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,142 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { FileText, Loader2, Paperclip } from "lucide-react";
|
||||
import { api } from "~/trpc/react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog";
|
||||
import { ExpenseReceiptItem } from "~/components/expenses/expense-receipt-item";
|
||||
import { ReceiptViewerDialog } from "~/components/expenses/receipt-viewer-dialog";
|
||||
import type { ReceiptViewerTarget } from "~/components/expenses/receipt-viewer-dialog";
|
||||
import { isImageReceipt, receiptUrl } from "~/components/expenses/receipt-utils";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
interface ReceiptPreview {
|
||||
id: string;
|
||||
mimeType: string;
|
||||
originalFilename: string;
|
||||
}
|
||||
|
||||
interface ExpenseReceiptIndicatorProps {
|
||||
expenseId: string;
|
||||
receiptCount: number;
|
||||
receiptPreview: ReceiptPreview | null;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ExpenseReceiptIndicator({
|
||||
expenseId,
|
||||
receiptCount,
|
||||
receiptPreview,
|
||||
className,
|
||||
}: ExpenseReceiptIndicatorProps) {
|
||||
const [listOpen, setListOpen] = useState(false);
|
||||
const [viewerReceipt, setViewerReceipt] = useState<ReceiptViewerTarget | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const { data: receipts = [], isLoading } = api.expenses.listReceipts.useQuery(
|
||||
{ expenseId },
|
||||
{ enabled: listOpen && receiptCount > 1 },
|
||||
);
|
||||
|
||||
if (receiptCount === 0) {
|
||||
return (
|
||||
<span className={cn("text-muted-foreground text-xs", className)}>—</span>
|
||||
);
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
if (receiptCount === 1 && receiptPreview) {
|
||||
setViewerReceipt({
|
||||
id: receiptPreview.id,
|
||||
originalFilename: receiptPreview.originalFilename,
|
||||
mimeType: receiptPreview.mimeType,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setListOpen(true);
|
||||
};
|
||||
|
||||
const previewIsImage =
|
||||
receiptPreview && isImageReceipt(receiptPreview.mimeType);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleClick}
|
||||
className={cn(
|
||||
"hover:bg-muted h-auto gap-2 px-2 py-1.5 font-normal",
|
||||
className,
|
||||
)}
|
||||
title={
|
||||
receiptCount === 1
|
||||
? "View receipt"
|
||||
: `View ${receiptCount} receipts`
|
||||
}
|
||||
>
|
||||
{previewIsImage ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={receiptUrl(receiptPreview.id)}
|
||||
alt=""
|
||||
className="h-8 w-8 rounded object-cover ring-1 ring-black/5"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-muted flex h-8 w-8 items-center justify-center rounded ring-1 ring-black/5">
|
||||
<FileText className="text-muted-foreground h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
<span className="text-muted-foreground flex items-center gap-1 text-xs">
|
||||
<Paperclip className="h-3 w-3" />
|
||||
{receiptCount}
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
<ReceiptViewerDialog
|
||||
receipt={viewerReceipt}
|
||||
open={!!viewerReceipt}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setViewerReceipt(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog open={listOpen} onOpenChange={setListOpen}>
|
||||
<DialogContent className="max-h-[85vh] max-w-lg overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Receipts ({receiptCount})</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
{isLoading ? (
|
||||
<div className="text-muted-foreground flex items-center justify-center gap-2 py-8 text-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading receipts…
|
||||
</div>
|
||||
) : (
|
||||
receipts.map((receipt) => (
|
||||
<ExpenseReceiptItem
|
||||
key={receipt.id}
|
||||
receipt={receipt}
|
||||
expenseId={expenseId}
|
||||
onView={(r) => {
|
||||
setListOpen(false);
|
||||
setViewerReceipt(r);
|
||||
}}
|
||||
compact
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ExternalLink, Eye, FileText, Loader2, Trash2 } from "lucide-react";
|
||||
import { api } from "~/trpc/react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "~/components/ui/alert-dialog";
|
||||
import {
|
||||
formatReceiptSize,
|
||||
isImageReceipt,
|
||||
receiptUrl,
|
||||
} from "~/components/expenses/receipt-utils";
|
||||
import type { ReceiptViewerTarget } from "~/components/expenses/receipt-viewer-dialog";
|
||||
|
||||
export interface ExpenseReceiptRecord {
|
||||
id: string;
|
||||
originalFilename: string;
|
||||
mimeType: string;
|
||||
sizeBytes: number;
|
||||
}
|
||||
|
||||
interface ExpenseReceiptItemProps {
|
||||
receipt: ExpenseReceiptRecord;
|
||||
expenseId: string;
|
||||
onView: (receipt: ReceiptViewerTarget) => void;
|
||||
compact?: boolean;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
export function ExpenseReceiptItem({
|
||||
receipt,
|
||||
expenseId,
|
||||
onView,
|
||||
compact = false,
|
||||
readOnly = false,
|
||||
}: ExpenseReceiptItemProps) {
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const deleteReceipt = api.expenses.deleteReceipt.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Receipt removed");
|
||||
void utils.expenses.listReceipts.invalidate({ expenseId });
|
||||
void utils.expenses.getAll.invalidate();
|
||||
setConfirmDelete(false);
|
||||
},
|
||||
onError: (e) => toast.error(e.message),
|
||||
});
|
||||
|
||||
const url = receiptUrl(receipt.id);
|
||||
const isImage = isImageReceipt(receipt.mimeType);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
compact
|
||||
? "flex items-center gap-2 rounded-md border p-2"
|
||||
: "flex items-center gap-3 rounded-md border p-2 sm:p-3"
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onView(receipt)}
|
||||
className="hover:ring-primary/40 focus-visible:ring-ring shrink-0 overflow-hidden rounded transition hover:ring-2 focus-visible:ring-2 focus-visible:outline-none"
|
||||
aria-label={`View ${receipt.originalFilename}`}
|
||||
>
|
||||
{isImage ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
className={
|
||||
compact ? "h-10 w-10 object-cover" : "h-12 w-12 object-cover sm:h-14 sm:w-14"
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={
|
||||
compact
|
||||
? "bg-muted flex h-10 w-10 items-center justify-center"
|
||||
: "bg-muted flex h-12 w-12 items-center justify-center sm:h-14 sm:w-14"
|
||||
}
|
||||
>
|
||||
<FileText className="text-muted-foreground h-5 w-5 sm:h-6 sm:w-6" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{receipt.originalFilename}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{formatReceiptSize(receipt.sizeBytes)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={() => onView(receipt)}
|
||||
title="View receipt"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0" asChild>
|
||||
<a href={url} target="_blank" rel="noreferrer" title="Open in new tab">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
{!readOnly && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive h-8 w-8 p-0"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
disabled={deleteReceipt.isPending}
|
||||
title="Delete receipt"
|
||||
>
|
||||
{deleteReceipt.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete receipt?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
“{receipt.originalFilename}” will be permanently
|
||||
removed. This cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleteReceipt.isPending}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
disabled={deleteReceipt.isPending}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
deleteReceipt.mutate({ id: receipt.id });
|
||||
}}
|
||||
>
|
||||
{deleteReceipt.isPending ? "Deleting…" : "Delete"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { Loader2, Paperclip } from "lucide-react";
|
||||
import { api } from "~/trpc/react";
|
||||
import { toast } from "sonner";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { FileUpload } from "~/components/forms/file-upload";
|
||||
import { ExpenseReceiptItem } from "~/components/expenses/expense-receipt-item";
|
||||
import { ReceiptViewerDialog } from "~/components/expenses/receipt-viewer-dialog";
|
||||
import type { ReceiptViewerTarget } from "~/components/expenses/receipt-viewer-dialog";
|
||||
import {
|
||||
fileToBase64,
|
||||
RECEIPT_ACCEPT,
|
||||
RECEIPT_MAX_SIZE,
|
||||
RECEIPT_UPLOAD_HINT,
|
||||
} from "~/components/expenses/receipt-utils";
|
||||
|
||||
interface ExpenseReceiptsPanelProps {
|
||||
expenseId: string | null;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
export function ExpenseReceiptsPanel({
|
||||
expenseId,
|
||||
readOnly = false,
|
||||
}: ExpenseReceiptsPanelProps) {
|
||||
const [viewerReceipt, setViewerReceipt] = useState<ReceiptViewerTarget | null>(
|
||||
null,
|
||||
);
|
||||
const [uploadKey, setUploadKey] = useState(0);
|
||||
const processedFileCountRef = useRef(0);
|
||||
|
||||
const utils = api.useUtils();
|
||||
const { data: receipts = [], isLoading } = api.expenses.listReceipts.useQuery(
|
||||
{ expenseId: expenseId! },
|
||||
{ enabled: !!expenseId },
|
||||
);
|
||||
|
||||
const uploadReceipt = api.expenses.uploadReceipt.useMutation({
|
||||
onSuccess: () => {
|
||||
if (expenseId) {
|
||||
void utils.expenses.listReceipts.invalidate({ expenseId });
|
||||
void utils.expenses.getAll.invalidate();
|
||||
}
|
||||
},
|
||||
onError: (e) => toast.error(e.message),
|
||||
});
|
||||
|
||||
const handleFiles = async (files: File[]) => {
|
||||
if (!expenseId || files.length === 0) return;
|
||||
|
||||
const newFiles = files.slice(processedFileCountRef.current);
|
||||
processedFileCountRef.current = files.length;
|
||||
if (newFiles.length === 0) return;
|
||||
|
||||
let uploaded = 0;
|
||||
for (const file of newFiles) {
|
||||
try {
|
||||
const data = await fileToBase64(file);
|
||||
await uploadReceipt.mutateAsync({
|
||||
expenseId,
|
||||
filename: file.name,
|
||||
mimeType: file.type || "application/octet-stream",
|
||||
data,
|
||||
});
|
||||
uploaded++;
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error ? error.message : "Upload failed";
|
||||
toast.error(`${file.name}: ${message}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (uploaded > 0) {
|
||||
toast.success(
|
||||
uploaded === 1 ? "Receipt uploaded" : `${uploaded} receipts uploaded`,
|
||||
);
|
||||
processedFileCountRef.current = 0;
|
||||
setUploadKey((k) => k + 1);
|
||||
}
|
||||
};
|
||||
|
||||
if (!expenseId) {
|
||||
return (
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<Label className="flex items-center gap-2">
|
||||
<Paperclip className="h-4 w-4" />
|
||||
Receipts
|
||||
</Label>
|
||||
<div className="bg-muted/40 text-muted-foreground rounded-md border border-dashed p-4 text-center text-sm">
|
||||
Save the expense first, then drag and drop receipts here.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Label className="flex items-center gap-2">
|
||||
<Paperclip className="h-4 w-4" />
|
||||
Receipts
|
||||
{receipts.length > 0 && (
|
||||
<span className="text-muted-foreground text-xs font-normal">
|
||||
({receipts.length})
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
{uploadReceipt.isPending && (
|
||||
<span className="text-muted-foreground flex items-center gap-1.5 text-xs">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
Uploading…
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-muted-foreground flex items-center justify-center gap-2 rounded-md border border-dashed p-6 text-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading receipts…
|
||||
</div>
|
||||
) : receipts.length === 0 ? (
|
||||
<div className="text-muted-foreground rounded-md border border-dashed p-4 text-center text-sm">
|
||||
{readOnly
|
||||
? "No receipts attached."
|
||||
: "No receipts yet. Drop images or PDFs below."}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{receipts.map((receipt) => (
|
||||
<ExpenseReceiptItem
|
||||
key={receipt.id}
|
||||
receipt={receipt}
|
||||
expenseId={expenseId}
|
||||
onView={setViewerReceipt}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!readOnly && (
|
||||
<FileUpload
|
||||
key={`${expenseId}-${uploadKey}`}
|
||||
onFilesSelected={(files) => void handleFiles(files)}
|
||||
accept={RECEIPT_ACCEPT}
|
||||
maxFiles={5}
|
||||
maxSize={RECEIPT_MAX_SIZE}
|
||||
disabled={uploadReceipt.isPending}
|
||||
placeholder="Drop receipts here or tap to browse"
|
||||
description={RECEIPT_UPLOAD_HINT}
|
||||
className="[&>div:first-child]:p-4 sm:[&>div:first-child]:p-6"
|
||||
/>
|
||||
)}
|
||||
|
||||
<ReceiptViewerDialog
|
||||
receipt={viewerReceipt}
|
||||
open={!!viewerReceipt}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setViewerReceipt(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
export const RECEIPT_ACCEPT: Record<string, string[]> = {
|
||||
"image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp", ".heic"],
|
||||
"application/pdf": [".pdf"],
|
||||
};
|
||||
|
||||
export const RECEIPT_MAX_SIZE = 10 * 1024 * 1024;
|
||||
|
||||
export const RECEIPT_UPLOAD_HINT =
|
||||
"PNG, JPG, or PDF · up to 10MB each";
|
||||
|
||||
export function receiptUrl(receiptId: string) {
|
||||
return `/api/receipts/${receiptId}`;
|
||||
}
|
||||
|
||||
export function isImageReceipt(mimeType: string) {
|
||||
return mimeType.startsWith("image/");
|
||||
}
|
||||
|
||||
export function isPdfReceipt(mimeType: string) {
|
||||
return mimeType === "application/pdf";
|
||||
}
|
||||
|
||||
export function formatReceiptSize(bytes: number) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export async function fileToBase64(file: File): Promise<string> {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string;
|
||||
const base64 = result.split(",")[1];
|
||||
if (!base64) {
|
||||
reject(new Error("Failed to read file"));
|
||||
return;
|
||||
}
|
||||
resolve(base64);
|
||||
};
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { ExternalLink, FileText } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog";
|
||||
import {
|
||||
isImageReceipt,
|
||||
isPdfReceipt,
|
||||
receiptUrl,
|
||||
} from "~/components/expenses/receipt-utils";
|
||||
|
||||
export interface ReceiptViewerTarget {
|
||||
id: string;
|
||||
originalFilename: string;
|
||||
mimeType: string;
|
||||
}
|
||||
|
||||
interface ReceiptViewerDialogProps {
|
||||
receipt: ReceiptViewerTarget | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function ReceiptViewerDialog({
|
||||
receipt,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: ReceiptViewerDialogProps) {
|
||||
if (!receipt) return null;
|
||||
|
||||
const url = receiptUrl(receipt.id);
|
||||
const isImage = isImageReceipt(receipt.mimeType);
|
||||
const isPdf = isPdfReceipt(receipt.mimeType);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex max-h-[90vh] max-w-4xl flex-col gap-4">
|
||||
<DialogHeader className="shrink-0">
|
||||
<DialogTitle className="truncate pr-8">
|
||||
{receipt.originalFilename}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="bg-muted/30 min-h-[200px] flex-1 overflow-auto rounded-md border">
|
||||
{isImage ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={url}
|
||||
alt={receipt.originalFilename}
|
||||
className="mx-auto max-h-[min(70vh,720px)] w-full object-contain"
|
||||
/>
|
||||
) : isPdf ? (
|
||||
<iframe
|
||||
src={url}
|
||||
title={receipt.originalFilename}
|
||||
className="h-[min(70vh,720px)] w-full border-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-muted-foreground flex h-48 flex-col items-center justify-center gap-3 p-6 text-center text-sm">
|
||||
<FileText className="h-10 w-10" />
|
||||
<p>Preview not available for this file type.</p>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={url} target="_blank" rel="noreferrer">
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Open file
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="shrink-0 sm:justify-between">
|
||||
<Button variant="outline" asChild>
|
||||
<a href={url} target="_blank" rel="noreferrer">
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Open in new tab
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => onOpenChange(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user