feat: split into multiple items

components/agents/currency-converter.tsx

@@ -19,7 +19,7 @@ async function getCurrencyRate(currencyCodeFrom: string, currencyCodeTo: string,
   return data.rate
 }
 
-export const FormConvertCurrency = ({
+export const CurrencyConverterTool = ({
   originalTotal,
   originalCurrencyCode,
   targetCurrencyCode,

components/agents/items-detect.tsx

@@ -0,0 +1,79 @@
+import { formatCurrency } from "@/lib/utils"
+import { Save, Split } from "lucide-react"
+import { Button } from "../ui/button"
+import { TransactionData } from "@/models/transactions"
+import { splitFileIntoItemsAction } from "@/app/(app)/unsorted/actions"
+import { useNotification } from "@/app/(app)/context"
+import { useState } from "react"
+import { Loader2 } from "lucide-react"
+import { File } from "@/prisma/client"
+
+export const ItemsDetectTool = ({ file, data }: { file?: File; data: TransactionData }) => {
+  const { showNotification } = useNotification()
+  const [isSplitting, setIsSplitting] = useState(false)
+
+  const handleSplit = async () => {
+    if (!file) {
+      console.error("No file selected")
+      return
+    }
+
+    setIsSplitting(true)
+    try {
+      const formData = new FormData()
+      formData.append("fileId", file.id)
+      formData.append("items", JSON.stringify(data.items))
+
+      const result = await splitFileIntoItemsAction(null, formData)
+      if (result.success) {
+        showNotification({ code: "global.banner", message: "Split successful!", type: "success" })
+        showNotification({ code: "sidebar.unsorted", message: "new" })
+        setTimeout(() => showNotification({ code: "sidebar.unsorted", message: "" }), 3000)
+      } else {
+        showNotification({ code: "global.banner", message: result.error || "Failed to split", type: "failed" })
+      }
+    } catch (error) {
+      console.error("Failed to split items:", error)
+      showNotification({ code: "global.banner", message: "Failed to split items", type: "failed" })
+    } finally {
+      setIsSplitting(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col divide-y divide-border">
+        {data.items?.map((item, index) => (
+          <div
+            key={`${item.name || ""}-${item.merchant || ""}-${item.description || ""}-${index}`}
+            className="flex flex-row items-start gap-10 py-2 hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex flex-col flex-1">
+              <div className="text-sm">{item.name}</div>
+              <div className="text-xs text-muted-foreground">{item.description}</div>
+            </div>
+            <div className="font-medium">
+              {formatCurrency((item.total || 0) * 100, item.currencyCode || data.currencyCode || "USD")}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {file && data.items && data.items.length > 1 && (
+        <Button onClick={handleSplit} className="mt-2 px-4 py-2" disabled={isSplitting}>
+          {isSplitting ? (
+            <>
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Splitting...
+            </>
+          ) : (
+            <>
+              <Split className="w-4 h-4 mr-2" />
+              Split into {data.items.length} individual transactions
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  )
+}

components/agents/tool-window.tsx

@@ -2,10 +2,10 @@ import { Bot } from "lucide-react"
 
 export default function ToolWindow({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="border-2 border-purple-500 bg-purple-100 rounded-md overflow-hidden">
+    <div className="border-2 border-purple-500 bg-purple-100 rounded-md overflow-hidden break-all">
       <div className="flex flex-row gap-1 items-center font-bold text-xs bg-purple-200 text-purple-800 p-1">
         <Bot className="w-4 h-4" />
-        <span>Tool called: {title}</span>
+        <span>{title}</span>
       </div>
       <div className="p-4">{children}</div>
     </div>

components/files/upload-button.tsx

@@ -7,6 +7,7 @@ import config from "@/lib/config"
 import { Loader2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { ComponentProps, startTransition, useRef, useState } from "react"
+import { FormError } from "../forms/error"
 
 export function UploadButton({ children, ...props }: { children: React.ReactNode } & ComponentProps<typeof Button>) {
   const router = useRouter()
@@ -69,7 +70,7 @@ export function UploadButton({ children, ...props }: { children: React.ReactNode
         )}
       </Button>
 
-      {uploadError && <span className="text-red-500">⚠️ {uploadError}</span>}
+      {uploadError && <FormError>{uploadError}</FormError>}
     </div>
   )
 }

components/forms/error.tsx

@@ -1,5 +1,16 @@
 import { cn } from "@/lib/utils"
+import { AlertCircle } from "lucide-react"
 
 export function FormError({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <p className={cn("text-red-500 mt-4 overflow-hidden", className)}>{children}</p>
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 px-3 py-2 rounded-md bg-red-50 text-red-700 border border-red-200",
+        className
+      )}
+    >
+      <AlertCircle className="w-4 h-4 flex-shrink-0" />
+      <p className="text-sm">{children}</p>
+    </div>
+  )
 }

components/transactions/create.tsx

@@ -129,9 +129,9 @@ export default function TransactionCreateForm({
             "Create and Add Files"
           )}
         </Button>
-
-        {createState?.error && <FormError>⚠️ {createState.error}</FormError>}
       </div>
+
+      {createState?.error && <FormError>{createState.error}</FormError>}
     </form>
   )
 }

components/transactions/edit.tsx

@@ -13,6 +13,9 @@ import { format } from "date-fns"
 import { Loader2, Save, Trash2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { startTransition, useActionState, useEffect, useMemo, useState } from "react"
+import ToolWindow from "@/components/agents/tool-window"
+import { ItemsDetectTool } from "@/components/agents/items-detect"
+import { TransactionData } from "@/models/transactions"
 
 export default function TransactionEditForm({
   transaction,
@@ -47,6 +50,7 @@ export default function TransactionEditForm({
     projectCode: transaction.projectCode || settings.default_project,
     issuedAt: transaction.issuedAt ? format(transaction.issuedAt, "yyyy-MM-dd") : "",
     note: transaction.note || "",
+    items: transaction.items || [],
     ...extraFields.reduce(
       (acc, field) => {
         acc[field.code] = transaction.extra?.[field.code as keyof typeof transaction.extra] || ""
@@ -205,13 +209,19 @@ export default function TransactionEditForm({
             type="text"
             title={field.name}
             name={field.code}
-            defaultValue={formData[field.code as keyof typeof formData] || ""}
+            defaultValue={(formData[field.code as keyof typeof formData] as string) || ""}
             isRequired={field.isRequired}
             className={field.type === "number" ? "max-w-36" : "max-w-full"}
           />
         ))}
       </div>
 
+      {formData.items && Array.isArray(formData.items) && formData.items.length > 0 && (
+        <ToolWindow title="Items or products detected">
+          <ItemsDetectTool data={formData as TransactionData} />
+        </ToolWindow>
+      )}
+
       <div className="flex justify-between space-x-4 pt-6">
         <Button type="button" onClick={handleDelete} variant="destructive" disabled={isDeleting}>
           <>
@@ -233,9 +243,11 @@ export default function TransactionEditForm({
             </>
           )}
         </Button>
+      </div>
 
-        {deleteState?.error && <FormError>⚠️ {deleteState.error}</FormError>}
-        {saveState?.error && <FormError>⚠️ {saveState.error}</FormError>}
+      <div>
+        {deleteState?.error && <FormError>{deleteState.error}</FormError>}
+        {saveState?.error && <FormError>{saveState.error}</FormError>}
       </div>
     </form>
   )

components/unsorted/analyze-all-button.tsx

@@ -1,19 +1,35 @@
 "use client"
 
 import { Button } from "@/components/ui/button"
-import { Swords } from "lucide-react"
+import { Save, Swords } from "lucide-react"
 
 export function AnalyzeAllButton() {
   const handleAnalyzeAll = () => {
-    document.querySelectorAll("button[data-analyze-button]").forEach((button) => {
-      ;(button as HTMLButtonElement).click()
-    })
+    if (typeof document !== "undefined") {
+      document.querySelectorAll("button[data-analyze-button]").forEach((button) => {
+        ;(button as HTMLButtonElement).click()
+      })
+    }
+  }
+
+  const handleSaveAll = () => {
+    if (typeof document !== "undefined") {
+      document.querySelectorAll("button[data-save-button]").forEach((button) => {
+        ;(button as HTMLButtonElement).click()
+      })
+    }
   }
 
   return (
-    <Button variant="outline" className="flex items-center gap-2" onClick={handleAnalyzeAll}>
-      <Swords className="h-4 w-4" />
-      Analyze all
-    </Button>
+    <div className="flex flex-row gap-2">
+      <Button variant="outline" className="flex items-center gap-2" onClick={handleSaveAll}>
+        <Save className="h-4 w-4" />
+        Save all
+      </Button>
+      <Button className="flex items-center gap-2" onClick={handleAnalyzeAll}>
+        <Swords className="h-4 w-4" />
+        Analyze all
+      </Button>
+    </div>
   )
 }

components/unsorted/analyze-form.tsx

@@ -2,7 +2,7 @@
 
 import { useNotification } from "@/app/(app)/context"
 import { analyzeFileAction, deleteUnsortedFileAction, saveFileAsTransactionAction } from "@/app/(app)/unsorted/actions"
-import { FormConvertCurrency } from "@/components/forms/convert-currency"
+import { CurrencyConverterTool } from "@/components/agents/currency-converter"
 import { FormError } from "@/components/forms/error"
 import { FormSelectCategory } from "@/components/forms/select-category"
 import { FormSelectCurrency } from "@/components/forms/select-currency"
@@ -14,7 +14,9 @@ import { Category, Currency, Field, File, Project } from "@/prisma/client"
 import { format } from "date-fns"
 import { Brain, Loader2, Trash2, ArrowDownToLine } from "lucide-react"
 import { startTransition, useActionState, useMemo, useState } from "react"
-import ToolWindow from "../agents/tool-window"
+import ToolWindow from "@/components/agents/tool-window"
+import { ItemsDetectTool } from "@/components/agents/items-detect"
+import { Badge } from "@/components/ui/badge"
 
 export default function AnalyzeForm({
   file,
@@ -65,6 +67,7 @@ export default function AnalyzeForm({
       issuedAt: "",
       note: "",
       text: "",
+      items: [],
     }
 
     // Add extra fields
@@ -141,21 +144,27 @@ export default function AnalyzeForm({
 
   return (
     <>
-      <Button className="w-full mb-6 py-6 text-lg" onClick={startAnalyze} disabled={isAnalyzing} data-analyze-button>
-        {isAnalyzing ? (
-          <>
-            <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-            <span>{analyzeStep}</span>
-          </>
-        ) : (
-          <>
-            <Brain className="mr-1 h-4 w-4" />
-            <span>Analyze with AI</span>
-          </>
-        )}
-      </Button>
+      {file.isSplitted ? (
+        <div className="flex justify-end">
+          <Badge variant="outline">This file has been split</Badge>
+        </div>
+      ) : (
+        <Button className="w-full mb-6 py-6 text-lg" onClick={startAnalyze} disabled={isAnalyzing} data-analyze-button>
+          {isAnalyzing ? (
+            <>
+              <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+              <span>{analyzeStep}</span>
+            </>
+          ) : (
+            <>
+              <Brain className="mr-1 h-4 w-4" />
+              <span>Analyze with AI</span>
+            </>
+          )}
+        </Button>
+      )}
 
-      {analyzeError && <FormError>⚠️ {analyzeError}</FormError>}
+      <div>{analyzeError && <FormError>{analyzeError}</FormError>}</div>
 
       <form className="space-y-4" action={saveAsTransaction}>
         <input type="hidden" name="fileId" value={file.id} />
@@ -222,7 +231,7 @@ export default function AnalyzeForm({
 
         {formData.total != 0 && formData.currencyCode && formData.currencyCode !== settings.default_currency && (
           <ToolWindow title={`Exchange rate on ${format(new Date(formData.issuedAt || Date.now()), "LLLL dd, yyyy")}`}>
-            <FormConvertCurrency
+            <CurrencyConverterTool
               originalTotal={formData.total}
               originalCurrencyCode={formData.currencyCode}
               targetCurrencyCode={settings.default_currency}
@@ -293,7 +302,14 @@ export default function AnalyzeForm({
           />
         ))}
 
+        {formData.items && formData.items.length > 0 && (
+          <ToolWindow title="Items or products detected">
+            <ItemsDetectTool file={file} data={formData} />
+          </ToolWindow>
+        )}
+
         <div className="hidden">
+          <input type="text" name="items" defaultValue={JSON.stringify(formData.items)} />
           <FormTextarea
             title={fieldMap.text.name}
             name="text"
@@ -314,7 +330,7 @@ export default function AnalyzeForm({
             {isDeleting ? "⏳ Deleting..." : "Delete"}
           </Button>
 
-          <Button type="submit" disabled={isSaving}>
+          <Button type="submit" disabled={isSaving} data-save-button>
             {isSaving ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -327,9 +343,11 @@ export default function AnalyzeForm({
               </>
             )}
           </Button>
+        </div>
 
-          {deleteState?.error && <FormError>⚠️ {deleteState.error}</FormError>}
-          {saveError && <FormError>⚠️ {saveError}</FormError>}
+        <div>
+          {deleteState?.error && <FormError>{deleteState.error}</FormError>}
+          {saveError && <FormError>{saveError}</FormError>}
         </div>
       </form>
     </>