feat: cache ai results on server + show success banner

ai/analyze.ts

@@ -4,6 +4,7 @@ import { ActionState } from "@/lib/actions"
 import config from "@/lib/config"
 import OpenAI from "openai"
 import { AnalyzeAttachment } from "./attachments"
+import { updateFile } from "@/models/files"
 
 export type AnalysisResult = {
   output: Record<string, string>
@@ -14,7 +15,9 @@ export async function analyzeTransaction(
   prompt: string,
   schema: Record<string, unknown>,
   attachments: AnalyzeAttachment[],
-  apiKey: string
+  apiKey: string,
+  fileId: string,
+  userId: string
 ): Promise<ActionState<AnalysisResult>> {
   const openai = new OpenAI({
     apiKey,
@@ -54,6 +57,9 @@ export async function analyzeTransaction(
     console.log("ChatGPT tokens used:", response.usage)
 
     const result = JSON.parse(response.output_text)
+    
+    await updateFile(fileId, userId, { cachedParseResult: result })
+
     return { success: true, data: { output: result, tokensUsed: response.usage?.total_tokens || 0 } }
   } catch (error) {
     console.error("AI Analysis error:", error)

app/(app)/context.tsx

@@ -1,10 +1,14 @@
 "use client"
 
+import { Check, X, Trash2 } from "lucide-react"
 import { createContext, ReactNode, useContext, useState } from "react"
 
+type BannerType = "success" | "deleted" | "failed" | "default"
+
 type Notification = {
   code: string
   message: string
+  type?: BannerType
 }
 
 type NotificationContextType = {
@@ -22,10 +26,51 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
 
   const showNotification = (notification: Notification) => {
     setNotification(notification)
+    if (notification.code === "global.banner") {
+      setTimeout(() => setNotification(null), 2000)
+    }
+  }
+
+  const getBannerStyles = (type: BannerType = "default") => {
+    switch (type) {
+      case "success":
+        return "bg-green-500 text-teal-50"
+      case "deleted":
+        return "bg-black text-white"
+      case "failed":
+        return "bg-red-500 text-white"
+      case "default":
+        return "bg-white text-black"
+    }
+  }
+
+  const getBannerIcon = (type: BannerType = "default") => {
+    switch (type) {
+      case "success":
+        return <Check className="h-10 w-10 animate-bounce" />
+      case "deleted":
+        return <Trash2 className="h-10 w-10 animate-bounce" />
+      case "failed":
+        return <X className="h-10 w-10 animate-bounce" />
+      case "default":
+        return null
+    }
   }
 
   return (
-    <NotificationContext.Provider value={{ notification, showNotification }}>{children}</NotificationContext.Provider>
+    <NotificationContext.Provider value={{ notification, showNotification }}>
+      {children}
+      {notification?.code === "global.banner" && (
+        <div className="fixed inset-0 flex items-center justify-center z-50">
+          <div
+            className={`border rounded-lg p-8 flex flex-col items-center justify-center gap-4 shadow-lg h-[160px] w-[160px] ${getBannerStyles(notification.type)}`}
+          >
+            {getBannerIcon(notification.type)}
+            <p className="text-xl font-medium">{notification.message}</p>
+          </div>
+        </div>
+      )}
+    </NotificationContext.Provider>
   )
 }
 

app/(app)/unsorted/actions.ts

@@ -67,7 +67,7 @@ export async function analyzeFileAction(
 
   const schema = fieldsToJsonSchema(fields)
 
-  const results = await analyzeTransaction(prompt, schema, attachments, apiKey)
+  const results = await analyzeTransaction(prompt, schema, attachments, apiKey, file.id, user.id)
 
   console.log("Analysis results:", results)
 

app/(app)/unsorted/loading.tsx

@@ -3,7 +3,7 @@ import { Loader2 } from "lucide-react"
 
 export default function Loading() {
   return (
-    <div className="flex flex-col gap-4 p-4 w-full max-w-6xl">
+    <div className="flex flex-col gap-6 p-4 w-full max-w-6xl">
       <header className="flex items-center justify-between">
         <h2 className="text-3xl font-bold tracking-tight flex flex-row gap-2">
           <span>Loading unsorted files...</span>

app/(app)/unsorted/page.tsx

@@ -31,7 +31,7 @@ export default async function UnsortedPage() {
   const settings = await getSettings(user.id)
 
   return (
-    <div className="flex flex-col gap-4 p-4 w-full max-w-6xl">
+    <div className="flex flex-col gap-6 p-4 w-full max-w-6xl">
       <header className="flex items-center justify-between">
         <h2 className="text-3xl font-bold tracking-tight">You have {files.length} unsorted files</h2>
       </header>

app/layout.tsx

@@ -42,7 +42,7 @@ export const viewport: Viewport = {
   userScalable: false,
 }
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className="min-h-screen bg-white antialiased">{children}</body>

components/transactions/bulk-actions.tsx

@@ -2,22 +2,9 @@
 
 import { bulkDeleteTransactionsAction } from "@/app/(app)/transactions/actions"
 import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Trash2 } from "lucide-react"
-import { ChevronUp, Trash2 } from "lucide-react"
 import { useState } from "react"
 
-const bulkActions = [
-  {
-    id: "delete",
-    label: "Bulk Delete",
-    icon: Trash2,
-    variant: "destructive" as const,
-    action: bulkDeleteTransactionsAction,
-    confirmMessage:
-      "Are you sure you want to delete these transactions and all their files? This action cannot be undone.",
-  },
-]
-
 interface BulkActionsMenuProps {
   selectedIds: string[]
   onActionComplete?: () => void
@@ -26,24 +13,21 @@ interface BulkActionsMenuProps {
 export function BulkActionsMenu({ selectedIds, onActionComplete }: BulkActionsMenuProps) {
   const [isLoading, setIsLoading] = useState(false)
 
-  const handleAction = async (actionId: string) => {
+  const handleDelete = async () => {
-    const action = bulkActions.find((a) => a.id === actionId)
+    const confirmMessage =
-    if (!action) return
+      "Are you sure you want to delete these transactions and all their files? This action cannot be undone."
-
+    if (!confirm(confirmMessage)) return
-    if (action.confirmMessage) {
-      if (!confirm(action.confirmMessage)) return
-    }
 
     try {
       setIsLoading(true)
-      const result = await action.action(selectedIds)
+      const result = await bulkDeleteTransactionsAction(selectedIds)
       if (!result.success) {
         throw new Error(result.error)
       }
       onActionComplete?.()
     } catch (error) {
-      console.error(`Failed to execute bulk action ${actionId}:`, error)
+      console.error("Failed to delete transactions:", error)
-      alert(`Failed to execute action: ${error}`)
+      alert(`Failed to delete transactions: ${error}`)
     } finally {
       setIsLoading(false)
     }
@@ -51,27 +35,10 @@ export function BulkActionsMenu({ selectedIds, onActionComplete }: BulkActionsMe
 
   return (
     <div className="fixed bottom-4 right-4 z-50">
-      <DropdownMenu>
+      <Button variant="destructive" className="min-w-48 gap-2" disabled={isLoading} onClick={handleDelete}>
-        <DropdownMenuTrigger asChild>
+        <Trash2 className="h-4 w-4" />
-          <Button className="min-w-48" disabled={isLoading}>
+        Delete {selectedIds.length} transactions
-            {selectedIds.length} transactions
+      </Button>
-            <ChevronUp className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {bulkActions.map((action) => (
-            <DropdownMenuItem
-              key={action.id}
-              onClick={() => handleAction(action.id)}
-              className="gap-2"
-              disabled={isLoading}
-            >
-              <action.icon className="h-4 w-4" />
-              {action.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
     </div>
   )
 }

components/transactions/edit.tsx

@@ -10,7 +10,7 @@ import { FormInput, FormTextarea } from "@/components/forms/simple"
 import { Button } from "@/components/ui/button"
 import { Category, Currency, Field, Project, Transaction } from "@/prisma/client"
 import { format } from "date-fns"
-import { Loader2 } from "lucide-react"
+import { Loader2, Save, Trash2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { startTransition, useActionState, useEffect, useMemo, useState } from "react"
 
@@ -212,17 +212,23 @@ export default function TransactionEditForm({
 
       <div className="flex justify-between space-x-4 pt-6">
         <Button type="button" onClick={handleDelete} variant="destructive" disabled={isDeleting}>
-          {isDeleting ? "⏳ Deleting..." : "Delete "}
+          <>
+            <Trash2 className="h-4 w-4" />
+            {isDeleting ? "⏳ Deleting..." : "Delete "}
+          </>
         </Button>
 
         <Button type="submit" disabled={isSaving}>
           {isSaving ? (
             <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              <Loader2 className="h-4 w-4 animate-spin" />
               Saving...
             </>
           ) : (
-            "Save Transaction"
+            <>
+              <Save className="h-4 w-4" />
+              Save Transaction
+            </>
           )}
         </Button>
 

components/unsorted/analyze-form.tsx

@@ -12,7 +12,7 @@ import { FormInput, FormTextarea } from "@/components/forms/simple"
 import { Button } from "@/components/ui/button"
 import { Category, Currency, Field, File, Project } from "@/prisma/client"
 import { format } from "date-fns"
-import { Brain, Loader2 } from "lucide-react"
+import { Brain, Loader2, Trash2, ArrowDownToLine } from "lucide-react"
 import { startTransition, useActionState, useMemo, useState } from "react"
 import ToolWindow from "../agents/tool-window"
 
@@ -50,8 +50,8 @@ export default function AnalyzeForm({
   }, [fields])
 
   const extraFields = useMemo(() => fields.filter((field) => field.isExtra), [fields])
-  const initialFormState = useMemo(
+  const initialFormState = useMemo(() => {
-    () => ({
+    const baseState = {
       name: file.filename,
       merchant: "",
       description: "",
@@ -65,16 +65,32 @@ export default function AnalyzeForm({
       issuedAt: "",
       note: "",
       text: "",
-      ...extraFields.reduce(
+    }
-        (acc, field) => {
+
-          acc[field.code] = ""
+    // Add extra fields
-          return acc
+    const extraFieldsState = extraFields.reduce(
-        },
+      (acc, field) => {
-        {} as Record<string, string>
+        acc[field.code] = ""
-      ),
+        return acc
-    }),
+      },
-    [file.filename, settings, extraFields]
+      {} as Record<string, string>
-  )
+    )
+
+    // Load cached results if they exist
+    const cachedResults = file.cachedParseResult
+      ? Object.fromEntries(
+          Object.entries(file.cachedParseResult as Record<string, string>).filter(
+            ([_, value]) => value !== null && value !== undefined && value !== ""
+          )
+        )
+      : {}
+
+    return {
+      ...baseState,
+      ...extraFieldsState,
+      ...cachedResults,
+    }
+  }, [file.filename, settings, extraFields, file.cachedParseResult])
   const [formData, setFormData] = useState(initialFormState)
 
   async function saveAsTransaction(formData: FormData) {
@@ -85,10 +101,12 @@ export default function AnalyzeForm({
       setIsSaving(false)
 
       if (result.success) {
+        showNotification({ code: "global.banner", message: "Saved!", type: "success" })
         showNotification({ code: "sidebar.transactions", message: "new" })
         setTimeout(() => showNotification({ code: "sidebar.transactions", message: "" }), 3000)
       } else {
         setSaveError(result.error ? result.error : "Something went wrong...")
+        showNotification({ code: "global.banner", message: "Failed to save", type: "failed" })
       }
     })
   }
@@ -126,12 +144,12 @@ export default function AnalyzeForm({
       <Button className="w-full mb-6 py-6 text-lg" onClick={startAnalyze} disabled={isAnalyzing}>
         {isAnalyzing ? (
           <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Loader2 className="mr-1 h-4 w-4 animate-spin" />
             <span>{analyzeStep}</span>
           </>
         ) : (
           <>
-            <Brain className="mr-2 h-4 w-4" />
+            <Brain className="mr-1 h-4 w-4" />
             <span>Analyze with AI</span>
           </>
         )}
@@ -146,7 +164,7 @@ export default function AnalyzeForm({
           name="name"
           value={formData.name}
           onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
-          required={true}
+          required={fieldMap.name.isRequired}
         />
 
         <FormInput
@@ -155,6 +173,7 @@ export default function AnalyzeForm({
           value={formData.merchant}
           onChange={(e) => setFormData((prev) => ({ ...prev, merchant: e.target.value }))}
           hideIfEmpty={!fieldMap.merchant.isVisibleInAnalysis}
+          required={fieldMap.merchant.isRequired}
         />
 
         <FormInput
@@ -163,6 +182,7 @@ export default function AnalyzeForm({
           value={formData.description}
           onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
           hideIfEmpty={!fieldMap.description.isVisibleInAnalysis}
+          required={fieldMap.description.isRequired}
         />
 
         <div className="flex flex-wrap gap-4">
@@ -177,7 +197,7 @@ export default function AnalyzeForm({
               !isNaN(newValue) && setFormData((prev) => ({ ...prev, total: newValue }))
             }}
             className="w-32"
-            required={true}
+            required={fieldMap.total.isRequired}
           />
 
           <FormSelectCurrency
@@ -187,6 +207,7 @@ export default function AnalyzeForm({
             value={formData.currencyCode}
             onValueChange={(value) => setFormData((prev) => ({ ...prev, currencyCode: value }))}
             hideIfEmpty={!fieldMap.currencyCode.isVisibleInAnalysis}
+            required={fieldMap.currencyCode.isRequired}
           />
 
           <FormSelectType
@@ -195,6 +216,7 @@ export default function AnalyzeForm({
             value={formData.type}
             onValueChange={(value) => setFormData((prev) => ({ ...prev, type: value }))}
             hideIfEmpty={!fieldMap.type.isVisibleInAnalysis}
+            required={fieldMap.type.isRequired}
           />
         </div>
 
@@ -219,6 +241,7 @@ export default function AnalyzeForm({
             value={formData.issuedAt}
             onChange={(e) => setFormData((prev) => ({ ...prev, issuedAt: e.target.value }))}
             hideIfEmpty={!fieldMap.issuedAt.isVisibleInAnalysis}
+            required={fieldMap.issuedAt.isRequired}
           />
         </div>
 
@@ -231,6 +254,7 @@ export default function AnalyzeForm({
             onValueChange={(value) => setFormData((prev) => ({ ...prev, categoryCode: value }))}
             placeholder="Select Category"
             hideIfEmpty={!fieldMap.categoryCode.isVisibleInAnalysis}
+            required={fieldMap.categoryCode.isRequired}
           />
 
           {projects.length > 0 && (
@@ -242,6 +266,7 @@ export default function AnalyzeForm({
               onValueChange={(value) => setFormData((prev) => ({ ...prev, projectCode: value }))}
               placeholder="Select Project"
               hideIfEmpty={!fieldMap.projectCode.isVisibleInAnalysis}
+              required={fieldMap.projectCode.isRequired}
             />
           )}
         </div>
@@ -252,6 +277,7 @@ export default function AnalyzeForm({
           value={formData.note}
           onChange={(e) => setFormData((prev) => ({ ...prev, note: e.target.value }))}
           hideIfEmpty={!fieldMap.note.isVisibleInAnalysis}
+          required={fieldMap.note.isRequired}
         />
 
         {extraFields.map((field) => (
@@ -263,6 +289,7 @@ export default function AnalyzeForm({
             value={formData[field.code as keyof typeof formData]}
             onChange={(e) => setFormData((prev) => ({ ...prev, [field.code]: e.target.value }))}
             hideIfEmpty={!field.isVisibleInAnalysis}
+            required={field.isRequired}
           />
         ))}
 
@@ -276,13 +303,14 @@ export default function AnalyzeForm({
           />
         </div>
 
-        <div className="flex justify-end space-x-4 pt-6">
+        <div className="flex justify-between gap-4 pt-6">
           <Button
             type="button"
             onClick={() => startTransition(() => deleteAction(file.id))}
-            variant="outline"
+            variant="destructive"
             disabled={isDeleting}
           >
+            <Trash2 className="h-4 w-4" />
             {isDeleting ? "⏳ Deleting..." : "Delete"}
           </Button>
 
@@ -293,7 +321,10 @@ export default function AnalyzeForm({
                 Saving...
               </>
             ) : (
-              "Save as Transaction"
+              <>
+                <ArrowDownToLine className="h-4 w-4" />
+                Save as Transaction
+              </>
             )}
           </Button>
 

prisma/migrations/20250520185247_add_cached_parse_result/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "files" ADD COLUMN     "cached_parse_result" JSONB;

prisma/schema.prisma

@@ -152,15 +152,16 @@ model Field {
 }
 
 model File {
-  id         String   @id @default(uuid()) @db.Uuid
+  id                String   @id @default(uuid()) @db.Uuid
-  userId     String   @map("user_id") @db.Uuid
+  userId            String   @map("user_id") @db.Uuid
-  user       User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  user              User     @relation(fields: [userId], references: [id], onDelete: Cascade)
-  filename   String
+  filename          String
-  path       String
+  path              String
-  mimetype   String
+  mimetype          String
-  metadata   Json?
+  metadata          Json?
-  isReviewed Boolean  @default(false) @map("is_reviewed")
+  isReviewed        Boolean  @default(false) @map("is_reviewed")
-  createdAt  DateTime @default(now()) @map("created_at")
+  cachedParseResult Json?    @map("cached_parse_result")
+  createdAt         DateTime @default(now()) @map("created_at")
 
   @@map("files")
 }