feat: cache ai results on server + show success banner

2026-01-05 21:20:53 -06:00 · 2025-05-20 22:32:38 +02:00
parent c352f5eadd
commit f5c5bf75f6
11 changed files with 142 additions and 84 deletions
--- a/ai/analyze.ts
+++ b/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)
--- a/app/(app)/context.tsx
+++ b/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>
  )
 }

--- a/app/(app)/unsorted/actions.ts
+++ b/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)

--- a/app/(app)/unsorted/loading.tsx
+++ b/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>
--- a/app/(app)/unsorted/page.tsx
+++ b/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>
--- a/app/layout.tsx
+++ b/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>
--- a/components/transactions/bulk-actions.tsx
+++ b/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 { ChevronUp, Trash2 } from "lucide-react"
+import { 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 action = bulkActions.find((a) => a.id === actionId)
-    if (!action) return
-
-    if (action.confirmMessage) {
-      if (!confirm(action.confirmMessage)) return
-    }
+  const handleDelete = async () => {
+    const confirmMessage =
+      "Are you sure you want to delete these transactions and all their files? This action cannot be undone."
+    if (!confirm(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)
-      alert(`Failed to execute action: ${error}`)
+      console.error("Failed to delete transactions:", 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>
-        <DropdownMenuTrigger asChild>
-          <Button className="min-w-48" disabled={isLoading}>
-            {selectedIds.length} transactions
-            <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>
+      <Button variant="destructive" className="min-w-48 gap-2" disabled={isLoading} onClick={handleDelete}>
+        <Trash2 className="h-4 w-4" />
+        Delete {selectedIds.length} transactions
+      </Button>
    </div>
  )
 }
--- a/components/transactions/edit.tsx
+++ b/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>

--- a/components/unsorted/analyze-form.tsx
+++ b/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] = ""
-          return acc
-        },
-        {} as Record<string, string>
-      ),
-    }),
-    [file.filename, settings, extraFields]
-  )
+    }
+
+    // Add extra fields
+    const extraFieldsState = extraFields.reduce(
+      (acc, field) => {
+        acc[field.code] = ""
+        return acc
+      },
+      {} 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>

--- a/prisma/migrations/20250520185247_add_cached_parse_result/migration.sql
+++ b/prisma/migrations/20250520185247_add_cached_parse_result/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "files" ADD COLUMN     "cached_parse_result" JSONB;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -152,15 +152,16 @@ model Field {
 }

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

  @@map("files")
 }