Use document count only instead of whole document list

src/app/groups/[groupId]/expenses/documents-count.tsx

@@ -1,18 +1,11 @@
-import { ExpenseFormValues } from '@/lib/schemas'
 import { Paperclip } from 'lucide-react'
-import { useTranslations } from 'next-intl'
 
-type DocumentCount = {
-  documents: ExpenseFormValues['documents']
-}
-export function DocumentsCount({ documents }: DocumentCount) {
-  const t = useTranslations('ExpenseCard')
-  const documentsCount = documents.length
-  if (documentsCount === 0) return <></>
+export function DocumentsCount({ count }: { count: number }) {
+  if (count === 0) return <></>
   return (
     <div className="flex items-center">
       <Paperclip className="w-3.5 h-3.5 mr-1 mt-0.5 text-muted-foreground" />
-      <span>{documentsCount}</span>
+      <span>{count}</span>
     </div>
   )
 }

src/app/groups/[groupId]/expenses/expense-card.tsx

@@ -77,7 +77,7 @@ export function ExpenseCard({ expense, currency, groupId }: Props) {
           {formatCurrency(currency, expense.amount, locale)}
         </div>
         <div className="text-xs text-muted-foreground">
-          <DocumentsCount documents={expense.documents} />
+          <DocumentsCount count={expense._count.documents} />
         </div>
         <div className="text-xs text-muted-foreground">
           {formatDate(expense.expenseDate, locale, { dateStyle: 'medium' })}

src/lib/api.ts

@@ -286,7 +286,7 @@ export async function getGroupExpenses(
       },
       splitMode: true,
       title: true,
-      documents: true,
+      _count: { select: { documents: true } },
     },
     where: {
       groupId,