fix: better transactions export UX

app/(app)/export/transactions/route.ts

@@ -10,6 +10,10 @@ import fs from "fs/promises"
 import JSZip from "jszip"
 import { NextResponse } from "next/server"
 import path from "path"
+import { Readable } from "stream"
+
+const TRANSACTIONS_CHUNK_SIZE = 300
+const FILES_CHUNK_SIZE = 50
 
 export async function GET(request: Request) {
   const url = new URL(request.url)
@@ -21,23 +25,21 @@ export async function GET(request: Request) {
   const { transactions } = await getTransactions(user.id, filters)
   const existingFields = await getFields(user.id)
 
-  // Generate CSV file with all transactions
   try {
     const fieldKeys = fields.filter((field) => existingFields.some((f) => f.code === field))
 
-    let csvContent = ""
+    // Create a transform stream for CSV generation
     const csvStream = format({ headers: fieldKeys, writeBOM: true, writeHeaders: false })
 
-    csvStream.on("data", (chunk) => {
-      csvContent += chunk
-    })
-
     // Custom CSV headers
     const headers = fieldKeys.map((field) => existingFields.find((f) => f.code === field)?.name ?? "UNKNOWN")
     csvStream.write(headers)
 
-    // CSV rows
-    for (const transaction of transactions) {
+    // Process transactions in chunks to avoid memory issues
+    for (let i = 0; i < transactions.length; i += TRANSACTIONS_CHUNK_SIZE) {
+      const chunk = transactions.slice(i, i + TRANSACTIONS_CHUNK_SIZE)
+
+      for (const transaction of chunk) {
         const row: Record<string, unknown> = {}
         for (const field of existingFields) {
           let value
@@ -47,7 +49,6 @@ export async function GET(request: Request) {
             value = transaction[field.code as keyof typeof transaction] ?? ""
           }
 
-        // Check if the field has a special export rules
           const exportFieldSettings = EXPORT_AND_IMPORT_FIELD_MAP[field.code]
           if (exportFieldSettings && exportFieldSettings.export) {
             row[field.code] = await exportFieldSettings.export(user.id, value)
@@ -55,16 +56,14 @@ export async function GET(request: Request) {
             row[field.code] = value
           }
         }
-
         csvStream.write(row)
       }
+    }
     csvStream.end()
 
-    // Wait for CSV generation to complete
-    await new Promise((resolve) => csvStream.on("end", resolve))
-
     if (!includeAttachments) {
-      return new NextResponse(csvContent, {
+      const stream = Readable.from(csvStream)
+      return new NextResponse(stream as any, {
         headers: {
           "Content-Type": "text/csv",
           "Content-Disposition": `attachment; filename="transactions.csv"`,
@@ -72,17 +71,29 @@ export async function GET(request: Request) {
       })
     }
 
-    // If includeAttachments is true, create a ZIP file with the CSV and attachments
+    // For ZIP files, we'll use a more memory-efficient approach
     const zip = new JSZip()
+
+    // Add CSV to zip
+    const csvContent = await new Promise<string>((resolve) => {
+      let content = ""
+      csvStream.on("data", (chunk) => {
+        content += chunk
+      })
+      csvStream.on("end", () => resolve(content))
+    })
     zip.file("transactions.csv", csvContent)
 
+    // Process files in chunks
     const filesFolder = zip.folder("files")
     if (!filesFolder) {
-      console.error("Failed to create zip folder")
-      return new NextResponse("Internal Server Error", { status: 500 })
+      throw new Error("Failed to create zip folder")
     }
 
-    for (const transaction of transactions) {
+    for (let i = 0; i < transactions.length; i += FILES_CHUNK_SIZE) {
+      const chunk = transactions.slice(i, i + FILES_CHUNK_SIZE)
+
+      for (const transaction of chunk) {
         const transactionFiles = await getFilesByTransactionId(transaction.id, user.id)
 
         const transactionFolder = filesFolder.folder(
@@ -91,10 +102,8 @@ export async function GET(request: Request) {
             transactionFiles.length > 1 ? transaction.name || transaction.id : ""
           )
         )
-      if (!transactionFolder) {
-        console.error(`Failed to create transaction folder for ${transaction.name}`)
-        continue
-      }
+
+        if (!transactionFolder) continue
 
         for (const file of transactionFiles) {
           const fullFilePath = fullPathForFile(user, file)
@@ -110,8 +119,16 @@ export async function GET(request: Request) {
           }
         }
       }
+    }
 
-    const zipContent = await zip.generateAsync({ type: "uint8array" })
+    // Generate zip with progress tracking
+    const zipContent = await zip.generateAsync({
+      type: "uint8array",
+      compression: "DEFLATE",
+      compressionOptions: {
+        level: 6,
+      },
+    })
 
     return new NextResponse(zipContent, {
       headers: {

app/(app)/transactions/page.tsx

@@ -46,7 +46,7 @@ export default async function TransactionsPage({ searchParams }: { searchParams:
           <span className="text-3xl tracking-tight opacity-20">{total}</span>
         </h2>
         <div className="flex gap-2">
-          <ExportTransactionsDialog fields={fields} categories={categories} projects={projects}>
+          <ExportTransactionsDialog fields={fields} categories={categories} projects={projects} total={total}>
             <Button variant="outline">
               <Download />
               <span className="hidden md:block">Export</span>

components/export/transactions.tsx

@@ -17,7 +17,7 @@ import { Separator } from "@/components/ui/separator"
 import { useTransactionFilters } from "@/hooks/use-transaction-filters"
 import { Category, Field, Project } from "@/prisma/client"
 import { formatDate } from "date-fns"
-import { useRouter } from "next/navigation"
+import { Download, Loader2 } from "lucide-react"
 import { useState } from "react"
 
 const deselectedFields = ["files", "text"]
@@ -26,14 +26,15 @@ export function ExportTransactionsDialog({
   fields,
   categories,
   projects,
+  total,
   children,
 }: {
   fields: Field[]
   categories: Category[]
   projects: Project[]
+  total: number
   children: React.ReactNode
 }) {
-  const router = useRouter()
   const [isLoading, setIsLoading] = useState(false)
   const [exportFilters, setExportFilters] = useTransactionFilters()
   const [exportFields, setExportFields] = useState<string[]>(
@@ -41,9 +42,11 @@ export function ExportTransactionsDialog({
   )
   const [includeAttachments, setIncludeAttachments] = useState(true)
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     setIsLoading(true)
-    router.push(
+
+    try {
+      const response = await fetch(
         `/export/transactions?${new URLSearchParams({
           search: exportFilters?.search || "",
           dateFrom: exportFilters?.dateFrom || "",
@@ -55,9 +58,33 @@ export function ExportTransactionsDialog({
           includeAttachments: includeAttachments.toString(),
         }).toString()}`
       )
-    setTimeout(() => {
+
+      if (!response.ok) {
+        throw new Error("Export failed")
+      }
+
+      // Get the filename from the Content-Disposition header
+      const contentDisposition = response.headers.get("Content-Disposition")
+      const filename = contentDisposition?.split("filename=")[1]?.replace(/"/g, "") || "transactions.zip"
+
+      // Create a blob from the response
+      const blob = await response.blob()
+
+      // Create a download link and trigger it
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    } catch (error) {
+      console.error("Export failed:", error)
+      // You might want to show an error message to the user here
+    } finally {
       setIsLoading(false)
-    }, 3000)
+    }
   }
 
   return (
@@ -65,7 +92,9 @@ export function ExportTransactionsDialog({
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="max-w-xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl font-bold">Export Transactions</DialogTitle>
+          <DialogTitle className="text-2xl font-bold">
+            Export {total} Transaction{total !== 1 ? "s" : ""}
+          </DialogTitle>
           <DialogDescription>Export selected transactions and files as a CSV file or a ZIP archive</DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-4">
@@ -161,7 +190,17 @@ export function ExportTransactionsDialog({
         </div>
         <DialogFooter className="sm:justify-end">
           <Button type="button" onClick={handleSubmit} disabled={isLoading}>
-            {isLoading ? "Exporting..." : "Export Transactions"}
+            {isLoading ? (
+              <div className="flex items-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>Exporting...</span>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Download className="h-4 w-4" />
+                <span>Export Transactions</span>
+              </div>
+            )}
           </Button>
         </DialogFooter>
       </DialogContent>