feat: split into multiple items

ai/schema.ts

@@ -2,16 +2,30 @@ import { Field } from "@/prisma/client"
 
 export const fieldsToJsonSchema = (fields: Field[]) => {
   const fieldsWithPrompt = fields.filter((field) => field.llm_prompt)
-  const schema = {
+  const schemaProperties = fieldsWithPrompt.reduce(
-    type: "object",
-    properties: fieldsWithPrompt.reduce(
     (acc, field) => {
       acc[field.code] = { type: field.type, description: field.llm_prompt || "" }
       return acc
     },
     {} as Record<string, { type: string; description: string }>
-    ),
+  )
-    required: fieldsWithPrompt.map((field) => field.code),
+
+  const schema = {
+    type: "object",
+    properties: {
+      ...schemaProperties,
+      items: {
+        type: "array",
+        description: "Included items or products in the transaction which have own name and price",
+        items: {
+          type: "object",
+          properties: schemaProperties,
+          required: [...Object.keys(schemaProperties)],
+          additionalProperties: false,
+        },
+      },
+    },
+    required: [...Object.keys(schemaProperties), "items"],
     additionalProperties: false,
   }
 

app/(app)/files/actions.ts

@@ -70,7 +70,6 @@ export async function uploadFilesAction(formData: FormData): Promise<ActionState
     })
   )
 
-  // Update user storage used
   const storageUsed = await getDirectorySize(getUserUploadsDirectory(user))
   await updateUser(user.id, { storageUsed })
 

app/(app)/unsorted/actions.ts

@@ -8,15 +8,18 @@ import { transactionFormSchema } from "@/forms/transactions"
 import { ActionState } from "@/lib/actions"
 import { getCurrentUser, isAiBalanceExhausted, isSubscriptionExpired } from "@/lib/auth"
 import config from "@/lib/config"
-import { getTransactionFileUploadPath, getUserUploadsDirectory, safePathJoin } from "@/lib/files"
+import { getTransactionFileUploadPath, getUserUploadsDirectory, safePathJoin, unsortedFilePath } from "@/lib/files"
 import { DEFAULT_PROMPT_ANALYSE_NEW_FILE } from "@/models/defaults"
-import { deleteFile, getFileById, updateFile } from "@/models/files"
+import { createFile, deleteFile, getFileById, updateFile } from "@/models/files"
-import { createTransaction, updateTransactionFiles } from "@/models/transactions"
+import { createTransaction, updateTransactionFiles, TransactionData } from "@/models/transactions"
 import { updateUser } from "@/models/users"
 import { Category, Field, File, Project, Transaction } from "@/prisma/client"
 import { mkdir, rename } from "fs/promises"
 import { revalidatePath } from "next/cache"
 import path from "path"
+import { randomUUID } from "crypto"
+import { readFile, writeFile } from "fs/promises"
+import { getDirectorySize } from "@/lib/files"
 
 export async function analyzeFileAction(
   file: File,
@@ -141,3 +144,79 @@ export async function deleteUnsortedFileAction(
     return { success: false, error: "Failed to delete file" }
   }
 }
+
+export async function splitFileIntoItemsAction(
+  _prevState: ActionState<null> | null,
+  formData: FormData
+): Promise<ActionState<null>> {
+  try {
+    const user = await getCurrentUser()
+    const fileId = formData.get("fileId") as string
+    const items = JSON.parse(formData.get("items") as string) as TransactionData[]
+
+    if (!fileId || !items || items.length === 0) {
+      return { success: false, error: "File ID and items are required" }
+    }
+
+    // Get the original file
+    const originalFile = await getFileById(fileId, user.id)
+    if (!originalFile) {
+      return { success: false, error: "Original file not found" }
+    }
+
+    // Get the original file's content
+    const userUploadsDirectory = getUserUploadsDirectory(user)
+    const originalFilePath = safePathJoin(userUploadsDirectory, originalFile.path)
+    const fileContent = await readFile(originalFilePath)
+
+    // Create a new file for each item
+    for (const item of items) {
+      const fileUuid = randomUUID()
+      const fileName = `${originalFile.filename}-part-${item.name}`
+      const relativeFilePath = unsortedFilePath(fileUuid, fileName)
+      const fullFilePath = safePathJoin(userUploadsDirectory, relativeFilePath)
+
+      // Create directory if it doesn't exist
+      await mkdir(path.dirname(fullFilePath), { recursive: true })
+
+      // Copy the original file content
+      await writeFile(fullFilePath, fileContent)
+
+      // Create file record in database with the item data cached
+      await createFile(user.id, {
+        id: fileUuid,
+        filename: fileName,
+        path: relativeFilePath,
+        mimetype: originalFile.mimetype,
+        metadata: originalFile.metadata,
+        isSplitted: true,
+        cachedParseResult: {
+          name: item.name,
+          merchant: item.merchant,
+          description: item.description,
+          total: item.total,
+          currencyCode: item.currencyCode,
+          categoryCode: item.categoryCode,
+          projectCode: item.projectCode,
+          type: item.type,
+          issuedAt: item.issuedAt,
+          note: item.note,
+          text: item.text,
+        },
+      })
+    }
+
+    // Delete the original file
+    await deleteFile(fileId, user.id)
+
+    // Update user storage used
+    const storageUsed = await getDirectorySize(getUserUploadsDirectory(user))
+    await updateUser(user.id, { storageUsed })
+
+    revalidatePath("/unsorted")
+    return { success: true }
+  } catch (error) {
+    console.error("Failed to split file into items:", error)
+    return { success: false, error: `Failed to split file into items: ${error}` }
+  }
+}

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>}
+      <div>
-        {saveState?.error && <FormError>⚠️ {saveState.error}</FormError>}
+        {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 = () => {
+    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}>
+    <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,6 +144,11 @@ export default function AnalyzeForm({
 
   return (
     <>
+      {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 ? (
             <>
@@ -154,8 +162,9 @@ export default function AnalyzeForm({
             </>
           )}
         </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>}
+        <div>
-          {saveError && <FormError>⚠️ {saveError}</FormError>}
+          {deleteState?.error && <FormError>{deleteState.error}</FormError>}
+          {saveError && <FormError>{saveError}</FormError>}
         </div>
       </form>
     </>

forms/transactions.ts

@@ -47,5 +47,16 @@ export const transactionFormSchema = z
       .optional(),
     text: z.string().optional(),
     note: z.string().optional(),
+    items: z
+      .string()
+      .optional()
+      .transform((val) => {
+        if (!val || val.trim() === '') return []
+        try {
+          return JSON.parse(val)
+        } catch (e) {
+          throw new z.ZodError([{ message: "Invalid items JSON", path: ["items"], code: z.ZodIssueCode.custom }])
+        }
+      }),
   })
   .catchall(z.string())

lib/utils.ts

@@ -8,7 +8,7 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export function formatCurrency(total: number, currency: string, separator: string = "") {
+export function formatCurrency(total: number, currency: string) {
   try {
     return new Intl.NumberFormat(LOCALE, {
       style: "currency",

models/transactions.ts

@@ -5,6 +5,22 @@ import { getFields } from "./fields"
 import { deleteFile } from "./files"
 
 export type TransactionData = {
+  name?: string | null
+  description?: string | null
+  merchant?: string | null
+  total?: number | null
+  currencyCode?: string | null
+  convertedTotal?: number | null
+  convertedCurrencyCode?: string | null
+  type?: string | null
+  items?: TransactionData[] | null
+  note?: string | null
+  files?: string[] | null
+  extra?: Record<string, unknown>
+  categoryCode?: string | null
+  projectCode?: string | null
+  issuedAt?: Date | string | null
+  text?: string | null
   [key: string]: unknown
 }
 
@@ -105,6 +121,12 @@ export const getTransactionById = cache(async (id: string, userId: string): Prom
   })
 })
 
+export const getTransactionsByFileId = cache(async (fileId: string, userId: string): Promise<Transaction[]> => {
+  return await prisma.transaction.findMany({
+    where: { files: { array_contains: [fileId] }, userId },
+  })
+})
+
 export const createTransaction = async (userId: string, data: TransactionData): Promise<Transaction> => {
   const { standard, extra } = await splitTransactionDataExtraFields(data, userId)
 
@@ -112,8 +134,11 @@ export const createTransaction = async (userId: string, data: TransactionData):
     data: {
       ...standard,
       extra: extra,
-      userId,
+      items: data.items as Prisma.InputJsonValue,
-    },
+      user: {
+        connect: { id: userId }
+      }
+    } as Prisma.TransactionCreateInput,
   })
 }
 
@@ -125,7 +150,8 @@ export const updateTransaction = async (id: string, userId: string, data: Transa
     data: {
       ...standard,
       extra: extra,
-    },
+      items: data.items ? data.items as Prisma.InputJsonValue : [],
+    } as Prisma.TransactionUpdateInput,
   })
 }
 
@@ -143,8 +169,10 @@ export const deleteTransaction = async (id: string, userId: string): Promise<Tra
     const files = Array.isArray(transaction.files) ? transaction.files : []
 
     for (const fileId of files as string[]) {
+      if ((await getTransactionsByFileId(fileId, userId)).length <= 1) {
         await deleteFile(fileId, userId)
       }
+    }
 
     return await prisma.transaction.delete({
       where: { id, userId },
@@ -171,7 +199,7 @@ const splitTransactionDataExtraFields = async (
     {} as Record<string, Field>
   )
 
-  const standard: Omit<Partial<Transaction>, "extra"> = {}
+  const standard: TransactionData = {}
   const extra: Record<string, unknown> = {}
 
   Object.entries(data).forEach(([key, value]) => {
@@ -180,7 +208,7 @@ const splitTransactionDataExtraFields = async (
       if (fieldDef.isExtra) {
         extra[key] = value
       } else {
-        standard[key as keyof Omit<Transaction, "extra">] = value as any
+        standard[key] = value
       }
     }
   })

prisma/migrations/20250523104130_split_tx_items/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "files" ADD COLUMN     "is_splitted" BOOLEAN NOT NULL DEFAULT false;
+
+-- AlterTable
+ALTER TABLE "transactions" ADD COLUMN     "items" JSONB NOT NULL DEFAULT '[]';

prisma/schema.prisma

@@ -160,6 +160,7 @@ model File {
   mimetype          String
   metadata          Json?
   isReviewed        Boolean  @default(false) @map("is_reviewed")
+  isSplitted        Boolean  @default(false) @map("is_splitted")
   cachedParseResult Json?    @map("cached_parse_result")
   createdAt         DateTime @default(now()) @map("created_at")
 
@@ -178,6 +179,7 @@ model Transaction {
   convertedTotal        Int?      @map("converted_total")
   convertedCurrencyCode String?   @map("converted_currency_code")
   type                  String?   @default("expense")
+  items                 Json      @default("[]")
   note                  String?
   files                 Json      @default("[]")
   extra                 Json?